@seyuna/postcss 1.0.0-canary.7 → 1.0.0-canary.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/at-rules/color.d.ts +19 -3
- package/dist/at-rules/color.js +49 -12
- package/dist/at-rules/index.js +2 -1
- package/package.json +1 -1
- package/src/at-rules/color.ts +56 -14
- package/src/at-rules/index.ts +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
|
+
# [1.0.0-canary.9](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.8...v1.0.0-canary.9) (2025-09-10)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* colors selector in at-rule `each-fixed-color` ([31adb28](https://github.com/seyuna-corp/seyuna-postcss/commit/31adb28f3576a0dcfb78a9aadf331ee4b7ef3e0c))
|
|
7
|
+
|
|
8
|
+
# [1.0.0-canary.8](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.7...v1.0.0-canary.8) (2025-09-10)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* added at-rule `each-fixed-color` ([699ee0d](https://github.com/seyuna-corp/seyuna-postcss/commit/699ee0defd1fbb0ff91a90c1e13358b1ef9832b2))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### BREAKING CHANGES
|
|
17
|
+
|
|
18
|
+
* at-rule `each-seyuna-color` renamed to `each-standard-color`
|
|
19
|
+
|
|
1
20
|
# [1.0.0-canary.7](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.6...v1.0.0-canary.7) (2025-09-10)
|
|
2
21
|
|
|
3
22
|
|
package/dist/at-rules/color.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { AtRule } from "postcss";
|
|
2
2
|
/**
|
|
3
|
-
* Custom PostCSS plugin handler for `@each-
|
|
3
|
+
* Custom PostCSS plugin handler for `@each-standard-color` at-rules.
|
|
4
4
|
*
|
|
5
5
|
* Example usage:
|
|
6
6
|
*
|
|
7
|
-
* @each-
|
|
7
|
+
* @each-standard-color {
|
|
8
8
|
* color: white;
|
|
9
9
|
* }
|
|
10
10
|
*
|
|
@@ -15,4 +15,20 @@ import { AtRule } from "postcss";
|
|
|
15
15
|
* .gamma { color: white; }
|
|
16
16
|
* ...
|
|
17
17
|
*/
|
|
18
|
-
export declare function
|
|
18
|
+
export declare function eachStandardColor(atRule: AtRule): void;
|
|
19
|
+
/**
|
|
20
|
+
* Custom PostCSS plugin handler for `@each-fixed-color` at-rules.
|
|
21
|
+
*
|
|
22
|
+
* Example usage:
|
|
23
|
+
*
|
|
24
|
+
* @each-fixed-color {
|
|
25
|
+
* color: white;
|
|
26
|
+
* }
|
|
27
|
+
*
|
|
28
|
+
* Will generate:
|
|
29
|
+
*
|
|
30
|
+
* .primary { color: white; }
|
|
31
|
+
* .secondary { color: white; }
|
|
32
|
+
* ...
|
|
33
|
+
*/
|
|
34
|
+
export declare function eachFixedColor(atRule: AtRule): void;
|
package/dist/at-rules/color.js
CHANGED
|
@@ -3,16 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.
|
|
6
|
+
exports.eachStandardColor = eachStandardColor;
|
|
7
|
+
exports.eachFixedColor = eachFixedColor;
|
|
7
8
|
const postcss_1 = require("postcss");
|
|
8
9
|
const fs_1 = __importDefault(require("fs"));
|
|
9
10
|
const path_1 = __importDefault(require("path"));
|
|
10
11
|
/**
|
|
11
|
-
* Custom PostCSS plugin handler for `@each-
|
|
12
|
+
* Custom PostCSS plugin handler for `@each-standard-color` at-rules.
|
|
12
13
|
*
|
|
13
14
|
* Example usage:
|
|
14
15
|
*
|
|
15
|
-
* @each-
|
|
16
|
+
* @each-standard-color {
|
|
16
17
|
* color: white;
|
|
17
18
|
* }
|
|
18
19
|
*
|
|
@@ -23,21 +24,13 @@ const path_1 = __importDefault(require("path"));
|
|
|
23
24
|
* .gamma { color: white; }
|
|
24
25
|
* ...
|
|
25
26
|
*/
|
|
26
|
-
function
|
|
27
|
+
function eachStandardColor(atRule) {
|
|
27
28
|
// Read seyuna.json from project root
|
|
28
29
|
const jsonPath = path_1.default.resolve(process.cwd(), "seyuna.json");
|
|
29
30
|
const fileContents = fs_1.default.readFileSync(jsonPath, "utf-8");
|
|
30
31
|
const data = JSON.parse(fileContents);
|
|
31
32
|
const hues = data.ui.theme.hues;
|
|
32
|
-
const light_colors = data.ui.theme.light;
|
|
33
|
-
const dark_colors = data.ui.theme.dark;
|
|
34
33
|
const hueNamesSet = new Set(Object.keys(hues));
|
|
35
|
-
const lightColorNamesSet = new Set(Object.keys(light_colors));
|
|
36
|
-
const darkColorNamesSet = new Set(Object.keys(dark_colors));
|
|
37
|
-
const mergedColorNamesSet = new Set([
|
|
38
|
-
...lightColorNamesSet,
|
|
39
|
-
...darkColorNamesSet,
|
|
40
|
-
]);
|
|
41
34
|
// Guard against atRule.nodes being undefined
|
|
42
35
|
const nodes = atRule.nodes ?? [];
|
|
43
36
|
const generatedRules = [];
|
|
@@ -57,6 +50,50 @@ function eachSeyunaColor(atRule) {
|
|
|
57
50
|
cloneNodesWithName(hueName).forEach((n) => rule.append(n));
|
|
58
51
|
generatedRules.push(rule);
|
|
59
52
|
}
|
|
53
|
+
// Replace the original @each-seyuna-color at-rule with all the generated rules
|
|
54
|
+
atRule.replaceWith(...generatedRules);
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Custom PostCSS plugin handler for `@each-fixed-color` at-rules.
|
|
58
|
+
*
|
|
59
|
+
* Example usage:
|
|
60
|
+
*
|
|
61
|
+
* @each-fixed-color {
|
|
62
|
+
* color: white;
|
|
63
|
+
* }
|
|
64
|
+
*
|
|
65
|
+
* Will generate:
|
|
66
|
+
*
|
|
67
|
+
* .primary { color: white; }
|
|
68
|
+
* .secondary { color: white; }
|
|
69
|
+
* ...
|
|
70
|
+
*/
|
|
71
|
+
function eachFixedColor(atRule) {
|
|
72
|
+
// Read seyuna.json from project root
|
|
73
|
+
const jsonPath = path_1.default.resolve(process.cwd(), "seyuna.json");
|
|
74
|
+
const fileContents = fs_1.default.readFileSync(jsonPath, "utf-8");
|
|
75
|
+
const data = JSON.parse(fileContents);
|
|
76
|
+
const light_colors = data.ui.theme.light.colors;
|
|
77
|
+
const dark_colors = data.ui.theme.dark.colors;
|
|
78
|
+
const lightColorNamesSet = new Set(Object.keys(light_colors));
|
|
79
|
+
const darkColorNamesSet = new Set(Object.keys(dark_colors));
|
|
80
|
+
const mergedColorNamesSet = new Set([
|
|
81
|
+
...lightColorNamesSet,
|
|
82
|
+
...darkColorNamesSet,
|
|
83
|
+
]);
|
|
84
|
+
// Guard against atRule.nodes being undefined
|
|
85
|
+
const nodes = atRule.nodes ?? [];
|
|
86
|
+
const generatedRules = [];
|
|
87
|
+
// Helper to clone nodes and replace {name} placeholder
|
|
88
|
+
const cloneNodesWithName = (name) => nodes.map((node) => {
|
|
89
|
+
const cloned = node.clone();
|
|
90
|
+
// Only process declarations
|
|
91
|
+
if (cloned.type === "decl") {
|
|
92
|
+
const decl = cloned;
|
|
93
|
+
decl.value = decl.value.replace(/\{name\}/g, name);
|
|
94
|
+
}
|
|
95
|
+
return cloned;
|
|
96
|
+
});
|
|
60
97
|
// Generate rules for mergedColorNamesSet
|
|
61
98
|
for (const colorName of mergedColorNamesSet) {
|
|
62
99
|
const rule = new postcss_1.Rule({ selector: `.${colorName}` });
|
package/dist/at-rules/index.js
CHANGED
|
@@ -11,7 +11,8 @@ const container_1 = __importDefault(require("./container"));
|
|
|
11
11
|
const color_1 = require("./color");
|
|
12
12
|
// Ordered array ensures execution order
|
|
13
13
|
exports.atRuleHandlers = [
|
|
14
|
-
{ name: "each-
|
|
14
|
+
{ name: "each-standard-color", handler: color_1.eachStandardColor }, // first
|
|
15
|
+
{ name: "each-fixed-color", handler: color_1.eachFixedColor },
|
|
15
16
|
{ name: "light", handler: light_1.default },
|
|
16
17
|
{ name: "dark", handler: dark_1.default },
|
|
17
18
|
{ name: "container", handler: container_1.default },
|
package/package.json
CHANGED
package/src/at-rules/color.ts
CHANGED
|
@@ -4,11 +4,11 @@ import path from "path";
|
|
|
4
4
|
import { SeyunaConfig } from "../types";
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* Custom PostCSS plugin handler for `@each-
|
|
7
|
+
* Custom PostCSS plugin handler for `@each-standard-color` at-rules.
|
|
8
8
|
*
|
|
9
9
|
* Example usage:
|
|
10
10
|
*
|
|
11
|
-
* @each-
|
|
11
|
+
* @each-standard-color {
|
|
12
12
|
* color: white;
|
|
13
13
|
* }
|
|
14
14
|
*
|
|
@@ -19,24 +19,13 @@ import { SeyunaConfig } from "../types";
|
|
|
19
19
|
* .gamma { color: white; }
|
|
20
20
|
* ...
|
|
21
21
|
*/
|
|
22
|
-
export function
|
|
22
|
+
export function eachStandardColor(atRule: AtRule) {
|
|
23
23
|
// Read seyuna.json from project root
|
|
24
24
|
const jsonPath = path.resolve(process.cwd(), "seyuna.json");
|
|
25
25
|
const fileContents = fs.readFileSync(jsonPath, "utf-8");
|
|
26
26
|
const data: SeyunaConfig = JSON.parse(fileContents);
|
|
27
|
-
|
|
28
27
|
const hues = data.ui.theme.hues;
|
|
29
|
-
const light_colors = data.ui.theme.light;
|
|
30
|
-
const dark_colors = data.ui.theme.dark;
|
|
31
|
-
|
|
32
28
|
const hueNamesSet = new Set(Object.keys(hues));
|
|
33
|
-
const lightColorNamesSet = new Set(Object.keys(light_colors));
|
|
34
|
-
const darkColorNamesSet = new Set(Object.keys(dark_colors));
|
|
35
|
-
|
|
36
|
-
const mergedColorNamesSet = new Set([
|
|
37
|
-
...lightColorNamesSet,
|
|
38
|
-
...darkColorNamesSet,
|
|
39
|
-
]);
|
|
40
29
|
|
|
41
30
|
// Guard against atRule.nodes being undefined
|
|
42
31
|
const nodes = atRule.nodes ?? [];
|
|
@@ -64,6 +53,59 @@ export function eachSeyunaColor(atRule: AtRule) {
|
|
|
64
53
|
generatedRules.push(rule);
|
|
65
54
|
}
|
|
66
55
|
|
|
56
|
+
// Replace the original @each-seyuna-color at-rule with all the generated rules
|
|
57
|
+
atRule.replaceWith(...generatedRules);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Custom PostCSS plugin handler for `@each-fixed-color` at-rules.
|
|
62
|
+
*
|
|
63
|
+
* Example usage:
|
|
64
|
+
*
|
|
65
|
+
* @each-fixed-color {
|
|
66
|
+
* color: white;
|
|
67
|
+
* }
|
|
68
|
+
*
|
|
69
|
+
* Will generate:
|
|
70
|
+
*
|
|
71
|
+
* .primary { color: white; }
|
|
72
|
+
* .secondary { color: white; }
|
|
73
|
+
* ...
|
|
74
|
+
*/
|
|
75
|
+
export function eachFixedColor(atRule: AtRule) {
|
|
76
|
+
// Read seyuna.json from project root
|
|
77
|
+
const jsonPath = path.resolve(process.cwd(), "seyuna.json");
|
|
78
|
+
const fileContents = fs.readFileSync(jsonPath, "utf-8");
|
|
79
|
+
const data: SeyunaConfig = JSON.parse(fileContents);
|
|
80
|
+
const light_colors = data.ui.theme.light.colors;
|
|
81
|
+
const dark_colors = data.ui.theme.dark.colors;
|
|
82
|
+
const lightColorNamesSet = new Set(Object.keys(light_colors));
|
|
83
|
+
const darkColorNamesSet = new Set(Object.keys(dark_colors));
|
|
84
|
+
|
|
85
|
+
const mergedColorNamesSet = new Set([
|
|
86
|
+
...lightColorNamesSet,
|
|
87
|
+
...darkColorNamesSet,
|
|
88
|
+
]);
|
|
89
|
+
|
|
90
|
+
// Guard against atRule.nodes being undefined
|
|
91
|
+
const nodes = atRule.nodes ?? [];
|
|
92
|
+
|
|
93
|
+
const generatedRules: Rule[] = [];
|
|
94
|
+
|
|
95
|
+
// Helper to clone nodes and replace {name} placeholder
|
|
96
|
+
const cloneNodesWithName = (name: string) =>
|
|
97
|
+
nodes.map((node) => {
|
|
98
|
+
const cloned = node.clone();
|
|
99
|
+
|
|
100
|
+
// Only process declarations
|
|
101
|
+
if (cloned.type === "decl") {
|
|
102
|
+
const decl = cloned as Declaration;
|
|
103
|
+
decl.value = decl.value.replace(/\{name\}/g, name);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return cloned;
|
|
107
|
+
});
|
|
108
|
+
|
|
67
109
|
// Generate rules for mergedColorNamesSet
|
|
68
110
|
for (const colorName of mergedColorNamesSet) {
|
|
69
111
|
const rule = new Rule({ selector: `.${colorName}` });
|
package/src/at-rules/index.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import dark from "./dark";
|
|
3
3
|
import light from "./light";
|
|
4
4
|
import container from "./container";
|
|
5
|
-
import {
|
|
5
|
+
import { eachStandardColor, eachFixedColor } from "./color";
|
|
6
6
|
import type { AtRule } from "postcss";
|
|
7
7
|
|
|
8
8
|
// Each handler has a name (matches the at-rule) and the function
|
|
@@ -13,7 +13,8 @@ export interface AtRuleHandler {
|
|
|
13
13
|
|
|
14
14
|
// Ordered array ensures execution order
|
|
15
15
|
export const atRuleHandlers: AtRuleHandler[] = [
|
|
16
|
-
{ name: "each-
|
|
16
|
+
{ name: "each-standard-color", handler: eachStandardColor }, // first
|
|
17
|
+
{ name: "each-fixed-color", handler: eachFixedColor },
|
|
17
18
|
{ name: "light", handler: light },
|
|
18
19
|
{ name: "dark", handler: dark },
|
|
19
20
|
{ name: "container", handler: container },
|