@astryxdesign/build 0.0.15 → 0.1.0-canary.08d4cf4

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/README.md CHANGED
@@ -100,7 +100,7 @@ module.exports = {
100
100
 
101
101
  ```js
102
102
  const nextConfig = {
103
- transpilePackages: ['@astryxdesign/core', '@astryxdesign/theme-default'],
103
+ transpilePackages: ['@astryxdesign/core', '@astryxdesign/theme-neutral'],
104
104
  webpack: config => {
105
105
  // Resolve to source TypeScript instead of dist
106
106
  config.resolve.conditionNames = ['source', 'import', 'require', 'default'];
@@ -124,7 +124,7 @@ export default nextConfig;
124
124
  ```css
125
125
  @import './layers.css';
126
126
  @import '@astryxdesign/core/reset.css';
127
- @import '@astryxdesign/theme-default/theme.css';
127
+ @import '@astryxdesign/theme-neutral/theme.css';
128
128
 
129
129
  @stylex;
130
130
  ```
@@ -144,12 +144,12 @@ export default nextConfig;
144
144
  ## Vite Setup
145
145
 
146
146
  ```ts
147
- import {xdsStylex} from '@astryxdesign/build/vite';
147
+ import {astryxStylex} from '@astryxdesign/build/vite';
148
148
  import react from '@vitejs/plugin-react';
149
149
 
150
150
  export default defineConfig({
151
151
  plugins: [
152
- ...xdsStylex({
152
+ ...astryxStylex({
153
153
  stylexOptions: {
154
154
  dev: process.env.NODE_ENV === 'development',
155
155
  runtimeInjection: false,
@@ -168,7 +168,7 @@ export default defineConfig({
168
168
  },
169
169
  },
170
170
  optimizeDeps: {
171
- exclude: ['@astryxdesign/core', '@astryxdesign/theme-default'],
171
+ exclude: ['@astryxdesign/core', '@astryxdesign/theme-neutral'],
172
172
  },
173
173
  });
174
174
  ```
package/dist/vite.mjs CHANGED
@@ -19,9 +19,9 @@ var LIGHTNINGCSS_TARGETS = {
19
19
  firefox: 120 << 16,
20
20
  safari: 17 << 16 | 5 << 8
21
21
  };
22
- function xdsStylex(options = {}) {
22
+ function astryxStylex(options = {}) {
23
23
  if ("stylexOptions" in options && options.stylexOptions) {
24
- return xdsStylexLegacy(options);
24
+ return astryxStylexLegacy(options);
25
25
  }
26
26
  const opts = options;
27
27
  const {
@@ -48,14 +48,14 @@ function xdsStylex(options = {}) {
48
48
  },
49
49
  ...stylexOverrides
50
50
  };
51
- const xdsBabelPlugin = path.resolve(__dirname, "../src/babel.js");
51
+ const astryxBabelPlugin = path.resolve(__dirname, "../src/babel.js");
52
52
  const basePlugin = stylex.vite({
53
53
  ...stylexOptions,
54
54
  useCSSLayers: true,
55
55
  babelConfig: {
56
56
  plugins: [
57
57
  [
58
- xdsBabelPlugin,
58
+ astryxBabelPlugin,
59
59
  {
60
60
  ...stylexOptions,
61
61
  libraryPrefix: stylexPrefix,
@@ -66,7 +66,7 @@ function xdsStylex(options = {}) {
66
66
  }
67
67
  });
68
68
  const layerOrderPlugin = {
69
- name: "xds-css-layer-order",
69
+ name: "astryx-css-layer-order",
70
70
  transformIndexHtml() {
71
71
  return [
72
72
  {
@@ -78,7 +78,7 @@ function xdsStylex(options = {}) {
78
78
  }
79
79
  };
80
80
  const configPlugin = {
81
- name: "xds-config",
81
+ name: "astryx-config",
82
82
  config() {
83
83
  let xdsPackages = ["@astryxdesign/core"];
84
84
  try {
@@ -106,7 +106,7 @@ function xdsStylex(options = {}) {
106
106
  }
107
107
  };
108
108
  const splitLayerPlugin = {
109
- name: "xds-split-layers",
109
+ name: "astryx-split-layers",
110
110
  configureServer(server) {
111
111
  let stylexPlugin = null;
112
112
  return () => {
@@ -171,7 +171,7 @@ ${productCss}
171
171
  };
172
172
  return [configPlugin, layerOrderPlugin, basePlugin, splitLayerPlugin];
173
173
  }
174
- function xdsStylexLegacy(options) {
174
+ function astryxStylexLegacy(options) {
175
175
  const {
176
176
  stylexOptions,
177
177
  libraryPattern = LIBRARY_PATTERN,
@@ -180,7 +180,7 @@ function xdsStylexLegacy(options) {
180
180
  } = options;
181
181
  const libraryLayer = layers.library ?? "astryx-base";
182
182
  const productLayer = layers.product ?? "product";
183
- const xdsBabelPlugin = path.resolve(__dirname, "../src/babel.js");
183
+ const astryxBabelPlugin = path.resolve(__dirname, "../src/babel.js");
184
184
  const existingPlugins = stylexOptions.babelConfig?.plugins ?? [];
185
185
  const basePlugin = stylex.vite({
186
186
  ...stylexOptions,
@@ -189,7 +189,7 @@ function xdsStylexLegacy(options) {
189
189
  ...stylexOptions.babelConfig,
190
190
  plugins: [
191
191
  [
192
- xdsBabelPlugin,
192
+ astryxBabelPlugin,
193
193
  {
194
194
  ...stylexOptions,
195
195
  libraryPrefix: stylexPrefix,
@@ -201,7 +201,7 @@ function xdsStylexLegacy(options) {
201
201
  }
202
202
  });
203
203
  const layerOrderPlugin = {
204
- name: "xds-css-layer-order",
204
+ name: "astryx-css-layer-order",
205
205
  transformIndexHtml() {
206
206
  return [
207
207
  {
@@ -213,7 +213,7 @@ function xdsStylexLegacy(options) {
213
213
  }
214
214
  };
215
215
  const splitLayerPlugin = {
216
- name: "xds-split-layers",
216
+ name: "astryx-split-layers",
217
217
  configureServer(server) {
218
218
  let stylexPlugin = null;
219
219
  return () => {
@@ -280,5 +280,5 @@ ${productCss}
280
280
  }
281
281
  export {
282
282
  LIGHTNINGCSS_TARGETS,
283
- xdsStylex
283
+ astryxStylex
284
284
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/build",
3
- "version": "0.0.15",
3
+ "version": "0.1.0-canary.08d4cf4",
4
4
  "description": "Build plugins for XDS source builds — babel, PostCSS, and Vite integrations",
5
5
  "author": "Meta Open Source",
6
6
  "license": "MIT",
@@ -14,7 +14,7 @@
14
14
  "url": "https://github.com/facebook/astryx/issues"
15
15
  },
16
16
  "keywords": [
17
- "xds",
17
+ "astryx",
18
18
  "postcss",
19
19
  "stylex",
20
20
  "css-layers",
package/src/babel.js CHANGED
@@ -18,7 +18,7 @@ const LIBRARY_PATTERNS = [
18
18
  'node_modules/@astryxdesign/',
19
19
  ];
20
20
 
21
- module.exports = function xdsBabelPlugin(api, options) {
21
+ module.exports = function astryxBabelPlugin(api, options) {
22
22
  const stylexPlugin = require('@stylexjs/babel-plugin');
23
23
 
24
24
  const {
@@ -100,7 +100,7 @@ module.exports = function xdsBabelPlugin(api, options) {
100
100
  }
101
101
 
102
102
  return {
103
- name: 'xds-babel-plugin',
103
+ name: 'astryx-babel-plugin',
104
104
  visitor,
105
105
  };
106
106
  };
@@ -13,7 +13,7 @@ import {createRequire} from 'node:module';
13
13
 
14
14
  const require = createRequire(import.meta.url);
15
15
  const babel = require('@babel/core');
16
- const xdsBabelPlugin = require('./babel.js');
16
+ const astryxBabelPlugin = require('./babel.js');
17
17
 
18
18
  const SOURCE = `
19
19
  import * as stylex from '@stylexjs/stylex';
@@ -36,7 +36,7 @@ function transformLibraryFile(libraryPrefix) {
36
36
  configFile: false,
37
37
  plugins: [
38
38
  [
39
- xdsBabelPlugin,
39
+ astryxBabelPlugin,
40
40
  {
41
41
  ...(libraryPrefix ? {libraryPrefix} : {}),
42
42
  unstable_moduleResolution: {type: 'commonJS', rootDir: process.cwd()},
package/src/next.js CHANGED
@@ -8,8 +8,8 @@
8
8
  * Next.js configuration helper for Astryx source builds.
9
9
  *
10
10
  * Usage in next.config.mjs:
11
- * import {withXDS} from '@astryxdesign/build/next';
12
- * export default withXDS({
11
+ * import {withAstryx} from '@astryxdesign/build/next';
12
+ * export default withAstryx({
13
13
  * // your normal next config
14
14
  * });
15
15
  */
@@ -19,18 +19,15 @@
19
19
  * - Adds transpilePackages for @astryxdesign/* packages
20
20
  * - Sets conditionNames to resolve source exports
21
21
  */
22
- function withXDS(nextConfig = {}) {
23
- const xdsPackages = [
22
+ function withAstryx(nextConfig = {}) {
23
+ const astryxPackages = [
24
24
  '@astryxdesign/core',
25
- '@astryxdesign/theme-default',
26
25
  '@astryxdesign/theme-neutral',
27
- '@astryxdesign/theme-brutalist',
28
- '@astryxdesign/theme-daily',
29
26
  '@astryxdesign/lab',
30
27
  ];
31
28
 
32
29
  const existingTranspile = nextConfig.transpilePackages || [];
33
- const merged = Array.from(new Set([...existingTranspile, ...xdsPackages]));
30
+ const merged = Array.from(new Set([...existingTranspile, ...astryxPackages]));
34
31
 
35
32
  const existingWebpack = nextConfig.webpack;
36
33
 
@@ -63,4 +60,4 @@ function withXDS(nextConfig = {}) {
63
60
  };
64
61
  }
65
62
 
66
- module.exports = {withXDS};
63
+ module.exports = {withAstryx};
package/src/vite.test.ts CHANGED
@@ -8,12 +8,12 @@
8
8
  */
9
9
 
10
10
  import {describe, it, expect} from 'vitest';
11
- import {xdsStylex} from './vite';
11
+ import {astryxStylex} from './vite';
12
12
 
13
13
  /** Pull the injected `@layer ...;` order statement out of the plugin set. */
14
- function getLayerOrder(plugins: ReturnType<typeof xdsStylex>): string {
15
- const layerPlugin = plugins.find(p => p.name === 'xds-css-layer-order');
16
- expect(layerPlugin, 'xds-css-layer-order plugin should exist').toBeTruthy();
14
+ function getLayerOrder(plugins: ReturnType<typeof astryxStylex>): string {
15
+ const layerPlugin = plugins.find(p => p.name === 'astryx-css-layer-order');
16
+ expect(layerPlugin, 'astryx-css-layer-order plugin should exist').toBeTruthy();
17
17
  const transform = (layerPlugin as any).transformIndexHtml;
18
18
  const tags =
19
19
  typeof transform === 'function' ? transform() : transform.handler();
@@ -22,24 +22,24 @@ function getLayerOrder(plugins: ReturnType<typeof xdsStylex>): string {
22
22
  return styleTag.children as string;
23
23
  }
24
24
 
25
- describe('xdsStylex layer order (modern API)', () => {
25
+ describe('astryxStylex layer order (modern API)', () => {
26
26
  it('uses the astryx-* layer names (theme layer is astryx-theme)', () => {
27
- const order = getLayerOrder(xdsStylex());
27
+ const order = getLayerOrder(astryxStylex());
28
28
  expect(order).toBe('@layer reset, astryx-base, astryx-theme, product;');
29
29
  });
30
30
 
31
31
  it('honors configured library and product layer names', () => {
32
32
  const order = getLayerOrder(
33
- xdsStylex({layers: {library: 'custom-base', product: 'app'}}),
33
+ astryxStylex({layers: {library: 'custom-base', product: 'app'}}),
34
34
  );
35
35
  // The theme layer stays astryx-theme regardless of other layer config.
36
36
  expect(order).toBe('@layer reset, custom-base, astryx-theme, app;');
37
37
  });
38
38
  });
39
39
 
40
- describe('xdsStylex layer order (legacy API)', () => {
40
+ describe('astryxStylex layer order (legacy API)', () => {
41
41
  it('uses the astryx-* layer names (theme layer is astryx-theme)', () => {
42
- const order = getLayerOrder(xdsStylex({stylexOptions: {}}));
42
+ const order = getLayerOrder(astryxStylex({stylexOptions: {}}));
43
43
  expect(order).toBe('@layer reset, astryx-base, astryx-theme, product;');
44
44
  });
45
45
  });
package/src/vite.ts CHANGED
@@ -24,9 +24,9 @@ export const LIGHTNINGCSS_TARGETS = {
24
24
 
25
25
  /**
26
26
  * Legacy options shape — kept for backward compatibility.
27
- * Prefer the zero-config form: xdsStylex()
27
+ * Prefer the zero-config form: astryxStylex()
28
28
  */
29
- export interface XDSVitePluginLegacyOptions {
29
+ export interface AstryxVitePluginLegacyOptions {
30
30
  stylexOptions: Parameters<typeof stylex.vite>[0];
31
31
  libraryPattern?: string;
32
32
  /** StyleX atomic class-name prefix for Astryx library styles. @default 'astryx' */
@@ -37,7 +37,7 @@ export interface XDSVitePluginLegacyOptions {
37
37
  };
38
38
  }
39
39
 
40
- export interface XDSVitePluginOptions {
40
+ export interface AstryxVitePluginOptions {
41
41
  /**
42
42
  * Whether to enable dev mode for StyleX.
43
43
  * @default process.env.NODE_ENV !== 'production'
@@ -99,7 +99,7 @@ export interface XDSVitePluginOptions {
99
99
  * Provides sensible defaults for StyleX compilation with Astryx.
100
100
  * Just spread into your plugins array:
101
101
  *
102
- * plugins: [...xdsStylex(), react()]
102
+ * plugins: [...astryxStylex(), react()]
103
103
  *
104
104
  * Handles:
105
105
  * - StyleX compilation with correct settings
@@ -109,15 +109,15 @@ export interface XDSVitePluginOptions {
109
109
  *
110
110
  * @param options — optional overrides
111
111
  */
112
- export function xdsStylex(
113
- options: XDSVitePluginOptions | XDSVitePluginLegacyOptions = {},
112
+ export function astryxStylex(
113
+ options: AstryxVitePluginOptions | AstryxVitePluginLegacyOptions = {},
114
114
  ): Plugin[] {
115
- // Detect legacy API: xdsStylex({stylexOptions: {...}})
115
+ // Detect legacy API: astryxStylex({stylexOptions: {...}})
116
116
  if ('stylexOptions' in options && options.stylexOptions) {
117
- return xdsStylexLegacy(options as XDSVitePluginLegacyOptions);
117
+ return astryxStylexLegacy(options as AstryxVitePluginLegacyOptions);
118
118
  }
119
119
 
120
- const opts = options as XDSVitePluginOptions;
120
+ const opts = options as AstryxVitePluginOptions;
121
121
  const {
122
122
  dev = process.env.NODE_ENV !== 'production',
123
123
  rootDir = process.cwd(),
@@ -148,7 +148,7 @@ export function xdsStylex(
148
148
 
149
149
  // Inject our babel wrapper as a user plugin — it runs before the
150
150
  // unplugin's hardcoded StyleX instance and handles prefix routing.
151
- const xdsBabelPlugin = path.resolve(__dirname, 'babel.js');
151
+ const astryxBabelPlugin = path.resolve(__dirname, 'babel.js');
152
152
 
153
153
  const basePlugin = stylex.vite({
154
154
  ...(stylexOptions as any),
@@ -156,7 +156,7 @@ export function xdsStylex(
156
156
  babelConfig: {
157
157
  plugins: [
158
158
  [
159
- xdsBabelPlugin,
159
+ astryxBabelPlugin,
160
160
  {
161
161
  ...stylexOptions,
162
162
  libraryPrefix: stylexPrefix,
@@ -169,7 +169,7 @@ export function xdsStylex(
169
169
 
170
170
  // Layer order declaration plugin
171
171
  const layerOrderPlugin: Plugin = {
172
- name: 'xds-css-layer-order',
172
+ name: 'astryx-css-layer-order',
173
173
  transformIndexHtml() {
174
174
  return [
175
175
  {
@@ -183,7 +183,7 @@ export function xdsStylex(
183
183
 
184
184
  // Config plugin — injects resolve.alias and optimizeDeps
185
185
  const configPlugin: Plugin = {
186
- name: 'xds-config',
186
+ name: 'astryx-config',
187
187
  config(): UserConfig {
188
188
  // Discover all @astryxdesign/* packages to exclude from pre-bundling.
189
189
  // Astryx ships as source that must be compiled by StyleX — pre-bundling
@@ -221,7 +221,7 @@ export function xdsStylex(
221
221
 
222
222
  // Split-layer interceptor plugin (dev server only)
223
223
  const splitLayerPlugin: Plugin = {
224
- name: 'xds-split-layers',
224
+ name: 'astryx-split-layers',
225
225
  configureServer(server) {
226
226
  let stylexPlugin: any = null;
227
227
 
@@ -299,10 +299,10 @@ export function xdsStylex(
299
299
  }
300
300
 
301
301
  /**
302
- * Legacy implementation — handles the old xdsStylex({stylexOptions: {...}}) API.
302
+ * Legacy implementation — handles the old astryxStylex({stylexOptions: {...}}) API.
303
303
  * Used by Storybook and other existing configs.
304
304
  */
305
- function xdsStylexLegacy(options: XDSVitePluginLegacyOptions): Plugin[] {
305
+ function astryxStylexLegacy(options: AstryxVitePluginLegacyOptions): Plugin[] {
306
306
  const {
307
307
  stylexOptions,
308
308
  libraryPattern = LIBRARY_PATTERN,
@@ -313,7 +313,7 @@ function xdsStylexLegacy(options: XDSVitePluginLegacyOptions): Plugin[] {
313
313
  const libraryLayer = layers.library ?? 'astryx-base';
314
314
  const productLayer = layers.product ?? 'product';
315
315
 
316
- const xdsBabelPlugin = path.resolve(__dirname, 'babel.js');
316
+ const astryxBabelPlugin = path.resolve(__dirname, 'babel.js');
317
317
  const existingPlugins = (stylexOptions as any).babelConfig?.plugins ?? [];
318
318
 
319
319
  const basePlugin = stylex.vite({
@@ -323,7 +323,7 @@ function xdsStylexLegacy(options: XDSVitePluginLegacyOptions): Plugin[] {
323
323
  ...(stylexOptions as any).babelConfig,
324
324
  plugins: [
325
325
  [
326
- xdsBabelPlugin,
326
+ astryxBabelPlugin,
327
327
  {
328
328
  ...(stylexOptions as any),
329
329
  libraryPrefix: stylexPrefix,
@@ -336,7 +336,7 @@ function xdsStylexLegacy(options: XDSVitePluginLegacyOptions): Plugin[] {
336
336
  });
337
337
 
338
338
  const layerOrderPlugin: Plugin = {
339
- name: 'xds-css-layer-order',
339
+ name: 'astryx-css-layer-order',
340
340
  transformIndexHtml() {
341
341
  return [
342
342
  {
@@ -349,7 +349,7 @@ function xdsStylexLegacy(options: XDSVitePluginLegacyOptions): Plugin[] {
349
349
  };
350
350
 
351
351
  const splitLayerPlugin: Plugin = {
352
- name: 'xds-split-layers',
352
+ name: 'astryx-split-layers',
353
353
  configureServer(server) {
354
354
  let stylexPlugin: any = null;
355
355