refactor: split utility functions to different file

enjidev · enjidev · commit 940f3a929b05 · 2022-12-03T11:30:58.000+07:00
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.3.0",
     "jest": "^26.6.3",
+    "kebab-case": "^1.0.2",
     "lint-staged": "^10.5.2",
     "lodash": "^4.17.20",
     "postcss": "^8.1.9",
diff --git a/src/index.js b/src/index.js
@@ -1,20 +1,12 @@
 const plugin = require('tailwindcss/plugin');
 const colors = require('tailwindcss/colors');
-const convert = require('color-convert');
 const omit = require('lodash/omit');
 const pick = require('lodash/pick');
 const isArray = require('lodash/isArray');
 const isEmpty = require('lodash/isEmpty');
 const forEach = require('lodash/forEach');
 
-function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`;
-  };
-}
+const { hexToRgb, toKebabCase, withOpacityValue } = require('./utils');
 
 module.exports = plugin.withOptions(
   function (options = {}) {
@@ -34,12 +26,12 @@ module.exports = plugin.withOptions(
       const baseStyle = {};
 
       forEach(accentColors, (colorShades, name) => {
-        const selector = `[data-accent='${name}']`;
+        const selector = `[data-accent='${toKebabCase(name)}']`;
         baseStyle[selector] = {};
 
         forEach(colorShades, (value, shade) => {
           const cssVar = `--color-accent-${shade}`;
-          baseStyle[selector][cssVar] = convert.hex.rgb(value).join(' ');
+          baseStyle[selector][cssVar] = hexToRgb(value);
         });
       });
 
diff --git a/src/utils.js b/src/utils.js
@@ -0,0 +1,19 @@
+const convert = require('color-convert');
+const kebabCase = require('kebab-case');
+
+module.exports.hexToRgb = function (hex) {
+  return convert.hex.rgb(hex).join(' ');
+};
+
+module.exports.toKebabCase = function (string) {
+  return kebabCase(string);
+};
+
+module.exports.withOpacityValue = function (variable) {
+  return ({ opacityValue }) => {
+    if (opacityValue === undefined) {
+      return `rgb(var(${variable}))`;
+    }
+    return `rgb(var(${variable}) / ${opacityValue})`;
+  };
+};
diff --git a/yarn.lock b/yarn.lock
@@ -3674,6 +3674,11 @@ jsonparse@^1.2.0:
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
+kebab-case@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/kebab-case/-/kebab-case-1.0.2.tgz#5eac97d5d220acf606d40e3c0ecfea21f1f9e1eb"
+  integrity sha512-7n6wXq4gNgBELfDCpzKc+mRrZFs7D+wgfF5WRFLNAr4DA/qtr9Js8uOAVAfHhuLMfAcQ0pRKqbpjx+TcJVdE1Q==
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
