@udixio/tailwind 1.3.0 → 1.5.0

package/dist/tailwind.plugin-Ce1R9Jc0.js

@@ -0,0 +1,222 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import plugin from "tailwindcss/plugin";
+import { PluginAbstract, FontPlugin, PluginImplAbstract } from "@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
+  }) => {
+    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: theme("fontFamily." + sizeValue.fontFamily)
+    });
+    const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
+      [`@media (min-width: ${theme("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 PluginAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "dependencies", [FontPlugin]);
+    __publicField(this, "name", "tailwind");
+    __publicField(this, "pluginClass", TailwindImplPluginBrowser);
+  }
+}
+class TailwindImplPluginBrowser extends 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();
+      }
+    }
+    if (typeof window !== "undefined") {
+      const { tailwindBrowserInit } = await import("./tailwind-browser-CTGKNrKy.js");
+      this.outputCss = await tailwindBrowserInit(this.outputCss);
+    }
+    this.loadColor();
+  }
+}
+export {
+  TailwindImplPluginBrowser as T,
+  TailwindPlugin as a,
+  font as f,
+  main as m,
+  state as s
+};

package/dist/tailwind.plugin-JU5cwZvP.cjs

@@ -0,0 +1,221 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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();
+      }
+    }
+    if (typeof window !== "undefined") {
+      const { tailwindBrowserInit } = await Promise.resolve().then(() => require("./tailwind-browser-COFzjMN4.cjs"));
+      this.outputCss = await tailwindBrowserInit(this.outputCss);
+    }
+    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.5.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": "^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/assets.ts

@@ -0,0 +1,11 @@
+import index from 'tailwindcss/index.css?inline';
+import preflight from 'tailwindcss/preflight.css?inline';
+import theme from 'tailwindcss/theme.css?inline';
+import utilities from 'tailwindcss/utilities.css?inline';
+
+export const css = {
+  index,
+  preflight,
+  theme,
+  utilities,
+};

package/src/browser/instrumentation.ts

@@ -0,0 +1,29 @@
+export class Instrumentation {
+  start(label: string) {
+    performance.mark(`${label} (start)`);
+  }
+
+  end(label: string, detail?: any) {
+    performance.mark(`${label} (end)`);
+
+    performance.measure(label, {
+      start: `${label} (start)`,
+      end: `${label} (end)`,
+      detail,
+    });
+  }
+
+  hit(label: string, detail?: any) {
+    performance.mark(label, {
+      detail,
+    });
+  }
+
+  error(error: any) {
+    performance.mark(`(error)`, {
+      detail: { error: `${error}` },
+    });
+
+    throw error;
+  }
+}