@seyuna/postcss 1.0.0-canary.26 → 1.0.0-canary.27

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.0.0-canary.27](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.26...v1.0.0-canary.27) (2026-01-20)
+
+
+### Features
+
+* implement [@import](https://github.com/import) 'seyuna' to replicate CLI behavior ([db3a3ff](https://github.com/seyuna-corp/seyuna-postcss/commit/db3a3fff3664b435840e7421d9b99262dfd31953))
+
 # [1.0.0-canary.26](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.25...v1.0.0-canary.26) (2026-01-11)
 
 

package/dist/at-rules/import.d.ts

@@ -0,0 +1,6 @@
+import { PluginContext } from "../types.js";
+/**
+ * Handler for @import "seyuna"
+ * Injects the core Seyuna Design System variables and base styles
+ */
+export declare function handleImport(atRule: any, context: PluginContext): void;

package/dist/at-rules/import.js

@@ -0,0 +1,120 @@
+import Rule from "postcss/lib/rule";
+import Declaration from "postcss/lib/declaration";
+import AtRule from "postcss/lib/at-rule";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import postcss from "postcss";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const STANDARD_HUES = [
+    'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta', 'eta', 'theta', 'iota', 'kappa', 'lambda', 'mu', 'nu', 'xi', 'omicron', 'pi', 'rho', 'sigma', 'tau', 'upsilon', 'phi', 'chi', 'psi', 'omega'
+];
+/**
+ * Handler for @import "seyuna"
+ * Injects the core Seyuna Design System variables and base styles
+ */
+export function handleImport(atRule, context) {
+    const params = atRule.params.replace(/['"]/g, "");
+    if (params === "seyuna") {
+        const { config, options } = context;
+        if (!config.ui) {
+            atRule.remove();
+            return;
+        }
+        const { theme } = config.ui;
+        const modeAttribute = options.modeAttribute;
+        const nodes = [];
+        // 1. Ingest Global Base Styles (Reset, Layers, etc.)
+        try {
+            const globalStylesPath = path.resolve(__dirname, "../styles/seyuna-global.css");
+            if (fs.existsSync(globalStylesPath)) {
+                const globalCss = fs.readFileSync(globalStylesPath, "utf-8");
+                const cleanCss = globalCss.split('$')[0].trim();
+                const parsed = postcss.parse(cleanCss);
+                // Only keep layers and reset styles, avoid re-injecting variables
+                parsed.each((node) => {
+                    if (node.type === 'atrule' && (node.name === 'layer' || node.name === 'media')) {
+                        nodes.push(node.clone());
+                    }
+                });
+            }
+            else {
+                nodes.push(new AtRule({ name: "layer", params: "reset, base, components, utilities" }));
+            }
+        }
+        catch (e) {
+            console.warn("[Seyuna PostCSS] Could not load global base styles:", e);
+        }
+        // 2. Global Hues and Base Colors (:root)
+        const rootRule = new Rule({ selector: ":root", source: atRule.source });
+        // Process all hues from config plus defaults
+        const allHues = new Set([...STANDARD_HUES, ...Object.keys(theme.hues || {})]);
+        allHues.forEach((name) => {
+            const i = STANDARD_HUES.indexOf(name);
+            const defaultValue = i !== -1 ? i * 15 : 0;
+            const value = (theme.hues && theme.hues[name] !== undefined) ? theme.hues[name] : defaultValue;
+            rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(value) }));
+        });
+        // Add shared colors from theme.colors
+        if (theme.colors) {
+            for (const [name, color] of Object.entries(theme.colors)) {
+                rootRule.append(new Declaration({ prop: `--${name}-lightness`, value: String(color.lightness) }));
+                rootRule.append(new Declaration({ prop: `--${name}-chroma`, value: String(color.chroma) }));
+                rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(color.hue) }));
+            }
+        }
+        nodes.push(rootRule);
+        // Helper to generate palette declarations for a specific mode
+        const getPaletteDecls = (palette) => {
+            const decls = [];
+            if (palette.lightness !== undefined) {
+                decls.push(new Declaration({ prop: "--lightness", value: String(palette.lightness) }));
+            }
+            if (palette.chroma !== undefined) {
+                decls.push(new Declaration({ prop: "--chroma", value: String(palette.chroma) }));
+            }
+            // Standard background/text if they exist
+            if (palette.background) {
+                decls.push(new Declaration({ prop: "--background", value: `oklch(${palette.background.lightness} ${palette.background.chroma} ${palette.background.hue})` }));
+            }
+            if (palette.text) {
+                decls.push(new Declaration({ prop: "--text", value: `oklch(${palette.text.lightness} ${palette.text.chroma} ${palette.text.hue})` }));
+            }
+            if (palette.colors) {
+                for (const [name, color] of Object.entries(palette.colors)) {
+                    const c = color;
+                    decls.push(new Declaration({ prop: `--${name}-lightness`, value: String(c.lightness) }));
+                    decls.push(new Declaration({ prop: `--${name}-chroma`, value: String(c.chroma) }));
+                    decls.push(new Declaration({ prop: `--${name}-hue`, value: String(c.hue) }));
+                }
+            }
+            return decls;
+        };
+        // 3. Explicit Mode Selectors ([data-mode="..."])
+        if (theme.light) {
+            const lightRule = new Rule({ selector: `[${modeAttribute}="light"]`, source: atRule.source });
+            lightRule.append(...getPaletteDecls(theme.light));
+            nodes.push(lightRule);
+        }
+        if (theme.dark) {
+            const darkRule = new Rule({ selector: `[${modeAttribute}="dark"]`, source: atRule.source });
+            darkRule.append(...getPaletteDecls(theme.dark));
+            nodes.push(darkRule);
+        }
+        // 4. System Preference Support
+        const createSystemMedia = (scheme, palette) => {
+            const media = new AtRule({ name: "media", params: `(prefers-color-scheme: ${scheme})`, source: atRule.source });
+            const rule = new Rule({ selector: `[${modeAttribute}="system"]`, source: atRule.source });
+            rule.append(...getPaletteDecls(palette));
+            media.append(rule);
+            return media;
+        };
+        if (theme.light)
+            nodes.push(createSystemMedia('light', theme.light));
+        if (theme.dark)
+            nodes.push(createSystemMedia('dark', theme.dark));
+        // Replace the @import rule with our generated CSS
+        atRule.replaceWith(...nodes);
+    }
+}

