@udixio/tailwind 1.3.0 → 1.4.0

package/dist/tailwind.plugin-SpxAzB55.cjs

@@ -0,0 +1,239 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const plugin = require("tailwindcss/plugin");
+const theme = require("@udixio/theme");
+const defaultConfig = {
+  statePrefix: "state",
+  disabledStyles: {
+    textOpacity: 0.38,
+    backgroundOpacity: 0.12
+  },
+  transition: {
+    duration: 150
+  }
+};
+const state = plugin.withOptions(({ colorKeys }) => {
+  const resolved = {
+    ...defaultConfig,
+    disabledStyles: {
+      ...defaultConfig.disabledStyles,
+      ...{}
+    },
+    transition: {
+      ...defaultConfig.transition,
+      ...{}
+    }
+  };
+  return ({ addComponents }) => {
+    const newComponents = {};
+    for (const isGroup of [false, true]) {
+      const group = isGroup ? "group-" : "";
+      for (const colorName of colorKeys) {
+        const className = `.${group}${resolved.statePrefix}-${colorName}`;
+        newComponents[className] = {
+          [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
+          [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
+          [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
+          [`@apply transition-colors`]: {},
+          [`@apply duration-${resolved.transition.duration}`]: {},
+          [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+          [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+        };
+      }
+    }
+    for (const colorName of colorKeys) {
+      for (const stateName of ["hover", "active", "focus", "disabled"]) {
+        const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
+        if (stateName === "disabled") {
+          newComponents[className] = {
+            [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+            [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+          };
+        } else {
+          const opacity = stateName === "hover" ? 0.08 : 0.12;
+          newComponents[className] = {
+            [`@apply bg-${colorName}/[${opacity}]`]: {}
+          };
+        }
+      }
+    }
+    addComponents(newComponents);
+  };
+});
+const font = plugin.withOptions((options) => {
+  return ({
+    addUtilities,
+    theme: theme2
+  }) => {
+    const { fontStyles, responsiveBreakPoints } = options;
+    const pixelUnit = "rem";
+    const newUtilities = {};
+    const baseTextStyle = (sizeValue) => ({
+      fontSize: sizeValue.fontSize + pixelUnit,
+      fontWeight: sizeValue.fontWeight,
+      lineHeight: sizeValue.lineHeight + pixelUnit,
+      letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
+      fontFamily: theme2("fontFamily." + sizeValue.fontFamily)
+    });
+    const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
+      [`@media (min-width: ${theme2("screens." + breakPointName, {})})`]: {
+        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
+        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit
+      }
+    });
+    for (const [roleName, roleValue] of Object.entries(fontStyles)) {
+      for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
+        newUtilities[`.text-${roleName}-${sizeName}`] = {
+          ...baseTextStyle(sizeValue),
+          ...Object.entries(responsiveBreakPoints).reduce(
+            (acc, [breakPointName, breakPointRatio]) => ({
+              ...acc,
+              ...responsiveTextStyle(
+                sizeValue,
+                breakPointName,
+                breakPointRatio
+              )
+            }),
+            {}
+          )
+        };
+      }
+    }
+    addUtilities(newUtilities);
+  };
+});
+const shadow = plugin(
+  ({ addUtilities }) => {
+    addUtilities({
+      [".shadow"]: {
+        boxShadow: "0 4px 10px #00000008, 0 0 2px #0000000f, 0 2px 6px #0000001f"
+      },
+      [".shadow-1"]: {
+        boxShadow: "0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)"
+      },
+      [".shadow-2"]: {
+        boxShadow: "0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)"
+      },
+      [".shadow-3"]: {
+        boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)"
+      },
+      [".shadow-4"]: {
+        boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)"
+      },
+      [".box-shadow-5"]: {
+        boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)"
+      }
+    });
+  }
+);
+const main = plugin.withOptions((args) => {
+  const configCss = args;
+  const fontStyles = {};
+  configCss.fontStyles.forEach((line) => {
+    const [styleToken, ...properties] = line.split(" ");
+    const [roleToken, sizeToken] = styleToken.split("-");
+    fontStyles[roleToken] ?? (fontStyles[roleToken] = {});
+    properties.forEach((properties2) => {
+      var _a;
+      (_a = fontStyles[roleToken])[sizeToken] ?? (_a[sizeToken] = {});
+      const [key, value] = properties2.slice(0, -1).split("[");
+      fontStyles[roleToken][sizeToken][key] = value;
+    });
+  });
+  let breakPointsCss = configCss.responsiveBreakPoints;
+  if (!Array.isArray(breakPointsCss)) {
+    breakPointsCss = [breakPointsCss];
+  }
+  const responsiveBreakPoints = {};
+  breakPointsCss.forEach((line) => {
+    const [key, value] = line.split(" ");
+    responsiveBreakPoints[key] = value;
+  });
+  const options = {
+    colorKeys: configCss.colorKeys,
+    fontStyles,
+    responsiveBreakPoints
+  };
+  return (api) => {
+    font(options).handler(api);
+    state(options).handler(api);
+    shadow.handler(api);
+  };
+});
+class TailwindPlugin extends theme.PluginAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "dependencies", [theme.FontPlugin]);
+    __publicField(this, "name", "tailwind");
+    __publicField(this, "pluginClass", TailwindImplPluginBrowser);
+  }
+}
+class TailwindImplPluginBrowser extends theme.PluginImplAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "outputCss", "");
+    __publicField(this, "colors", {});
+  }
+  onInit() {
+    var _a;
+    (_a = this.options).responsiveBreakPoints ?? (_a.responsiveBreakPoints = {
+      lg: 1.125
+    });
+  }
+  loadColor() {
+    this.outputCss += `
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+}
+@layer theme {
+  .dark {
+  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+  }
+}
+`;
+  }
+  async onLoad() {
+    var _a;
+    this.colors = {};
+    for (const isDark of [false, true]) {
+      this.api.themes.update({ isDark });
+      for (const [key, value] of this.api.colors.getColors().entries()) {
+        const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+        (_a = this.colors)[newKey] ?? (_a[newKey] = { light: "", dark: "" });
+        this.colors[newKey][isDark ? "dark" : "light"] = value.getHex();
+      }
+    }
+    await import("@tailwindcss/browser");
+    this.loadColor();
+  }
+}
+exports.TailwindImplPluginBrowser = TailwindImplPluginBrowser;
+exports.TailwindPlugin = TailwindPlugin;
+exports.font = font;
+exports.main = main;
+exports.state = state;

