@seyuna/postcss 1.0.0-canary.2 → 1.0.0-canary.21

package/tests/plugin.test.ts

@@ -0,0 +1,143 @@
+import { describe, it, expect } from 'vitest';
+import postcss from 'postcss';
+import plugin from '../src/index';
+
+const mockConfig = {
+  ui: {
+    theme: {
+      hues: {
+        primary: "200",
+        secondary: "100"
+      },
+      colors: {
+        white: { lightness: 1, chroma: 0, hue: 0 },
+        black: { lightness: 0, chroma: 0, hue: 0 }
+      },
+      light: {
+        lightness: 0.66,
+        colors: {
+          surface: { lightness: 1, chroma: 0, hue: 0 }
+        }
+      },
+      dark: {
+        lightness: 0.66,
+        colors: {
+          surface: { lightness: 0, chroma: 0, hue: 0 }
+        }
+      },
+      breakpoints: {
+        tablet: "48rem"
+      }
+    }
+  }
+};
+
+async function run(input: string, opts: any = {}) {
+  const mergedOpts = { config: mockConfig, ...opts };
+  return postcss([plugin(mergedOpts)]).process(input, { from: undefined });
+}
+
+describe('Seyuna PostCSS Plugin', () => {
+  it('processes sc() function', async () => {
+    const input = '.test { color: sc(primary); }';
+    const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes sc() with alpha', async () => {
+    const input = '.test { color: sc(primary, 0.5); }';
+    const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes alpha() function with color name', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() function with color name', async () => {
+    const input = '.test { color: lighten(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--lightness) + 0.1) var(--chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes darken() function with color name', async () => {
+    const input = '.test { color: darken(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--lightness) - 0.1) var(--chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes theme() function', async () => {
+    // We pass the config via opts for testing
+    const input = '.test { border-radius: theme(ui.theme.breakpoints.tablet); }';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain('.test { border-radius: 48rem');
+  });
+
+  it('processes @xs container at-rule', async () => {
+    const input = '@xs { .box { color: red; } }';
+    const result = await run(input);
+    expect(result.css).toContain('@container (min-width: 20rem)');
+    expect(result.css).toContain('.box { color: red');
+  });
+
+  it('processes @light at-rule', async () => {
+    const input = '@light { .test { color: black; } }';
+    const result = await run(input);
+    expect(result.css).toContain('@media (prefers-color-scheme: light)');
+    expect(result.css).toContain('[data-mode="system"] &');
+    expect(result.css).toContain('[data-mode="light"] &');
+  });
+
+  it('processes alpha() with standard color', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes alpha() with fixed color', async () => {
+    const input = '.test { color: alpha(surface, 0.5); }';
+    const output = 'color: oklch(var(--surface-lightness) var(--surface-chroma) var(--surface-hue) / 0.5)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes contrast() with fixed color', async () => {
+    const input = '.test { color: contrast(surface); }';
+    const output = 'color: oklch(calc((var(--surface-lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes contrast() with standard color', async () => {
+    const input = '.test { color: contrast(primary); }';
+    const output = 'color: oklch(calc((var(--lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('throws error for unknown standard color in strict mode', async () => {
+    const input = '.test { color: sc(unknown); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Standard color 'unknown' not found/);
+  });
+
+  it('throws error for unknown fixed color in strict mode', async () => {
+    const input = '.test { color: fc(unknown); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Fixed color 'unknown' not found/);
+  });
+
+  it('throws error for unknown color in alpha() in strict mode', async () => {
+    const input = '.test { color: alpha(unknown, 0.5); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Color 'unknown' not found in seyuna.json/);
+  });
+});

package/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2019",
     "module": "CommonJS",
     "lib": ["ES2020"],
     "declaration": true,
     "outDir": "dist",
     "strict": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Node",
     "esModuleInterop": true,
     "skipLibCheck": true
   },

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

@@ -1,2 +0,0 @@
-import { AtRule } from "postcss";
-export default function dark(atRule: AtRule): void;

package/dist/at-rules/dark.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = dark;
-const postcss_1 = require("postcss");
-function dark(atRule) {
-    const clonedNodes = [];
-    // Clone all child nodes so we can reuse them
-    atRule.each((node) => {
-        clonedNodes.push(node.clone());
-    });
-    // Create `[data-mode="dark"] &` rule
-    const dataAttrRule = new postcss_1.Rule({
-        selector: `[data-mode="dark"] &`,
-    });
-    clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-    // Create `@media (prefers-color-scheme: dark)` wrapper
-    const mediaAtRule = new postcss_1.AtRule({
-        name: "media",
-        params: "(prefers-color-scheme: dark)",
-    });
-    const mediaRule = new postcss_1.Rule({
-        selector: `&`,
-    });
-    clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-    mediaAtRule.append(mediaRule);
-    // Replace original @dark rule with both new rules
-    atRule.replaceWith(dataAttrRule, mediaAtRule);
-}

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

@@ -1,2 +0,0 @@
-import { AtRule } from "postcss";
-export default function light(atRule: AtRule): void;

package/dist/at-rules/light.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = light;
-const postcss_1 = require("postcss");
-function light(atRule) {
-    const clonedNodes = [];
-    // Clone all child nodes so we can reuse them
-    atRule.each((node) => {
-        clonedNodes.push(node.clone());
-    });
-    // Create `[data-mode="light"] &` rule
-    const dataAttrRule = new postcss_1.Rule({
-        selector: `[data-mode="light"] &`,
-    });
-    clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-    // Create `@media (prefers-color-scheme: light)` wrapper
-    const mediaAtRule = new postcss_1.AtRule({
-        name: "media",
-        params: "(prefers-color-scheme: light)",
-    });
-    const mediaRule = new postcss_1.Rule({
-        selector: `&`,
-    });
-    clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-    mediaAtRule.append(mediaRule);
-    // Replace original @light rule with both new rules
-    atRule.replaceWith(dataAttrRule, mediaAtRule);
-}

package/dist/functions/spacing.d.ts

@@ -1 +0,0 @@
-export default function spacing(multiplier: string): string;

package/dist/functions/spacing.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = spacing;
-function spacing(multiplier) {
-    return `${parseFloat(multiplier) * 1}rem`;
-}

package/src/at-rules/dark.ts

@@ -1,33 +0,0 @@
-import { Rule, AtRule, ChildNode } from "postcss";
-
-export default function dark(atRule: AtRule) {
-  const clonedNodes: ChildNode[] = [];
-
-  // Clone all child nodes so we can reuse them
-  atRule.each((node: ChildNode) => {
-    clonedNodes.push(node.clone());
-  });
-
-  // Create `[data-mode="dark"] &` rule
-  const dataAttrRule = new Rule({
-    selector: `[data-mode="dark"] &`,
-  });
-
-  clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-
-  // Create `@media (prefers-color-scheme: dark)` wrapper
-  const mediaAtRule = new AtRule({
-    name: "media",
-    params: "(prefers-color-scheme: dark)",
-  });
-
-  const mediaRule = new Rule({
-    selector: `&`,
-  });
-
-  clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-  mediaAtRule.append(mediaRule);
-
-  // Replace original @dark rule with both new rules
-  atRule.replaceWith(dataAttrRule, mediaAtRule);
-}

package/src/at-rules/light.ts

@@ -1,33 +0,0 @@
-import { Rule, AtRule, ChildNode } from "postcss";
-
-export default function light(atRule: AtRule) {
-  const clonedNodes: ChildNode[] = [];
-
-  // Clone all child nodes so we can reuse them
-  atRule.each((node: ChildNode) => {
-    clonedNodes.push(node.clone());
-  });
-
-  // Create `[data-mode="light"] &` rule
-  const dataAttrRule = new Rule({
-    selector: `[data-mode="light"] &`,
-  });
-
-  clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-
-  // Create `@media (prefers-color-scheme: light)` wrapper
-  const mediaAtRule = new AtRule({
-    name: "media",
-    params: "(prefers-color-scheme: light)",
-  });
-
-  const mediaRule = new Rule({
-    selector: `&`,
-  });
-
-  clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-  mediaAtRule.append(mediaRule);
-
-  // Replace original @light rule with both new rules
-  atRule.replaceWith(dataAttrRule, mediaAtRule);
-}

package/src/functions/spacing.ts

@@ -1,3 +0,0 @@
-export default function spacing(multiplier: string) {
-  return `${parseFloat(multiplier) * 1}rem`;
-}