package/dist/at-rules/index.js

@@ -2,8 +2,10 @@
 import { eachStandardColor, eachFixedColor } from "./color.js";
 import container from "./container.js";
 import { light, dark } from "./color-scheme.js";
+import { handleImport } from "./import.js";
 // Ordered array ensures execution order
 export const atRuleHandlers = [
+    { name: "import", handler: handleImport },
     { name: "each-standard-color", handler: eachStandardColor },
     { name: "each-fixed-color", handler: eachFixedColor },
     { name: "light", handler: light },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.26",
+  "version": "1.0.0-canary.27",
   "description": "Seyuna UI's postcss plugin",
   "type": "module",
   "main": "dist/index.js",

package/src/at-rules/import.ts

@@ -0,0 +1,136 @@
+import Rule from "postcss/lib/rule";
+import Declaration from "postcss/lib/declaration";
+import AtRule from "postcss/lib/at-rule";
+import { PluginContext } from "../types.js";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import postcss from "postcss";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const STANDARD_HUES = [
+  'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta', 'eta', 'theta', 'iota', 'kappa', 'lambda', 'mu', 'nu', 'xi', 'omicron', 'pi', 'rho', 'sigma', 'tau', 'upsilon', 'phi', 'chi', 'psi', 'omega'
+];
+
+/**
+ * Handler for @import "seyuna"
+ * Injects the core Seyuna Design System variables and base styles
+ */
+export function handleImport(atRule: any, context: PluginContext) {
+  const params = atRule.params.replace(/['"]/g, "");
+
+  if (params === "seyuna") {
+    const { config, options } = context;
+    if (!config.ui) {
+      atRule.remove();
+      return;
+    }
+
+    const { theme } = config.ui;
+    const modeAttribute = options.modeAttribute;
+    const nodes: any[] = [];
+
+    // 1. Ingest Global Base Styles (Reset, Layers, etc.)
+    try {
+        const globalStylesPath = path.resolve(__dirname, "../styles/seyuna-global.css");
+        if (fs.existsSync(globalStylesPath)) {
+            const globalCss = fs.readFileSync(globalStylesPath, "utf-8");
+            const cleanCss = globalCss.split('$')[0].trim();
+            const parsed = postcss.parse(cleanCss);
+            
+            // Only keep layers and reset styles, avoid re-injecting variables
+            parsed.each((node) => {
+                if (node.type === 'atrule' && (node.name === 'layer' || node.name === 'media')) {
+                    nodes.push(node.clone());
+                }
+            });
+        } else {
+            nodes.push(new AtRule({ name: "layer", params: "reset, base, components, utilities" }));
+        }
+    } catch (e) {
+        console.warn("[Seyuna PostCSS] Could not load global base styles:", e);
+    }
+
+    // 2. Global Hues and Base Colors (:root)
+    const rootRule = new Rule({ selector: ":root", source: atRule.source });
+    
+    // Process all hues from config plus defaults
+    const allHues = new Set([...STANDARD_HUES, ...Object.keys(theme.hues || {})]);
+    allHues.forEach((name) => {
+        const i = STANDARD_HUES.indexOf(name);
+        const defaultValue = i !== -1 ? i * 15 : 0;
+        const value = (theme.hues && theme.hues[name] !== undefined) ? theme.hues[name] : defaultValue;
+        rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(value) }));
+    });
+
+    // Add shared colors from theme.colors
+    if (theme.colors) {
+        for (const [name, color] of Object.entries(theme.colors)) {
+            rootRule.append(new Declaration({ prop: `--${name}-lightness`, value: String(color.lightness) }));
+            rootRule.append(new Declaration({ prop: `--${name}-chroma`, value: String(color.chroma) }));
+            rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(color.hue) }));
+        }
+    }
+    nodes.push(rootRule);
+
+    // Helper to generate palette declarations for a specific mode
+    const getPaletteDecls = (palette: any) => {
+      const decls: Declaration[] = [];
+      
+      if (palette.lightness !== undefined) {
+          decls.push(new Declaration({ prop: "--lightness", value: String(palette.lightness) }));
+      }
+      if (palette.chroma !== undefined) {
+          decls.push(new Declaration({ prop: "--chroma", value: String(palette.chroma) }));
+      }
+
+      // Standard background/text if they exist
+      if (palette.background) {
+          decls.push(new Declaration({ prop: "--background", value: `oklch(${palette.background.lightness} ${palette.background.chroma} ${palette.background.hue})` }));
+      }
+      if (palette.text) {
+          decls.push(new Declaration({ prop: "--text", value: `oklch(${palette.text.lightness} ${palette.text.chroma} ${palette.text.hue})` }));
+      }
+
+      if (palette.colors) {
+        for (const [name, color] of Object.entries(palette.colors)) {
+          const c = color as any;
+          decls.push(new Declaration({ prop: `--${name}-lightness`, value: String(c.lightness) }));
+          decls.push(new Declaration({ prop: `--${name}-chroma`, value: String(c.chroma) }));
+          decls.push(new Declaration({ prop: `--${name}-hue`, value: String(c.hue) }));
+        }
+      }
+      return decls;
+    };
+
+    // 3. Explicit Mode Selectors ([data-mode="..."])
+    if (theme.light) {
+        const lightRule = new Rule({ selector: `[${modeAttribute}="light"]`, source: atRule.source });
+        lightRule.append(...getPaletteDecls(theme.light));
+        nodes.push(lightRule);
+    }
+
+    if (theme.dark) {
+        const darkRule = new Rule({ selector: `[${modeAttribute}="dark"]`, source: atRule.source });
+        darkRule.append(...getPaletteDecls(theme.dark));
+        nodes.push(darkRule);
+    }
+
+    // 4. System Preference Support
+    const createSystemMedia = (scheme: 'light' | 'dark', palette: any) => {
+        const media = new AtRule({ name: "media", params: `(prefers-color-scheme: ${scheme})`, source: atRule.source });
+        const rule = new Rule({ selector: `[${modeAttribute}="system"]`, source: atRule.source });
+        rule.append(...getPaletteDecls(palette));
+        media.append(rule);
+        return media;
+    };
+
+    if (theme.light) nodes.push(createSystemMedia('light', theme.light));
+    if (theme.dark) nodes.push(createSystemMedia('dark', theme.dark));
+
+    // Replace the @import rule with our generated CSS
+    atRule.replaceWith(...nodes);
+  }
+}

