@advdominion/css-var

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)
+```

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;
+};

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"
+  }
+}

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"