Copy disabled (too large)
Download .txt
Showing preview only (13,070K chars total). Download the full file to get everything.
Repository: facebook/stylex
Branch: main
Commit: 7d91ac25b300
Files: 985
Total size: 12.3 MB
Directory structure:
gitextract_gl0n7f1_/
├── .eslintrc.js
├── .flowconfig
├── .github/
│ ├── CODEOWNERS
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.yml
│ │ └── feature.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── benchmarks.yml
│ ├── tests.yml
│ └── typos.toml
├── .gitignore
├── .prettierignore
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── .watchmanconfig
├── CHANGELOG.md
├── LICENSE
├── README.md
├── examples/
│ ├── example-bun/
│ │ ├── .eslintrc.js
│ │ ├── README.md
│ │ ├── bunfig.toml
│ │ ├── package.json
│ │ ├── scripts/
│ │ │ ├── build.mjs
│ │ │ ├── dev.mjs
│ │ │ └── start.mjs
│ │ └── src/
│ │ ├── App.jsx
│ │ ├── global.css
│ │ ├── globalTokens.stylex.js
│ │ ├── index.dev.html
│ │ ├── index.html
│ │ └── main.jsx
│ ├── example-cli/
│ │ ├── .gitignore
│ │ ├── .stylex.json5
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── source/
│ │ │ ├── app/
│ │ │ │ ├── CardThemes.ts
│ │ │ │ ├── CardTokens.stylex.ts
│ │ │ │ ├── Counter.tsx
│ │ │ │ ├── globalTokens.stylex.ts
│ │ │ │ ├── globals.css
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ └── components/
│ │ │ └── Card.tsx
│ │ └── tsconfig.json
│ ├── example-esbuild/
│ │ ├── .eslintrc.js
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ ├── scripts/
│ │ │ └── build.mjs
│ │ └── src/
│ │ ├── App.jsx
│ │ ├── global.css
│ │ └── globalTokens.stylex.js
│ ├── example-nextjs/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── InteractiveCard.tsx
│ │ │ ├── app.css
│ │ │ ├── darkMode.stylex.ts
│ │ │ ├── globalTokens.stylex.ts
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── babel.config.js
│ │ ├── components/
│ │ │ ├── Card.tsx
│ │ │ └── CardTokens.stylex.ts
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ └── tsconfig.json
│ ├── example-react-router/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── server.js
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ └── MainArticle.tsx
│ │ │ ├── entry.browser.tsx
│ │ │ ├── entry.rsc.tsx
│ │ │ ├── entry.ssr.tsx
│ │ │ ├── routes/
│ │ │ │ ├── about/
│ │ │ │ │ └── route.tsx
│ │ │ │ ├── config.ts
│ │ │ │ ├── home/
│ │ │ │ │ └── route.tsx
│ │ │ │ └── root/
│ │ │ │ ├── DevStyleXInject.tsx
│ │ │ │ ├── client.tsx
│ │ │ │ └── route.tsx
│ │ │ └── stylex.css
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── example-redwoodsdk/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── DevStyleXInject.tsx
│ │ │ │ ├── Document.tsx
│ │ │ │ ├── components/
│ │ │ │ │ └── Copy.tsx
│ │ │ │ ├── headers.ts
│ │ │ │ ├── pages/
│ │ │ │ │ ├── Counter.tsx
│ │ │ │ │ ├── Home.tsx
│ │ │ │ │ └── Welcome.tsx
│ │ │ │ ├── root.css
│ │ │ │ └── shared/
│ │ │ │ └── links.ts
│ │ │ ├── client.tsx
│ │ │ └── worker.tsx
│ │ ├── tsconfig.json
│ │ ├── types/
│ │ │ ├── css.d.ts
│ │ │ ├── rw.d.ts
│ │ │ └── vite.d.ts
│ │ ├── vite.config.mts
│ │ ├── worker-configuration.d.ts
│ │ └── wrangler.jsonc
│ ├── example-rollup/
│ │ ├── README.md
│ │ ├── babel.config.mjs
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ └── src/
│ │ ├── App.js
│ │ └── index.js
│ ├── example-rspack/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ ├── rspack.config.js
│ │ └── src/
│ │ ├── App.jsx
│ │ ├── global.css
│ │ └── main.jsx
│ ├── example-storybook/
│ │ ├── .babelrc.cjs
│ │ ├── .storybook/
│ │ │ ├── main.ts
│ │ │ ├── preview.ts
│ │ │ └── vitest.setup.ts
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ ├── stories/
│ │ │ ├── Button.stories.ts
│ │ │ ├── Button.tsx
│ │ │ ├── Card.stories.ts
│ │ │ ├── Card.tsx
│ │ │ └── styles.css
│ │ ├── vite-storybook.config.ts
│ │ └── vitest.config.ts
│ ├── example-vite/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.jsx
│ │ │ ├── index.css
│ │ │ └── main.jsx
│ │ └── vite.config.mjs
│ ├── example-vite-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── eslint.config.js
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.tsx
│ │ │ ├── index.css
│ │ │ └── main.tsx
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.node.json
│ │ └── vite.config.ts
│ ├── example-vite-rsc/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── DevStyleXInject.tsx
│ │ │ ├── action.tsx
│ │ │ ├── client.tsx
│ │ │ ├── framework/
│ │ │ │ ├── entry.browser.tsx
│ │ │ │ ├── entry.rsc.tsx
│ │ │ │ └── entry.ssr.tsx
│ │ │ ├── index.css
│ │ │ └── root.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── example-waku/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── DevStyleXInject.tsx
│ │ │ │ ├── counter.tsx
│ │ │ │ ├── footer.tsx
│ │ │ │ └── header.tsx
│ │ │ ├── global.css
│ │ │ ├── pages/
│ │ │ │ ├── _layout.tsx
│ │ │ │ ├── about.tsx
│ │ │ │ └── index.tsx
│ │ │ └── pages.gen.ts
│ │ ├── tsconfig.json
│ │ └── waku.config.ts
│ └── example-webpack/
│ ├── .babelrc.js
│ ├── .eslintrc.js
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.jsx
│ │ ├── app.css
│ │ ├── components/
│ │ │ └── CTAButton.jsx
│ │ ├── index.js
│ │ └── tokens.stylex.js
│ └── webpack.config.js
├── flow-typed/
│ ├── babel-plugins.js
│ ├── environments/
│ │ ├── bom.js
│ │ ├── cssom.js
│ │ ├── dom.js
│ │ ├── html.js
│ │ ├── jsx.js
│ │ ├── node.js
│ │ └── streams.js
│ ├── flow-api-translator.js
│ ├── npm/
│ │ ├── @babel/
│ │ │ ├── cli_vx.x.x.js
│ │ │ ├── core.js
│ │ │ ├── eslint-parser_vx.x.x.js
│ │ │ ├── generator.js
│ │ │ ├── helper-module-imports.js
│ │ │ ├── node_vx.x.x.js
│ │ │ ├── parser.js
│ │ │ ├── preset-env_vx.x.x.js
│ │ │ ├── preset-flow_vx.x.x.js
│ │ │ ├── preset-react_vx.x.x.js
│ │ │ ├── preset-typescript_vx.x.x.js
│ │ │ ├── traverse.js
│ │ │ └── types.js
│ │ ├── @chromatic-com/
│ │ │ └── storybook_vx.x.x.js
│ │ ├── @csstools/
│ │ │ └── css-tokenizer_v3.x.x.js
│ │ ├── ansis_vx.x.x.js
│ │ ├── autoprefixer_vx.x.x.js
│ │ ├── babel-loader_vx.x.x.js
│ │ ├── benchmark_vx.x.x.js
│ │ ├── brotli-size_vx.x.x.js
│ │ ├── chalk_v4.x.x.js
│ │ ├── clean-css_vx.x.x.js
│ │ ├── clsx_v1.x.x.js
│ │ ├── codemirror_vx.x.x.js
│ │ ├── colors_v1.x.x.js
│ │ ├── cross-env_vx.x.x.js
│ │ ├── css-loader_vx.x.x.js
│ │ ├── css-mediaquery_vx.x.x.js
│ │ ├── css-shorthand-expand_vx.x.x.js
│ │ ├── esbuild_vx.x.x.js
│ │ ├── estree.js
│ │ ├── fast-glob_vx.x.x.js
│ │ ├── fb-watchman_vx.x.x.js
│ │ ├── file-loader_vx.x.x.js
│ │ ├── flow-bin_v0.x.x.js
│ │ ├── flow-enums-runtime_v0.x.x.js
│ │ ├── glob-parent_vx.x.x.js
│ │ ├── html-webpack-plugin_vx.x.x.js
│ │ ├── husky_vx.x.x.js
│ │ ├── invariant_v2.x.x.js
│ │ ├── is-glob_vx.x.x.js
│ │ ├── jest-environment-jsdom_vx.x.x.js
│ │ ├── jest_v27.x.x.js
│ │ ├── jest_vx.x.x.js
│ │ ├── js-yaml_v4.x.x.js
│ │ ├── json5_vx.x.x.js
│ │ ├── mkdirp_v1.x.x.js
│ │ ├── next_vx.x.x.js
│ │ ├── playwright_vx.x.x.js
│ │ ├── postcss-loader_vx.x.x.js
│ │ ├── postcss-nesting_vx.x.x.js
│ │ ├── postcss-value-parser_vx.x.x.js
│ │ ├── postcss_vx.x.x.js
│ │ ├── react-codemirror2_vx.x.x.js
│ │ ├── react-refresh_vx.x.x.js
│ │ ├── react-syntax-highlighter_vx.x.x.js
│ │ ├── rimraf_v5.x.x.js
│ │ ├── rollup-plugin-jsx-remove-attributes_vx.x.x.js
│ │ ├── rollup-plugin-node-externals_vx.x.x.js
│ │ ├── rollup.js
│ │ ├── scripts_vx.x.x.js
│ │ ├── semver_v7.x.x.js
│ │ ├── serve_vx.x.x.js
│ │ ├── storybook_vx.x.x.js
│ │ ├── string-natural-compare_v3.x.x.js
│ │ ├── styled-jsx_vx.x.x.js
│ │ ├── stylelint_vx.x.x.js
│ │ ├── styleq_vx.x.x.js
│ │ ├── terser_vx.x.x.js
│ │ ├── typescript-eslint_vx.x.x.js
│ │ ├── typescript_vx.x.x.js
│ │ ├── unplugin_vx.x.x.js
│ │ ├── vite-plugin-dts_vx.x.x.js
│ │ ├── vitest_vx.x.x.js
│ │ ├── webpack-cli_vx.x.x.js
│ │ ├── webpack-dev-server_vx.x.x.js
│ │ ├── webpack_v5.x.x.js
│ │ └── yargs_v17.x.x.js
│ └── stubs.js
├── flow-typed.config.json
├── package.json
├── packages/
│ ├── @stylexjs/
│ │ ├── babel-plugin/
│ │ │ ├── .babelrc
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ └── constants.stylex.js
│ │ │ │ ├── evaluation-import-test.js
│ │ │ │ ├── legacy/
│ │ │ │ │ ├── stylex-transform-call-test.js
│ │ │ │ │ ├── stylex-transform-legacy-shorthands-test.js
│ │ │ │ │ ├── transform-legacy-polyfills-test.js
│ │ │ │ │ ├── transform-logical-properties-test.js
│ │ │ │ │ ├── transform-logical-values-test.js
│ │ │ │ │ └── transform-pre-plugin-test.js
│ │ │ │ ├── transform-import-export-test.js
│ │ │ │ ├── transform-polyfills-test.js
│ │ │ │ ├── transform-process-test.js
│ │ │ │ ├── transform-stylex-create-test.js
│ │ │ │ ├── transform-stylex-createTheme-test.js
│ │ │ │ ├── transform-stylex-defineConsts-test.js
│ │ │ │ ├── transform-stylex-defineMarker-test.js
│ │ │ │ ├── transform-stylex-defineVars-test.js
│ │ │ │ ├── transform-stylex-keyframes-test.js
│ │ │ │ ├── transform-stylex-positionTry-test.js
│ │ │ │ ├── transform-stylex-props-test.js
│ │ │ │ ├── transform-stylex-viewTransitionClass-test.js
│ │ │ │ ├── transform-stylex-when-test.js
│ │ │ │ ├── transform-value-normalization-test.js
│ │ │ │ ├── validation-import-export-test.js
│ │ │ │ ├── validation-stylex-create-test.js
│ │ │ │ ├── validation-stylex-createTheme-test.js
│ │ │ │ ├── validation-stylex-defineConsts-test.js
│ │ │ │ ├── validation-stylex-defineMarker-test.js
│ │ │ │ ├── validation-stylex-defineVars-test.js
│ │ │ │ └── validation-stylex-keyframes-test.js
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ ├── shared/
│ │ │ │ ├── README.md
│ │ │ │ ├── common-types.d.ts
│ │ │ │ ├── common-types.js
│ │ │ │ ├── hash.js
│ │ │ │ ├── index.js
│ │ │ │ ├── messages.js
│ │ │ │ ├── physical-rtl/
│ │ │ │ │ ├── generate-ltr.js
│ │ │ │ │ └── generate-rtl.js
│ │ │ │ ├── preprocess-rules/
│ │ │ │ │ ├── PreRule.js
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── PreRule-test.js
│ │ │ │ │ │ └── flatten-raw-style-obj-test.js
│ │ │ │ │ ├── application-order.js
│ │ │ │ │ ├── basic-validation.js
│ │ │ │ │ ├── flatten-raw-style-obj.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── legacy-expand-shorthands.js
│ │ │ │ │ └── property-specificity.js
│ │ │ │ ├── stylex-consts-utils.js
│ │ │ │ ├── stylex-create-theme.d.ts
│ │ │ │ ├── stylex-create-theme.js
│ │ │ │ ├── stylex-create.js
│ │ │ │ ├── stylex-defaultMarker.js
│ │ │ │ ├── stylex-define-consts.js
│ │ │ │ ├── stylex-define-vars.d.ts
│ │ │ │ ├── stylex-define-vars.js
│ │ │ │ ├── stylex-first-that-works.js
│ │ │ │ ├── stylex-keyframes.js
│ │ │ │ ├── stylex-position-try.js
│ │ │ │ ├── stylex-vars-utils.js
│ │ │ │ ├── stylex-view-transition-class.js
│ │ │ │ ├── types/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── stylex-types-test.js
│ │ │ │ │ ├── index.d.ts
│ │ │ │ │ └── index.js
│ │ │ │ ├── utils/
│ │ │ │ │ ├── Rule.js
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── convert-to-className-test.js
│ │ │ │ │ │ ├── split-css-value-test.js
│ │ │ │ │ │ └── transform-value-test.js
│ │ │ │ │ ├── convert-to-className.js
│ │ │ │ │ ├── dashify.js
│ │ │ │ │ ├── default-options.js
│ │ │ │ │ ├── file-based-identifier.js
│ │ │ │ │ ├── generate-css-rule.js
│ │ │ │ │ ├── normalize-value.js
│ │ │ │ │ ├── normalizers/
│ │ │ │ │ │ ├── convert-camel-case-values.js
│ │ │ │ │ │ ├── detect-unclosed-fns.js
│ │ │ │ │ │ ├── font-size-px-to-rem.js
│ │ │ │ │ │ ├── leading-zero.js
│ │ │ │ │ │ ├── quotes.js
│ │ │ │ │ │ ├── timings.js
│ │ │ │ │ │ ├── whitespace.js
│ │ │ │ │ │ └── zero-dimensions.js
│ │ │ │ │ ├── object-utils.js
│ │ │ │ │ ├── rule-utils.js
│ │ │ │ │ ├── split-css-value.js
│ │ │ │ │ └── transform-value.js
│ │ │ │ ├── validate.js
│ │ │ │ └── when/
│ │ │ │ └── when.js
│ │ │ ├── utils/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── evaluate-path-test.js
│ │ │ │ │ ├── js-to-ast-test.js
│ │ │ │ │ └── state-manager-test.js
│ │ │ │ ├── add-sourcemap-data.js
│ │ │ │ ├── ast-helpers.js
│ │ │ │ ├── dev-classname.js
│ │ │ │ ├── evaluate-path.js
│ │ │ │ ├── evaluation-errors.js
│ │ │ │ ├── helpers.js
│ │ │ │ ├── js-to-ast.js
│ │ │ │ ├── state-manager.js
│ │ │ │ └── validate.js
│ │ │ └── visitors/
│ │ │ ├── __tests__/
│ │ │ │ └── parse-stylex-create-arg-test.js
│ │ │ ├── imports.js
│ │ │ ├── parse-stylex-create-arg.js
│ │ │ ├── stylex-create-theme.js
│ │ │ ├── stylex-create.js
│ │ │ ├── stylex-default-marker.js
│ │ │ ├── stylex-define-consts.js
│ │ │ ├── stylex-define-marker.js
│ │ │ ├── stylex-define-vars.js
│ │ │ ├── stylex-keyframes.js
│ │ │ ├── stylex-merge.js
│ │ │ ├── stylex-position-try.js
│ │ │ ├── stylex-props.js
│ │ │ └── stylex-view-transition-class.js
│ │ ├── cli/
│ │ │ ├── .babelrc.js
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __mocks__/
│ │ │ │ │ ├── snapshot/
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ └── button.js
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ │ ├── pages/
│ │ │ │ │ │ │ └── home.js
│ │ │ │ │ │ └── stylex_bundle.css
│ │ │ │ │ ├── snapshot2/
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ └── button.js
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ │ └── pages/
│ │ │ │ │ │ └── home.js
│ │ │ │ │ ├── source/
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ └── button.js
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ │ └── pages/
│ │ │ │ │ │ └── home.js
│ │ │ │ │ └── source2/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ └── button.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ └── pages/
│ │ │ │ │ └── home.js
│ │ │ │ └── compile-stylex-folder-test.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── cache.js
│ │ │ ├── config.js
│ │ │ ├── errors.js
│ │ │ ├── files.js
│ │ │ ├── hash.js
│ │ │ ├── index.js
│ │ │ ├── modules.js
│ │ │ ├── options.js
│ │ │ ├── plugins.js
│ │ │ ├── transform.js
│ │ │ └── watcher.js
│ │ ├── create-stylex-app/
│ │ │ ├── .babelrc.js
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── index.js
│ │ │ │ ├── templates.js
│ │ │ │ └── utils/
│ │ │ │ ├── fetch-template.js
│ │ │ │ ├── files.js
│ │ │ │ └── packages.js
│ │ │ └── templates.json
│ │ ├── eslint-plugin/
│ │ │ ├── .babelrc
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── stylex-enforce-extension-test.js
│ │ │ │ ├── stylex-no-conflicting-props-test.js
│ │ │ │ ├── stylex-no-legacy-contextual-styles-test.js
│ │ │ │ ├── stylex-no-lookahead-selectors-test.js
│ │ │ │ ├── stylex-no-nonstandard-styles-test.js
│ │ │ │ ├── stylex-no-unused-test.js
│ │ │ │ ├── stylex-sort-keys-test.js
│ │ │ │ ├── stylex-valid-shorthands-test.js
│ │ │ │ └── stylex-valid-styles-test.js
│ │ │ ├── flow_modules/
│ │ │ │ ├── eslint/
│ │ │ │ │ ├── eslint-ast.js.flow
│ │ │ │ │ ├── eslint-rule.js.flow
│ │ │ │ │ └── index.js.flow
│ │ │ │ └── estree/
│ │ │ │ └── index.js.flow
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── index.js
│ │ │ ├── reference/
│ │ │ │ ├── cleanOrderPriorities.js
│ │ │ │ ├── cssProperties.js
│ │ │ │ ├── namedColors.js
│ │ │ │ └── recessOrderPriorities.js
│ │ │ ├── rules/
│ │ │ │ ├── isAbsoluteLength.js
│ │ │ │ ├── isAnimationName.js
│ │ │ │ ├── isCSSVariable.js
│ │ │ │ ├── isHexColor.js
│ │ │ │ ├── isNumber.js
│ │ │ │ ├── isPercentage.js
│ │ │ │ ├── isPositionTryFallbacks.js
│ │ │ │ ├── isRelativeLength.js
│ │ │ │ ├── isString.js
│ │ │ │ ├── isStylexResolvedVarsToken.js
│ │ │ │ ├── makeLiteralRule.js
│ │ │ │ ├── makeRangeRule.js
│ │ │ │ ├── makeRegExRule.js
│ │ │ │ └── makeUnionRule.js
│ │ │ ├── stylex-enforce-extension.js
│ │ │ ├── stylex-no-conflicting-props.js
│ │ │ ├── stylex-no-legacy-contextual-styles.js
│ │ │ ├── stylex-no-lookahead-selectors.js
│ │ │ ├── stylex-no-nonstandard-styles.js
│ │ │ ├── stylex-no-unused.js
│ │ │ ├── stylex-sort-keys.js
│ │ │ ├── stylex-valid-shorthands.js
│ │ │ ├── stylex-valid-styles.js
│ │ │ └── utils/
│ │ │ ├── createImportTracker.js
│ │ │ ├── evaluate.js
│ │ │ ├── getDistance.js
│ │ │ ├── getPropertyName.js
│ │ │ ├── getPropertyPriorityAndType.js
│ │ │ ├── getSourceCode.js
│ │ │ ├── isWhiteSpaceOrEmpty.js
│ │ │ ├── makeVariableCheckingRule.js
│ │ │ ├── resolveKey.js
│ │ │ ├── split-css-value.js
│ │ │ └── splitShorthands.js
│ │ ├── postcss-plugin/
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __auto_discovery_fixtures__/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── babel.config.js
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── src/
│ │ │ │ │ ├── local-rsd.js
│ │ │ │ │ ├── local-stylex.js
│ │ │ │ │ └── types.d.ts
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ ├── .babelrc.js
│ │ │ │ │ ├── import-sources-object.js
│ │ │ │ │ ├── import-sources-string.js
│ │ │ │ │ ├── styles-second.js
│ │ │ │ │ └── styles.js
│ │ │ │ └── index-test.js
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ └── src/
│ │ │ ├── builder.js
│ │ │ ├── bundler.js
│ │ │ ├── discovery.js
│ │ │ ├── index.js
│ │ │ └── plugin.js
│ │ ├── rollup-plugin/
│ │ │ ├── .babelrc.cjs
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ ├── .babelrc.json
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── npmStyles.js
│ │ │ │ │ └── otherStyles.js
│ │ │ │ └── index-test.js
│ │ │ ├── package.json
│ │ │ └── src/
│ │ │ └── index.js
│ │ ├── shared/
│ │ │ ├── .babelrc
│ │ │ ├── package.json
│ │ │ └── src/
│ │ │ ├── index.js
│ │ │ └── utils/
│ │ │ └── property-priorities.js
│ │ ├── stylex/
│ │ │ ├── .babelrc.js
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── createOrderedCSSStyleSheet-test.js
│ │ │ │ ├── createSheet-test.js
│ │ │ │ ├── inject-test.js
│ │ │ │ └── stylex-test.js
│ │ │ ├── flow-tests/
│ │ │ │ ├── stylex-create.js.flow
│ │ │ │ ├── test1.js.flow
│ │ │ │ ├── test2.js.flow
│ │ │ │ ├── test3.js.flow
│ │ │ │ ├── test4.js.flow
│ │ │ │ ├── theming/
│ │ │ │ │ ├── ButtonTokenThemes.js
│ │ │ │ │ └── ButtonTokens.stylex.js
│ │ │ │ └── theming1.js.flow
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── inject.js
│ │ │ ├── stylesheet/
│ │ │ │ ├── createCSSStyleSheet.js
│ │ │ │ ├── createOrderedCSSStyleSheet.js
│ │ │ │ ├── createSheet.js
│ │ │ │ └── utils.js
│ │ │ ├── stylex.js
│ │ │ └── types/
│ │ │ ├── StyleXCSSTypes.js
│ │ │ ├── StyleXOpaqueTypes.js
│ │ │ ├── StyleXTypes.d.ts
│ │ │ ├── StyleXTypes.js
│ │ │ ├── StyleXUtils.js
│ │ │ └── VarTypes.js
│ │ └── unplugin/
│ │ ├── .babelrc.cjs
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ └── unplugin.test.js
│ │ ├── babel-plugins/
│ │ │ └── add-mjs-extension.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── bun.d.ts
│ │ ├── bun.js
│ │ ├── consts.js
│ │ ├── core.d.ts
│ │ ├── core.js
│ │ ├── dev-inject-middleware.js
│ │ ├── esbuild.d.ts
│ │ ├── esbuild.js
│ │ ├── farm.d.ts
│ │ ├── farm.js
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── rolldown.d.ts
│ │ ├── rolldown.js
│ │ ├── rollup.d.ts
│ │ ├── rollup.js
│ │ ├── rspack.d.ts
│ │ ├── rspack.js
│ │ ├── unloader.d.ts
│ │ ├── unloader.js
│ │ ├── vite.d.ts
│ │ ├── vite.js
│ │ ├── webpack.d.ts
│ │ └── webpack.js
│ ├── benchmarks/
│ │ ├── compare.js
│ │ ├── package.json
│ │ ├── perf/
│ │ │ ├── fixtures/
│ │ │ │ ├── colors.stylex.js
│ │ │ │ ├── create-basic.js
│ │ │ │ ├── create-complex.js
│ │ │ │ ├── createTheme-basic.js
│ │ │ │ ├── createTheme-complex.js
│ │ │ │ └── sizes.stylex.js
│ │ │ ├── helpers.js
│ │ │ ├── run.js
│ │ │ └── tests/
│ │ │ ├── transform-create-tests.js
│ │ │ └── transform-create-theme-tests.js
│ │ └── size/
│ │ ├── fixtures/
│ │ │ ├── index.js
│ │ │ ├── lotsOfStyles.js
│ │ │ └── lotsOfStylesDynamic.js
│ │ ├── rollup.config.mjs
│ │ └── run.js
│ ├── docs/
│ │ ├── .eslintrc.cjs
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── cli.json
│ │ ├── content/
│ │ │ ├── blog/
│ │ │ │ ├── 2023-12-05-introducing-stylex.md
│ │ │ │ ├── 2023-12-29-Release-v0.4.1.md
│ │ │ │ ├── 2024-01-25-Release-v0.5.0.md
│ │ │ │ ├── 2024-04-16-Release-v0.6.1.mdx
│ │ │ │ ├── 2024-06-25-Release-v0.7.0.mdx
│ │ │ │ ├── 2024-06-28-Release-v0.7.3.mdx
│ │ │ │ ├── 2024-10-06-Release-v0.8.0.mdx
│ │ │ │ ├── 2024-11-01-Release-v0.9.3.mdx
│ │ │ │ ├── 2025-01-02-Release-v0.10.0.mdx
│ │ │ │ ├── 2025-01-17-Release-v0.10.1.mdx
│ │ │ │ ├── 2025-02-27-Release-v0.11.0.mdx
│ │ │ │ ├── 2025-04-10-Release-v0.12.0.mdx
│ │ │ │ ├── 2025-05-19-Release-v0.13.0.mdx
│ │ │ │ ├── 2025-06-30-Release-v0.14.0.mdx
│ │ │ │ ├── 2025-07-31-Release-v0.15.0.mdx
│ │ │ │ ├── 2025-09-25-Release-v0.16.0.mdx
│ │ │ │ ├── 2025-11-25-Release-v0.17.1.mdx
│ │ │ │ └── 2026-01-01-new-year-new-website.mdx
│ │ │ └── docs/
│ │ │ ├── acknowledgements.mdx
│ │ │ ├── api/
│ │ │ │ ├── configuration/
│ │ │ │ │ ├── babel-plugin.mdx
│ │ │ │ │ ├── eslint-plugin.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── postcss-plugin.mdx
│ │ │ │ │ └── unplugin.mdx
│ │ │ │ ├── index.mdx
│ │ │ │ ├── javascript/
│ │ │ │ │ ├── create.mdx
│ │ │ │ │ ├── createTheme.mdx
│ │ │ │ │ ├── defineConsts.mdx
│ │ │ │ │ ├── defineVars.mdx
│ │ │ │ │ ├── env.mdx
│ │ │ │ │ ├── firstThatWorks.mdx
│ │ │ │ │ ├── keyframes.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── positionTry.mdx
│ │ │ │ │ ├── props.mdx
│ │ │ │ │ ├── types.mdx
│ │ │ │ │ ├── viewTransitionClass.mdx
│ │ │ │ │ └── when.mdx
│ │ │ │ └── types/
│ │ │ │ ├── StaticStyles.mdx
│ │ │ │ ├── StyleXStyles.mdx
│ │ │ │ ├── StyleXStylesWithout.mdx
│ │ │ │ ├── Theme.mdx
│ │ │ │ ├── VarGroup.mdx
│ │ │ │ └── meta.json
│ │ │ ├── ecosystem.mdx
│ │ │ ├── index.mdx
│ │ │ ├── learn/
│ │ │ │ ├── index.mdx
│ │ │ │ ├── installation/
│ │ │ │ │ ├── cli.mdx
│ │ │ │ │ ├── esbuild.mdx
│ │ │ │ │ ├── index.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── nextjs.mdx
│ │ │ │ │ ├── postcss.mdx
│ │ │ │ │ ├── rspack.mdx
│ │ │ │ │ ├── vite/
│ │ │ │ │ │ ├── index.mdx
│ │ │ │ │ │ ├── meta.json
│ │ │ │ │ │ ├── react-router.mdx
│ │ │ │ │ │ ├── redwoodsdk.mdx
│ │ │ │ │ │ ├── vite-react.mdx
│ │ │ │ │ │ ├── vite-rsc.mdx
│ │ │ │ │ │ └── waku.mdx
│ │ │ │ │ └── webpack.mdx
│ │ │ │ ├── meta.json
│ │ │ │ ├── recipes/
│ │ │ │ │ ├── context-driven-styles.mdx
│ │ │ │ │ ├── descendant-styles.mdx
│ │ │ │ │ ├── light-dark-themes.mdx
│ │ │ │ │ ├── merge-themes.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── reset-themes.mdx
│ │ │ │ │ ├── shareable-tokens.mdx
│ │ │ │ │ └── variants.mdx
│ │ │ │ ├── static-types.mdx
│ │ │ │ ├── styling-ui/
│ │ │ │ │ ├── defining-styles.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── using-styles.mdx
│ │ │ │ ├── theming/
│ │ │ │ │ ├── creating-themes.mdx
│ │ │ │ │ ├── defining-variables.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── using-variables.mdx
│ │ │ │ │ └── variable-types.mdx
│ │ │ │ └── thinking-in-stylex.mdx
│ │ │ ├── llm-resources.mdx
│ │ │ └── meta.json
│ │ ├── package.json
│ │ ├── source.config.ts
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── AnimatedGradientBox/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── tokens.stylex.ts
│ │ │ │ ├── CtaButton.tsx
│ │ │ │ ├── DevStyleXHMR.tsx
│ │ │ │ ├── Dial.tsx
│ │ │ │ ├── Footer.tsx
│ │ │ │ ├── Logo.tsx
│ │ │ │ ├── LogoBold.tsx
│ │ │ │ ├── Playground/
│ │ │ │ │ ├── Dialogs.tsx
│ │ │ │ │ ├── DynamicPlayground.tsx
│ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ ├── Tabs.tsx
│ │ │ │ │ ├── demoConstants.ts
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── StylexAnimatedLogo.tsx
│ │ │ │ ├── TypingWord.tsx
│ │ │ │ ├── ZStack.tsx
│ │ │ │ ├── icons/
│ │ │ │ │ ├── Bluesky.tsx
│ │ │ │ │ └── MetaOpenSource.tsx
│ │ │ │ ├── layout/
│ │ │ │ │ ├── docs.tsx
│ │ │ │ │ ├── home/
│ │ │ │ │ │ ├── SidebarToggle.tsx
│ │ │ │ │ │ ├── client.tsx
│ │ │ │ │ │ └── index.tsx
│ │ │ │ │ ├── page.tsx
│ │ │ │ │ └── shared/
│ │ │ │ │ ├── client.tsx
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── mdx/
│ │ │ │ │ ├── Callout.tsx
│ │ │ │ │ ├── Cards.tsx
│ │ │ │ │ ├── CodeBlock.tsx
│ │ │ │ │ ├── Details.tsx
│ │ │ │ │ ├── Heading.tsx
│ │ │ │ │ ├── Image.tsx
│ │ │ │ │ ├── LLMFiles.tsx
│ │ │ │ │ ├── Link.tsx
│ │ │ │ │ ├── PackageInstall.tsx
│ │ │ │ │ ├── ScrollableCodeBlock.tsx
│ │ │ │ │ ├── Table.tsx
│ │ │ │ │ ├── Tabs.tsx
│ │ │ │ │ ├── VersionTag.tsx
│ │ │ │ │ ├── WhenDemo.tsx
│ │ │ │ │ ├── core.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ ├── markers.stylex.ts
│ │ │ │ │ └── mdx.stylex.ts
│ │ │ │ ├── navigation-menu.tsx
│ │ │ │ ├── provider.tsx
│ │ │ │ ├── search-dialog.tsx
│ │ │ │ ├── search-toggle.tsx
│ │ │ │ ├── sidebar.tsx
│ │ │ │ ├── theme-toggle.tsx
│ │ │ │ └── ui/
│ │ │ │ ├── button.tsx
│ │ │ │ ├── collapsible.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ └── scroll-area.tsx
│ │ │ ├── contexts/
│ │ │ │ └── SidebarContext.tsx
│ │ │ ├── hooks/
│ │ │ │ └── useStateWithCallback.tsx
│ │ │ ├── pages/
│ │ │ │ ├── (home)/
│ │ │ │ │ ├── _layout.tsx
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── (playground)/
│ │ │ │ │ ├── _layout.tsx
│ │ │ │ │ └── playground.tsx
│ │ │ │ ├── _layout.tsx
│ │ │ │ ├── api/
│ │ │ │ │ ├── blog-atom.xml.ts
│ │ │ │ │ ├── blog-rss.xml.ts
│ │ │ │ │ ├── llms-full.txt.ts
│ │ │ │ │ └── search.ts
│ │ │ │ ├── blog/
│ │ │ │ │ ├── [...slugs].tsx
│ │ │ │ │ ├── _layout.tsx
│ │ │ │ │ └── index.tsx
│ │ │ │ └── docs/
│ │ │ │ ├── [...slugs].tsx
│ │ │ │ └── _layout.tsx
│ │ │ ├── styles/
│ │ │ │ └── globals.css
│ │ │ ├── theming/
│ │ │ │ └── vars.stylex.ts
│ │ │ └── waku.server.ts
│ │ ├── static/
│ │ │ └── llm/
│ │ │ ├── stylex-authoring.md
│ │ │ └── stylex-installation.md
│ │ ├── tsconfig.json
│ │ ├── vercel.json
│ │ └── waku.config.ts
│ ├── old-docs/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── .prettierignore
│ │ ├── .stylelintrc.js
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── blog/
│ │ │ ├── 2023-12-05-introducing-stylex.md
│ │ │ ├── 2023-12-29-Release-v0.4.1.md
│ │ │ ├── 2024-01-25-Release-v0.5.0.md
│ │ │ ├── 2024-04-16-Release-v0.6.1.mdx
│ │ │ ├── 2024-06-25-Release-v0.7.0.mdx
│ │ │ ├── 2024-06-28-Release-v0.7.3.mdx
│ │ │ ├── 2024-10-06-Release-v0.8.0.mdx
│ │ │ ├── 2024-11-01-Release-v0.9.3.mdx
│ │ │ ├── 2025-01-02-Release-v0.10.0.mdx
│ │ │ ├── 2025-01-17-Release-v0.10.1.mdx
│ │ │ ├── 2025-02-27-Release-v0.11.0.mdx
│ │ │ ├── 2025-04-10-Release-v0.12.0.mdx
│ │ │ ├── 2025-05-19-Release-v0.13.0.mdx
│ │ │ ├── 2025-06-30-Release-v0.14.0.mdx
│ │ │ ├── 2025-07-31-Release-v0.15.0.mdx
│ │ │ ├── 2025-09-25-Release-v0.16.0.mdx
│ │ │ ├── 2025-11-25-Release-v0.17.1.mdx
│ │ │ └── authors.yml
│ │ ├── components/
│ │ │ ├── AnimatedGradientBox/
│ │ │ │ ├── AnimatedGradientBox.js
│ │ │ │ └── tokens.stylex.js
│ │ │ ├── CtaButton.js
│ │ │ ├── Dial.js
│ │ │ ├── LoadingSpinner.js
│ │ │ ├── Logo.js
│ │ │ ├── LogoBold.js
│ │ │ ├── LogoDownloadModal.js
│ │ │ ├── Playground.js
│ │ │ ├── StylexAnimatedLogo.js
│ │ │ ├── VersionTag.js
│ │ │ ├── YouTube.js
│ │ │ ├── ZStack.js
│ │ │ ├── examples/
│ │ │ │ └── dev-install.js
│ │ │ ├── hooks/
│ │ │ │ ├── useDebounced.js
│ │ │ │ ├── useId.js
│ │ │ │ └── useViewTransition.js
│ │ │ └── playground-utils/
│ │ │ └── files.js
│ │ ├── docs/
│ │ │ ├── api/
│ │ │ │ ├── configuration/
│ │ │ │ │ ├── _category_.json
│ │ │ │ │ ├── babel-plugin.mdx
│ │ │ │ │ ├── eslint-plugin.mdx
│ │ │ │ │ ├── postcss-plugin.mdx
│ │ │ │ │ └── unplugin.mdx
│ │ │ │ ├── index.mdx
│ │ │ │ ├── javascript/
│ │ │ │ │ ├── _category_.json
│ │ │ │ │ ├── create.mdx
│ │ │ │ │ ├── createTheme.mdx
│ │ │ │ │ ├── defineConsts.mdx
│ │ │ │ │ ├── defineVars.mdx
│ │ │ │ │ ├── firstThatWorks.mdx
│ │ │ │ │ ├── keyframes.mdx
│ │ │ │ │ ├── positionTry.mdx
│ │ │ │ │ ├── props.mdx
│ │ │ │ │ ├── types.mdx
│ │ │ │ │ ├── viewTransitionClass.mdx
│ │ │ │ │ └── when.mdx
│ │ │ │ └── types/
│ │ │ │ ├── StaticStyles.mdx
│ │ │ │ ├── StyleXStyles.mdx
│ │ │ │ ├── StyleXStylesWithout.mdx
│ │ │ │ ├── Theme.mdx
│ │ │ │ ├── VarGroup.mdx
│ │ │ │ └── _category_.json
│ │ │ └── learn/
│ │ │ ├── 02-thinking-in-stylex.mdx
│ │ │ ├── 03-installation.mdx
│ │ │ ├── 04-styling-ui/
│ │ │ │ ├── 01-defining-styles.mdx
│ │ │ │ ├── 02-using-styles.mdx
│ │ │ │ └── _category_.json
│ │ │ ├── 05-theming/
│ │ │ │ ├── 01-defining-variables.mdx
│ │ │ │ ├── 02-using-variables.mdx
│ │ │ │ ├── 03-creating-themes.mdx
│ │ │ │ ├── 04-variable-types.mdx
│ │ │ │ └── _category_.json
│ │ │ ├── 06-recipes/
│ │ │ │ ├── 01-context-driven-styles.mdx
│ │ │ │ ├── 02-variants.mdx
│ │ │ │ ├── 03-descendant styles.mdx
│ │ │ │ ├── 04-reset-themes.mdx
│ │ │ │ ├── 05-merge-themes.mdx
│ │ │ │ ├── 06-light-dark-themes.mdx
│ │ │ │ └── _category_.json
│ │ │ ├── 06-static-types.mdx
│ │ │ ├── 07-ecosystem.mdx
│ │ │ ├── 08-acknowledgements.mdx
│ │ │ └── index.mdx
│ │ ├── docusaurus.config.js
│ │ ├── eslintrc-legacy.js
│ │ ├── package.json
│ │ ├── serve.json
│ │ ├── sidebars.js
│ │ ├── src/
│ │ │ ├── css/
│ │ │ │ └── custom.css
│ │ │ ├── pages/
│ │ │ │ ├── index.js
│ │ │ │ └── playground.js
│ │ │ └── theme/
│ │ │ ├── Footer/
│ │ │ │ └── index.js
│ │ │ ├── Logo/
│ │ │ │ └── index.js
│ │ │ └── MDXComponents/
│ │ │ ├── Details.js
│ │ │ └── DetailsTokens.stylex.js
│ │ └── static/
│ │ ├── .nojekyll
│ │ └── robots.txt
│ ├── scripts/
│ │ ├── README.md
│ │ ├── flow-translator/
│ │ │ ├── flow-module-utils.js
│ │ │ ├── generate-types.js
│ │ │ └── rewrite-imports.js
│ │ └── package.json
│ ├── shared-ui/
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.tsx
│ │ └── tokens.stylex.ts
│ ├── style-value-parser/
│ │ ├── .babelrc
│ │ ├── README.md
│ │ ├── __benchmarks__/
│ │ │ ├── alpha-value.bench.mjs
│ │ │ ├── angle-percentage.bench.mjs
│ │ │ ├── angle.bench.mjs
│ │ │ ├── basic-shape.bench.mjs
│ │ │ ├── blend-mode.bench.mjs
│ │ │ ├── calc-constant.bench.mjs
│ │ │ ├── color.bench.mjs
│ │ │ ├── common-types.bench.mjs
│ │ │ ├── custom-ident.bench.mjs
│ │ │ ├── dashed-ident.bench.mjs
│ │ │ ├── dimension.bench.mjs
│ │ │ ├── easing-function.bench.mjs
│ │ │ ├── filter-function.bench.mjs
│ │ │ ├── flex.bench.mjs
│ │ │ ├── frequency.bench.mjs
│ │ │ ├── length-percentage.bench.mjs
│ │ │ └── length.bench.mjs
│ │ ├── jest.config.cjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── __tests__/
│ │ │ └── token-parser-test.js
│ │ ├── at-queries/
│ │ │ ├── __tests__/
│ │ │ │ ├── media-query-transform-test.js
│ │ │ │ ├── parse-media-query-test.js
│ │ │ │ └── validation-media-query-test.js
│ │ │ ├── media-query-transform.js
│ │ │ ├── media-query.js
│ │ │ └── messages.js
│ │ ├── base-types.js
│ │ ├── css-types/
│ │ │ ├── __tests__/
│ │ │ │ ├── alpha-value-test.js
│ │ │ │ ├── angle-percentage-test.js
│ │ │ │ ├── angle-test.js
│ │ │ │ ├── basic-shape.js
│ │ │ │ ├── blend-mode-test.js
│ │ │ │ ├── calc-constant.js
│ │ │ │ ├── calc-test.js
│ │ │ │ ├── color-test.js
│ │ │ │ ├── custom-ident-test.js
│ │ │ │ ├── dashed-ident-test.js
│ │ │ │ ├── easing-function-test.js
│ │ │ │ ├── filter-function-test.js
│ │ │ │ ├── flex-test.js
│ │ │ │ ├── frequency-test.js
│ │ │ │ ├── length-percentage-test.js
│ │ │ │ ├── length-test.js
│ │ │ │ ├── position-test.js
│ │ │ │ ├── resolution-test.js
│ │ │ │ ├── time-test.js
│ │ │ │ └── transform-function-test.js
│ │ │ ├── alpha-value.js
│ │ │ ├── angle-percentage.js
│ │ │ ├── angle.js
│ │ │ ├── basic-shape.js
│ │ │ ├── blend-mode.js
│ │ │ ├── calc-constant.js
│ │ │ ├── calc.js
│ │ │ ├── color.js
│ │ │ ├── common-types.js
│ │ │ ├── custom-ident.js
│ │ │ ├── dashed-ident.js
│ │ │ ├── dimension.js
│ │ │ ├── easing-function.js
│ │ │ ├── filter-function.js
│ │ │ ├── flex.js
│ │ │ ├── frequency.js
│ │ │ ├── length-percentage.js
│ │ │ ├── length.js
│ │ │ ├── position.js
│ │ │ ├── resolution.js
│ │ │ ├── time.js
│ │ │ └── transform-function.js
│ │ ├── index.js
│ │ ├── properties/
│ │ │ ├── __tests__/
│ │ │ │ ├── border-radius.test.js
│ │ │ │ ├── box-shadow.test.js
│ │ │ │ └── transform.js
│ │ │ ├── border-radius.js
│ │ │ ├── box-shadow.js
│ │ │ └── transform.js
│ │ ├── properties.js
│ │ ├── token-parser.js
│ │ └── token-types.js
│ └── typescript-tests/
│ ├── package.json
│ ├── src/
│ │ ├── babel-plugin.ts
│ │ ├── env.ts
│ │ ├── exports.ts
│ │ ├── test1.tsx
│ │ ├── test2.tsx
│ │ ├── test3.tsx
│ │ ├── test4.tsx
│ │ ├── test5.tsx
│ │ ├── themes.ts
│ │ ├── theming/
│ │ │ ├── ButtonTokenThemes.ts
│ │ │ └── ButtonTokens.stylex.ts
│ │ ├── theming1.tsx
│ │ └── typetests.ts
│ └── tsconfig.json
└── tools/
├── README.md
├── eslint/
│ └── copyright-header.txt
├── husky/
│ └── pre-commit
└── npm/
└── release.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
const path = require('path');
module.exports = {
settings: {
react: {
pragma: 'React',
version: '18.0',
flowVersion: '0.261.2', // Flow version
},
'ft-flow': {
onlyFilesWithFlowAnnotation: true,
},
},
// babel parser to support ES6/7 features
parser: 'hermes-eslint',
extends: ['plugin:ft-flow/recommended', 'prettier'],
plugins: ['ft-flow', 'react', 'headers'],
env: {
browser: true,
es6: true,
jest: true,
node: true,
},
ignorePatterns: [
'build',
'coverage',
'dist',
'flow-typed',
'lib',
'flow_modules',
'node_modules',
'next-env.d.ts',
'next.config.js',
'**/__mocks__/snapshot*',
'**/storybook-static/**',
'**/examples/example-cli/src/**',
'**/*.d.ts',
'**/pages.gen.ts',
],
overrides: [
{
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
rules: {
'ft-flow/space-after-type-colon': 'off',
'ft-flow/generic-spacing': 'off',
'ft-flow/no-types-missing-file-annotation': 'off',
},
},
],
globals: {
$Call: 'readonly',
$Diff: 'readonly',
$ElementType: 'readonly',
$Exact: 'readonly',
$FlowFixMe: 'readonly',
$Keys: 'readonly',
$NonMaybeType: 'readonly',
$ObjMap: 'readonly',
$ObjMapConst: 'readonly',
$ObjMapi: 'readonly',
$PropertyType: 'readonly',
$ReactOnly: 'readonly',
$ReactOnlyArray: 'readonly',
$ReadOnlyMap: 'readonly',
$ReadOnlySet: 'readonly',
$Rest: 'readonly',
$TupleMap: 'readonly',
$Values: 'readonly',
Partial: 'readonly',
},
rules: {
'headers/header-format': [
'error',
{
source: 'file',
path: path.join(__dirname, './tools/eslint/copyright-header.txt'),
},
],
camelcase: 0,
'constructor-super': 2,
'default-case': [2, { commentPattern: '^no default$' }],
eqeqeq: [2, 'allow-null'],
'handle-callback-err': [2, '^(err|error)$'],
'new-cap': [2, { newIsCap: true, capIsNew: false }],
'no-alert': 1,
'no-array-constructor': 2,
'no-caller': 2,
'no-case-declarations': 2,
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 2,
'no-debugger': 2,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, { allowLoop: false, allowSwitch: false }],
'no-lone-blocks': 2,
'no-loop-func': 2,
'no-multi-str': 2,
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new': 2,
'no-new-func': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-script-url': 2,
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-undef': 0,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, { defaultAssignment: false }],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
2,
{ vars: 'all', argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-concat': 2,
'no-useless-constructor': 2,
'no-useless-escape': 2,
'no-var': 2,
'no-with': 2,
'prefer-const': 2,
'prefer-rest-params': 2,
quotes: [2, 'single', 'avoid-escape'],
radix: 2,
'use-isnan': 2,
'valid-typeof': 2,
yoda: [2, 'never'],
// flow
'ft-flow/space-after-type-colon': [2, 'always', { allowLineBreak: true }],
'ft-flow/generic-spacing': 0,
// react
'react/display-name': 0,
'react/jsx-no-bind': 0,
'react/jsx-no-duplicate-props': 2,
'react/jsx-no-undef': 2,
'react/jsx-pascal-case': 2,
'react/jsx-sort-props': 2,
'react/jsx-uses-react': 2,
'react/jsx-uses-vars': 2,
'react/no-did-mount-set-state': 0,
'react/no-did-update-set-state': 2,
'react/no-direct-mutation-state': 2,
'react/no-multi-comp': 0,
'react/no-string-refs': 2,
'react/no-unknown-property': 2,
'react/prefer-es6-class': 2,
'react/prop-types': 0,
'react/react-in-jsx-scope': 0,
'react/self-closing-comp': 2,
'react/sort-comp': 0,
'react/sort-prop-types': 2,
'react/wrap-multilines': 0,
},
};
================================================
FILE: .flowconfig
================================================
[ignore]
.*/build/.*
.*/dist/.*
.*/example-*/.*
.*/lib/.*
.*/malformed_package_json/.*
[include]
[lints]
[options]
experimental.pattern_matching=true
enums=true
emoji=true
casting_syntax=as
exact_by_default=true
experimental.const_params=true
module.use_strict=true
munge_underscores=true
module.name_mapper='^@stylexjs/babel-plugin$' -> '<PROJECT_ROOT>/packages/@stylexjs/babel-plugin/src/index.js'
module.name_mapper='^@stylexjs/stylex$' -> '<PROJECT_ROOT>/packages/@stylexjs/stylex/src/stylex.js'
module.name_mapper='^@stylexjs/shared$' -> '<PROJECT_ROOT>/packages/@stylexjs/shared/src/index.js'
module.name_mapper='^style-value-parser$' -> '<PROJECT_ROOT>/packages/style-value-parser/src/index.js'
; type-stubs
module.system.node.resolve_dirname=flow_modules
module.system.node.resolve_dirname=node_modules
[strict]
================================================
FILE: .github/CODEOWNERS
================================================
* @ezzak @Jta26 @mellyeliu @necolas @nmn @vincentriemer
================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to make participation in our project and our
community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and
expression, level of experience, education, socio-economic status, nationality,
personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, or to ban temporarily or permanently any
contributor for other behaviors that they deem inappropriate, threatening,
offensive, or harmful.
## Scope
This Code of Conduct applies within all project spaces, and it also applies when
an individual is representing the project or its community in public spaces.
Examples of representing a project or community include using an official
project e-mail address, posting via an official social media account, or acting
as an appointed representative at an online or offline event. Representation of
a project may be further defined and clarified by project maintainers.
This Code of Conduct also applies outside the project spaces when there is a
reasonable belief that an individual's behavior may have a negative impact on
the project or its community.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at <opensource-conduct@fb.com>. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an
incident. Further details of specific enforcement policies may be posted
separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 1.4, available at
https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing
## Reporting Issues and Asking Questions
Before opening an issue, please search the issue tracker to make sure your issue
hasn't already been reported. Please note that your issue may be closed if it
doesn't include the information requested in the issue template.
## Getting started
Visit the issue tracker to find a list of open issues that need attention.
Fork, then clone the repo:
```
git clone https://github.com/your-username/stylex.git
```
Make sure you have yarn@1.22 and node@>=16 installed. Then install the package
dependencies:
```
yarn install
```
## Automated tests
To run the linter:
```
yarn lint
```
To run flow:
```
yarn flow
```
## Compile and build
To compile the source code:
```
yarn build
```
To run all the tests (will build automatically):
```
yarn test
```
…in watch mode (will build only once):
```
yarn test --watch
```
## Documentation
If necessary, first build the StyleX packages (`yarn build`), then start the
docs locally:
```
yarn workspace docs start
```
### New Features
Please, familiarize yourself with
[StyleX's goals and architectural principles](https://stylexjs.com/docs/learn/thinking-in-stylex/),
and open an issue with a proposal when suggesting a new feature of behavioural
change. We don't want you to waste your efforts on a pull request that we won't
want to accept.
## Pull requests
**Before submitting a pull request**, please make sure the following is done:
1. Fork the repository and create your branch from `main`.
2. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. Ensure the tests pass (`yarn test`).
You can now submit a pull request, referencing any issues it addresses.
Please try to keep your pull request focused in scope and avoid including
unrelated commits.
After you have submitted your pull request, we'll try to get back to you as soon
as possible. We may suggest some changes or improvements.
Thank you for contributing!
## Typical Editor setup
### VS Code
If you're using Visual Studio Code, we recommend the following setup for the
best experience.
#### Extensions
We recommend you have the following extensions installed:
- [Flow Language Support](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
#### Turn off Typescript within JS files
Additionally, since StyleX is authored with the
[Flow typesystem](https://flow.org), it is helpful to turn off Typescript
type-checking within Javascript files:
```json
{
"javascript.validate.enable": false
}
```
================================================
FILE: .github/ISSUE_TEMPLATE/bug.yml
================================================
name: Bug report
description: File a bug report
labels: ["bug"]
body:
- type: textarea
attributes:
label: Describe the issue
description: Please provide a concise description of what you're experiencing. Providing screenshots is also helpful.
validations:
required: true
- type: textarea
attributes:
label: Expected behavior
description: Please provide a concise description of what you expected to happen.
validations:
required: true
- type: textarea
attributes:
label: Steps to reproduce
description: Please describe the precise steps needed to reproduce the behavior.
placeholder: |
Mention package versions and environment (platform, browser, etc)...
1. ...
2. ...
validations:
required: true
- type: textarea
attributes:
label: Test case
description: Please provide a reduced test case that reproduces the issue.
validations:
required: false
- type: textarea
attributes:
label: Additional comments
description: You're welcome to provide additional context and proposed solutions.
================================================
FILE: .github/ISSUE_TEMPLATE/feature.yml
================================================
name: Feature request
description: If you have a suggestion…
labels: ["enhancement"]
body:
- type: textarea
attributes:
label: Describe the feature request
description: Please provide a concise description of the request, potential solutions, and additional context.
validations:
required: true
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
## What changed / motivation ?
Please include relevant motivation and context
## Linked PR/Issues
Fixes # (issue)
## Additional Context
<!--- Screenshots, Tests, Breaking Change, Anything Else ? --->
Screenshots, Tests, Anything Else
## Pre-flight checklist
- [ ] I have read the contributing guidelines
[Contribution Guidelines](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)
- [ ] Performed a self-review of my code
================================================
FILE: .github/workflows/benchmarks.yml
================================================
name: benchmarks
on: [pull_request]
jobs:
perf:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
with:
fetch-depth: 50
- uses: actions/setup-node@v6
with:
node-version: '22.x'
cache: 'yarn'
cache-dependency-path: yarn.lock
- run: corepack prepare yarn@1.22.22 --activate
- name: 'Setup temporary files'
run: |
echo "BASE_JSON=$(mktemp)" >> $GITHUB_ENV
echo "PATCH_JSON=$(mktemp)" >> $GITHUB_ENV
- name: 'Benchmark base'
run: |
git checkout -f ${{ github.event.pull_request.base.sha }}
git clean -fdx
yarn install --frozen-lockfile --silent
if yarn workspace benchmarks run perf -- -o ${{ env.BASE_JSON }}; then
echo "Ran successfully on base branch"
else
echo "{}" > ${{ env.BASE_JSON }} # Empty JSON as default
echo "Benchmark script not found on base branch, using default values"
fi
- name: 'Benchmark patch'
run: |
git checkout -f ${{ github.event.pull_request.head.sha }}
git clean -fdx
yarn install --frozen-lockfile --silent
yarn workspace benchmarks run perf -- -o ${{ env.PATCH_JSON }}
echo "Ran successfully on patch branch"
- name: 'Collect results'
id: collect
run: |
echo "table<<EOF" >> $GITHUB_OUTPUT
yarn workspace benchmarks run compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown
cat markdown >> $GITHUB_OUTPUT
echo "EOF" >> $GITHUB_OUTPUT
- name: 'Post comment'
uses: edumserrano/find-create-or-update-comment@v3
with:
issue-number: ${{ github.event.pull_request.number }}
body-includes: '<!-- workflow-benchmarks-perf-data -->'
comment-author: 'github-actions[bot]'
body: |
<!-- workflow-benchmarks-perf-data -->
### workflow: benchmarks/perf
Comparison of performance test results, measured in operations per second. Larger is better.
${{ steps.collect.outputs.table }}
edit-mode: replace
size:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
with:
fetch-depth: 50
- uses: actions/setup-node@v6
with:
node-version: '22.x'
cache: 'yarn'
cache-dependency-path: yarn.lock
- run: corepack prepare yarn@1.22.22 --activate
- name: 'Setup temporary files'
run: |
echo "BASE_JSON=$(mktemp)" >> $GITHUB_ENV
echo "PATCH_JSON=$(mktemp)" >> $GITHUB_ENV
- name: 'Benchmark base'
run: |
git checkout -f ${{ github.event.pull_request.base.sha }}
git clean -fdx
yarn install --frozen-lockfile --silent
if yarn workspace benchmarks run size -- -o ${{ env.BASE_JSON }}; then
echo "Ran successfully on base branch"
else
echo "{}" > ${{ env.BASE_JSON }} # Empty JSON as default
echo "Benchmark script not found on base branch, using default values"
fi
- name: 'Benchmark patch'
run: |
git checkout -f ${{ github.event.pull_request.head.sha }}
git clean -fdx
yarn install --frozen-lockfile --silent
yarn workspace benchmarks run size -- -o ${{ env.PATCH_JSON }}
echo "Ran successfully on patch branch"
- name: 'Collect results'
id: collect
run: |
echo "table<<EOF" >> $GITHUB_OUTPUT
yarn workspace benchmarks run compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown
cat markdown >> $GITHUB_OUTPUT
echo "EOF" >> $GITHUB_OUTPUT
- name: 'Post comment'
uses: edumserrano/find-create-or-update-comment@v3
with:
issue-number: ${{ github.event.pull_request.number }}
body-includes: '<!-- workflow-benchmarks-size-data -->'
comment-author: 'github-actions[bot]'
body: |
<!-- workflow-benchmarks-size-data -->
### workflow: benchmarks/size
Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
${{ steps.collect.outputs.table }}
edit-mode: replace
================================================
FILE: .github/workflows/tests.yml
================================================
name: tests
on:
push:
branches:
- 'main'
pull_request:
types: [opened, synchronize, reopened]
jobs:
flow:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: '22.x'
cache: 'yarn'
cache-dependency-path: yarn.lock
- run: corepack prepare yarn@1.22.22 --activate
- run: yarn install --frozen-lockfile
- run: yarn flow
packages:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: '22.x'
cache: 'yarn'
cache-dependency-path: yarn.lock
- run: corepack prepare yarn@1.22.22 --activate
- run: yarn install --frozen-lockfile
- run: yarn test:packages
prettier:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: '22.x'
cache: 'yarn'
cache-dependency-path: yarn.lock
- run: corepack prepare yarn@1.22.22 --activate
- run: yarn install --frozen-lockfile
- run: yarn prettier:report
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: '22.x'
cache: 'yarn'
cache-dependency-path: yarn.lock
- run: corepack prepare yarn@1.22.22 --activate
- run: yarn install --frozen-lockfile
- run: yarn lint:report
spelling:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: crate-ci/typos@master
with:
config: .github/workflows/typos.toml
================================================
FILE: .github/workflows/typos.toml
================================================
[files]
extend-exclude = [
"*.snap",
"flow-typed/*",
# Too many false positives on inline snapshots
"packages/**/__tests__/",
# Fixture data has lots of typos
"packages/benchmarks/**/fixtures/",
]
[default.extend-words]
# Ignore false-positives
stylex = "stylex"
nd = "nd"
================================================
FILE: .gitignore
================================================
*.log*
.DS_Store
.build
.docusaurus
.stylex
build
coverage
dist
lib
node_modules
storybook-static
================================================
FILE: .prettierignore
================================================
.build
.docusaurus
.next
.stylex
build
coverage
lib
flow_modules
node_modules
**/__mocks__/snapshot*
packages/benchmarks/size/fixtures/lotsOfStyles.js
flow-typed
examples/example-storybook/storybook-static
examples/example-cli/src
packages/docs/.source
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": [
"flowtype.flow-for-vscode"
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"javascript.validate.enable": false
}
================================================
FILE: .watchmanconfig
================================================
{}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## 0.18.1 (Mar 5, 2026)
- Add simple `sx={}` JSX prop syntax as an alternative to `stylex.props`.
- Fix `unplugin` `generateBundle` hook to use `emitFile` instead of direct bundle assignment.
## 0.18.0 (Mar 3, 2026)
- Add `stylex.env` API for compile-time constants and shareable design tokens.
- New `create-stylex-app` CLI for scaffolding projects with `npx create-stylex-app`.
- Add Bun support and improvements to the `unplugin` bundler plugin.
- Support attribute selectors in `stylex.when` and conditional styles.
- Fix priority calculation for compound pseudo selectors.
## 0.17.5 (Jan 12. 2026)
- New `no-conflicting-props` lint rule.
- Add `disallowedPropertiesValidation` config to disable property compiler errors by default.
- Preserve units in zero values for CSS variables.
- Fix `unplugin` cache invalidation on style changes.
- Add `env` compiler option to expose `stylex.env` compile-time constants.
## 0.17.4 (Dec 18. 2025)
- New playground within the docs website.
- Fix named exports detection on Turbopack.
## 0.17.3 (Dec 12, 2025)
- Add docs for setup instructions.
- Improve AST detection for `.stylex` named exports
- Add browser rollup bundle.
- Fix unplugin file suffix parsing.
## 0.17.2 (Dec 1, 2025)
- Pass importSources to babel plugin in `unplugin` plugin.
- Fix custom typescript typedef mistake.
## 0.17.1 (Nov 26, 2025)
- Add support for compiling stylex from imported packages.
- Add runtime injection support for `defineConsts` constants.
- Show full debug file paths.
- Fix media query ordering for queries with 'screen and'.
- Add `debugFilePath` config option.
- Fix unitless zoom bug for float values.
- Fix props compilation for array mutations.
## 0.17.0 (Nov 18, 2025)
- Add docs for ESLint rules and `stylex.when` API.
- Add `defineMarker()` for custom markers for selector combinators.
- New unplugin bundler plugin implementation for various bundlers (Vite,
Webpack, Rspack, Rollup, etc.).
- Enhance `stylex.props` to precompile more often for better performance.
- Order pseudo-classes and `stylex.when` selectors according to priorities in
`sort-keys.
- Add support for ternary and logical expressions in `valid-styles`.
- Bump specificity of `stylex.when` selectors over defaults.
- Add polyfill for logical float values in legacy mode.
## 0.16.3 (Oct 27, 2025)
- Add configs to `sort-keys` property ordering.
- Create new `defineConsts` specific file extension.
- Add `defineConsts` and various file extension support to `enforce-extension`.
- Add config for custom module resolution.
- Turn `enableMediaQueryOrder` on by default.
- Updates to docs and Flow.
## 0.16.2 (Oct 13, 2025)
- Handle descendant selector styles in `valid-styles` rule.
- Adjust descendant selector `.when` priorities.
- Fix `defineVars` and `createTheme` at-rules priorities.
- Update `defineConsts` types for non-stylex usage.
## 0.16.1 (Oct 2, 2025)
- New `no-lookahead-selector` lint rule to flag certain descendant and sibling
selectors.
- Fix priorities for descendant and sibling selectors.
- Fix color functions for `valid-shorthands` rule.
- Fix hoisting issues with duplicate keys in `create` calls.
- Add storybook example.
## 0.16.0 (Sep 25, 2025)
- Added support for descendant and shared selectors.
- Support CSS variable overrides with `defineConsts`.
- Add `valid-styles` support to CSS variable overrides in `create` calls.
- Replace `valid-styles` object check with Flow typing
## 0.15.4 (Sep 7, 2025)
- Add configuration modes to `processStylexRules`.
- Support local resolved constants, `positionTry`, and '0' values in
`valid-styles` ESLint rule.
- Implement `defineConsts` for dynamic styles.
- Create `.transformed` file extension for preresolved variables.
## 0.15.3 (Aug 13, 2025)
- Optimize precomputed `props` calls in JSX.
- Fix class name construction for dynamic contextual styles.
- Handle all unit values in media query rewriting.
## 0.15.2 (Aug 1, 2025)
- Exclude private dependencies from `@stylexjs/babel-plugin` package.
- Reduce chances of dynamic variable name collisions.
## 0.15.1 (Aug 1, 2025)
### Fixes
- Hoist stylex.create and static className objects to the top level for support
inside functions.
## 0.15.0 (Jul 31, 2025)
### New features
- Enable media query ordering and parsing behind `enableMediaQueryOrder` flag.
- Integrate media query parser for automatic media query validation and
normalization.
### Fixes
- Implement merging of width, height, and ranges in media query transformer.
- Optimize dynamic styles output for conditionals and template literals.
- Fix TypeScript types for `stylex.types.*` functions.
- Fix opaque type issues for InlineStyles.
## 0.14.3 (Jul 22, 2025)
### Fixes
- Do not emit class names for `null` or `undefined` dynamic styles.
- Optimize dynamic styles output for binary and unary expressions.
## 0.14.2 (Jul 14, 2025)
### Fixes
- ESLint plugin style validation for length properties (#1136)
- Remove legacy RTL flipping of boxShadow, cursor, textShadow values.
## 0.14.1 (Jul 3, 2025)
### Fixes
- Another fix for TypeScript types.
## 0.14.0 (Jun 30, 2025)
### New features
- Add `viewTransitionClass` API for creating CSS View Transitions.
- ESLint plugin includes `validImports` options for all rules.
- ESLint plugin includes autofix for all remaining nonstandard CSS properties
when using the `valid-styles` rule.
### Breaking changes
- Make `property-specificity` the default `styleResolution`.
### Fixes
- Fix theming in dev/debug mode.
- Avoid putting certain `@-rules` in `@layer` blocks.
- Fix type exports for TypeScript.
## 0.13.1 (May 21, 2025)
### Fixes
- Export additional Types.
## 0.13.0 (May 19, 2025)
### New features
- Add `positionTry` API for creating `@property-try` declarations.
- Add `defineConsts` API for inlining constant values.
- Re-write of the runtime style injection module to be more reliable.
### Breaking changes
- The `runtimeInjection` compiler option is now disabled by default when `dev`
is true.
- The ESLint rule `no-legacy-conditional-styles` is renamed to
`no-legacy-contextual-styles`.
- The `useRemForFontSize` compiler option is renamed to `enableFontSizePxToRem`.
It is disabled by default and should not be used directly.
- The `genConditionalClasses` compiler option is renamed to
`enableInlinedConditionalMerge`. It is enabled by default and should not be
used directly.
- The `attrs` API is removed due to low usage and redundancy with the `props`
API.
### Fixes
- Fix the TypeScript types for themes and types functions.
- Fix the creation of duplicate classNames when defining nested pseudo-classes.
- Fix that allows the ESLint plugin to support use of `importSources` object
syntax in `validImports`.
- Fix incorrect compiler error messages.
- Fix a bug that incorrectly wrapped CSS variables in quotes when used in the
`content` property.
- Fix a bug in the `firstThatWorks` API when the last value was a variable.
- Allow `importSources` to be configured in the PostCSS plugin for React Strict
DOM compatibility.
### Deprecations
- Deprecate `@stylexjs/shared` package.
## 0.12.0 (Apr 10, 2025)
### New features
- Hash keys in compiled style objects to reduce generated code size.
- New eslint rule to flag use of legacy Media Query and pseudo-class syntax.
### Fixes
- Fix pseudo-elements bug in dynamic styles.
- Performance improvements to `createTheme` compilation by caching object
evaluation.
- Disallow spreading in `create` calls.
### Deprecations
- Deprecate `@stylexjs/dev-runtime` package.
- Deprecate `@stylexjs/esbuild-plugin` package.
- Deprecate `@stylexjs/nextjs-plugin` package.
- Deprecate `@stylexjs/open-props` package.
- Deprecate `@stylexjs/webpack-plugin` package.
## 0.11.1 (Mar 3, 2025)
### Fixes
- Fix `create` compilation regression for string and number keys.
- Fix babel path resolution within monorepos.
## 0.11.0 (Feb 27, 2025)
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# StyleX · [](https://github.com/facebook/stylex/blob/main/LICENSE) [](https://www.npmjs.com/package/@stylexjs/stylex) [](https://github.com/facebook/stylex/actions/workflows/tests.yml) [](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)
StyleX is a JavaScript library for defining styles for optimized user
interfaces.
## Documentation
[Documentation Website](https://stylexjs.com)
Documentation for individual packages can be found in their respective README
files. Start with
[`@stylexjs/stylex`](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex).
### Example
Here is a simple example of StyleX use:
```js
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
root: {
padding: 10,
},
element: {
backgroundColor: 'red',
},
});
const styleProps = stylex.props(styles.root, styles.element);
```
## Development
This is the development monorepo for StyleX.
### Structure
- `.github`
- Contains workflows used by GitHub Actions.
- Contains issue templates and contribution guidelines.
- `examples`
- Contains examples using StyleX and its integration with build tools.
- `packages`
- Contains the public and private packages managed in the monorepo.
- [babel-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/babel-plugin)
- [benchmarks](https://github.com/facebook/stylex/blob/main/packages/benchmarks)
- [cli](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/cli)
- [docs](https://github.com/facebook/stylex/blob/main/packages/docs)
- [eslint-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/eslint-plugin)
- [postcss-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/postcss-plugin)
- [rollup-plugin](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/rollup-plugin)
- [scripts](https://github.com/facebook/stylex/blob/main/packages/scripts)
- [shared](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/babel-plugin/shared)
- [style-value-parser](https://github.com/facebook/stylex/blob/main/packages/style-value-parser)
- [stylex](https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex)
### Tasks
First, `yarn install` the yarn workspace.
- `build`
- Use `yarn build` to run the build script in every package.
- Use `yarn workspace <package-name> build` to run the build script for a
specific package.
- `test`
- Use `yarn test` to run tests for every package.
- Use `yarn workspace <package-name> test` to run the test script for a
specific package. More details can be found in the contributing guide below.
## Contributing
Development happens in the open on GitHub and we are grateful for contributions
including bug fixes, improvements, and ideas.
### Code of Conduct
This project expects all participants to adhere to Meta's OSS
[Code of Conduct](https://opensource.fb.com/code-of-conduct/). Please read
the full text so that you can understand what actions will and will not be
tolerated.
### Contributing Guide
Read the
[contributing guide](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)
to learn about our development process, how to propose bug fixes and
improvements, and how to build and test your changes.
### Architectural Principles
Before proposing a change or addition to the StyleX API, you should familiarize
yourself with the
[goals and architectural principles](https://stylexjs.com/docs/learn/thinking-in-stylex/)
of the project.
### License
StyleX is [MIT licensed](./LICENSE).
================================================
FILE: examples/example-bun/.eslintrc.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
module.exports = {
plugins: ['@stylexjs'],
rules: {
'@stylexjs/valid-styles': 'error',
'ft-flow/space-after-type-colon': 0,
'ft-flow/no-types-missing-file-annotation': 0,
'ft-flow/generic-spacing': 0,
},
};
================================================
FILE: examples/example-bun/README.md
================================================
# StyleX with Bun
This example bundles a React app with Bun while compiling StyleX via
`@stylexjs/unplugin`. The unplugin uses its esbuild adapter (Bun’s plugin API is
esbuild-compatible) to compile StyleX at build time, aggregate the generated
styles, and append them to the CSS asset emitted from `src/global.css`.
### Prerequisites
- Bun 1.1+
- `@stylexjs/unplugin`
## Install dependencies
```bash
npm install
```
## Build script (`scripts/build.mjs`)
The production build script wires the unplugin into `Bun.build`:
```js
import stylex from '@stylexjs/unplugin';
await Bun.build({
entrypoints: ['src/main.jsx'],
outdir: 'dist',
metafile: true,
plugins: [
stylex.esbuild({
useCSSLayers: true,
importSources: ['@stylexjs/stylex'],
}),
],
});
```
- `metafile: true` lets the plugin locate CSS assets emitted by Bun.
- `useCSSLayers: true` wraps StyleX output in `@layer` declarations for
predictable specificity.
## CSS entry points
- Production uses `src/global.css` so Bun emits a CSS asset; StyleX appends
aggregated styles during `npm run example:build`.
- Development writes `dist/stylex.dev.css`, which the Bun plugin rewrites on
every StyleX transform so the dev server can hot-reload CSS.
## Dev server integration
The Bun dev server uses `bunfig.toml` with `@stylexjs/unplugin/bun`, which
writes generated StyleX rules into `dist/stylex.dev.css` (marked with
`--stylex-injection`).
`dist/` is generated output and should remain gitignored.
## Commands
```bash
# Production bundle + StyleX CSS extraction
npm run example:build
# Bun dev server with HMR at http://localhost:3000
npm run example:dev
# Serve the generated bundle (run example:build first)
npm run example:start
```
The dev server uses Bun's fullstack mode, bundling `dist/index.dev.html` on
request with `development: true` and the StyleX Bun plugin. Production builds
write `dist/index.html` alongside the bundled assets.
================================================
FILE: examples/example-bun/bunfig.toml
================================================
[serve.static]
plugins = ["@stylexjs/unplugin/bun"]
================================================
FILE: examples/example-bun/package.json
================================================
{
"private": true,
"name": "example-bun",
"version": "0.18.1",
"description": "Example: StyleX with Bun via @stylexjs/unplugin",
"main": "src/App.jsx",
"scripts": {
"example:build": "bun run scripts/build.mjs",
"example:dev": "bun run scripts/dev.mjs",
"example:start": "bun run scripts/start.mjs",
"example:lint": "eslint \"**/*.{js,jsx}\""
},
"license": "MIT",
"dependencies": {
"@stylexjs/stylex": "0.18.1",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@stylexjs/unplugin": "0.18.1",
"@stylexjs/eslint-plugin": "0.18.1",
"eslint": "^8.57.1"
}
}
================================================
FILE: examples/example-bun/scripts/build.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import path from 'path';
import { fileURLToPath } from 'url';
import stylex from '@stylexjs/unplugin';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const entrypoint = path.resolve(__dirname, '..', 'src', 'main.jsx');
const outdir = path.resolve(__dirname, '..', 'dist');
const htmlTemplate = path.resolve(__dirname, '..', 'src', 'index.html');
const htmlOutput = path.resolve(outdir, 'index.html');
async function build() {
const result = await Bun.build({
entrypoints: [entrypoint],
outdir,
target: 'browser',
minify: true,
metafile: true,
plugins: [
stylex.esbuild({
useCSSLayers: true,
importSources: ['@stylexjs/stylex'],
unstable_moduleResolution: {
type: 'commonJS',
rootDir: path.resolve(__dirname, '../../..'),
},
}),
],
});
if (!result.success) {
console.error('Bun build failed.');
for (const message of result.logs) {
console.error(message);
}
process.exit(1);
}
try {
await Bun.write(htmlOutput, await Bun.file(htmlTemplate).text());
} catch (error) {
console.error('Failed to write dist/index.html.');
console.error(error);
process.exit(1);
}
}
build();
================================================
FILE: examples/example-bun/scripts/dev.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import path from 'path';
import { mkdir } from 'fs/promises';
import { fileURLToPath, pathToFileURL } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const distDir = path.resolve(__dirname, '..', 'dist');
const htmlTemplate = path.resolve(__dirname, '..', 'src', 'index.dev.html');
const htmlOutput = path.resolve(distDir, 'index.dev.html');
async function dev() {
await mkdir(distDir, { recursive: true });
await Bun.write(htmlOutput, await Bun.file(htmlTemplate).text());
const homepage = (await import(pathToFileURL(htmlOutput).href)).default;
const port = Number(process.env.PORT) || 3000;
const server = Bun.serve({
port,
development: true,
routes: {
'/': homepage,
},
});
console.log(`Dev server running at http://localhost:${server.port}`);
}
dev();
================================================
FILE: examples/example-bun/scripts/start.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const distDir = path.resolve(__dirname, '..', 'dist');
const port = Number(process.env.PORT) || 3000;
const server = Bun.serve({
port,
async fetch(request) {
const url = new URL(request.url);
const pathname = url.pathname === '/' ? '/index.html' : url.pathname;
const filePath = path.join(distDir, pathname);
const file = Bun.file(filePath);
if (await file.exists()) {
return new Response(file);
}
return new Response('Not found', { status: 404 });
},
});
console.log(`Server running at http://localhost:${server.port}`);
================================================
FILE: examples/example-bun/src/App.jsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import * as React from 'react';
import * as stylex from '@stylexjs/stylex';
import { colors, fonts, sizes } from './globalTokens.stylex';
export default function App() {
return (
<main {...stylex.props(styles.main)}>
<div {...stylex.props(styles.card)}>
<span>StyleX + Bun + unplugin</span>
</div>
</main>
);
}
const styles = stylex.create({
main: {
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.gray0,
},
card: {
backgroundColor: colors.blue9,
padding: sizes.spacing5,
borderRadius: sizes.spacing2,
justifyContent: 'center',
display: 'flex',
alignItems: 'center',
color: colors.gray0,
fontFamily: fonts.mono,
},
});
================================================
FILE: examples/example-bun/src/global.css
================================================
:root {
--stylex-injection: 0;
}
================================================
FILE: examples/example-bun/src/globalTokens.stylex.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import * as stylex from '@stylexjs/stylex';
export const colors = stylex.defineVars({
pink7: '#d6336c',
blue9: '#1864ab',
gray0: '#999',
});
export const fonts = stylex.defineVars({
mono: 'Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace',
});
export const sizes = stylex.defineVars({
spacing5: '1.5rem',
spacing2: '.5rem',
});
================================================
FILE: examples/example-bun/src/index.dev.html
================================================
<!doctype html>
<html>
<head>
<title>@stylexjs/unplugin (bun dev)</title>
<meta charset="utf-8" />
<style>
@layer reset {
body {
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
</style>
<link rel="stylesheet" type="text/css" href="./stylex.dev.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/main.jsx"></script>
</body>
</html>
================================================
FILE: examples/example-bun/src/index.html
================================================
<!doctype html>
<html>
<head>
<title>@stylexjs/unplugin (bun)</title>
<meta charset="utf-8" />
<style>
@layer reset {
body {
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
</style>
<link rel="stylesheet" type="text/css" href="./main.css" />
</head>
<body>
<div id="root"></div>
<script src="./main.js"></script>
</body>
</html>
================================================
FILE: examples/example-bun/src/main.jsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import './global.css';
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App />);
================================================
FILE: examples/example-cli/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# stylex compiled
src
================================================
FILE: examples/example-cli/.stylex.json5
================================================
{
input: ['./source'],
output: ['./src'],
cssBundleName: 'stylex_bundle.css',
babelPresets: [
['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
// '@babel/preset-react',
],
styleXConfig: {
aliases: {
'@/*': ['./source/*'],
},
},
// watch: true,
}
================================================
FILE: examples/example-cli/README.md
================================================
# @stylexjs/cli example using StyleX
TBD
================================================
FILE: examples/example-cli/package.json
================================================
{
"private": true,
"name": "example-cli",
"version": "0.18.1",
"scripts": {
"example:build": "stylex --config .stylex.json5"
},
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@babel/preset-react": "^7.25.7",
"@babel/preset-typescript": "^7.25.7",
"@stylexjs/cli": "0.18.1",
"@types/react": "^19.2.6",
"@types/react-dom": "^19.2.3",
"typescript": "^5.9.3"
}
}
================================================
FILE: examples/example-cli/source/app/CardThemes.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import * as stylex from '@stylexjs/stylex';
import { tokens } from './CardTokens.stylex';
export const minorOffset = stylex.createTheme(tokens, {
arrowTransform: 'translateX(5px)',
});
export const majorOffset = stylex.createTheme(tokens, {
arrowTransform: 'translateX(10px)',
});
export const reset = stylex.createTheme(tokens, {});
================================================
FILE: examples/example-cli/source/app/CardTokens.stylex.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import * as stylex from '@stylexjs/stylex';
export const tokens = stylex.defineVars({
arrowTransform: 'translateX(0)',
});
================================================
FILE: examples/example-cli/source/app/Counter.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use client';
import * as stylex from '@stylexjs/stylex';
import {
spacing,
text,
globalTokens as $,
colors,
} from '@/app/globalTokens.stylex';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div {...stylex.props(styles.container)}>
<button
{...stylex.props(styles.button)}
onClick={() => setCount((c) => c - 1)}
>
-
</button>
<div
{...stylex.props(
styles.count,
Math.abs(count) > 99 && styles.largeNumber,
)}
>
{count}
</div>
<button
{...stylex.props(styles.button)}
onClick={() => setCount((c) => c + 1)}
>
+
</button>
</div>
);
}
const DARK = '@media (prefers-color-scheme: dark)' as const;
const styles = stylex.create({
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
borderRadius: spacing.md,
borderWidth: 1,
borderStyle: 'solid',
borderColor: colors.blue7,
padding: spacing.xxxs,
fontFamily: $.fontSans,
gap: spacing.xs,
},
button: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '6rem',
aspectRatio: 1,
color: colors.blue7,
backgroundColor: {
default: colors.gray3,
':hover': colors.gray4,
[DARK]: {
default: colors.gray9,
':hover': colors.gray8,
},
},
borderWidth: 0,
borderStyle: 'none',
borderRadius: spacing.xs,
padding: spacing.xs,
margin: spacing.xs,
cursor: 'pointer',
fontSize: text.h2,
transform: {
default: null,
':hover': 'scale(1.025)',
':active': 'scale(0.975)',
},
},
count: {
fontSize: text.h2,
fontWeight: 100,
color: colors.lime7,
minWidth: '6rem',
textAlign: 'center',
fontFamily: $.fontMono,
},
largeNumber: {
fontSize: text.h3,
},
});
================================================
FILE: examples/example-cli/source/app/globalTokens.stylex.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import * as stylex from '@stylexjs/stylex';
/**
* o--o o o o o-O-o o-o o--o o-o o o o-O-o o-o
* | | | | | | \ | o o |\ | | |
* O-o | | | | | O O-o | | | \ | | o-o
* | | | | | | / | o o | \| | |
* o O---o o-o o-O-o o-o o o-o o o o o--o
*
* Reference: https://utopia.fyi/type/calculator
*
* The following constants are used to calculate fluid typography.
* Feel free to change these initial numbers to suit your needs.
*
* StyleX can compute all of this at compile time as all the information
* is statically available in the same file and the only functions used are
* the Math.pow and Math.round functions.
*
* NOTE: Any custom functions will not be able to be computed at compile time.
*/
const MIN_WIDTH = 320;
const MAX_WIDTH = 1240;
const MIN_SCALE = 1.2;
const MAX_SCALE = 1.333;
const MIN_BASE_SIZE = 16;
const MAX_BASE_SIZE = 20;
// Font sizes in `rem` units
const MIN_FONT = {
xxs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 3) / 0.16) / 100,
xs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 2) / 0.16) / 100,
sm: Math.round(MIN_BASE_SIZE / MIN_SCALE / 0.16) / 100,
p: Math.round(MIN_BASE_SIZE / 4) / 4,
h5: Math.round((MIN_BASE_SIZE * MIN_SCALE) / 0.16) / 100,
h4: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 2)) / 0.16) / 100,
h3: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 3)) / 0.16) / 100,
h2: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 4)) / 0.16) / 100,
h1: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 5)) / 0.16) / 100,
};
// Font sizes in `rem` units
const MAX_FONT = {
xxs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 3) / 0.16) / 100,
xs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 2) / 0.16) / 100,
sm: Math.round(MAX_BASE_SIZE / MAX_SCALE / 0.16) / 100,
p: Math.round(MAX_BASE_SIZE / 4) / 4,
h5: Math.round((MAX_BASE_SIZE * MAX_SCALE) / 0.16) / 100,
h4: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 2)) / 0.16) / 100,
h3: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 3)) / 0.16) / 100,
h2: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 4)) / 0.16) / 100,
h1: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 5)) / 0.16) / 100,
};
const SLOPE = {
xxs: (16 * (MAX_FONT.xxs - MIN_FONT.xxs)) / (MAX_WIDTH - MIN_WIDTH),
xs: (16 * (MAX_FONT.xs - MIN_FONT.xs)) / (MAX_WIDTH - MIN_WIDTH),
sm: (16 * (MAX_FONT.sm - MIN_FONT.sm)) / (MAX_WIDTH - MIN_WIDTH),
p: (16 * (MAX_FONT.p - MIN_FONT.p)) / (MAX_WIDTH - MIN_WIDTH),
h5: (16 * (MAX_FONT.h5 - MIN_FONT.h5)) / (MAX_WIDTH - MIN_WIDTH),
h4: (16 * (MAX_FONT.h4 - MIN_FONT.h4)) / (MAX_WIDTH - MIN_WIDTH),
h3: (16 * (MAX_FONT.h3 - MIN_FONT.h3)) / (MAX_WIDTH - MIN_WIDTH),
h2: (16 * (MAX_FONT.h2 - MIN_FONT.h2)) / (MAX_WIDTH - MIN_WIDTH),
h1: (16 * (MAX_FONT.h1 - MIN_FONT.h1)) / (MAX_WIDTH - MIN_WIDTH),
};
const INTERCEPT = {
xxs: Math.round(100 * (MIN_FONT.xxs - SLOPE.xxs * (MIN_WIDTH / 16))) / 100,
xs: Math.round(100 * (MIN_FONT.xs - SLOPE.xs * (MIN_WIDTH / 16))) / 100,
sm: Math.round(100 * (MIN_FONT.sm - SLOPE.sm * (MIN_WIDTH / 16))) / 100,
p: Math.round(100 * (MIN_FONT.p - SLOPE.p * (MIN_WIDTH / 16))) / 100,
h5: Math.round(100 * (MIN_FONT.h5 - SLOPE.h5 * (MIN_WIDTH / 16))) / 100,
h4: Math.round(100 * (MIN_FONT.h4 - SLOPE.h4 * (MIN_WIDTH / 16))) / 100,
h3: Math.round(100 * (MIN_FONT.h3 - SLOPE.h3 * (MIN_WIDTH / 16))) / 100,
h2: Math.round(100 * (MIN_FONT.h2 - SLOPE.h2 * (MIN_WIDTH / 16))) / 100,
h1: Math.round(100 * (MIN_FONT.h1 - SLOPE.h1 * (MIN_WIDTH / 16))) / 100,
};
// prettier-ignore
export const text = stylex.defineVars({
xxs: `clamp(${ Math.min(MIN_FONT.xxs) }rem, calc(${ INTERCEPT.xxs }rem + ${ Math.round(10000 * SLOPE.xxs) / 100 }vw), ${ Math.max(MAX_FONT.xxs) }rem)`,
xs: `clamp(${ Math.min(MIN_FONT.xs ) }rem, calc(${ INTERCEPT.xs }rem + ${ Math.round(10000 * SLOPE.xs ) / 100 }vw), ${ Math.max(MAX_FONT.xs ) }rem)`,
sm: `clamp(${ Math.min(MIN_FONT.sm ) }rem, calc(${ INTERCEPT.sm }rem + ${ Math.round(10000 * SLOPE.sm ) / 100 }vw), ${ Math.max(MAX_FONT.sm ) }rem)`,
p: `clamp(${ Math.min(MIN_FONT.p ) }rem, calc(${ INTERCEPT.p }rem + ${ Math.round(10000 * SLOPE.p ) / 100 }vw), ${ Math.max(MAX_FONT.p ) }rem)`,
h5: `clamp(${ Math.min(MIN_FONT.h5 ) }rem, calc(${ INTERCEPT.h5 }rem + ${ Math.round(10000 * SLOPE.h5 ) / 100 }vw), ${ Math.max(MAX_FONT.h5 ) }rem)`,
h4: `clamp(${ Math.min(MIN_FONT.h4 ) }rem, calc(${ INTERCEPT.h4 }rem + ${ Math.round(10000 * SLOPE.h4 ) / 100 }vw), ${ Math.max(MAX_FONT.h4 ) }rem)`,
h3: `clamp(${ Math.min(MIN_FONT.h3 ) }rem, calc(${ INTERCEPT.h3 }rem + ${ Math.round(10000 * SLOPE.h3 ) / 100 }vw), ${ Math.max(MAX_FONT.h3 ) }rem)`,
h2: `clamp(${ Math.min(MIN_FONT.h2 ) }rem, calc(${ INTERCEPT.h2 }rem + ${ Math.round(10000 * SLOPE.h2 ) / 100 }vw), ${ Math.max(MAX_FONT.h2 ) }rem)`,
h1: `clamp(${ Math.min(MIN_FONT.h1 ) }rem, calc(${ INTERCEPT.h1 }rem + ${ Math.round(10000 * SLOPE.h1 ) / 100 }vw), ${ Math.max(MAX_FONT.h1 ) }rem)`,
});
/**
* o--o o o o o-O-o o-o o-o o--o O o-o o--o
* | | | | | | \ | | | / \ / |
* O-o | | | | | O o-o O--o o---oO O-o
* | | | | | | / | | | | \ |
* o O---o o-o o-O-o o-o o--o o o o o-o o--o
*
* Reference: https://utopia.fyi/space/calculator
*
* Similar to the fluid typography, we can create fluid values for spacing.
* Using similar formulas and similar scales.
*
* NOTE: It is common to have more varied needs for spacing than for font-size.
* So feel free to add some more values by following the pattern below.
*
* EXCEPT: We are using `px` instead of `rem`
* ------------------------------------------
* When talking about font-size, it is the best practice to use
* `rem` so that an end user can change the font-size using the
* browser's font-size setting.
*
* However, when talking about spacing, it is the best practice to
* use `px` because using `rems` here makes font-size behave like zoom.
*
* Users that prefer larger text, don't necessarily want larger spacing as well.
*
*/
const MULT = {
xxxs: 0.25,
xxs: 0.5,
xs: 0.75,
sm: 1,
md: 1.5,
lg: 2,
xl: 3,
xxl: 4,
xxxl: 6,
xxxxl: 8,
};
const MIN_SPACE = {
xxxs: MULT.xxxs * MIN_BASE_SIZE,
xxs: MULT.xxs * MIN_BASE_SIZE,
xs: MULT.xs * MIN_BASE_SIZE,
sm: MULT.sm * MIN_BASE_SIZE,
md: MULT.md * MIN_BASE_SIZE,
lg: MULT.lg * MIN_BASE_SIZE,
xl: MULT.xl * MIN_BASE_SIZE,
xxl: MULT.xxl * MIN_BASE_SIZE,
xxxl: MULT.xxxl * MIN_BASE_SIZE,
xxxxl: MULT.xxxxl * MIN_BASE_SIZE,
};
const MAX_SPACE = {
xxxs: MULT.xxxs * MAX_BASE_SIZE,
xxs: MULT.xxs * MAX_BASE_SIZE,
xs: MULT.xs * MAX_BASE_SIZE,
sm: MULT.sm * MAX_BASE_SIZE,
md: MULT.md * MAX_BASE_SIZE,
lg: MULT.lg * MAX_BASE_SIZE,
xl: MULT.xl * MAX_BASE_SIZE,
xxl: MULT.xxl * MAX_BASE_SIZE,
xxxl: MULT.xxxl * MAX_BASE_SIZE,
xxxxl: MULT.xxxxl * MAX_BASE_SIZE,
};
const SLOPE_SPACE = {
xxxs: (MAX_SPACE.xxxs - MIN_SPACE.xxxs) / (MAX_WIDTH - MIN_WIDTH),
xxs: (MAX_SPACE.xxs - MIN_SPACE.xxs) / (MAX_WIDTH - MIN_WIDTH),
xs: (MAX_SPACE.xs - MIN_SPACE.xs) / (MAX_WIDTH - MIN_WIDTH),
sm: (MAX_SPACE.sm - MIN_SPACE.sm) / (MAX_WIDTH - MIN_WIDTH),
md: (MAX_SPACE.md - MIN_SPACE.md) / (MAX_WIDTH - MIN_WIDTH),
lg: (MAX_SPACE.lg - MIN_SPACE.lg) / (MAX_WIDTH - MIN_WIDTH),
xl: (MAX_SPACE.xl - MIN_SPACE.xl) / (MAX_WIDTH - MIN_WIDTH),
xxl: (MAX_SPACE.xxl - MIN_SPACE.xxl) / (MAX_WIDTH - MIN_WIDTH),
xxxl: (MAX_SPACE.xxxl - MIN_SPACE.xxxl) / (MAX_WIDTH - MIN_WIDTH),
xxxxl: (MAX_SPACE.xxxxl - MIN_SPACE.xxxxl) / (MAX_WIDTH - MIN_WIDTH),
};
// rounded to the nearest 0.25px
const INTERCEPT_SPACE = {
xxxs: Math.round(4 * (MIN_SPACE.xxxs - SLOPE_SPACE.xxxs * MIN_WIDTH)) / 4,
xxs: Math.round(4 * (MIN_SPACE.xxs - SLOPE_SPACE.xxs * MIN_WIDTH)) / 4,
xs: Math.round(4 * (MIN_SPACE.xs - SLOPE_SPACE.xs * MIN_WIDTH)) / 4,
sm: Math.round(4 * (MIN_SPACE.sm - SLOPE_SPACE.sm * MIN_WIDTH)) / 4,
md: Math.round(4 * (MIN_SPACE.md - SLOPE_SPACE.md * MIN_WIDTH)) / 4,
lg: Math.round(4 * (MIN_SPACE.lg - SLOPE_SPACE.lg * MIN_WIDTH)) / 4,
xl: Math.round(4 * (MIN_SPACE.xl - SLOPE_SPACE.xl * MIN_WIDTH)) / 4,
xxl: Math.round(4 * (MIN_SPACE.xxl - SLOPE_SPACE.xxl * MIN_WIDTH)) / 4,
xxxl: Math.round(4 * (MIN_SPACE.xxxl - SLOPE_SPACE.xxxl * MIN_WIDTH)) / 4,
xxxxl: Math.round(4 * (MIN_SPACE.xxxxl - SLOPE_SPACE.xxxxl * MIN_WIDTH)) / 4,
};
// prettier-ignore
export const spacing = stylex.defineVars({
xxxs: `clamp(${MIN_SPACE.xxxs }px, calc(${INTERCEPT_SPACE.xxxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxxs ) / 100 }vw), ${MAX_SPACE.xxxs }px)`,
xxs: `clamp(${MIN_SPACE.xxs }px, calc(${INTERCEPT_SPACE.xxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxs ) / 100 }vw), ${MAX_SPACE.xxs }px)`,
xs: `clamp(${MIN_SPACE.xs }px, calc(${INTERCEPT_SPACE.xs }px + ${ Math.round(10000 * SLOPE_SPACE.xs ) / 100 }vw), ${MAX_SPACE.xs }px)`,
sm: `clamp(${MIN_SPACE.sm }px, calc(${INTERCEPT_SPACE.sm }px + ${ Math.round(10000 * SLOPE_SPACE.sm ) / 100 }vw), ${MAX_SPACE.sm }px)`,
md: `clamp(${MIN_SPACE.md }px, calc(${INTERCEPT_SPACE.md }px + ${ Math.round(10000 * SLOPE_SPACE.md ) / 100 }vw), ${MAX_SPACE.md }px)`,
lg: `clamp(${MIN_SPACE.lg }px, calc(${INTERCEPT_SPACE.lg }px + ${ Math.round(10000 * SLOPE_SPACE.lg ) / 100 }vw), ${MAX_SPACE.lg }px)`,
xl: `clamp(${MIN_SPACE.xl }px, calc(${INTERCEPT_SPACE.xl }px + ${ Math.round(10000 * SLOPE_SPACE.xl ) / 100 }vw), ${MAX_SPACE.xl }px)`,
xxl: `clamp(${MIN_SPACE.xxl }px, calc(${INTERCEPT_SPACE.xxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxl ) / 100 }vw), ${MAX_SPACE.xxl }px)`,
xxxl: `clamp(${MIN_SPACE.xxxl }px, calc(${INTERCEPT_SPACE.xxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxl ) / 100 }vw), ${MAX_SPACE.xxxl }px)`,
xxxxl: `clamp(${MIN_SPACE.xxxxl }px, calc(${INTERCEPT_SPACE.xxxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxxl ) / 100 }vw), ${MAX_SPACE.xxxxl }px)`,
});
/**
* Color Tokens
*/
const DARK_MODE = '@media (prefers-color-scheme: dark)';
export const globalTokens = stylex.defineVars({
maxWidth: `${MAX_WIDTH}px`,
fontMono: [
'ui-monospace',
'Menlo',
'Monaco',
'"Cascadia Mono"',
'"Segoe UI Mono"',
'"Roboto Mono"',
'"Oxygen Mono"',
'"Ubuntu Monospace"',
'"Source Code Pro"',
'"Fira Mono"',
'"Droid Sans Mono"',
'"Courier New"',
'monospace',
].join(', '),
fontSans: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
].join(', '),
foregroundR: { default: '0', [DARK_MODE]: '255' },
foregroundG: { default: '0', [DARK_MODE]: '255' },
foregroundB: { default: '0', [DARK_MODE]: '255' },
bgStartRGB: { default: 'rgb(214, 219, 220)', [DARK_MODE]: 'rgb(0, 0, 0)' },
bgEndR: { default: '255', [DARK_MODE]: '0' },
bgEndG: { default: '255', [DARK_MODE]: '0' },
bgEndB: { default: '255', [DARK_MODE]: '0' },
calloutRGB: { default: 'rgb(238, 240, 241)', [DARK_MODE]: 'rgb(20, 20, 20)' },
calloutRGB50: {
default: 'rgba(238, 240, 241, 0.5)',
[DARK_MODE]: 'rgba(20, 20, 20, 0.5)',
},
calloutBorderR: { default: '172', [DARK_MODE]: '108' },
calloutBorderG: { default: '175', [DARK_MODE]: '108' },
calloutBorderB: { default: '176', [DARK_MODE]: '108' },
cardR: { default: '180', [DARK_MODE]: '100' },
cardG: { default: '185', [DARK_MODE]: '100' },
cardB: { default: '188', [DARK_MODE]: '100' },
cardBorderR: { default: '131', [DARK_MODE]: '200' },
cardBorderG: { default: '134', [DARK_MODE]: '200' },
cardBorderB: { default: '135', [DARK_MODE]: '200' },
primaryGlow: {
default: `conic-gradient(${[
'from 180deg at 50% 50%',
'#16abff33 0deg',
'#0885ff33 55deg',
'#54d6ff33 120deg',
'#0071ff33 160deg',
'transparent 360deg',
].join(', ')})`,
[DARK_MODE]: 'radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))',
},
secondaryGlow: {
default: 'radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))',
[DARK_MODE]: `linear-gradient(${[
'to bottom right',
'rgba(1, 65, 255, 0)',
'rgba(1, 65, 255, 0)',
'rgba(1, 65, 255, 0.3)',
].join(', ')})`,
},
});
export const scales = stylex.defineVars({
small: 'scale(0.95)',
medium: 'scale(1)',
large: 'scale(1.2)',
});
export const colors = stylex.defineVars({
blue3: '#74c0fc',
blue7: '#1c7ed6',
gray3: '#dee2e6',
gray4: '#ced4da',
gray8: '#343a40',
gray9: '#212529',
lime7: '#74b816',
});
================================================
FILE: examples/example-cli/source/app/globals.css
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@layer reset {
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
================================================
FILE: examples/example-cli/source/app/layout.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import './globals.css';
import { globalTokens as $ } from './globalTokens.stylex';
import * as stylex from '@stylexjs/stylex';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html {...stylex.props(styles.html, styles.reset)} lang="en">
<body {...stylex.props(styles.reset, styles.body)}>{children}</body>
</html>
);
}
const DARK = '@media (prefers-color-scheme: dark)';
const styles = stylex.create({
html: {
colorScheme: 'light dark',
},
reset: {
minHeight: '100%',
margin: 0,
padding: 0,
},
body: {
color: `rgba(${$.foregroundR}, ${$.foregroundG}, ${$.foregroundB}, 1)`,
backgroundImage: {
default: 'linear-gradient(to bottom, rgb(214, 219, 220), white)',
[DARK]: 'linear-gradient(to bottom, rgb(20, 22, 27), black)',
},
},
});
================================================
FILE: examples/example-cli/source/app/page.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import React from 'react';
import * as stylex from '@stylexjs/stylex';
import Card from '../components/Card';
import {
globalTokens as $,
spacing,
text,
scales,
} from './globalTokens.stylex';
import Counter from './Counter';
const HOMEPAGE = 'https://stylexjs.com';
export default function Home() {
return (
<main {...stylex.props(style.main)}>
<div {...stylex.props(style.description)}>
<p {...stylex.props(style.descP)}>
Get started by editing
<code {...stylex.props(style.code)}>app/page.tsx</code>
</p>
</div>
<div {...stylex.props(style.hero)}>
<h1 {...stylex.props(style.h1)}>
Next.js App Dir<span {...stylex.props(style.emoji)}>♥️</span>️StyleX
</h1>
<Counter />
</div>
<div {...stylex.props(style.grid)}>
<Card
body="Learn how to use StyleX to build UIs"
href={`${HOMEPAGE}/docs/learn/`}
title="Docs"
/>
<Card
body="Browse through the StyleX API reference"
href={`${HOMEPAGE}/docs/api/`}
title="API"
/>
<Card
body="Play with StyleX and look at the compile outputs"
href={`${HOMEPAGE}/playground/`}
title="Playground"
/>
<Card
body="Get started with a NextJS+StyleX project"
href="https://github.com/nmn/nextjs-app-dir-stylex"
title="Templates"
/>
</div>
</main>
);
}
const MEDIA_MOBILE = '@media (max-width: 700px)' as const;
const MEDIA_TABLET =
'@media (min-width: 701px) and (max-width: 1120px)' as const;
const beat = stylex.keyframes({
'0%': { transform: scales.medium },
'10%': { transform: scales.large },
'20%': { transform: scales.medium },
'30%': { transform: scales.large },
'40%': { transform: scales.medium },
'90%': { transform: scales.small },
'100%': { transform: scales.medium },
});
const style = stylex.create({
main: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-between',
minHeight: '100vh',
paddingTop: spacing.xxl,
paddingBottom: {
default: spacing.xxl,
[MEDIA_MOBILE]: spacing.md,
},
},
hero: {
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: spacing.xl,
},
h1: {
fontSize: text.h1,
lineHeight: 1,
fontFamily: $.fontSans,
fontWeight: 400,
textAlign: 'center',
display: 'flex',
gap: spacing.md,
whiteSpace: 'nowrap',
flexDirection: {
default: 'row',
[MEDIA_MOBILE]: 'column',
},
},
emoji: {
position: 'relative',
fontFamily: 'sans-serif',
top: {
default: 0,
[MEDIA_MOBILE]: spacing.xxxs,
},
animationName: beat,
animationDuration: '2s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
},
description: {
display: 'inherit',
justifyContent: 'inherit',
alignItems: 'inherit',
fontSize: text.sm,
maxWidth: $.maxWidth,
width: '100%',
zIndex: 2,
fontFamily: $.fontMono,
},
descLink: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: spacing.xxs,
padding: { [MEDIA_MOBILE]: spacing.sm },
},
descP: {
display: { [MEDIA_MOBILE]: 'flex' },
position: {
default: 'relative',
[MEDIA_MOBILE]: 'fixed',
},
justifyContent: { [MEDIA_MOBILE]: 'center' },
alignItems: { [MEDIA_MOBILE]: 'center' },
width: { [MEDIA_MOBILE]: '100%' },
margin: 0,
paddingInline: spacing.sm,
paddingTop: {
default: spacing.sm,
[MEDIA_MOBILE]: spacing.lg,
},
paddingBottom: {
default: spacing.sm,
[MEDIA_MOBILE]: spacing.md,
},
backgroundColor: $.calloutRGB50,
backgroundImage: {
default: null,
[MEDIA_MOBILE]: `linear-gradient(to bottom, ${$.bgStartRGB}, ${$.calloutRGB50})`,
},
borderWidth: {
default: '1px',
[MEDIA_MOBILE]: '0',
},
borderStyle: 'solid',
borderColor: `rgba(${$.calloutBorderR}, ${$.calloutBorderG}, ${$.calloutBorderB}, 0.3)`,
borderBottomColor: {
default: null,
[MEDIA_MOBILE]: `rgba(${$.calloutBorderR}, ${$.calloutBorderG}, ${$.calloutBorderB}, 0.25)`,
},
borderRadius: {
default: spacing.xs,
[MEDIA_MOBILE]: 0,
},
inset: { [MEDIA_MOBILE]: '0 0 auto' },
},
code: {
fontWeight: 700,
fontFamily: $.fontMono,
},
grid: {
display: 'grid',
gridTemplateColumns: {
default: 'repeat(4, minmax(25%, auto))',
[MEDIA_MOBILE]: '1fr',
[MEDIA_TABLET]: 'repeat(2, 50%)',
},
width: $.maxWidth,
maxWidth: {
default: '100%',
[MEDIA_MOBILE]: 320,
},
textAlign: { [MEDIA_MOBILE]: 'center' },
},
});
================================================
FILE: examples/example-cli/source/components/Card.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import * as stylex from '@stylexjs/stylex';
import {
globalTokens as $,
spacing,
text,
colors,
} from '../app/globalTokens.stylex';
import { tokens } from '../app/CardTokens.stylex';
type Props = Readonly<{
title: string;
body: string;
href: string;
}>;
export default function Card({ title, body, href }: Props) {
return (
<a
{...stylex.props(styles.link)}
href={href}
rel="noopener noreferrer"
target="_blank"
>
<h2 {...stylex.props(styles.h2)}>
{title} <span {...stylex.props(styles.span)}>→</span>
</h2>
<p {...stylex.props(styles.p)}>{body}</p>
</a>
);
}
type TMobile = '@media (max-width: 700px)';
const MOBILE: TMobile = '@media (max-width: 700px)' as TMobile;
const REDUCE_MOTION = '@media (prefers-reduced-motion: reduce)' as const;
const bgDefault = `rgba(${$.cardR}, ${$.cardG}, ${$.cardB}, 0)` as const;
const styles = stylex.create({
link: {
display: {
default: 'flex',
[MOBILE]: 'block',
},
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'column',
borderRadius: spacing.xs,
backgroundColor: {
default: bgDefault,
':hover': `rgba(${$.cardR}, ${$.cardG}, ${$.cardB}, 0.1)`,
},
borderWidth: 1,
borderStyle: 'solid',
borderColor: {
default: `rgba(${$.cardBorderR}, ${$.cardBorderG}, ${$.cardBorderB}, 0)`,
':hover': `rgba(${$.cardBorderR}, ${$.cardBorderG}, ${$.cardBorderB}, 0.1)`,
},
color: 'inherit',
fontFamily: $.fontSans,
padding: spacing.sm,
transitionProperty: 'background-color, border-color',
transitionDuration: '400ms',
textAlign: 'center',
textDecoration: 'none',
[tokens.arrowTransform]: {
default: 'translateX(0)',
':hover': 'translateX(4px)',
},
},
h2: {
color: colors.blue3,
fontSize: text.h4,
fontWeight: 600,
marginBottom: {
default: spacing.xs,
[MOBILE]: spacing.xxs,
},
},
span: {
display: 'inline-block',
transitionProperty: 'transform',
transform: tokens.arrowTransform,
transitionDuration: {
default: '200ms',
[REDUCE_MOTION]: '0s',
},
},
p: {
margin: 0,
opacity: 0.6,
fontSize: text.p,
textWrap: 'balance',
lineHeight: 1.5,
maxWidth: '30ch',
},
color: (color: string) => ({ color }),
width: (width: string) => ({ width }),
});
================================================
FILE: examples/example-cli/tsconfig.json
================================================
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [],
"paths": {
"@/*": ["./source/*"]
}
},
"exclude": ["node_modules"]
}
================================================
FILE: examples/example-esbuild/.eslintrc.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
module.exports = {
plugins: ['@stylexjs'],
rules: {
'@stylexjs/valid-styles': 'error',
'ft-flow/space-after-type-colon': 0,
'ft-flow/no-types-missing-file-annotation': 0,
'ft-flow/generic-spacing': 0,
},
};
================================================
FILE: examples/example-esbuild/README.md
================================================
# StyleX with esbuild
This example bundles a React app with esbuild while compiling StyleX via
`@stylexjs/unplugin`. The plugin extracts StyleX styles at build time,
aggregates them, and appends the result to an existing CSS file produced by
esbuild.
### Prerequisites
- Node.js 18+
- [`esbuild`](https://esbuild.github.io/) (installed locally)
- `@stylexjs/unplugin`
## Install dependencies
```bash
npm install
```
## Build script (`scripts/build.mjs`)
The build script wires the unplugin into esbuild:
```js
import stylex from '@stylexjs/unplugin';
esbuild.build({
entryPoints: ['src/App.jsx'],
bundle: true,
metafile: true,
plugins: [
stylex.esbuild({
useCSSLayers: true,
importSources: ['@stylexjs/stylex'],
unstable_moduleResolution: { type: 'commonJS' },
}),
],
});
```
- `metafile: true` lets the plugin locate CSS assets emitted by esbuild.
- `useCSSLayers: true` ensures the generated StyleX output is wrapped in CSS
`@layer` declarations which enforces specificity. StyleX will use a polyfill
based on ID selectors if omitted.
## CSS entry point (`src/global.css`)
The project imports `src/global.css` so esbuild emits a CSS asset. The StyleX
plugin appends the aggregated styles to that file during
`npm run example:build`.
## Commands
```bash
# Production bundle + CSS extraction
npm run example:build
```
Use `npm run example:build` whenever you need a fresh `public/dist` folder
containing both the JS bundle and the StyleX-enriched CSS.
================================================
FILE: examples/example-esbuild/package.json
================================================
{
"private": true,
"name": "example-esbuild",
"version": "0.18.1",
"description": "Simple esbuild example for @stylexjs/unplugin",
"main": "src/App.jsx",
"scripts": {
"example:build": "node scripts/build.mjs",
"example:lint": "eslint \"**/*.{js,jsx}\""
},
"license": "MIT",
"dependencies": {
"@stylexjs/stylex": "0.18.1",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@stylexjs/unplugin": "0.18.1",
"@stylexjs/eslint-plugin": "0.18.1",
"esbuild": "^0.27.0",
"eslint": "^8.57.1"
}
}
================================================
FILE: examples/example-esbuild/public/index.html
================================================
<!doctype html>
<html>
<head>
<title>@stylexjs/unplugin (esbuild)</title>
<meta charset="utf-8" />
<style>
@layer reset {
body {
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
</style>
<link rel="stylesheet" type="text/css" href="./dist/bundle.css" />
</head>
<body>
<div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
================================================
FILE: examples/example-esbuild/scripts/build.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import path from 'path';
import { fileURLToPath } from 'url';
import esbuild from 'esbuild';
import stylex from '@stylexjs/unplugin';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const BUILD_DIR_NAME = 'public/dist';
const OUTFILE = `${BUILD_DIR_NAME}/bundle.js`;
esbuild
.build({
entryPoints: [path.resolve(__dirname, '..', 'src/App.jsx')],
bundle: true,
outfile: OUTFILE,
minify: true,
metafile: true, // lets the plugin find CSS outputs, if any
plugins: [
// See all options in the babel plugin configuration docs:
// https://stylexjs.com/docs/api/configuration/babel-plugin/
stylex.esbuild({
useCSSLayers: true,
importSources: ['@stylexjs/stylex'],
unstable_moduleResolution: {
type: 'commonJS',
rootDir: path.resolve(__dirname, '../../..'),
},
}),
],
})
.catch(() => process.exit(1));
================================================
FILE: examples/example-esbuild/src/App.jsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
'use strict';
import './global.css';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import * as stylex from '@stylexjs/stylex';
import { colors, fonts, sizes } from './globalTokens.stylex';
const styles = stylex.create({
main: {
width: '100vw',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.pink7,
},
card: {
backgroundColor: colors.blue9,
padding: sizes.spacing5,
borderRadius: sizes.spacing2,
justifyContent: 'center',
display: 'flex',
alignItems: 'center',
color: colors.gray0,
fontFamily: fonts.mono,
},
});
function App() {
return (
<div {...stylex.props(styles.main)}>
<div {...stylex.props(styles.card)}>
<span>Blue rounded rectangle</span>
</div>
</div>
);
}
createRoot(document.getElementById('root')).render(<App />);
================================================
FILE: examples/example-esbuild/src/global.css
================================================
:root { --stylex-injection: 0; }
================================================
FILE: examples/example-esbuild/src/globalTokens.stylex.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import * as stylex from '@stylexjs/stylex';
export const colors = stylex.defineVars({
pink7: '#d6336c',
blue9: '#1864ab',
gray0: '#f8f9fa',
});
export const fonts = stylex.defineVars({
mono: 'Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace',
});
export const sizes = stylex.defineVars({
spacing5: '1.5rem',
spacing2: '.5rem',
});
================================================
FILE: examples/example-nextjs/.eslintrc.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
module.exports = {
plugins: ['@stylexjs'],
rules: {
// The Eslint rule still needs work, but you can
// enable it to test things out.
'@stylexjs/valid-styles': 'error',
'ft-flow/space-after-type-colon': 0,
'ft-flow/no-types-missing-file-annotation': 0,
'ft-flow/generic-spacing': 0,
},
};
================================================
FILE: examples/example-nextjs/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
================================================
FILE: examples/example-nextjs/README.md
================================================
# Next.js example using StyleX
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) which then uses
the StyleX Babel and PostCSS plugins to compile StyleX.
## Getting Started
First, run the development server:
```bash
npm run example:dev
# or
yarn example:dev
# or
pnpm example:dev
# or
bun example:dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Setup
Enabling StyleX compilation involves three steps:
### Define the `babel.config.js` file
```tsx
const path = require('path');
const dev = process.env.NODE_ENV !== 'production';
module.exports = {
presets: ['next/babel'],
plugins: [
[
'@stylexjs/babel-plugin',
// See all options in the babel plugin configuration docs:
// https://stylexjs.com/docs/api/configuration/babel-plugin/
{
dev,
runtimeInjection: false,
enableInlinedConditionalMerge: true,
treeshakeCompensation: true,
aliases: {
'@/*': [path.join(__dirname, '*')],
},
unstable_moduleResolution: {
type: 'commonJS',
},
},
],
],
};
```
Ensure that the `next/babel` preset is used as well as the `@stylexjs/babel-plugin` with your configuration.
It is preferable to use a JS/TS file for this config to help in the next part...
### Define the `postcss.config.js`
```tsx
const babelConfig = require('./babel.config');
module.exports = {
plugins: {
'@stylexjs/postcss-plugin': {
include: ['app/**/*.{js,jsx,ts,tsx}', 'components/**/*.{js,jsx,ts,tsx}'],
babelConfig: {
babelrc: false,
parserOpts: {
plugins: ['typescript', 'jsx'],
},
plugins: babelConfig.plugins,
},
useCSSLayers: true,
},
autoprefixer: {},
},
};
```
Here, the `@stylexjs/postcss-plugin` must be used and configured. The `include` property takes a list of glob patterns
to find all the files where styles should be extracted.
`babelConfig` should be configured with at least the same StyleX Babel plugin as in your Babel config. It is important
to ensure that your Babel config file and your PostCSS config are configured with the same options, so it's usually
best to import your Babel config from your PostCSS config to share it.
### Ensure a CSS file is imported by every route of your app
It's usually best to do this by global layout. The CSS file *must* contain the `@stylex` directive.
```css
/**
* Any reset styles
*/
@layer resets {
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
/**
* The @stylex directive is used by the @stylexjs/postcss-plugin.
* It is automatically replaced with generated CSS during builds.
*/
@stylex;
```
---
Once these two files are defines, Next.js will automatically use Babel to transform your JS file with the StyleX plugin
and the PostCSS plugin will be used to generate your final CSS file
================================================
FILE: examples/example-nextjs/app/InteractiveCard.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
'use client';
import * as stylex from '@stylexjs/stylex';
import {
spacing,
text,
globalTokens as $,
colors,
} from './globalTokens.stylex';
import { useState } from 'react';
export const redTheme = stylex.createTheme(colors, {
accent: '#e03131',
accentLight: 'rgba(224, 49, 49, 0.08)',
accentFaded: 'rgba(224, 49, 49, 0.19)',
});
export const greenTheme = stylex.createTheme(colors, {
accent: '#2f9e44',
accentLight: 'rgba(47, 158, 68, 0.08)',
accentFaded: 'rgba(47, 158, 68, 0.19)',
});
export const blueTheme = stylex.createTheme(colors, {
accent: '#1c7ed6',
accentLight: 'rgba(28, 126, 214, 0.08)',
accentFaded: 'rgba(28, 126, 214, 0.19)',
});
export const THEMES = [
{ name: 'Red', theme: redTheme },
{ name: 'Green', theme: greenTheme },
{ name: 'Blue', theme: blueTheme },
] as const;
type Props = Readonly<{
themeIndex: number;
onThemeChange: (_index: number) => void;
isDark: boolean;
onDarkModeChange: (_isDark: boolean) => void;
}>;
export default function InteractiveCard({
themeIndex,
onThemeChange,
isDark,
onDarkModeChange,
}: Props) {
const [count, setCount] = useState(0);
return (
<div {...stylex.props(styles.card)}>
<div {...stylex.props(styles.label)}>Theme</div>
<div {...stylex.props(styles.themeRow)}>
{THEMES.map((t, i) => (
<button
key={t.name}
{...stylex.props(
styles.themeButton,
i === themeIndex && styles.themeButtonActive,
)}
onClick={() => onThemeChange(i)}
>
<span {...stylex.props(t.theme, styles.dot)} />
{t.name}
</button>
))}
</div>
<div {...stylex.props(styles.divider)} />
<div {...stylex.props(styles.label)}>Mode</div>
<div {...stylex.props(styles.themeRow)}>
<button
{...stylex.props(
styles.themeButton,
!isDark && styles.themeButtonActive,
)}
onClick={() => onDarkModeChange(false)}
>
Light
</button>
<button
{...stylex.props(
styles.themeButton,
isDark && styles.themeButtonActive,
)}
onClick={() => onDarkModeChange(true)}
>
Dark
</button>
</div>
<div {...stylex.props(styles.divider)} />
<div {...stylex.props(styles.label)}>Counter</div>
<div {...stylex.props(styles.counterRow)}>
<button
{...stylex.props(styles.counterButton)}
onClick={() => setCount((c) => c - 1)}
>
-
</button>
<div
{...stylex.props(
styles.count,
Math.abs(count) > 99 && styles.largeNumber,
)}
>
{count}
</div>
<button
{...stylex.props(styles.counterButton)}
onClick={() => setCount((c) => c + 1)}
>
+
</button>
</div>
</div>
);
}
const DARK = '@media (prefers-color-scheme: dark)' as const;
const styles = stylex.create({
card: {
display: 'flex',
flexDirection: 'column',
gap: spacing.sm,
padding: spacing.lg,
borderRadius: spacing.md,
borderWidth: 2,
borderStyle: 'solid',
borderColor: colors.accent,
backgroundColor: $.surfaceCard,
boxShadow: $.surfaceCardShadow,
fontFamily: $.fontSans,
width: '100%',
maxWidth: 400,
transitionProperty: 'border-color, box-shadow',
transitionDuration: '300ms',
},
label: {
fontSize: text.xs,
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '0.05em',
color: colors.accent,
transitionProperty: 'color',
transitionDuration: '300ms',
},
themeRow: {
display: 'flex',
justifyContent: 'center',
gap: spacing.xs,
},
themeButton: {
display: 'flex',
alignItems: 'center',
gap: spacing.xxs,
paddingInline: spacing.sm,
paddingBlock: spacing.xs,
borderRadius: spacing.xs,
borderWidth: 1,
borderStyle: 'solid',
borderColor: {
default: colors.gray3,
[DARK]: colors.gray8,
},
backgroundColor: {
default: 'transparent',
':hover': {
default: colors.gray2,
[DARK]: colors.gray9,
},
},
color: 'inherit',
cursor: 'pointer',
fontSize: text.sm,
fontFamily: $.fontSans,
transitionProperty: 'background-color, border-color',
transitionDuration: '200ms',
},
themeButtonActive: {
fontWeight: 600,
borderColor: colors.accent,
backgroundColor: colors.accentLight,
},
dot: {
width: 10,
height: 10,
borderRadius: '50%',
flexShrink: 0,
backgroundColor: colors.accent,
},
divider: {
height: 2,
marginBlock: spacing.xxs,
borderRadius: 1,
backgroundColor: colors.accentFaded,
transitionProperty: 'background-color',
transitionDuration: '300ms',
},
counterRow: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: spacing.md,
},
counterButton: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 48,
height: 48,
borderRadius: spacing.xs,
borderWidth: 1,
borderStyle: 'solid',
borderColor: colors.accent,
color: colors.accent,
backgroundColor: {
default: 'transparent',
':hover': {
default: colors.gray2,
[DARK]: colors.gray9,
},
},
cursor: 'pointer',
fontSize: text.h4,
fontWeight: 300,
fontFamily: $.fontSans,
transitionProperty: 'background-color, transform, color, border-color',
transitionDuration: '200ms',
transform: {
default: null,
':active': 'scale(0.95)',
},
},
count: {
fontSize: text.h2,
fontWeight: 200,
minWidth: 80,
textAlign: 'center',
fontFamily: $.fontMono,
color: colors.accent,
transitionProperty: 'color',
transitionDuration: '300ms',
},
largeNumber: {
fontSize: text.h3,
},
});
================================================
FILE: examples/example-nextjs/app/app.css
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
@layer resets {
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/**
* The @stylex directive is used by the @stylexjs/postcss-plugin.
* It is automatically replaced with generated CSS during builds.
*/
@stylex;
================================================
FILE: examples/example-nextjs/app/darkMode.stylex.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import * as stylex from '@stylexjs/stylex';
import { globalTokens } from './globalTokens.stylex';
export const darkTheme = stylex.createTheme(globalTokens, {
foregroundR: '255',
foregroundG: '255',
foregroundB: '255',
bgStartRGB: 'rgb(0, 0, 0)',
bgEndR: '0',
bgEndG: '0',
bgEndB: '0',
calloutRGB: 'rgb(20, 20, 20)',
calloutRGB50: 'rgba(20, 20, 20, 0.5)',
calloutBorderR: '108',
calloutBorderG: '108',
calloutBorderB: '108',
cardR: '100',
cardG: '100',
cardB: '100',
cardBorderR: '200',
cardBorderG: '200',
cardBorderB: '200',
primaryGlow: 'radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))',
secondaryGlow: `linear-gradient(${[
'to bottom right',
'rgba(1, 65, 255, 0)',
'rgba(1, 65, 255, 0)',
'rgba(1, 65, 255, 0.3)',
].join(', ')})`,
surfaceBg: '#0f1117',
surfaceCard: '#1a1b26',
surfaceCardShadow: '0 4px 24px rgba(0,0,0,0.3)',
surfaceHover: 'rgba(255,255,255,0.04)',
});
export const lightTheme = stylex.createTheme(globalTokens, {
foregroundR: '0',
foregroundG: '0',
foregroundB: '0',
bgStartRGB: 'rgb(214, 219, 220)',
bgEndR: '255',
bgEndG: '255',
bgEndB: '255',
calloutRGB: 'rgb(238, 240, 241)',
calloutRGB50: 'rgba(238, 240, 241, 0.5)',
calloutBorderR: '172',
calloutBorderG: '175',
calloutBorderB: '176',
cardR: '180',
cardG: '185',
cardB: '188',
cardBorderR: '131',
cardBorderG: '134',
cardBorderB: '135',
primaryGlow: `conic-gradient(${[
'from 180deg at 50% 50%',
'#16abff33 0deg',
'#0885ff33 55deg',
'#54d6ff33 120deg',
'#0071ff33 160deg',
'transparent 360deg',
].join(', ')})`,
secondaryGlow:
'radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))',
surfaceBg: '#fafafa',
surfaceCard: 'white',
surfaceCardShadow: '0 4px 24px rgba(0,0,0,0.06)',
surfaceHover: 'rgba(0,0,0,0.02)',
});
================================================
FILE: examples/example-nextjs/app/globalTokens.stylex.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import * as stylex from '@stylexjs/stylex';
/**
* o--o o o o o-O-o o-o o--o o-o o o o-O-o o-o
* | | | | | | \ | o o |\ | | |
* O-o | | | | | O O-o | | | \ | | o-o
* | | | | | | / | o o | \| | |
* o O---o o-o o-O-o o-o o o-o o o o o--o
*
* Reference: https://utopia.fyi/type/calculator
*
* The following constants are used to calculate fluid typography.
* Feel free to change these initial numbers to suit your needs.
*
* StyleX can compute all of this at compile time as all the information
* is statically available in the same file and the only functions used are
* the Math.pow and Math.round functions.
*
* NOTE: Any custom functions will not be able to be computed at compile time.
*/
const MIN_WIDTH = 320;
const MAX_WIDTH = 1240;
const MIN_SCALE = 1.2;
const MAX_SCALE = 1.333;
const MIN_BASE_SIZE = 16;
const MAX_BASE_SIZE = 20;
// Font sizes in `rem` units
const MIN_FONT = {
xxs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 3) / 0.16) / 100,
xs: Math.round(MIN_BASE_SIZE / Math.pow(MIN_SCALE, 2) / 0.16) / 100,
sm: Math.round(MIN_BASE_SIZE / MIN_SCALE / 0.16) / 100,
p: Math.round(MIN_BASE_SIZE / 4) / 4,
h5: Math.round((MIN_BASE_SIZE * MIN_SCALE) / 0.16) / 100,
h4: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 2)) / 0.16) / 100,
h3: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 3)) / 0.16) / 100,
h2: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 4)) / 0.16) / 100,
h1: Math.round((MIN_BASE_SIZE * Math.pow(MIN_SCALE, 5)) / 0.16) / 100,
};
// Font sizes in `rem` units
const MAX_FONT = {
xxs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 3) / 0.16) / 100,
xs: Math.round(MAX_BASE_SIZE / Math.pow(MAX_SCALE, 2) / 0.16) / 100,
sm: Math.round(MAX_BASE_SIZE / MAX_SCALE / 0.16) / 100,
p: Math.round(MAX_BASE_SIZE / 4) / 4,
h5: Math.round((MAX_BASE_SIZE * MAX_SCALE) / 0.16) / 100,
h4: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 2)) / 0.16) / 100,
h3: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 3)) / 0.16) / 100,
h2: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 4)) / 0.16) / 100,
h1: Math.round((MAX_BASE_SIZE * Math.pow(MAX_SCALE, 5)) / 0.16) / 100,
};
const SLOPE = {
xxs: (16 * (MAX_FONT.xxs - MIN_FONT.xxs)) / (MAX_WIDTH - MIN_WIDTH),
xs: (16 * (MAX_FONT.xs - MIN_FONT.xs)) / (MAX_WIDTH - MIN_WIDTH),
sm: (16 * (MAX_FONT.sm - MIN_FONT.sm)) / (MAX_WIDTH - MIN_WIDTH),
p: (16 * (MAX_FONT.p - MIN_FONT.p)) / (MAX_WIDTH - MIN_WIDTH),
h5: (16 * (MAX_FONT.h5 - MIN_FONT.h5)) / (MAX_WIDTH - MIN_WIDTH),
h4: (16 * (MAX_FONT.h4 - MIN_FONT.h4)) / (MAX_WIDTH - MIN_WIDTH),
h3: (16 * (MAX_FONT.h3 - MIN_FONT.h3)) / (MAX_WIDTH - MIN_WIDTH),
h2: (16 * (MAX_FONT.h2 - MIN_FONT.h2)) / (MAX_WIDTH - MIN_WIDTH),
h1: (16 * (MAX_FONT.h1 - MIN_FONT.h1)) / (MAX_WIDTH - MIN_WIDTH),
};
const INTERCEPT = {
xxs: Math.round(100 * (MIN_FONT.xxs - SLOPE.xxs * (MIN_WIDTH / 16))) / 100,
xs: Math.round(100 * (MIN_FONT.xs - SLOPE.xs * (MIN_WIDTH / 16))) / 100,
sm: Math.round(100 * (MIN_FONT.sm - SLOPE.sm * (MIN_WIDTH / 16))) / 100,
p: Math.round(100 * (MIN_FONT.p - SLOPE.p * (MIN_WIDTH / 16))) / 100,
h5: Math.round(100 * (MIN_FONT.h5 - SLOPE.h5 * (MIN_WIDTH / 16))) / 100,
h4: Math.round(100 * (MIN_FONT.h4 - SLOPE.h4 * (MIN_WIDTH / 16))) / 100,
h3: Math.round(100 * (MIN_FONT.h3 - SLOPE.h3 * (MIN_WIDTH / 16))) / 100,
h2: Math.round(100 * (MIN_FONT.h2 - SLOPE.h2 * (MIN_WIDTH / 16))) / 100,
h1: Math.round(100 * (MIN_FONT.h1 - SLOPE.h1 * (MIN_WIDTH / 16))) / 100,
};
// prettier-ignore
export const text = stylex.defineVars({
xxs: `clamp(${ Math.min(MIN_FONT.xxs) }rem, calc(${ INTERCEPT.xxs }rem + ${ Math.round(10000 * SLOPE.xxs) / 100 }vw), ${ Math.max(MAX_FONT.xxs) }rem)`,
xs: `clamp(${ Math.min(MIN_FONT.xs ) }rem, calc(${ INTERCEPT.xs }rem + ${ Math.round(10000 * SLOPE.xs ) / 100 }vw), ${ Math.max(MAX_FONT.xs ) }rem)`,
sm: `clamp(${ Math.min(MIN_FONT.sm ) }rem, calc(${ INTERCEPT.sm }rem + ${ Math.round(10000 * SLOPE.sm ) / 100 }vw), ${ Math.max(MAX_FONT.sm ) }rem)`,
p: `clamp(${ Math.min(MIN_FONT.p ) }rem, calc(${ INTERCEPT.p }rem + ${ Math.round(10000 * SLOPE.p ) / 100 }vw), ${ Math.max(MAX_FONT.p ) }rem)`,
h5: `clamp(${ Math.min(MIN_FONT.h5 ) }rem, calc(${ INTERCEPT.h5 }rem + ${ Math.round(10000 * SLOPE.h5 ) / 100 }vw), ${ Math.max(MAX_FONT.h5 ) }rem)`,
h4: `clamp(${ Math.min(MIN_FONT.h4 ) }rem, calc(${ INTERCEPT.h4 }rem + ${ Math.round(10000 * SLOPE.h4 ) / 100 }vw), ${ Math.max(MAX_FONT.h4 ) }rem)`,
h3: `clamp(${ Math.min(MIN_FONT.h3 ) }rem, calc(${ INTERCEPT.h3 }rem + ${ Math.round(10000 * SLOPE.h3 ) / 100 }vw), ${ Math.max(MAX_FONT.h3 ) }rem)`,
h2: `clamp(${ Math.min(MIN_FONT.h2 ) }rem, calc(${ INTERCEPT.h2 }rem + ${ Math.round(10000 * SLOPE.h2 ) / 100 }vw), ${ Math.max(MAX_FONT.h2 ) }rem)`,
h1: `clamp(${ Math.min(MIN_FONT.h1 ) }rem, calc(${ INTERCEPT.h1 }rem + ${ Math.round(10000 * SLOPE.h1 ) / 100 }vw), ${ Math.max(MAX_FONT.h1 ) }rem)`,
});
/**
* o--o o o o o-O-o o-o o-o o--o O o-o o--o
* | | | | | | \ | | | / \ / |
* O-o | | | | | O o-o O--o o---oO O-o
* | | | | | | / | | | | \ |
* o O---o o-o o-O-o o-o o--o o o o o-o o--o
*
* Reference: https://utopia.fyi/space/calculator
*
* Similar to the fluid typography, we can create fluid values for spacing.
* Using similar formulas and similar scales.
*
* NOTE: It is common to have more varied needs for spacing than for font-size.
* So feel free to add some more values by following the pattern below.
*
* EXCEPT: We are using `px` instead of `rem`
* ------------------------------------------
* When talking about font-size, it is the best practice to use
* `rem` so that an end user can change the font-size using the
* browser's font-size setting.
*
* However, when talking about spacing, it is the best practice to
* use `px` because using `rems` here makes font-size behave like zoom.
*
* Users that prefer larger text, don't necessarily want larger spacing as well.
*
*/
const MULT = {
xxxs: 0.25,
xxs: 0.5,
xs: 0.75,
sm: 1,
md: 1.5,
lg: 2,
xl: 3,
xxl: 4,
xxxl: 6,
xxxxl: 8,
};
const MIN_SPACE = {
xxxs: MULT.xxxs * MIN_BASE_SIZE,
xxs: MULT.xxs * MIN_BASE_SIZE,
xs: MULT.xs * MIN_BASE_SIZE,
sm: MULT.sm * MIN_BASE_SIZE,
md: MULT.md * MIN_BASE_SIZE,
lg: MULT.lg * MIN_BASE_SIZE,
xl: MULT.xl * MIN_BASE_SIZE,
xxl: MULT.xxl * MIN_BASE_SIZE,
xxxl: MULT.xxxl * MIN_BASE_SIZE,
xxxxl: MULT.xxxxl * MIN_BASE_SIZE,
};
const MAX_SPACE = {
xxxs: MULT.xxxs * MAX_BASE_SIZE,
xxs: MULT.xxs * MAX_BASE_SIZE,
xs: MULT.xs * MAX_BASE_SIZE,
sm: MULT.sm * MAX_BASE_SIZE,
md: MULT.md * MAX_BASE_SIZE,
lg: MULT.lg * MAX_BASE_SIZE,
xl: MULT.xl * MAX_BASE_SIZE,
xxl: MULT.xxl * MAX_BASE_SIZE,
xxxl: MULT.xxxl * MAX_BASE_SIZE,
xxxxl: MULT.xxxxl * MAX_BASE_SIZE,
};
const SLOPE_SPACE = {
xxxs: (MAX_SPACE.xxxs - MIN_SPACE.xxxs) / (MAX_WIDTH - MIN_WIDTH),
xxs: (MAX_SPACE.xxs - MIN_SPACE.xxs) / (MAX_WIDTH - MIN_WIDTH),
xs: (MAX_SPACE.xs - MIN_SPACE.xs) / (MAX_WIDTH - MIN_WIDTH),
sm: (MAX_SPACE.sm - MIN_SPACE.sm) / (MAX_WIDTH - MIN_WIDTH),
md: (MAX_SPACE.md - MIN_SPACE.md) / (MAX_WIDTH - MIN_WIDTH),
lg: (MAX_SPACE.lg - MIN_SPACE.lg) / (MAX_WIDTH - MIN_WIDTH),
xl: (MAX_SPACE.xl - MIN_SPACE.xl) / (MAX_WIDTH - MIN_WIDTH),
xxl: (MAX_SPACE.xxl - MIN_SPACE.xxl) / (MAX_WIDTH - MIN_WIDTH),
xxxl: (MAX_SPACE.xxxl - MIN_SPACE.xxxl) / (MAX_WIDTH - MIN_WIDTH),
xxxxl: (MAX_SPACE.xxxxl - MIN_SPACE.xxxxl) / (MAX_WIDTH - MIN_WIDTH),
};
// rounded to the nearest 0.25px
const INTERCEPT_SPACE = {
xxxs: Math.round(4 * (MIN_SPACE.xxxs - SLOPE_SPACE.xxxs * MIN_WIDTH)) / 4,
xxs: Math.round(4 * (MIN_SPACE.xxs - SLOPE_SPACE.xxs * MIN_WIDTH)) / 4,
xs: Math.round(4 * (MIN_SPACE.xs - SLOPE_SPACE.xs * MIN_WIDTH)) / 4,
sm: Math.round(4 * (MIN_SPACE.sm - SLOPE_SPACE.sm * MIN_WIDTH)) / 4,
md: Math.round(4 * (MIN_SPACE.md - SLOPE_SPACE.md * MIN_WIDTH)) / 4,
lg: Math.round(4 * (MIN_SPACE.lg - SLOPE_SPACE.lg * MIN_WIDTH)) / 4,
xl: Math.round(4 * (MIN_SPACE.xl - SLOPE_SPACE.xl * MIN_WIDTH)) / 4,
xxl: Math.round(4 * (MIN_SPACE.xxl - SLOPE_SPACE.xxl * MIN_WIDTH)) / 4,
xxxl: Math.round(4 * (MIN_SPACE.xxxl - SLOPE_SPACE.xxxl * MIN_WIDTH)) / 4,
xxxxl: Math.round(4 * (MIN_SPACE.xxxxl - SLOPE_SPACE.xxxxl * MIN_WIDTH)) / 4,
};
// prettier-ignore
export const spacing = stylex.defineVars({
xxxs: `clamp(${MIN_SPACE.xxxs }px, calc(${INTERCEPT_SPACE.xxxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxxs ) / 100 }vw), ${MAX_SPACE.xxxs }px)`,
xxs: `clamp(${MIN_SPACE.xxs }px, calc(${INTERCEPT_SPACE.xxs }px + ${ Math.round(10000 * SLOPE_SPACE.xxs ) / 100 }vw), ${MAX_SPACE.xxs }px)`,
xs: `clamp(${MIN_SPACE.xs }px, calc(${INTERCEPT_SPACE.xs }px + ${ Math.round(10000 * SLOPE_SPACE.xs ) / 100 }vw), ${MAX_SPACE.xs }px)`,
sm: `clamp(${MIN_SPACE.sm }px, calc(${INTERCEPT_SPACE.sm }px + ${ Math.round(10000 * SLOPE_SPACE.sm ) / 100 }vw), ${MAX_SPACE.sm }px)`,
md: `clamp(${MIN_SPACE.md }px, calc(${INTERCEPT_SPACE.md }px + ${ Math.round(10000 * SLOPE_SPACE.md ) / 100 }vw), ${MAX_SPACE.md }px)`,
lg: `clamp(${MIN_SPACE.lg }px, calc(${INTERCEPT_SPACE.lg }px + ${ Math.round(10000 * SLOPE_SPACE.lg ) / 100 }vw), ${MAX_SPACE.lg }px)`,
xl: `clamp(${MIN_SPACE.xl }px, calc(${INTERCEPT_SPACE.xl }px + ${ Math.round(10000 * SLOPE_SPACE.xl ) / 100 }vw), ${MAX_SPACE.xl }px)`,
xxl: `clamp(${MIN_SPACE.xxl }px, calc(${INTERCEPT_SPACE.xxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxl ) / 100 }vw), ${MAX_SPACE.xxl }px)`,
xxxl: `clamp(${MIN_SPACE.xxxl }px, calc(${INTERCEPT_SPACE.xxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxl ) / 100 }vw), ${MAX_SPACE.xxxl }px)`,
xxxxl: `clamp(${MIN_SPACE.xxxxl }px, calc(${INTERCEPT_SPACE.xxxxl }px + ${ Math.round(10000 * SLOPE_SPACE.xxxxl ) / 100 }vw), ${MAX_SPACE.xxxxl }px)`,
});
/**
* Color Tokens
*/
const DARK_MODE = '@media (prefers-color-scheme: dark)';
export const globalTokens = stylex.defineVars({
maxWidth: `${MAX_WIDTH}px`,
fontMono: [
'ui-monospace',
'Menlo',
'Monaco',
'"Cascadia Mono"',
'"Segoe UI Mono"',
'"Roboto Mono"',
'"Oxygen Mono"',
'"Ubuntu Monospace"',
'"Source Code Pro"',
'"Fira Mono"',
'"Droid Sans Mono"',
'"Courier New"',
'monospace',
].join(', '),
fontSans: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
].join(', '),
foregroundR: { default: '0', [DARK_MODE]: '255' },
foregroundG: { default: '0', [DARK_MODE]: '255' },
foregroundB: { default: '0', [DARK_MODE]: '255' },
bgStartRGB: { default: 'rgb(214, 219, 220)', [DARK_MODE]: 'rgb(0, 0, 0)' },
bgEndR: { default: '255', [DARK_MODE]: '0' },
bgEndG: { default: '255', [DARK_MODE]: '0' },
bgEndB: { default: '255', [DARK_MODE]: '0' },
calloutRGB: { default: 'rgb(238, 240, 241)', [DARK_MODE]: 'rgb(20, 20, 20)' },
calloutRGB50: {
default: 'rgba(238, 240, 241, 0.5)',
[DARK_MODE]: 'rgba(20, 20, 20, 0.5)',
},
calloutBorderR: { default: '172', [DARK_MODE]: '108' },
calloutBorderG: { default: '175', [DARK_MODE]: '108' },
calloutBorderB: { default: '176', [DARK_MODE]: '108' },
cardR: { default: '180', [DARK_MODE]: '100' },
cardG: { default: '185', [DARK_MODE]: '100' },
cardB: { default: '188', [DARK_MODE]: '100' },
cardBorderR: { default: '131', [DARK_MODE]: '200' },
cardBorderG: { default: '134', [DARK_MODE]: '200' },
cardBorderB: { default: '135', [DARK_MODE]: '200' },
primaryGlow: {
default: `conic-gradient(${[
'from 180deg at 50% 50%',
'#16abff33 0deg',
'#0885ff33 55deg',
'#54d6ff33 120deg',
'#0071ff33 160deg',
'transparent 360deg',
].join(', ')})`,
[DARK_MODE]: 'radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))',
},
secondaryGlow: {
default: 'radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))',
[DARK_MODE]: `linear-gradient(${[
'to bottom right',
'rgba(1, 65, 255, 0)',
'rgba(1, 65, 255, 0)',
'rgba(1, 65, 255, 0.3)',
].join(', ')})`,
},
surfaceBg: { default: '#fafafa', [DARK_MODE]: '#0f1117' },
surfaceCard: { default: 'white', [DARK_MODE]: '#1a1b26' },
surfaceCardShadow: {
default: '0 4px 24px rgba(0,0,0,0.06)',
[DARK_MODE]: '0 4px 24px rgba(0,0,0,0.3)',
},
surfaceHover: {
default: 'rgba(0,0,0,0.02)',
[DARK_MODE]: 'rgba(255,255,255,0.04)',
},
});
export const scales = stylex.defineVars({
small: 'scale(0.95)',
medium: 'scale(1)',
large: 'scale(1.2)',
});
export const colors = stylex.defineVars({
accent: '#1c7ed6',
accentLight: 'rgba(28, 126, 214, 0.08)',
accentFaded: 'rgba(28, 126, 214, 0.19)',
blue3: '#74c0fc',
blue5: '#4285F4',
blue7: '#1c7ed6',
purple: '#5B45DE',
purple6: '#7C6AE8',
emerald: '#0ca678',
gray2: '#e9ecef',
gray3: '#dee2e6',
gray4: '#ced4da',
gray5: '#adb5bd',
gray6: '#868e96',
gray8: '#343a40',
gray9: '#212529',
lime7: '#74b816',
});
================================================
FILE: examples/example-nextjs/app/layout.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import './app.css';
import { globalTokens as $ } from '@/app/globalTokens.stylex';
import * as stylex from '@stylexjs/stylex';
export const metadata = {
title: 'Next.js + StyleX',
description: 'The expressive styling system for ambitious interfaces',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html {...stylex.props(styles.html, styles.reset)} lang="en">
<body {...stylex.props(styles.reset, styles.body)}>{children}</body>
</html>
);
}
const styles = stylex.create({
html: {
colorScheme: 'light dark',
},
reset: {
minHeight: '100%',
margin: 0,
padding: 0,
},
body: {
backgroundColor: $.surfaceBg,
},
});
================================================
FILE: examples/example-nextjs/app/page.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
'use client';
import React, { useState, useEffect } from 'react';
import * as stylex from '@stylexjs/stylex';
import Card from '@/components/Card';
import {
globalTokens as $,
spacing,
text,
colors,
} from './globalTokens.stylex';
import InteractiveCard, { THEMES } from './InteractiveCard';
import { darkTheme, lightTheme } from './darkMode.stylex';
const HOMEPAGE = 'https://stylexjs.com';
export default function Home() {
const [themeIndex, setThemeIndex] = useState(2);
const [isDark, setIsDark] = useState(false);
useEffect(() => {
const mq = window.matchMedia('(prefers-color-scheme: dark)');
setIsDark(mq.matches);
const handler = (e: MediaQueryListEvent) => setIsDark(e.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, []);
return (
<main
{...stylex.props(
style.main,
THEMES[themeIndex].theme,
isDark ? darkTheme : lightTheme,
)}
>
<div {...stylex.props(style.hero)}>
<h1 {...stylex.props(style.h1)}>
Next.js <span {...stylex.props(style.plus)}>+</span> StyleX
</h1>
<p {...stylex.props(style.subtitle)}>
The expressive styling system for ambitious interfaces
</p>
<InteractiveCard
isDark={isDark}
onDarkModeChange={setIsDark}
onThemeChange={setThemeIndex}
themeIndex={themeIndex}
/>
</div>
<div {...stylex.props(style.grid)}>
<Card
body="Learn how to use StyleX to build UIs"
href={`${HOMEPAGE}/docs/learn/`}
title="Docs"
/>
<Card
body="Browse through the StyleX API reference"
href={`${HOMEPAGE}/docs/api/`}
title="API"
/>
<Card
body="Play with StyleX and look at the compile outputs"
href={`${HOMEPAGE}/playground/`}
title="Playground"
/>
<Card
body="Get started with a NextJS+StyleX project"
href="https://github.com/nmn/nextjs-app-dir-stylex"
title="Templates"
/>
</div>
</main>
);
}
const MEDIA_MOBILE = '@media (max-width: 700px)' as const;
const MEDIA_TABLET =
'@media (min-width: 701px) and (max-width: 1120px)' as const;
const DARK = '@media (prefers-color-scheme: dark)' as const;
const style = stylex.create({
main: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: spacing.xxxl,
minHeight: '100vh',
paddingTop: spacing.xxxl,
paddingBottom: {
default: spacing.xxl,
[MEDIA_MOBILE]: spacing.lg,
},
paddingInline: spacing.md,
backgroundColor: $.surfaceBg,
color: `rgba(${$.foregroundR}, ${$.foregroundG}, ${$.foregroundB}, 1)`,
},
hero: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: spacing.lg,
width: '100%',
maxWidth: 480,
},
h1: {
fontSize: text.h1,
lineHeight: 1,
fontFamily: $.fontSans,
fontWeight: 700,
textAlign: 'center',
letterSpacing: '-0.02em',
whiteSpace: 'nowrap',
flexDirection: {
default: 'row',
[MEDIA_MOBILE]: 'column',
},
},
plus: {
fontWeight: 300,
color: colors.accent,
transitionProperty: 'color',
transitionDuration: '300ms',
},
subtitle: {
fontSize: text.p,
lineHeight: 1.6,
fontFamily: $.fontSans,
textAlign: 'center',
color: {
default: colors.gray5,
[DARK]: colors.gray6,
},
maxWidth: '36ch',
textWrap: 'balance',
},
grid: {
display: 'grid',
gridTemplateColumns: {
default: 'repeat(4, minmax(25%, auto))',
[MEDIA_MOBILE]: '1fr',
[MEDIA_TABLET]: 'repeat(2, 50%)',
},
gap: spacing.sm,
width: $.maxWidth,
maxWidth: {
default: '100%',
[MEDIA_MOBILE]: 320,
},
textAlign: { [MEDIA_MOBILE]: 'center' },
},
});
================================================
FILE: examples/example-nextjs/babel.config.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const path = require('path');
const dev = process.env.NODE_ENV !== 'production';
module.exports = {
presets: ['next/babel'],
plugins: [
[
'@stylexjs/babel-plugin',
// See all options in the babel plugin configuration docs:
// https://stylexjs.com/docs/api/configuration/babel-plugin/
{
dev,
runtimeInjection: false,
enableInlinedConditionalMerge: true,
treeshakeCompensation: true,
aliases: {
'@/*': [path.join(__dirname, '*')],
},
unstable_moduleResolution: {
type: 'commonJS',
},
},
],
],
};
================================================
FILE: examples/example-nextjs/components/Card.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import * as stylex from '@stylexjs/stylex';
import {
globalTokens as $,
spacing,
text,
colors,
} from '@/app/globalTokens.stylex';
import { cardMarker, headingMarker } from './CardTokens.stylex';
type Props = Readonly<{
title: string;
body: string;
href: string;
}>;
export default function Card({ title, body, href }: Props) {
return (
<a
{...stylex.props(styles.link, cardMarker)}
href={href}
rel="noopener noreferrer"
target="_blank"
>
<h2 {...stylex.props(styles.h2, headingMarker)}>
{title} <span {...stylex.props(styles.span)}>→</span>
</h2>
<p {...stylex.props(styles.p)}>{body}</p>
</a>
);
}
type TMobile = '@media (max-width: 700px)';
const MOBILE: TMobile = '@media (max-width: 700px)' as TMobile;
const REDUCE_MOTION = '@media (prefers-reduced-motion: reduce)' as const;
const DARK = '@media (prefers-color-scheme: dark)' as const;
const styles = stylex.create({
link: {
display: {
default: 'flex',
[MOBILE]: 'block',
},
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'column',
borderRadius: spacing.sm,
backgroundColor: {
default: 'transparent',
':hover': $.surfaceHover,
},
borderWidth: 1,
borderStyle: 'solid',
borderColor: {
default: colors.gray2,
':hover': colors.accent,
[DARK]: {
default: colors.gray8,
':hover': colors.accent,
},
},
color: 'inherit',
fontFamily: $.fontSans,
padding: spacing.md,
transitionProperty: 'background-color, border-color, transform, box-shadow',
transitionDuration: '300ms',
textAlign: 'center',
textDecoration: 'none',
transform: {
default: null,
':hover': 'translateY(-2px)',
},
boxShadow: {
default: 'none',
':hover': '0 4px 16px rgba(0, 0, 0, 0.08)',
},
},
h2: {
color: colors.accent,
fontSize: text.h4,
fontWeight: 600,
marginBottom: {
default: spacing.xs,
[MOBILE]: spacing.xxs,
},
transitionProperty: 'color',
transitionDuration: '300ms',
},
span: {
display: 'inline-block',
transitionProperty: 'transform',
transform: {
default: null,
[stylex.when.ancestor(':hover', cardMarker)]: 'translateX(10px)',
[stylex.when.ancestor(':hover', headingMarker)]: 'translateX(4px)',
},
transitionDuration: {
default: '200ms',
[REDUCE_MOTION]: '0s',
},
},
p: {
margin: 0,
opacity: 0.6,
fontSize: text.p,
textWrap: 'balance',
lineHeight: 1.5,
maxWidth: '30ch',
},
});
================================================
FILE: examples/example-nextjs/components/CardTokens.stylex.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import * as stylex from '@stylexjs/stylex';
export const cardMarker = stylex.defineMarker();
export const headingMarker = stylex.defineMarker();
================================================
FILE: examples/example-nextjs/next.config.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
/** @type {import('next').NextConfig} */
const path = require('path');
module.exports = {};
================================================
FILE: examples/example-nextjs/package.json
================================================
{
"private": true,
"name": "example-nextjs",
"version": "0.18.1",
"scripts": {
"clean": "shx rm -rf .next",
"example:build": "next build",
"example:dev": "next dev",
"example:lint": "next lint",
"example:start": "next start"
},
"dependencies": {
"@stylexjs/stylex": "0.18.1",
"next": "^16.0.7",
"react": "^19.0.0-rc-de68d2f4-20241204",
"react-dom": "^19.0.0-rc-de68d2f4-20241204"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"@stylexjs/eslint-plugin": "0.18.1",
"@stylexjs/postcss-plugin": "0.18.1",
"@types/json-schema": "^7.0.15",
"@types/node": "^22.7.6",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/parser": "^8.48.1",
"eslint": "^9.39.1",
"eslint-config-next": "^16.0.6",
"typescript": "^5.9.3",
"client-only": "0.0.1"
}
}
================================================
FILE: examples/example-nextjs/postcss.config.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
const babelConfig = require('./babel.config');
module.exports = {
plugins: {
'@stylexjs/postcss-plugin': {
include: ['app/**/*.{js,jsx,ts,tsx}', 'components/**/*.{js,jsx,ts,tsx}'],
babelConfig: {
babelrc: false,
parserOpts: {
plugins: ['typescript', 'jsx'],
},
plugins: babelConfig.plugins,
},
useCSSLayers: true,
},
autoprefixer: {},
},
};
================================================
FILE: examples/example-nextjs/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./*"
]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}
================================================
FILE: examples/example-react-router/.gitignore
================================================
.DS_Store
node_modules
.env
dist
================================================
FILE: examples/example-react-router/README.md
================================================
# React Router + RSC + StyleX
⚠️ **EXPERIMENTAL**: This template demonstrates React Server Components with
React Router.
## Highlights
- 🧪 React Server Components powered by Vite’s RSC plugin
- 🧵 Styling via [`@stylexjs/stylex`](https://stylexjs.com/) compiled by
[`@stylexjs/unplugin`](https://www.npmjs.com/package/@stylexjs/unplugin)
- 🧭 React Router 7 data APIs + server actions
- ⚡️ Instant HMR during `example:dev`
- 🔣 TypeScript out of the box
## Scripts
```bash
npm install # install dependencies
npm run example:dev # start Vite dev server with RSC + StyleX
rm -rf dist && npm run example:build # optional clean + production build
npm run example:start # run the Express server using the dist/ output
npm run example:typecheck # type-check without emitting files
```
Dev server runs on `http://localhost:5173` by default.
## StyleX integration
The Vite config registers the StyleX unplugin before the RSC plugin so that both
client and server bundles share the same compiled CSS:
```ts
import stylex from '@stylexjs/unplugin';
export default defineConfig({
plugins: [
stylex.vite({ useCSSLayers: true }),
react(),
rsc({
/* ... */
}),
],
});
```
- `src/stylex.css` is imported from the root route. This ensures Vite always
emits a CSS asset that the unplugin can append to.
- During development the layout injects the virtual StyleX runtime and
stylesheet so HMR picks up CSS changes without reloading:
```tsx
{
import.meta.env.DEV ? (
<>
<script type="module" src="/@id/virtual:stylex:runtime" />
<link rel="stylesheet" href="/virtual:stylex.css" />
</>
) : null;
}
```
- If a script tag is blocked, load the runtime from a tiny client shim:
```ts
if (import.meta.env.DEV) import('virtual:stylex:runtime');
```
Keep the CSS `<link>` in the HTML head for dev.
- `@stylexjs/stylex` is used throughout the client components
(`routes/root/client.tsx`, `routes/home/route.tsx`, etc.) instead of Tailwind
classes.
## Hot reloading gotcha
React Router’s experimental RSC runtime exposes a `__reactRouterDataRouter`
handle instead of the older `__router` object that Remix-based examples
reference. To keep RSC + StyleX HMR working, the dev-only listener in
`src/entry.browser.tsx` looks for either key before calling `revalidate()`:
```ts
if (import.meta.hot) {
import.meta.hot.on('rsc:update', () => {
const reactDataRouter =
(window as { __router?: DataRouter }).__router ??
(window as { __reactRouterDataRouter?: DataRouter })
.__reactRouterDataRouter;
reactDataRouter?.revalidate();
});
}
```
Without this fallback, RSC updates would silently no-op during dev.
## React Server Components recap
Three entry points orchestrate the RSC flow:
- **`entry.rsc.tsx`** — React Server request handler
- **`entry.ssr.tsx`** — wraps the RSC payload in HTML for SSR
- **`entry.browser.tsx`** — hydrates the RSC payload on the client
Routes are defined in `src/routes/config.ts` using `unstable_RSCRouteConfig`,
and shared layout/UI lives in `src/routes/root`.
---
Built with ❤️ using React Router + StyleX.
================================================
FILE: examples/example-react-router/package.json
================================================
{
"name": "example-react-router",
"private": true,
"type": "module",
"scripts": {
"example:build": "shx rm -rf dist && vite build",
"example:dev": "cross-env NODE_ENV=development vite",
"example:start": "cross-env NODE_ENV=production node server.js",
"example:typecheck": "tsc --noEmit"
},
"dependencies": {
"@stylexjs/stylex": "0.18.1",
"@stylexjs/shared-ui": "0.18.1",
"@remix-run/node-fetch-server": "0.12.0",
"compression": "^1.8.0",
"express": "^5.1.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-router": "7.9.6"
},
"devDependencies": {
"@stylexjs/unplugin": "0.18.1",
"@types/compression": "^1.8.1",
"@types/express": "^5.0.3",
"@types/node": "^24.0.3",
"@types/react": "^19.2.6",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^4.5.2",
"@vitejs/plugin-rsc": "^0.5.3",
"cross-env": "^10.1.0",
"typescript": "^5.9.3",
"vite": "^7.2.4"
},
"version": "0.18.1"
}
================================================
FILE: examples/example-react-router/server.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import { createRequestListener } from '@remix-run/node-fetch-server';
import compression from 'compression';
import express from 'express';
import build from './dist/rsc/index.js';
const app = express();
app.use(
'/assets',
compression(),
express.static('dist/client/assets', {
immutable: true,
maxAge: '1y',
}),
);
app.use(compression(), express.static('dist/client'));
app.get('/.well-known/appspecific/com.chrome.devtools.json', (_, res) => {
res.status(404);
res.end();
});
app.use(createRequestListener(build));
const PORT = Number.parseInt(process.env.PORT || '3000', 10);
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT} (http://localhost:${PORT})`);
});
================================================
FILE: examples/example-react-router/src/components/MainArticle.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import * as stylex from '@stylexjs/stylex';
export default function MainArticle({
children,
}: {
children: React.ReactNode;
}) {
return (
<main {...stylex.props(styles.main)}>
<article {...stylex.props(styles.article)}>{children}</article>
</main>
);
}
const MEDIA_SM = '@media (min-width: 640px)' as const;
export const styles = stylex.create({
main: {
marginInline: 'auto',
maxWidth: 1200,
paddingInline: '16px',
paddingBlock: {
default: '2.5rem',
[MEDIA_SM]: '3.5rem',
},
backgroundColor: '#efefef',
},
article: {
display: 'flex',
flexDirection: 'column',
gap: '1rem',
lineHeight: 1.6,
},
});
================================================
FILE: examples/example-react-router/src/entry.browser.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {
createFromReadableStream,
createTemporaryReferenceSet,
encodeReply,
setServerCallback,
} from '@vitejs/plugin-rsc/browser';
import { startTransition, StrictMode } from 'react';
import { hydrateRoot } from 'react-dom/client';
import {
unstable_createCallServer as createCallServer,
unstable_getRSCStream as getRSCStream,
unstable_RSCHydratedRouter as RSCHydratedRouter,
type unstable_RSCPayload as RSCServerPayload,
type DataRouter,
} from 'react-router';
// Create and set the callServer function to support post-hydration server actions.
setServerCallback(
createCallServer({
createFromReadableStream,
createTemporaryReferenceSet,
encodeReply,
}),
);
// Get and decode the initial server payload
createFromReadableStream<RSCServerPayload>(getRSCStream()).then((payload) => {
startTransition(async () => {
const formState =
payload.type === 'render' ? await payload.formState : undefined;
hydrateRoot(
document,
<StrictMode>
<RSCHydratedRouter
createFromReadableStream={createFromReadableStream}
payload={payload}
/>
</StrictMode>,
{
// @ts-expect-error - no types for this yet
formState,
},
);
});
});
if (import.meta.hot) {
// Minimal StyleX CSS HMR: listen for stylex:css-update and bust the CSS link
// @ts-ignore
import.meta.hot.on('rsc:update', () => {
const reactDataRouter =
(window as unknown as { __router: DataRouter }).__router ??
(window as unknown as { __reactRouterDataRouter: DataRouter })
.__reactRouterDataRouter;
reactDataRouter?.revalidate();
});
}
================================================
FILE: examples/example-react-router/src/entry.rsc.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {
createTemporaryReferenceSet,
decodeAction,
decodeFormState,
decodeReply,
loadServerAction,
renderToReadableStream,
} from '@vitejs/plugin-rsc/rsc';
import { unstable_matchRSCServerRequest as matchRSCServerRequest } from 'react-router';
import { routes } from './routes/config';
function fetchServer(request: Request) {
return matchRSCServerRequest({
// Provide the React Server touchpoints.
createTemporaryReferenceSet,
decodeAction,
decodeFormState,
decodeReply,
loadServerAction,
// The incoming request.
request,
// The app routes.
routes: routes(),
// Encode the match with the React Server implementation.
generateResponse(match, options) {
return new Response(renderToReadableStream(match.payload, options), {
status: match.statusCode,
headers: match.headers,
});
},
});
}
export default async function handler(request: Request) {
// Import the generateHTML function from the client environment
const ssr = await import.meta.viteRsc.loadModule<
typeof import('./entry.ssr')
>('ssr', 'index');
return ssr.generateHTML(request, fetchServer);
}
if (import.meta.hot) {
import.meta.hot.accept();
}
================================================
FILE: examples/example-react-router/src/entry.ssr.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr';
import { renderToReadableStream as renderHTMLToReadableStream } from 'react-dom/server.edge';
import {
unstable_routeRSCServerRequest as routeRSCServerRequest,
unstable_RSCStaticRouter as RSCStaticRouter,
} from 'react-router';
export async function generateHTML(
request: Request,
fetchServer: (_request: Request) => Promise<Response>,
): Promise<Response> {
return await routeRSCServerRequest({
// The incoming request.
request,
// How to call the React Server.
fetchServer,
// Provide the React Server touchpoints.
createFromReadableStream,
// Render the router to HTML.
async renderHTML(getPayload) {
const payload = await getPayload();
const formState =
payload.type === 'render' ? await payload.formState : undefined;
const bootstrapScriptContent =
await import.meta.viteRsc.loadBootstrapScriptContent('index');
return await renderHTMLToReadableStream(
<RSCStaticRouter getPayload={getPayload} />,
{
bootstrapScriptContent,
// @ts-expect-error - no types for this yet
formState,
},
);
},
});
}
================================================
FILE: examples/example-react-router/src/routes/about/route.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import MainArticle from '../../components/MainArticle';
export default function About() {
return (
<MainArticle>
<h1>About Page</h1>
<p>This is the about page of our application.</p>
</MainArticle>
);
}
================================================
FILE: examples/example-react-router/src/routes/config.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import type { unstable_RSCRouteConfig as RSCRouteConfig } from 'react-router';
export function routes() {
return [
{
id: 'root',
path: '',
lazy: () => import('./root/route'),
children: [
{
id: 'home',
index: true,
lazy: () => import('./home/route'),
},
{
id: 'about',
path: 'about',
lazy: () => import('./about/route'),
},
],
},
] satisfies RSCRouteConfig;
}
================================================
FILE: examples/example-react-router/src/routes/home/route.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import MainArticle from '../../components/MainArticle';
export default function Home() {
return (
<MainArticle>
<h1>Welcome to React Router RSC</h1>
<p>
This is a simple example of a React Router application using React
Server Components (RSC) with Vite. It demonstrates how to set up a basic
routing structure and render components server-side.
</p>
</MainArticle>
);
}
================================================
FILE: examples/example-react-router/src/routes/root/DevStyleXInject.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use client';
import { useEffect } from 'react';
export function DevStyleXInject() {
useEffect(() => {
// @ts-ignore
import('virtual:stylex:runtime');
}, []);
return <link href="/virtual:stylex.css" rel="stylesheet" />;
}
================================================
FILE: examples/example-react-router/src/routes/root/client.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use client';
import * as stylex from '@stylexjs/stylex';
import { Button } from '@stylexjs/shared-ui';
import { tokens } from '@stylexjs/shared-ui/tokens.stylex';
import {
isRouteErrorResponse,
Link,
NavLink,
useNavigation,
useRouteError,
} from 'react-router';
import MainArticle from '../../components/MainArticle';
import { DevStyleXInject } from './DevStyleXInject';
export function Layout({ children }: { children: React.ReactNode }) {
const navigation = useNavigation();
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
{import.meta.env.DEV ? <DevStyleXInject /> : null}
<meta charSet="utf-8" />
</head>
<body {...stylex.props(layoutStyles.body)}>
<header {...stylex.props(layoutStyles.header)}>
<div {...stylex.props(layoutStyles.shell)}>
<Link to="/" {...stylex.props(layoutStyles.brand)}>
React Router 🚀
</Link>
<Button onClick={() => console.log('Router Test')}>Ext</Button>
<nav>
<ul {...stylex.props(layoutStyles.navList)}>
<li>
<NavLink
className={({ isActive }) =>
stylex.props(
layoutStyles.navLink,
layoutStyles.navLinkHover,
isActive && layoutStyles.navLinkActive,
).className
}
end
to="/"
>
Home
</NavLink>
</li>
<li>
<NavLink
className={({ isActive }) =>
stylex.props(
layoutStyles.navLink,
layoutStyles.navLinkHover,
isActive && layoutStyles.navLinkActive,
).className
}
to="/about"
>
About
</NavLink>
</li>
</ul>
</nav>
<div>
{navigation.state !== 'idle' && (
<p {...stylex.props(layoutStyles.loadingText)}>Loading…</p>
)}
</div>
</div>
</header>
{children}
</body>
</html>
);
}
const MEDIA_SM = '@media (min-width: 640px)' as const;
const layoutStyles = stylex.create({
body: {
fontFamily:
"'Inter', 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
backgroundColor: '#f8fafc',
color: '#0f172a',
minHeight: '100vh',
},
header: {
position: 'sticky',
insetBlockStart: 0,
insetInlineStart: 0,
insetInlineEnd: 0,
zIndex: 50,
backgroundColor: '#ffffff',
borderBottomWidth: 1,
borderBottomStyle: 'solid',
borderBottomColor: '#e4e7eb',
},
shell: {
marginInline: 'auto',
maxWidth: 1200,
paddingInline: '16px',
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
height: '64px',
gap: '1rem',
[MEDIA_SM]: {
gap: '2rem',
},
},
brand: {
fontSize: '1rem',
fontWeight: 600,
color: tokens.primaryColor,
textDecoration: 'none',
},
navList: {
display: 'flex',
gap: '1rem',
listStyleType: 'none',
margin: 0,
padding: 0,
},
navLink: {
fontSize: '0.875rem',
fontWeight: 500,
color: '#111827',
textDecorationLine: 'none',
transitionProperty: 'opacity',
transitionDuration: '120ms',
opacity: 0.9,
},
navLinkHover: {
opacity: {
':hover': 0.65,
},
},
navLinkActive: {
color: '#2563eb',
opacity: 1,
},
loadingText: {
fontSize: '0.875rem',
color: '#2563eb',
},
});
export function ErrorBoundary() {
const error = useRouteError();
let status = 500;
let message = 'An unexpected error occurred.';
if (isRouteErrorResponse(error)) {
status = error.status;
message = status === 404 ? 'Page not found.' : error.statusText || message;
}
return (
<MainArticle>
<h1>{status}</h1>
<p>{message}</p>
</MainArticle>
);
}
================================================
FILE: examples/example-react-router/src/routes/root/route.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { Outlet } from 'react-router';
import '../../stylex.css';
import { Layout as ClientLayout } from './client';
export { ErrorBoundary } from './client';
export function Layout({ children }: { children: React.ReactNode }) {
// This is necessary for the bundler to inject the needed CSS assets.
return <ClientLayout>{children}</ClientLayout>;
}
export default function Component() {
return <Outlet />;
}
================================================
FILE: examples/example-react-router/src/stylex.css
================================================
@layer reset {
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
color-scheme: light dark;
}
body {
margin: 0;
min-height: 100vh;
background-color: #f8fafc;
color: #0f172a;
}
}
/* @stylexjs/unplugin appends aggregated StyleX output to this file during builds. */
================================================
FILE: examples/example-react-router/tsconfig.json
================================================
{
"compilerOptions": {
"allowImportingTsExtensions": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"skipLibCheck": true,
"verbatimModuleSyntax": true,
"noEmit": true,
"moduleResolution": "Bundler",
"module": "ESNext",
"target": "ESNext",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"types": ["vite/client", "@vitejs/plugin-rsc/types"],
"jsx": "react-jsx"
}
}
================================================
FILE: examples/example-react-router/vite.config.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import stylex from '@stylexjs/unplugin';
import rsc from '@vitejs/plugin-rsc/plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
stylex.vite({
useCSSLayers: true,
enableDebugClassNames: false,
runtimeInjection: false,
}),
react(),
rsc({
entries: {
client: 'src/entry.browser.tsx',
rsc: 'src/entry.rsc.tsx',
ssr: 'src/entry.ssr.tsx',
},
}),
],
});
================================================
FILE: examples/example-redwoodsdk/.gitignore
================================================
# Node modules
node_modules
# Logs
logs
*.log
npm-debug.log*
pnpm-debug.log*
# Environment variables
.env
.dev.vars
# Vite build output
dist
# TypeScript
*.tsbuildinfo
# IDEs and editors
.vscode/
.idea/
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# MacOS
.DS_Store
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# pnpm store directory
.pnpm-store
# dotenv environment variables file
.env.local
.env.development.local
.env.test.local
.env.production.local
# Vite cache
.vite
# Coverage directory used by tools like istanbul
coverage
# Temporary files
*.tmp
*.temp
# Wrangler
.wrangler
================================================
FILE: examples/example-redwoodsdk/README.md
================================================
# RedwoodSDK + StyleX
This starter shows how RedwoodSDK’s Vite-based toolchain works with
`@stylexjs/unplugin`. StyleX is compiled during dev and build, and the resulting
CSS is appended to the worker/client assets that Redwood emits.
### Prerequisites
- Node.js 18+
- RedwoodSDK CLI (`rw-scripts`) plus `@cloudflare/vite-plugin`
- `@stylexjs/unplugin`
## Install dependencies
```bash
npm install
```
## Vite configuration (`vite.config.mts`)
```ts
import { defineConfig } from 'vite';
import { redwood } from 'rwsdk/vite';
import { cloudflare } from '@cloudflare/vite-plugin';
import stylex from '@stylexjs/unplugin';
export default defineConfig({
plugins: [
cloudflare({ viteEnvironment: { name: 'worker' } }),
redwood(),
stylex.vite({
devMode: 'css-only',
devPersistToDisk: true,
dev: true,
runtimeInjection: false,
}),
],
});
```
- `devMode: 'css-only'` exposes only the CSS endpoint during dev (Redwood
handles HTML/JS injection).
- `devPersistToDisk` makes the aggregated rules available across multiple Vite
environments (worker + client).
## CSS entry point (`src/app/root.css`)
`src/app/root.css` is imported by the app shell so Vite/Workers always emit a
CSS asset. The StyleX plugin appends its generated CSS to that file, keeping
your own `@layer` directives intact.
## Dev-only CSS injection
Add both pieces during dev:
In your root layout file:
```tsx
// src/app/Document.tsx
{
import.meta.env.DEV ? (
<link rel="stylesheet" href="/virtual:stylex.css" />
) : null;
}
```
And in a client component that is used in your root layout:
```ts
// src/client.tsx
if (import.meta.env.DEV) {
import('virtual:stylex:css-only');
}
```
Make sure this is in a client component.
Keep both in dev so StyleX CSS reloads without a full refresh.
## Commands
```bash
# Run the Redwood dev server (client + worker) with live StyleX transforms
npm run example:dev
# Production build (client bundle + worker assets)
npm run example:build
# Preview the production build locally
npm run example:serve
# Additional Redwood helpers
npm run dev:init
npm run worker:run
npm run release # builds via npm run example:build before deploying
```
Execute these scripts inside `examples/example-redwoodsdk`. The generated
`dist/` output already contains the aggregated StyleX CSS.
================================================
FILE: examples/example-redwoodsdk/package.json
================================================
{
"name": "@redwoodjs/starter",
"version": "0.18.1",
"description": "A bare-bones RedwoodSDK starter",
"main": "index.js",
"type": "module",
"keywords": [],
"author": "",
"license": "MIT",
"private": true,
"scripts": {
"example:build": "vite build",
"example:dev": "vite dev",
"dev:init": "rw-scripts dev-init",
"example:serve": "vite preview",
"worker:run": "rw-scripts worker-run",
"clean": "npm run clean:vite",
"clean:vite": "shx rm -rf ./node_modules/.vite",
"release": "rw-scripts ensure-deploy-env && npm run clean && npm run example:build && wrangler deploy",
"generate": "rw-scripts ensure-env && wrangler types --include-runtime false",
"check": "npm run generate && npm run types",
"types": "tsc"
},
"dependencies": {
"@stylexjs/stylex": "0.18.1",
"capnweb": "~0.2.0",
"react": "19.3.0-canary-561ee24d-20251101",
"react-dom": "19.3.0-canary-561ee24d-20251101",
"react-server-dom-webpack": "19.3.0-canary-561ee24d-20251101",
"rwsdk": "1.0.0-beta.31",
"@stylexjs/shared-ui": "0.18.1"
},
"devDependencies": {
"@stylexjs/unplugin": "0.18.1",
"@cloudflare/vite-plugin": "^1.15.2",
"@cloudflare/workers-types": "^4.20260120.0",
"@types/node": "^24.10.1",
"@types/react": "^19.2.6",
"@types/react-dom": "^19.2.3",
"typescript": "^5.9.3",
"vite": "^7.2.4",
"wrangler": "^4.50.0"
},
"pnpm": {
"onlyBuiltDependencies": [
"esbuild",
"sharp",
"workerd"
]
}
}
================================================
FILE: examples/example-redwoodsdk/src/app/DevStyleXInject.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
export function DevStyleXInject({ cssHref }: { cssHref: string }) {
return import.meta.env.DEV ? (
<link href="/virtual:stylex.css" rel="stylesheet" />
) : (
<link href={cssHref} rel="stylesheet" />
);
}
================================================
FILE: examples/example-redwoodsdk/src/app/Document.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import './root.css';
import * as stylex from '@stylexjs/stylex';
import { DevStyleXInject } from './DevStyleXInject';
const styles = stylex.create({
html: {
backgroundColor: '#f4eedf',
},
body: {
margin: 0,
},
});
export const Document: React.FC<{ children: React.ReactNode }> = ({
children,
}) => (
<html {...stylex.props(styles.html)} lang="en">
<head>
<meta charSet="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>@redwoodjs/starter-stylex</title>
{/* Optional: load display fonts used in the welcome page */}
<link
crossOrigin="anonymous"
href="https://fonts.googleapis.com"
rel="preconnect"
/>
<link
crossOrigin="anonymous"
href="https://fonts.gstatic.com"
rel="preconnect"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Playfair+Display:wght@700&display=block"
rel="stylesheet"
/>
<DevStyleXInject cssHref="/client/assets/stylex.css" />
<link href="/src/client.tsx" rel="modulepreload" />
</head>
<body {...stylex.props(styles.body)}>
<div id="root">{children}</div>
<script>import("/src/client.tsx")</script>
</body>
</html>
);
================================================
FILE: examples/example-redwoodsdk/src/app/components/Copy.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use client';
import { useState } from 'react';
import * as stylex from '@stylexjs/stylex';
export function Copy({ textToCopy }: { textToCopy: string }) {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(textToCopy).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
});
};
return (
<button onClick={handleCopy} {...stylex.props(styles.copyButton)}>
{copied ? 'Copied!' : 'Copy'}
</button>
);
}
const styles = stylex.create({
copyButton: {
backgroundColor: 'transparent',
color: '#ffad48',
borderWidth: 0,
borderRadius: 4,
paddingBlock: 4,
paddingInline: 12,
cursor: 'pointer',
fontSize: 16,
fontWeight: 700,
':hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
},
});
================================================
FILE: examples/example-redwoodsdk/src/app/headers.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { RouteMiddleware } from 'rwsdk/router';
export const setCommonHeaders =
(): RouteMiddleware =>
({ response, rw: { nonce } }) => {
if (!import.meta.env.VITE_IS_DEV_SERVER) {
// Forces browsers to always use HTTPS for a specified time period (2 years)
response.headers.set(
'Strict-Transport-Security',
'max-age=63072000; includeSubDomains; preload',
);
}
// Forces browser to use the declared content-type instead of trying to guess/sniff it
response.headers.set('X-Content-Type-Options', 'nosniff');
// Stops browsers from sending the referring webpage URL in HTTP headers
response.headers.set('Referrer-Policy', 'no-referrer');
// Explicitly disables access to specific browser features/APIs
response.headers.set(
'Permissions-Policy',
'geolocation=(), microphone=(), camera=()',
);
// Defines trusted sources for content loading and script execution:
response.headers.set(
'Content-Security-Policy',
`default-src 'self'; script-src 'self' 'unsafe-eval' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'self'; frame-src 'self' https://challenges.cloudflare.com; object-src 'none';`,
);
};
================================================
FILE: examples/example-redwoodsdk/src/app/pages/Counter.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use client';
import { useState } from 'react';
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
container: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 10,
padding: 10,
},
button: {
backgroundColor: 'tomato',
borderStyle: 'none',
appearance: 'none',
color: 'white',
paddingInline: 20,
paddingBlock: 10,
borderRadius: 5,
margin: 10,
},
count: {
fontFamily: 'monospace',
fontSize: 20,
},
});
export function Counter() {
const [count, setCount] = useState(0);
return (
<div {...stylex.props(styles.container)}>
<button
{...stylex.props(styles.button)}
onClick={() => setCount(count - 1)}
>
-
</button>
<span {...stylex.props(styles.count)}>{count}</span>
<button
{...stylex.props(styles.button)}
onClick={() => setCount(count + 1)}
>
+
</button>
</div>
);
}
================================================
FILE: examples/example-redwoodsdk/src/app/pages/Home.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { Welcome } from './Welcome.js';
export const Home = () => {
// _Feel free to delete this element and its import_
return <Welcome />;
};
================================================
FILE: examples/example-redwoodsdk/src/app/pages/Welcome.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import * as stylex from '@stylexjs/stylex';
import { Button } from '@stylexjs/shared-ui';
import { tokens } from '@stylexjs/shared-ui/tokens.stylex';
import { Copy } from '../components/Copy';
export const Welcome = () => {
return (
<div {...stylex.props(styles.container)}>
<header {...stylex.props(styles.header)}>
<h1 {...stylex.props(styles.title)}>Welcome to RedwoodSDK x StyleX</h1>
<p {...stylex.props(styles.subtitle)}>
You’ve just installed the starter project. Here’s what to do next.
</p>
</header>
<main>
<section {...stylex.props(styles.section)}>
<h2 {...stylex.props(styles.sectionTitle)}>Next steps</h2>
<ol {...stylex.props(styles.list)}>
<li {...stylex.props(styles.listItem)}>
Read the{' '}
<a
href="https://docs.rwsdk.com/getting-started/quick-start/"
rel="noreferrer"
target="_blank"
{...stylex.props(styles.link)}
>
Quick Start
</a>{' '}
to learn the basics.
</li>
<li {...stylex.props(styles.listItem)}>
Explore React Server Components and Server Functions in the{' '}
<a
href="https://docs.rwsdk.com/"
rel="noreferrer"
target="_blank"
{...stylex.props(styles.link)}
>
Docs
</a>
.
</li>
<li {...stylex.props(styles.listItem)}>
Join the community to ask questions and share what you’re
building.
</li>
</ol>
</section>
<section {...stylex.props(styles.section)}>
<h2 {...stylex.props(styles.sectionTitle)}>Deploy to Cloudflare</h2>
<p>
RedwoodSDK runs on Cloudflare Workers. Here’s the quickest way to
deploy.
</p>
<div {...stylex.props(styles.codeBlock)}>
<span {...stylex.props(styles.codePrompt)}>$</span>
<code {...stylex.props(styles.code)}>pnpm release</code>
<Copy textToCopy="pnpm release" />
</div>
<p>
Need more detail? Read the{' '}
<a
href="https://docs.rwsdk.com/core/hosting/"
rel="noreferrer"
target="_blank"
{...stylex.props(styles.link)}
>
Cloudflare deployment guide
</a>
.
</p>
</section>
<section>
<Button xstyle={styles.btn}>button from @stylexjs/shared-ui</Button>
</section>
</main>
</div>
);
};
const opacity = (color: string, percentage: number) =>
`color-mix(in oklab, ${color} ${percentage}%, transparent)`;
const styles = stylex.create({
container: {
maxWidth: 1100,
marginInline: 'auto',
paddingBlock: 80,
paddingInline: 32,
fontFamily:
"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
color: '#1a1a1a',
minHeight: '100vh',
},
header: { marginBottom: 64 },
title: {
fontFamily: 'Playfair Display, serif',
fontSize: 64,
fontWeight: 700,
lineHeight: 0.9,
margin: 0,
},
subtitle: {
fontFamily:
"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
fontSize: 26,
marginTop: 12,
},
section: { marginBottom: 64 },
sectionTitle: {
fontFamily: 'Playfair Display, serif',
fontSize: 40,
fontWeight: 700,
marginBottom: 16,
},
list: {
listStylePosition: 'inside',
listStyleType: 'decimal',
paddingLeft: 0,
fontSize: 20,
lineHeight: 1.6,
},
listItem: { marginBottom: 12 },
link: {
color: '#f47238',
fontWeight: 700,
textDecorationLine: 'none',
':hover': { color: '#ffad48' },
},
codeBlock: {
backgroundColor: '#1b1b1b',
color: '#ffad48',
padding: 16,
borderRadius: 8,
fontFamily:
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
fontSize: 20,
display: 'flex',
alignItems: 'center',
gap: 8,
marginTop: 16,
},
codePrompt: { color: '#f47238' },
code: { flexGrow: 1 },
btn: {
backgroundColor: {
default: opacity(tokens.primaryColor, 50),
':hover': opacity(tokens.primaryColor, 95),
},
transform: {
default: null,
':active': 'scale(0.97)',
},
transitionProperty: 'transform',
transitionDuration: {
default: '0.3s',
':active': '0.05s',
},
},
});
================================================
FILE: examples/example-redwoodsdk/src/app/root.css
================================================
:root { --stylex-injection: 0; }
================================================
FILE: examples/example-redwoodsdk/src/app/shared/links.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { defineLinks } from 'rwsdk/router';
export const link = defineLinks(['/']);
================================================
FILE: examples/example-redwoodsdk/src/client.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { initClient } from 'rwsdk/client';
initClient();
if (import.meta.env.DEV) {
// @ts-ignore
import('virtual:stylex:css-only');
}
================================================
FILE: examples/example-redwoodsdk/src/worker.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { render, route } from 'rwsdk/router';
import { defineApp } from 'rwsdk/worker';
import './app/root.css';
import { Document } from '@/app/Document';
import { setCommonHeaders } from '@/app/headers';
import { Home } from '@/app/pages/Home';
import { Counter } from './app/pages/Counter';
export type AppContext = {};
export default defineApp([
setCommonHeaders(),
({ ctx }) => {
// setup ctx here
ctx;
},
render(Document, [route('/', Home), route('/counter', Counter)]),
]);
================================================
FILE: examples/example-redwoodsdk/tsconfig.json
================================================
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
"target": "es2021",
/* Specify a set of bundled library declaration files that describe the target runtime environment. */
"lib": ["DOM", "DOM.Iterable", "ESNext", "ES2022"],
/* Specify what JSX code is generated. */
"jsx": "react-jsx",
/* Specify what module code is generated. */
"module": "es2022",
/* Specify how TypeScript looks up a file from a given module specifier. */
"moduleResolution": "bundler",
/* Specify type package names to be included without being referenced in a source file. */
"types": [
"@cloudflare/workers-types",
"./worker-configuration.d.ts",
"./types/rw.d.ts",
"./types/vite.d.ts"
],
"paths": {
"@/*": ["./src/*"]
},
/* Enable importing .json files */
"resolveJsonModule": true,
/* Enable error reporting in type-checked JavaScript files. */
"checkJs": false,
/* Disable emitting files from a compilation. */
"noEmit": true,
/* Ensure that each file can be safely transpiled without relying on other imports. */
"isolatedModules": true,
/* Allow 'import x from y' when a module doesn't have a default export. */
"allowSyntheticDefaultImports": true,
/* Ensure that casing is correct in imports. */
"forceConsistentCasingInFileNames": true,
/* Enable all strict type-checking options. */
"strict": true,
/* Skip type checking all .d.ts files. */
"skipLibCheck": true
},
"exclude": ["node_modules", ".tmp"]
}
================================================
FILE: examples/example-redwoodsdk/types/css.d.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.css' {}
declare module '*.css?url' {
export default string;
}
================================================
FILE: examples/example-redwoodsdk/types/rw.d.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { AppContext } from '../src/worker';
declare module 'rwsdk/worker' {
// eslint-disable-next-line no-unused-vars
interface DefaultAppContext extends AppContext {}
}
================================================
FILE: examples/example-redwoodsdk/types/vite.d.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
declare module '*?url' {
const result: string;
export default result;
}
================================================
FILE: examples/example-redwoodsdk/vite.config.mts
================================================
import { defineConfig } from 'vite';
import { redwood } from 'rwsdk/vite';
import { cloudflare } from '@cloudflare/vite-plugin';
import stylex from '@stylexjs/unplugin';
export default defineConfig({
plugins: [
cloudflare({
viteEnvironment: { name: 'worker' },
}),
redwood(),
// @ts-ignore
stylex.vite({
// Keep transforms on in dev, but only expose the CSS endpoint (no runtime/HTML injection)
devMode: 'css-only',
devPersistToDisk: true,
dev: process.env.NODE_ENV === 'development',
runtimeInjection: false,
}),
],
});
================================================
FILE: examples/example-redwoodsdk/worker-configuration.d.ts
================================================
/* eslint-disable */
// Generated by Wrangler by running `wrangler types --include-runtime false` (hash: 6b6db21c80ba9cfeb812f12bd8b8b3e4)
declare namespace Cloudflare {
interface GlobalProps {
mainModule: typeof import('./src/worker');
}
interface Env {
ASSETS: Fetcher;
}
}
interface Env extends Cloudflare.Env {}
================================================
FILE: examples/example-redwoodsdk/wrangler.jsonc
================================================
{
// Schema reference for wrangler configuration
"$schema": "node_modules/wrangler/config-schema.json",
// Name of your worker
"name": "__change_me__",
// Entry point for your worker
"main": "src/worker.tsx",
// Compatibility settings
"compatibility_date": "2025-08-21",
"compatibility_flags": ["nodejs_compat"],
// Assets configuration
"assets": {
"binding": "ASSETS"
},
// Observability settings
"observability": {
"enabled": true
},
// Environment variables
"vars": {
// Add your environment variables here
}
}
================================================
FILE: examples/example-rollup/README.md
================================================
# Rollup example using StyleX
TBD
================================================
FILE: examples/example-rollup/babel.config.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const config = {
assumptions: {
iterableIsArray: true,
},
comments: false,
presets: [
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
'@babel/preset-flow',
],
};
export default config;
================================================
FILE: examples/example-rollup/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StyleX with Rollup</title>
</head>
<body>
<div id="root"></div>
<script src="/.build/bundle.js"></script>
</body>
</html>
================================================
FILE: examples/example-rollup/package.json
================================================
{
"private": true,
"name": "example-rollup",
"version": "0.18.1",
"description": "A simple rollup example to test stylexjs/rollup-plugin",
"main": "index.js",
"scripts": {
"example:build": "rollup --config ./rollup.config.mjs",
"example:dev": "rollup --config ./rollup.config.mjs --watch",
"example:serve": "serve"
},
"license": "MIT",
"dependencies": {
"@stylexjs/stylex": "0.18.1",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-flow": "^7.27.1",
"@babel/preset-react": "^7.17.12",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^26.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^5.0.7",
"@stylexjs/rollup-plugin": "0.18.1",
"rollup": "^4.59.0",
"serve": "^14.2.4"
}
}
================================================
FILE: examples/example-rollup/rollup.config.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import stylexPlugin from '@stylexjs/rollup-plugin';
const babelPlugin = babel({
babelHelpers: 'bundled',
});
const config = {
input: './src/index.js',
output: {
file: './.build/bundle.js',
format: 'cjs',
},
// See all options in the babel plugin configuration docs:
// https://stylexjs.com/docs/api/configuration/babel-plugin/
plugins: [
babelPlugin,
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development',
),
preventAssignment: true,
}),
stylexPlugin({
fileName: 'stylex.css',
runtimeInjection: true,
}),
],
};
export default config;
================================================
FILE: examples/example-rollup/src/App.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
import * as stylex from '@stylexjs/stylex';
export default function App() {
return (
<div {...stylex.props(styles.main)}>
<div {...stylex.props(styles.card)}>Content</div>
</div>
);
}
const styles = stylex.create({
main: {
width: '100vw',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'lightblue',
},
card: {
backgroundColor: '#fefefe',
padding: '1rem',
borderRadius: 10,
justifyContent: 'center',
display: 'flex',
alignItems: 'center',
color: '#333',
fontFamily: 'Arial',
},
});
================================================
FILE: examples/example-rollup/src/index.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
================================================
FILE: examples/example-rspack/README.md
================================================
# Rspack Example with StyleX
This project demonstrates how to run StyleX inside Rspack via `@stylexjs/unplugin`. The plugin compiles StyleX at build time and appends the generated CSS to the stylesheet emitted by `CssExtractRspackPlugin`.
### Prerequisites
- Node.js 18+
- `@rspack/cli` / `@rspack/core`
- `MiniCssExtractRspackPlugin` (bundled with Rspack) or another CSS extractor
- `@stylexjs/unplugin`
## Install dependencies
```bash
npm install
```
## Rspack configuration (`rspack.config.js`)
```javascript
const path = require('path');
const rspack = require('@rspack/core');
const stylex = require('@stylexjs/unplugin').default;
module.exports = {
entry: { app: path.resolve(__dirname, 'src/main.jsx') },
plugins: [
stylex.rspack({}),
new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),
],
module: {
rules: [
{ test: /\.[jt]sx?$/, loader: 'builtin:swc-loader' },
{ test: /\.css$/, use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'] },
],
},
};
```
- `stylex.rspack()` injects the plugin into the webpack-compatible compiler hooks.
- The CSS extract plugin ensures there is a concrete CSS asset for StyleX to append to.
## CSS entry point (`src/global.css`)
The app imports `src/global.css` so every build produces `index.css`. The StyleX plugin appends its aggregated CSS to that file during both dev and production builds.
## Commands
```bash
# Start the Rspack dev server with StyleX transforms
npm run example:dev
# Production build with aggregated StyleX CSS in dist/index.css
npm run example:build
```
Execute the scripts from `examples/example-rspack`. The `dist/` output already contains the StyleX CSS merged into `index.css`.
================================================
FILE: examples/example-rspack/package.json
================================================
{
"name": "example-rspack",
"private": true,
"version": "0.18.1",
"description": "Example: StyleX with Rspack via @stylexjs/unplugin",
"scripts": {
"example:build": "rspack build --config ./rspack.config.js",
"example:dev": "rspack serve --config ./rspack.config.js"
},
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0",
"@stylexjs/stylex": "0.18.1"
},
"devDependencies": {
"@rspack/cli": "^1.6.4",
"@rspack/core": "^1.6.4",
"css-loader": "^7.1.2",
"@stylexjs/unplugin": "0.18.1"
}
}
================================================
FILE: examples/example-rspack/public/index.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>StyleX + Rspack</title>
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
================================================
FILE: examples/example-rspack/rspack.config.js
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
const path = require('path');
const rspack = require('@rspack/core');
const stylex = require('@stylexjs/unplugin').default;
/** @type {import('@rspack/core').Configuration} */
module.exports = {
mode: 'development',
context: __dirname,
entry: {
app: path.resolve(__dirname, 'src/main.jsx'),
},
experiments: {
// Disable built-in CSS experiment when using extract plugin
css: false,
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
clean: true,
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: { syntax: 'ecmascript', jsx: true },
transform: { react: { runtime: 'automatic' } },
},
},
},
{
test: /\.css$/,
use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
},
],
},
plugins: [
// Use the unplugin adapter for Rspack/webpack
stylex.rspack({}),
new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),
],
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
port: 5174,
},
};
================================================
FILE: examples/example-rspack/src/App.jsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import * as stylex from '@stylexjs/stylex';
export default function App() {
return (
<main {...stylex.props(styles.app)}>
<h1 {...stylex.props(styles.title)}>StyleX + Rspack + unplugin</h1>
</main>
);
}
const styles = stylex.create({
app: {
minHeight: '100vh',
display: 'grid',
placeItems: 'center',
backgroundColor: '#f7f5ff',
},
title: {
color: 'rebeccapurple',
fontSize: 32,
fontWeight: 700,
},
});
================================================
FILE: examples/example-rspack/src/global.css
================================================
/* Ensure Rspack produces a CSS asset to inject StyleX into */
:root {
--brand-color: #663399;
}
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol;
}
================================================
FILE: examples/example-rspack/src/main.jsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import './global.css';
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
================================================
FILE: examples/example-storybook/.babelrc.cjs
================================================
const path = require('path')
module.exports = {
presets: [
['@babel/preset-react', {runtime: 'automatic'}],
'@babel/preset-typescript'
],
plugins: [
[
'@stylexjs/babel-plugin',
{
debug: process.env.NODE_ENV === 'development',
unstable_moduleResolution: {
type: 'commonJS'
}
}
]
]
}
================================================
FILE: examples/example-storybook/.storybook/main.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import type { StorybookConfig } from '@storybook/react-vite';
import { join, dirname } from 'node:path';
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')));
}
const config: StorybookConfig = {
stories: [
'../stories/**/*.mdx',
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-docs'),
getAbsolutePath('@chromatic-com/storybook'),
],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {},
},
typescript: {
/* infer property docs from typescript types */
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
shouldRemoveUndefinedFromOptional: true,
propFilter: (prop) => {
/* does property have documentation? */
const hasDoc = prop.description !== '';
/* is property defined in external dependency package? */
const isExternal =
prop.parent && /node_modules/.test(prop.parent.fileName);
return hasDoc && !isExternal;
},
},
},
core: {
/* use builder-vite for fast startup times and near-instant HMR */
builder: {
name: '@storybook/builder-vite',
options: {
/* use a different config for static build for self-contained setup to
include external deps (like react) into the served package */
viteConfigPath: './vite-storybook.config.ts',
},
},
disableTelemetry: true,
},
};
export default config;
================================================
FILE: examples/example-storybook/.storybook/preview.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import '../stories/styles.css';
/** @type { import('@storybook/react-vite').Preview } */
const preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
================================================
FILE: examples/example-storybook/.storybook/vitest.setup.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
import { setProjectAnnotations } from '@storybook/react-vite';
import * as projectAnnotations from './preview';
// This is an important step to apply the right configuration when testing your stories.
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
================================================
FILE: examples/example-storybook/README.md
================================================
# Storybook example using StyleX
This is a [Storybook](https://storybook.js.org/) project that demonstrates how to use StyleX with component documentation and testing.
## Getting Started
First, run the development server:
```bash
npm run storybook
```
Open [http://localhost:6006](http://localhost:6006) with your browser to see the Storybook interface.
You can start editing the components by modifying files in the `stories/` directory. Storybook will automatically reload as you edit the files.
## Static build of the Storybook
To build the static Storybook for deployment:
```bash
npm run build-storybook
```
## Learn More
To learn more about Storybook and StyleX, take a look at the following resources:
- [Storybook Documentation](https://storybook.js.org/docs) - learn about Storybook features and API.
- [StyleX Documentation](https://stylexjs.com/docs) - learn about StyleX features and usage.
- [Learn Storybook](https://storybook.js.org/tutorials) - interactive Storybook tutorials.
You can check out [the Storybook GitHub repository](https://github.com/storybookjs/storybook) and [the StyleX GitHub repository](https://github.com/facebook/stylex) - your feedback and contributions are welcome!
================================================
FILE: examples/example-storybook/eslint.config.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import stylexPlugin from '@stylexjs/eslint-plugin';
import tseslint, { parser as typescriptParser } from 'typescript-eslint';
import storybookPlugin from 'eslint-plugin-storybook';
import importPlugin from 'eslint-plugin-import';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const typescriptPlugin = tseslint.config({
files: ['**/*.ts', '**/*.tsx'],
extends: [...tseslint.configs.recommended],
rules: {
'@typescript-eslint/no-unused-vars': [
'error',
{
caughtErrors: 'none',
argsIgnorePattern: '^_',
destructuredArrayIgnorePattern: '^_',
varsIgnorePattern: '^_.',
},
],
'@typescript-eslint/object-curly-spacing': ['warn'],
'@typescript-eslint/consistent-type-imports': ['error'],
'no-undef': 'off',
},
});
export default [
{
ignores: ['postcss.config.*', 'storybook-static/'],
},
{
plugins: {
'@stylexjs': stylexPlugin,
...typescriptPlugin,
...storybookPlugin.configs['flat/recommended'],
import: importPlugin,
},
languageOptions: {
parser: typescriptParser,
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
tsconfigRootDir: __dirname,
ecmaFeatures: {
jsx: true,
},
},
},
settings: {
'import/ignore': ['node_modules'],
react: {
version: 'detect',
},
},
rules: {
'@stylexjs/valid-styles': 'error',
'ft-flow/space-after-type-colon': 0,
'ft-flow/no-types-missing-file-annotation': 0,
'ft-flow/generic-spacing': 0,
},
},
];
================================================
FILE: examples/example-storybook/package.json
================================================
{
"private": true,
"name": "example-storybook",
"version": "0.18.1",
"scripts": {
"example:dev": "storybook dev -p 6006 --no-open",
"storybook": "storybook dev -p 6006 --no-open",
"build-storybook": "storybook build",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
},
"devDependencies": {
"@chromatic-com/storybook": "^4.1.1",
"@storybook/addon-a11y": "^9.1.7",
"@storybook/addon-docs": "^9.1.7",
"@storybook/addon-links": "^9.1.7",
"@storybook/addon-vitest": "^9.1.7",
"@storybook/react-vite": "^9.1.7",
"@stylexjs/babel-plugin": "0.18.1",
"@stylexjs/eslint-plugin": "0.18.1",
"@stylexjs/postcss-plugin": "0.18.1",
"@stylexjs/stylex": "0.18.1",
"@typescript-eslint/eslint-plugin": "^8.44.0",
"@typescript-eslint/parser": "^8.44.0",
"@vitejs/plugin-react": "^5.0.3",
"@vitest/browser": "^4.0.13",
"@vitest/coverage-v8": "^4.0.13",
"autoprefixer": "^10.4.21",
"eslint": "^9.36.0",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-storybook": "^9.1.7",
"playwright": "^1.55.0",
"postcss-nesting": "^13.0.2",
"prop-types": "^15.8.1",
"rollup-plugin-jsx-remove-attributes": "^3.1.1",
"rollup-plugin-node-externals": "^8.1.1",
"storybook": "^9.1.19",
"typescript-eslint": "^8.44.0",
"vite-plugin-dts": "^4.5.4",
"vitest": "^4.0.13"
}
}
================================================
FILE: examples/example-storybook/postcss.config.mjs
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import autoprefixer from 'autoprefixer';
import nesting from 'postcss-nesting';
import stylex from '@stylexjs/postcss-plugin';
import babelConfig from './.babelrc.cjs';
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
nesting,
stylex({
include: ['stories/**/*.{ts,tsx}'],
useCSSLayers: process.env.NODE_ENV !== 'production',
babelConfig: {
babelrc: false,
parserOpts: {
plugins: ['typescript', 'jsx'],
},
plugins: babelConfig.plugins,
},
}),
autoprefixer,
],
};
export default config;
================================================
FILE: examples/example-storybook/stories/Button.stories.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import { fn } from 'storybook/test';
import { Button } from './Button';
import { Meta, StoryObj } from '@storybook/react-vite';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta: Meta<typeof Button> = {
title: 'Example/Button',
component: Button,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
args: { onClick: fn() },
argTypes: {
variant: {
control: { type: 'select' },
options: ['primary', 'secondary', 'danger'],
description: 'The variant of the button',
},
size: {
control: { type: 'select' },
options: ['small', 'medium', 'large'],
},
},
};
export default meta;
type Story = StoryObj<typeof meta>;
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
args: {
variant: 'primary',
label: 'Primary Button',
},
};
export const Secondary: Story = {
args: {
variant: 'secondary',
label: 'Secondary Button',
},
};
export const Danger: Story = {
args: {
variant: 'danger',
label: 'Danger Button',
},
};
export const Small: Story = {
args: {
size: 'small',
label: 'Small Button',
},
};
export const Medium: Story = {
args: {
size: 'medium',
label: 'Medium Button',
},
};
export const Large: Story = {
args: {
size: 'large',
label: 'Large Button',
},
};
================================================
FILE: examples/example-storybook/stories/Button.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import { FC } from 'react';
import * as stylex from '@stylexjs/stylex';
export const buttonStyles = stylex.create({
base: {
fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
fontWeight: 500,
cursor: 'pointer',
borderWidth: 0,
borderStyle: 'none',
borderColor: 'transparent',
borderRadius: 6,
transition: 'all 0.2s ease',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
textDecoration: 'none',
transform: {
default: 'translateY(0)',
':hover': 'translateY(-1px)',
':active': 'translateY(0)',
},
boxShadow: {
default: 'none',
':hover': '0 4px 8px rgba(0, 0, 0, 0.12)',
},
},
primary: {
backgroundColor: {
default: '#0066cc',
':hover': '#0052a3',
},
color: 'white',
},
secondary: {
backgroundColor: {
default: '#f5f5f5',
':hover': '#e8e8e8',
},
color: '#333',
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#ddd',
},
danger: {
backgroundColor: {
default: '#dc3545',
':hover': '#c82333',
},
color: 'white',
},
small: {
fontSize: 12,
padding: '6px 12px',
minHeight: 28,
},
medium: {
fontSize: 14,
padding: '8px 16px',
minHeight: 36,
},
large: {
fontSize: 16,
padding: '12px 24px',
minHeight: 44,
},
});
type ButtonProps = {
/**
* The size of the button
* @default 'medium'
*/
size?: 'small' | 'medium' | 'large';
/** The variant of the button
* @default 'primary'
*/
variant?: 'primary' | 'secondary' | 'danger';
/**
* The label of the button
* @example 'Click me'
*/
label: string;
/**
* Function to call when the button is clicked
*/
onClick?: () => void;
};
export const Button: FC<ButtonProps> = ({
size = 'medium',
variant = 'primary',
label,
onClick,
}) => {
return (
<button
type="button"
{...stylex.props(
buttonStyles.base,
buttonStyles[size],
buttonStyles[variant],
)}
onClick={onClick}
>
{label}
</button>
);
};
================================================
FILE: examples/example-storybook/stories/Card.stories.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import type { Meta, StoryObj } from '@storybook/react';
import { Card } from './Card';
const meta: Meta<typeof Card> = {
title: 'Example/Card',
component: Card,
argTypes: {
elevated: { control: 'boolean' },
title: { control: 'text' },
content: { control: 'text' },
},
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
title: 'Card Title',
content: 'This is some example content for the card component.',
},
};
export const Elevated: Story = {
args: {
title: 'Elevated Card',
content: 'This card has an elevated shadow effect.',
elevated: true,
},
};
================================================
FILE: examples/example-storybook/stories/Card.tsx
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
import { FC } from 'react';
import * as stylex from '@stylexjs/stylex';
export const cardStyles = stylex.create({
base: {
backgroundColor: 'white',
borderRadius: 8,
padding: 16,
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#e0e0e0',
maxWidth: 300,
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
color: '#333',
},
content: {
fontSize: 14,
lineHeight: 1.5,
color: '#666',
},
elevated: {
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)',
},
});
type CardProps = {
title: string;
content: string;
elevated?: boolean;
};
export const Card: FC<CardProps> = ({ title, content, elevated = false }) => {
return (
<div {...stylex.props(cardStyles.base, elevated && cardStyles.elevated)}>
<h3 {...stylex.props(cardStyles.title)}>{title}</h3>
<p {...stylex.props(cardStyles.content)}>{content}</p>
</div>
);
};
================================================
FILE: examples/example-storybook/stories/styles.css
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
/* StyleX styles will be injected here by PostCSS */
@stylex;
================================================
FILE: examples/example-storybook/vite-storybook.config.ts
================================================
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import removeTestIdAttribute from 'rollup-plugin-jsx-remove-attributes';
import externals from 'rollup-plugin-node-externals';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import type { PluginOption, UserConfig } from 'vite';
export const plugins = [
react({
babel: {
babelrc: true,
},
}),
dts({
entryRoot: 'stories/',
}),
removeTestIdAttribute({
attributes:
gitextract_gl0n7f1_/
├── .eslintrc.js
├── .flowconfig
├── .github/
│ ├── CODEOWNERS
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.yml
│ │ └── feature.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── benchmarks.yml
│ ├── tests.yml
│ └── typos.toml
├── .gitignore
├── .prettierignore
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── .watchmanconfig
├── CHANGELOG.md
├── LICENSE
├── README.md
├── examples/
│ ├── example-bun/
│ │ ├── .eslintrc.js
│ │ ├── README.md
│ │ ├── bunfig.toml
│ │ ├── package.json
│ │ ├── scripts/
│ │ │ ├── build.mjs
│ │ │ ├── dev.mjs
│ │ │ └── start.mjs
│ │ └── src/
│ │ ├── App.jsx
│ │ ├── global.css
│ │ ├── globalTokens.stylex.js
│ │ ├── index.dev.html
│ │ ├── index.html
│ │ └── main.jsx
│ ├── example-cli/
│ │ ├── .gitignore
│ │ ├── .stylex.json5
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── source/
│ │ │ ├── app/
│ │ │ │ ├── CardThemes.ts
│ │ │ │ ├── CardTokens.stylex.ts
│ │ │ │ ├── Counter.tsx
│ │ │ │ ├── globalTokens.stylex.ts
│ │ │ │ ├── globals.css
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ └── components/
│ │ │ └── Card.tsx
│ │ └── tsconfig.json
│ ├── example-esbuild/
│ │ ├── .eslintrc.js
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ ├── scripts/
│ │ │ └── build.mjs
│ │ └── src/
│ │ ├── App.jsx
│ │ ├── global.css
│ │ └── globalTokens.stylex.js
│ ├── example-nextjs/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── InteractiveCard.tsx
│ │ │ ├── app.css
│ │ │ ├── darkMode.stylex.ts
│ │ │ ├── globalTokens.stylex.ts
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── babel.config.js
│ │ ├── components/
│ │ │ ├── Card.tsx
│ │ │ └── CardTokens.stylex.ts
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ └── tsconfig.json
│ ├── example-react-router/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── server.js
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ └── MainArticle.tsx
│ │ │ ├── entry.browser.tsx
│ │ │ ├── entry.rsc.tsx
│ │ │ ├── entry.ssr.tsx
│ │ │ ├── routes/
│ │ │ │ ├── about/
│ │ │ │ │ └── route.tsx
│ │ │ │ ├── config.ts
│ │ │ │ ├── home/
│ │ │ │ │ └── route.tsx
│ │ │ │ └── root/
│ │ │ │ ├── DevStyleXInject.tsx
│ │ │ │ ├── client.tsx
│ │ │ │ └── route.tsx
│ │ │ └── stylex.css
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── example-redwoodsdk/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── DevStyleXInject.tsx
│ │ │ │ ├── Document.tsx
│ │ │ │ ├── components/
│ │ │ │ │ └── Copy.tsx
│ │ │ │ ├── headers.ts
│ │ │ │ ├── pages/
│ │ │ │ │ ├── Counter.tsx
│ │ │ │ │ ├── Home.tsx
│ │ │ │ │ └── Welcome.tsx
│ │ │ │ ├── root.css
│ │ │ │ └── shared/
│ │ │ │ └── links.ts
│ │ │ ├── client.tsx
│ │ │ └── worker.tsx
│ │ ├── tsconfig.json
│ │ ├── types/
│ │ │ ├── css.d.ts
│ │ │ ├── rw.d.ts
│ │ │ └── vite.d.ts
│ │ ├── vite.config.mts
│ │ ├── worker-configuration.d.ts
│ │ └── wrangler.jsonc
│ ├── example-rollup/
│ │ ├── README.md
│ │ ├── babel.config.mjs
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ └── src/
│ │ ├── App.js
│ │ └── index.js
│ ├── example-rspack/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ ├── rspack.config.js
│ │ └── src/
│ │ ├── App.jsx
│ │ ├── global.css
│ │ └── main.jsx
│ ├── example-storybook/
│ │ ├── .babelrc.cjs
│ │ ├── .storybook/
│ │ │ ├── main.ts
│ │ │ ├── preview.ts
│ │ │ └── vitest.setup.ts
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ ├── stories/
│ │ │ ├── Button.stories.ts
│ │ │ ├── Button.tsx
│ │ │ ├── Card.stories.ts
│ │ │ ├── Card.tsx
│ │ │ └── styles.css
│ │ ├── vite-storybook.config.ts
│ │ └── vitest.config.ts
│ ├── example-vite/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.jsx
│ │ │ ├── index.css
│ │ │ └── main.jsx
│ │ └── vite.config.mjs
│ ├── example-vite-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── eslint.config.js
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.tsx
│ │ │ ├── index.css
│ │ │ └── main.tsx
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.node.json
│ │ └── vite.config.ts
│ ├── example-vite-rsc/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── DevStyleXInject.tsx
│ │ │ ├── action.tsx
│ │ │ ├── client.tsx
│ │ │ ├── framework/
│ │ │ │ ├── entry.browser.tsx
│ │ │ │ ├── entry.rsc.tsx
│ │ │ │ └── entry.ssr.tsx
│ │ │ ├── index.css
│ │ │ └── root.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── example-waku/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── robots.txt
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── DevStyleXInject.tsx
│ │ │ │ ├── counter.tsx
│ │ │ │ ├── footer.tsx
│ │ │ │ └── header.tsx
│ │ │ ├── global.css
│ │ │ ├── pages/
│ │ │ │ ├── _layout.tsx
│ │ │ │ ├── about.tsx
│ │ │ │ └── index.tsx
│ │ │ └── pages.gen.ts
│ │ ├── tsconfig.json
│ │ └── waku.config.ts
│ └── example-webpack/
│ ├── .babelrc.js
│ ├── .eslintrc.js
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.jsx
│ │ ├── app.css
│ │ ├── components/
│ │ │ └── CTAButton.jsx
│ │ ├── index.js
│ │ └── tokens.stylex.js
│ └── webpack.config.js
├── flow-typed/
│ ├── babel-plugins.js
│ ├── environments/
│ │ ├── bom.js
│ │ ├── cssom.js
│ │ ├── dom.js
│ │ ├── html.js
│ │ ├── jsx.js
│ │ ├── node.js
│ │ └── streams.js
│ ├── flow-api-translator.js
│ ├── npm/
│ │ ├── @babel/
│ │ │ ├── cli_vx.x.x.js
│ │ │ ├── core.js
│ │ │ ├── eslint-parser_vx.x.x.js
│ │ │ ├── generator.js
│ │ │ ├── helper-module-imports.js
│ │ │ ├── node_vx.x.x.js
│ │ │ ├── parser.js
│ │ │ ├── preset-env_vx.x.x.js
│ │ │ ├── preset-flow_vx.x.x.js
│ │ │ ├── preset-react_vx.x.x.js
│ │ │ ├── preset-typescript_vx.x.x.js
│ │ │ ├── traverse.js
│ │ │ └── types.js
│ │ ├── @chromatic-com/
│ │ │ └── storybook_vx.x.x.js
│ │ ├── @csstools/
│ │ │ └── css-tokenizer_v3.x.x.js
│ │ ├── ansis_vx.x.x.js
│ │ ├── autoprefixer_vx.x.x.js
│ │ ├── babel-loader_vx.x.x.js
│ │ ├── benchmark_vx.x.x.js
│ │ ├── brotli-size_vx.x.x.js
│ │ ├── chalk_v4.x.x.js
│ │ ├── clean-css_vx.x.x.js
│ │ ├── clsx_v1.x.x.js
│ │ ├── codemirror_vx.x.x.js
│ │ ├── colors_v1.x.x.js
│ │ ├── cross-env_vx.x.x.js
│ │ ├── css-loader_vx.x.x.js
│ │ ├── css-mediaquery_vx.x.x.js
│ │ ├── css-shorthand-expand_vx.x.x.js
│ │ ├── esbuild_vx.x.x.js
│ │ ├── estree.js
│ │ ├── fast-glob_vx.x.x.js
│ │ ├── fb-watchman_vx.x.x.js
│ │ ├── file-loader_vx.x.x.js
│ │ ├── flow-bin_v0.x.x.js
│ │ ├── flow-enums-runtime_v0.x.x.js
│ │ ├── glob-parent_vx.x.x.js
│ │ ├── html-webpack-plugin_vx.x.x.js
│ │ ├── husky_vx.x.x.js
│ │ ├── invariant_v2.x.x.js
│ │ ├── is-glob_vx.x.x.js
│ │ ├── jest-environment-jsdom_vx.x.x.js
│ │ ├── jest_v27.x.x.js
│ │ ├── jest_vx.x.x.js
│ │ ├── js-yaml_v4.x.x.js
│ │ ├── json5_vx.x.x.js
│ │ ├── mkdirp_v1.x.x.js
│ │ ├── next_vx.x.x.js
│ │ ├── playwright_vx.x.x.js
│ │ ├── postcss-loader_vx.x.x.js
│ │ ├── postcss-nesting_vx.x.x.js
│ │ ├── postcss-value-parser_vx.x.x.js
│ │ ├── postcss_vx.x.x.js
│ │ ├── react-codemirror2_vx.x.x.js
│ │ ├── react-refresh_vx.x.x.js
│ │ ├── react-syntax-highlighter_vx.x.x.js
│ │ ├── rimraf_v5.x.x.js
│ │ ├── rollup-plugin-jsx-remove-attributes_vx.x.x.js
│ │ ├── rollup-plugin-node-externals_vx.x.x.js
│ │ ├── rollup.js
│ │ ├── scripts_vx.x.x.js
│ │ ├── semver_v7.x.x.js
│ │ ├── serve_vx.x.x.js
│ │ ├── storybook_vx.x.x.js
│ │ ├── string-natural-compare_v3.x.x.js
│ │ ├── styled-jsx_vx.x.x.js
│ │ ├── stylelint_vx.x.x.js
│ │ ├── styleq_vx.x.x.js
│ │ ├── terser_vx.x.x.js
│ │ ├── typescript-eslint_vx.x.x.js
│ │ ├── typescript_vx.x.x.js
│ │ ├── unplugin_vx.x.x.js
│ │ ├── vite-plugin-dts_vx.x.x.js
│ │ ├── vitest_vx.x.x.js
│ │ ├── webpack-cli_vx.x.x.js
│ │ ├── webpack-dev-server_vx.x.x.js
│ │ ├── webpack_v5.x.x.js
│ │ └── yargs_v17.x.x.js
│ └── stubs.js
├── flow-typed.config.json
├── package.json
├── packages/
│ ├── @stylexjs/
│ │ ├── babel-plugin/
│ │ │ ├── .babelrc
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ └── constants.stylex.js
│ │ │ │ ├── evaluation-import-test.js
│ │ │ │ ├── legacy/
│ │ │ │ │ ├── stylex-transform-call-test.js
│ │ │ │ │ ├── stylex-transform-legacy-shorthands-test.js
│ │ │ │ │ ├── transform-legacy-polyfills-test.js
│ │ │ │ │ ├── transform-logical-properties-test.js
│ │ │ │ │ ├── transform-logical-values-test.js
│ │ │ │ │ └── transform-pre-plugin-test.js
│ │ │ │ ├── transform-import-export-test.js
│ │ │ │ ├── transform-polyfills-test.js
│ │ │ │ ├── transform-process-test.js
│ │ │ │ ├── transform-stylex-create-test.js
│ │ │ │ ├── transform-stylex-createTheme-test.js
│ │ │ │ ├── transform-stylex-defineConsts-test.js
│ │ │ │ ├── transform-stylex-defineMarker-test.js
│ │ │ │ ├── transform-stylex-defineVars-test.js
│ │ │ │ ├── transform-stylex-keyframes-test.js
│ │ │ │ ├── transform-stylex-positionTry-test.js
│ │ │ │ ├── transform-stylex-props-test.js
│ │ │ │ ├── transform-stylex-viewTransitionClass-test.js
│ │ │ │ ├── transform-stylex-when-test.js
│ │ │ │ ├── transform-value-normalization-test.js
│ │ │ │ ├── validation-import-export-test.js
│ │ │ │ ├── validation-stylex-create-test.js
│ │ │ │ ├── validation-stylex-createTheme-test.js
│ │ │ │ ├── validation-stylex-defineConsts-test.js
│ │ │ │ ├── validation-stylex-defineMarker-test.js
│ │ │ │ ├── validation-stylex-defineVars-test.js
│ │ │ │ └── validation-stylex-keyframes-test.js
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ ├── shared/
│ │ │ │ ├── README.md
│ │ │ │ ├── common-types.d.ts
│ │ │ │ ├── common-types.js
│ │ │ │ ├── hash.js
│ │ │ │ ├── index.js
│ │ │ │ ├── messages.js
│ │ │ │ ├── physical-rtl/
│ │ │ │ │ ├── generate-ltr.js
│ │ │ │ │ └── generate-rtl.js
│ │ │ │ ├── preprocess-rules/
│ │ │ │ │ ├── PreRule.js
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── PreRule-test.js
│ │ │ │ │ │ └── flatten-raw-style-obj-test.js
│ │ │ │ │ ├── application-order.js
│ │ │ │ │ ├── basic-validation.js
│ │ │ │ │ ├── flatten-raw-style-obj.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── legacy-expand-shorthands.js
│ │ │ │ │ └── property-specificity.js
│ │ │ │ ├── stylex-consts-utils.js
│ │ │ │ ├── stylex-create-theme.d.ts
│ │ │ │ ├── stylex-create-theme.js
│ │ │ │ ├── stylex-create.js
│ │ │ │ ├── stylex-defaultMarker.js
│ │ │ │ ├── stylex-define-consts.js
│ │ │ │ ├── stylex-define-vars.d.ts
│ │ │ │ ├── stylex-define-vars.js
│ │ │ │ ├── stylex-first-that-works.js
│ │ │ │ ├── stylex-keyframes.js
│ │ │ │ ├── stylex-position-try.js
│ │ │ │ ├── stylex-vars-utils.js
│ │ │ │ ├── stylex-view-transition-class.js
│ │ │ │ ├── types/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── stylex-types-test.js
│ │ │ │ │ ├── index.d.ts
│ │ │ │ │ └── index.js
│ │ │ │ ├── utils/
│ │ │ │ │ ├── Rule.js
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── convert-to-className-test.js
│ │ │ │ │ │ ├── split-css-value-test.js
│ │ │ │ │ │ └── transform-value-test.js
│ │ │ │ │ ├── convert-to-className.js
│ │ │ │ │ ├── dashify.js
│ │ │ │ │ ├── default-options.js
│ │ │ │ │ ├── file-based-identifier.js
│ │ │ │ │ ├── generate-css-rule.js
│ │ │ │ │ ├── normalize-value.js
│ │ │ │ │ ├── normalizers/
│ │ │ │ │ │ ├── convert-camel-case-values.js
│ │ │ │ │ │ ├── detect-unclosed-fns.js
│ │ │ │ │ │ ├── font-size-px-to-rem.js
│ │ │ │ │ │ ├── leading-zero.js
│ │ │ │ │ │ ├── quotes.js
│ │ │ │ │ │ ├── timings.js
│ │ │ │ │ │ ├── whitespace.js
│ │ │ │ │ │ └── zero-dimensions.js
│ │ │ │ │ ├── object-utils.js
│ │ │ │ │ ├── rule-utils.js
│ │ │ │ │ ├── split-css-value.js
│ │ │ │ │ └── transform-value.js
│ │ │ │ ├── validate.js
│ │ │ │ └── when/
│ │ │ │ └── when.js
│ │ │ ├── utils/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── evaluate-path-test.js
│ │ │ │ │ ├── js-to-ast-test.js
│ │ │ │ │ └── state-manager-test.js
│ │ │ │ ├── add-sourcemap-data.js
│ │ │ │ ├── ast-helpers.js
│ │ │ │ ├── dev-classname.js
│ │ │ │ ├── evaluate-path.js
│ │ │ │ ├── evaluation-errors.js
│ │ │ │ ├── helpers.js
│ │ │ │ ├── js-to-ast.js
│ │ │ │ ├── state-manager.js
│ │ │ │ └── validate.js
│ │ │ └── visitors/
│ │ │ ├── __tests__/
│ │ │ │ └── parse-stylex-create-arg-test.js
│ │ │ ├── imports.js
│ │ │ ├── parse-stylex-create-arg.js
│ │ │ ├── stylex-create-theme.js
│ │ │ ├── stylex-create.js
│ │ │ ├── stylex-default-marker.js
│ │ │ ├── stylex-define-consts.js
│ │ │ ├── stylex-define-marker.js
│ │ │ ├── stylex-define-vars.js
│ │ │ ├── stylex-keyframes.js
│ │ │ ├── stylex-merge.js
│ │ │ ├── stylex-position-try.js
│ │ │ ├── stylex-props.js
│ │ │ └── stylex-view-transition-class.js
│ │ ├── cli/
│ │ │ ├── .babelrc.js
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __mocks__/
│ │ │ │ │ ├── snapshot/
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ └── button.js
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ │ ├── pages/
│ │ │ │ │ │ │ └── home.js
│ │ │ │ │ │ └── stylex_bundle.css
│ │ │ │ │ ├── snapshot2/
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ └── button.js
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ │ └── pages/
│ │ │ │ │ │ └── home.js
│ │ │ │ │ ├── source/
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ └── button.js
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ │ └── pages/
│ │ │ │ │ │ └── home.js
│ │ │ │ │ └── source2/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ └── button.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── nonjs.txt
│ │ │ │ │ └── pages/
│ │ │ │ │ └── home.js
│ │ │ │ └── compile-stylex-folder-test.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── cache.js
│ │ │ ├── config.js
│ │ │ ├── errors.js
│ │ │ ├── files.js
│ │ │ ├── hash.js
│ │ │ ├── index.js
│ │ │ ├── modules.js
│ │ │ ├── options.js
│ │ │ ├── plugins.js
│ │ │ ├── transform.js
│ │ │ └── watcher.js
│ │ ├── create-stylex-app/
│ │ │ ├── .babelrc.js
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── index.js
│ │ │ │ ├── templates.js
│ │ │ │ └── utils/
│ │ │ │ ├── fetch-template.js
│ │ │ │ ├── files.js
│ │ │ │ └── packages.js
│ │ │ └── templates.json
│ │ ├── eslint-plugin/
│ │ │ ├── .babelrc
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── stylex-enforce-extension-test.js
│ │ │ │ ├── stylex-no-conflicting-props-test.js
│ │ │ │ ├── stylex-no-legacy-contextual-styles-test.js
│ │ │ │ ├── stylex-no-lookahead-selectors-test.js
│ │ │ │ ├── stylex-no-nonstandard-styles-test.js
│ │ │ │ ├── stylex-no-unused-test.js
│ │ │ │ ├── stylex-sort-keys-test.js
│ │ │ │ ├── stylex-valid-shorthands-test.js
│ │ │ │ └── stylex-valid-styles-test.js
│ │ │ ├── flow_modules/
│ │ │ │ ├── eslint/
│ │ │ │ │ ├── eslint-ast.js.flow
│ │ │ │ │ ├── eslint-rule.js.flow
│ │ │ │ │ └── index.js.flow
│ │ │ │ └── estree/
│ │ │ │ └── index.js.flow
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── index.js
│ │ │ ├── reference/
│ │ │ │ ├── cleanOrderPriorities.js
│ │ │ │ ├── cssProperties.js
│ │ │ │ ├── namedColors.js
│ │ │ │ └── recessOrderPriorities.js
│ │ │ ├── rules/
│ │ │ │ ├── isAbsoluteLength.js
│ │ │ │ ├── isAnimationName.js
│ │ │ │ ├── isCSSVariable.js
│ │ │ │ ├── isHexColor.js
│ │ │ │ ├── isNumber.js
│ │ │ │ ├── isPercentage.js
│ │ │ │ ├── isPositionTryFallbacks.js
│ │ │ │ ├── isRelativeLength.js
│ │ │ │ ├── isString.js
│ │ │ │ ├── isStylexResolvedVarsToken.js
│ │ │ │ ├── makeLiteralRule.js
│ │ │ │ ├── makeRangeRule.js
│ │ │ │ ├── makeRegExRule.js
│ │ │ │ └── makeUnionRule.js
│ │ │ ├── stylex-enforce-extension.js
│ │ │ ├── stylex-no-conflicting-props.js
│ │ │ ├── stylex-no-legacy-contextual-styles.js
│ │ │ ├── stylex-no-lookahead-selectors.js
│ │ │ ├── stylex-no-nonstandard-styles.js
│ │ │ ├── stylex-no-unused.js
│ │ │ ├── stylex-sort-keys.js
│ │ │ ├── stylex-valid-shorthands.js
│ │ │ ├── stylex-valid-styles.js
│ │ │ └── utils/
│ │ │ ├── createImportTracker.js
│ │ │ ├── evaluate.js
│ │ │ ├── getDistance.js
│ │ │ ├── getPropertyName.js
│ │ │ ├── getPropertyPriorityAndType.js
│ │ │ ├── getSourceCode.js
│ │ │ ├── isWhiteSpaceOrEmpty.js
│ │ │ ├── makeVariableCheckingRule.js
│ │ │ ├── resolveKey.js
│ │ │ ├── split-css-value.js
│ │ │ └── splitShorthands.js
│ │ ├── postcss-plugin/
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __auto_discovery_fixtures__/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── babel.config.js
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── src/
│ │ │ │ │ ├── local-rsd.js
│ │ │ │ │ ├── local-stylex.js
│ │ │ │ │ └── types.d.ts
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ ├── .babelrc.js
│ │ │ │ │ ├── import-sources-object.js
│ │ │ │ │ ├── import-sources-string.js
│ │ │ │ │ ├── styles-second.js
│ │ │ │ │ └── styles.js
│ │ │ │ └── index-test.js
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ └── src/
│ │ │ ├── builder.js
│ │ │ ├── bundler.js
│ │ │ ├── discovery.js
│ │ │ ├── index.js
│ │ │ └── plugin.js
│ │ ├── rollup-plugin/
│ │ │ ├── .babelrc.cjs
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── __fixtures__/
│ │ │ │ │ ├── .babelrc.json
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── npmStyles.js
│ │ │ │ │ └── otherStyles.js
│ │ │ │ └── index-test.js
│ │ │ ├── package.json
│ │ │ └── src/
│ │ │ └── index.js
│ │ ├── shared/
│ │ │ ├── .babelrc
│ │ │ ├── package.json
│ │ │ └── src/
│ │ │ ├── index.js
│ │ │ └── utils/
│ │ │ └── property-priorities.js
│ │ ├── stylex/
│ │ │ ├── .babelrc.js
│ │ │ ├── README.md
│ │ │ ├── __tests__/
│ │ │ │ ├── createOrderedCSSStyleSheet-test.js
│ │ │ │ ├── createSheet-test.js
│ │ │ │ ├── inject-test.js
│ │ │ │ └── stylex-test.js
│ │ │ ├── flow-tests/
│ │ │ │ ├── stylex-create.js.flow
│ │ │ │ ├── test1.js.flow
│ │ │ │ ├── test2.js.flow
│ │ │ │ ├── test3.js.flow
│ │ │ │ ├── test4.js.flow
│ │ │ │ ├── theming/
│ │ │ │ │ ├── ButtonTokenThemes.js
│ │ │ │ │ └── ButtonTokens.stylex.js
│ │ │ │ └── theming1.js.flow
│ │ │ ├── jest.config.js
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ └── src/
│ │ │ ├── inject.js
│ │ │ ├── stylesheet/
│ │ │ │ ├── createCSSStyleSheet.js
│ │ │ │ ├── createOrderedCSSStyleSheet.js
│ │ │ │ ├── createSheet.js
│ │ │ │ └── utils.js
│ │ │ ├── stylex.js
│ │ │ └── types/
│ │ │ ├── StyleXCSSTypes.js
│ │ │ ├── StyleXOpaqueTypes.js
│ │ │ ├── StyleXTypes.d.ts
│ │ │ ├── StyleXTypes.js
│ │ │ ├── StyleXUtils.js
│ │ │ └── VarTypes.js
│ │ └── unplugin/
│ │ ├── .babelrc.cjs
│ │ ├── README.md
│ │ ├── __tests__/
│ │ │ └── unplugin.test.js
│ │ ├── babel-plugins/
│ │ │ └── add-mjs-extension.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── bun.d.ts
│ │ ├── bun.js
│ │ ├── consts.js
│ │ ├── core.d.ts
│ │ ├── core.js
│ │ ├── dev-inject-middleware.js
│ │ ├── esbuild.d.ts
│ │ ├── esbuild.js
│ │ ├── farm.d.ts
│ │ ├── farm.js
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── rolldown.d.ts
│ │ ├── rolldown.js
│ │ ├── rollup.d.ts
│ │ ├── rollup.js
│ │ ├── rspack.d.ts
│ │ ├── rspack.js
│ │ ├── unloader.d.ts
│ │ ├── unloader.js
│ │ ├── vite.d.ts
│ │ ├── vite.js
│ │ ├── webpack.d.ts
│ │ └── webpack.js
│ ├── benchmarks/
│ │ ├── compare.js
│ │ ├── package.json
│ │ ├── perf/
│ │ │ ├── fixtures/
│ │ │ │ ├── colors.stylex.js
│ │ │ │ ├── create-basic.js
│ │ │ │ ├── create-complex.js
│ │ │ │ ├── createTheme-basic.js
│ │ │ │ ├── createTheme-complex.js
│ │ │ │ └── sizes.stylex.js
│ │ │ ├── helpers.js
│ │ │ ├── run.js
│ │ │ └── tests/
│ │ │ ├── transform-create-tests.js
│ │ │ └── transform-create-theme-tests.js
│ │ └── size/
│ │ ├── fixtures/
│ │ │ ├── index.js
│ │ │ ├── lotsOfStyles.js
│ │ │ └── lotsOfStylesDynamic.js
│ │ ├── rollup.config.mjs
│ │ └── run.js
│ ├── docs/
│ │ ├── .eslintrc.cjs
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── cli.json
│ │ ├── content/
│ │ │ ├── blog/
│ │ │ │ ├── 2023-12-05-introducing-stylex.md
│ │ │ │ ├── 2023-12-29-Release-v0.4.1.md
│ │ │ │ ├── 2024-01-25-Release-v0.5.0.md
│ │ │ │ ├── 2024-04-16-Release-v0.6.1.mdx
│ │ │ │ ├── 2024-06-25-Release-v0.7.0.mdx
│ │ │ │ ├── 2024-06-28-Release-v0.7.3.mdx
│ │ │ │ ├── 2024-10-06-Release-v0.8.0.mdx
│ │ │ │ ├── 2024-11-01-Release-v0.9.3.mdx
│ │ │ │ ├── 2025-01-02-Release-v0.10.0.mdx
│ │ │ │ ├── 2025-01-17-Release-v0.10.1.mdx
│ │ │ │ ├── 2025-02-27-Release-v0.11.0.mdx
│ │ │ │ ├── 2025-04-10-Release-v0.12.0.mdx
│ │ │ │ ├── 2025-05-19-Release-v0.13.0.mdx
│ │ │ │ ├── 2025-06-30-Release-v0.14.0.mdx
│ │ │ │ ├── 2025-07-31-Release-v0.15.0.mdx
│ │ │ │ ├── 2025-09-25-Release-v0.16.0.mdx
│ │ │ │ ├── 2025-11-25-Release-v0.17.1.mdx
│ │ │ │ └── 2026-01-01-new-year-new-website.mdx
│ │ │ └── docs/
│ │ │ ├── acknowledgements.mdx
│ │ │ ├── api/
│ │ │ │ ├── configuration/
│ │ │ │ │ ├── babel-plugin.mdx
│ │ │ │ │ ├── eslint-plugin.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── postcss-plugin.mdx
│ │ │ │ │ └── unplugin.mdx
│ │ │ │ ├── index.mdx
│ │ │ │ ├── javascript/
│ │ │ │ │ ├── create.mdx
│ │ │ │ │ ├── createTheme.mdx
│ │ │ │ │ ├── defineConsts.mdx
│ │ │ │ │ ├── defineVars.mdx
│ │ │ │ │ ├── env.mdx
│ │ │ │ │ ├── firstThatWorks.mdx
│ │ │ │ │ ├── keyframes.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── positionTry.mdx
│ │ │ │ │ ├── props.mdx
│ │ │ │ │ ├── types.mdx
│ │ │ │ │ ├── viewTransitionClass.mdx
│ │ │ │ │ └── when.mdx
│ │ │ │ └── types/
│ │ │ │ ├── StaticStyles.mdx
│ │ │ │ ├── StyleXStyles.mdx
│ │ │ │ ├── StyleXStylesWithout.mdx
│ │ │ │ ├── Theme.mdx
│ │ │ │ ├── VarGroup.mdx
│ │ │ │ └── meta.json
│ │ │ ├── ecosystem.mdx
│ │ │ ├── index.mdx
│ │ │ ├── learn/
│ │ │ │ ├── index.mdx
│ │ │ │ ├── installation/
│ │ │ │ │ ├── cli.mdx
│ │ │ │ │ ├── esbuild.mdx
│ │ │ │ │ ├── index.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── nextjs.mdx
│ │ │ │ │ ├── postcss.mdx
│ │ │ │ │ ├── rspack.mdx
│ │ │ │ │ ├── vite/
│ │ │ │ │ │ ├── index.mdx
│ │ │ │ │ │ ├── meta.json
│ │ │ │ │ │ ├── react-router.mdx
│ │ │ │ │ │ ├── redwoodsdk.mdx
│ │ │ │ │ │ ├── vite-react.mdx
│ │ │ │ │ │ ├── vite-rsc.mdx
│ │ │ │ │ │ └── waku.mdx
│ │ │ │ │ └── webpack.mdx
│ │ │ │ ├── meta.json
│ │ │ │ ├── recipes/
│ │ │ │ │ ├── context-driven-styles.mdx
│ │ │ │ │ ├── descendant-styles.mdx
│ │ │ │ │ ├── light-dark-themes.mdx
│ │ │ │ │ ├── merge-themes.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── reset-themes.mdx
│ │ │ │ │ ├── shareable-tokens.mdx
│ │ │ │ │ └── variants.mdx
│ │ │ │ ├── static-types.mdx
│ │ │ │ ├── styling-ui/
│ │ │ │ │ ├── defining-styles.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ └── using-styles.mdx
│ │ │ │ ├── theming/
│ │ │ │ │ ├── creating-themes.mdx
│ │ │ │ │ ├── defining-variables.mdx
│ │ │ │ │ ├── meta.json
│ │ │ │ │ ├── using-variables.mdx
│ │ │ │ │ └── variable-types.mdx
│ │ │ │ └── thinking-in-stylex.mdx
│ │ │ ├── llm-resources.mdx
│ │ │ └── meta.json
│ │ ├── package.json
│ │ ├── source.config.ts
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── AnimatedGradientBox/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── tokens.stylex.ts
│ │ │ │ ├── CtaButton.tsx
│ │ │ │ ├── DevStyleXHMR.tsx
│ │ │ │ ├── Dial.tsx
│ │ │ │ ├── Footer.tsx
│ │ │ │ ├── Logo.tsx
│ │ │ │ ├── LogoBold.tsx
│ │ │ │ ├── Playground/
│ │ │ │ │ ├── Dialogs.tsx
│ │ │ │ │ ├── DynamicPlayground.tsx
│ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ ├── Tabs.tsx
│ │ │ │ │ ├── demoConstants.ts
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── StylexAnimatedLogo.tsx
│ │ │ │ ├── TypingWord.tsx
│ │ │ │ ├── ZStack.tsx
│ │ │ │ ├── icons/
│ │ │ │ │ ├── Bluesky.tsx
│ │ │ │ │ └── MetaOpenSource.tsx
│ │ │ │ ├── layout/
│ │ │ │ │ ├── docs.tsx
│ │ │ │ │ ├── home/
│ │ │ │ │ │ ├── SidebarToggle.tsx
│ │ │ │ │ │ ├── client.tsx
│ │ │ │ │ │ └── index.tsx
│ │ │ │ │ ├── page.tsx
│ │ │ │ │ └── shared/
│ │ │ │ │ ├── client.tsx
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── mdx/
│ │ │ │ │ ├── Callout.tsx
│ │ │ │ │ ├── Cards.tsx
│ │ │ │ │ ├── CodeBlock.tsx
│ │ │ │ │ ├── Details.tsx
│ │ │ │ │ ├── Heading.tsx
│ │ │ │ │ ├── Image.tsx
│ │ │ │ │ ├── LLMFiles.tsx
│ │ │ │ │ ├── Link.tsx
│ │ │ │ │ ├── PackageInstall.tsx
│ │ │ │ │ ├── ScrollableCodeBlock.tsx
│ │ │ │ │ ├── Table.tsx
│ │ │ │ │ ├── Tabs.tsx
│ │ │ │ │ ├── VersionTag.tsx
│ │ │ │ │ ├── WhenDemo.tsx
│ │ │ │ │ ├── core.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ ├── markers.stylex.ts
│ │ │ │ │ └── mdx.stylex.ts
│ │ │ │ ├── navigation-menu.tsx
│ │ │ │ ├── provider.tsx
│ │ │ │ ├── search-dialog.tsx
│ │ │ │ ├── search-toggle.tsx
│ │ │ │ ├── sidebar.tsx
│ │ │ │ ├── theme-toggle.tsx
│ │ │ │ └── ui/
│ │ │ │ ├── button.tsx
│ │ │ │ ├── collapsible.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ └── scroll-area.tsx
│ │ │ ├── contexts/
│ │ │ │ └── SidebarContext.tsx
│ │ │ ├── hooks/
│ │ │ │ └── useStateWithCallback.tsx
│ │ │ ├── pages/
│ │ │ │ ├── (home)/
│ │ │ │ │ ├── _layout.tsx
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── (playground)/
│ │ │ │ │ ├── _layout.tsx
│ │ │ │ │ └── playground.tsx
│ │ │ │ ├── _layout.tsx
│ │ │ │ ├── api/
│ │ │ │ │ ├── blog-atom.xml.ts
│ │ │ │ │ ├── blog-rss.xml.ts
│ │ │ │ │ ├── llms-full.txt.ts
│ │ │ │ │ └── search.ts
│ │ │ │ ├── blog/
│ │ │ │ │ ├── [...slugs].tsx
│ │ │ │ │ ├── _layout.tsx
│ │ │ │ │ └── index.tsx
│ │ │ │ └── docs/
│ │ │ │ ├── [...slugs].tsx
│ │ │ │ └── _layout.tsx
│ │ │ ├── styles/
│ │ │ │ └── globals.css
│ │ │ ├── theming/
│ │ │ │ └── vars.stylex.ts
│ │ │ └── waku.server.ts
│ │ ├── static/
│ │ │ └── llm/
│ │ │ ├── stylex-authoring.md
│ │ │ └── stylex-installation.md
│ │ ├── tsconfig.json
│ │ ├── vercel.json
│ │ └── waku.config.ts
│ ├── old-docs/
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── .prettierignore
│ │ ├── .stylelintrc.js
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── blog/
│ │ │ ├── 2023-12-05-introducing-stylex.md
│ │ │ ├── 2023-12-29-Release-v0.4.1.md
│ │ │ ├── 2024-01-25-Release-v0.5.0.md
│ │ │ ├── 2024-04-16-Release-v0.6.1.mdx
│ │ │ ├── 2024-06-25-Release-v0.7.0.mdx
│ │ │ ├── 2024-06-28-Release-v0.7.3.mdx
│ │ │ ├── 2024-10-06-Release-v0.8.0.mdx
│ │ │ ├── 2024-11-01-Release-v0.9.3.mdx
│ │ │ ├── 2025-01-02-Release-v0.10.0.mdx
│ │ │ ├── 2025-01-17-Release-v0.10.1.mdx
│ │ │ ├── 2025-02-27-Release-v0.11.0.mdx
│ │ │ ├── 2025-04-10-Release-v0.12.0.mdx
│ │ │ ├── 2025-05-19-Release-v0.13.0.mdx
│ │ │ ├── 2025-06-30-Release-v0.14.0.mdx
│ │ │ ├── 2025-07-31-Release-v0.15.0.mdx
│ │ │ ├── 2025-09-25-Release-v0.16.0.mdx
│ │ │ ├── 2025-11-25-Release-v0.17.1.mdx
│ │ │ └── authors.yml
│ │ ├── components/
│ │ │ ├── AnimatedGradientBox/
│ │ │ │ ├── AnimatedGradientBox.js
│ │ │ │ └── tokens.stylex.js
│ │ │ ├── CtaButton.js
│ │ │ ├── Dial.js
│ │ │ ├── LoadingSpinner.js
│ │ │ ├── Logo.js
│ │ │ ├── LogoBold.js
│ │ │ ├── LogoDownloadModal.js
│ │ │ ├── Playground.js
│ │ │ ├── StylexAnimatedLogo.js
│ │ │ ├── VersionTag.js
│ │ │ ├── YouTube.js
│ │ │ ├── ZStack.js
│ │ │ ├── examples/
│ │ │ │ └── dev-install.js
│ │ │ ├── hooks/
│ │ │ │ ├── useDebounced.js
│ │ │ │ ├── useId.js
│ │ │ │ └── useViewTransition.js
│ │ │ └── playground-utils/
│ │ │ └── files.js
│ │ ├── docs/
│ │ │ ├── api/
│ │ │ │ ├── configuration/
│ │ │ │ │ ├── _category_.json
│ │ │ │ │ ├── babel-plugin.mdx
│ │ │ │ │ ├── eslint-plugin.mdx
│ │ │ │ │ ├── postcss-plugin.mdx
│ │ │ │ │ └── unplugin.mdx
│ │ │ │ ├── index.mdx
│ │ │ │ ├── javascript/
│ │ │ │ │ ├── _category_.json
│ │ │ │ │ ├── create.mdx
│ │ │ │ │ ├── createTheme.mdx
│ │ │ │ │ ├── defineConsts.mdx
│ │ │ │ │ ├── defineVars.mdx
│ │ │ │ │ ├── firstThatWorks.mdx
│ │ │ │ │ ├── keyframes.mdx
│ │ │ │ │ ├── positionTry.mdx
│ │ │ │ │ ├── props.mdx
│ │ │ │ │ ├── types.mdx
│ │ │ │ │ ├── viewTransitionClass.mdx
│ │ │ │ │ └── when.mdx
│ │ │ │ └── types/
│ │ │ │ ├── StaticStyles.mdx
│ │ │ │ ├── StyleXStyles.mdx
│ │ │ │ ├── StyleXStylesWithout.mdx
│ │ │ │ ├── Theme.mdx
│ │ │ │ ├── VarGroup.mdx
│ │ │ │ └── _category_.json
│ │ │ └── learn/
│ │ │ ├── 02-thinking-in-stylex.mdx
│ │ │ ├── 03-installation.mdx
│ │ │ ├── 04-styling-ui/
│ │ │ │ ├── 01-defining-styles.mdx
│ │ │ │ ├── 02-using-styles.mdx
│ │ │ │ └── _category_.json
│ │ │ ├── 05-theming/
│ │ │ │ ├── 01-defining-variables.mdx
│ │ │ │ ├── 02-using-variables.mdx
│ │ │ │ ├── 03-creating-themes.mdx
│ │ │ │ ├── 04-variable-types.mdx
│ │ │ │ └── _category_.json
│ │ │ ├── 06-recipes/
│ │ │ │ ├── 01-context-driven-styles.mdx
│ │ │ │ ├── 02-variants.mdx
│ │ │ │ ├── 03-descendant styles.mdx
│ │ │ │ ├── 04-reset-themes.mdx
│ │ │ │ ├── 05-merge-themes.mdx
│ │ │ │ ├── 06-light-dark-themes.mdx
│ │ │ │ └── _category_.json
│ │ │ ├── 06-static-types.mdx
│ │ │ ├── 07-ecosystem.mdx
│ │ │ ├── 08-acknowledgements.mdx
│ │ │ └── index.mdx
│ │ ├── docusaurus.config.js
│ │ ├── eslintrc-legacy.js
│ │ ├── package.json
│ │ ├── serve.json
│ │ ├── sidebars.js
│ │ ├── src/
│ │ │ ├── css/
│ │ │ │ └── custom.css
│ │ │ ├── pages/
│ │ │ │ ├── index.js
│ │ │ │ └── playground.js
│ │ │ └── theme/
│ │ │ ├── Footer/
│ │ │ │ └── index.js
│ │ │ ├── Logo/
│ │ │ │ └── index.js
│ │ │ └── MDXComponents/
│ │ │ ├── Details.js
│ │ │ └── DetailsTokens.stylex.js
│ │ └── static/
│ │ ├── .nojekyll
│ │ └── robots.txt
│ ├── scripts/
│ │ ├── README.md
│ │ ├── flow-translator/
│ │ │ ├── flow-module-utils.js
│ │ │ ├── generate-types.js
│ │ │ └── rewrite-imports.js
│ │ └── package.json
│ ├── shared-ui/
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.tsx
│ │ └── tokens.stylex.ts
│ ├── style-value-parser/
│ │ ├── .babelrc
│ │ ├── README.md
│ │ ├── __benchmarks__/
│ │ │ ├── alpha-value.bench.mjs
│ │ │ ├── angle-percentage.bench.mjs
│ │ │ ├── angle.bench.mjs
│ │ │ ├── basic-shape.bench.mjs
│ │ │ ├── blend-mode.bench.mjs
│ │ │ ├── calc-constant.bench.mjs
│ │ │ ├── color.bench.mjs
│ │ │ ├── common-types.bench.mjs
│ │ │ ├── custom-ident.bench.mjs
│ │ │ ├── dashed-ident.bench.mjs
│ │ │ ├── dimension.bench.mjs
│ │ │ ├── easing-function.bench.mjs
│ │ │ ├── filter-function.bench.mjs
│ │ │ ├── flex.bench.mjs
│ │ │ ├── frequency.bench.mjs
│ │ │ ├── length-percentage.bench.mjs
│ │ │ └── length.bench.mjs
│ │ ├── jest.config.cjs
│ │ ├── package.json
│ │ └── src/
│ │ ├── __tests__/
│ │ │ └── token-parser-test.js
│ │ ├── at-queries/
│ │ │ ├── __tests__/
│ │ │ │ ├── media-query-transform-test.js
│ │ │ │ ├── parse-media-query-test.js
│ │ │ │ └── validation-media-query-test.js
│ │ │ ├── media-query-transform.js
│ │ │ ├── media-query.js
│ │ │ └── messages.js
│ │ ├── base-types.js
│ │ ├── css-types/
│ │ │ ├── __tests__/
│ │ │ │ ├── alpha-value-test.js
│ │ │ │ ├── angle-percentage-test.js
│ │ │ │ ├── angle-test.js
│ │ │ │ ├── basic-shape.js
│ │ │ │ ├── blend-mode-test.js
│ │ │ │ ├── calc-constant.js
│ │ │ │ ├── calc-test.js
│ │ │ │ ├── color-test.js
│ │ │ │ ├── custom-ident-test.js
│ │ │ │ ├── dashed-ident-test.js
│ │ │ │ ├── easing-function-test.js
│ │ │ │ ├── filter-function-test.js
│ │ │ │ ├── flex-test.js
│ │ │ │ ├── frequency-test.js
│ │ │ │ ├── length-percentage-test.js
│ │ │ │ ├── length-test.js
│ │ │ │ ├── position-test.js
│ │ │ │ ├── resolution-test.js
│ │ │ │ ├── time-test.js
│ │ │ │ └── transform-function-test.js
│ │ │ ├── alpha-value.js
│ │ │ ├── angle-percentage.js
│ │ │ ├── angle.js
│ │ │ ├── basic-shape.js
│ │ │ ├── blend-mode.js
│ │ │ ├── calc-constant.js
│ │ │ ├── calc.js
│ │ │ ├── color.js
│ │ │ ├── common-types.js
│ │ │ ├── custom-ident.js
│ │ │ ├── dashed-ident.js
│ │ │ ├── dimension.js
│ │ │ ├── easing-function.js
│ │ │ ├── filter-function.js
│ │ │ ├── flex.js
│ │ │ ├── frequency.js
│ │ │ ├── length-percentage.js
│ │ │ ├── length.js
│ │ │ ├── position.js
│ │ │ ├── resolution.js
│ │ │ ├── time.js
│ │ │ └── transform-function.js
│ │ ├── index.js
│ │ ├── properties/
│ │ │ ├── __tests__/
│ │ │ │ ├── border-radius.test.js
│ │ │ │ ├── box-shadow.test.js
│ │ │ │ └── transform.js
│ │ │ ├── border-radius.js
│ │ │ ├── box-shadow.js
│ │ │ └── transform.js
│ │ ├── properties.js
│ │ ├── token-parser.js
│ │ └── token-types.js
│ └── typescript-tests/
│ ├── package.json
│ ├── src/
│ │ ├── babel-plugin.ts
│ │ ├── env.ts
│ │ ├── exports.ts
│ │ ├── test1.tsx
│ │ ├── test2.tsx
│ │ ├── test3.tsx
│ │ ├── test4.tsx
│ │ ├── test5.tsx
│ │ ├── themes.ts
│ │ ├── theming/
│ │ │ ├── ButtonTokenThemes.ts
│ │ │ └── ButtonTokens.stylex.ts
│ │ ├── theming1.tsx
│ │ └── typetests.ts
│ └── tsconfig.json
└── tools/
├── README.md
├── eslint/
│ └── copyright-header.txt
├── husky/
│ └── pre-commit
└── npm/
└── release.js
SYMBOL INDEX (1181 symbols across 358 files)
FILE: examples/example-bun/scripts/build.mjs
function build (line 20) | async function build() {
FILE: examples/example-bun/scripts/dev.mjs
function dev (line 19) | async function dev() {
FILE: examples/example-bun/scripts/start.mjs
method fetch (line 19) | async fetch(request) {
FILE: examples/example-bun/src/App.jsx
function App (line 12) | function App() {
FILE: examples/example-cli/source/app/Counter.tsx
function Counter (line 19) | function Counter() {
constant DARK (line 48) | const DARK = '@media (prefers-color-scheme: dark)' as const;
FILE: examples/example-cli/source/app/globalTokens.stylex.ts
constant MIN_WIDTH (line 30) | const MIN_WIDTH = 320;
constant MAX_WIDTH (line 31) | const MAX_WIDTH = 1240;
constant MIN_SCALE (line 32) | const MIN_SCALE = 1.2;
constant MAX_SCALE (line 33) | const MAX_SCALE = 1.333;
constant MIN_BASE_SIZE (line 34) | const MIN_BASE_SIZE = 16;
constant MAX_BASE_SIZE (line 35) | const MAX_BASE_SIZE = 20;
constant MIN_FONT (line 38) | const MIN_FONT = {
constant MAX_FONT (line 50) | const MAX_FONT = {
constant SLOPE (line 61) | const SLOPE = {
constant INTERCEPT (line 72) | const INTERCEPT = {
constant MULT (line 125) | const MULT = {
constant MIN_SPACE (line 137) | const MIN_SPACE = {
constant MAX_SPACE (line 149) | const MAX_SPACE = {
constant SLOPE_SPACE (line 161) | const SLOPE_SPACE = {
constant INTERCEPT_SPACE (line 174) | const INTERCEPT_SPACE = {
constant DARK_MODE (line 204) | const DARK_MODE = '@media (prefers-color-scheme: dark)';
FILE: examples/example-cli/source/app/layout.tsx
function RootLayout (line 19) | function RootLayout({
constant DARK (line 31) | const DARK = '@media (prefers-color-scheme: dark)';
FILE: examples/example-cli/source/app/page.tsx
constant HOMEPAGE (line 21) | const HOMEPAGE = 'https://stylexjs.com';
function Home (line 23) | function Home() {
constant MEDIA_MOBILE (line 65) | const MEDIA_MOBILE = '@media (max-width: 700px)' as const;
constant MEDIA_TABLET (line 66) | const MEDIA_TABLET =
FILE: examples/example-cli/source/components/Card.tsx
type Props (line 19) | type Props = Readonly<{
function Card (line 25) | function Card({ title, body, href }: Props) {
type TMobile (line 41) | type TMobile = '@media (max-width: 700px)';
constant MOBILE (line 43) | const MOBILE: TMobile = '@media (max-width: 700px)' as TMobile;
constant REDUCE_MOTION (line 44) | const REDUCE_MOTION = '@media (prefers-reduced-motion: reduce)' as const;
FILE: examples/example-esbuild/scripts/build.mjs
constant BUILD_DIR_NAME (line 16) | const BUILD_DIR_NAME = 'public/dist';
constant OUTFILE (line 17) | const OUTFILE = `${BUILD_DIR_NAME}/bundle.js`;
FILE: examples/example-esbuild/src/App.jsx
function App (line 39) | function App() {
FILE: examples/example-nextjs/app/InteractiveCard.tsx
constant THEMES (line 39) | const THEMES = [
type Props (line 45) | type Props = Readonly<{
function InteractiveCard (line 52) | function InteractiveCard({
constant DARK (line 128) | const DARK = '@media (prefers-color-scheme: dark)' as const;
FILE: examples/example-nextjs/app/globalTokens.stylex.ts
constant MIN_WIDTH (line 30) | const MIN_WIDTH = 320;
constant MAX_WIDTH (line 31) | const MAX_WIDTH = 1240;
constant MIN_SCALE (line 32) | const MIN_SCALE = 1.2;
constant MAX_SCALE (line 33) | const MAX_SCALE = 1.333;
constant MIN_BASE_SIZE (line 34) | const MIN_BASE_SIZE = 16;
constant MAX_BASE_SIZE (line 35) | const MAX_BASE_SIZE = 20;
constant MIN_FONT (line 38) | const MIN_FONT = {
constant MAX_FONT (line 50) | const MAX_FONT = {
constant SLOPE (line 61) | const SLOPE = {
constant INTERCEPT (line 72) | const INTERCEPT = {
constant MULT (line 125) | const MULT = {
constant MIN_SPACE (line 137) | const MIN_SPACE = {
constant MAX_SPACE (line 149) | const MAX_SPACE = {
constant SLOPE_SPACE (line 161) | const SLOPE_SPACE = {
constant INTERCEPT_SPACE (line 174) | const INTERCEPT_SPACE = {
constant DARK_MODE (line 204) | const DARK_MODE = '@media (prefers-color-scheme: dark)';
FILE: examples/example-nextjs/app/layout.tsx
function RootLayout (line 19) | function RootLayout({
FILE: examples/example-nextjs/app/page.tsx
constant HOMEPAGE (line 24) | const HOMEPAGE = 'https://stylexjs.com';
function Home (line 26) | function Home() {
constant MEDIA_MOBILE (line 87) | const MEDIA_MOBILE = '@media (max-width: 700px)' as const;
constant MEDIA_TABLET (line 88) | const MEDIA_TABLET =
constant DARK (line 90) | const DARK = '@media (prefers-color-scheme: dark)' as const;
FILE: examples/example-nextjs/components/Card.tsx
type Props (line 19) | type Props = Readonly<{
function Card (line 25) | function Card({ title, body, href }: Props) {
type TMobile (line 41) | type TMobile = '@media (max-width: 700px)';
constant MOBILE (line 43) | const MOBILE: TMobile = '@media (max-width: 700px)' as TMobile;
constant REDUCE_MOTION (line 44) | const REDUCE_MOTION = '@media (prefers-reduced-motion: reduce)' as const;
constant DARK (line 46) | const DARK = '@media (prefers-color-scheme: dark)' as const;
FILE: examples/example-react-router/server.js
constant PORT (line 35) | const PORT = Number.parseInt(process.env.PORT || '3000', 10);
FILE: examples/example-react-router/src/components/MainArticle.tsx
function MainArticle (line 9) | function MainArticle({
constant MEDIA_SM (line 21) | const MEDIA_SM = '@media (min-width: 640px)' as const;
FILE: examples/example-react-router/src/entry.rsc.tsx
function fetchServer (line 19) | function fetchServer(request: Request) {
function handler (line 41) | async function handler(request: Request) {
FILE: examples/example-react-router/src/entry.ssr.tsx
function generateHTML (line 14) | async function generateHTML(
FILE: examples/example-react-router/src/routes/about/route.tsx
function About (line 9) | function About() {
FILE: examples/example-react-router/src/routes/config.ts
function routes (line 9) | function routes() {
FILE: examples/example-react-router/src/routes/home/route.tsx
function Home (line 9) | function Home() {
FILE: examples/example-react-router/src/routes/root/DevStyleXInject.tsx
function DevStyleXInject (line 11) | function DevStyleXInject() {
FILE: examples/example-react-router/src/routes/root/client.tsx
function Layout (line 23) | function Layout({ children }: { children: React.ReactNode }) {
constant MEDIA_SM (line 87) | const MEDIA_SM = '@media (min-width: 640px)' as const;
function ErrorBoundary (line 159) | function ErrorBoundary() {
FILE: examples/example-react-router/src/routes/root/route.tsx
function Layout (line 14) | function Layout({ children }: { children: React.ReactNode }) {
function Component (line 19) | function Component() {
FILE: examples/example-redwoodsdk/src/app/DevStyleXInject.tsx
function DevStyleXInject (line 8) | function DevStyleXInject({ cssHref }: { cssHref: string }) {
FILE: examples/example-redwoodsdk/src/app/components/Copy.tsx
function Copy (line 12) | function Copy({ textToCopy }: { textToCopy: string }) {
FILE: examples/example-redwoodsdk/src/app/pages/Counter.tsx
function Counter (line 37) | function Counter() {
FILE: examples/example-redwoodsdk/src/worker.tsx
type AppContext (line 16) | type AppContext = {};
FILE: examples/example-redwoodsdk/types/rw.d.ts
type DefaultAppContext (line 11) | interface DefaultAppContext extends AppContext {}
FILE: examples/example-redwoodsdk/worker-configuration.d.ts
type GlobalProps (line 4) | interface GlobalProps {
type Env (line 7) | interface Env {
type Env (line 11) | interface Env extends Cloudflare.Env {}
FILE: examples/example-rollup/src/App.js
function App (line 12) | function App() {
FILE: examples/example-rspack/src/App.jsx
function App (line 10) | function App() {
FILE: examples/example-storybook/.storybook/main.ts
function getAbsolutePath (line 12) | function getAbsolutePath(value: string): any {
FILE: examples/example-storybook/stories/Button.stories.ts
type Story (line 40) | type Story = StoryObj<typeof meta>;
FILE: examples/example-storybook/stories/Button.tsx
type ButtonProps (line 78) | type ButtonProps = {
FILE: examples/example-storybook/stories/Card.stories.ts
type Story (line 27) | type Story = StoryObj<typeof meta>;
FILE: examples/example-storybook/stories/Card.tsx
type CardProps (line 39) | type CardProps = {
FILE: examples/example-vite-react/src/App.tsx
function App (line 14) | function App() {
FILE: examples/example-vite-rsc/src/DevStyleXInject.tsx
function DevStyleXInjectImpl (line 11) | function DevStyleXInjectImpl() {
function DevStyleXInject (line 21) | function DevStyleXInject({ cssHref }: { cssHref: string }) {
FILE: examples/example-vite-rsc/src/action.tsx
function getServerCounter (line 11) | async function getServerCounter() {
function updateServerCounter (line 15) | async function updateServerCounter(change: number) {
FILE: examples/example-vite-rsc/src/client.tsx
function ClientCounter (line 14) | function ClientCounter() {
FILE: examples/example-vite-rsc/src/framework/entry.browser.tsx
function main (line 19) | async function main() {
function listenNavigation (line 92) | function listenNavigation(onNavigation: () => void) {
FILE: examples/example-vite-rsc/src/framework/entry.rsc.tsx
type RscPayload (line 20) | type RscPayload = {
function handler (line 34) | async function handler(request: Request): Promise<Response> {
FILE: examples/example-vite-rsc/src/framework/entry.ssr.tsx
function renderHTML (line 14) | async function renderHTML(
FILE: examples/example-vite-rsc/src/root.tsx
function Root (line 15) | function Root(props: { url: URL }) {
function App (line 32) | function App(props: { url: URL }) {
FILE: examples/example-vite/src/App.jsx
function App (line 12) | function App() {
FILE: examples/example-waku/src/components/DevStyleXInject.tsx
function DevStyleXInjectImpl (line 11) | function DevStyleXInjectImpl() {
function DevStyleXInject (line 21) | function DevStyleXInject({ cssHref }: { cssHref: string }) {
FILE: examples/example-waku/src/components/counter.tsx
function Counter (line 14) | function Counter() {
FILE: examples/example-waku/src/pages.gen.ts
type Page (line 12) | type Page =
type RouteConfig (line 18) | interface RouteConfig {
type CreatePagesConfig (line 21) | interface CreatePagesConfig {
FILE: examples/example-waku/src/pages/_layout.tsx
type RootLayoutProps (line 15) | type RootLayoutProps = { children: ReactNode };
function RootLayout (line 17) | async function RootLayout({ children }: RootLayoutProps) {
FILE: examples/example-waku/src/pages/about.tsx
function AboutPage (line 10) | async function AboutPage() {
FILE: examples/example-waku/src/pages/index.tsx
function HomePage (line 11) | async function HomePage() {
FILE: examples/example-webpack/src/App.jsx
function App (line 16) | function App() {
FILE: examples/example-webpack/src/components/CTAButton.jsx
function CtaButton (line 12) | function CtaButton({ children, color, to }) {
FILE: examples/example-webpack/src/tokens.stylex.js
constant DARK (line 9) | const DARK = '@media (prefers-color-scheme: dark)';
FILE: flow-typed/environments/bom.js
class PermissionStatus (line 170) | class PermissionStatus extends EventTarget {
method getFrequencyResponse (line 1527) | getFrequencyResponse(
FILE: flow-typed/environments/cssom.js
class StyleSheet (line 1) | class StyleSheet {
class CSSStyleSheet (line 27) | class CSSStyleSheet extends StyleSheet {
class CSSGroupingRule (line 36) | class CSSGroupingRule extends CSSRule {
class CSSConditionRule (line 42) | class CSSConditionRule extends CSSGroupingRule {
class CSSMediaRule (line 46) | class CSSMediaRule extends CSSConditionRule {
class CSSStyleRule (line 50) | class CSSStyleRule extends CSSRule {
class CSSSupportsRule (line 55) | class CSSSupportsRule extends CSSConditionRule {}
class CSSRule (line 57) | class CSSRule {
class CSSKeyframeRule (line 80) | class CSSKeyframeRule extends CSSRule {
class CSSKeyframesRule (line 85) | class CSSKeyframesRule extends CSSRule {
FILE: flow-typed/environments/dom.js
method initProgressEvent (line 812) | initProgressEvent(
FILE: flow-typed/environments/streams.js
class ReadableStreamController (line 3) | class ReadableStreamController {
class ReadableStreamBYOBRequest (line 18) | class ReadableStreamBYOBRequest {
class ReadableByteStreamController (line 27) | class ReadableByteStreamController extends ReadableStreamController {
class ReadableStreamReader (line 37) | class ReadableStreamReader {
method read (line 43) | read(): Promise<{
class TransformStream (line 60) | class TransformStream {
class ReadableStream (line 83) | class ReadableStream {
class WritableStream (line 123) | class WritableStream {
FILE: flow-typed/npm/@babel/generator.js
class CodeGenerator (line 182) | class CodeGenerator {
FILE: flow-typed/npm/@csstools/css-tokenizer_v3.x.x.js
class ParseErrorWithToken (line 272) | class ParseErrorWithToken extends ParseError {
FILE: flow-typed/npm/webpack_v5.x.x.js
class $WebpackError (line 18) | class $WebpackError extends Error {
class WebpackCompilation (line 54) | class WebpackCompilation {
class WebpackStats (line 59) | class WebpackStats {
FILE: packages/@stylexjs/babel-plugin/__tests__/evaluation-import-test.js
function transform (line 26) | function transform(source, opts = options) {
FILE: packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-call-test.js
function transform (line 16) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/legacy/stylex-transform-legacy-shorthands-test.js
function transform (line 16) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/legacy/transform-legacy-polyfills-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/legacy/transform-logical-properties-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/legacy/transform-logical-values-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/legacy/transform-pre-plugin-test.js
function inlineDemoPlugin (line 19) | function inlineDemoPlugin() {
function transform (line 75) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-import-export-test.js
function transform (line 15) | function transform(source, opts = {}) {
function createStylesFixture (line 60) | function createStylesFixture({
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-polyfills-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
function transform (line 15) | function transform(source, opts = {}) {
function deepFreeze (line 847) | function deepFreeze(object) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-createTheme-test.js
function transform (line 15) | function transform(source, opts = {}) {
function transformWithFixture (line 47) | function transformWithFixture(fixture, fixtureOptions, pluginOptions) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js
function transform (line 22) | function transform(source, opts = {}) {
function transformWithInlineConsts (line 42) | function transformWithInlineConsts(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineMarker-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineVars-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-keyframes-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-positionTry-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
function transform (line 17) | function transform(source, opts = {}) {
constant THIS_FILE (line 42) | const THIS_FILE = path.join(__dirname, 'transform-stylex-props-test.js');
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-viewTransitionClass-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-stylex-when-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/transform-value-normalization-test.js
function transform (line 15) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/validation-import-export-test.js
function transform (line 15) | function transform(source: string, opts: any = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js
function transform (line 41) | function transform(source: string, opts: { [key: string]: any } = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/validation-stylex-createTheme-test.js
function transform (line 16) | function transform(source: string, opts: any = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js
function transform (line 22) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineMarker-test.js
function transform (line 16) | function transform(source, opts = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineVars-test.js
function transform (line 16) | function transform(source: string, opts: any = {}) {
FILE: packages/@stylexjs/babel-plugin/__tests__/validation-stylex-keyframes-test.js
function transform (line 16) | function transform(source: string, opts: any = {}) {
FILE: packages/@stylexjs/babel-plugin/rollup.config.mjs
method resolveId (line 71) | resolveId(source, importer) {
method load (line 87) | load(id) {
FILE: packages/@stylexjs/babel-plugin/src/index.d.ts
type Options (line 18) | type Options = StyleXOptions;
type Rule (line 41) | type Rule = [string, { ltr: string; rtl?: null | string }, number];
type StyleXTransformObj (line 54) | type StyleXTransformObj = Readonly<{
FILE: packages/@stylexjs/babel-plugin/src/index.js
constant NAME (line 42) | const NAME = 'stylex';
method if (line 172) | if (varsToKeep[varName] === true) {
method if (line 179) | if (namespaceName === true) {
method for (line 246) | for (const styleProp of styleObject.get(
method if (line 301) | if (
method if (line 376) | if (path == null || path.isProgram()) {
FILE: packages/@stylexjs/babel-plugin/src/shared/common-types.d.ts
type TRawValue (line 10) | type TRawValue = number | string | ReadonlyArray<number | string>;
type TStyleValue (line 11) | type TStyleValue = null | TRawValue;
type TNestableStyleValue (line 12) | type TNestableStyleValue = TStyleValue | PrimitiveRawStyles;
type RawStyles (line 13) | type RawStyles = Readonly<{ [$$Key$$: string]: TNestableStyleValue }>;
type PrimitiveRawStyles (line 14) | type PrimitiveRawStyles = Readonly<{
type InjectableStyle (line 17) | type InjectableStyle = {
type InjectableConstStyle (line 22) | type InjectableConstStyle = {
type StyleRule (line 29) | type StyleRule = [string, string, InjectableStyle];
type CompiledStyles (line 30) | type CompiledStyles = Readonly<{
type FlatCompiledStyles (line 36) | type FlatCompiledStyles = Readonly<
type StyleXOptions (line 39) | type StyleXOptions = Readonly<{
type MutableCompiledNamespaces (line 60) | type MutableCompiledNamespaces = { [key: string]: FlatCompiledStyles };
type CompiledNamespaces (line 61) | type CompiledNamespaces = Readonly<MutableCompiledNamespaces>;
FILE: packages/@stylexjs/babel-plugin/src/shared/hash.js
function murmurhash2_32_gc (line 25) | function murmurhash2_32_gc(str: string, seed?: number = 0) {
function toBase62 (line 78) | function toBase62(num: number) {
FILE: packages/@stylexjs/babel-plugin/src/shared/messages.js
constant DUPLICATE_CONDITIONAL (line 28) | const DUPLICATE_CONDITIONAL =
constant ESCAPED_STYLEX_VALUE (line 30) | const ESCAPED_STYLEX_VALUE = 'Escaping a create() value is not allowed.';
constant ILLEGAL_NESTED_PSEUDO (line 31) | const ILLEGAL_NESTED_PSEUDO =
constant ILLEGAL_PROP_VALUE (line 33) | const ILLEGAL_PROP_VALUE =
constant ILLEGAL_PROP_ARRAY_VALUE (line 35) | const ILLEGAL_PROP_ARRAY_VALUE =
constant ILLEGAL_NAMESPACE_VALUE (line 37) | const ILLEGAL_NAMESPACE_VALUE = 'A StyleX namespace must be an object.';
constant INVALID_PSEUDO (line 38) | const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
constant INVALID_PSEUDO_OR_AT_RULE (line 39) | const INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.';
constant INVALID_MEDIA_QUERY_SYNTAX (line 40) | const INVALID_MEDIA_QUERY_SYNTAX = 'Invalid media query syntax.';
constant LINT_UNCLOSED_FUNCTION (line 41) | const LINT_UNCLOSED_FUNCTION = 'Rule contains an unclosed function';
constant LOCAL_ONLY (line 42) | const LOCAL_ONLY =
constant NON_OBJECT_KEYFRAME (line 44) | const NON_OBJECT_KEYFRAME =
constant NON_CONTIGUOUS_VARS (line 46) | const NON_CONTIGUOUS_VARS =
constant NO_OBJECT_SPREADS (line 48) | const NO_OBJECT_SPREADS =
constant ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS (line 50) | const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS =
constant ONLY_TOP_LEVEL (line 52) | const ONLY_TOP_LEVEL =
constant UNKNOWN_PROP_KEY (line 54) | const UNKNOWN_PROP_KEY = 'Unknown property key';
constant POSITION_TRY_INVALID_PROPERTY (line 56) | const POSITION_TRY_INVALID_PROPERTY =
constant VIEW_TRANSITION_CLASS_INVALID_PROPERTY (line 59) | const VIEW_TRANSITION_CLASS_INVALID_PROPERTY =
FILE: packages/@stylexjs/babel-plugin/src/shared/physical-rtl/generate-rtl.js
function splitByDivisor (line 25) | function splitByDivisor(value: string) {
function flipSign (line 52) | function flipSign(value: string) {
function flipShadow (line 60) | function flipShadow(value: string) {
FILE: packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/PreRule.js
class NullPreRule (line 36) | class NullPreRule implements IPreRule {
class IPreRule (line 46) | class PreRule implements IPreRule {
method constructor (line 51) | constructor(
method pseudos (line 61) | get pseudos(): $ReadOnlyArray<string> {
method atRules (line 68) | get atRules(): $ReadOnlyArray<string> {
method constRules (line 73) | get constRules(): $ReadOnlyArray<string> {
method compiled (line 78) | compiled(
method equals (line 92) | equals(other: IPreRule): boolean {
method if (line 141) | if (!(other instanceof PreRuleSet)) {
FILE: packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/basic-validation.js
function validateNamespace (line 13) | function validateNamespace(
function validateConditionalStyles (line 55) | function validateConditionalStyles(
FILE: packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/flatten-raw-style-obj.js
method if (line 89) | if (Array.isArray(val)) {
FILE: packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js
constant LOGICAL_FLOAT_START_VAR (line 14) | const LOGICAL_FLOAT_START_VAR = '--stylex-logical-start';
constant LOGICAL_FLOAT_END_VAR (line 15) | const LOGICAL_FLOAT_END_VAR = '--stylex-logical-end';
FILE: packages/@stylexjs/babel-plugin/src/shared/stylex-create-theme.js
method if (line 29) | if (typeof themeVars.__varGroupHash__ !== 'string') {
FILE: packages/@stylexjs/babel-plugin/src/shared/stylex-create.js
function styleXCreateSet (line 41) | function styleXCreateSet(
FILE: packages/@stylexjs/babel-plugin/src/shared/stylex-define-vars.d.ts
type VarsKeysWithStringValues (line 12) | type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
type VarsObject (line 15) | type VarsObject<Vars extends VarsConfig> = Readonly<
FILE: packages/@stylexjs/babel-plugin/src/shared/stylex-keyframes.js
function expandFrameShorthands (line 77) | function expandFrameShorthands(
FILE: packages/@stylexjs/babel-plugin/src/shared/stylex-position-try.js
function preprocessProperties (line 63) | function preprocessProperties(
FILE: packages/@stylexjs/babel-plugin/src/shared/stylex-vars-utils.js
constant SPLIT_TOKEN (line 20) | const SPLIT_TOKEN = '__$$__';
function collectVarsByAtRule (line 22) | function collectVarsByAtRule(
function wrapWithAtRules (line 58) | function wrapWithAtRules(ltr: string, atRule: string): string {
function priorityForAtRule (line 65) | function priorityForAtRule(atRule: string): number {
FILE: packages/@stylexjs/babel-plugin/src/shared/stylex-view-transition-class.js
function preprocessProperties (line 70) | function preprocessProperties(
function constructViewTransitionClassStyleStr (line 92) | function constructViewTransitionClassStyleStr(style: {
function constructFinalViewTransitionCSSStr (line 100) | function constructFinalViewTransitionCSSStr(
FILE: packages/@stylexjs/babel-plugin/src/shared/types/index.d.ts
type NestedWithNumbers (line 11) | type NestedWithNumbers =
type ValueWithDefault (line 18) | type ValueWithDefault =
type CSSSyntax (line 24) | type CSSSyntax =
type CSSSyntaxType (line 40) | type CSSSyntaxType = CSSSyntax;
class BaseCSSType (line 41) | class BaseCSSType {
type CSSType (line 46) | interface CSSType<_T extends string | number = string | number> {
type isCSSType (line 53) | type isCSSType = typeof isCSSType;
type AngleValue (line 54) | type AngleValue = string;
class Angle (line 55) | class Angle<T extends AngleValue>
type angle (line 69) | type angle = typeof angle;
type ColorValue (line 70) | type ColorValue = string;
class Color (line 71) | class Color<T extends ColorValue>
type color (line 84) | type color = typeof color;
type URLValue (line 85) | type URLValue = string;
class Url (line 86) | class Url<T extends URLValue>
type url (line 97) | type url = typeof url;
type ImageValue (line 98) | type ImageValue = string;
class Image (line 99) | class Image<T extends ImageValue>
type image (line 113) | type image = typeof image;
type IntegerValue (line 114) | type IntegerValue = number;
class Integer (line 115) | class Integer<T extends IntegerValue>
type integer (line 126) | type integer = typeof integer;
type LengthPercentageValue (line 127) | type LengthPercentageValue = string;
class LengthPercentage (line 128) | class LengthPercentage<_T extends LengthPercentageValue>
type lengthPercentage (line 146) | type lengthPercentage = typeof lengthPercentage;
type LengthValue (line 147) | type LengthValue = number | string;
class Length (line 148) | class Length<_T extends LengthValue>
type length (line 161) | type length = typeof length;
type PercentageValue (line 162) | type PercentageValue = string | number;
class Percentage (line 163) | class Percentage<_T extends PercentageValue>
type percentage (line 176) | type percentage = typeof percentage;
type NumberValue (line 177) | type NumberValue = number;
class Num (line 178) | class Num<T extends NumberValue>
type ResolutionValue (line 191) | type ResolutionValue = string | 0;
class Resolution (line 192) | class Resolution<T extends ResolutionValue>
type resolution (line 205) | type resolution = typeof resolution;
type TimeValue (line 206) | type TimeValue = string | 0;
class Time (line 207) | class Time<T extends TimeValue>
type time (line 220) | type time = typeof time;
type TransformFunctionValue (line 221) | type TransformFunctionValue = string;
class TransformFunction (line 222) | class TransformFunction<T extends TransformFunctionValue>
type transformFunction (line 237) | type transformFunction = typeof transformFunction;
type TransformListValue (line 238) | type TransformListValue = string;
class TransformList (line 239) | class TransformList<T extends TransformListValue>
type transformList (line 254) | type transformList = typeof transformList;
FILE: packages/@stylexjs/babel-plugin/src/shared/types/index.js
class BaseCSSType (line 56) | class BaseCSSType {
method constructor (line 59) | constructor(value: ValueWithDefault) {
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/convert-to-className.js
function convertStyleToClassName (line 27) | function convertStyleToClassName(
function variableFallbacks (line 85) | function variableFallbacks(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/dashify.js
function dashify (line 10) | function dashify(str: string): string {
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/generate-css-rule.js
constant THUMB_VARIANTS (line 19) | const THUMB_VARIANTS = [
function buildNestedCSSRule (line 25) | function buildNestedCSSRule(
function generateCSSRule (line 57) | function generateCSSRule(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalize-value.js
function normalizeValue (line 38) | function normalizeValue(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/convert-camel-case-values.js
function convertCamelCasedValues (line 17) | function convertCamelCasedValues(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/detect-unclosed-fns.js
function detectUnclosedFns (line 17) | function detectUnclosedFns(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/font-size-px-to-rem.js
constant ROOT_FONT_SIZE (line 14) | const ROOT_FONT_SIZE = 16;
function convertFontSizeToRem (line 21) | function convertFontSizeToRem(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/leading-zero.js
function normalizeLeadingZero (line 17) | function normalizeLeadingZero(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/quotes.js
function normalizeQuotes (line 16) | function normalizeQuotes(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/timings.js
function normalizeTimings (line 18) | function normalizeTimings(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/whitespace.js
function normalizeWhitespace (line 17) | function normalizeWhitespace(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/normalizers/zero-dimensions.js
function normalizeZeroDimensions (line 24) | function normalizeZeroDimensions(
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/object-utils.js
function isPlainObject (line 17) | function isPlainObject(obj: mixed): implies obj is AnyObject {
function flattenObject (line 26) | function flattenObject(obj: CompiledStyles): {
method return (line 112) | return new Pipe(mapper(this.value));
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/rule-utils.js
method if (line 15) | if (pseudos.length < 2) {
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/split-css-value.js
method if (line 32) | if (str == null || typeof str === 'number') {
method if (line 37) | if (Array.isArray(str)) {
FILE: packages/@stylexjs/babel-plugin/src/shared/utils/transform-value.js
function transformValue (line 17) | function transformValue(
function getNumberSuffix (line 76) | function getNumberSuffix(key: string): string {
FILE: packages/@stylexjs/babel-plugin/src/shared/validate.js
function validateEntry (line 12) | function validateEntry([key, value]: [string, TRawValue]) {
function validateSimplyEntry (line 20) | function validateSimplyEntry([key, _value]: [string, string | number]) {
constant BANNED_KEYS (line 26) | const BANNED_KEYS = new Set(['background', 'transition', 'grid']);
FILE: packages/@stylexjs/babel-plugin/src/shared/when/when.js
function getDefaultMarkerClassName (line 33) | function getDefaultMarkerClassName(
function validatePseudoSelector (line 55) | function validatePseudoSelector(pseudo: string): void {
function ancestor (line 76) | function ancestor(
FILE: packages/@stylexjs/babel-plugin/src/utils/__tests__/evaluate-path-test.js
function evaluateFirstStatement (line 17) | function evaluateFirstStatement(code, functions) {
function evaluateLastStatement (line 46) | function evaluateLastStatement(code, functions) {
function makeArray (line 127) | function makeArray(...args) {
class MyClass (line 147) | class MyClass {
method constructor (line 148) | constructor(value) {
function makeClass (line 152) | function makeClass(value) {
function makeObj (line 164) | function makeObj(value) {
function getNode (line 181) | function getNode(path) {
FILE: packages/@stylexjs/babel-plugin/src/utils/__tests__/state-manager-test.js
method filePathResolver (line 547) | filePathResolver() {}
method getCanonicalFilePath (line 548) | getCanonicalFilePath() {}
FILE: packages/@stylexjs/babel-plugin/src/utils/add-sourcemap-data.js
function getShortPath (line 28) | function getShortPath(relativePath: string, state: StateManager): string {
function createShortFilename (line 41) | function createShortFilename(
function addSourceMapData (line 79) | function addSourceMapData(
FILE: packages/@stylexjs/babel-plugin/src/utils/ast-helpers.js
function hoistExpression (line 21) | function hoistExpression(
function pathReplaceHoisted (line 40) | function pathReplaceHoisted(
function addNamedImport (line 79) | function addNamedImport(
function addDefaultImport (line 127) | function addDefaultImport(
function isProgramLevel (line 174) | function isProgramLevel(path: NodePath<>): boolean {
function getProgramStatement (line 196) | function getProgramStatement(path: NodePath<>): NodePath<> {
function isVariableNamedExported (line 216) | function isVariableNamedExported(
FILE: packages/@stylexjs/babel-plugin/src/utils/dev-classname.js
function namespaceToDevClassName (line 17) | function namespaceToDevClassName(
function injectDevClassNames (line 30) | function injectDevClassNames(
function convertToTestStyles (line 51) | function convertToTestStyles(
FILE: packages/@stylexjs/babel-plugin/src/utils/evaluate-path.js
constant VALID_CALLEES (line 36) | const VALID_CALLEES = ['String', 'Number', 'Math', 'Object', 'Array'];
constant INVALID_METHODS (line 37) | const INVALID_METHODS = [
function isValidCallee (line 47) | function isValidCallee(val: string): boolean {
function isInvalidMethod (line 51) | function isInvalidMethod(val: string): boolean {
constant MUTATING_ARRAY_METHODS (line 55) | const MUTATING_ARRAY_METHODS = new Set([
function deopt (line 162) | function deopt(path: NodePath<>, state: State, reason: string): void {
method get (line 274) | get(_, key: string) {
method if (line 515) | if (
method return (line 566) | return deopt(path, state, errMsgs.UNDEFINED_CONST);
method if (line 574) | if (path.node.operator === 'void') {
method if (line 635) | if (prop.isObjectMethod()) {
method if (line 716) | if (leftConfident && (!!left || rightConfident)) {
method if (line 719) | if (!leftConfident) {
method if (line 723) | if (!rightConfident) {
method deopt (line 728) | deopt(path, state, 'unknown error');
FILE: packages/@stylexjs/babel-plugin/src/utils/evaluation-errors.js
constant IMPORT_FILE_PARSING_ERROR (line 10) | const IMPORT_FILE_PARSING_ERROR = `There was error when attempting to pa...
constant IMPORT_FILE_EVAL_ERROR (line 15) | const IMPORT_FILE_EVAL_ERROR = `There was an error when attempting to ev...
constant DEFAULT_IMPORT (line 19) | const DEFAULT_IMPORT = `Error: Cannot use default imports.
constant PATH_WITHOUT_NODE (line 27) | const PATH_WITHOUT_NODE = `Unexpected error:
constant UNEXPECTED_MEMBER_LOOKUP (line 31) | const UNEXPECTED_MEMBER_LOOKUP = `Unexpected error:
constant IMPORT_PATH_RESOLUTION_ERROR (line 35) | const IMPORT_PATH_RESOLUTION_ERROR = `Could not resolve the path to the ...
constant NON_CONSTANT (line 42) | const NON_CONSTANT = 'Referenced value is not a constant.\n\n';
constant USED_BEFORE_DECLARATION (line 44) | const USED_BEFORE_DECLARATION =
constant UNINITIALIZED_CONST (line 47) | const UNINITIALIZED_CONST =
constant UNDEFINED_CONST (line 50) | const UNDEFINED_CONST = 'Referenced constant is not defined.';
constant OBJECT_METHOD (line 55) | const OBJECT_METHOD = 'Unsupported object method.\n\n';
FILE: packages/@stylexjs/babel-plugin/src/utils/state-manager.js
method if (line 485) | if (typeof importSource !== 'string' && importSource.from === source) {
method catch (line 604) | catch (err) {
method if (line 739) | if (styles.length === 0) {
method if (line 829) | if (alias.includes('*')) {
constant EXTENSIONS (line 897) | const EXTENSIONS = ['.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs'];
function getRelativePath (line 920) | function getRelativePath(from: string, to: string): string {
function toPosixPath (line 925) | function toPosixPath(filePath: string): string {
function formatRelativePath (line 929) | function formatRelativePath(filePath: string) {
FILE: packages/@stylexjs/babel-plugin/src/utils/validate.js
method if (line 120) | if (!Array.isArray(value)) {
FILE: packages/@stylexjs/babel-plugin/src/visitors/__tests__/parse-stylex-create-arg-test.js
function removeLoc (line 19) | function removeLoc(obj) {
function evaluateFirstStatement (line 43) | function evaluateFirstStatement(code, functions) {
FILE: packages/@stylexjs/babel-plugin/src/visitors/imports.js
function readImportDeclarations (line 16) | function readImportDeclarations(
function readRequires (line 111) | function readRequires(
FILE: packages/@stylexjs/babel-plugin/src/visitors/parse-stylex-create-arg.js
function evaluateStyleXCreateArg (line 41) | function evaluateStyleXCreateArg(
function evaluatePartialObjectRecursively (line 119) | function evaluatePartialObjectRecursively(
function evaluateObjKey (line 262) | function evaluateObjKey(
function validateDynamicStyleParams (line 287) | function validateDynamicStyleParams(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme.js
function validateStyleXCreateTheme (line 204) | function validateStyleXCreateTheme(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-create.js
function isSafeToSkipNullCheck (line 35) | function isSafeToSkipNullCheck(expr: t.Expression): boolean {
function hasExplicitNullishFallback (line 76) | function hasExplicitNullishFallback(expr: t.Expression): boolean {
function validateStyleXCreate (line 503) | function validateStyleXCreate(path: NodePath<t.CallExpression>) {
function legacyExpandShorthands (line 532) | function legacyExpandShorthands(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-default-marker.js
function transformStyleXDefaultMarker (line 22) | function transformStyleXDefaultMarker(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts.js
function transformStyleXDefineConsts (line 27) | function transformStyleXDefineConsts(
function validateStyleXDefineConsts (line 109) | function validateStyleXDefineConsts(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-define-marker.js
function transformStyleXDefineMarker (line 24) | function transformStyleXDefineMarker(
function validateStyleXDefineMarker (line 85) | function validateStyleXDefineMarker(path: NodePath<t.CallExpression>) {
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars.js
function validateStyleXDefineVars (line 181) | function validateStyleXDefineVars(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-keyframes.js
function assertValidKeyframes (line 111) | function assertValidKeyframes(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-merge.js
function skipStylexMergeChildren (line 29) | function skipStylexMergeChildren(
function transformStyleXMerge (line 47) | function transformStyleXMerge(
function makeStringExpression (line 269) | function makeStringExpression(values: ResolvedArgs): t.Expression {
function genConditionPermutations (line 306) | function genConditionPermutations(count: number): Array<Array<boolean>> {
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-position-try.js
function transformStyleXPositionTry (line 26) | function transformStyleXPositionTry(
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-props.js
class ConditionalStyle (line 27) | class ConditionalStyle {
method constructor (line 31) | constructor(
function skipStylexPropsChildren (line 45) | function skipStylexPropsChildren(
function transformStylexProps (line 61) | function transformStylexProps(
function MemberExpression (line 197) | function MemberExpression(path: NodePath<t.MemberExpression>) {
function makeStringExpression (line 384) | function makeStringExpression(values: ResolvedArgs): t.Expression {
function genConditionPermutations (line 424) | function genConditionPermutations(count: number): Array<Array<boolean>> {
FILE: packages/@stylexjs/babel-plugin/src/visitors/stylex-view-transition-class.js
function transformStyleXViewTransitionClass (line 30) | function transformStyleXViewTransitionClass(
FILE: packages/@stylexjs/cli/__tests__/__mocks__/snapshot/components/button.js
function Button (line 26) | function Button() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/snapshot/index.js
function App (line 26) | function App() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/snapshot/pages/home.js
function Home (line 26) | function Home() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/components/button.js
function Button (line 26) | function Button() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/index.js
function App (line 26) | function App() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/snapshot2/pages/home.js
function Home (line 26) | function Home() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/source/components/button.js
function Button (line 37) | function Button() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/source/index.js
function App (line 37) | function App() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/source/pages/home.js
function Home (line 37) | function Home() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/source2/components/button.js
function Button (line 37) | function Button() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/source2/index.js
function App (line 37) | function App() {
FILE: packages/@stylexjs/cli/__tests__/__mocks__/source2/pages/home.js
function Home (line 37) | function Home() {
FILE: packages/@stylexjs/cli/__tests__/compile-stylex-folder-test.js
function clearTestDir (line 26) | async function clearTestDir(config: CliConfig) {
function runCli (line 32) | function runCli(
FILE: packages/@stylexjs/cli/src/cache.js
function getDefaultCachePath (line 12) | function getDefaultCachePath() {
constant PROJECT_INDICATORS (line 16) | const PROJECT_INDICATORS = ['package.json', 'deno.json', 'deno.jsonc', '...
function findProjectRoot (line 18) | async function findProjectRoot(startPath = process.cwd()) {
function findNearestBabelRC (line 41) | async function findNearestBabelRC(dir) {
function getCacheFilePath (line 58) | async function getCacheFilePath(cachePath, filePath) {
function readCache (line 66) | async function readCache(cachePath, filePath) {
function writeCache (line 80) | async function writeCache(cachePath, filePath, data) {
function deleteCache (line 89) | async function deleteCache(cachePath, filePath) {
function computeBabelRCHash (line 101) | async function computeBabelRCHash(path) {
function computeStyleXConfigHash (line 117) | function computeStyleXConfigHash(config) {
function computeFilePathHash (line 133) | async function computeFilePathHash(filePath) {
FILE: packages/@stylexjs/cli/src/files.js
method if (line 18) | if (!fs.existsSync(inputDir)) {
function writeCompiledCSS (line 29) | function writeCompiledCSS(filePath: string, compiledCSS: string): void {
function writeCompiledJS (line 37) | function writeCompiledJS(filePath: string, code: string): string {
function copyFile (line 52) | function copyFile(src: string, dst: string) {
function isDir (line 57) | function isDir(filePath: string): boolean {
function isJSFile (line 61) | function isJSFile(filePath: string): boolean {
function getRelativePath (line 74) | function getRelativePath(from: string, to: string): string {
function toPosixPath (line 79) | function toPosixPath(filePath: string): string {
function formatRelativePath (line 83) | function formatRelativePath(filePath: string) {
FILE: packages/@stylexjs/cli/src/hash.js
function murmurhash2_32_gc (line 25) | function murmurhash2_32_gc(str: string, seed?: number = 0) {
FILE: packages/@stylexjs/cli/src/index.js
method compileDirectory (line 148) | compileDirectory(config);
FILE: packages/@stylexjs/cli/src/modules.js
constant COMPILED_MODULES_DIR_NAME (line 17) | const COMPILED_MODULES_DIR_NAME = 'stylex_compiled_modules';
function copyNodeModules (line 19) | function copyNodeModules(config: TransformConfig): boolean {
function findModuleDir (line 37) | function findModuleDir(
function clearInputModuleDir (line 57) | function clearInputModuleDir(config: TransformConfig) {
function fetchModule (line 67) | function fetchModule(
FILE: packages/@stylexjs/cli/src/plugins.js
method if (line 70) | if (
FILE: packages/@stylexjs/cli/src/transform.js
method if (line 45) | if (filesToDelete) {
FILE: packages/@stylexjs/cli/src/watcher.js
class WatchmanClient (line 36) | class WatchmanClient {
FILE: packages/@stylexjs/create-stylex-app/src/index.js
constant PRIMARY (line 20) | const PRIMARY = '#5B45DE';
constant SECONDARY (line 21) | const SECONDARY = '#D573DD';
function showWelcomeBanner (line 26) | function showWelcomeBanner() {
function parseArgs (line 69) | function parseArgs(args) {
function showHelp (line 97) | function showHelp() {
function main (line 131) | async function main() {
function handleCustomTemplate (line 322) | async function handleCustomTemplate(argv, projectName, targetDir) {
function finishSetup (line 375) | async function finishSetup(argv, projectName, targetDir) {
FILE: packages/@stylexjs/create-stylex-app/src/templates.js
constant BUNDLED_TEMPLATES (line 16) | const BUNDLED_TEMPLATES = require('../templates.json').templates;
function getTemplates (line 22) | async function getTemplates() {
function getBundledTemplates (line 36) | function getBundledTemplates() {
FILE: packages/@stylexjs/create-stylex-app/src/utils/fetch-template.js
constant DEFAULT_REPO (line 14) | const DEFAULT_REPO = 'facebook/stylex';
constant DEFAULT_BRANCH (line 15) | const DEFAULT_BRANCH = 'main';
function fetchSharedUI (line 20) | async function fetchSharedUI(targetDir) {
function fetchTemplate (line 35) | async function fetchTemplate(templateConfig, targetDir) {
function fetchCustomTemplate (line 58) | async function fetchCustomTemplate(templateSource, targetDir) {
function fetchTemplatesManifest (line 71) | async function fetchTemplatesManifest(
FILE: packages/@stylexjs/create-stylex-app/src/utils/files.js
function copyDirectory (line 17) | async function copyDirectory(source, target, excludePatterns) {
FILE: packages/@stylexjs/create-stylex-app/src/utils/packages.js
function detectPackageManager (line 17) | async function detectPackageManager() {
function installDependencies (line 33) | async function installDependencies(targetDir, packageManager) {
FILE: packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js
method if (line 433) | if (node.type !== 'Literal' || prop == null) {
FILE: packages/@stylexjs/eslint-plugin/src/rules/isAnimationName.js
method if (line 22) | if (
method if (line 56) | if (
FILE: packages/@stylexjs/eslint-plugin/src/rules/isCSSVariable.js
method if (line 24) | if (node.type === 'Literal') {
FILE: packages/@stylexjs/eslint-plugin/src/rules/isPercentage.js
method if (line 22) | if (node.type === 'Literal') {
FILE: packages/@stylexjs/eslint-plugin/src/rules/isPositionTryFallbacks.js
method if (line 22) | if (
method if (line 56) | if (
FILE: packages/@stylexjs/eslint-plugin/src/rules/isString.js
method if (line 19) | if (node.type === 'Literal' && typeof node.value === 'string') {
FILE: packages/@stylexjs/eslint-plugin/src/rules/isStylexResolvedVarsToken.js
function isStylexDefineVarsToken (line 13) | function isStylexDefineVarsToken(
FILE: packages/@stylexjs/eslint-plugin/src/rules/makeLiteralRule.js
constant MAX_DISTANCE (line 23) | const MAX_DISTANCE = 4;
function makeLiteralRule (line 24) | function makeLiteralRule(
FILE: packages/@stylexjs/eslint-plugin/src/rules/makeRangeRule.js
function makeRangeRule (line 18) | function makeRangeRule(
FILE: packages/@stylexjs/eslint-plugin/src/rules/makeRegExRule.js
function makeRegExRule (line 18) | function makeRegExRule(
FILE: packages/@stylexjs/eslint-plugin/src/stylex-no-conflicting-props.js
method if (line 104) | if (
method for (line 120) | for (const prop of attr.argument.properties) {
FILE: packages/@stylexjs/eslint-plugin/src/stylex-no-lookahead-selectors.js
method if (line 105) | if (node.computed && node.key.type === 'CallExpression') {
FILE: packages/@stylexjs/eslint-plugin/src/stylex-no-nonstandard-styles.js
function checkStyleProperty (line 155) | function checkStyleProperty(
method if (line 330) | if (node.type === 'VariableDeclaration') {
FILE: packages/@stylexjs/eslint-plugin/src/stylex-no-unused.js
function getPropertiesByName (line 37) | function getPropertiesByName(node: Node | null) {
method if (line 132) | if (argument) {
method fix (line 250) | fix(fixer) {
FILE: packages/@stylexjs/eslint-plugin/src/stylex-sort-keys.js
method if (line 180) | if (
method if (line 188) | if (isInsideStyleXCreateCall) {
method if (line 205) | if (
FILE: packages/@stylexjs/eslint-plugin/src/stylex-valid-styles.js
function isStylexCallee (line 302) | function isStylexCallee(node: Node) {
function isStylexDeclaration (line 313) | function isStylexDeclaration(node: $ReadOnly<{ ...Node, ... }>) {
function validateStyleValue (line 322) | function validateStyleValue(
function checkStyleProperty (line 428) | function checkStyleProperty(
method if (line 757) | if (node.type === 'VariableDeclaration') {
FILE: packages/@stylexjs/eslint-plugin/src/utils/evaluate.js
method if (line 17) | if (
FILE: packages/@stylexjs/eslint-plugin/src/utils/getDistance.js
function getDistanceMin (line 12) | function getDistanceMin(
function getDistance (line 36) | function getDistance(
FILE: packages/@stylexjs/eslint-plugin/src/utils/getPropertyName.js
function isNullLiteral (line 14) | function isNullLiteral(node: Node) {
function getStaticStringValue (line 23) | function getStaticStringValue(node: Node): string | null {
method let (line 55) | let prop;
method if (line 104) | if (current.property.type === 'Identifier') {
FILE: packages/@stylexjs/eslint-plugin/src/utils/getPropertyPriorityAndType.js
constant ORDER_PRIORITIES (line 32) | const ORDER_PRIORITIES = {
function getPropertyPriorityAndType (line 38) | function getPropertyPriorityAndType(
FILE: packages/@stylexjs/eslint-plugin/src/utils/getSourceCode.js
function getSourceCode (line 16) | function getSourceCode(context: Rule.RuleContext): SourceCode {
FILE: packages/@stylexjs/eslint-plugin/src/utils/isWhiteSpaceOrEmpty.js
function isWhiteSpaceOrEmpty (line 10) | function isWhiteSpaceOrEmpty(str: string): boolean {
FILE: packages/@stylexjs/eslint-plugin/src/utils/makeVariableCheckingRule.js
function makeVariableCheckingRule (line 18) | function makeVariableCheckingRule(rule: RuleCheck): RuleCheck {
FILE: packages/@stylexjs/eslint-plugin/src/utils/resolveKey.js
method if (line 21) | if (existingVar === 'ARG') {
FILE: packages/@stylexjs/eslint-plugin/src/utils/split-css-value.js
method if (line 13) | if (typeof borderValue === 'number') {
method if (line 33) | if (currentSegment.length > 0) {
FILE: packages/@stylexjs/eslint-plugin/src/utils/splitShorthands.js
constant CANNOT_FIX (line 14) | const CANNOT_FIX = 'CANNOT_FIX';
FILE: packages/@stylexjs/postcss-plugin/__tests__/__auto_discovery_fixtures__/src/types.d.ts
type LocalType (line 1) | type LocalType = {
FILE: packages/@stylexjs/postcss-plugin/__tests__/index-test.js
function createAutoDiscoveryFixture (line 23) | function createAutoDiscoveryFixture() {
function runStylexPostcss (line 139) | async function runStylexPostcss(options = {}, inputCSS = '@stylex;') {
function runAutoDiscoveryPostcss (line 160) | async function runAutoDiscoveryPostcss(options = {}, inputCSS = '@stylex...
FILE: packages/@stylexjs/postcss-plugin/src/builder.js
constant NODE_MODULES_CATCH_ALL_EXCLUDE_PATTERNS (line 16) | const NODE_MODULES_CATCH_ALL_EXCLUDE_PATTERNS = new Set([
function parseGlob (line 23) | function parseGlob(pattern) {
function parseDependency (line 48) | function parseDependency(fileOrGlob, cwd) {
function normalizeGlobPattern (line 72) | function normalizeGlobPattern(pattern) {
function isNodeModulesCatchAllExcludePattern (line 76) | function isNodeModulesCatchAllExcludePattern(pattern) {
function toCanonicalFilePath (line 82) | function toCanonicalFilePath(file, cwd) {
function createBuilder (line 87) | function createBuilder() {
FILE: packages/@stylexjs/postcss-plugin/src/bundler.js
function shouldTransform (line 16) | function shouldTransform(sourceCode, options) {
function transform (line 28) | async function transform(id, sourceCode, babelConfig, options) {
function remove (line 60) | function remove(id) {
function bundle (line 65) | function bundle({
FILE: packages/@stylexjs/postcss-plugin/src/discovery.js
constant DEFAULT_IMPORT_SOURCES (line 13) | const DEFAULT_IMPORT_SOURCES = ['@stylexjs/stylex', 'stylex'];
constant DEFAULT_IMPORT_SOURCE_PACKAGES (line 14) | const DEFAULT_IMPORT_SOURCE_PACKAGES = new Set(
constant DEFAULT_INCLUDE_GLOB (line 24) | const DEFAULT_INCLUDE_GLOB = '**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}';
constant AUTO_DISCOVERY_EXCLUDES (line 28) | const AUTO_DISCOVERY_EXCLUDES = [
constant BABEL_PLUGIN_STRING_NAME (line 44) | const BABEL_PLUGIN_STRING_NAME = '@stylexjs/babel-plugin';
constant BABEL_DISCOVERY_FILENAME (line 45) | const BABEL_DISCOVERY_FILENAME = '__stylex_postcss_discovery__.js';
function toArray (line 47) | function toArray(value) {
function dedupe (line 54) | function dedupe(items) {
function readJSON (line 58) | function readJSON(file) {
function toPackageName (line 67) | function toPackageName(importSource) {
function hasStylexDependency (line 87) | function hasStylexDependency(manifest, targetPackages) {
function findDependencyManifestPathFromEntry (line 107) | function findDependencyManifestPathFromEntry(entryPath, dependencyName) {
function resolveDependencyManifestPath (line 125) | function resolveDependencyManifestPath(requireFromRoot, dependencyName) {
function includePackageFromImportSource (line 138) | function includePackageFromImportSource({
function getDirectDependencies (line 175) | function getDirectDependencies(manifest) {
function toAbsoluteGlob (line 201) | function toAbsoluteGlob(directory, globPattern) {
function discoverStylexPackageDirectories (line 206) | function discoverStylexPackageDirectories({ cwd, importSources }) {
function getPluginOptions (line 259) | function getPluginOptions(pluginEntry) {
function getPluginRefCandidates (line 271) | function getPluginRefCandidates(pluginEntry) {
function isStylexBabelPluginName (line 293) | function isStylexBabelPluginName(pluginRef) {
function inferImportSourcesFromPluginEntries (line 330) | function inferImportSourcesFromPluginEntries(pluginEntries) {
function inferImportSourcesFromBabelConfig (line 352) | function inferImportSourcesFromBabelConfig(babelConfig) {
function getEffectiveBabelConfig (line 357) | function getEffectiveBabelConfig({ babelConfig, cwd }) {
function inferImportSourcesFromResolvedBabelConfig (line 370) | function inferImportSourcesFromResolvedBabelConfig({ babelConfig, cwd }) {
function resolveImportSourcesWithMetadata (line 398) | function resolveImportSourcesWithMetadata({ importSources, babelConfig, ...
function resolveImportSources (line 437) | function resolveImportSources({ importSources, babelConfig, cwd }) {
function resolveIncludeWithMetadata (line 445) | function resolveIncludeWithMetadata({ cwd, include, importSources }) {
function resolveInclude (line 473) | function resolveInclude({ cwd, include, importSources }) {
function resolveExclude (line 481) | function resolveExclude({ include, exclude }) {
FILE: packages/@stylexjs/postcss-plugin/src/plugin.js
function isDebugEnabled (line 16) | function isDebugEnabled() {
FILE: packages/@stylexjs/rollup-plugin/__tests__/__fixtures__/index.js
function App (line 40) | function App() {
FILE: packages/@stylexjs/rollup-plugin/__tests__/index-test.js
function runStylex (line 18) | async function runStylex(options) {
FILE: packages/@stylexjs/rollup-plugin/src/index.js
constant IS_DEV_ENV (line 29) | const IS_DEV_ENV =
function replaceFileName (line 50) | function replaceFileName(original: string, css: string) {
method buildStart (line 77) | buildStart() {
method if (line 119) | if (
FILE: packages/@stylexjs/shared/src/utils/property-priorities.js
constant PSEUDO_ELEMENT_PRIORITY (line 726) | const PSEUDO_ELEMENT_PRIORITY: number = 5000;
constant RELATIONAL_SELECTORS (line 728) | const RELATIONAL_SELECTORS = {
constant PSEUDO_PART_REGEX (line 737) | const PSEUDO_PART_REGEX = /::[a-zA-Z-]+|:[a-zA-Z-]+(?:\([^)]*\))?/g;
function getCompoundPseudoPriority (line 740) | function getCompoundPseudoPriority(key: string): number | void {
method if (line 756) | if (key.startsWith('--')) {
method if (line 760) | if (key.startsWith('@supports')) {
method if (line 764) | if (key.startsWith('@media')) {
method if (line 768) | if (key.startsWith('@container')) {
method if (line 774) | if (key.startsWith('::')) {
method if (line 818) | if (shorthandsOfShorthands.has(key)) {
method if (line 821) | if (shorthandsOfLonghands.has(key)) {
method if (line 824) | if (longHandLogical.has(key)) {
method if (line 827) | if (longHandPhysical.has(key)) {
function getPriority (line 832) | function getPriority(key: string): number {
FILE: packages/@stylexjs/stylex/.babelrc.js
constant BABEL_ENV (line 8) | const BABEL_ENV = process.env['BABEL_ENV'];
FILE: packages/@stylexjs/stylex/rollup.config.mjs
constant BABEL_ENV (line 17) | const BABEL_ENV = process.env['BABEL_ENV'];
FILE: packages/@stylexjs/stylex/src/inject.js
function escapeRegex (line 26) | function escapeRegex(str: string): string {
function resolveConstants (line 33) | function resolveConstants(cssText: string): string {
function trackDependencies (line 66) | function trackDependencies(
function updateDependentRules (line 89) | function updateDependentRules(constKey: string): void {
function inject (line 122) | function inject(args: InjectArgs): string {
FILE: packages/@stylexjs/stylex/src/stylesheet/createCSSStyleSheet.js
method if (line 16) | if (canUseDOM) {
FILE: packages/@stylexjs/stylex/src/stylesheet/createOrderedCSSStyleSheet.js
function sheetInsert (line 62) | function sheetInsert(sheet: CSSStyleSheet, group: number, text: string) {
function insert (line 90) | function insert(cssText: string, groupValue: number) {
function update (line 117) | function update(oldCssText: string, newCssText: string, groupValue: numb...
function encodeGroupRule (line 202) | function encodeGroupRule(group: number) {
function decodeGroupRule (line 207) | function decodeGroupRule(cssRule: CSSRule) {
function getOrderedGroups (line 212) | function getOrderedGroups(obj: { [key: number]: any }) {
function getSeenRuleKey (line 227) | function getSeenRuleKey(cssText: string): string | null {
function insertRuleAt (line 244) | function insertRuleAt(
FILE: packages/@stylexjs/stylex/src/stylesheet/createSheet.js
method getTextContent (line 61) | getTextContent() {
FILE: packages/@stylexjs/stylex/src/stylesheet/utils.js
function addSpecificityLevel (line 20) | function addSpecificityLevel(cssText: string, index: number): string {
FILE: packages/@stylexjs/stylex/src/types/StyleXTypes.d.ts
type StyleXClassNameFor (line 13) | type StyleXClassNameFor<K, V> = string & {
class _StyleXVar (line 19) | class _StyleXVar<out Val> {
type StyleXVar (line 23) | type StyleXVar<Val> = _StyleXVar<Val> & string;
type StyleXClassNameForValue (line 25) | type StyleXClassNameForValue<V> = StyleXClassNameFor<any, V>;
type StyleXClassNameForKey (line 26) | type StyleXClassNameForKey<K> = StyleXClassNameFor<K, any>;
type StyleXClassName (line 27) | type StyleXClassName = StyleXClassNameFor<any, any>;
type StyleXArray (line 29) | type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
type PseudoClassStr (line 31) | type PseudoClassStr = `:${string}`;
type AtRuleStr (line 32) | type AtRuleStr = `@${string}`;
type CondStr (line 34) | type CondStr = PseudoClassStr | AtRuleStr;
type CSSPropertiesWithExtras (line 36) | type CSSPropertiesWithExtras = Partial<
type NestedCSSPropTypes (line 80) | type NestedCSSPropTypes = Partial<
type NotUndefined (line 89) | type NotUndefined = {} | null;
type UserAuthoredStyles (line 90) | type UserAuthoredStyles =
type StyleXSingleStyle (line 93) | type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
type Keyframes (line 96) | type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
type PositionTry (line 98) | type PositionTry = Readonly<{
type ViewTransitionClass (line 145) | type ViewTransitionClass = Readonly<{
type LegacyThemeStyles (line 152) | type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
type ComplexStyleValueType (line 154) | type ComplexStyleValueType<T> =
type MapNamespace (line 167) | type MapNamespace<CSS> = Readonly<{
type MapNamespaces (line 171) | type MapNamespaces<
type StyleX$Create (line 181) | type StyleX$Create = <
type CompiledStyles (line 189) | type CompiledStyles =
type InlineStyles (line 199) | type InlineStyles = {
type _GenStylePropType (line 203) | type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
type GenStylePropType (line 210) | type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
type StaticStyles (line 215) | type StaticStyles<
type StaticStylesWithout (line 219) | type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
type StyleXStyles (line 223) | type StyleXStyles<
type StyleXStylesWithout (line 232) | type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
type VarGroup (line 237) | type VarGroup<
type TokensFromVarGroup (line 249) | type TokensFromVarGroup<T extends VarGroup<{}>> = T['__tokens'];
type IDFromVarGroup (line 251) | type IDFromVarGroup<T extends VarGroup<{}>> = T['__opaqueId'];
type TTokens (line 253) | type TTokens = Readonly<{
type UnwrapVars (line 260) | type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
type FlattenTokens (line 261) | type FlattenTokens<T extends TTokens> = Readonly<{
type NestedVarObject (line 267) | type NestedVarObject<T> =
type StyleX$DefineConsts (line 274) | type StyleX$DefineConsts = <
type StyleX$DefineVars (line 282) | type StyleX$DefineVars = <
class ThemeKey (line 289) | class ThemeKey<out VG extends VarGroup<{}>> extends String {
type Theme (line 292) | type Theme<T extends VarGroup<{}>, Tag extends symbol = symbol> = Tag &
type OverridesForTokenType (line 297) | type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
type StyleX$CreateTheme (line 301) | type StyleX$CreateTheme = <
type StyleX$DefineMarker (line 311) | type StyleX$DefineMarker = () => MapNamespace<{
type StyleX$When (line 315) | type StyleX$When = {
type Register (line 358) | interface Register {}
type StyleX$Env (line 360) | type StyleX$Env = Register extends { env: infer TEnv }
FILE: packages/@stylexjs/unplugin/babel-plugins/add-mjs-extension.js
function normalizeSpecifier (line 10) | function normalizeSpecifier(spec) {
function needsExtension (line 18) | function needsExtension(spec) {
method ImportDeclaration (line 30) | ImportDeclaration(path, state) {
method ExportNamedDeclaration (line 39) | ExportNamedDeclaration(path, state) {
FILE: packages/@stylexjs/unplugin/src/bun.d.ts
type BunOptions (line 10) | type BunOptions = UserOptions & {
FILE: packages/@stylexjs/unplugin/src/bun.js
method setup (line 47) | async setup(build) {
FILE: packages/@stylexjs/unplugin/src/consts.js
constant DEV_CSS_PATH (line 10) | const DEV_CSS_PATH = '/virtual:stylex.css';
constant DEV_RUNTIME_PATH (line 11) | const DEV_RUNTIME_PATH = '/virtual:stylex.js';
constant DEV_AFTER_UPDATE_DELAY (line 12) | const DEV_AFTER_UPDATE_DELAY = 180;
constant VIRTUAL_STYLEX_RUNTIME_SCRIPT (line 14) | const VIRTUAL_STYLEX_RUNTIME_SCRIPT = `
constant VIRTUAL_STYLEX_CSS_ONLY_SCRIPT (line 71) | const VIRTUAL_STYLEX_CSS_ONLY_SCRIPT = `
constant DEV_RUNTIME_SCRIPT (line 101) | const DEV_RUNTIME_SCRIPT = `
FILE: packages/@stylexjs/unplugin/src/core.d.ts
type LightningcssOptions (line 11) | type LightningcssOptions = Omit<TransformOptions<any>, 'filename' | 'cod...
type UserOptions (line 13) | type UserOptions = StyleXOptions & {
FILE: packages/@stylexjs/unplugin/src/core.js
function pickCssAssetFromRollupBundle (line 29) | function pickCssAssetFromRollupBundle(bundle, choose) {
function processCollectedRulesToCSS (line 48) | function processCollectedRulesToCSS(rules, options) {
function getAssetBaseName (line 65) | function getAssetBaseName(asset) {
function replaceBundleReferences (line 75) | function replaceBundleReferences(bundle, oldFileName, newFileName) {
function replaceCssAssetWithHashedCopy (line 100) | function replaceCssAssetWithHashedCopy(ctx, bundle, asset, nextSource) {
function readJSON (line 117) | function readJSON(file) {
function findNearestPackageJson (line 126) | function findNearestPackageJson(startDir) {
function toPackageName (line 138) | function toPackageName(importSource) {
function hasStylexDependency (line 150) | function hasStylexDependency(manifest, targetPackages) {
function discoverStylexPackages (line 167) | function discoverStylexPackages({
function getSharedStore (line 238) | function getSharedStore() {
function findNearestNodeModules (line 261) | function findNearestNodeModules(startDir) {
function runBabelTransform (line 282) | async function runBabelTransform(inputCode, filename, callerName) {
function escapeReg (line 316) | function escapeReg(src) {
function containsStylexImport (line 320) | function containsStylexImport(code, source) {
function shouldHandle (line 330) | function shouldHandle(code) {
function resetState (line 335) | function resetState() {
function collectCss (line 344) | function collectCss() {
function persistRulesToDisk (line 369) | async function persistRulesToDisk(id, rules) {
method buildStart (line 402) | buildStart() {
method buildEnd (line 405) | buildEnd() {
method transform (line 410) | async transform(code, id) {
method shouldTransformCachedModule (line 475) | shouldTransformCachedModule({ id, meta }) {
FILE: packages/@stylexjs/unplugin/src/esbuild.js
function attachEsbuildHooks (line 15) | function attachEsbuildHooks(plugin) {
FILE: packages/@stylexjs/unplugin/src/rollup.js
function attachRollupHooks (line 19) | function attachRollupHooks(plugin) {
FILE: packages/@stylexjs/unplugin/src/vite.js
function attachViteHooks (line 25) | function attachViteHooks(plugin) {
FILE: packages/@stylexjs/unplugin/src/webpack.js
function attachWebpackHooks (line 12) | function attachWebpackHooks(plugin) {
FILE: packages/benchmarks/compare.js
function readJsonFile (line 12) | function readJsonFile(filePath) {
function mergeData (line 23) | function mergeData(base, patch) {
function generateComparisonData (line 47) | function generateComparisonData(results) {
function generateMarkdownTable (line 75) | function generateMarkdownTable(mergedData) {
FILE: packages/benchmarks/perf/fixtures/createTheme-complex.js
constant DARK (line 338) | const DARK = '@media (prefers-color-scheme: dark)';
FILE: packages/benchmarks/perf/helpers.js
function createSuite (line 18) | function createSuite(name, options) {
function transformHaste (line 67) | function transformHaste(file, opts = defaultOpts) {
FILE: packages/benchmarks/perf/run.js
method callback (line 28) | callback(data, suiteName) {
FILE: packages/benchmarks/perf/tests/transform-create-tests.js
function runSuite (line 19) | function runSuite(options) {
FILE: packages/benchmarks/perf/tests/transform-create-theme-tests.js
function runSuite (line 25) | function runSuite(options) {
FILE: packages/benchmarks/size/fixtures/index.js
function App (line 17) | function App() {
FILE: packages/benchmarks/size/run.js
function getSizes (line 21) | function getSizes(files) {
FILE: packages/docs/src/components/AnimatedGradientBox/index.tsx
constant COLORS (line 10) | const COLORS = [
function AnimatedGradientBox (line 60) | function AnimatedGradientBox() {
FILE: packages/docs/src/components/CtaButton.tsx
function CtaButton (line 13) | function CtaButton({
FILE: packages/docs/src/components/DevStyleXHMR.tsx
function DevStyleXHMR (line 11) | function DevStyleXHMR() {
function EmptyStub (line 19) | function EmptyStub() {
FILE: packages/docs/src/components/Footer.tsx
function ExternalLinkIcon (line 16) | function ExternalLinkIcon(props: React.SVGProps<SVGSVGElement>) {
function Footer (line 66) | function Footer({
FILE: packages/docs/src/components/Logo.tsx
function LogoText (line 16) | function LogoText() {
function Logo (line 31) | function Logo({ xstyle }: { xstyle?: stylex.StyleXStyles }) {
FILE: packages/docs/src/components/LogoBold.tsx
function LogoBold (line 13) | function LogoBold({ xstyle }: { xstyle?: stylex.StyleXStyles }) {
FILE: packages/docs/src/components/Playground/Dialogs.tsx
function ConfirmDialog (line 12) | function ConfirmDialog({
FILE: packages/docs/src/components/Playground/DynamicPlayground.tsx
function ClientOnly (line 15) | function ClientOnly({
function Playground (line 41) | function Playground() {
function PlaygroundPlaceholder (line 54) | function PlaygroundPlaceholder() {
FILE: packages/docs/src/components/Playground/Menu.tsx
function Menu (line 12) | function Menu({
function Item (line 30) | function Item({
FILE: packages/docs/src/components/Playground/Tabs.tsx
function Tabs (line 16) | function Tabs({
function SparklesIcon (line 135) | function SparklesIcon() {
function NewFileIcon (line 155) | function NewFileIcon() {
function ShareButton (line 175) | function ShareButton() {
function ShareIcon (line 208) | function ShareIcon() {
function CheckIcon (line 227) | function CheckIcon() {
function Tab (line 244) | function Tab({
function NewFileButton (line 403) | function NewFileButton({
function ReactIcon (line 584) | function ReactIcon(props: SVGProps<SVGSVGElement>) {
function StyleXIcon (line 598) | function StyleXIcon(props: SVGProps<SVGSVGElement>) {
FILE: packages/docs/src/components/Playground/demoConstants.ts
constant INITIAL_INPUT_FILES (line 10) | const INITIAL_INPUT_FILES: Record<string, string> = {
constant INITIAL_BUNDLER_FILES (line 297) | const INITIAL_BUNDLER_FILES = {
constant CSS_PRELUDE (line 340) | const CSS_PRELUDE = `@layer resets {
FILE: packages/docs/src/components/Playground/index.tsx
constant LIGHT_EDITOR_THEME (line 52) | const LIGHT_EDITOR_THEME = 'stylex-light';
constant DARK_EDITOR_THEME (line 53) | const DARK_EDITOR_THEME = 'stylex-dark';
constant OUTPUT_TABS (line 54) | const OUTPUT_TABS = [
function transformSourceFiles (line 180) | function transformSourceFiles(sourceFiles: Record<string, string>) {
function PlaygroundNew (line 271) | function PlaygroundNew() {
function Panel (line 810) | function Panel({
function CollapsiblePanel (line 831) | function CollapsiblePanel({
FILE: packages/docs/src/components/StylexAnimatedLogo.tsx
constant ANIM_DURATION (line 15) | const ANIM_DURATION = '6s';
constant STAGGER (line 16) | const STAGGER = '-2.5s';
function StylexAnimatedLogo (line 121) | function StylexAnimatedLogo({
FILE: packages/docs/src/components/TypingWord.tsx
constant WORDS (line 14) | const WORDS = [
function TypingWord (line 22) | function TypingWord() {
constant TIME (line 93) | const TIME = 8;
FILE: packages/docs/src/components/ZStack.tsx
function ZStack (line 32) | function ZStack({
function ZStackItem (line 62) | function ZStackItem({
FILE: packages/docs/src/components/icons/Bluesky.tsx
function Bluesky (line 9) | function Bluesky({ xstyle }: { xstyle: stylex.StyleXStyles }) {
FILE: packages/docs/src/components/icons/MetaOpenSource.tsx
function MetaOpenSource (line 9) | function MetaOpenSource({
FILE: packages/docs/src/components/layout/docs.tsx
type DocsLayoutProps (line 22) | interface DocsLayoutProps extends BaseLayoutProps {
function DocsLayout (line 27) | function DocsLayout({ tree, children, ...props }: DocsLayoutProps) {
function Sidebar (line 84) | function Sidebar() {
function SidebarItem (line 194) | function SidebarItem({
function SidebarItemFolder (line 232) | function SidebarItemFolder({
FILE: packages/docs/src/components/layout/home/SidebarToggle.tsx
function SidebarToggle (line 15) | function SidebarToggle() {
FILE: packages/docs/src/components/layout/home/client.tsx
function Navbar (line 32) | function Navbar({
function NavbarLinkItem (line 158) | function NavbarLinkItem({
function MenuLinkItem (line 339) | function MenuLinkItem({
function MenuTrigger (line 449) | function MenuTrigger({
function MenuContent (line 468) | function MenuContent({
FILE: packages/docs/src/components/layout/home/index.tsx
type HomeLayoutProps (line 24) | interface HomeLayoutProps extends BaseLayoutProps {
function HomeLayout (line 36) | function HomeLayout({
function Header (line 65) | function Header({
function isSecondary (line 125) | function isSecondary(item: LinkItemType): boolean {
FILE: packages/docs/src/components/layout/page.tsx
type DocsPageProps (line 23) | interface DocsPageProps {
function DocsPage (line 29) | function DocsPage({ toc = [], ...props }: DocsPageProps) {
function DocsBody (line 106) | function DocsBody({ xstyle, ...props }: StyleXComponentProps<'div'>) {
function DocsDescription (line 116) | function DocsDescription({
function DocsTitle (line 137) | function DocsTitle({ xstyle, ...props }: StyleXComponentProps<'h1'>) {
function TocItem (line 154) | function TocItem({ item }: { item: TOCItemType }) {
function Footer (line 182) | function Footer() {
FILE: packages/docs/src/components/layout/shared/client.tsx
function BaseLinkItem (line 15) | function BaseLinkItem({
FILE: packages/docs/src/components/layout/shared/index.tsx
type StyleXAttributes (line 18) | type StyleXAttributes<T> = Omit<
type StyleXComponentProps (line 25) | type StyleXComponentProps<
type NavOptions (line 31) | interface NavOptions extends NavProviderProps {
type BaseLayoutProps (line 46) | interface BaseLayoutProps {
type BaseItem (line 70) | interface BaseItem {
type BaseLinkType (line 79) | interface BaseLinkType extends BaseItem {
type MainItemType (line 90) | interface MainItemType extends BaseLinkType {
type IconItemType (line 97) | interface IconItemType extends BaseLinkType {
type ButtonItemType (line 111) | interface ButtonItemType extends BaseLinkType {
type MenuItemType (line 121) | interface MenuItemType extends Partial<BaseLinkType> {
type CustomItemType (line 144) | interface CustomItemType extends BaseItem {
type LinkItemType (line 153) | type LinkItemType =
function getLinks (line 163) | function getLinks(
FILE: packages/docs/src/components/mdx/Callout.tsx
type CalloutType (line 13) | type CalloutType =
function resolveType (line 22) | function resolveType(
type CalloutProps (line 30) | interface CalloutProps extends CalloutContainerProps {
function Callout (line 34) | function Callout({ children, title, ...props }: CalloutProps) {
type CalloutContainerProps (line 43) | interface CalloutContainerProps
function CalloutContainer (line 60) | function CalloutContainer({
type CalloutTitleProps (line 97) | interface CalloutTitleProps
function CalloutTitle (line 102) | function CalloutTitle({ children, ...props }: CalloutTitleProps) {
type CalloutDescriptionProps (line 110) | interface CalloutDescriptionProps
function CalloutDescription (line 115) | function CalloutDescription({
FILE: packages/docs/src/components/mdx/Cards.tsx
type CardsProps (line 14) | interface CardsProps
function Cards (line 19) | function Cards({ children, ...props }: CardsProps) {
type CardProps (line 27) | interface CardProps
function Card (line 37) | function Card({
constant DURATION (line 80) | const DURATION = '0.2s';
constant EASING (line 81) | const EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
FILE: packages/docs/src/components/mdx/CodeBlock.tsx
function Pre (line 16) | function Pre(props: ComponentProps<'pre'>) {
type CodeBlockProps (line 27) | interface CodeBlockProps extends ComponentProps<'figure'> {
function CodeBlock (line 38) | function CodeBlock({
type CopyButtonProps (line 108) | interface CopyButtonProps {
function CopyButton (line 113) | function CopyButton({ containerRef, xstyle }: CopyButtonProps) {
constant DURATION (line 151) | const DURATION = '0.15s';
FILE: packages/docs/src/components/mdx/Details.tsx
function Accordions (line 18) | function Accordions({
function Details (line 38) | function Details({
function Accordion (line 63) | function Accordion({
function Summary (line 80) | function Summary({
constant DURATION (line 94) | const DURATION = '0.3s';
constant EASING (line 95) | const EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
FILE: packages/docs/src/components/mdx/Heading.tsx
type Types (line 13) | type Types = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type HeadingProps (line 14) | type HeadingProps<T extends Types> = Omit<
function Heading (line 22) | function Heading<T extends Types = 'h1'>({
constant TEXT_3XL (line 89) | const TEXT_3XL = '1.875rem';
FILE: packages/docs/src/components/mdx/Image.tsx
type ImageProps (line 10) | interface ImageProps
function Image (line 23) | function Image({
FILE: packages/docs/src/components/mdx/LLMFiles.tsx
function getFileContent (line 12) | function getFileContent(filename: string): string {
function LLMInstallationFile (line 17) | function LLMInstallationFile() {
function LLMStylingFile (line 28) | function LLMStylingFile() {
FILE: packages/docs/src/components/mdx/Link.tsx
function MDXLink (line 12) | function MDXLink({
FILE: packages/docs/src/components/mdx/PackageInstall.tsx
function DevInstallExample (line 42) | function DevInstallExample({ prod = [], dev = [] }) {
FILE: packages/docs/src/components/mdx/ScrollableCodeBlock.tsx
type ScrollableCodeBlockProps (line 14) | interface ScrollableCodeBlockProps {
function ScrollableCodeBlock (line 20) | function ScrollableCodeBlock({
constant DURATION (line 63) | const DURATION = '0.15s';
FILE: packages/docs/src/components/mdx/Table.tsx
type TableProps (line 10) | interface TableProps
function Table (line 13) | function Table(props: TableProps) {
FILE: packages/docs/src/components/mdx/Tabs.tsx
function Tabs (line 32) | function Tabs({
type TabItemProps (line 113) | type TabItemProps = {
function TabItem (line 118) | function TabItem({ label, children }: TabItemProps) {
FILE: packages/docs/src/components/mdx/VersionTag.tsx
function VersionTag (line 16) | function VersionTag() {
function IfBeta (line 20) | function IfBeta({ children }: { children: React.ReactNode }) {
function IfNotBeta (line 27) | function IfNotBeta({ children }: { children: React.ReactNode }) {
FILE: packages/docs/src/components/mdx/WhenDemo.tsx
function Card (line 12) | function Card() {
FILE: packages/docs/src/components/mdx/core.tsx
function P (line 11) | function P({
function Ul (line 22) | function Ul({
function Ol (line 36) | function Ol({
function Li (line 50) | function Li({
FILE: packages/docs/src/components/mdx/index.tsx
type StyleXHTMLProps (line 32) | type StyleXHTMLProps<T extends HTMLElement = HTMLElement> = Omit<
FILE: packages/docs/src/components/provider.tsx
function Provider (line 13) | function Provider({ children }: { children: ReactNode }) {
FILE: packages/docs/src/components/search-dialog.tsx
type SearchItem (line 38) | type SearchItem =
type DocSearchHit (line 55) | type DocSearchHit = {
function toRelativeUrl (line 82) | function toRelativeUrl(url: string): string {
function transformDocSearchResults (line 110) | function transformDocSearchResults(hits: DocSearchHit[]): SortedResult[] {
function searchAlgoliaDocSearch (line 195) | async function searchAlgoliaDocSearch(
type SearchDialogProps (line 221) | type SearchDialogProps = SharedProps & {
function SearchDialog (line 232) | function SearchDialog({
function renderHighlights (line 567) | function renderHighlights(highlights: HighlightedText<ReactNode>[]) {
FILE: packages/docs/src/components/search-toggle.tsx
function LargeSearchToggle (line 16) | function LargeSearchToggle({
FILE: packages/docs/src/components/sidebar.tsx
type SidebarProps (line 43) | interface SidebarProps {
type InternalContext (line 70) | interface InternalContext {
function Sidebar (line 114) | function Sidebar({
function SidebarContent (line 136) | function SidebarContent({
function SidebarContentMobile (line 244) | function SidebarContentMobile({
function SidebarHeader (line 312) | function SidebarHeader({
function SidebarFooter (line 332) | function SidebarFooter({
function SidebarViewport (line 354) | function SidebarViewport({
function SidebarSeparator (line 378) | function SidebarSeparator({
function SidebarItem (line 399) | function SidebarItem({
function SidebarFolder (line 429) | function SidebarFolder({
function SidebarFolderTrigger (line 452) | function SidebarFolderTrigger({
function SidebarFolderLink (line 495) | function SidebarFolderLink({
function SidebarFolderContent (line 555) | function SidebarFolderContent(
function SidebarTrigger (line 585) | function SidebarTrigger({
function SidebarCollapseTrigger (line 605) | function SidebarCollapseTrigger({
function useFolderContext (line 622) | function useFolderContext() {
function useInternalContext (line 629) | function useInternalContext() {
type SidebarComponents (line 636) | interface SidebarComponents {
function SidebarPageTree (line 645) | function SidebarPageTree(props: {
function PageTreeFolder (line 710) | function PageTreeFolder({
FILE: packages/docs/src/components/theme-toggle.tsx
type ThemeKey (line 16) | type ThemeKey = 'light' | 'dark' | 'system';
function ThemeToggle (line 24) | function ThemeToggle({
function SunIcon (line 82) | function SunIcon(props: SVGProps<SVGSVGElement>) {
function MoonIcon (line 107) | function MoonIcon(props: SVGProps<SVGSVGElement>) {
function SparklesIcon (line 124) | function SparklesIcon(props: SVGProps<SVGSVGElement>) {
FILE: packages/docs/src/components/ui/button.tsx
type ButtonProps (line 97) | type ButtonProps = {
FILE: packages/docs/src/contexts/SidebarContext.tsx
function SidebarProvider (line 18) | function SidebarProvider({ children }: { children: React.ReactNode }) {
FILE: packages/docs/src/hooks/useStateWithCallback.tsx
function useStateWithCallback (line 15) | function useStateWithCallback<T>(
FILE: packages/docs/src/pages/(home)/_layout.tsx
function Layout (line 11) | function Layout({ children }: { children: ReactNode }) {
FILE: packages/docs/src/pages/(home)/index.tsx
function Home (line 15) | function Home() {
constant TABLET_BREAK (line 53) | const TABLET_BREAK = '@media (max-width: 768px)';
constant CTA_BREAK (line 54) | const CTA_BREAK = '@media (max-width: 460px)';
FILE: packages/docs/src/pages/(playground)/_layout.tsx
function Layout (line 12) | function Layout({ children }: { children: ReactNode }) {
FILE: packages/docs/src/pages/(playground)/playground.tsx
function PlaygroundPage (line 13) | function PlaygroundPage() {
FILE: packages/docs/src/pages/_layout.tsx
constant DEFAULT_TITLE (line 15) | const DEFAULT_TITLE = 'StyleX — The styling system for ambitious interfa...
constant DEFAULT_DESCRIPTION (line 16) | const DEFAULT_DESCRIPTION = 'The styling system that powers Meta.';
function RootLayout (line 18) | function RootLayout({ children }: { children: ReactNode }) {
FILE: packages/docs/src/pages/api/blog-atom.xml.ts
function GET (line 9) | async function GET() {
FILE: packages/docs/src/pages/api/blog-rss.xml.ts
function GET (line 9) | async function GET() {
FILE: packages/docs/src/pages/api/llms-full.txt.ts
function GET (line 10) | async function GET() {
FILE: packages/docs/src/pages/blog/[...slugs].tsx
function BlogPage (line 24) | function BlogPage({ slugs }: PageProps<'/blog/[...slugs]'>) {
function getConfig (line 85) | async function getConfig() {
constant AUTHORS (line 140) | const AUTHORS = {
FILE: packages/docs/src/pages/blog/_layout.tsx
function Layout (line 12) | function Layout({ children }: { children: ReactNode }) {
FILE: packages/docs/src/pages/blog/index.tsx
function BlogPage (line 11) | function BlogPage() {
FILE: packages/docs/src/pages/docs/[...slugs].tsx
function DocPage (line 19) | function DocPage({ slugs }: PageProps<'/docs/[...slugs]'>) {
function getConfig (line 56) | async function getConfig() {
FILE: packages/docs/src/pages/docs/_layout.tsx
function Layout (line 12) | function Layout({ children }: { children: ReactNode }) {
FILE: packages/docs/src/theming/vars.stylex.ts
constant ANIMATION_DURATIONS (line 189) | const ANIMATION_DURATIONS = stylex.defineConsts({
constant EASINGS (line 193) | const EASINGS = stylex.defineConsts({
FILE: packages/docs/src/waku.server.ts
function getCustomHandler (line 31) | async function getCustomHandler(
FILE: packages/old-docs/components/AnimatedGradientBox/AnimatedGradientBox.js
function AnimatedGradientBox (line 13) | function AnimatedGradientBox() {
constant COLOR_1 (line 24) | const COLOR_1 = '#ffadad';
constant COLOR_2 (line 25) | const COLOR_2 = '#ffd6a5';
constant COLOR_3 (line 26) | const COLOR_3 = '#fdffb6';
constant COLOR_4 (line 27) | const COLOR_4 = '#caffbf';
constant COLOR_5 (line 28) | const COLOR_5 = '#9bf6ff';
constant COLOR_6 (line 29) | const COLOR_6 = '#a0c4ff';
constant COLOR_7 (line 30) | const COLOR_7 = '#bdb2ff';
constant COLOR_8 (line 31) | const COLOR_8 = '#ffc6ff';
FILE: packages/old-docs/components/CtaButton.js
function CtaButton (line 12) | function CtaButton({ children, color, to }) {
FILE: packages/old-docs/components/LoadingSpinner.js
function LoadingSpinner (line 38) | function LoadingSpinner() {
FILE: packages/old-docs/components/Logo.js
function LogoText (line 15) | function LogoText() {
function Logo (line 23) | function Logo({ xstyle }) {
FILE: packages/old-docs/components/LogoBold.js
function LogoBold (line 13) | function LogoBold({ xstyle }) {
FILE: packages/old-docs/components/LogoDownloadModal.js
function LogoDownloadModal (line 93) | function LogoDownloadModal({ isOpen, onClose }) {
FILE: packages/old-docs/components/Playground.js
function wcSpawn (line 34) | async function wcSpawn(instance, ...args) {
function makeWebcontainer (line 58) | async function makeWebcontainer() {
function Playground (line 78) | function Playground() {
constant MOBILE (line 297) | const MOBILE = '@media (max-width: 768px)';
FILE: packages/old-docs/components/StylexAnimatedLogo.js
constant ANIM_DURATION (line 14) | const ANIM_DURATION = '6s';
constant STAGGER (line 15) | const STAGGER = '-2.5s';
function StylexAnimatedLogo (line 121) | function StylexAnimatedLogo({ style }) {
FILE: packages/old-docs/components/VersionTag.js
function VersionTag (line 16) | function VersionTag() {
function IfBeta (line 20) | function IfBeta({ children }) {
function IfNotBeta (line 27) | function IfNotBeta({ children }) {
FILE: packages/old-docs/components/YouTube.js
function YouTube (line 29) | function YouTube({ width: _w, height: _h, src, title }) {
FILE: packages/old-docs/components/ZStack.js
function ZStack (line 31) | function ZStack({ children, xstyle }) {
function ZStackItem (line 54) | function ZStackItem({ children, style }) {
FILE: packages/old-docs/components/examples/dev-install.js
function DevInstallExample (line 43) | function DevInstallExample({ prod = [], dev = [] }) {
FILE: packages/old-docs/components/hooks/useDebounced.js
function useDebounced (line 12) | function useDebounced(fn, delay) {
FILE: packages/old-docs/components/hooks/useId.js
function useId (line 14) | function useId() {
FILE: packages/old-docs/components/hooks/useViewTransition.js
function useViewTransition (line 12) | function useViewTransition() {
FILE: packages/old-docs/docusaurus.config.js
method configureWebpack (line 67) | configureWebpack() {
method configureWebpack (line 270) | configureWebpack(_config) {
FILE: packages/old-docs/eslintrc-legacy.js
constant OFF (line 10) | const OFF = 0;
constant WARNING (line 11) | const WARNING = 1;
constant ERROR (line 12) | const ERROR = 2;
FILE: packages/old-docs/src/pages/index.js
function Home (line 15) | function Home() {
constant CTA_BREAK (line 60) | const CTA_BREAK = '@media (max-width: 385px)';
FILE: packages/old-docs/src/pages/playground.js
function PlaygroundNewPage (line 14) | function PlaygroundNewPage() {
FILE: packages/old-docs/src/theme/Footer/index.js
function FooterWrapper (line 12) | function FooterWrapper(props) {
FILE: packages/old-docs/src/theme/Logo/index.js
function LogoWrapper (line 12) | function LogoWrapper(props) {
FILE: packages/old-docs/src/theme/MDXComponents/Details.js
function MDXDetails (line 13) | function MDXDetails({
constant RETINA (line 53) | const RETINA =
FILE: packages/scripts/flow-translator/flow-module-utils.js
function findFlowModules (line 11) | async function findFlowModules(inputDir, rootDir) {
function patchFlowModulePaths (line 27) | function patchFlowModulePaths(filePath, fileContents, flowModulePaths) {
function folderExists (line 44) | async function folderExists(path) {
function isSubfolder (line 56) | function isSubfolder(subfolderPath, parentFolderPath) {
function readDir (line 61) | async function readDir(targetPath) {
FILE: packages/scripts/flow-translator/generate-types.js
function generateTypes (line 16) | async function generateTypes(inputDir, outputDir, rootDir) {
function preprocessFileContents (line 117) | function preprocessFileContents(inputCode) {
function postProcessTSOutput (line 131) | function postProcessTSOutput(outputCode) {
FILE: packages/scripts/flow-translator/rewrite-imports.js
function rewriteImportsInFolder (line 33) | async function rewriteImportsInFolder(
FILE: packages/shared-ui/src/index.tsx
function Button (line 10) | function Button({
FILE: packages/style-value-parser/src/at-queries/media-query-transform.js
function lastMediaQueryWinsTransform (line 14) | function lastMediaQueryWinsTransform(styles: Object): Object {
function combineMediaQueryWithNegations (line 18) | function combineMediaQueryWithNegations(
function dfsProcessQueries (line 52) | function dfsProcessQueries(
FILE: packages/style-value-parser/src/at-queries/media-query.js
function adjustDimension (line 47) | function adjustDimension(
function isNumericLength (line 345) | function isNumericLength(val: mixed): boolean {
function mergeIntervalsForAnd (line 356) | function mergeIntervalsForAnd(
class MediaQuery (line 511) | class MediaQuery {
method constructor (line 513) | constructor(queries: MediaQueryRule) {
method toString (line 516) | toString(): string {
method #toString (line 519) | #toString(queries: MediaQueryRule, isTopLevel: boolean = false): string {
method normalize (line 592) | static normalize(rule: MediaQueryRule): MediaQueryRule {
function validateMediaQuery (line 719) | function validateMediaQuery(input: string): MediaQuery {
FILE: packages/style-value-parser/src/base-types.js
class SubString (line 10) | class SubString {
method constructor (line 15) | constructor(str: string) {
method startsWith (line 21) | startsWith(str: string): boolean {
method first (line 34) | get first(): string {
method get (line 38) | get(relativeIndex: number): string {
method toString (line 42) | toString(): string {
method isEmpty (line 46) | get isEmpty(): boolean {
FILE: packages/style-value-parser/src/css-types/alpha-value.js
class AlphaValue (line 12) | class AlphaValue {
method constructor (line 14) | constructor(value: number) {
method toString (line 17) | toString(): string {
FILE: packages/style-value-parser/src/css-types/angle.js
class Angle (line 14) | class Angle {
method constructor (line 17) | constructor(value: number, unit: this['unit']) {
method toString (line 21) | toString(): string {
method parser (line 24) | static get parser(): TokenParser<Angle> {
FILE: packages/style-value-parser/src/css-types/basic-shape.js
class BasicShape (line 16) | class BasicShape {
method toString (line 17) | toString(): string {
FILE: packages/style-value-parser/src/css-types/calc.js
class Calc (line 176) | class Calc {
method constructor (line 178) | constructor(value: this['value']) {
method toString (line 181) | toString(): string {
method parser (line 184) | static get parser(): TokenParser<Calc> {
method if (line 199) | if (typeof value === 'number') {
FILE: packages/style-value-parser/src/css-types/color.js
class Color (line 17) | class Color {
method parser (line 18) | static get parser(): TokenParser<Color> {
class NamedColor (line 33) | class NamedColor extends Color {
method constructor (line 35) | constructor(value: string) {
method toString (line 39) | toString(): string {
class HashColor (line 201) | class HashColor extends Color {
method constructor (line 203) | constructor(value: string) {
method toString (line 207) | toString(): string {
method r (line 211) | get r(): number {
method g (line 215) | get g(): number {
method b (line 219) | get b(): number {
method a (line 223) | get a(): number {
method parser (line 229) | static get parser(): TokenParser<HashColor> {
class Rgb (line 249) | class Rgb extends Color {
method constructor (line 253) | constructor(r: number, g: number, b: number) {
method toString (line 259) | toString(): string {
method parser (line 262) | static get parser(): TokenParser<Rgb> {
class Rgba (line 301) | class Rgba extends Color {
method constructor (line 306) | constructor(r: number, g: number, b: number, a: number) {
method toString (line 313) | toString(): string {
method parser (line 316) | static get parser(): TokenParser<Rgba> {
class Hsl (line 370) | class Hsl extends Color {
method constructor (line 374) | constructor(h: Angle, s: Percentage, l: Percentage) {
method toString (line 380) | toString(): string {
method parser (line 383) | static get parser(): TokenParser<Hsl> {
class Hsla (line 415) | class Hsla extends Color {
method constructor (line 420) | constructor(h: Angle, s: Percentage, l: Percentage, a: number) {
method toString (line 427) | toString(): string {
method parser (line 430) | static get parser(): TokenParser<Hsla> {
FILE: packages/style-value-parser/src/css-types/common-types.js
class CssVariable (line 57) | class CssVariable {
method constructor (line 59) | constructor(name: string) {
method toString (line 62) | toString(): string {
class Percentage (line 78) | class Percentage {
method constructor (line 80) | constructor(value: number) {
method toString (line 83) | toString(): string {
method parser (line 86) | static get parser(): TokenParser<Percentage> {
FILE: packages/style-value-parser/src/css-types/custom-ident.js
class CustomIdentifier (line 12) | class CustomIdentifier {
method constructor (line 14) | constructor(value: string) {
method toString (line 17) | toString(): string {
method parser (line 21) | static get parser(): TokenParser<CustomIdentifier> {
FILE: packages/style-value-parser/src/css-types/dashed-ident.js
class DashedIdentifier (line 12) | class DashedIdentifier {
method constructor (line 15) | constructor(value: string) {
method toString (line 19) | toString(): string {
method parser (line 23) | static get parser(): TokenParser<DashedIdentifier> {
FILE: packages/style-value-parser/src/css-types/easing-function.js
class EasingFunction (line 12) | class EasingFunction {
method parser (line 13) | static get parser(): TokenParser<EasingFunction> {
class CubicBezierKeyword (line 84) | class CubicBezierKeyword extends EasingFunction {
method constructor (line 86) | constructor(keyword: TCubicBezierKeyword) {
method toString (line 90) | toString(): string {
method parser (line 93) | static get parser(): TokenParser<CubicBezierKeyword> {
class StepsEasingFunction (line 111) | class StepsEasingFunction extends EasingFunction {
method constructor (line 114) | constructor(steps: number, start: 'start' | 'end') {
method toString (line 119) | toString(): string {
method parser (line 122) | static get parser(): TokenParser<StepsEasingFunction> {
class StepsKeyword (line 151) | class StepsKeyword extends EasingFunction {
method constructor (line 153) | constructor(keyword: 'step-start' | 'step-end') {
method toString (line 157) | toString(): string {
method parser (line 160) | static get parser(): TokenParser<StepsKeyword> {
FILE: packages/style-value-parser/src/css-types/filter-function.js
class FilterFunction (line 16) | class FilterFunction {
method toString (line 17) | toString(): string {
method parser (line 20) | static get parser(): TokenParser<FilterFunction> {
class BlurFilterFunction (line 36) | class BlurFilterFunction extends FilterFunction {
method constructor (line 38) | constructor(radius: Length) {
method toString (line 42) | toString(): string {
method parser (line 45) | static get parser(): TokenParser<BlurFilterFunction> {
class BrightnessFilterFunction (line 54) | class BrightnessFilterFunction extends FilterFunction {
method constructor (line 56) | constructor(percentage: number) {
method toString (line 60) | toString(): string {
method parser (line 63) | static get parser(): TokenParser<BrightnessFilterFunction> {
class ContrastFilterFunction (line 74) | class ContrastFilterFunction extends FilterFunction {
method constructor (line 76) | constructor(amount: number) {
method toString (line 80) | toString(): string {
method parser (line 83) | static get parser(): TokenParser<ContrastFilterFunction> {
class GrayscaleFilterFunction (line 141) | class GrayscaleFilterFunction extends FilterFunction {
method constructor (line 143) | constructor(amount: number) {
method toString (line 147) | toString(): string {
method parser (line 150) | static get parser(): TokenParser<GrayscaleFilterFunction> {
class HueRotateFilterFunction (line 161) | class HueRotateFilterFunction extends FilterFunction {
method constructor (line 163) | constructor(angle: Angle) {
method toString (line 167) | toString(): string {
method parser (line 170) | static get parser(): TokenParser<HueRotateFilterFunction> {
class InverFilterFunction (line 179) | class InverFilterFunction extends FilterFunction {
method constructor (line 181) | constructor(amount: number) {
method toString (line 185) | toString(): string {
method parser (line 188) | static get parser(): TokenParser<InverFilterFunction> {
class OpacityFilterFunction (line 199) | class OpacityFilterFunction extends FilterFunction {
method constructor (line 201) | constructor(amount: number) {
method toString (line 205) | toString(): string {
method parser (line 208) | static get parser(): TokenParser<OpacityFilterFunction> {
class SaturateFilterFunction (line 219) | class SaturateFilterFunction extends FilterFunction {
method constructor (line 221) | constructor(amount: number) {
method toString (line 225) | toString(): string {
method parser (line 228) | static get parser(): TokenParser<SaturateFilterFunction> {
class SepiaFilterFunction (line 239) | class SepiaFilterFunction extends FilterFunction {
method constructor (line 241) | constructor(amount: number) {
method toString (line 245) | toString(): string {
method parser (line 248) | static get parser(): TokenParser<SepiaFilterFunction> {
FILE: packages/style-value-parser/src/css-types/flex.js
class Flex (line 13) | class Flex {
method constructor (line 15) | constructor(fraction: number) {
method toString (line 18) | toString(): string {
method parser (line 21) | static get parser(): TokenParser<Flex> {
FILE: packages/style-value-parser/src/css-types/frequency.js
class Frequency (line 12) | class Frequency {
method constructor (line 15) | constructor(value: number, unit: 'Hz' | 'KHz') {
method toString (line 19) | toString(): string {
method parser (line 27) | static get parser(): TokenParser<Frequency> {
FILE: packages/style-value-parser/src/css-types/length.js
constant UNITS_BASED_ON_FONT (line 12) | const UNITS_BASED_ON_FONT = ['ch', 'em', 'ex', 'ic', 'lh', 'rem', 'rlh'];
constant UNITS_BASED_ON_VIEWPORT (line 14) | const UNITS_BASED_ON_VIEWPORT = [
constant UNITS_BASED_ON_CONTAINER (line 33) | const UNITS_BASED_ON_CONTAINER = [
constant UNITS_BASED_ON_ABSOLUTE_UNITS (line 42) | const UNITS_BASED_ON_ABSOLUTE_UNITS = [
class Length (line 50) | class Length {
method constructor (line 54) | constructor(value: number, unit: string) {
method toString (line 59) | toString(): string {
method parser (line 70) | static get parser(): TokenParser<Length> {
FILE: packages/style-value-parser/src/css-types/resolution.js
class Resolution (line 16) | class Resolution {
method constructor (line 19) | constructor(value: number, unit: Unit) {
method toString (line 23) | toString(): string {
method parser (line 27) | static get parser(): TokenParser<Resolution> {
FILE: packages/style-value-parser/src/css-types/time.js
class Time (line 12) | class Time {
method constructor (line 15) | constructor(value: number, unit: 's' | 'ms') {
method toString (line 19) | toString(): string {
method parser (line 27) | static get parser(): TokenParser<Time> {
FILE: packages/style-value-parser/src/css-types/transform-function.js
class TransformFunction (line 18) | class TransformFunction {
method parser (line 19) | static get parser(): TokenParser<TransformFunction> {
class Matrix (line 40) | class Matrix extends TransformFunction {
method constructor (line 47) | constructor(
method toString (line 63) | toString(): string {
method parser (line 66) | static get parser(): TokenParser<Matrix> {
class Perspective (line 138) | class Perspective extends TransformFunction {
method constructor (line 140) | constructor(length: Length) {
method toString (line 144) | toString(): string {
method parser (line 148) | static get parser(): TokenParser<Perspective> {
class Rotate (line 161) | class Rotate extends TransformFunction {
method constructor (line 163) | constructor(angle: Angle) {
method toString (line 167) | toString(): string {
method parser (line 170) | static get parser(): TokenParser<Rotate> {
class RotateXYZ (line 183) | class RotateXYZ extends TransformFunction {
method constructor (line 186) | constructor(x: this['x'], axis: this['axis']) {
method toString (line 191) | toString(): string {
method parser (line 194) | static get parser(): TokenParser<RotateXYZ> {
class Rotate3d (line 209) | class Rotate3d extends TransformFunction {
method constructor (line 214) | constructor(x: number, y: number, z: number, angle: Angle) {
method toString (line 221) | toString(): string {
method parser (line 236) | static get parser(): TokenParser<Rotate3d> {
FILE: packages/style-value-parser/src/properties/box-shadow.js
class BoxShadow (line 14) | class BoxShadow {
method constructor (line 22) | constructor(
method parse (line 38) | static get parse(): TokenParser<BoxShadow> {
FILE: packages/style-value-parser/src/token-types.js
class TokenList (line 18) | class TokenList {
method constructor (line 24) | constructor(input: TokenIterator | string) {
method consumeNextToken (line 33) | consumeNextToken(): CSSToken | null {
method peek (line 57) | peek(): CSSToken | null {
method first (line 71) | get first(): CSSToken | null {
method setCurrentIndex (line 75) | setCurrentIndex(newIndex: number): void {
method rewind (line 102) | rewind(positions: number = 1): void {
method isEmpty (line 106) | get isEmpty(): boolean {
method getAllTokens (line 114) | getAllTokens(): $ReadOnlyArray<CSSToken> {
method slice (line 122) | slice(start: number, end: number = this.currentIndex): Array<CSSToken> {
FILE: packages/typescript-tests/src/env.ts
type Register (line 12) | interface Register {
FILE: packages/typescript-tests/src/test1.tsx
type Props (line 16) | type Props = {
function Component (line 20) | function Component({ xstyle }: Props) {
function OtherComponent (line 30) | function OtherComponent() {
function OtherComponent2 (line 34) | function OtherComponent2() {
FILE: packages/typescript-tests/src/test2.tsx
type Props (line 16) | type Props = {
function Component (line 22) | function Component({ xstyle }: Props) {
function OtherComponent (line 35) | function OtherComponent() {
FILE: packages/typescript-tests/src/test3.tsx
type Props (line 16) | type Props = {
function Component (line 21) | function Component({ xstyle, staticXstyle }: Props): null {
function OtherComponent (line 35) | function OtherComponent() {
FILE: packages/typescript-tests/src/test4.tsx
type Props (line 16) | type Props = {
function Component (line 22) | function Component({ xstyle }: Props) {
function OtherComponent (line 35) | function OtherComponent() {
FILE: packages/typescript-tests/src/theming1.tsx
constant DARK (line 21) | const DARK = '@media (prefers-color-scheme: dark)' as const;
type TokensType (line 47) | type TokensType = TokensFromVarGroup<typeof buttonTokens>;
FILE: packages/typescript-tests/src/typetests.ts
type NotUndefined (line 25) | type NotUndefined = {} | null;
Copy disabled (too large)
Download .json
Condensed preview — 985 files, each showing path, character count, and a content snippet. Download the .json file for the full structured content (13,534K chars).
[
{
"path": ".eslintrc.js",
"chars": 5495,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": ".flowconfig",
"chars": 825,
"preview": "[ignore]\n.*/build/.*\n.*/dist/.*\n.*/example-*/.*\n.*/lib/.*\n.*/malformed_package_json/.*\n\n[include]\n\n[lints]\n\n[options]\nex"
},
{
"path": ".github/CODEOWNERS",
"chars": 56,
"preview": "* @ezzak @Jta26 @mellyeliu @necolas @nmn @vincentriemer\n"
},
{
"path": ".github/CODE_OF_CONDUCT.md",
"chars": 3541,
"preview": "# Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 2767,
"preview": "# Contributing\n\n## Reporting Issues and Asking Questions\n\nBefore opening an issue, please search the issue tracker to ma"
},
{
"path": ".github/ISSUE_TEMPLATE/bug.yml",
"chars": 1145,
"preview": "name: Bug report\ndescription: File a bug report\nlabels: [\"bug\"]\nbody:\n - type: textarea\n attributes:\n label: De"
},
{
"path": ".github/ISSUE_TEMPLATE/feature.yml",
"chars": 323,
"preview": "name: Feature request\ndescription: If you have a suggestion…\nlabels: [\"enhancement\"]\nbody:\n - type: textarea\n attrib"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 454,
"preview": "## What changed / motivation ?\n\nPlease include relevant motivation and context\n\n## Linked PR/Issues\n\nFixes # (issue)\n\n##"
},
{
"path": ".github/workflows/benchmarks.yml",
"chars": 4192,
"preview": "name: benchmarks\n\non: [pull_request]\n\njobs:\n perf:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v"
},
{
"path": ".github/workflows/tests.yml",
"chars": 1736,
"preview": "name: tests\n\non:\n push:\n branches:\n - 'main'\n pull_request:\n types: [opened, synchronize, reopened]\n\njobs:\n"
},
{
"path": ".github/workflows/typos.toml",
"chars": 286,
"preview": "[files]\nextend-exclude = [\n \"*.snap\",\n \"flow-typed/*\",\n # Too many false positives on inline snapshots\n \"packages/**"
},
{
"path": ".gitignore",
"chars": 97,
"preview": "*.log*\n.DS_Store\n.build\n.docusaurus\n.stylex\nbuild\ncoverage\ndist\nlib\nnode_modules\nstorybook-static"
},
{
"path": ".prettierignore",
"chars": 252,
"preview": ".build\n.docusaurus\n.next\n.stylex\nbuild\ncoverage\nlib\nflow_modules\nnode_modules\n**/__mocks__/snapshot*\npackages/benchmarks"
},
{
"path": ".vscode/extensions.json",
"chars": 69,
"preview": "{\n \"recommendations\": [\n \"flowtype.flow-for-vscode\"\n ]\n}"
},
{
"path": ".vscode/settings.json",
"chars": 43,
"preview": "{\n \"javascript.validate.enable\": false\n}"
},
{
"path": ".watchmanconfig",
"chars": 3,
"preview": "{}\n"
},
{
"path": "CHANGELOG.md",
"chars": 7945,
"preview": "# Changelog\n\n## 0.18.1 (Mar 5, 2026)\n- Add simple `sx={}` JSX prop syntax as an alternative to `stylex.props`.\n- Fix `un"
},
{
"path": "LICENSE",
"chars": 1088,
"preview": "MIT License\n\nCopyright (c) Meta Platforms, Inc. and affiliates.\n\nPermission is hereby granted, free of charge, to any pe"
},
{
"path": "README.md",
"chars": 3907,
"preview": "# StyleX · [](https://github.com/facebook/sty"
},
{
"path": "examples/example-bun/.eslintrc.js",
"chars": 427,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-bun/README.md",
"chars": 1952,
"preview": "# StyleX with Bun\n\nThis example bundles a React app with Bun while compiling StyleX via\n`@stylexjs/unplugin`. The unplug"
},
{
"path": "examples/example-bun/bunfig.toml",
"chars": 52,
"preview": "[serve.static]\nplugins = [\"@stylexjs/unplugin/bun\"]\n"
},
{
"path": "examples/example-bun/package.json",
"chars": 635,
"preview": "{\n \"private\": true,\n \"name\": \"example-bun\",\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Bun via @sty"
},
{
"path": "examples/example-bun/scripts/build.mjs",
"chars": 1459,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-bun/scripts/dev.mjs",
"chars": 1050,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-bun/scripts/start.mjs",
"chars": 917,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-bun/src/App.jsx",
"chars": 966,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-bun/src/global.css",
"chars": 35,
"preview": ":root {\n --stylex-injection: 0;\n}\n"
},
{
"path": "examples/example-bun/src/globalTokens.stylex.js",
"chars": 602,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-bun/src/index.dev.html",
"chars": 456,
"preview": "<!doctype html>\n<html>\n <head>\n <title>@stylexjs/unplugin (bun dev)</title>\n <meta charset=\"utf-8\" />\n <style>"
},
{
"path": "examples/example-bun/src/index.html",
"chars": 426,
"preview": "<!doctype html>\n<html>\n <head>\n <title>@stylexjs/unplugin (bun)</title>\n <meta charset=\"utf-8\" />\n <style>\n "
},
{
"path": "examples/example-bun/src/main.jsx",
"chars": 380,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/.gitignore",
"chars": 109,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# stylex compiled\nsrc\n"
},
{
"path": "examples/example-cli/.stylex.json5",
"chars": 303,
"preview": "{\n input: ['./source'],\n output: ['./src'],\n cssBundleName: 'stylex_bundle.css',\n babelPresets: [\n ['@babel/prese"
},
{
"path": "examples/example-cli/README.md",
"chars": 42,
"preview": "# @stylexjs/cli example using StyleX\n\nTBD\n"
},
{
"path": "examples/example-cli/package.json",
"chars": 452,
"preview": "{\n \"private\": true,\n \"name\": \"example-cli\",\n \"version\": \"0.18.1\",\n \"scripts\": {\n \"example:build\": \"stylex --confi"
},
{
"path": "examples/example-cli/source/app/CardThemes.ts",
"chars": 547,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/source/app/CardTokens.stylex.ts",
"chars": 332,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/source/app/Counter.tsx",
"chars": 2194,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/source/app/globalTokens.stylex.ts",
"chars": 12991,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/source/app/globals.css",
"chars": 278,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/source/app/layout.tsx",
"chars": 1156,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/source/app/page.tsx",
"chars": 5074,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/source/components/Card.tsx",
"chars": 2606,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-cli/tsconfig.json",
"chars": 459,
"preview": "{\n \"compilerOptions\": {\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n "
},
{
"path": "examples/example-esbuild/.eslintrc.js",
"chars": 427,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-esbuild/README.md",
"chars": 1507,
"preview": "# StyleX with esbuild\n\nThis example bundles a React app with esbuild while compiling StyleX via\n`@stylexjs/unplugin`. Th"
},
{
"path": "examples/example-esbuild/package.json",
"chars": 564,
"preview": "{\n \"private\": true,\n \"name\": \"example-esbuild\",\n \"version\": \"0.18.1\",\n \"description\": \"Simple esbuild example for @s"
},
{
"path": "examples/example-esbuild/public/index.html",
"chars": 444,
"preview": "<!doctype html>\n<html>\n <head>\n <title>@stylexjs/unplugin (esbuild)</title>\n <meta charset=\"utf-8\" />\n <style>"
},
{
"path": "examples/example-esbuild/scripts/build.mjs",
"chars": 1145,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-esbuild/src/App.jsx",
"chars": 1118,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-esbuild/src/global.css",
"chars": 32,
"preview": ":root { --stylex-injection: 0; }"
},
{
"path": "examples/example-esbuild/src/globalTokens.stylex.js",
"chars": 611,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/.eslintrc.js",
"chars": 517,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/.gitignore",
"chars": 391,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "examples/example-nextjs/README.md",
"chars": 3283,
"preview": "# Next.js example using StyleX\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](h"
},
{
"path": "examples/example-nextjs/app/InteractiveCard.tsx",
"chars": 6215,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/app/app.css",
"chars": 524,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/app/darkMode.stylex.ts",
"chars": 2074,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/app/globalTokens.stylex.ts",
"chars": 13584,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/app/layout.tsx",
"chars": 918,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/app/page.tsx",
"chars": 4198,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/babel.config.js",
"chars": 816,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/components/Card.tsx",
"chars": 2824,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/components/CardTokens.stylex.ts",
"chars": 352,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/next.config.js",
"chars": 292,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/package.json",
"chars": 871,
"preview": "{\n \"private\": true,\n \"name\": \"example-nextjs\",\n \"version\": \"0.18.1\",\n \"scripts\": {\n \"clean\": \"shx rm -rf .next\",\n"
},
{
"path": "examples/example-nextjs/postcss.config.js",
"chars": 622,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-nextjs/tsconfig.json",
"chars": 695,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n "
},
{
"path": "examples/example-react-router/.gitignore",
"chars": 33,
"preview": ".DS_Store\nnode_modules\n.env\ndist\n"
},
{
"path": "examples/example-react-router/README.md",
"chars": 3180,
"preview": "# React Router + RSC + StyleX\n\n⚠️ **EXPERIMENTAL**: This template demonstrates React Server Components with\nReact Router"
},
{
"path": "examples/example-react-router/package.json",
"chars": 995,
"preview": "{\n \"name\": \"example-react-router\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"example:build\": \"shx rm -"
},
{
"path": "examples/example-react-router/server.js",
"chars": 910,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/components/MainArticle.tsx",
"chars": 872,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/entry.browser.tsx",
"chars": 1847,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/entry.rsc.tsx",
"chars": 1414,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/entry.ssr.tsx",
"chars": 1409,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/routes/about/route.tsx",
"chars": 419,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/routes/config.ts",
"chars": 685,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/routes/home/route.tsx",
"chars": 617,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/routes/root/DevStyleXInject.tsx",
"chars": 429,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/routes/root/client.tsx",
"chars": 4592,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/routes/root/route.tsx",
"chars": 609,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-react-router/src/stylex.css",
"chars": 320,
"preview": "@layer reset {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n :root {\n color-scheme: light d"
},
{
"path": "examples/example-react-router/tsconfig.json",
"chars": 441,
"preview": "{\n \"compilerOptions\": {\n \"allowImportingTsExtensions\": true,\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"no"
},
{
"path": "examples/example-react-router/vite.config.ts",
"chars": 694,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/.gitignore",
"chars": 733,
"preview": "# Node modules\nnode_modules\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\npnpm-debug.log*\n\n# Environment variables\n.env\n.dev.vars\n\n#"
},
{
"path": "examples/example-redwoodsdk/README.md",
"chars": 2342,
"preview": "# RedwoodSDK + StyleX\n\nThis starter shows how RedwoodSDK’s Vite-based toolchain works with\n`@stylexjs/unplugin`. StyleX "
},
{
"path": "examples/example-redwoodsdk/package.json",
"chars": 1526,
"preview": "{\n \"name\": \"@redwoodjs/starter\",\n \"version\": \"0.18.1\",\n \"description\": \"A bare-bones RedwoodSDK starter\",\n \"main\": \""
},
{
"path": "examples/example-redwoodsdk/src/app/DevStyleXInject.tsx",
"chars": 410,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/app/Document.tsx",
"chars": 1498,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/app/components/Copy.tsx",
"chars": 1030,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/app/headers.ts",
"chars": 1532,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/app/pages/Counter.tsx",
"chars": 1205,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/app/pages/Home.tsx",
"chars": 340,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/app/pages/Welcome.tsx",
"chars": 5039,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/app/root.css",
"chars": 32,
"preview": ":root { --stylex-injection: 0; }"
},
{
"path": "examples/example-redwoodsdk/src/app/shared/links.ts",
"chars": 276,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/client.tsx",
"chars": 332,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/src/worker.tsx",
"chars": 691,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/tsconfig.json",
"chars": 1710,
"preview": "{\n \"compilerOptions\": {\n /* Visit https://aka.ms/tsconfig.json to read more about this file */\n\n /* Set the JavaS"
},
{
"path": "examples/example-redwoodsdk/types/css.d.ts",
"chars": 388,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/types/rw.d.ts",
"chars": 367,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/types/vite.d.ts",
"chars": 267,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-redwoodsdk/vite.config.mts",
"chars": 586,
"preview": "import { defineConfig } from 'vite';\nimport { redwood } from 'rwsdk/vite';\nimport { cloudflare } from '@cloudflare/vite-"
},
{
"path": "examples/example-redwoodsdk/worker-configuration.d.ts",
"chars": 332,
"preview": "/* eslint-disable */\n// Generated by Wrangler by running `wrangler types --include-runtime false` (hash: 6b6db21c80ba9cf"
},
{
"path": "examples/example-redwoodsdk/wrangler.jsonc",
"chars": 568,
"preview": "{\n // Schema reference for wrangler configuration\n \"$schema\": \"node_modules/wrangler/config-schema.json\",\n\n // Name o"
},
{
"path": "examples/example-rollup/README.md",
"chars": 35,
"preview": "# Rollup example using StyleX\n\nTBD\n"
},
{
"path": "examples/example-rollup/babel.config.mjs",
"chars": 437,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-rollup/index.html",
"chars": 283,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "examples/example-rollup/package.json",
"chars": 900,
"preview": "{\n \"private\": true,\n \"name\": \"example-rollup\",\n \"version\": \"0.18.1\",\n \"description\": \"A simple rollup example to tes"
},
{
"path": "examples/example-rollup/rollup.config.mjs",
"chars": 1067,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-rollup/src/App.js",
"chars": 824,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-rollup/src/index.js",
"chars": 426,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-rspack/README.md",
"chars": 1711,
"preview": "# Rspack Example with StyleX\n\nThis project demonstrates how to run StyleX inside Rspack via `@stylexjs/unplugin`. The pl"
},
{
"path": "examples/example-rspack/package.json",
"chars": 551,
"preview": "{\n \"name\": \"example-rspack\",\n \"private\": true,\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Rspack vi"
},
{
"path": "examples/example-rspack/public/index.html",
"chars": 324,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "examples/example-rspack/rspack.config.js",
"chars": 1483,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-rspack/src/App.jsx",
"chars": 650,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-rspack/src/global.css",
"chars": 290,
"preview": "/* Ensure Rspack produces a CSS asset to inject StyleX into */\n:root {\n --brand-color: #663399;\n}\n\nbody {\n margin: 0;\n"
},
{
"path": "examples/example-rspack/src/main.jsx",
"chars": 399,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/.babelrc.cjs",
"chars": 359,
"preview": "const path = require('path')\n\nmodule.exports = {\n presets: [\n ['@babel/preset-react', {runtime: 'automatic'}],\n '"
},
{
"path": "examples/example-storybook/.storybook/main.ts",
"chars": 1822,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/.storybook/preview.ts",
"chars": 467,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/.storybook/vitest.setup.ts",
"chars": 651,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/README.md",
"chars": 1218,
"preview": "# Storybook example using StyleX\n\nThis is a [Storybook](https://storybook.js.org/) project that demonstrates how to use "
},
{
"path": "examples/example-storybook/eslint.config.mjs",
"chars": 1916,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/package.json",
"chars": 1428,
"preview": "{\n \"private\": true,\n \"name\": \"example-storybook\",\n \"version\": \"0.18.1\",\n \"scripts\": {\n \"example:dev\": \"storybook "
},
{
"path": "examples/example-storybook/postcss.config.mjs",
"chars": 802,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/stories/Button.stories.ts",
"chars": 2038,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/stories/Button.tsx",
"chars": 2349,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/stories/Card.stories.ts",
"chars": 916,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/stories/Card.tsx",
"chars": 1169,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/stories/styles.css",
"chars": 258,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/vite-storybook.config.ts",
"chars": 934,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-storybook/vitest.config.ts",
"chars": 1308,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite/README.md",
"chars": 1442,
"preview": "# Vite Example with StyleX\n\nThis project shows how to wire StyleX into a Vite + React application using `@stylexjs/unplu"
},
{
"path": "examples/example-vite/index.html",
"chars": 321,
"preview": "<!doctype html>\n<html style=\"color-scheme: light dark\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" "
},
{
"path": "examples/example-vite/package.json",
"chars": 528,
"preview": "{\n \"name\": \"example-vite\",\n \"private\": true,\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Vite via @s"
},
{
"path": "examples/example-vite/src/App.jsx",
"chars": 824,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite/src/index.css",
"chars": 175,
"preview": "/* Ensure a CSS asset exists for StyleX to append to at build time */\n:root { --bg: #f8f9fb; }\nhtml, body, #root { heigh"
},
{
"path": "examples/example-vite/src/main.jsx",
"chars": 379,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite/vite.config.mjs",
"chars": 483,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-react/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "examples/example-vite-react/README.md",
"chars": 1588,
"preview": "# React + Vite + StyleX\n\nThis example is a TypeScript-ready React project that runs on Vite while compiling StyleX throu"
},
{
"path": "examples/example-vite-react/eslint.config.js",
"chars": 1057,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-react/index.html",
"chars": 367,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "examples/example-vite-react/package.json",
"chars": 893,
"preview": "{\n \"name\": \"example-vite-react\",\n \"private\": true,\n \"version\": \"0.18.1\",\n \"type\": \"module\",\n \"scripts\": {\n \"exam"
},
{
"path": "examples/example-vite-react/src/App.tsx",
"chars": 3814,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-react/src/index.css",
"chars": 108,
"preview": "/* Placeholder to ensure Vite emits a CSS asset for StyleX aggregation. */\n:root { --stylex-injection: 0; }\n"
},
{
"path": "examples/example-vite-react/src/main.tsx",
"chars": 498,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-react/tsconfig.app.json",
"chars": 732,
"preview": "{\n \"compilerOptions\": {\n \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.app.tsbuildinfo\",\n \"target\": \"ES2022\",\n"
},
{
"path": "examples/example-vite-react/tsconfig.json",
"chars": 119,
"preview": "{\n \"files\": [],\n \"references\": [\n { \"path\": \"./tsconfig.app.json\" },\n { \"path\": \"./tsconfig.node.json\" }\n ]\n}\n"
},
{
"path": "examples/example-vite-react/tsconfig.node.json",
"chars": 653,
"preview": "{\n \"compilerOptions\": {\n \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.node.tsbuildinfo\",\n \"target\": \"ES2023\","
},
{
"path": "examples/example-vite-react/vite.config.ts",
"chars": 413,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/.gitignore",
"chars": 18,
"preview": "node_modules\ndist\n"
},
{
"path": "examples/example-vite-rsc/README.md",
"chars": 2855,
"preview": "# Vite + React Server Components + StyleX\n\nThis example layers\n[`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plu"
},
{
"path": "examples/example-vite-rsc/package.json",
"chars": 658,
"preview": "{\n \"name\": \"@vitejs/plugin-rsc-examples-starter\",\n \"version\": \"0.18.1\",\n \"private\": true,\n \"license\": \"MIT\",\n \"type"
},
{
"path": "examples/example-vite-rsc/src/DevStyleXInject.tsx",
"chars": 657,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/src/action.tsx",
"chars": 389,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/src/client.tsx",
"chars": 1284,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/src/framework/entry.browser.tsx",
"chars": 4111,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/src/framework/entry.rsc.tsx",
"chars": 4465,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/src/framework/entry.ssr.tsx",
"chars": 2493,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/src/index.css",
"chars": 33,
"preview": ":root { --stylex-injection: 0; }\n"
},
{
"path": "examples/example-vite-rsc/src/root.tsx",
"chars": 3903,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-vite-rsc/tsconfig.json",
"chars": 473,
"preview": "{\n \"compilerOptions\": {\n \"erasableSyntaxOnly\": true,\n \"allowImportingTsExtensions\": true,\n \"strict\": true,\n "
},
{
"path": "examples/example-vite-rsc/vite.config.ts",
"chars": 2608,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/.gitignore",
"chars": 61,
"preview": "node_modules\ndist\n.env*\n*.tsbuildinfo\n.cache\n.DS_Store\n*.pem\n"
},
{
"path": "examples/example-waku/README.md",
"chars": 2493,
"preview": "# Waku + StyleX\n\nThis example shows how to integrate StyleX into a Waku application. The Vite\nlayer powering Waku runs `"
},
{
"path": "examples/example-waku/package.json",
"chars": 666,
"preview": "{\n \"name\": \"example-waku\",\n \"version\": \"0.18.1\",\n \"type\": \"module\",\n \"private\": true,\n \"scripts\": {\n \"example:de"
},
{
"path": "examples/example-waku/public/robots.txt",
"chars": 29,
"preview": "User-agent: *\nDisallow: /RSC/"
},
{
"path": "examples/example-waku/src/components/DevStyleXInject.tsx",
"chars": 658,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/src/components/counter.tsx",
"chars": 1199,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/src/components/footer.tsx",
"chars": 1080,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/src/components/header.tsx",
"chars": 1102,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/src/global.css",
"chars": 403,
"preview": "@layer reset {\n :root {\n color: #0f172a;\n font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'S"
},
{
"path": "examples/example-waku/src/pages/_layout.tsx",
"chars": 2203,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/src/pages/about.tsx",
"chars": 1386,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/src/pages/index.tsx",
"chars": 1434,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-waku/src/pages.gen.ts",
"chars": 698,
"preview": "// deno-fmt-ignore-file\n// biome-ignore format: generated types do not need formatting\n// prettier-ignore\nimport type { "
},
{
"path": "examples/example-waku/tsconfig.json",
"chars": 403,
"preview": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"target\": \"esnext\",\n \"noEmit\": true,\n \"isolatedModules\": true,\n "
},
{
"path": "examples/example-waku/waku.config.ts",
"chars": 869,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-webpack/.babelrc.js",
"chars": 270,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-webpack/.eslintrc.js",
"chars": 407,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-webpack/README.md",
"chars": 3153,
"preview": "# Webpack Example with StyleX\n\nThis example demonstrates how to configure StyleX with Webpack for a React\napplication us"
},
{
"path": "examples/example-webpack/index.html",
"chars": 293,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "examples/example-webpack/package.json",
"chars": 1062,
"preview": "{\n \"private\": true,\n \"name\": \"example-webpack\",\n \"version\": \"0.18.1\",\n \"description\": \"Example: StyleX with Webpack "
},
{
"path": "examples/example-webpack/src/App.jsx",
"chars": 2038,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-webpack/src/app.css",
"chars": 379,
"preview": "@layer reset {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n body {\n background-color: #f5f"
},
{
"path": "examples/example-webpack/src/components/CTAButton.jsx",
"chars": 1990,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-webpack/src/index.js",
"chars": 395,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-webpack/src/tokens.stylex.js",
"chars": 664,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "examples/example-webpack/webpack.config.js",
"chars": 2050,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "flow-typed/babel-plugins.js",
"chars": 726,
"preview": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found"
},
{
"path": "flow-typed/environments/bom.js",
"chars": 66030,
"preview": "/* BOM */\n\ndeclare class Screen {\n +availHeight: number;\n +availWidth: number;\n +availLeft: number;\n +availTop: numb"
},
{
"path": "flow-typed/environments/cssom.js",
"chars": 10331,
"preview": "declare class StyleSheet {\n disabled: boolean;\n +href: string;\n +media: MediaList;\n +ownerNode: Node;\n +parentStyle"
},
{
"path": "flow-typed/environments/dom.js",
"chars": 112923,
"preview": "/* Files */\n\ndeclare class Blob {\n constructor(\n blobParts?: Array<any>,\n options?: {\n type?: string,\n "
},
{
"path": "flow-typed/environments/html.js",
"chars": 40568,
"preview": "/* DataTransfer */\n\ndeclare class DataTransfer {\n clearData(format?: string): void;\n getData(format: string): string;\n"
},
{
"path": "flow-typed/environments/jsx.js",
"chars": 18243,
"preview": "// flow-typed signature: 740504cb8176bc8734d2a62895c6d35d\n// flow-typed version: a6edf4ac0b/jsx/flow_>=v0.83.x\n\n/**\n * h"
}
]
// ... and 785 more files (download for full content)
About this extraction
This page contains the full source code of the facebook/stylex GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 985 files (12.3 MB), approximately 3.3M tokens, and a symbol index with 1181 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.