@trackunit/css-tailwind-custom-properties-plugin 0.0.12 → 0.0.13

package/index.js

@@ -0,0 +1,55 @@
+import plugin from 'tailwindcss/plugin';
+
+/**
+ * Converts an array of keys to a valid CSS custom property name.
+ *
+ * @param keys An array of strings representing the keys to be converted to a CSS custom property name.
+ * @returns { string } A string representing the CSS custom property name.
+ */
+const keysToCssVariableName = (keys) => `--${keys.join("-")}`.replace(/[^a-zA-Z0-9]/g, "-");
+/**
+ * Flattens a nested object containing variables declarations and their values
+ * into a flat object where the keys are the CSS variable names and the values are
+ * the corresponding CSS variable values.
+ *
+ * @param {object} values - The object containing the nested variables declarations and their values
+ * @param {object} [output] - The flat object to store the generated CSS variable names and values
+ * @param {string[]} [keys] - An array of keys representing the current path of the object being processed
+ * @returns {VariablesDeclerationObject} - The generated flat object containing the CSS variable names and values
+ */
+const flattenVariablesDeclerationValues = (values, output = {}, keys = []) => {
+    for (const [key, value] of Object.entries(values)) {
+        let flattend = {};
+        if (typeof value === "object") {
+            flattend = flattenVariablesDeclerationValues(value, output, [...keys, key]);
+        }
+        else {
+            flattend[keysToCssVariableName([...keys, key])] = value;
+        }
+        output = Object.assign(Object.assign({}, flattend), output);
+    }
+    return output;
+};
+/**
+ * Converts a object containing CSS variables to an array of CSS rules.
+ *
+ * @param variablesDecleration An object containing the CSS variables and their corresponding values.
+ * @returns {CSSRuleObject[]} An array of CSS rules.
+ */
+const variablesToCSSRules = (variablesDecleration) => {
+    if (!variablesDecleration) {
+        return [];
+    }
+    const cssRules = Object.entries(variablesDecleration).map(([key, value]) => ({
+        [key === "DEFAULT" ? ":root" : `.${key}`]: flattenVariablesDeclerationValues(value),
+    }));
+    return cssRules;
+};
+
+const CssTailwindCustomPropertiesPlugin = plugin(({ addBase, theme }) => {
+    const variablesDeclerationFromThemeConfig = theme("variables", {});
+    const cssRules = variablesToCSSRules(variablesDeclerationFromThemeConfig);
+    addBase(cssRules);
+});
+
+export { CssTailwindCustomPropertiesPlugin, flattenVariablesDeclerationValues, keysToCssVariableName, variablesToCSSRules };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@trackunit/css-tailwind-custom-properties-plugin",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "./index.cjs",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "type": "commonjs",
+  "module": "./index.js",
+  "type": "module",
   "types": "./src/index.d.ts"
 }