feat!: improved plugin options (#11)

* feat: allow gray override and custom colors * tweak: new size scale for display typography * feat!: improved plugin options
krystal · Apr 5, 2024 · 8dddd74 · 8dddd74
1 parent dcaf3e0
commit 8dddd74
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 82 deletions.
diff --git a/src/colors.js b/src/colors.js
@@ -1,3 +1,4 @@
+const tailwindColors = require("tailwindcss/colors");
 // const { prefixKeys } = require("./utilities");
 
 const base = {
@@ -7,6 +8,14 @@ const base = {
   white: "#ffffff",
 };
 
+const deprecated = [
+  "blueGray",
+  "coolGray",
+  "lightBlue",
+  "trueGray",
+  "warmGray",
+];
+
 const grays = {
   blue: {
     25: "",
@@ -307,11 +316,40 @@ const states = {
   },
 };
 
-module.exports = {
+const colors = {
   ...base,
   // ...prefixKeys(grays, "gray"),
   // ...prefixKeys(krystal, "krystal"),
   ...primary,
   // ...secondary,
   ...states,
 };
+
+module.exports = (options = {}) => {
+  const custom = options.custom ?? {};
+  const defaults = {
+    gray: "carbon",
+    primary: "carbon",
+    ...(options.defaults ?? {}),
+  };
+  const tailwind = options.tailwind ?? false;
+
+  const gray = defaults.gray ?? "carbon";
+  const primary = defaults.primary ?? "carbon";
+
+  const palette = { ...colors, ...custom };
+
+  if (tailwind) {
+    for (const key of Object.keys(tailwindColors)) {
+      if (!palette[key] && !deprecated.includes(key)) {
+        palette[key] = tailwindColors[key];
+      }
+    }
+  }
+
+  return {
+    ...palette,
+    gray: palette[gray],
+    primary: palette[primary],
+  };
+};
diff --git a/src/extensions.js b/src/extensions.js
@@ -0,0 +1,7 @@
+const spacing = {
+  4.5: "1.125.rem",
+};
+
+module.exports = {
+  spacing,
+};
diff --git a/src/index.js b/src/index.js
@@ -1,57 +1,47 @@
+const fs = require("fs");
 const path = require("path");
-const tailwindColors = require("tailwindcss/colors");
 const { withOptions } = require("tailwindcss/plugin");
 
 const colors = require("./colors");
+const extensions = require("./extensions");
 const typography = require("./typography");
-const { getShardContentPaths, getShardPath } = require("./utilities");
 
-const TAILWIND_DEPRECATED_COLORS = Object.freeze([
-  "blueGray",
-  "coolGray",
-  "lightBlue",
-  "trueGray",
-  "warmGray",
-]);
+const { getShardPath, getShardStaticContentPaths } = require("./utilities");
+
+const defaultPaletteOutputPath = path.join(
+  process.cwd(),
+  "config",
+  "colors.json"
+);
 
 const plugin = withOptions(
   function (options = {}) {
-    const shardPath = options.path ?? getShardPath();
+    const paths = options.paths ?? {};
+
+    const shard = paths.shard ?? getShardPath();
 
-    if (!shardPath) {
+    if (!shard) {
       throw new Error("Shard is not installed");
     }
 
     return function ({ config }) {
-      const paths = getShardContentPaths(shardPath);
+      const paths = getShardStaticContentPaths(shard);
       const { files } = config("content");
 
-      paths.forEach((file) => files.push(path.join(shardPath, file)));
+      paths.forEach((file) => files.push(path.join(shard, file)));
     };
   },
   function (options = {}) {
-    const defaultColors = options.defaultColors ?? false;
-    const primaryColor = options.primaryColor ?? "carbon";
+    const paths = options.paths ?? {};
+    const json = paths.json ?? defaultPaletteOutputPath;
+    const palette = colors(options.colors);
 
-    const colorsObject = {
-      ...(defaultColors
-        ? Object.keys(tailwindColors).reduce(
-            (object, key) =>
-              TAILWIND_DEPRECATED_COLORS.includes(key)
-                ? object
-                : {
-                    ...object,
-                    [key]: tailwindColors[key],
-                  },
-            {}
-          )
-        : {}),
-      ...colors,
-      gray: colors.carbon,
-      primary: colors[primaryColor],
-    };
+    if (json) {
+      fs.writeFileSync(json, JSON.stringify(palette, null, 2), "utf-8");
+    }
 
     return {
+      // TODO: Custom extraction logic so a magic comment can be used instead inside templates
       safelist: [
         {
           pattern: /bg-+/,
@@ -67,12 +57,10 @@ const plugin = withOptions(
         },
       ],
       theme: {
-        colors: colorsObject,
+        colors: palette,
         fontSize: typography,
         extend: {
-          spacing: {
-            4.5: "1.125.rem",
-          },
+          ...extensions,
         },
       },
     };

diff --git a/src/typography.js b/src/typography.js
@@ -1,63 +1,71 @@
 const { fontSize } = require("tailwindcss/defaultTheme");
 
-module.exports = {
-  ...["sm", "base", "lg"].reduce(
-    (object, size) => ({
-      ...object,
-      [size]: fontSize[size],
-    }),
-    {}
-  ),
-  xs: [
-    "0.75rem",
-    {
-      lineHeight: "1.125rem",
-    },
-  ],
-  sm: [
-    "0.875rem",
-    {
-      lineHeight: "1.5rem",
-    },
-  ],
-  md: fontSize.base,
+const customHeadingFontSizes = {
   "h-xs": [
-    "1.25rem",
-    {
-      lineHeight: "1.75rem",
-    },
-  ],
-  "h-sm": [
     "1.5rem",
     {
       lineHeight: "2rem",
     },
   ],
-  "h-md": [
+  "h-sm": [
     "1.875rem",
     {
       lineHeight: "2.375rem",
     },
   ],
-  "h-lg": [
+  "h-md": [
     "2.25rem",
     {
-      letterSpacing: "-0.02em",
       lineHeight: "2.75rem",
     },
   ],
-  "h-xl": [
+  "h-lg": [
     "3rem",
     {
       letterSpacing: "-0.02em",
       lineHeight: "3.75rem",
     },
   ],
-  "h-2xl": [
+  "h-xl": [
     "3.75rem",
     {
       letterSpacing: "-0.02em",
       lineHeight: "4.5rem",
     },
   ],
+  "h-2xl": [
+    "4.5rem",
+    {
+      letterSpacing: "-0.02em",
+      lineHeight: "5.625rem",
+    },
+  ],
+};
+
+const customStandardFontSizes = {
+  xs: [
+    "0.75rem",
+    {
+      lineHeight: "1.125rem",
+    },
+  ],
+  sm: [
+    "0.875rem",
+    {
+      lineHeight: "1.5rem",
+    },
+  ],
+  md: fontSize.base,
+};
+
+module.exports = {
+  ...["sm", "base", "lg"].reduce(
+    (object, size) => ({
+      ...object,
+      [size]: fontSize[size],
+    }),
+    {}
+  ),
+  ...customStandardFontSizes,
+  ...customHeadingFontSizes,
 };
diff --git a/src/utilities.js b/src/utilities.js
@@ -2,34 +2,40 @@ const fs = require("fs");
 const path = require("path");
 const { execSync } = require("child_process");
 
-const getShardContentPaths = (directory) =>
-  JSON.parse(
-    fs.readFileSync(path.join(directory, "static", "paths.json"), "utf8")
-  );
-
-const getShardPath = () =>
-  execSync(
+const getShardPath = () => {
+  return execSync(
     `bundle exec ruby -e "puts Bundler.rubygems.find_name('shard')&.first&.full_gem_path"`,
     {
       encoding: "utf-8",
     }
   ).trim();
+};
 
-const prefixKey = (key, prefix) => [prefix, titleize(key)].join("");
+const getShardStaticContentPaths = (directory) => {
+  return JSON.parse(
+    fs.readFileSync(path.join(directory, "static", "paths.json"), "utf8")
+  );
+};
+
+const prefixKey = (key, prefix) => {
+  return [prefix, titleize(key)].join("");
+};
 
-const prefixKeys = (palettes, prefix) =>
-  palettes.reduce((o, [k, v]) => {
+const prefixKeys = (palettes, prefix) => {
+  return palettes.reduce((o, [k, v]) => {
     return {
       ...o,
       [prefixedKey(k, prefix)]: v,
     };
   }, {});
+};
 
-const titleize = (string) =>
-  `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
+const titleize = (string) => {
+  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
+};
 
 module.exports = {
-  getShardContentPaths,
+  getShardStaticContentPaths,
   getShardPath,
   prefixKey,
   prefixKeys,