@seyuna/postcss 1.0.0-canary.32 → 1.0.0-canary.34

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.0.0-canary.34](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.33...v1.0.0-canary.34) (2026-01-22)
+
+
+### Features
+
+* integrate CSS reset into [@seyuna](https://github.com/seyuna); and unignore src/styles ([6df5a15](https://github.com/seyuna-corp/seyuna-postcss/commit/6df5a150b806c50b9f64c806f06cdb299d66a3b1))
+
+# [1.0.0-canary.33](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.32...v1.0.0-canary.33) (2026-01-22)
+
+
+### Bug Fixes
+
+* rename [@import](https://github.com/import) 'seyuna' to [@seyuna](https://github.com/seyuna); to avoid Vite resolution conflict ([375e493](https://github.com/seyuna-corp/seyuna-postcss/commit/375e49369f5734486b986ec5c8f46585dd7a1743))
+
 # [1.0.0-canary.32](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.31...v1.0.0-canary.32) (2026-01-21)
 
 

package/README.md

@@ -111,7 +111,7 @@ export default {
 
 ### CSS Setup
 
-Configure your design tokens directly in your CSS using the `@config "seyuna"` at-rule, then import the design system:
+Configure your design tokens directly in your CSS using the `@config "seyuna"` at-rule, and then initialize the design system using `@seyuna;`:
 
 ```css
 @config "seyuna" {
@@ -135,7 +135,7 @@ Configure your design tokens directly in your CSS using the `@config "seyuna"` a
   --dark-text: 1 0 0;
 }
 
-@import "seyuna";
+@seyuna;
 
 /* Your styles here */
 ```

package/dist/at-rules/import.js

@@ -12,8 +12,13 @@ const __dirname = path.dirname(__filename);
  * Injects the core Seyuna Design System variables and base styles
  */
 export function handleImport(atRule, context) {
-    const params = atRule.params.replace(/['"]/g, "");
-    if (params === "seyuna") {
+    // Support both @seyuna; and the previous @import "seyuna" logic
+    // Since this handler is now registered to @seyuna, we just check params or just run it.
+    const params = atRule.params.replace(/['"]/g, "").trim();
+    // If it's @seyuna; the params will be empty.
+    // If it's @import "seyuna", this handler wouldn't be called unless we kept the name "import".
+    // But we want this to run for @seyuna;
+    if (atRule.name === "seyuna") {
         const { config, options } = context;
         if (!config.ui) {
             atRule.remove();
@@ -27,17 +32,21 @@ export function handleImport(atRule, context) {
             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 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')) {
+                    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" }));
+                nodes.push(new AtRule({
+                    name: "layer",
+                    params: "reset, base, components, utilities",
+                }));
             }
         }
         catch (e) {
@@ -54,8 +63,14 @@ export function handleImport(atRule, context) {
         // 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}-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) }));
             }
         }
@@ -64,23 +79,38 @@ export function handleImport(atRule, context) {
         const getPaletteDecls = (palette) => {
             const decls = [];
             if (palette.lightness !== undefined) {
-                decls.push(new Declaration({ prop: "--lightness", value: String(palette.lightness) }));
+                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})` }));
+                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})` }));
+                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}-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) }));
                 }
             }
@@ -88,27 +118,40 @@ export function handleImport(atRule, context) {
         };
         // 3. Explicit Mode Selectors ([data-mode="..."])
         if (theme.light) {
-            const lightRule = new Rule({ selector: `[${modeAttribute}="light"]`, source: atRule.source });
+            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 });
+            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 });
+            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));
+            nodes.push(createSystemMedia("light", theme.light));
         if (theme.dark)
-            nodes.push(createSystemMedia('dark', 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

@@ -7,7 +7,7 @@ import { handleConfig } from "./config.js";
 // Ordered array ensures execution order
 export const atRuleHandlers = [
     { name: "config", handler: handleConfig },
-    { name: "import", handler: handleImport },
+    { name: "seyuna", 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.32",
+  "version": "1.0.0-canary.34",
   "description": "Seyuna UI's postcss plugin",
   "type": "module",
   "main": "dist/index.js",

package/src/at-rules/import.ts

@@ -15,9 +15,14 @@ const __dirname = path.dirname(__filename);
  * Injects the core Seyuna Design System variables and base styles
  */
 export function handleImport(atRule: any, context: PluginContext) {
-  const params = atRule.params.replace(/['"]/g, "");
+  // Support both @seyuna; and the previous @import "seyuna" logic
+  // Since this handler is now registered to @seyuna, we just check params or just run it.
+  const params = atRule.params.replace(/['"]/g, "").trim();
 
-  if (params === "seyuna") {
+  // If it's @seyuna; the params will be empty.
+  // If it's @import "seyuna", this handler wouldn't be called unless we kept the name "import".
+  // But we want this to run for @seyuna;
+  if (atRule.name === "seyuna") {
     const { config, options } = context;
     if (!config.ui) {
       atRule.remove();
@@ -30,70 +35,124 @@ export function handleImport(atRule: any, context: PluginContext) {
 
     // 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" }));
-        }
+      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);
+      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
     if (theme.hues) {
-        for (const [name, value] of Object.entries(theme.hues)) {
-             rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(value) }));
-        }
+      for (const [name, value] of Object.entries(theme.hues)) {
+        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) }));
-        }
+      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) }));
+        decls.push(
+          new Declaration({
+            prop: "--lightness",
+            value: String(palette.lightness),
+          }),
+        );
       }
       if (palette.chroma !== undefined) {
-          decls.push(new Declaration({ prop: "--chroma", value: String(palette.chroma) }));
+        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})` }));
+        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})` }));
+        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) }));
+          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;
@@ -101,28 +160,41 @@ export function handleImport(atRule: any, context: PluginContext) {
 
     // 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);
+      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);
+      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;
+    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));
+    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

