@netoyed/ux4g-design-system-v3-postcss 1.0.0

package/dist/index.js

@@ -0,0 +1,361 @@
+// index.js
+import fg from "fast-glob";
+import fs from "fs";
+
+// ../core/jit/registry.js
+var registry = {
+  // --- Spacing ---
+  "p": { type: "space", property: "padding" },
+  "pt": { type: "space", property: "padding-top" },
+  "pr": { type: "space", property: "padding-right" },
+  "pb": { type: "space", property: "padding-bottom" },
+  "pl": { type: "space", property: "padding-left" },
+  "px": { type: "space", property: ["padding-left", "padding-right"] },
+  "py": { type: "space", property: ["padding-top", "padding-bottom"] },
+  "m": { type: "space", property: "margin" },
+  "mt": { type: "space", property: "margin-top" },
+  "mr": { type: "space", property: "margin-right" },
+  "mb": { type: "space", property: "margin-bottom" },
+  "ml": { type: "space", property: "margin-left" },
+  "mx": { type: "space", property: ["margin-left", "margin-right"] },
+  "my": { type: "space", property: ["margin-top", "margin-bottom"] },
+  // --- Colors ---
+  "text": { type: "color", property: "color" },
+  "bg": { type: "color", property: "background-color" },
+  "border": { type: "color", property: "border-color" },
+  // --- Typography ---
+  "font": { type: "fontDetail", property: "font-weight" },
+  "text-size": { type: "text", property: "font-size" },
+  "leading": { type: "value", property: "line-height" },
+  "tracking": { type: "value", property: "letter-spacing" },
+  "align": { type: "static", property: "text-align" },
+  // text-center
+  // --- Layout ---
+  "flex": { type: "static", property: "display", value: "flex" },
+  "inline-flex": { type: "static", property: "display", value: "inline-flex" },
+  "grid": { type: "static", property: "display", value: "grid" },
+  "hidden": { type: "static", property: "display", value: "none" },
+  "block": { type: "static", property: "display", value: "block" },
+  "inline-block": { type: "static", property: "display", value: "inline-block" },
+  "items": { type: "static", property: "align-items" },
+  // start, end, center, baseline, stretch
+  "justify": { type: "static", property: "justify-content" },
+  // start, end, center, between, around, evenly
+  "self": { type: "static", property: "align-self" },
+  "flex-col": { type: "static", property: "flex-direction", value: "column" },
+  "flex-row": { type: "static", property: "flex-direction", value: "row" },
+  "flex-wrap": { type: "static", property: "flex-wrap", value: "wrap" },
+  "flex-nowrap": { type: "static", property: "flex-wrap", value: "nowrap" },
+  "gap": { type: "space", property: "gap" },
+  "gap-x": { type: "space", property: "column-gap" },
+  "gap-y": { type: "space", property: "row-gap" },
+  // --- Sizing ---
+  "w": { type: "size", property: "width" },
+  "h": { type: "size", property: "height" },
+  "min-w": { type: "size", property: "min-width" },
+  "min-h": { type: "size", property: "min-height" },
+  "max-w": { type: "size", property: "max-width" },
+  "max-h": { type: "size", property: "max-height" },
+  // --- Borders & Effects ---
+  "rounded": { type: "radius", property: "border-radius" },
+  "shadow": { type: "shadow", property: "box-shadow" },
+  "opacity": { type: "value", property: "opacity" },
+  "z": { type: "zIndex", property: "z-index" },
+  // --- Position ---
+  "absolute": { type: "static", property: "position", value: "absolute" },
+  "relative": { type: "static", property: "position", value: "relative" },
+  "fixed": { type: "static", property: "position", value: "fixed" },
+  "top": { type: "space", property: "top" },
+  "right": { type: "space", property: "right" },
+  "bottom": { type: "space", property: "bottom" },
+  "left": { type: "space", property: "left" }
+};
+
+// ../core/jit/generator.js
+function generateUtility(className, config) {
+  let bp = null;
+  let util = className;
+  if (className.includes(":")) {
+    [bp, util] = className.split(":");
+  }
+  let css = "";
+  if (!util.startsWith(config.prefix)) return null;
+  const coreUtil = util.replace(config.prefix, "");
+  for (const [key, def] of Object.entries(registry)) {
+    const prefix = `${key}-`;
+    if (coreUtil.startsWith(prefix)) {
+      const value = coreUtil.slice(prefix.length);
+      let varName = "";
+      if (def.type === "space") varName = `var(--${config.prefix}space-${value})`;
+      else if (def.type === "color") varName = `var(--${config.prefix}color-${value})`;
+      else if (def.type === "radius") varName = `var(--${config.prefix}radius-${value || "DEFAULT"})`;
+      else if (def.type === "shadow") varName = `var(--${config.prefix}shadow-${value || "DEFAULT"})`;
+      else if (def.type === "zIndex") varName = `var(--${config.prefix}zIndex-${value})`;
+      else if (def.type === "fontDetail") varName = `var(--${config.prefix}fontWeight-${value})`;
+      else if (def.type === "static") {
+        if (def.value) {
+          if (value !== "" && !def.allowValue) continue;
+          varName = def.value;
+        } else {
+          varName = value;
+        }
+      } else if (def.type === "size") {
+        if (config.theme.spacing[value]) {
+          varName = `var(--${config.prefix}space-${value})`;
+        } else if (value.includes("/")) {
+          const [num, den] = value.split("/");
+          varName = `${parseInt(num) / parseInt(den) * 100}%`;
+        } else {
+          continue;
+        }
+      } else continue;
+      const props = Array.isArray(def.property) ? def.property : [def.property];
+      const decls = def.type === "static" && def.value ? varName : props.map((p) => `${p}:${varName}`).join(";");
+      css = `.${escape(className)}{${decls};}`;
+      break;
+    }
+  }
+  if (!css) return null;
+  if (bp) {
+    const size = config.breakpoints[bp];
+    return `@media (min-width:${size}){${css}}`;
+  }
+  return css;
+}
+function escape(cls) {
+  return cls.replace(/:/g, "\\:");
+}
+
+// ../core/config/defaultConfig.js
+var defaultConfig = {
+  /**
+   * --------------------------------------------------
+   * CORE
+   * --------------------------------------------------
+   */
+  prefix: "ux4g-",
+  /**
+   * dev | build | cdn
+   * NOTE: CLI command will override this
+   */
+  mode: "build",
+  /**
+   * --------------------------------------------------
+   * CONTENT (used for purge / JIT)
+   * --------------------------------------------------
+   */
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx,vue,html}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./**/*.php"
+  ],
+  /**
+   * --------------------------------------------------
+   * THEME (tokens)
+   * --------------------------------------------------
+   */
+  theme: {
+    colors: {
+      primary: {
+        50: "#EFF6FF",
+        500: "#3B82F6",
+        700: "#1D4ED8"
+      },
+      secondary: {
+        500: "#9333EA"
+      },
+      danger: {
+        500: "#EF4444"
+      }
+    },
+    spacing: {
+      0: "0px",
+      1: "4px",
+      2: "8px",
+      4: "16px",
+      6: "24px",
+      8: "32px"
+    },
+    fontSize: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "18px",
+      xl: "20px"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      bold: 700
+    },
+    radius: {
+      sm: "4px",
+      md: "8px",
+      lg: "12px",
+      xl: "16px"
+    },
+    shadow: {
+      sm: "0 1px 2px rgba(0,0,0,0.05)",
+      md: "0 4px 6px rgba(0,0,0,0.1)"
+    },
+    zIndex: {
+      dropdown: 1e3,
+      modal: 1100,
+      toast: 1200
+    }
+  },
+  /**
+   * --------------------------------------------------
+   * RESPONSIVE
+   * --------------------------------------------------
+   */
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px"
+  },
+  /**
+   * --------------------------------------------------
+   * DARK MODE / THEMES
+   * --------------------------------------------------
+   */
+  darkMode: {
+    enabled: true,
+    strategy: "data-attribute",
+    // class | data-attribute
+    attribute: "data-theme",
+    themes: {
+      light: "light",
+      dark: "dark"
+    }
+  },
+  /**
+   * --------------------------------------------------
+   * SAFELIST (dynamic classes)
+   * --------------------------------------------------
+   */
+  safelist: [],
+  /**
+   * --------------------------------------------------
+   * COMPONENTS
+   * --------------------------------------------------
+   */
+  components: {
+    button: true,
+    card: true,
+    input: true,
+    modal: false
+  },
+  /**
+   * --------------------------------------------------
+   * PLUGINS
+   * --------------------------------------------------
+   */
+  plugins: [],
+  /**
+   * --------------------------------------------------
+   * OUTPUT
+   * --------------------------------------------------
+   */
+  output: {
+    dir: "dist",
+    file: "ux4g.css",
+    minify: true,
+    sourceMap: false
+  }
+};
+
+// ../core/config/preflight.js
+var preflight = `
+/* UX4G Preflight (Reset) */
+*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
+html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: system-ui, sans-serif; }
+body { margin: 0; line-height: inherit; }
+hr { height: 0; color: inherit; border-top-width: 1px; }
+abbr:where([title]) { text-decoration: underline dotted; }
+h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
+a { color: inherit; text-decoration: inherit; }
+b, strong { font-weight: bolder; }
+code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
+small { font-size: 80%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
+button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; }
+button, select { text-transform: none; }
+button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
+:-moz-focusring { outline: auto; }
+:-moz-ui-invalid { box-shadow: none; }
+progress { vertical-align: baseline; }
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
+[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
+::-webkit-search-decoration { -webkit-appearance: none; }
+::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
+summary { display: list-item; }
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
+fieldset { margin: 0; padding: 0; }
+legend { padding: 0; }
+ol, ul, menu { list-style: none; margin: 0; padding: 0; }
+textarea { resize: vertical; }
+input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
+button, [role="button"] { cursor: pointer; }
+:disabled { cursor: default; }
+img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
+img, video { max-width: 100%; height: auto; }
+[hidden] { display: none; }
+`;
+
+// index.js
+function deepMerge(target, source) {
+  if (typeof source !== "object" || source === null) return source;
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    if (Array.isArray(source[key])) {
+      result[key] = source[key];
+    } else if (typeof source[key] === "object" && typeof target[key] === "object") {
+      result[key] = deepMerge(target[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+var index_default = (opts = {}) => {
+  return {
+    postcssPlugin: "ux4g",
+    async Once(root, { result }) {
+      let config = deepMerge(defaultConfig, opts);
+      config.prefix = "ux4g-";
+      const files = await fg(config.content);
+      const foundClasses = /* @__PURE__ */ new Set();
+      const prefix = config.prefix.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+      const CLASS_REGEX = new RegExp(`(sm:|md:|lg:|xl:)?${prefix}[a-z0-9\\-]+`, "g");
+      for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const matches = content.match(CLASS_REGEX);
+        if (matches) matches.forEach((c) => foundClasses.add(c));
+      }
+      let utilitiesCSS = "";
+      for (const cls of foundClasses) {
+        const css = generateUtility(cls, config);
+        if (css) utilitiesCSS += css + "\n";
+      }
+      root.walkAtRules("ux4g", (rule) => {
+        if (rule.params === "base") {
+          rule.replaceWith(preflight);
+        } else if (rule.params === "utilities") {
+          rule.replaceWith(utilitiesCSS);
+        }
+      });
+    }
+  };
+};
+var postcss = true;
+export {
+  index_default as default,
+  postcss
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "@netoyed/ux4g-design-system-v3-postcss",
+	"version": "1.0.0",
+	"description": "PostCSS plugin for UX4G Design System",
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsup index.js --format cjs,esm --dts --clean --platform node",
+		"prepublishOnly": "npm run build"
+	},
+	"devDependencies": {
+		"tsup": "^8.0.0",
+		"typescript": "^5.9.3"
+	},
+	"dependencies": {
+		"fast-glob": "^3.0.0",
+		"postcss": "^8.0.0"
+	}
+}