diff --git a/packages/css-var/README.md b/packages/css-var/README.md new file mode 100644 index 0000000..68add4f --- /dev/null +++ b/packages/css-var/README.md @@ -0,0 +1,25 @@ +# css-var + +Получение значений CSS-переменных в JS + +## Использование + +```css +:root { + --z-index: 100; + --height: 100px; + --duration-ms: 100ms; + --duration-s: 100s; + --easing: cubic-bezier(0.4, 0, 0.2, 1); +} +``` + +```js +import { cssVar } from '@advdominion/css-var'; + +cssVar('--z-index'); // '1' (String) +cssVar('--height'); // '100px' (String) +cssVar('--duration-ms'); // 100 (Number) +cssVar('--duration-s'); // 100 (Number) +cssVar('--easing'); // cubic-bezier(0.4, 0, 0.2, 1) (String) +``` diff --git a/packages/css-var/index.js b/packages/css-var/index.js new file mode 100644 index 0000000..4090e7a --- /dev/null +++ b/packages/css-var/index.js @@ -0,0 +1,9 @@ +export const cssVar = (name, element = document.documentElement) => { + const value = window.getComputedStyle(element).getPropertyValue(name); + const durationRegExp = /(^[\d.]+)(ms|s)$/; + if (durationRegExp.test(value)) { + const [, numericValue, unit] = durationRegExp.exec(value); + return unit === 's' ? numericValue * 1000 : Number(numericValue); + } + return value; +}; diff --git a/packages/css-var/package.json b/packages/css-var/package.json new file mode 100644 index 0000000..1fd37dd --- /dev/null +++ b/packages/css-var/package.json @@ -0,0 +1,14 @@ +{ + "name": "@advdominion/css-var", + "version": "1.0.0", + "type": "module", + "main": "index.js", + "repository": { + "type": "git", + "url": "https://gitea.optiweb.ru/public/frontend.git" + }, + "license": "MIT", + "publishConfig": { + "access": "public" + } +} diff --git a/yarn.lock b/yarn.lock index 7b81e33..4274933 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14,6 +14,12 @@ __metadata: languageName: unknown linkType: soft +"@advdominion/css-var@workspace:packages/css-var": + version: 0.0.0-use.local + resolution: "@advdominion/css-var@workspace:packages/css-var" + languageName: unknown + linkType: soft + "@advdominion/eslint-config@workspace:*, @advdominion/eslint-config@workspace:packages/eslint-config": version: 0.0.0-use.local resolution: "@advdominion/eslint-config@workspace:packages/eslint-config"