@astryxdesign/cli 0.1.3-canary.cbfd87b → 0.1.3-canary.cd0c106
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/docs/browser-support.doc.mjs +12 -12
- package/package.json +7 -7
- package/src/codemods/transforms/v0.1.0/__tests__/drop-xds-prefix-imports.test.mjs +43 -0
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-css-surfaces.test.mjs +36 -0
- package/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-module-specifiers.test.mjs +41 -0
- package/src/codemods/transforms/v0.1.0/drop-xds-prefix-imports.mjs +65 -13
- package/src/codemods/transforms/v0.1.0/migrate-xds-css-surfaces.mjs +43 -3
- package/src/codemods/transforms/v0.1.0/migrate-xds-module-specifiers.mjs +45 -0
- package/src/commands/doctor.test.mjs +4 -3
- package/src/utils/paths.test.mjs +2 -2
|
@@ -15,11 +15,11 @@ export const docs = {
|
|
|
15
15
|
content: [
|
|
16
16
|
{
|
|
17
17
|
type: 'prose',
|
|
18
|
-
text: 'Astryx is built on modern web platform features
|
|
18
|
+
text: 'Astryx is built on modern web platform features: the Popover API, CSS anchor positioning, and CSS `light-dark()`. These let components stay small, accessible, and dependency-free, but they also set a floor on which browsers render everything correctly.',
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
type: 'prose',
|
|
22
|
-
text: 'A design system does not own its traffic
|
|
22
|
+
text: 'A design system does not own its traffic; the products built on it do. Their audiences range from evergreen-Chrome-only internal tools to public sites with meaningful older-Safari share. So Astryx does not declare a single hard browser floor the way an app would. Instead it defines tiers that describe what works at each level, and hands the final decision to you. Pick the tier that matches your audience.',
|
|
23
23
|
},
|
|
24
24
|
],
|
|
25
25
|
},
|
|
@@ -35,19 +35,19 @@ export const docs = {
|
|
|
35
35
|
headers: ['Tier', 'Baseline', 'Representative versions', 'What your users experience'],
|
|
36
36
|
rows: [
|
|
37
37
|
[
|
|
38
|
-
'Tier 1
|
|
38
|
+
'Tier 1: Full fidelity',
|
|
39
39
|
'Current Baseline (2026)',
|
|
40
40
|
'Chrome 125+, Edge 125+, Safari 26+, Firefox 147+',
|
|
41
41
|
'Everything works, including CSS anchor positioning. This is the reference target.',
|
|
42
42
|
],
|
|
43
43
|
[
|
|
44
|
-
'Tier 2
|
|
44
|
+
'Tier 2: Functional',
|
|
45
45
|
'Baseline − 2 years (2024)',
|
|
46
46
|
'Chrome 114+, Edge 114+, Safari 17+, Firefox 125+',
|
|
47
47
|
'Components open, dismiss, and are fully usable. Only anchor positioning is missing, so layered surfaces (tooltips, menus, popovers) may not be positioned next to their trigger.',
|
|
48
48
|
],
|
|
49
49
|
[
|
|
50
|
-
'Tier 3
|
|
50
|
+
'Tier 3: Below Tier 2',
|
|
51
51
|
'Older than Baseline − 2',
|
|
52
52
|
'Anything older',
|
|
53
53
|
'Best-effort. The only guarantee is "does not crash." `light-dark()` is unavailable, so theme colors may fall back to defaults.',
|
|
@@ -70,7 +70,7 @@ export const docs = {
|
|
|
70
70
|
[
|
|
71
71
|
'CSS Anchor Positioning',
|
|
72
72
|
'Positions layered surfaces relative to their trigger (tooltips, menus, popovers, dropdowns).',
|
|
73
|
-
'Baseline 2026
|
|
73
|
+
'Baseline 2026: the tightest requirement.',
|
|
74
74
|
],
|
|
75
75
|
[
|
|
76
76
|
'Popover API',
|
|
@@ -86,7 +86,7 @@ export const docs = {
|
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
type: 'prose',
|
|
89
|
-
text: 'The gap that matters is between Tier 1 and Tier 2: the Popover API and `light-dark()` reached wide availability well before anchor positioning. So in Tier 2 browsers, layered surfaces open and dismiss correctly
|
|
89
|
+
text: 'The gap that matters is between Tier 1 and Tier 2: the Popover API and `light-dark()` reached wide availability well before anchor positioning. So in Tier 2 browsers, layered surfaces open and dismiss correctly; they just are not positioned. This is the one feature most consumers will need to reason about.',
|
|
90
90
|
},
|
|
91
91
|
],
|
|
92
92
|
},
|
|
@@ -95,7 +95,7 @@ export const docs = {
|
|
|
95
95
|
content: [
|
|
96
96
|
{
|
|
97
97
|
type: 'prose',
|
|
98
|
-
text: 'The browser requirement is concentrated in the layered-surface components
|
|
98
|
+
text: 'The browser requirement is concentrated in the layered-surface components: anything that renders content in an overlay positioned against a trigger:',
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
101
|
type: 'list',
|
|
@@ -112,7 +112,7 @@ export const docs = {
|
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
114
|
type: 'prose',
|
|
115
|
-
text: 'If your product does not use any of these, it has no anchor-positioning requirement at all
|
|
115
|
+
text: 'If your product does not use any of these, it has no anchor-positioning requirement at all; it needs only `light-dark()` (Tier 2 and up) for correct theme colors. Layout, typography, forms, buttons, cards, tables, and navigation all work down to Tier 2 with no special handling.',
|
|
116
116
|
},
|
|
117
117
|
],
|
|
118
118
|
},
|
|
@@ -132,7 +132,7 @@ export const docs = {
|
|
|
132
132
|
type: 'list',
|
|
133
133
|
style: 'dont',
|
|
134
134
|
items: [
|
|
135
|
-
'Astryx does not guarantee correct layer positioning below Tier 1 (anchor positioning). Closing that gap for a Tier 2 audience is a consumer choice
|
|
135
|
+
'Astryx does not guarantee correct layer positioning below Tier 1 (anchor positioning). Closing that gap for a Tier 2 audience is a consumer choice; see below.',
|
|
136
136
|
'Astryx does not ship a `light-dark()` fallback, so theme colors are not guaranteed below Tier 2.',
|
|
137
137
|
],
|
|
138
138
|
},
|
|
@@ -143,7 +143,7 @@ export const docs = {
|
|
|
143
143
|
content: [
|
|
144
144
|
{
|
|
145
145
|
type: 'prose',
|
|
146
|
-
text: 'If your audience includes Tier 2 browsers and you need correct layer positioning, you have three options, cheapest first. All of them are decisions you make for your audience
|
|
146
|
+
text: 'If your audience includes Tier 2 browsers and you need correct layer positioning, you have three options, cheapest first. All of them are decisions you make for your audience; Astryx does not impose one.',
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
type: 'list',
|
|
@@ -192,7 +192,7 @@ const hasLightDark = CSS.supports('color', 'light-dark(#000, #fff)');`,
|
|
|
192
192
|
},
|
|
193
193
|
{
|
|
194
194
|
type: 'prose',
|
|
195
|
-
text: 'This is not an arbitrary window: Baseline − 2 is close to where anchor positioning stops being available while the Popover API and `light-dark()` still are
|
|
195
|
+
text: 'This is not an arbitrary window: Baseline − 2 is close to where anchor positioning stops being available while the Popover API and `light-dark()` still are, so the tier boundary tracks a real capability edge, not a guessed date. The version floors above are reviewed and advanced roughly once a year as new Baseline years land. Always feature-detect rather than hardcoding version numbers, so your app adapts automatically as the platform moves.',
|
|
196
196
|
},
|
|
197
197
|
],
|
|
198
198
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.1.3-canary.
|
|
3
|
+
"version": "0.1.3-canary.cd0c106",
|
|
4
4
|
"displayName": "CLI",
|
|
5
5
|
"description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"zod": "^4.4.3"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
|
-
"@astryxdesign/core": "0.1.3-canary.
|
|
79
|
-
"@astryxdesign/lab": "0.1.3-canary.
|
|
80
|
-
"@astryxdesign/theme-neutral": "0.1.3-canary.
|
|
78
|
+
"@astryxdesign/core": "0.1.3-canary.cd0c106",
|
|
79
|
+
"@astryxdesign/lab": "0.1.3-canary.cd0c106",
|
|
80
|
+
"@astryxdesign/theme-neutral": "0.1.3-canary.cd0c106",
|
|
81
81
|
"gpt-tokenizer": "^2.0.0"
|
|
82
82
|
},
|
|
83
83
|
"peerDependenciesMeta": {
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
}
|
|
93
93
|
},
|
|
94
94
|
"devDependencies": {
|
|
95
|
-
"@astryxdesign/core": "0.1.3-canary.
|
|
96
|
-
"@astryxdesign/lab": "0.1.3-canary.
|
|
97
|
-
"@astryxdesign/theme-neutral": "0.1.3-canary.
|
|
95
|
+
"@astryxdesign/core": "0.1.3-canary.cd0c106",
|
|
96
|
+
"@astryxdesign/lab": "0.1.3-canary.cd0c106",
|
|
97
|
+
"@astryxdesign/theme-neutral": "0.1.3-canary.cd0c106",
|
|
98
98
|
"gpt-tokenizer": "^2.0.0"
|
|
99
99
|
},
|
|
100
100
|
"scripts": {
|
|
@@ -134,4 +134,47 @@ describe('drop-xds-prefix-imports', () => {
|
|
|
134
134
|
expect(output).toContain(`import {useState} from 'react';`);
|
|
135
135
|
expect(output).toContain('const x = 1;');
|
|
136
136
|
});
|
|
137
|
+
|
|
138
|
+
it('aliases to Astryx<Name> when the bare name collides with a local export function', async () => {
|
|
139
|
+
const input = [
|
|
140
|
+
`import {XDSCodeBlock} from '@xds/core/CodeBlock';`,
|
|
141
|
+
`export function CodeBlock({code}: {code: string}) {`,
|
|
142
|
+
` return <XDSCodeBlock code={code} />;`,
|
|
143
|
+
`}`,
|
|
144
|
+
].join('\n');
|
|
145
|
+
const output = await applyTransform(input);
|
|
146
|
+
// Import aliased to AstryxCodeBlock; local declaration untouched.
|
|
147
|
+
expect(output).toContain('CodeBlock as AstryxCodeBlock');
|
|
148
|
+
expect(output).toContain('@xds/core/CodeBlock');
|
|
149
|
+
expect(output).toContain('export function CodeBlock({code}');
|
|
150
|
+
expect(output).toContain('<AstryxCodeBlock code={code} />');
|
|
151
|
+
// No duplicate CodeBlock binding (not imported bare).
|
|
152
|
+
expect(output).not.toMatch(/import \{CodeBlock\}/);
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
it('aliases on collision with a local const/class binding', async () => {
|
|
156
|
+
const input = [
|
|
157
|
+
`import {XDSCard} from '@xds/core';`,
|
|
158
|
+
`const Card = 42;`,
|
|
159
|
+
`export const value = <XDSCard />;`,
|
|
160
|
+
`export const other = Card;`,
|
|
161
|
+
].join('\n');
|
|
162
|
+
const output = await applyTransform(input);
|
|
163
|
+
expect(output).toContain('import {Card as AstryxCard}');
|
|
164
|
+
expect(output).toContain('const Card = 42;');
|
|
165
|
+
expect(output).toContain('<AstryxCard />');
|
|
166
|
+
expect(output).toContain('export const other = Card;');
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
it('un-prefixes normally when there is NO local collision', async () => {
|
|
170
|
+
const input = [
|
|
171
|
+
`import {XDSCodeBlock} from '@xds/core/CodeBlock';`,
|
|
172
|
+
`export const App = () => <XDSCodeBlock code="x" />;`,
|
|
173
|
+
].join('\n');
|
|
174
|
+
const output = await applyTransform(input);
|
|
175
|
+
expect(output).toContain('{CodeBlock}');
|
|
176
|
+
expect(output).toContain('@xds/core/CodeBlock');
|
|
177
|
+
expect(output).toContain('<CodeBlock code="x" />');
|
|
178
|
+
expect(output).not.toContain('AstryxCodeBlock');
|
|
179
|
+
});
|
|
137
180
|
});
|
|
@@ -64,4 +64,40 @@ describe('migrate-xds-css-surfaces', () => {
|
|
|
64
64
|
const output = await applyTransform(input);
|
|
65
65
|
expect(output).toBe(input);
|
|
66
66
|
});
|
|
67
|
+
|
|
68
|
+
it('rewrites @import of @xds/* package stylesheets', async () => {
|
|
69
|
+
const input = [
|
|
70
|
+
`@import '@xds/core/reset.css';`,
|
|
71
|
+
`@import '@xds/core/xds.css';`,
|
|
72
|
+
`@import '@xds/theme-default/theme.css';`,
|
|
73
|
+
].join('\n');
|
|
74
|
+
const output = await applyTransform(input);
|
|
75
|
+
expect(output).toContain(`@import '@astryxdesign/core/reset.css';`);
|
|
76
|
+
// xds.css is renamed to astryx.css (file rename, not just scope swap).
|
|
77
|
+
expect(output).toContain(`@import '@astryxdesign/core/astryx.css';`);
|
|
78
|
+
// theme-default collapses to theme-neutral.
|
|
79
|
+
expect(output).toContain(
|
|
80
|
+
`@import '@astryxdesign/theme-neutral/theme.css';`,
|
|
81
|
+
);
|
|
82
|
+
expect(output).not.toContain('@xds/');
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
it('collapses theme-daily @import to theme-neutral and preserves quote style', async () => {
|
|
86
|
+
const input = `@import "@xds/theme-daily/theme.css";`;
|
|
87
|
+
const output = await applyTransform(input);
|
|
88
|
+
expect(output).toBe(`@import "@astryxdesign/theme-neutral/theme.css";`);
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
it('rewrites @import url() form', async () => {
|
|
92
|
+
const input = `@import url('@xds/core/reset.css');`;
|
|
93
|
+
const output = await applyTransform(input);
|
|
94
|
+
expect(output).toContain(`@astryxdesign/core/reset.css`);
|
|
95
|
+
expect(output).not.toContain('@xds/');
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
it('does not touch @import of non-xds packages', async () => {
|
|
99
|
+
const input = `@import '@acme/widgets/styles.css';`;
|
|
100
|
+
const output = await applyTransform(input);
|
|
101
|
+
expect(output).toBe(input);
|
|
102
|
+
});
|
|
67
103
|
});
|
|
@@ -48,4 +48,45 @@ describe('migrate-xds-module-specifiers', () => {
|
|
|
48
48
|
const output = await applyTransform(input, 'test.ts');
|
|
49
49
|
expect(output).toBe(input);
|
|
50
50
|
});
|
|
51
|
+
|
|
52
|
+
it('remaps defaultTheme -> neutralTheme when collapsing theme-default', async () => {
|
|
53
|
+
const output = await applyTransform(
|
|
54
|
+
`import {defaultTheme} from '@xds/theme-default';`,
|
|
55
|
+
'test.ts',
|
|
56
|
+
);
|
|
57
|
+
// Package collapses to theme-neutral; binding aliased so local usage works.
|
|
58
|
+
expect(output).toContain('neutralTheme as defaultTheme');
|
|
59
|
+
expect(output).toContain('@astryxdesign/theme-neutral');
|
|
60
|
+
expect(output).not.toContain('@xds/');
|
|
61
|
+
expect(output).not.toContain('theme-default');
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
it('remaps defaultTheme -> neutralTheme for theme-daily and /built subpath', async () => {
|
|
65
|
+
const output = await applyTransform(
|
|
66
|
+
`import {defaultTheme} from '@xds/theme-daily/built';`,
|
|
67
|
+
'test.ts',
|
|
68
|
+
);
|
|
69
|
+
expect(output).toContain('neutralTheme as defaultTheme');
|
|
70
|
+
expect(output).toContain('@astryxdesign/theme-neutral/built');
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
it('preserves an existing alias when remapping defaultTheme', async () => {
|
|
74
|
+
const output = await applyTransform(
|
|
75
|
+
`import {defaultTheme as dt} from '@xds/theme-default';`,
|
|
76
|
+
'test.ts',
|
|
77
|
+
);
|
|
78
|
+
expect(output).toContain('neutralTheme as dt');
|
|
79
|
+
expect(output).toContain('@astryxdesign/theme-neutral');
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
it('does NOT remap neutralTheme import from theme-neutral (no rename needed)', async () => {
|
|
83
|
+
const output = await applyTransform(
|
|
84
|
+
`import {neutralTheme} from '@xds/theme-neutral';`,
|
|
85
|
+
'test.ts',
|
|
86
|
+
);
|
|
87
|
+
expect(output).toContain('neutralTheme');
|
|
88
|
+
expect(output).toContain('@astryxdesign/theme-neutral');
|
|
89
|
+
expect(output).not.toContain('defaultTheme');
|
|
90
|
+
expect(output).not.toContain('neutralTheme as');
|
|
91
|
+
});
|
|
51
92
|
});
|
|
@@ -85,35 +85,87 @@ export default function transformer(file, api) {
|
|
|
85
85
|
// local alias and only the imported name is rewritten.
|
|
86
86
|
const localRenames = new Map();
|
|
87
87
|
|
|
88
|
+
// Collision detection: un-prefixing `XDSCodeBlock` -> `CodeBlock` breaks if
|
|
89
|
+
// the file already has a top-level binding named `CodeBlock` (e.g. its own
|
|
90
|
+
// `export function CodeBlock`). Collect every existing top-level binding name
|
|
91
|
+
// up front so we can alias to `Astryx<Name>` instead of producing a duplicate
|
|
92
|
+
// declaration. We gather: import locals, and top-level function/class/var
|
|
93
|
+
// declaration names (the realistic collision sources for component wrappers).
|
|
94
|
+
const existingBindings = new Set();
|
|
95
|
+
root.find(j.ImportDeclaration).forEach(path => {
|
|
96
|
+
for (const spec of path.node.specifiers || []) {
|
|
97
|
+
if (spec.local && spec.local.name) existingBindings.add(spec.local.name);
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
const collectDeclName = node => {
|
|
101
|
+
if (!node) return;
|
|
102
|
+
if (
|
|
103
|
+
(node.type === 'FunctionDeclaration' ||
|
|
104
|
+
node.type === 'ClassDeclaration') &&
|
|
105
|
+
node.id
|
|
106
|
+
) {
|
|
107
|
+
existingBindings.add(node.id.name);
|
|
108
|
+
} else if (node.type === 'VariableDeclaration') {
|
|
109
|
+
for (const d of node.declarations) {
|
|
110
|
+
if (d.id && d.id.type === 'Identifier') existingBindings.add(d.id.name);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
root.find(j.Program).forEach(path => {
|
|
115
|
+
for (const stmt of path.node.body) {
|
|
116
|
+
collectDeclName(stmt);
|
|
117
|
+
// Unwrap `export function X` / `export const X`.
|
|
118
|
+
if (stmt.type === 'ExportNamedDeclaration' && stmt.declaration) {
|
|
119
|
+
collectDeclName(stmt.declaration);
|
|
120
|
+
}
|
|
121
|
+
if (stmt.type === 'ExportDefaultDeclaration' && stmt.declaration) {
|
|
122
|
+
collectDeclName(stmt.declaration);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
|
|
88
127
|
// 1. Rewrite import specifiers from @xds/core
|
|
89
128
|
root.find(j.ImportDeclaration).forEach(path => {
|
|
90
129
|
const source = path.node.source.value;
|
|
91
130
|
if (typeof source !== 'string' || !XDS_CORE_SOURCE.test(source)) return;
|
|
92
131
|
|
|
93
|
-
|
|
94
|
-
if (spec.type !== 'ImportSpecifier')
|
|
132
|
+
path.node.specifiers = (path.node.specifiers || []).map(spec => {
|
|
133
|
+
if (spec.type !== 'ImportSpecifier') return spec; // default/namespace
|
|
95
134
|
const importedName = spec.imported.name;
|
|
96
135
|
const bare = bareName(importedName);
|
|
97
|
-
if (!bare)
|
|
136
|
+
if (!bare) return spec;
|
|
98
137
|
|
|
99
138
|
const localName = spec.local.name;
|
|
100
139
|
const wasAliased = localName !== importedName;
|
|
101
140
|
|
|
102
|
-
//
|
|
103
|
-
|
|
104
|
-
|
|
141
|
+
// We REPLACE the specifier node (rather than mutating .imported/.local)
|
|
142
|
+
// because recast preserves the original printed form of a mutated
|
|
143
|
+
// ImportSpecifier and will drop a newly-introduced `as local` alias.
|
|
144
|
+
// Building a fresh node makes recast print the full `imported as local`.
|
|
105
145
|
if (wasAliased) {
|
|
106
146
|
// `import {XDSButton as Btn}` -> `import {Button as Btn}`.
|
|
107
|
-
// Local binding unchanged, so no usage rewrites needed.
|
|
108
147
|
hasChanges = true;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
148
|
+
return j.importSpecifier(j.identifier(bare), j.identifier(localName));
|
|
149
|
+
}
|
|
150
|
+
if (bare !== importedName && existingBindings.has(bare)) {
|
|
151
|
+
// COLLISION: the bare name is already a top-level binding in this file
|
|
152
|
+
// (e.g. a local `export function CodeBlock` alongside imported
|
|
153
|
+
// `XDSCodeBlock`). Un-prefixing directly would create a duplicate
|
|
154
|
+
// declaration, so alias the import to `Astryx<Name>` and rename the
|
|
155
|
+
// import's references to that alias, leaving the local binding intact.
|
|
156
|
+
const alias = `Astryx${bare}`;
|
|
157
|
+
localRenames.set(importedName, alias);
|
|
158
|
+
existingBindings.add(alias);
|
|
114
159
|
hasChanges = true;
|
|
160
|
+
return j.importSpecifier(j.identifier(bare), j.identifier(alias));
|
|
115
161
|
}
|
|
116
|
-
|
|
162
|
+
// `import {XDSButton}` -> `import {Button}`. The local binding is the
|
|
163
|
+
// prefixed name; rename it and all its references.
|
|
164
|
+
localRenames.set(importedName, bare);
|
|
165
|
+
existingBindings.add(bare);
|
|
166
|
+
hasChanges = true;
|
|
167
|
+
return j.importSpecifier(j.identifier(bare), j.identifier(bare));
|
|
168
|
+
});
|
|
117
169
|
});
|
|
118
170
|
|
|
119
171
|
// 2. Rewrite re-exports from @xds/core
|
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
* [data-xds-media (media attribute selector)
|
|
19
19
|
* @layer xds-theme (cascade layer name — incl. comma-separated
|
|
20
20
|
* @layer xds-base `@layer a, b;` statement lists and nested blocks)
|
|
21
|
+
* @import '@xds/...' (package stylesheet imports — scope rewrite, plus
|
|
22
|
+
* the @xds/core/xds.css -> @astryxdesign/core/
|
|
23
|
+
* astryx.css file rename and the theme-default /
|
|
24
|
+
* theme-daily -> theme-neutral collapse)
|
|
21
25
|
*
|
|
22
26
|
* It deliberately does NOT blindly replace every `xds` substring: a bare
|
|
23
27
|
* `xds` in a comment, a custom-property value, or an unrelated identifier is
|
|
@@ -30,9 +34,10 @@ export const meta = {
|
|
|
30
34
|
description:
|
|
31
35
|
'Rewrites the documented XDS CSS surfaces to their Astryx equivalents: ' +
|
|
32
36
|
'the `.xds-*` class-selector prefix, `[data-xds-theme]` / ' +
|
|
33
|
-
'`[data-xds-theme-prose]` / `[data-xds-media]` attribute selectors,
|
|
34
|
-
'`@layer xds-theme` / `@layer xds-base` cascade-layer names
|
|
35
|
-
'
|
|
37
|
+
'`[data-xds-theme-prose]` / `[data-xds-media]` attribute selectors, ' +
|
|
38
|
+
'`@layer xds-theme` / `@layer xds-base` cascade-layer names, and ' +
|
|
39
|
+
'`@import` of @xds/* package stylesheets (scope rewrite, xds.css->astryx.css, ' +
|
|
40
|
+
'theme-default/theme-daily->theme-neutral) all become their Astryx forms.',
|
|
36
41
|
pr: '#3092',
|
|
37
42
|
fileExtensions: ['.css', '.scss'],
|
|
38
43
|
};
|
|
@@ -52,6 +57,32 @@ function rewriteLayerPrelude(prelude) {
|
|
|
52
57
|
);
|
|
53
58
|
}
|
|
54
59
|
|
|
60
|
+
// Rewrite a single @import package-stylesheet specifier value (without quotes)
|
|
61
|
+
// from an @xds/* path to its @astryxdesign/* equivalent. Handles the two
|
|
62
|
+
// non-mechanical cases beyond the scope swap:
|
|
63
|
+
// @xds/core/xds.css -> @astryxdesign/core/astryx.css (file rename)
|
|
64
|
+
// @xds/theme-default/* -> @astryxdesign/theme-neutral/* (collapse)
|
|
65
|
+
// @xds/theme-daily/* -> @astryxdesign/theme-neutral/* (collapse)
|
|
66
|
+
// Returns the original value unchanged if it is not an @xds/* specifier.
|
|
67
|
+
function rewriteImportSpecifier(spec) {
|
|
68
|
+
if (!spec.startsWith('@xds/')) return spec;
|
|
69
|
+
// Theme package collapse (default/daily -> neutral).
|
|
70
|
+
let next = spec
|
|
71
|
+
.replace(/^@xds\/theme-default(\/|$)/, '@astryxdesign/theme-neutral$1')
|
|
72
|
+
.replace(/^@xds\/theme-daily(\/|$)/, '@astryxdesign/theme-neutral$1');
|
|
73
|
+
if (next === spec) {
|
|
74
|
+
// Not a collapsed theme — plain scope swap.
|
|
75
|
+
next = spec.replace(/^@xds\//, '@astryxdesign/');
|
|
76
|
+
}
|
|
77
|
+
// Core stylesheet file rename: xds.css -> astryx.css (only the core bundle;
|
|
78
|
+
// reset.css and others keep their names).
|
|
79
|
+
next = next.replace(
|
|
80
|
+
/^@astryxdesign\/core\/xds\.css$/,
|
|
81
|
+
'@astryxdesign/core/astryx.css',
|
|
82
|
+
);
|
|
83
|
+
return next;
|
|
84
|
+
}
|
|
85
|
+
|
|
55
86
|
// Ordered, non-overlapping replacements. Each pattern is intentionally narrow
|
|
56
87
|
// so we never touch a bare `xds` substring outside these surfaces.
|
|
57
88
|
const REPLACEMENTS = [
|
|
@@ -62,6 +93,15 @@ const REPLACEMENTS = [
|
|
|
62
93
|
// Cascade-layer preludes: `@layer <names>` up to the block `{` or `;`.
|
|
63
94
|
// Rewrite only the recognized xds-* layer tokens inside the prelude.
|
|
64
95
|
{re: /@layer\b[^{;]*/g, to: match => rewriteLayerPrelude(match)},
|
|
96
|
+
// Package stylesheet imports: `@import '@xds/...'` or `@import url('@xds/...')`.
|
|
97
|
+
// Rewrite only the quoted @xds/* specifier, preserving the quote style.
|
|
98
|
+
{
|
|
99
|
+
re: /@import\s+(?:url\(\s*)?(['"])(@xds\/[^'"]+)\1/g,
|
|
100
|
+
to: (match, quote, spec) => {
|
|
101
|
+
const next = rewriteImportSpecifier(spec);
|
|
102
|
+
return next === spec ? match : match.replace(spec, next);
|
|
103
|
+
},
|
|
104
|
+
},
|
|
65
105
|
];
|
|
66
106
|
|
|
67
107
|
export default function transformer(file /*, api */) {
|
|
@@ -51,12 +51,57 @@ function rewriteLiteral(node) {
|
|
|
51
51
|
return true;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
// @xds/theme-default and @xds/theme-daily both collapse to
|
|
55
|
+
// @astryxdesign/theme-neutral, whose exported theme binding is `neutralTheme`
|
|
56
|
+
// (not `defaultTheme`). When we rewrite an import from one of those packages,
|
|
57
|
+
// remap a `defaultTheme` named import to `neutralTheme`, aliasing back to the
|
|
58
|
+
// original local name so downstream usages keep working unchanged:
|
|
59
|
+
// import {defaultTheme} from '@xds/theme-default'
|
|
60
|
+
// -> import {neutralTheme as defaultTheme} from '@astryxdesign/theme-neutral'
|
|
61
|
+
// An already-aliased `{defaultTheme as x}` just has its imported name remapped.
|
|
62
|
+
const THEME_EXPORT_RENAMES = new Map([['defaultTheme', 'neutralTheme']]);
|
|
63
|
+
const COLLAPSED_THEME_SOURCES = new Set([
|
|
64
|
+
'@xds/theme-default',
|
|
65
|
+
'@xds/theme-daily',
|
|
66
|
+
]);
|
|
67
|
+
|
|
68
|
+
function isCollapsedThemeSource(value) {
|
|
69
|
+
if (typeof value !== 'string') return false;
|
|
70
|
+
for (const src of COLLAPSED_THEME_SOURCES) {
|
|
71
|
+
if (value === src || value.startsWith(src + '/')) return true;
|
|
72
|
+
}
|
|
73
|
+
return false;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function remapThemeExportNames(importPath, j) {
|
|
77
|
+
let changed = false;
|
|
78
|
+
importPath.node.specifiers = (importPath.node.specifiers || []).map(spec => {
|
|
79
|
+
if (spec.type !== 'ImportSpecifier') return spec;
|
|
80
|
+
const importedName = spec.imported.name;
|
|
81
|
+
const renamed = THEME_EXPORT_RENAMES.get(importedName);
|
|
82
|
+
if (!renamed) return spec;
|
|
83
|
+
// Preserve the original local binding (so downstream usages keep working),
|
|
84
|
+
// remapping only the imported name. Build a FRESH specifier node: recast
|
|
85
|
+
// preserves the printed form of a mutated ImportSpecifier and would drop a
|
|
86
|
+
// newly-introduced `as local` alias, so mutating in place loses it.
|
|
87
|
+
const localName = spec.local.name;
|
|
88
|
+
changed = true;
|
|
89
|
+
return j.importSpecifier(j.identifier(renamed), j.identifier(localName));
|
|
90
|
+
});
|
|
91
|
+
return changed;
|
|
92
|
+
}
|
|
93
|
+
|
|
54
94
|
export default function transformer(file, api) {
|
|
55
95
|
const j = api.jscodeshift;
|
|
56
96
|
const root = j(file.source);
|
|
57
97
|
let hasChanges = false;
|
|
58
98
|
|
|
59
99
|
root.find(j.ImportDeclaration).forEach(path => {
|
|
100
|
+
// Remap collapsed-theme export names BEFORE rewriting the source specifier
|
|
101
|
+
// (the check keys off the original @xds/theme-default|daily path).
|
|
102
|
+
if (isCollapsedThemeSource(path.node.source.value)) {
|
|
103
|
+
hasChanges = remapThemeExportNames(path, j) || hasChanges;
|
|
104
|
+
}
|
|
60
105
|
hasChanges = rewriteLiteral(path.node.source) || hasChanges;
|
|
61
106
|
});
|
|
62
107
|
|
|
@@ -4,6 +4,7 @@ import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
|
|
|
4
4
|
import * as fs from 'node:fs';
|
|
5
5
|
import * as path from 'node:path';
|
|
6
6
|
import * as os from 'node:os';
|
|
7
|
+
import {fileURLToPath} from 'node:url';
|
|
7
8
|
import {Command} from 'commander';
|
|
8
9
|
|
|
9
10
|
import {registerDoctor} from './doctor.mjs';
|
|
@@ -128,7 +129,7 @@ describe('doctor — individual checks', () => {
|
|
|
128
129
|
// serve a file written to an arbitrary tmp path at runtime. Write the
|
|
129
130
|
// fixture inside the package tree so Vite can resolve it, then clean up.
|
|
130
131
|
const fixtureDir = fs.mkdtempSync(
|
|
131
|
-
path.join(path.dirname(
|
|
132
|
+
path.join(path.dirname(fileURLToPath(import.meta.url)), '__doctor_cfg_'),
|
|
132
133
|
);
|
|
133
134
|
const configPath = path.join(fixtureDir, 'astryx.config.mjs');
|
|
134
135
|
try {
|
|
@@ -145,7 +146,7 @@ describe('doctor — individual checks', () => {
|
|
|
145
146
|
|
|
146
147
|
it('config: FAIL when astryx.config.mjs throws on import', async () => {
|
|
147
148
|
const fixtureDir = fs.mkdtempSync(
|
|
148
|
-
path.join(path.dirname(
|
|
149
|
+
path.join(path.dirname(fileURLToPath(import.meta.url)), '__doctor_cfg_'),
|
|
149
150
|
);
|
|
150
151
|
const configPath = path.join(fixtureDir, 'astryx.config.mjs');
|
|
151
152
|
try {
|
|
@@ -160,7 +161,7 @@ describe('doctor — individual checks', () => {
|
|
|
160
161
|
|
|
161
162
|
it('config: FAIL when default export is not an object', async () => {
|
|
162
163
|
const fixtureDir = fs.mkdtempSync(
|
|
163
|
-
path.join(path.dirname(
|
|
164
|
+
path.join(path.dirname(fileURLToPath(import.meta.url)), '__doctor_cfg_'),
|
|
164
165
|
);
|
|
165
166
|
const configPath = path.join(fixtureDir, 'astryx.config.mjs');
|
|
166
167
|
try {
|
package/src/utils/paths.test.mjs
CHANGED
|
@@ -97,7 +97,7 @@ describe('discoverExternalPackages', () => {
|
|
|
97
97
|
fs.writeFileSync(
|
|
98
98
|
path.join(scopedDir, 'package.json'),
|
|
99
99
|
JSON.stringify({
|
|
100
|
-
name: '@acme/
|
|
100
|
+
name: '@acme/astryx-widgets',
|
|
101
101
|
astryx: {docs: './lib', category: 'Widgets'},
|
|
102
102
|
}),
|
|
103
103
|
);
|
|
@@ -105,7 +105,7 @@ describe('discoverExternalPackages', () => {
|
|
|
105
105
|
const result = discoverExternalPackages(tmpDir);
|
|
106
106
|
expect(result).toEqual([
|
|
107
107
|
{
|
|
108
|
-
name: '@acme/
|
|
108
|
+
name: '@acme/astryx-widgets',
|
|
109
109
|
category: 'Widgets',
|
|
110
110
|
docsDir: path.join(scopedDir, 'lib'),
|
|
111
111
|
blocksDir: null,
|