You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: AGENTS.md
+18-16Lines changed: 18 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Read this first, then use `architecture.md` for the detailed system map.
4
4
5
-
CSSX is a monorepo for a CSS-in-JS toolchain. Users write `styl`, `css`, or optional `pug` templates plus `styleName` and `part` props. Babel compiles that authoring syntax into style objects and runtime calls. The runtime matches class selectors, applies CSS variables/media queries, supports component parts, and can memoize with teamplay.
5
+
CSSX is a monorepo for a CSS-in-JS toolchain. Users write `css`, `styl`, or optional `pug` templates plus `styleName` and `part` props. Babel compiles that authoring syntax into compiled CSS sheet IR and runtime calls. The unified `@cssxjs/css-to-rn` package owns CSS parsing, CSS value resolution, React Native/web style transformation, runtime caching, variables, media/dimension tracking, and React subscriptions.
6
6
7
7
## Start Here
8
8
@@ -12,11 +12,11 @@ CSSX is a monorepo for a CSS-in-JS toolchain. Users write `styl`, `css`, or opti
12
12
13
13
## Package Map
14
14
15
-
-`packages/cssxjs/`: public `cssxjs` facade, CLI, wrappers, package exports.
-`packages/loaders/`: Stylus/CSS loaders and direct compiler wrappers.
18
-
-`packages/babel-plugin-rn-stylename-inline/`: compiles inline `css` and `styl` templates.
19
-
-`packages/babel-plugin-rn-stylename-to-style/`: rewrites JSX `styleName`, `part`, old `*StyleName`, and helper calls.
15
+
-`packages/css-to-rn/`: unified compiler/runtime engine. Start here for CSS parsing, selector IR, value resolution, property transforms, caching, `cssx()`, `useCompiledCss()`, variables, and dimensions.
16
+
-`packages/cssxjs/`: public `cssxjs` facade, CLI, package exports, runtime compatibility wrappers, Babel preset wrapper, loader wrappers, and Metro wrappers.
17
+
-`packages/loaders/`: Stylus/CSS loaders and direct compiler wrappers. CSS compilation delegates to `@cssxjs/css-to-rn`.
18
+
-`packages/babel-plugin-rn-stylename-inline/`: compiles inline `css` and `styl` templates, including local template interpolation lowering.
19
+
-`packages/babel-plugin-rn-stylename-to-style/`: rewrites JSX `styleName`, `part`, old `*StyleName`, and helper calls into runtime calls.
20
20
-`packages/babel-preset-cssxjs/`: transform ordering and public Babel options.
21
21
-`packages/bundler/`: Metro hot-reload path for separate style files.
22
22
-`packages/eslint-plugin-cssxjs/`: wrapper around React Pug ESLint processor.
@@ -26,13 +26,14 @@ CSSX is a monorepo for a CSS-in-JS toolchain. Users write `styl`, `css`, or opti
26
26
## Core Contracts
27
27
28
28
-`__CSS_GLOBAL__` and `__CSS_LOCAL__` connect the inline Babel plugin to the JSX/runtime plugin.
29
-
-Compiled style metadata `__hash__`, `__vars`, and `__hasMedia` connects loaders to cached and uncached runtime processing.
30
-
-Runtime calls have this shape: `runtime(styleName, fileStyles, globalStyles, localStyles, inlineStyleProps)`.
31
-
- Style priority is file styles, then global templates, then local templates, then inline props.
32
-
-Selector specificity is approximated by class count only.
29
+
-Runtime calls generated by Babel keep the compatibility shape `runtime(styleName, fileStyles, globalStyles, localStyles, inlineStyleProps)`.
30
+
-`cssxjs/runtime/*` wrappers adapt that call shape to `@cssxjs/css-to-rn` platform entrypoints.
31
+
- Style priority is file/imported sheets, then global templates, then local templates, then inline props.
32
+
-Compiled sheets are JSON-serializable IR. Runtime cache/tracking state must stay outside the sheet.
33
33
-`part='root'` maps to `style`; other parts map to `{partName}Style`.
34
-
-`css`/`styl` template interpolation is intentionally unsupported.
35
-
- Cached runtime is selected by `cache: 'teamplay'` or by importing `observer` from `teamplay` or `startupjs`.
34
+
-`:hover` and `:active` compile to `hoverStyle` and `activeStyle`.
35
+
- Local JS template interpolation is lowered to synthetic `var(--__cssx_dynamic_N)` slots and passed as `values`.
36
+
-`cache: 'teamplay'` remains accepted as a Babel option for compatibility, but runtime caching is owned by `@cssxjs/css-to-rn`, not Teamplay.
36
37
37
38
## Commands
38
39
@@ -51,7 +52,7 @@ yarn test
51
52
Run targeted tests:
52
53
53
54
```sh
54
-
cd packages/runtime&&yarntest
55
+
cd packages/css-to-rn&&npmtest
55
56
cd packages/babel-plugin-rn-stylename-inline && yarn test
56
57
cd packages/babel-plugin-rn-stylename-to-style && yarn test
57
58
```
@@ -70,9 +71,10 @@ yarn start
70
71
71
72
## Change Guidance
72
73
73
-
- For runtime matching changes, update `packages/runtime/test/matcher.mjs` and `packages/runtime/test/process.mjs`.
74
-
- For Babel changes, update the relevant Jest snapshots.
75
-
- For public API or behavior changes, update `docs/` and `architecture.md`.
74
+
- For CSS parsing, selector, value, transform, cache, variable, media, or React tracking behavior, update `packages/css-to-rn/test/engine/**` or `packages/css-to-rn/test/react/**`.
75
+
- For inline template or interpolation compilation, update `packages/babel-plugin-rn-stylename-inline` snapshots.
76
+
- For JSX `styleName`/`part` behavior, update `packages/babel-plugin-rn-stylename-to-style` snapshots.
77
+
- For public API or behavior changes, update `docs/`, `architecture.md`, and this guide.
76
78
- For Pug, type checking, or ESLint behavior, check whether the implementation lives in `@react-pug/*`; this repo often only wraps it.
77
79
- For separate style files, check both Babel `compileCssImports` behavior and Metro transformer behavior.
78
80
- Prefer current source code and `docs/` over older package READMEs when they conflict.
0 commit comments