Begin to replace tailwind plugin / config with app.css

Author: techniq

packages/tailwind/package.json

@@ -7,15 +7,16 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "rimraf dist && tsc -p tsconfig.build.json --watch",
-    "build": "rimraf dist && tsc -p tsconfig.build.json && cp -r ./src/lib/plugin* dist",
+    "build": "rimraf dist && tsc -p tsconfig.build.json && cp -r ./src/lib/plugin* dist && pnpm cli",
     "preview": "vite preview",
     "package": "svelte-package",
     "prepublishOnly": "svelte-package",
     "check": "tsc --noEmit",
     "check:watch": "tsc --noEmit --watch",
     "test:unit": "TZ=UTC+4 vitest",
     "lint": "prettier --check .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "cli": "tsc --noEmit && tsx ./src/lib/cli.ts"
   },
   "devDependencies": {
     "@skeletonlabs/tw-plugin": "^0.4.1",
@@ -27,6 +28,7 @@
     "prettier": "^3.5.2",
     "rimraf": "6.0.1",
     "tslib": "^2.8.1",
+    "tsx": "^4.19.3",
     "typescript": "^5.7.3",
     "vite": "^6.2.0",
     "vitest": "^3.0.7"
@@ -47,7 +49,8 @@
     ".": "./dist/index.js",
     "./daisy": "./dist/daisy.js",
     "./skeleton": "./dist/skeleton.js",
-    "./plugin": "./dist/plugin.cjs"
+    "./plugin": "./dist/plugin.cjs",
+    "./css/*": "./dist/css/*"
   },
   "files": [
     "dist"

packages/tailwind/src/lib/cli.ts

@@ -0,0 +1,97 @@
+import { parseArgs } from 'node:util';
+import { writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { format } from 'prettier';
+
+import { entries } from '@layerstack/utils';
+
+import {
+  colorNames,
+  createThemeColors,
+  processThemeColors,
+  themeStylesString,
+  type NestedColors,
+  type SupportedColorSpace,
+} from './theme.js';
+import { themes as daisyThemes } from './daisy.js';
+import { themes as skeletonThemes } from './skeleton/index.js';
+
+const options = {
+  daisy: {
+    type: 'boolean',
+    short: 'd',
+  },
+  skeleton: {
+    type: 'string',
+  },
+} as const;
+
+const { values, positionals } = parseArgs({ args: process.argv, options, allowPositionals: true });
+
+/**
+ * Build theme CSS variables
+ */
+function buildThemeCss(colorSpace: SupportedColorSpace) {
+  let result: string[] = [];
+
+  result.push('@theme {');
+
+  // Register theme colors variables with placeholder values
+  colorNames.forEach((color) => {
+    result.push(`--color-${color}: ${colorSpace}(0 0 0);`);
+  });
+
+  result.push('}');
+
+  return format(result.join('\n\n'), { parser: 'css' });
+}
+
+/**
+ * Build themes as CSS files
+ */
+async function buildThemesCss(themes: NestedColors, colorSpace: SupportedColorSpace) {
+  let result: string[] = [];
+
+  let rootThemeName: string = '';
+  entries(themes).map(([themeName, themeColors], index) => {
+    if (index === 0) {
+      // Root / default theme
+      result.push(`:root { ${themeStylesString(themeColors as NestedColors, colorSpace)} }`);
+      rootThemeName = themeName;
+    } else if (index === 1) {
+      // Dark theme
+      result.push(`@media (prefers-color-scheme: dark) {
+        :root { ${themeStylesString(themeColors as NestedColors, colorSpace)} }
+      }`);
+
+      // Also register first and second theme by name AFTER @media for precedence
+      result.push(
+        `[data-theme=${rootThemeName}] { ${themeStylesString(themes[rootThemeName] as NestedColors, colorSpace)} }`
+      );
+      result.push(
+        `[data-theme=${themeName}] { ${themeStylesString(themeColors as NestedColors, colorSpace)} }`
+      );
+    } else {
+      result.push(
+        `[data-theme=${themeName}] { ${themeStylesString(themeColors as NestedColors, colorSpace)} }`
+      );
+    }
+  });
+
+  return format(result.join('\n\n'), { parser: 'css' });
+}
+
+function writeFile(filePath: string, data: string) {
+  mkdirSync(dirname(filePath), { recursive: true });
+  writeFileSync(filePath, data);
+  console.log(`Wrote ${filePath}`);
+}
+
+const themeCss = await buildThemeCss('hsl');
+writeFile(join('dist/css', 'theme.css'), themeCss);
+
+const daisyCss = await buildThemesCss(daisyThemes, 'hsl');
+writeFile('dist/css/daisy.css', daisyCss);
+
+// const skeletonCss = await buildThemesCss(skeletonThemes, 'hsl');
+// writeFile('dist/css/skeleton.css', skeletonCss);

packages/tailwind/src/lib/daisy.ts

@@ -49,7 +49,7 @@ const daisyColorMap = {
 };
 
 /**
- *  Map Daisy UI color names to Svelte UX names, and sort themes
+ *  Map Daisy UI color names to LayerStack names, and sort themes
  */
 function mapColorsName(themes: typeof daisyThemes, colorMap: typeof daisyColorMap) {
   let themesGeneric = themes as unknown as Record<Theme, Record<string, string>>;

packages/tailwind/src/lib/theme.ts

@@ -39,12 +39,10 @@ export const colorNames = [
 ];
 
 /**
- * Generate theme colors (ex. { primary: hsl(var(--color-primary) / <alpha-value>), ... })
+ * Generate theme colors (ex. { primary: hsl(var(--color-primary)), ... })
  */
 export function createThemeColors(colorSpace: SupportedColorSpace) {
-  return fromEntries(
-    colorNames.map((color) => [color, `${colorSpace}(var(--color-${color}) / <alpha-value>)`])
-  );
+  return fromEntries(colorNames.map((color) => [color, `${colorSpace}(var(--color-${color}))`]));
 }
 
 /**
@@ -153,8 +151,8 @@ export function processThemeColors(themeColors: NestedColors, colorSpace: Suppor
   const result = fromEntries(
     entries(colors).map(([name, value]) => {
       if (colorNames.includes(String(name))) {
-        // Add space separated color variables for each color
-        return [`--color-${name}`, colorVariableValue(value, colorSpace)];
+        // Convert each color to common colorspace and add variable
+        return [`--color-${name}`, convertColor(value, colorSpace)];
       } else {
         // Additional properties such as `color-scheme` or CSS variable
         return [name, value];
@@ -212,29 +210,25 @@ function darkenColor(color: Color | string, percentage: number) {
 /**
  * Convert color to space separated components string
  */
-export function colorVariableValue(
-  color: Color | string,
-  colorSpace: SupportedColorSpace,
-  decimals = 4
-) {
+export function convertColor(color: Color | string, colorSpace: SupportedColorSpace, decimals = 4) {
   try {
     if (colorSpace === 'rgb') {
       const computedColor = typeof color === 'string' ? rgb(color) : (color as Rgb);
       if (computedColor) {
         const { r, g, b } = computedColor;
-        return `${round(r * 255, decimals)} ${round(g * 255, decimals)} ${round(b * 255, decimals)}`;
+        return `rgb(${round(r * 255, decimals)} ${round(g * 255, decimals)} ${round(b * 255, decimals)})`;
       }
     } else if (colorSpace === 'hsl') {
       const computedColor = typeof color === 'string' ? hsl(clampRgb(color)) : (color as Hsl);
       if (computedColor) {
         const { h, s, l } = computedColor;
-        return `${round(h ?? 0, decimals)} ${round(s * 100, decimals)}% ${round(l * 100, decimals)}%`;
+        return `hsl(${round(h ?? 0, decimals)} ${round(s * 100, decimals)}% ${round(l * 100, decimals)}%)`;
       }
     } else if (colorSpace === 'oklch') {
       const computedColor = typeof color === 'string' ? oklch(clampRgb(color)) : (color as Oklch);
       if (computedColor) {
         const { l, c, h } = computedColor;
-        return `${round(l, decimals)} ${round(c, decimals)} ${round(h ?? 0, decimals)}`;
+        return `oklch(${round(l, decimals)} ${round(c, decimals)} ${round(h ?? 0, decimals)})`;
       }
     }
   } catch (e) {

packages/tailwind/tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["./src/**/*.test.ts"]
+  "exclude": ["./src/**/*.test.ts", "./src/lib/cli.ts"]
 }