package/package.json

@@ -1,24 +1,36 @@
 {
   "name": "@udixio/tailwind",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/node.js",
+  "module": "./dist/node.js",
+  "types": "./dist/node.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "development": "./src/index.ts",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
+      "development": "./src/index.node.ts",
+      "types": "./dist/index.node.d.ts",
+      "browser": {
+        "import": "./dist/browser.js",
+        "require": "./dist/browser.cjs",
+        "default": "./dist/browser.js"
+      },
+      "node": {
+        "import": "./dist/node.js",
+        "require": "./dist/node.cjs",
+        "default": "./dist/node.js"
+      },
+      "import": "./dist/browser.js",
+      "require": "./dist/browser.cjs",
+      "default": "./dist/browser.js"
     }
   },
   "dependencies": {
+    "@tailwindcss/browser": "^4.1.12",
+    "chalk": "^5.6.0",
     "pathe": "^2.0.3",
     "tslib": "^2.3.0",
-    "@udixio/theme": "1.1.0"
+    "@udixio/theme": "1.2.0"
   },
   "repository": {
     "type": "git",

package/src/browser/tailwind.plugin.ts

@@ -0,0 +1,71 @@
+import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
+
+export interface TailwindPluginOptions {
+  // darkMode?: 'class' | 'media';
+  responsiveBreakPoints?: Record<string, number>;
+  styleFilePath?: string;
+  // subThemes?: Record<string, string>;
+}
+
+export class TailwindPlugin extends PluginAbstract<
+  TailwindImplPluginBrowser,
+  TailwindPluginOptions
+> {
+  public dependencies = [FontPlugin];
+  public name = 'tailwind';
+  pluginClass = TailwindImplPluginBrowser;
+}
+
+export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPluginOptions> {
+  public outputCss = '';
+  protected colors: Record<
+    string,
+    {
+      light: string;
+      dark: string;
+    }
+  > = {};
+
+  onInit() {
+    this.options.responsiveBreakPoints ??= {
+      lg: 1.125,
+    };
+  }
+
+  loadColor() {
+    this.outputCss += `
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  ${Object.entries(this.colors)
+    .map(([key, value]) => `--color-${key}: ${value.light};`)
+    .join('\n  ')}
+}
+@layer theme {
+  .dark {
+  ${Object.entries(this.colors)
+    .map(([key, value]) => `--color-${key}: ${value.dark};`)
+    .join('\n  ')}
+  }
+}
+`;
+  }
+
+  async onLoad() {
+    this.colors = {};
+    for (const isDark of [false, true]) {
+      this.api.themes.update({ isDark: isDark });
+      for (const [key, value] of this.api.colors.getColors().entries()) {
+        const newKey = key
+          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
+          .toLowerCase();
+        this.colors[newKey] ??= { light: '', dark: '' };
+        this.colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
+      }
+    }
+
+    await import('@tailwindcss/browser');
+
+    this.loadColor();
+  }
+}

package/src/index.browser.ts

@@ -0,0 +1,5 @@
+import { main } from './main';
+
+export * from './plugins-tailwind';
+export * from './browser/tailwind.plugin';
+export default main;

package/src/{index.ts → index.node.ts}

@@ -1,5 +1,5 @@
 import { main } from './main';
 
 export * from './plugins-tailwind';
-export * from './tailwind.plugin';
+export * from './node';
 export default main;