vueless 0.0.637 → 0.0.638

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.637",
+  "version": "0.0.638",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -22,9 +22,8 @@ import {
   GRAYSCALE_COLOR,
 } from "./constants.js";
 
-const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
-const brandColor = process.env.VUELESS_BRAND || DEFAULT_BRAND_COLOR;
-const grayColor = process.env.VUELESS_GRAY || DEFAULT_GRAY_COLOR;
+const globalSettings = process.env.VUELESS_GLOBAL_SETTINGS || {};
+const isStrategyOverride = globalSettings.strategy === "override";
 
 /**
  * Vueless Tailwind CSS `content` config.
@@ -106,15 +105,16 @@ export const vuelessTailwindConfig = {
     },
     configViewer: {
       themeReplacements: {
-        // TODO: Set colors from vueless.config.{js|ts} if it present.
-        "var(--vl-ring)": DEFAULT_RING,
-        "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
-        "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
-        "var(--vl-rounding-sm)": DEFAULT_ROUNDING_SM,
-        "var(--vl-rounding)": DEFAULT_ROUNDING,
-        "var(--vl-rounding-lg)": DEFAULT_ROUNDING_LG,
-        ...getReplacementColors(GRAY_COLOR, grayColor),
-        ...getReplacementColors(BRAND_COLOR, brandColor),
+        /* eslint-disable prettier/prettier */
+        "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
+        "var(--vl-ring-offset)": globalSettings.ringOffset || DEFAULT_RING_OFFSET,
+        "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
+        "var(--vl-rounding-sm)": globalSettings.roundingSm || DEFAULT_ROUNDING_SM,
+        "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,
+        "var(--vl-rounding-lg)": globalSettings.roundingLg || DEFAULT_ROUNDING_LG,
+        ...getReplacementColors(GRAY_COLOR, globalSettings.gray || DEFAULT_GRAY_COLOR),
+        ...getReplacementColors(BRAND_COLOR, globalSettings.brand || DEFAULT_BRAND_COLOR),
+        /* eslint-enable prettier/prettier */
       },
     },
   },

package/utils/node/tailwindSafelist.js

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { merge } from "lodash-es";
+import { merge, cloneDeep } from "lodash-es";
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -11,17 +11,17 @@ import { createGetMergedConfig } from "./mergeConfigs.js";
 import { getComponentDefaultConfig, getDirFiles } from "./helper.js";
 import {
   COMPONENTS,
-  BRAND_COLORS,
-  BRAND_COLOR,
   GRAY_COLOR,
+  BRAND_COLOR,
+  BRAND_COLORS,
+  STRATEGY_TYPE,
+  SYSTEM_CONFIG_KEY,
   DYNAMIC_COLOR_PATTERN,
-  TAILWIND_VARIANT_DELIMITER,
   TAILWIND_MERGE_EXTENSION,
-  NESTED_COMPONENT_PATTERN_REG_EXP,
+  TAILWIND_VARIANT_DELIMITER,
   TAILWIND_COLOR_OPACITY_DELIMITER,
+  NESTED_COMPONENT_PATTERN_REG_EXP,
   TAILWIND_VARIANT_DELIMITER_REG_EXP,
-  STRATEGY_TYPE,
-  SYSTEM_CONFIG_KEY,
 } from "../../constants.js";
 
 const cwd = process.cwd();
@@ -106,8 +106,14 @@ export async function createTailwindSafelist({ mode, env, debug, targetFiles = [
     console.log("VUELESS_SAFELIST", mergedSafelist);
   }
 
+  const globalSettings = cloneDeep(vuelessConfig);
+
+  delete globalSettings.component;
+  delete globalSettings.directive;
+  delete globalSettings.tailwindMerge;
+
+  process.env.VUELESS_GLOBAL_SETTINGS = globalSettings;
   process.env.VUELESS_SAFELIST = JSON.stringify(mergedSafelist);
-  process.env.VUELESS_STRATEGY = vuelessConfig.strategy || "";
 }
 
 function getSafelistClasses(config) {