package/src/at-rules/index.ts

@@ -2,6 +2,7 @@
 import { eachStandardColor, eachFixedColor } from "./color.js";
 import container from "./container.js";
 import { light, dark } from "./color-scheme.js";
+import { handleImport } from "./import.js";
 import { PluginContext } from "../types.js";
 
 // Each handler has a name (matches the at-rule) and the function
@@ -12,6 +13,7 @@ export interface AtRuleHandler {
 
 // Ordered array ensures execution order
 export const atRuleHandlers: AtRuleHandler[] = [
+  { name: "import", handler: handleImport },
   { name: "each-standard-color", handler: eachStandardColor },
   { name: "each-fixed-color", handler: eachFixedColor },
   { name: "light", handler: light },

package/tests/plugin.test.ts

@@ -140,4 +140,31 @@ describe('Seyuna PostCSS Plugin', () => {
     await expect(run(input, { config: mockConfig, strict: true }))
       .rejects.toThrow(/Color 'unknown' not found in seyuna.json/);
   });
+
+  it('processes @import "seyuna"', async () => {
+    const input = '@import "seyuna";';
+    const result = await run(input, { config: mockConfig });
+    
+    // Check for root variables (hues)
+    expect(result.css).toContain(':root');
+    expect(result.css).toContain('--alpha-hue: 0');
+    expect(result.css).toContain('--omega-hue: 345');
+    expect(result.css).toContain('--primary-hue: 200'); // Override from mockConfig
+    
+    // Check for mode selectors
+    expect(result.css).toContain('[data-mode="light"]');
+    expect(result.css).toContain('[data-mode="dark"]');
+    expect(result.css).toContain('--lightness: 0.66');
+    
+    // Check for system preference media queries
+    expect(result.css).toContain('@media (prefers-color-scheme: light)');
+    expect(result.css).toContain('@media (prefers-color-scheme: dark)');
+
+    // Check for base styles (reset)
+    expect(result.css).toContain('@layer reset');
+    expect(result.css).toContain('-webkit-text-size-adjust: none');
+
+    // Check for palette colors
+    expect(result.css).toContain('--surface-lightness: 1');
+  });
 });