@@ -15,7 +15,7 @@ export interface AtRuleHandler {
 // Ordered array ensures execution order
 export const atRuleHandlers: AtRuleHandler[] = [
   { name: "config", handler: handleConfig },
-  { name: "import", handler: handleImport },
+  { name: "seyuna", handler: handleImport },
   { name: "each-standard-color", handler: eachStandardColor },
   { name: "each-fixed-color", handler: eachFixedColor },
   { name: "light", handler: light },

package/src/styles/seyuna-global.css

@@ -0,0 +1,94 @@
+@layer reset, base, components, utilities;
+
+@layer reset {
+  /* 
+  Reset all elements to a zeroed baseline to ensure consistency in all browsers.
+*/
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    line-height: 2;
+    font-family: inherit;
+  }
+
+  /* 
+  Prevent automatic font size adjustments on mobile devices to keep text rendering consistent across platforms.
+*/
+  html {
+    -moz-text-size-adjust: none; /* Firefox */
+    -webkit-text-size-adjust: none; /* Safari / older WebKit browsers */
+    text-size-adjust: none; /* Modern spec-compliant browsers */
+    color: var(--text);
+    background-color: var(--background);
+    font-size: max(1rem, 0.833vw);
+  }
+
+  /* 
+  Remove default list styling from unordered and ordered lists that 
+  explicitly use role="list".
+*/
+  ul[role="list"],
+  ol[role="list"] {
+    list-style: none;
+  }
+
+  /* 
+  Ensure the body element always fills at least the full height of the viewport
+  so short pages don't collapse. Improve text rendering across browsers by
+  enabling smoother grayscale antialiasing. Set the body as a container
+  (queryable by its inline size) for use with CSS container queries, and
+  enable smooth scrolling for anchor links and programmatic scroll actions.
+*/
+  body {
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    container-type: inline-size;
+    scroll-behavior: smooth;
+  }
+
+  /* 
+  Improve heading readability by evenly distributing words across lines.
+  This prevents awkward line breaks and creates more balanced, aesthetic headings.
+*/
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
+
+  /* 
+  Reset all link styles to inherit from parent elements.
+  This removes default colors, underlines, and visited/hover states.
+*/
+  a {
+    all: unset;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  /* 
+  Ensure images and <picture> elements scale within their container,
+  preventing overflow and maintaining layout integrity on any screen size.
+*/
+  img,
+  picture {
+    max-width: 100%;
+    display: block;
+  }
+
+  /* 
+  Add extra scroll margin above and below elements targeted via anchors.
+  This prevents the element from hugging the top edge of the viewport when navigated to.
+*/
+  :target {
+    scroll-margin-block: 1rem;
+  }
+}

package/tests/plugin.test.ts

@@ -132,8 +132,8 @@ describe("Seyuna PostCSS Plugin", () => {
     expect(result.css).toContain(output);
   });
 
-  it('processes @import "seyuna"', async () => {
-    const input = '@import "seyuna";';
+  it("processes @seyuna;", async () => {
+    const input = "@seyuna;";
     const result = await run(input, { config: mockConfig });
 
     // Check for root variables (hues)
@@ -167,7 +167,7 @@ describe("Seyuna PostCSS Plugin", () => {
         --color-brand: 0.5 0.2 100;
         --light-lightness: 0.8;
       }
-      @import "seyuna";
+      @seyuna;
       .test { 
         color: SeyunaStandardColor(custom);
         background: SeyunaFixedColor(brand);
@@ -194,7 +194,7 @@ describe("Seyuna PostCSS Plugin", () => {
         --color-brand: 0.5 0.2 100;
         --light-color-brand: 1 0 100;
       }
-      @import "seyuna";
+      @seyuna;
     `;
     const result = await postcss([plugin({ config: undefined })]).process(
       input,
@@ -209,4 +209,22 @@ describe("Seyuna PostCSS Plugin", () => {
     expect(result.css).toContain('[data-mode="light"]');
     expect(result.css).toContain("--brand-lightness: 1");
   });
+
+  it("injects the CSS reset via @seyuna;", async () => {
+    const input = "@seyuna;";
+    const result = await run(input, { config: mockConfig });
+
+    // Verify layers
+    expect(result.css).toContain("@layer reset, base, components, utilities;");
+    expect(result.css).toContain("@layer reset {");
+
+    // Verify key reset properties
+    expect(result.css).toContain("box-sizing: border-box;");
+    expect(result.css).toContain("-webkit-text-size-adjust: none;");
+    expect(result.css).toContain("text-size-adjust: none;");
+    expect(result.css).toContain("container-type: inline-size;");
+    expect(result.css).toContain("text-wrap: balance;");
+    expect(result.css).toContain("all: unset;");
+    expect(result.css).toContain("scroll-margin-block: 1rem;");
+  });
 });