Showing preview only (1,654K chars total). Download the full file or copy to clipboard to get everything.
Repository: vanilla-extract-css/vanilla-extract
Branch: master
Commit: ba21414abb88
Files: 572
Total size: 1.5 MB
Directory structure:
gitextract_3bw1abum/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yml
│ │ └── config.yml
│ └── workflows/
│ ├── deploy-site.yml
│ ├── release.yml
│ └── validate.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .oxlintrc.json
├── .prettierignore
├── .vscode/
│ └── settings.json
├── LICENSE
├── README.md
├── babel.config.js
├── docs/
│ └── treat-migration-guide.md
├── examples/
│ ├── next/
│ │ ├── components/
│ │ │ ├── HelloWorld.css.ts
│ │ │ └── HelloWorld.tsx
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── pages/
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ └── webpack-react/
│ ├── CHANGELOG.md
│ ├── package.json
│ ├── sandbox.config.json
│ ├── src/
│ │ ├── App.css.ts
│ │ ├── App.tsx
│ │ ├── global.css.ts
│ │ ├── index.tsx
│ │ ├── sprinkles.css.ts
│ │ └── vars.css.ts
│ └── webpack.config.js
├── fixtures/
│ ├── features/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── features.css.ts
│ │ │ ├── html.ts
│ │ │ └── index.ts
│ │ └── test-nodes.json
│ ├── layers/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.ts
│ │ └── styles.css.ts
│ ├── low-level/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── styles.css.ts
│ │ └── test-nodes.json
│ ├── next-12-pages-router/
│ │ ├── CHANGELOG.md
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── pages/
│ │ │ ├── features/
│ │ │ │ └── index.tsx
│ │ │ ├── index.tsx
│ │ │ ├── recipes/
│ │ │ │ └── index.tsx
│ │ │ └── sprinkles/
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── next-13-app-router/
│ │ ├── CHANGELOG.md
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── app/
│ │ │ ├── features/
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ ├── page.tsx
│ │ │ ├── recipes/
│ │ │ │ └── page.tsx
│ │ │ └── sprinkles/
│ │ │ └── page.tsx
│ │ └── tsconfig.json
│ ├── next-16-app-pages-router/
│ │ ├── next.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── creepster/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── duplication-test/
│ │ │ │ │ ├── a-plain.css.ts
│ │ │ │ │ ├── a.css.ts
│ │ │ │ │ ├── b-plain.css.ts
│ │ │ │ │ ├── b.css.ts
│ │ │ │ │ ├── extra/
│ │ │ │ │ │ ├── c-plain.css.ts
│ │ │ │ │ │ └── c.css.ts
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── features/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── function-serializer/
│ │ │ │ │ ├── page.tsx
│ │ │ │ │ ├── runtime.tsx
│ │ │ │ │ ├── source.css.ts
│ │ │ │ │ └── styled.ts
│ │ │ │ ├── layout.tsx
│ │ │ │ ├── next-font/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── next-image/
│ │ │ │ │ ├── image.css.ts
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── page.tsx
│ │ │ │ ├── recipes/
│ │ │ │ │ └── page.tsx
│ │ │ │ └── sprinkles/
│ │ │ │ └── page.tsx
│ │ │ ├── pages/
│ │ │ │ └── pages-router/
│ │ │ │ ├── features/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── recipes/
│ │ │ │ │ └── index.tsx
│ │ │ │ └── sprinkles/
│ │ │ │ └── index.tsx
│ │ │ └── styles/
│ │ │ ├── creepster-font.ts
│ │ │ ├── creepster.css.ts
│ │ │ ├── fonts.ts
│ │ │ └── nextFont.css.ts
│ │ └── tsconfig.json
│ ├── react-library-example/
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── button/
│ │ │ │ ├── button.css.ts
│ │ │ │ └── button.tsx
│ │ │ ├── checkbox/
│ │ │ │ ├── checkbox.css.ts
│ │ │ │ └── checkbox.tsx
│ │ │ ├── index.ts
│ │ │ ├── radio/
│ │ │ │ ├── radio.css.ts
│ │ │ │ └── radio.tsx
│ │ │ └── styles/
│ │ │ ├── reset.css.ts
│ │ │ ├── utility.css.ts
│ │ │ └── vars.css.ts
│ │ └── tsconfig.json
│ ├── recipes/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ └── src/
│ │ ├── html.ts
│ │ ├── index.ts
│ │ └── styles.css.ts
│ ├── sprinkles/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── html.ts
│ │ │ ├── index.ts
│ │ │ └── styles.css.ts
│ │ └── test-nodes.json
│ ├── template-string-paths/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ └── src/
│ │ ├── [...slug]/
│ │ │ └── index.css.ts
│ │ ├── [[...slug]]/
│ │ │ └── index.css.ts
│ │ ├── [[id]]/
│ │ │ └── index.css.ts
│ │ ├── []/
│ │ │ └── index.css.ts
│ │ ├── [blog-id]/
│ │ │ └── index.css.ts
│ │ ├── [id]/
│ │ │ └── index.css.ts
│ │ └── index.ts
│ ├── themed/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── shared.css.ts
│ │ │ ├── styles.css.ts
│ │ │ └── themes.css.ts
│ │ └── test-nodes.json
│ ├── thirdparty/
│ │ ├── CHANGELOG.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── styles.css.ts
│ │ ├── test-nodes.json
│ │ └── thirdparty-dep/
│ │ ├── CHANGELOG.md
│ │ ├── index.mjs
│ │ ├── package.json
│ │ ├── styles.css.mjs
│ │ └── thirdparty-dep-dep/
│ │ ├── CHANGELOG.md
│ │ ├── index.mjs
│ │ ├── package.json
│ │ └── styles.css.mjs
│ └── unused-modules/
│ ├── CHANGELOG.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── global.css.ts
│ │ ├── index.ts
│ │ ├── lookup.ts
│ │ ├── reset/
│ │ │ ├── index.ts
│ │ │ └── reset.css.ts
│ │ ├── shared/
│ │ │ ├── index.ts
│ │ │ └── shared.css.ts
│ │ ├── unused/
│ │ │ ├── index.ts
│ │ │ └── unused.css.ts
│ │ └── used/
│ │ ├── index.ts
│ │ └── used.css.ts
│ └── test-nodes.json
├── package.json
├── packages/
│ ├── babel-plugin-debug-ids/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.test.ts
│ │ └── index.ts
│ ├── compiler/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── compiler.ts
│ │ ├── index.ts
│ │ └── lock.ts
│ ├── css/
│ │ ├── CHANGELOG.md
│ │ ├── adapter/
│ │ │ └── package.json
│ │ ├── disableRuntimeStyles/
│ │ │ └── package.json
│ │ ├── fileScope/
│ │ │ └── package.json
│ │ ├── functionSerializer/
│ │ │ └── package.json
│ │ ├── injectStyles/
│ │ │ └── package.json
│ │ ├── package.json
│ │ ├── recipe/
│ │ │ └── package.json
│ │ ├── src/
│ │ │ ├── adapter.ts
│ │ │ ├── conditionalRulesets.ts
│ │ │ ├── container.ts
│ │ │ ├── disableRuntimeStyles.ts
│ │ │ ├── fileScope.ts
│ │ │ ├── functionSerializer.ts
│ │ │ ├── getDebugFileName.test.ts
│ │ │ ├── getDebugFileName.ts
│ │ │ ├── identifier.test.ts
│ │ │ ├── identifier.ts
│ │ │ ├── index.ts
│ │ │ ├── injectStyles.ts
│ │ │ ├── layer.test.ts
│ │ │ ├── layer.ts
│ │ │ ├── recipe.ts
│ │ │ ├── runtimeAdapter.ts
│ │ │ ├── simplePseudos.ts
│ │ │ ├── style.ts
│ │ │ ├── theme.ts
│ │ │ ├── transformCss.test.ts
│ │ │ ├── transformCss.ts
│ │ │ ├── types.ts
│ │ │ ├── utils.test.ts
│ │ │ ├── utils.ts
│ │ │ ├── validateContract.test.ts
│ │ │ ├── validateContract.ts
│ │ │ ├── validateMediaQuery.test.ts
│ │ │ ├── validateMediaQuery.ts
│ │ │ ├── validateSelector.test.ts
│ │ │ ├── validateSelector.ts
│ │ │ ├── vars.test.ts
│ │ │ ├── vars.ts
│ │ │ └── viewTransition.ts
│ │ ├── transformCss/
│ │ │ └── package.json
│ │ └── vanilla.virtual.css
│ ├── dynamic/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── assignInlineVars.css.ts
│ │ ├── assignInlineVars.test.ts
│ │ ├── assignInlineVars.ts
│ │ ├── index.ts
│ │ ├── setElementVars.test.ts
│ │ ├── setElementVars.ts
│ │ └── setElementVarts.css.ts
│ ├── esbuild-plugin/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── esbuild-plugin-next/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── integration/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── addFileScope.test.ts
│ │ ├── addFileScope.ts
│ │ ├── compile.ts
│ │ ├── filters.ts
│ │ ├── hash.ts
│ │ ├── index.ts
│ │ ├── packageInfo.ts
│ │ ├── processVanillaFile.test.ts
│ │ ├── processVanillaFile.ts
│ │ ├── serialize.ts
│ │ ├── transform.ts
│ │ ├── types.ts
│ │ └── virtualFile.ts
│ ├── jest-transform/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── next-plugin/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── parcel-transformer/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ ├── private/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── get.ts
│ │ ├── getVarName.ts
│ │ ├── index.ts
│ │ ├── types.ts
│ │ └── walkObject.ts
│ ├── recipes/
│ │ ├── CHANGELOG.md
│ │ ├── createRuntimeFn/
│ │ │ └── package.json
│ │ ├── package.json
│ │ └── src/
│ │ ├── createRuntimeFn.ts
│ │ ├── index.ts
│ │ ├── types.ts
│ │ └── utils.ts
│ ├── rollup-plugin/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── lib.ts
│ │ └── test/
│ │ ├── __snapshots__/
│ │ │ └── rollup-plugin.test.ts.snap
│ │ └── rollup-plugin.test.ts
│ ├── sprinkles/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── createRuntimeSprinkles/
│ │ │ └── package.json
│ │ ├── createUtils/
│ │ │ └── package.json
│ │ ├── package.json
│ │ └── src/
│ │ ├── createRuntimeSprinkles.ts
│ │ ├── createSprinkles.ts
│ │ ├── createUtils.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── turbopack-plugin/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.test.ts
│ │ ├── index.ts
│ │ └── next-font/
│ │ ├── inject.ts
│ │ ├── plugin.ts
│ │ └── transform.ts
│ ├── utils/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.test.ts
│ │ └── index.ts
│ ├── vite-plugin/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── src/
│ │ └── index.ts
│ └── webpack-plugin/
│ ├── CHANGELOG.md
│ ├── extracted.js
│ ├── loader/
│ │ └── package.json
│ ├── next/
│ │ └── package.json
│ ├── package.json
│ ├── src/
│ │ ├── __snapshots__/
│ │ │ └── compiler.test.ts.snap
│ │ ├── compat.ts
│ │ ├── compiler.test.ts
│ │ ├── compiler.ts
│ │ ├── index.ts
│ │ ├── loader.ts
│ │ ├── logger.ts
│ │ ├── next.ts
│ │ ├── plugin.ts
│ │ ├── types.ts
│ │ ├── virtualFileLoader.ts
│ │ └── virtualNextFileLoader.ts
│ ├── vanilla.virtual.css
│ ├── virtualFileLoader/
│ │ └── package.json
│ └── virtualNextFileLoader/
│ └── package.json
├── playwright.config.ts
├── pnpm-workspace.yaml
├── prettier.config.js
├── scripts/
│ ├── build-dts.ts
│ ├── copy-next-plugin.ts
│ ├── copy-readme-to-packages.ts
│ └── package.json
├── site/
│ ├── .gitignore
│ ├── babel.config.js
│ ├── code-block-loader.js
│ ├── contents.mts
│ ├── docs/
│ │ ├── api/
│ │ │ ├── add-function-serializer.md
│ │ │ ├── assign-vars.md
│ │ │ ├── create-container.md
│ │ │ ├── create-theme-contract.md
│ │ │ ├── create-theme.md
│ │ │ ├── create-var.md
│ │ │ ├── create-view-transition.md
│ │ │ ├── fallback-var.md
│ │ │ ├── font-face.md
│ │ │ ├── keyframes.md
│ │ │ ├── layer.md
│ │ │ ├── style-variants.md
│ │ │ └── style.md
│ │ ├── global-api/
│ │ │ ├── create-global-theme-contract.md
│ │ │ ├── create-global-theme.md
│ │ │ ├── create-global-var.md
│ │ │ ├── global-font-face.md
│ │ │ ├── global-keyframes.md
│ │ │ ├── global-layer.md
│ │ │ └── global-style.md
│ │ ├── integrations/
│ │ │ ├── astro.md
│ │ │ ├── esbuild.md
│ │ │ ├── gatsby.md
│ │ │ ├── next.md
│ │ │ ├── parcel.md
│ │ │ ├── remix.md
│ │ │ ├── rollup.md
│ │ │ ├── vite.md
│ │ │ └── webpack.md
│ │ ├── overview/
│ │ │ ├── getting-started.md
│ │ │ ├── style-composition.md
│ │ │ ├── styling.md
│ │ │ ├── test-environments.md
│ │ │ └── theming.md
│ │ └── packages/
│ │ ├── css-utils.md
│ │ ├── dynamic.md
│ │ ├── recipes.md
│ │ └── sprinkles.md
│ ├── documentIndexer.mts
│ ├── legacy-routes.json
│ ├── makeDocsManifest.mts
│ ├── package.json
│ ├── src/
│ │ ├── App.css.ts
│ │ ├── App.tsx
│ │ ├── Blockquote/
│ │ │ ├── Blockquote.css.ts
│ │ │ └── Blockquote.tsx
│ │ ├── Chevron/
│ │ │ ├── Chevron.css.ts
│ │ │ └── Chevron.tsx
│ │ ├── Code/
│ │ │ ├── CompiledCode.css.ts
│ │ │ ├── CompiledCode.tsx
│ │ │ ├── ErrorHighlighter.css.ts
│ │ │ ├── ErrorHighlighter.tsx
│ │ │ ├── SyntaxHighlighter.css.ts
│ │ │ └── SyntaxHighlighter.tsx
│ │ ├── ColorModeToggle/
│ │ │ ├── ColorModeToggle.css.ts
│ │ │ └── ColorModeToggle.tsx
│ │ ├── Divider/
│ │ │ ├── Divider.css.ts
│ │ │ └── Divider.tsx
│ │ ├── DocsPage/
│ │ │ ├── DocsPage.css.ts
│ │ │ ├── DocsPage.tsx
│ │ │ └── SiblingDoc/
│ │ │ └── SiblingDoc.tsx
│ │ ├── Fab/
│ │ │ ├── Fab.css.ts
│ │ │ └── Fab.tsx
│ │ ├── GitHubStars/
│ │ │ └── GitHubStars.tsx
│ │ ├── HomePage/
│ │ │ ├── HomePage.css.ts
│ │ │ └── HomePage.tsx
│ │ ├── InlineCode/
│ │ │ ├── InlineCode.css.ts
│ │ │ └── InlineCode.tsx
│ │ ├── Logo/
│ │ │ └── Logo.tsx
│ │ ├── SearchInput/
│ │ │ ├── SearchInput.css.ts
│ │ │ └── SearchInput.tsx
│ │ ├── Tweet/
│ │ │ ├── Tweet.css.ts
│ │ │ └── Tweet.tsx
│ │ ├── Typography/
│ │ │ ├── Heading.tsx
│ │ │ ├── Link.css.ts
│ │ │ ├── Link.tsx
│ │ │ ├── Text.tsx
│ │ │ └── typography.css.ts
│ │ ├── assets/
│ │ │ └── site.webmanifest
│ │ ├── client.tsx
│ │ ├── docs-store.ts
│ │ ├── index.d.ts
│ │ ├── mdx-components.css.ts
│ │ ├── mdx-components.tsx
│ │ ├── render.tsx
│ │ ├── system/
│ │ │ ├── Box/
│ │ │ │ └── Box.tsx
│ │ │ ├── ButtonLink/
│ │ │ │ ├── ButtonLink.css.ts
│ │ │ │ └── ButtonLink.tsx
│ │ │ ├── Columns/
│ │ │ │ └── Columns.tsx
│ │ │ ├── ContentBlock/
│ │ │ │ ├── ContentBlock.css.ts
│ │ │ │ └── ContentBlock.tsx
│ │ │ ├── Stack/
│ │ │ │ └── Stack.tsx
│ │ │ ├── index.ts
│ │ │ └── styles/
│ │ │ ├── reset.css.ts
│ │ │ └── sprinkles.css.ts
│ │ ├── themeUtils.ts
│ │ ├── themes.css.ts
│ │ └── useHeadingRoute.ts
│ └── webpack.config.js
├── test-helpers/
│ ├── CHANGELOG.md
│ ├── package.json
│ └── src/
│ ├── getStylesheet.ts
│ ├── index.ts
│ ├── startFixture/
│ │ ├── esbuild.ts
│ │ ├── index.ts
│ │ ├── next.ts
│ │ ├── parcel-config.json
│ │ ├── parcel.ts
│ │ ├── types.ts
│ │ ├── vite.ts
│ │ └── webpack.ts
│ └── startFixtureCLI.ts
├── tests/
│ ├── CHANGELOG.md
│ ├── compiler/
│ │ ├── compiler.test.ts
│ │ └── fixtures/
│ │ ├── assets-inline-limit/
│ │ │ ├── assets.d.ts
│ │ │ └── styles.css.ts
│ │ ├── class-composition/
│ │ │ ├── base.css.ts
│ │ │ ├── button.css.ts
│ │ │ ├── shared.css.ts
│ │ │ ├── stepper.css.ts
│ │ │ └── styles.css.ts
│ │ ├── importer-tree/
│ │ │ ├── evenMoreStyles.css.ts
│ │ │ ├── moreStyles.css.ts
│ │ │ ├── moreStyles2.css.ts
│ │ │ ├── otherTokens.ts
│ │ │ ├── reExporter.ts
│ │ │ ├── styles.css.ts
│ │ │ └── tokens.ts
│ │ ├── recipes/
│ │ │ └── recipeClassNames.css.ts
│ │ ├── selectors/
│ │ │ └── getter.css.ts
│ │ ├── tsconfig-paths/
│ │ │ ├── src/
│ │ │ │ ├── main.css.ts
│ │ │ │ └── main.tsx
│ │ │ └── tsconfig.json
│ │ ├── unused-compositions/
│ │ │ ├── shared.css.ts
│ │ │ ├── styles_a.css.ts
│ │ │ └── styles_b.css.ts
│ │ └── vite-config/
│ │ ├── alias.css.ts
│ │ ├── image.css.ts
│ │ ├── plugin.css.ts
│ │ └── util/
│ │ └── vars.css.ts
│ ├── e2e/
│ │ ├── css-deduplication.playwright.ts
│ │ ├── features.playwright.ts
│ │ ├── features.playwright.ts-snapshots/
│ │ │ ├── features-esbuild--development.css
│ │ │ ├── features-esbuild--production.css
│ │ │ ├── features-esbuild-next--development.css
│ │ │ ├── features-esbuild-next--production.css
│ │ │ ├── features-mini-css-extract--development.css
│ │ │ ├── features-mini-css-extract--production.css
│ │ │ ├── features-parcel--development.css
│ │ │ ├── features-parcel--production.css
│ │ │ └── features-vite--production.css
│ │ ├── fixture.ts
│ │ ├── fixtures-next-unified.playwright.ts
│ │ ├── layers.playwright.ts
│ │ ├── layers.playwright.ts-snapshots/
│ │ │ ├── layers-esbuild--development.css
│ │ │ ├── layers-esbuild--production.css
│ │ │ ├── layers-esbuild-next--development.css
│ │ │ ├── layers-esbuild-next--production.css
│ │ │ ├── layers-mini-css-extract--development.css
│ │ │ ├── layers-mini-css-extract--production.css
│ │ │ ├── layers-parcel--development.css
│ │ │ ├── layers-parcel--production.css
│ │ │ └── layers-vite--production.css
│ │ ├── low-level.playwright.ts
│ │ ├── low-level.playwright.ts-snapshots/
│ │ │ ├── low-level-esbuild--development.css
│ │ │ ├── low-level-esbuild--production.css
│ │ │ ├── low-level-esbuild-next--development.css
│ │ │ ├── low-level-esbuild-next--production.css
│ │ │ ├── low-level-mini-css-extract--development.css
│ │ │ ├── low-level-mini-css-extract--production.css
│ │ │ ├── low-level-parcel--development.css
│ │ │ ├── low-level-parcel--production.css
│ │ │ └── low-level-vite--production.css
│ │ ├── recipes.playwright.ts
│ │ ├── recipes.playwright.ts-snapshots/
│ │ │ ├── recipes-esbuild--development.css
│ │ │ ├── recipes-esbuild--production.css
│ │ │ ├── recipes-esbuild-next--development.css
│ │ │ ├── recipes-esbuild-next--production.css
│ │ │ ├── recipes-mini-css-extract--development.css
│ │ │ ├── recipes-mini-css-extract--production.css
│ │ │ ├── recipes-parcel--development.css
│ │ │ ├── recipes-parcel--production.css
│ │ │ └── recipes-vite--production.css
│ │ ├── sprinkles.playwright.ts
│ │ ├── sprinkles.playwright.ts-snapshots/
│ │ │ ├── sprinkles-esbuild--development.css
│ │ │ ├── sprinkles-esbuild--production.css
│ │ │ ├── sprinkles-esbuild-next--development.css
│ │ │ ├── sprinkles-esbuild-next--production.css
│ │ │ ├── sprinkles-mini-css-extract--development.css
│ │ │ ├── sprinkles-mini-css-extract--production.css
│ │ │ ├── sprinkles-parcel--development.css
│ │ │ ├── sprinkles-parcel--production.css
│ │ │ └── sprinkles-vite--production.css
│ │ ├── template-string-paths.playwright.ts
│ │ ├── template-string-paths.playwright.ts-snapshots/
│ │ │ ├── template-string-paths-mini-css-extract--development.css
│ │ │ └── template-string-paths-mini-css-extract--production.css
│ │ ├── testCases.ts
│ │ ├── themed.playwright.ts
│ │ ├── themed.playwright.ts-snapshots/
│ │ │ ├── themed-esbuild--development.css
│ │ │ ├── themed-esbuild--production.css
│ │ │ ├── themed-esbuild-next--development.css
│ │ │ ├── themed-esbuild-next--production.css
│ │ │ ├── themed-mini-css-extract--development.css
│ │ │ ├── themed-mini-css-extract--production.css
│ │ │ ├── themed-parcel--development.css
│ │ │ ├── themed-parcel--production.css
│ │ │ └── themed-vite--production.css
│ │ ├── thirdparty.playwright.ts
│ │ └── thirdparty.playwright.ts-snapshots/
│ │ ├── thirdparty-esbuild--development.css
│ │ ├── thirdparty-esbuild--production.css
│ │ ├── thirdparty-esbuild-next--development.css
│ │ ├── thirdparty-esbuild-next--production.css
│ │ ├── thirdparty-mini-css-extract--development.css
│ │ ├── thirdparty-mini-css-extract--production.css
│ │ ├── thirdparty-parcel--development.css
│ │ ├── thirdparty-parcel--production.css
│ │ └── thirdparty-vite--production.css
│ ├── jsdom/
│ │ ├── jsdom.css.ts
│ │ └── jsdom.test.ts
│ ├── package.json
│ ├── recipes/
│ │ ├── recipes-type-tests.ts
│ │ ├── recipes.css.ts
│ │ └── recipes.test.ts
│ ├── servers.ts
│ ├── sprinkles/
│ │ ├── index.css.ts
│ │ ├── sprinkles-type-tests.ts
│ │ └── sprinkles.test.ts
│ ├── types/
│ │ └── type-tests.ts
│ └── walkObject/
│ ├── tokens.ts
│ └── walkObject.test.ts
├── tsconfig.json
└── vitest.config.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
"changelog": [
"@changesets/changelog-github",
{ "repo": "vanilla-extract-css/vanilla-extract" }
],
"commit": false,
"linked": [],
"access": "public",
"baseBranch": "master",
"updateInternalDependencies": "patch",
"snapshot": {
"useCalculatedVersion": true
},
"privatePackages": {
"tag": false, "version": false
},
"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
"onlyUpdatePeerDependentsWhenOutOfRange": true
}
}
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.yml
================================================
name: "Bug report"
description: Report an issue with vanilla-extract
labels: [pending triage]
body:
- type: markdown
attributes:
value: |
Please note issues should only be used for actual issues. Any feature requests or general feedback should be raised in Github Discussions (https://github.com/vanilla-extract-css/vanilla-extract/discussions) or Discord (https://discord.gg/6nCfPwwz6w)
- type: textarea
id: bug-description
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
placeholder: Bug description
validations:
required: true
- type: input
id: reproduction
attributes:
label: Reproduction
description: Add a link to a repo or codesandbox showcasing a [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) of the issue. Issues without a reproduction will likely be closed without action.
placeholder: Reproduction
validations:
required: true
- type: textarea
id: system-info
attributes:
label: System Info
description: Output of `npx envinfo --system --npmPackages '{@vanilla-extract/*,webpack,esbuild,vite,rollup}' --binaries --browsers`
render: shell
placeholder: System, Binaries, Browsers
validations:
required: true
- type: dropdown
id: package-manager
attributes:
label: Used Package Manager
description: Select the used package manager
options:
- npm
- yarn
- pnpm
- bun
validations:
required: true
- type: textarea
id: logs
attributes:
label: Logs
description: |
Any error logging you are seeing as a result of your issue. Please try not to insert an image but copy paste the log text.
render: shell
- type: checkboxes
id: checkboxes
attributes:
label: Validations
description: Before submitting the issue, please make sure you do the following
options:
- label: Check that there isn't [already an issue](https://github.com/vanilla-extract-css/vanilla-extract/issues) that reports the same bug to avoid creating a duplicate.
required: true
- label: The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Feature requests, Questions & Discussions
url: https://github.com/vanilla-extract-css/vanilla-extract/discussions
about: Use GitHub discussions for message-board style questions and discussions
- name: Discord Chat
url: https://discord.gg/6nCfPwwz6w
about: Ask questions and discuss with other vanilla-extract users in real time.
================================================
FILE: .github/workflows/deploy-site.yml
================================================
name: Deploy site
on: push
jobs:
deploy-site:
name: Deploy site
runs-on: ubuntu-latest
env:
CI: true
steps:
- name: Checkout Repo
uses: actions/checkout@v6
- name: Set up PNPM
uses: pnpm/action-setup@v4
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: '.nvmrc'
cache: 'pnpm'
- name: Install Dependencies
run: pnpm install
- name: Build packages
run: pnpm run build
- name: Build site
run: pnpm --filter "./site" build
- name: Draft deploy site to Netlify
run: pnpm --filter "./site" deploy:branch
if: github.ref != 'refs/heads/master'
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
- name: Deploy site to Netlify
run: pnpm --filter "./site" deploy:prod
if: github.ref == 'refs/heads/master'
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches:
- master
workflow_dispatch:
jobs:
release:
name: Publish & Deploy
if: github.event_name == 'push'
runs-on: ubuntu-latest
permissions:
id-token: write
env:
CI: true
steps:
- name: Checkout Repo
uses: actions/checkout@v6
with:
fetch-depth: 0
token: ${{ secrets.VANILLA_EXTRACT_CI_GITHUB_TOKEN }}
- name: Set up PNPM
uses: pnpm/action-setup@v4
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: '.nvmrc'
cache: 'pnpm'
- name: Install Dependencies
run: pnpm install
- name: Create release PR or publish to npm
uses: changesets/action@v1
with:
version: pnpm run version
publish: pnpm release
env:
GITHUB_TOKEN: ${{ secrets.VANILLA_EXTRACT_CI_GITHUB_TOKEN }}
snapshot:
name: Publish snapshot version
if: github.event_name == 'workflow_dispatch'
runs-on: ubuntu-latest
permissions:
id-token: write
env:
CI: true
steps:
- name: Checkout Repo
uses: actions/checkout@v6
with:
fetch-depth: 0
token: ${{ secrets.VANILLA_EXTRACT_CI_GITHUB_TOKEN }}
- name: Set up PNPM
uses: pnpm/action-setup@v4
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: '.nvmrc'
cache: 'pnpm'
- name: Install Dependencies
run: pnpm install
- name: Publish
uses: seek-oss/changesets-snapshot@v0
with:
pre-publish: pnpm prepare-release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .github/workflows/validate.yml
================================================
name: Validate
on: [push, pull_request]
jobs:
test:
strategy:
matrix:
# Blank string allows us to test against version in nvmrc file
# configured in 'Set up Node.js' down below.
node: ['', '22']
name: Lint & Test (${{ (matrix.node && matrix.node != '22') && format('node {0}', matrix.node) || matrix.node || 'nvmrc' }})
runs-on: ubuntu-latest
env:
CI: true
steps:
- name: Checkout Repo
uses: actions/checkout@v6
- name: Set up PNPM
uses: pnpm/action-setup@v4
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node }}
node-version-file: ${{ matrix.node == '' && '.nvmrc' || '' }}
cache: 'pnpm'
- name: Install Dependencies
run: pnpm install
- name: Build
run: pnpm build && pnpm --filter "./site" generate:docs-manifest
- name: Lint
run: pnpm lint
- name: Unit Test
run: pnpm test:unit
windows-test:
strategy:
matrix:
# Blank string allows us to test against version in nvmrc file
# configured in 'Set up Node.js' down below.
node: ['', '22']
name: Windows Tests (${{ (matrix.node && matrix.node != '22') && format('node {0}', matrix.node) || matrix.node || 'nvmrc' }})
runs-on: windows-latest
env:
CI: true
steps:
- name: Checkout Repo
uses: actions/checkout@v6
- name: Set up PNPM
uses: pnpm/action-setup@v4
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node }}
node-version-file: ${{ matrix.node == '' && '.nvmrc' || '' }}
cache: 'pnpm'
- name: Install Dependencies
run: pnpm install
- name: Build
run: pnpm build
- name: Unit Test
run: pnpm test:unit
playwright:
name: Playwright tests
runs-on: macos-latest
if: github.ref != 'refs/heads/changeset-release/master' && github.head_ref != 'changeset-release/master'
env:
CI: true
steps:
- name: Checkout Repo
uses: actions/checkout@v6
- name: Set up PNPM
uses: pnpm/action-setup@v4
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: '.nvmrc'
cache: 'pnpm'
- name: Install Dependencies
run: pnpm install
- name: Install Browsers
run: pnpm playwright install chromium
- name: Build packages
run: pnpm build
- name: Playwright tests
run: pnpm test:playwright
- uses: actions/upload-artifact@v4
if: ${{ failure() }}
with:
name: test-results
path: test-results/
================================================
FILE: .gitignore
================================================
node_modules
dist
tsconfig.tsbuildinfo
packages/**/README.md
!packages/sprinkles/README.md
!packages/integration/README.md
!packages/compiler/README.md
test-results
.parcel-cache
.pnp.*
.next
.DS_Store
.idea
next-env.d.ts
================================================
FILE: .npmrc
================================================
registry=https://registry.npmjs.org/
================================================
FILE: .nvmrc
================================================
lts/krypton
================================================
FILE: .oxlintrc.json
================================================
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"ignorePatterns": ["packages/webpack-plugin/extracted.js"]
}
================================================
FILE: .prettierignore
================================================
.idea/
.vscode/
node_modules
dist
CHANGELOG.md
README.md
.github/ISSUE_TEMPLATE
site/docs-manifest.json
.changeset
.next
pnpm-lock.yaml
*-snapshots
test-results
examples/remix/build
.pnpm-store
next-env.d.ts
================================================
FILE: .vscode/settings.json
================================================
{
"typescript.tsdk": "node_modules/typescript/lib",
"vitest.enable": true,
"vitest.commandLine": "pnpm test:vitest"
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021 SEEK
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
================================================
# 🧁 vanilla-extract
**Zero-runtime Stylesheets-in-TypeScript.**
Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.
Basically, it’s [“CSS Modules](https://github.com/css-modules/css-modules)-in-TypeScript” but with scoped CSS Variables + heaps more.
🔥 All styles generated at build time — just like [Sass](https://sass-lang.com), [Less](http://lesscss.org), etc.
✨ Minimal abstraction over standard CSS.
🦄 Works with any front-end framework — or even without one.
🌳 Locally scoped class names — just like [CSS Modules.](https://github.com/css-modules/css-modules)
🚀 Locally scoped [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), `@keyframes` and `@font-face` rules.
🎨 High-level theme system with support for simultaneous themes. No globals!
🛠 Utils for generating variable-based `calc` expressions.
💪 Type-safe styles via [CSSType.](https://github.com/frenic/csstype)
🏃♂️ Optional runtime version for development and testing.
🙈 Optional API for dynamic runtime theming.
---
🌐 [Check out the documentation site for setup guides, examples and API docs.](https://vanilla-extract.style)
---
🖥 [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/App.css.ts)
---
**Write your styles in `.css.ts` files.**
```ts
// styles.css.ts
import { createTheme, style } from '@vanilla-extract/css';
export const [themeClass, vars] = createTheme({
color: {
brand: 'blue'
},
font: {
body: 'arial'
}
});
export const exampleStyle = style({
backgroundColor: vars.color.brand,
fontFamily: vars.font.body,
color: 'white',
padding: 10
});
```
> 💡 Once you've [configured your build tooling,](https://vanilla-extract.style/documentation/getting-started/) these `.css.ts` files will be evaluated at build time. None of the code in these files will be included in your final bundle. Think of it as using TypeScript as your preprocessor instead of Sass, Less, etc.
**Then consume them in your markup.**
```ts
// app.ts
import { themeClass, exampleStyle } from './styles.css.ts';
document.write(`
<section class="${themeClass}">
<h1 class="${exampleStyle}">Hello world!</h1>
</section>
`);
```
---
Want to work at a higher level while maximising style re-use? Check out 🍨 [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
---
## Thanks
- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for [treat](https://seek-oss.github.io/treat), the precursor to this library.
- [Stitches](https://stitches.dev/) for getting us excited about CSS-Variables-in-JS.
- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.
## License
MIT.
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: '14.21' } }],
'@babel/preset-typescript',
],
overrides: [
{
include: [
'./packages/css',
'./packages/dynamic',
'./packages/private',
'./packages/recipes',
'./packages/sprinkles',
'./packages/utils',
],
presets: [['@babel/preset-env', { targets: { esmodules: true } }]],
},
],
};
================================================
FILE: docs/treat-migration-guide.md
================================================
# 🍬 treat migration guide
🎉 First of all, thanks for using treat, and thanks for your interest in vanilla-extract!
When we first started work on vanilla-extract, it actually began life as `treat-next` — an experiment with replacing our custom webpack-based theming system with CSS Variables. However, we quickly realised that the theming system was too different to carry the same name. That said, they're similar enough that migrating shouldn't be too hard (relative to migrating to another library).
We've made sure that both treat and vanilla-extract can run simultaneously in the same project, so if you have a lot of treat files, don't feel like you have to migrate everything at once!
## New file extension
The file extension has changed from `*.treat.ts` to `*.css.ts`.
## `.css.ts` files can import other `.css.ts` files
This wasn't possible in treat with `*.treat.ts` files. If you've had to work around this limitation in the past, you don't need to worry anymore!
## Your webpack config must handle CSS files
In treat, we automatically handled all generated CSS files for you. With vanilla-extract we've taken a more lightweight approach. Instead, we generate regular global CSS files and assume you've configured webpack to handle this. This makes things a lot simpler, but also a lot more configurable.
For more detail, check out the [webpack setup guide.](https://github.com/vanilla-extract-css/vanilla-extract#webpack)
## Autoprefixer is no longer included
If you want Autoprefixer, you'll need to [manually add it to your webpack config.](https://github.com/webpack-contrib/postcss-loader#autoprefixer)
Note that this also means you have a lot more control over the handling of generated CSS. For example, you might want to use [postcss-preset-env](https://github.com/webpack-contrib/postcss-loader#postcss-preset-env) instead.
## URL handling should be disabled for `*.vanilla.css` files
In treat, we set css-loader's [`url` option](https://webpack.js.org/loaders/css-loader/#url) to `false`. This was to ensure that JavaScript import statements were always used for assets (e.g. `import logoUrl from './logo.png'`) rather than allowing the CSS to create implicit imports (e.g. `background: "url('./logo.png')"`).
If you want to reinstate treat's approach to asset imports without affecting other CSS files, you can configure css-loader separately for `*.vanilla.css` files. For example:
```ts
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
oneOf: [
{
test: /\.vanilla\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { url: false }
}
]
},
{
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
}
]
},
plugins: [
new VanillaExtractPlugin(),
new MiniCssExtractPlugin()
]
};
```
## `createTheme`
If you only have a single theme, you can keep things simple by using `createGlobalTheme` and targeting `:root`. If you do this, your variables will just work without having to wire anything up to the document.
```ts
// vars.css.ts
import { createGlobalTheme } from '@vanilla-extract/css';
export const vars = createGlobalTheme(':root', {
...tokens
});
```
If you have multiple themes, or if you want to avoid the global scope, use the [`createTheme`](https://github.com/vanilla-extract-css/vanilla-extract#createtheme) function instead.
```ts
// vars.css.ts
import { createTheme } from '@vanilla-extract/css';
export const [themeA, vars] = createTheme({
...tokens
});
export const themeB = createTheme(vars, {
...tokens
});
```
If you're bundle-splitting your themes, you'll probably want the [`createThemeContract`](https://github.com/vanilla-extract-css/vanilla-extract#createthemecontract) function.
## `TreatProvider`
> 💡 This isn't required if you only have a single global theme set up via `createGlobalTheme`.
You no longer need React bindings to switch themes at runtime since we're just using standard CSS Variables. Instead of using something like `TreatProvider` at the root of your app, you need to attach your theme class to an element instead.
```tsx
// App.ts
import { themeClass } from './vars.css';
export const App = () => (
<div className={themeClass}>...</div>
);
```
## Theme tokens must be strings
To avoid errors when migrating unitless numbers to CSS Variables, numbers are no longer accepted as theme token values. This forces you to be explicit about `px` units, or lack thereof, since we can't know ahead of time where the variable will be used. Think of it as writing a CSS string rather than a JavaScript value since this goes directly into the generated CSS Variable definition.
```diff
const themeClass = createGlobalTheme(':root', {
- grid: 4,
+ grid: '4px',
});
```
If you need a unitless number, just convert it to a string as-is.
```diff
const themeClass = createGlobalTheme(':root', {
- headingWeight: 600,
+ headingWeight: '600',
});
```
## Theme classes must be forwarded through React portals
> 💡 This isn't required if you only have a single global theme set up via `createGlobalTheme`.
CSS Variables don't follow the rules of React context, which means that theming won't automatically work when [rendering to a portal.](https://reactjs.org/docs/portals.html) To handle this, you'll need to ensure your theme class is available on context so you can access it when needed.
As a basic example, let's set up a `VanillaThemeContext`.
```tsx
// VanillaThemeContext.tsx
import { createContext, useContext } from 'react';
const VanillaThemeContext = createContext<string | null>(
null
);
export const VanillaThemeProvider =
VanillaThemeContext.Provider;
export const useVanillaTheme = () => {
const themeClass = useContext(VanillaThemeContext);
if (themeClass === null) {
throw new Error('Must be inside VanillaThemeProvider');
}
return themeClass;
};
```
We can then use this `VanillaThemeProvider` at the root of our app.
```tsx
// App.tsx
import { createContext, useContext } from 'react';
import { themeClass } from './vars.css';
import { VanillaThemeProvider } from './VanillaThemeContext';
export const App = () => (
<VanillaThemeProvider value={themeClass}>
<div className={themeClass}>...</div>
</VanillaThemeProvider>
);
```
We can now access the theme via our custom `useVanillaTheme` Hook and apply it to the root element of our portal.
```tsx
// MyPortalComponent.tsx
import { createPortal } from 'react-dom';
import { useVanillaTheme } from './VanillaThemeContext';
export const MyPortalComponent = () => {
const themeClass = useVanillaTheme();
return createPortal(
<div className={themeClass}>...</div>,
document.body
);
};
```
## `useStyles` / `resolveStyles`
The whole concept of `styleRefs` and `useStyles`/`resolveStyles` goes away. No more plumbing required, just access the CSS exports directly.
```diff
-import { useStyles } from 'react-treat';
-import * as styleRefs from './styles.treat';
+import * as styles from './styles.css';
export const Foo = () => {
- const styles = useStyles(styleRefs);
return (
<div className={styles.root}>
...
</div>
);
}
```
## `style`
Since theme variables are now managed by the browser, the `style` function no longer accepts a theme callback.
To get access to variables, we now import theme variables from the `.css.ts` file that defines them.
```diff
-import { style } from 'treat';
-
-const className = style(theme => ({
- paddingTop: theme.space.small
-}))
+import { style } from '@vanilla-extract/css';
+import { vars } from '../vars.css';
+
+export const className = style({
+ paddingTop: vars.space.small
+});
```
Note that this means the theme is no longer global! You don't need to worry about setting up [global theme types,](https://seek-oss.github.io/treat/data-types#theme) and you can run multiple sets of theme variables in parallel.
## Style calculations
> **⚠️ When it comes to inline style calculations, CSS Variables are inherently more limited than treat's theming system. This is because you can only use standard CSS functions rather than being able to execute arbitrary JavaScript code.**
>
> If your app only has a single theme and you think this change is too limiting, you might want to consider avoiding CSS Variables entirely and using a shared object of constants and calculating all theme-based styles at build time instead.
Theme variables are now opaque CSS Variables (i.e. `"var(--g7vce91)"`) rather than actual token values that differ per theme, which means you can't perform JavaScript calculations on them.
Simple calculations (addition, subtraction, multiplication, division) are covered by CSS's `calc` function. To make this a bit easier in TypeScript, we provide a [`calc`](https://github.com/vanilla-extract-css/vanilla-extract#calc) function in the `@vanilla-extract/css-utils` package.
```diff
-import { style } from 'treat';
-
-const className = style(theme => ({
- marginTop: theme.space.small * -1
-}))
+import { style } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { vars } from '../vars.css';
+
+const className = style({
+ marginTop: calc.negate(vars.space.small)
+});
```
If you're doing anything more advanced with theme variables that the browser doesn't natively support (e.g. rounding numbers, modifying colours), you'll need to hoist this logic into your theme as CSS Variables.
For example, let's assume you've calculated a lighter colour variant inline using [Polished.](https://polished.js.org/)
```ts
import { style } from 'treat';
import { lighten } from 'polished';
export const className = style((theme) => ({
background: lighten(0.2, theme.color.brand)
}));
```
Since this calculation is not yet supported natively in CSS, this lighter background would need to become part of your theme definition. In this case, we'll introduce a new `color` variable called `brandLight`. Notice that in this context we're able to execute arbitrary JavaScript code.
```ts
// vars.css.ts
import { createGlobalTheme } from '@vanilla-extract/css';
import { lighten } from 'polished';
const brandColor = 'blue';
export const vars = createGlobalTheme(':root', {
color: {
brand: brandColor,
brandLight: lighten(0.2, brandColor)
}
});
```
You would then update your styles to use this new CSS Variable instead.
```diff
-import { style } from 'treat';
-import { lighten } from 'polished';
+import { style } from '@vanilla-extract/css';
+import { vars } from '../vars.css';
-export const className = style(theme => ({
- background: lighten(0.2, theme.color.brand)
-}));
+export const className = style({
+ background: vars.color.brandLight
+});
```
## `styleMap`
You can use [`styleVariants`](https://github.com/vanilla-extract-css/vanilla-extract#stylevariants) as a drop-in replacement. Note that it now accepts a map function as the second argument, so there may be some opportunities to simplify your code if you were mapping over objects before passing them to `styleMap`.
## `styleTree`
Since you now have direct access to theme objects outside of a style block, this function is no longer necessary.
## `@keyframes`
The `@keyframes` property is no longer supported on style objects. Instead, you should create keyframes separately with the `keyframes` function.
```diff
-import { style } from 'treat';
-
-const className = style({
- '@keyframes': { ... },
- animationName: '@keyframes'
-});
+import { keyframes, style } from '@vanilla-extract/css';
+const myAnimationName = keyframes({ ... });
+
+const className = style({
+ animationName: myAnimationName
+});
```
## Did we forget anything?
[Please let us know.](https://github.com/vanilla-extract-css/vanilla-extract/issues/new)
================================================
FILE: examples/next/components/HelloWorld.css.ts
================================================
import { style, createVar, keyframes, fallbackVar } from '@vanilla-extract/css';
const color = createVar();
const angle = createVar({
syntax: '<angle>',
inherits: false,
initialValue: '0deg',
});
const angleKeyframes = keyframes({
'100%': {
vars: {
[angle]: '360deg',
},
},
});
export const root = style({
background: 'pink',
color: 'blue',
padding: '16px',
transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer
backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
animation: `${angleKeyframes} 7s infinite ease-in-out both`,
':hover': {
opacity: 0.8,
color: color,
},
vars: {
[color]: '#fef',
[angle]: fallbackVar(angle, '138deg'),
},
});
================================================
FILE: examples/next/components/HelloWorld.tsx
================================================
import * as styles from './HelloWorld.css';
export function HelloWorld() {
return (
<div className={styles.root}>
<h1>🧁 Hello from vanilla-extract!</h1>
</div>
);
}
================================================
FILE: examples/next/next.config.js
================================================
const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();
module.exports = withVanillaExtract();
================================================
FILE: examples/next/package.json
================================================
{
"name": "vanilla-extract-example-next",
"description": "Example project using vanilla-extract, compiling with Next.js",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "12.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/next-plugin": "workspace:^"
},
"browserslist": [
">0.3%",
"ie 11",
"safari 4",
"not op_mini all"
]
}
================================================
FILE: examples/next/pages/index.tsx
================================================
import { HelloWorld } from '../components/HelloWorld';
export default function Home() {
return <HelloWorld />;
}
================================================
FILE: examples/next/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
================================================
FILE: examples/webpack-react/CHANGELOG.md
================================================
# vanilla-extract-example-webpack-react
## 0.0.34
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/webpack-plugin@2.3.13
- @vanilla-extract/sprinkles@1.6.3
## 0.0.33
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/sprinkles@1.6.3
- @vanilla-extract/webpack-plugin@2.3.12
## 0.0.32
### Patch Changes
- Updated dependencies []:
- @vanilla-extract/webpack-plugin@2.3.11
## 0.0.31
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/webpack-plugin@2.3.10
## 0.0.30
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/webpack-plugin@2.3.9
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/css@1.15.2
## 0.0.29
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
- @vanilla-extract/webpack-plugin@2.3.8
## 0.0.28
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.27
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.26
### Patch Changes
- Updated dependencies [[`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1), [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/webpack-plugin@2.3.3
- @vanilla-extract/css@1.14.1
## 0.0.25
### Patch Changes
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 0.0.24
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
- @vanilla-extract/webpack-plugin@2.3.0
## 0.0.23
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3), [`8a35dff`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a35dff7f8b4f75691b7ba6ecdc98f45d6e8c5f4)]:
- @vanilla-extract/css@1.12.0
- @vanilla-extract/sprinkles@1.6.1
## 0.0.22
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.21
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.19
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.18
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.17
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.16
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/sprinkles@1.5.1
## 0.0.15
### Patch Changes
- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/webpack-plugin@2.2.0
- @vanilla-extract/css@1.9.1
## 0.0.14
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.13
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/babel-plugin@1.2.0
- @vanilla-extract/css@1.8.0
## 0.0.12
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.11
### Patch Changes
- Updated dependencies [[`21afc23`](https://github.com/vanilla-extract-css/vanilla-extract/commit/21afc23ae552b8071fbe5d7b0c3dce07fc016ee7), [`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/webpack-plugin@2.1.12
- @vanilla-extract/css@1.7.3
## 0.0.10
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
- @vanilla-extract/babel-plugin@1.1.7
- @vanilla-extract/webpack-plugin@2.1.11
## 0.0.9
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.8
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c), [`69b8460`](https://github.com/vanilla-extract-css/vanilla-extract/commit/69b846015ecada3354ea292e1276e5da560923c6)]:
- @vanilla-extract/css@1.7.0
- @vanilla-extract/webpack-plugin@2.1.8
## 0.0.7
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/sprinkles@1.3.3
- @vanilla-extract/babel-plugin@1.1.3
- @vanilla-extract/webpack-plugin@2.1.4
## 0.0.6
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.5
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/sprinkles@1.3.2
- @vanilla-extract/webpack-plugin@2.1.3
## 0.0.4
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.3
### Patch Changes
- Updated dependencies [[`f2d2d9e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f2d2d9eea18dcd4ffec694f8056a78d850485592), [`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/webpack-plugin@2.1.2
- @vanilla-extract/css@1.6.4
================================================
FILE: examples/webpack-react/package.json
================================================
{
"name": "vanilla-extract-example-webpack-react",
"description": "Example React project using vanilla-extract and Sprinkles, compiling with webpack",
"keywords": [
"vanilla-extract",
"sprinkles",
"css-in-js",
"css-in-ts",
"css",
"webpack",
"react"
],
"version": "0.0.34",
"main": "src/index.ts",
"author": "SEEK",
"scripts": {
"start": "webpack serve",
"build": "webpack"
},
"private": true,
"dependencies": {
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/sprinkles": "workspace:^",
"@vanilla-extract/webpack-plugin": "workspace:^",
"babel-loader": "^10.0.0",
"css-loader": "^7.1.2",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^2.9.4",
"polished": "^4.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^4.1.18",
"webpack": "^5.90.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19"
}
}
================================================
FILE: examples/webpack-react/sandbox.config.json
================================================
{
"template": "node",
"node": "14",
"container": {
"node": "14"
}
}
================================================
FILE: examples/webpack-react/src/App.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { sprinkles } from './sprinkles.css';
export const card = style([
sprinkles({
background: {
lightMode: 'green-50',
darkMode: 'gray-800',
},
borderRadius: {
mobile: '4x',
desktop: '5x',
},
padding: {
mobile: '7x',
desktop: '8x',
},
}),
{
transition: 'transform 4s ease-in-out',
':hover': {
cursor: 'default',
transform: 'scale(2) rotate(720deg)',
},
},
]);
================================================
FILE: examples/webpack-react/src/App.tsx
================================================
import { sprinkles } from './sprinkles.css';
import * as styles from './App.css';
export const App = () => (
<div
className={sprinkles({
background: {
lightMode: 'green-500',
darkMode: 'gray-900',
},
height: '100vh',
width: '100vw',
display: 'flex',
placeItems: 'center',
padding: '6x',
})}
>
<div className={styles.card}>
<div
className={sprinkles({
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: {
mobile: '5x',
desktop: '6x',
},
})}
>
<h1
className={sprinkles({
fontFamily: 'body',
textAlign: 'center',
typeSize: {
mobile: '4x',
tablet: '4x',
desktop: '5x',
},
})}
>
<span role="img" aria-label="Waving hand">
👋
</span>
<span role="img" aria-label="vanilla-extract logo">
🧁
</span>
<span role="img" aria-label="Sprinkles logo">
🍨
</span>
</h1>
<h2
className={sprinkles({
fontFamily: 'body',
color: {
lightMode: 'green-700',
darkMode: 'green-50',
},
textAlign: 'center',
typeSize: {
mobile: '2x',
tablet: '3x',
desktop: '4x',
},
})}
>
Hello from vanilla-extract and Sprinkles
</h2>
</div>
</div>
</div>
);
================================================
FILE: examples/webpack-react/src/global.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body, body *', {
all: 'unset',
boxSizing: 'border-box',
});
================================================
FILE: examples/webpack-react/src/index.tsx
================================================
import { render } from 'react-dom';
import './global.css';
import { App } from './App';
const root = document.createElement('div');
document.body.appendChild(root);
render(<App />, root);
================================================
FILE: examples/webpack-react/src/sprinkles.css.ts
================================================
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
import { vars } from './vars.css';
const responsiveProperties = defineProperties({
conditions: {
mobile: {},
tablet: { '@media': 'screen and (min-width: 768px)' },
desktop: { '@media': 'screen and (min-width: 1024px)' },
},
defaultCondition: 'mobile',
properties: {
display: ['none', 'flex'],
flexDirection: ['row', 'column'],
alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
justifyContent: ['stretch', 'flex-start', 'center', 'flex-end'],
gap: vars.space,
paddingTop: vars.space,
paddingBottom: vars.space,
paddingLeft: vars.space,
paddingRight: vars.space,
width: ['100vw'],
height: ['100vh'],
borderRadius: vars.borderRadius,
fontFamily: vars.fontFamily,
fontSize: vars.fontSize,
lineHeight: vars.lineHeight,
textAlign: ['center'],
},
shorthands: {
padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
paddingX: ['paddingLeft', 'paddingRight'],
paddingY: ['paddingTop', 'paddingBottom'],
placeItems: ['alignItems', 'justifyContent'],
typeSize: ['fontSize', 'lineHeight'],
},
});
const colorModeProperties = defineProperties({
conditions: {
lightMode: {},
darkMode: { '@media': '(prefers-color-scheme: dark)' },
},
defaultCondition: 'lightMode',
properties: {
color: vars.color,
background: vars.color,
},
});
export const sprinkles = createSprinkles(
responsiveProperties,
colorModeProperties,
);
================================================
FILE: examples/webpack-react/src/vars.css.ts
================================================
import { createGlobalTheme } from '@vanilla-extract/css';
import { modularScale } from 'polished';
import colors from 'tailwindcss/colors';
const createScale = (ratio: number, base: number) => (steps: number) =>
`${modularScale(steps, base, ratio)}px`;
const spaceScale = createScale(1.4, 4);
const fontSizeScale = createScale(1.3, 16);
const lineHeightScale = createScale(1.25, 24);
const borderRadiusScale = createScale(1.5, 4);
export const vars = createGlobalTheme(':root', {
space: {
none: '0',
'0x': spaceScale(0),
'1x': spaceScale(1),
'2x': spaceScale(2),
'3x': spaceScale(3),
'4x': spaceScale(4),
'5x': spaceScale(5),
'6x': spaceScale(6),
'7x': spaceScale(7),
'8x': spaceScale(8),
},
color: {
white: '#fff',
'gray-50': colors.gray[50],
'gray-100': colors.gray[100],
'gray-200': colors.gray[200],
'gray-300': colors.gray[300],
'gray-400': colors.gray[400],
'gray-500': colors.gray[500],
'gray-600': colors.gray[600],
'gray-700': colors.gray[700],
'gray-800': colors.gray[800],
'gray-900': colors.gray[900],
'green-50': colors.emerald[50],
'green-100': colors.emerald[100],
'green-200': colors.emerald[200],
'green-300': colors.emerald[300],
'green-400': colors.emerald[400],
'green-500': colors.emerald[500],
'green-600': colors.emerald[600],
'green-700': colors.emerald[700],
'green-800': colors.emerald[800],
'green-900': colors.emerald[900],
},
borderRadius: {
'0x': borderRadiusScale(0),
'1x': borderRadiusScale(1),
'2x': borderRadiusScale(2),
'3x': borderRadiusScale(3),
'4x': borderRadiusScale(4),
'5x': borderRadiusScale(5),
full: '99999px',
},
fontFamily: {
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
},
fontSize: {
'0x': fontSizeScale(0),
'1x': fontSizeScale(1),
'2x': fontSizeScale(2),
'3x': fontSizeScale(3),
'4x': fontSizeScale(4),
'5x': fontSizeScale(5),
},
lineHeight: {
'0x': lineHeightScale(0),
'1x': lineHeightScale(1),
'2x': lineHeightScale(2),
'3x': lineHeightScale(3),
'4x': lineHeightScale(4),
'5x': lineHeightScale(5),
},
});
================================================
FILE: examples/webpack-react/webpack.config.js
================================================
const path = require('path');
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: path.join(__dirname, './src/index.tsx'),
mode: 'development',
resolve: {
extensions: ['.js', '.json', '.ts', '.tsx'],
},
devtool: 'source-map',
devServer: {
allowedHosts: 'all',
},
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
'@babel/preset-typescript',
['@babel/preset-react', { runtime: 'automatic' }],
[
'@babel/preset-env',
{ targets: { node: 14 }, modules: false },
],
],
},
},
],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin(),
new VanillaExtractPlugin(),
],
stats: 'minimal',
};
================================================
FILE: fixtures/features/CHANGELOG.md
================================================
# @fixtures/features
## 0.0.31
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/dynamic@2.1.2
## 0.0.30
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/dynamic@2.1.2
## 0.0.29
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/dynamic@2.1.1
## 0.0.28
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/dynamic@2.1.1
- @vanilla-extract/css@1.15.2
## 0.0.27
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.26
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.25
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.24
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.23
### Patch Changes
- Updated dependencies [[`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839), [`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839), [`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/dynamic@2.1.0
- @vanilla-extract/css@1.14.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.21
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.19
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.18
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.17
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.16
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.15
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.14
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/dynamic@2.0.3
## 0.0.13
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.12
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.11
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.10
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.9
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.8
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.7
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.6
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/dynamic@2.0.2
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/dynamic@2.0.1
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/features/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/features/package.json
================================================
{
"name": "@fixtures/features",
"version": "0.0.31",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/dynamic": "workspace:^"
}
}
================================================
FILE: fixtures/features/src/features.css.ts
================================================
import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
export const mergedStyle = style([
{ height: 50, ':after': { display: 'block', content: '"Below 700px"' } },
{
'@media': {
'screen and (min-width: 700px)': {
':after': { content: '"Above 700px"' },
},
},
},
{
'@media': {
'screen and (min-width: 700px)': {
color: 'plum',
},
},
},
]);
export const styleWithComposition = style([
{ backgroundColor: 'powderblue' },
mergedStyle,
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
]);
export const styleWithNestedComposition = style([
{ backgroundColor: 'powderblue' },
[mergedStyle],
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
]);
export const styleVariantsWithComposition = styleVariants({
variant: [
{ backgroundColor: 'powderblue' },
mergedStyle,
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
],
});
export const styleVariantsWithMappedComposition = styleVariants(
{ variant: 'slategray' },
(backgroundColor) => [
{ backgroundColor: 'powderblue' },
mergedStyle,
{ selectors: { '&:hover': { backgroundColor } } },
],
);
export const compositionOnly = style([mergedStyle, styleWithComposition]);
// Force composition for use in selector
export const styleCompositionInSelector = style([
style({ color: 'white' }),
style({ backgroundColor: 'black' }),
]);
globalStyle(`body ${styleCompositionInSelector}`, {
fontSize: '24px',
});
export const styleVariantsCompositionInSelector = styleVariants({
variant: [style({ color: 'white' }), style({ backgroundColor: 'black' })],
});
globalStyle(`body ${styleVariantsCompositionInSelector.variant}`, {
fontSize: '24px',
});
export const styleWithStartingStyle = style({
backgroundColor: 'black',
'@starting-style': {
backgroundColor: 'white',
},
});
================================================
FILE: fixtures/features/src/html.ts
================================================
import * as styles from './features.css';
import testNodes from '../test-nodes.json';
export default `
<div id="${testNodes.mergedStyle}" class="${styles.mergedStyle}">Merged style</div>
<div id="${testNodes.styleWithComposition}" class="${styles.styleWithComposition}">Style with composition</div>
<div id="${testNodes.styleWithNestedComposition}" class="${styles.styleWithNestedComposition}">Style with nested composition</div>
<div id="${testNodes.styleVariantsWithComposition}" class="${styles.styleVariantsWithComposition.variant}">Style variants with composition</div>
<div id="${testNodes.styleVariantsWithMappedComposition}" class="${styles.styleVariantsWithMappedComposition.variant}">Style variants with mapped composition</div>
<div id="${testNodes.compositionOnly}" class="${styles.compositionOnly}">Composition only</div>
<div id="${testNodes.styleCompositionInSelector}" class="${styles.styleCompositionInSelector}">Style composition in selector</div>
<div id="${testNodes.styleVariantsCompositionInSelector}" class="${styles.styleVariantsCompositionInSelector.variant}">Style variants composition in selector</div>
<div id="${testNodes.styleWithStartingStyle}" class="${styles.styleWithStartingStyle}">Style with @starting-style rule</div>
`;
// @ts-expect-error Vite env not defined
if (import.meta.hot) {
// @ts-expect-error Vite env not defined
import.meta.hot.accept();
}
================================================
FILE: fixtures/features/src/index.ts
================================================
import html from './html';
function render() {
document.body.innerHTML = html;
}
render();
================================================
FILE: fixtures/features/test-nodes.json
================================================
{
"mergedStyle": "mergedStyle",
"styleWithComposition": "styleWithComposition",
"styleWithNestedComposition": "styleWithNestedComposition",
"styleVariantsWithComposition": "styleVariantsWithComposition",
"styleVariantsWithMappedComposition": "styleVariantsWithMappedComposition",
"compositionOnly": "compositionOnly",
"styleCompositionInSelector": "styleCompositionInSelector",
"styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector",
"styleWithStartingStyle": "styleWithStartingStyle"
}
================================================
FILE: fixtures/layers/CHANGELOG.md
================================================
# @fixtures/layers
## 0.0.14
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
## 0.0.13
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
## 0.0.12
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
## 0.0.11
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
## 0.0.10
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.9
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.8
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.7
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.6
### Patch Changes
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.4
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.3
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.2
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
================================================
FILE: fixtures/layers/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Layers</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/layers/package.json
================================================
{
"name": "@fixtures/layers",
"version": "0.0.14",
"main": "src/index.ts",
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: fixtures/layers/src/index.ts
================================================
import { link, pink } from './styles.css';
const html = String.raw;
document.body.innerHTML = html`
<main>
<p>
<a href="#">This link</a> should be <b>red</b> on mobile, green on
desktop.
</p>
<p>
<a href="#" class=${link}>This link with class of <code>link</code></a>
should be <b>blue</b> on mobile, green on desktop.
</p>
<p>
<a href="#" class=${pink}>This link with class of <code>pink</code></a>
should be <b>pink</b> on mobile, green on desktop.
</p>
</main>
`;
================================================
FILE: fixtures/layers/src/styles.css.ts
================================================
import { style, globalStyle, layer, globalLayer } from '@vanilla-extract/css';
/*
The resulting layer order:
1. lib
2. base
3. typography (when above 600px)
4. utilities
5. typography (when below 600px)
This will make links red/blue/pink when below 600px and green when above 600px.
*/
const typography = 'typography'; // this layer is defined conditionally
const lib = globalLayer('lib');
const base = layer({ parent: lib });
globalStyle('a', {
'@media': {
'screen and (min-width: 600px)': {
'@layer': {
[typography]: {
color: 'green', // styles *all* links
fontSize: '1.5rem',
},
},
},
},
'@layer': {
[base]: {
fontWeight: 800,
color: 'red',
},
},
});
export const link = style({
'@layer': {
[base]: {
color: 'blue',
},
},
});
const utilities = layer({ parent: lib });
export const pink = style({
'@layer': {
[utilities]: {
color: 'hotpink', // styles *all* .pink's
},
},
});
globalLayer(typography);
================================================
FILE: fixtures/low-level/CHANGELOG.md
================================================
# @fixtures/low-level
## 0.0.31
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
## 0.0.30
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
## 0.0.29
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
## 0.0.28
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
## 0.0.27
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.26
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.25
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.24
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.23
### Patch Changes
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.21
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.19
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.18
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.17
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.16
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.15
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.14
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
## 0.0.13
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.12
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.11
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.10
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.9
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.8
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.7
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.6
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/low-level/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/low-level/package.json
================================================
{
"name": "@fixtures/low-level",
"version": "0.0.31",
"main": "src/index.ts",
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: fixtures/low-level/src/index.ts
================================================
import { block, container } from './styles.css';
import testNodes from '../test-nodes.json';
document.body.innerHTML = `
<div class="${container}">
<div id="${testNodes.block}" class="${block}">
I'm a block
</div>
</div>
`;
// @ts-expect-error Vite env not defined
if (import.meta.hot) {
// @ts-expect-error Vite env not defined
import.meta.hot.accept();
}
================================================
FILE: fixtures/low-level/src/styles.css.ts
================================================
import { style, createVar, createContainer } from '@vanilla-extract/css';
const color = createVar();
const myContainer = createContainer('my-container');
export const container = style({
containerType: 'size',
containerName: myContainer,
width: 500,
});
export const block = style({
vars: {
[color]: 'blue',
},
backgroundColor: color,
padding: 20,
'@media': {
'screen and (min-width: 200px)': {
'@container': {
[`${myContainer} (min-width: 400px)`]: {
color: 'white',
},
},
},
},
});
================================================
FILE: fixtures/low-level/test-nodes.json
================================================
{
"block": "block"
}
================================================
FILE: fixtures/next-12-pages-router/CHANGELOG.md
================================================
# @fixtures/next-pages-router
## 0.0.7
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @fixtures/features@0.0.31
- @fixtures/recipes@0.0.36
- @fixtures/sprinkles@0.0.36
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
## 0.0.6
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
- @fixtures/features@0.0.30
- @fixtures/recipes@0.0.35
- @fixtures/sprinkles@0.0.35
## 0.0.5
### Patch Changes
- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:
- @vanilla-extract/recipes@0.5.4
- @fixtures/recipes@0.0.34
## 0.0.4
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @fixtures/features@0.0.29
- @fixtures/recipes@0.0.33
- @fixtures/sprinkles@0.0.34
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/sprinkles@1.6.2
## 0.0.3
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/css@1.15.2
- @fixtures/sprinkles@0.0.33
- @fixtures/features@0.0.28
- @fixtures/recipes@0.0.32
## 0.0.2
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
- @fixtures/features@0.0.27
- @fixtures/recipes@0.0.31
- @fixtures/sprinkles@0.0.32
## 0.0.1
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
- @fixtures/features@0.0.26
- @fixtures/recipes@0.0.30
- @fixtures/sprinkles@0.0.31
================================================
FILE: fixtures/next-12-pages-router/next.config.js
================================================
const {
createVanillaExtractPlugin,
} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const config = withVanillaExtract({
// we need to differentiate build and dev folders
// so they don't overwrite eachother when running tests
distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',
experimental: {
externalDir: true,
},
onDemandEntries: {
// Make sure entries are not getting disposed.
maxInactiveAge: 1000 * 60 * 60,
},
});
module.exports = config;
================================================
FILE: fixtures/next-12-pages-router/package.json
================================================
{
"name": "@fixtures/next-12-pages-router",
"description": "Next pages router fixtures",
"version": "0.0.7",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"clean:dev": "rm -rf .next",
"clean:prod": "rm -rf dist"
},
"dependencies": {
"@fixtures/features": "workspace:*",
"@fixtures/recipes": "workspace:*",
"@fixtures/sprinkles": "workspace:*",
"@vanilla-extract/css": "workspace:*",
"@vanilla-extract/recipes": "workspace:*",
"@vanilla-extract/sprinkles": "workspace:*",
"next": "12.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/next-plugin": "workspace:*",
"@vanilla-extract/webpack-plugin": "workspace:*"
},
"browserslist": [
">0.3%",
"ie 11",
"safari 4",
"not op_mini all"
]
}
================================================
FILE: fixtures/next-12-pages-router/src/pages/features/index.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
<span id="features" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-12-pages-router/src/pages/index.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
<Link href="/sprinkles">sprinkles</Link>
<br />
<Link href="/recipes">recipes</Link>
<br />
<Link href="/features">features</Link>
</>
);
}
================================================
FILE: fixtures/next-12-pages-router/src/pages/recipes/index.tsx
================================================
import html from '@fixtures/recipes/src/html';
export default function Recipes() {
return (
<>
<span id="recipes" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-12-pages-router/src/pages/sprinkles/index.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
<span id="sprinkles" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-12-pages-router/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"strictNullChecks": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
================================================
FILE: fixtures/next-13-app-router/CHANGELOG.md
================================================
# @fixtures/next-app-router
## 0.0.7
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @fixtures/features@0.0.31
- @fixtures/recipes@0.0.36
- @fixtures/sprinkles@0.0.36
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
## 0.0.6
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/recipes@0.5.5
- @vanilla-extract/sprinkles@1.6.3
- @fixtures/features@0.0.30
- @fixtures/recipes@0.0.35
- @fixtures/sprinkles@0.0.35
## 0.0.5
### Patch Changes
- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:
- @vanilla-extract/recipes@0.5.4
- @fixtures/recipes@0.0.34
## 0.0.4
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @fixtures/features@0.0.29
- @fixtures/recipes@0.0.33
- @fixtures/sprinkles@0.0.34
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/sprinkles@1.6.2
## 0.0.3
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/css@1.15.2
- @fixtures/sprinkles@0.0.33
- @fixtures/features@0.0.28
- @fixtures/recipes@0.0.32
## 0.0.2
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
- @fixtures/features@0.0.27
- @fixtures/recipes@0.0.31
- @fixtures/sprinkles@0.0.32
## 0.0.1
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
- @fixtures/features@0.0.26
- @fixtures/recipes@0.0.30
- @fixtures/sprinkles@0.0.31
================================================
FILE: fixtures/next-13-app-router/next.config.js
================================================
const {
createVanillaExtractPlugin,
} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const config = withVanillaExtract({
// we need to differentiate build and dev folders
// so they don't overwrite eachother when running tests
distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',
experimental: {
externalDir: true,
},
onDemandEntries: {
// Make sure entries are not getting disposed.
maxInactiveAge: 1000 * 60 * 60,
},
});
module.exports = config;
================================================
FILE: fixtures/next-13-app-router/package.json
================================================
{
"name": "@fixtures/next-13-app-router",
"description": "Next app router fixtures",
"version": "0.0.7",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"clean:dev": "rm -rf .next",
"clean:prod": "rm -rf dist"
},
"dependencies": {
"@fixtures/features": "workspace:*",
"@fixtures/recipes": "workspace:*",
"@fixtures/sprinkles": "workspace:*",
"@vanilla-extract/css": "workspace:*",
"@vanilla-extract/recipes": "workspace:*",
"@vanilla-extract/sprinkles": "workspace:*",
"next": "npm:next@13.5.11",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/next-plugin": "workspace:*",
"@vanilla-extract/webpack-plugin": "workspace:*"
},
"browserslist": [
">0.3%",
"ie 11",
"safari 4",
"not op_mini all"
]
}
================================================
FILE: fixtures/next-13-app-router/src/app/features/page.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
<span id="features" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-13-app-router/src/app/layout.tsx
================================================
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
================================================
FILE: fixtures/next-13-app-router/src/app/page.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
<Link href="/sprinkles">sprinkles</Link>
<br />
<Link href="/recipes">recipes</Link>
<br />
<Link href="/features">features</Link>
</>
);
}
================================================
FILE: fixtures/next-13-app-router/src/app/recipes/page.tsx
================================================
import html from '@fixtures/recipes/src/html';
export default function Recipes() {
return (
<>
<span id="recipes" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-13-app-router/src/app/sprinkles/page.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
<span id="sprinkles" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-13-app-router/tsconfig.json
================================================
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
],
"strictNullChecks": true,
"module": "esnext"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"dist/types/**/*.ts"
],
"exclude": ["node_modules"]
}
================================================
FILE: fixtures/next-16-app-pages-router/next.config.ts
================================================
import { NextConfig } from 'next';
import { createVanillaExtractPlugin } from './next-plugin/dist/vanilla-extract-next-plugin.cjs.js';
const withVanillaExtract = createVanillaExtractPlugin({
unstable_turbopack: { mode: 'auto' },
});
export const config: NextConfig = {
distDir: process.env.NEXT_DIST_DIR || '.next',
experimental: { externalDir: true },
onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 },
transpilePackages: ['@fixtures/sprinkles/src/html'],
devIndicators: false,
};
export default withVanillaExtract(config);
================================================
FILE: fixtures/next-16-app-pages-router/package.json
================================================
{
"name": "@fixtures/next-16-app-pages-router",
"version": "0.0.1",
"private": true,
"description": "Next 16 fixture with app + pages routers; supports webpack and turbopack builds",
"scripts": {
"dev-webpack": "NEXT_DIST_DIR=.next/webpack next dev --webpack",
"dev-turbo": "NEXT_DIST_DIR=.next/turbo next dev --turbo",
"build-webpack": "NEXT_DIST_DIR=dist/webpack next build --webpack",
"start-webpack": "NEXT_DIST_DIR=dist/webpack next start",
"build-turbo": "NEXT_DIST_DIR=dist/turbo next build --turbo",
"start-turbo": "NEXT_DIST_DIR=dist/turbo next start",
"clean:dev": "rm -rf .next",
"clean:prod": "rm -rf dist"
},
"dependencies": {
"@fixtures/features": "workspace:*",
"@fixtures/recipes": "workspace:*",
"@fixtures/sprinkles": "workspace:*",
"@vanilla-extract/css": "workspace:*",
"@vanilla-extract/recipes": "workspace:*",
"@vanilla-extract/sprinkles": "workspace:*",
"next": "npm:next@^16.0.0",
"react": "npm:react@^19.2.0",
"react-dom": "npm:react-dom@^19.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@vanilla-extract/next-plugin": "workspace:*",
"@vanilla-extract/webpack-plugin": "workspace:*"
}
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/creepster/page.tsx
================================================
import { creepsterText } from '../../styles/creepster.css';
export default function CreepsterPage() {
return (
<div className={creepsterText}>
This text should look scary (Creepster Font)
</div>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/a-plain.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/a.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
export const a = style({
border: '1px solid black',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/b-plain.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/b.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
export const b = style({
border: '1px solid red',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c-plain.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
globalStyle('body', {
backgroundColor: '#0cdbcd',
});
export const c = style({
border: '1px solid black',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/page.tsx
================================================
import './a-plain.css';
import { a } from './a.css';
import './b-plain.css';
import { b } from './b.css';
import './extra/c-plain.css';
import { c } from './extra/c.css';
export default function DuplicationTestPage() {
return (
<div>
<div className={a}>
<div className={b}>
<div className={c}>duplication test</div>
</div>
</div>
</div>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/features/page.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
<span id="features" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/page.tsx
================================================
import { RedBox, BlueText } from './source.css';
export default function Page() {
return (
<div>
<h1>Function Serializer Test</h1>
<RedBox>
This should be a red box with <BlueText>blue text</BlueText> inside
</RedBox>
</div>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/runtime.tsx
================================================
export function runtimeStyled<Tag extends keyof JSX.IntrinsicElements>(
tag: Tag,
className: string,
) {
return function Component(props: React.ComponentProps<Tag>) {
const Element = tag as any;
return (
<Element
{...props}
className={[props.className, className].filter(Boolean).join(' ')}
/>
);
};
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/source.css.ts
================================================
import { styled } from './styled';
export const RedBox = styled('div', {
backgroundColor: 'red',
color: 'white',
padding: '20px',
});
export const BlueText = styled('span', {
color: 'blue',
fontWeight: 'bold',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/styled.ts
================================================
import { addFunctionSerializer } from '@vanilla-extract/css/functionSerializer';
import { style, type StyleRule } from '@vanilla-extract/css';
import { runtimeStyled } from './runtime';
import React from 'react';
if (React.version.includes('canary')) {
throw new Error(
'detected vendored React in styles, this will cause errors in some projects',
);
}
export function styled<Tag extends keyof JSX.IntrinsicElements>(
tag: Tag,
styles: StyleRule,
) {
const className = style(styles);
const args = [tag, className] as const;
const Component = runtimeStyled(...args);
addFunctionSerializer(Component, {
importPath: './runtime',
importName: 'runtimeStyled',
args,
});
return Component;
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/layout.tsx
================================================
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/next-font/page.tsx
================================================
import * as directFonts from '../../styles/fonts';
import { pickedValues } from '../../styles/nextFont.css';
export default function NextFontChecks() {
const pairs: Array<
[string, string | number | undefined, string | number | undefined]
> = [];
for (const [name, vePicked] of Object.entries(pickedValues)) {
const direct = directFonts[name as keyof typeof directFonts];
const style = direct?.style || {};
pairs.push([`${name} family`, vePicked.fontFamily, style.fontFamily]);
pairs.push([`${name} weight`, vePicked.fontWeight, style.fontWeight]);
pairs.push([`${name} style`, vePicked.fontStyle, style.fontStyle]);
}
pairs.sort((a, b) => a[0].localeCompare(b[0]));
for (const [name, fromVe, direct] of pairs) {
if (String(fromVe) !== String(direct)) {
throw new Error(
`[next-font] mismatch for ${name}:\n${String(fromVe)} !==\n${String(
direct,
)}`,
);
}
}
return (
<div id="next-font-checks-16">
<h2>next 16 next/font comparisons</h2>
<ul>
{pairs.map(([name, fromVe, direct]) => (
<li key={name} data-name={name} data-ve={fromVe} data-direct={direct}>
{name}: {fromVe}
</li>
))}
</ul>
</div>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/next-image/image.css.ts
================================================
import logo from './logo.png';
import { style } from '@vanilla-extract/css';
import type { StaticImageData } from 'next/image';
// types are funky because of our monorepo setup
const withCast = logo as unknown as StaticImageData;
export const imageStyle = style({
backgroundImage: `url(${withCast.src})`,
width: `${withCast.width}px`,
height: `${withCast.height}px`,
border: '1px solid red',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/app/next-image/page.tsx
================================================
import { imageStyle } from './image.css';
export default function NextImagePage() {
return <div className={imageStyle}>Next Image Page</div>;
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/page.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
<Link href="/sprinkles">sprinkles</Link>
<br />
<Link href="/recipes">recipes</Link>
<br />
<Link href="/features">features</Link>
<br />
<Link href="/function-serializer">function serializer</Link>
<br />
<Link href="/creepster">creepster test</Link>
<br />
<Link href="/next-font">next font</Link>
<br />
<Link href="/duplication-test">duplication test</Link>
<br />
<Link href="/next-image">next image</Link>
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/recipes/page.tsx
================================================
import html from '@fixtures/recipes/src/html';
export default function Recipes() {
return (
<>
<span id="recipes" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/app/sprinkles/page.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
<span id="sprinkles" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/features/index.tsx
================================================
import html from '@fixtures/features/src/html';
export default function Features() {
return (
<>
<span id="features" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/index.tsx
================================================
import Link from 'next/link';
export default function Home() {
return (
<>
<Link href="/pages-router/sprinkles">sprinkles</Link>
<br />
<Link href="/pages-router/recipes">recipes</Link>
<br />
<Link href="/pages-router/features">features</Link>
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/recipes/index.tsx
================================================
import html from '@fixtures/recipes/src/html';
export default function Recipes() {
return (
<>
<span id="recipes" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/sprinkles/index.tsx
================================================
import html from '@fixtures/sprinkles/src/html';
export default function Sprinkles() {
return (
<>
<span id="sprinkles" />
<div dangerouslySetInnerHTML={{ __html: html }} />
</>
);
}
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/creepster-font.ts
================================================
import { Creepster } from 'next/font/google';
export const creepster = Creepster({
weight: '400',
subsets: ['latin'],
display: 'block',
preload: true,
});
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/creepster.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { creepster } from './creepster-font';
export const creepsterText = style({
fontFamily: creepster.style.fontFamily,
fontSize: '40px',
color: 'red',
});
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/fonts.ts
================================================
// --- 1. Imports ---
// Test weirdly named imports for both local and google fonts.
import {
Noto_Serif as NotoSerif,
Roboto as R,
Roboto_Flex as RF,
Inter as Weird_Renamed_Font$8a_,
} from 'next/font/google';
import weird_renamed_local$3_ from 'next/font/local';
// =================================================================
// next/font/local (using weird_renamed_local$3_)
// =================================================================
// --- 2. Local: Variable Name Edge Cases (Export) ---
// The import name is already tested. This tests weird export names.
export const localSimple = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
preload: false,
});
export const $local_weird_EXPORT_name_ = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
fallback: ['system-ui'],
preload: false,
});
// --- 3. Local: Fallback Prop ---
export const localFallbackOmitted = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
// fallback is omitted
preload: false,
});
export const localFallbackSingleArray = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
fallback: ['system-ui'],
preload: false,
});
export const localFallbackMultiArray = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
fallback: ['Times New Roman', 'Gill Sans', 'emoji'],
preload: false,
});
// --- 4. Local: Style Prop ---
export const localStyleOmitted = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
// style is omitted
preload: false,
});
export const localStyleSingle = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
style: 'italic',
preload: false,
});
// --- 5. Local: Weight Prop ---
export const localWeightOmitted = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
// weight is omitted
preload: false,
});
export const localWeightSingle = weird_renamed_local$3_({
src: './fonts/Inter-Regular.woff2',
weight: '400',
preload: false,
});
// =================================================================
// next/font/google (using Weird_Renamed_Font$8a_)
// =================================================================
// --- 6. Google: Variable Name Edge Cases (Export) ---
// The import name is already tested. This tests weird export names.
export const googleSimple = Weird_Renamed_Font$8a_({
subsets: ['latin'],
preload: false,
});
export const $google_weird_EXPORT_name_ = Weird_Renamed_Font$8a_({
subsets: ['latin'],
fallback: ['system-ui'],
preload: false,
});
// --- 7. Google: Fallback Prop ---
export const googleFallbackOmitted = Weird_Renamed_Font$8a_({
subsets: ['latin'],
// fallback is omitted
preload: false,
});
export const googleFallbackSingleArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
fallback: ['system-ui'],
preload: false,
});
export const googleFallbackMultiArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
fallback: ['Times New Roman', 'Gill Sans', 'emoji'],
preload: false,
});
// --- 8. Google: Style Prop ---
export const googleStyleOmitted = Weird_Renamed_Font$8a_({
subsets: ['latin'],
// style is omitted
preload: false,
});
export const googleStyleSingle = Weird_Renamed_Font$8a_({
subsets: ['latin'],
style: 'italic',
preload: false,
});
export const googleStyleArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
style: ['italic', 'normal'],
preload: false,
});
// --- 9. Google: Weight Prop ---
export const googleWeightOmitted = Weird_Renamed_Font$8a_({
subsets: ['latin'],
// weight is omitted
preload: false,
});
export const googleWeightSingle = Weird_Renamed_Font$8a_({
subsets: ['latin'],
weight: '400',
preload: false,
});
export const googleWeightVariable = Weird_Renamed_Font$8a_({
subsets: ['latin'],
weight: 'variable',
preload: false,
});
export const googleWeightArray = Weird_Renamed_Font$8a_({
subsets: ['latin'],
weight: ['400', '700', '900'],
preload: false,
});
// intentionally odd local variable name to exercise transform edge-cases
export const __Local_Font = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2', weight: '400' }],
fallback: ['system-ui'],
preload: false,
});
// renamed imports
export const _Roboto = R({
weight: '400',
subsets: ['latin'],
fallback: ['system-ui', 'skibidi', 'third font'],
style: ['italic', 'normal'],
preload: false,
});
export const _Flex = RF({
subsets: ['latin', 'greek'],
weight: ['200', '300'],
adjustFontFallback: false,
style: 'normal',
fallback: ['system-ui'],
preload: false,
});
// style properties are consumed dynamically in nextFont.css.ts via pickedValues
// mirror additional cases from next-16
export const _localMultiFallback = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2' }],
fallback: ['system-ui', 'ui-monospace', 'third font'],
preload: false,
});
export const _localExplicit = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2' }],
weight: '400',
style: 'italic',
fallback: ['Times New Roman', 'Gill Sans'],
preload: false,
});
export const _localDupFallback = weird_renamed_local$3_({
src: [{ path: './fonts/Inter-Regular.woff2' }],
fallback: ['system-ui', 'system-ui', 'ui-serif', 'weird_font'],
preload: false,
});
export const _robotoDefaultStyle = R({
subsets: ['latin'],
fallback: ['serif'],
preload: false,
});
export const _robotoItalic = R({
subsets: ['latin'],
fallback: ['sans-serif'],
style: 'italic',
weight: '400',
preload: false,
});
export const _robotoMultiStyle = R({
subsets: ['latin'],
fallback: ['monospace'],
style: ['italic', 'normal'],
preload: false,
});
export const _robotoWeightStr = R({ weight: '400', preload: false });
export const _robotoWeightVar = R({ weight: 'variable', preload: false });
export const _notoSerif = NotoSerif({
subsets: ['latin'],
fallback: ['system-ui'],
preload: false,
});
export const _robotoFallbackSpaces = R({
subsets: ['latin'],
fallback: ['Times New Roman', 'Gill Sans', 'Avenir Next'],
preload: false,
});
export const _robotoDupFallback = R({
subsets: ['latin'],
fallback: ['system-ui', 'system-ui', 'ui-serif', 'weird_font'],
preload: false,
});
================================================
FILE: fixtures/next-16-app-pages-router/src/styles/nextFont.css.ts
================================================
import * as fonts from './fonts';
export const pickedValues = Object.fromEntries(
Object.entries(fonts).map(
([importName, { style }]) =>
[
importName,
{
fontFamily: style.fontFamily,
fontWeight: style.fontWeight,
fontStyle: style.fontStyle,
},
] as const,
),
) as Record<
keyof typeof fonts,
{
fontFamily: string;
fontWeight: number;
fontStyle: string;
}
>;
================================================
FILE: fixtures/next-16-app-pages-router/tsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2017",
"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",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
"**/*.mts",
"**/*.ts",
"**/*.tsx",
"dist/turbo/types/**/*.ts",
"dist/turbo/dev/types/**/*.ts",
"dist/webpack/types/**/*.ts",
"dist/webpack/dev/types/**/*.ts",
".next/turbo/types/**/*.ts",
".next/turbo/dev/types/**/*.ts",
".next/webpack/types/**/*.ts",
".next/webpack/dev/types/**/*.ts"
],
"exclude": ["node_modules"]
}
================================================
FILE: fixtures/react-library-example/package.json
================================================
{
"name": "@fixtures/react-library-example",
"description": "React design system library",
"version": "0.0.1",
"private": true,
"type": "module",
"main": "./dist/index.js",
"dependencies": {
"@vanilla-extract/css": "workspace:*",
"clsx": "^2.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19"
}
}
================================================
FILE: fixtures/react-library-example/src/button/button.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from '../styles/vars.css.js';
export const btn = style({
background: vars.color.background.brand,
borderRadius: vars.size.radius[200],
color: vars.color.text.brand,
...vars.typography.body.medium,
paddingBlock: vars.size.space[200],
paddingInline: vars.size.space[300],
});
================================================
FILE: fixtures/react-library-example/src/button/button.tsx
================================================
import clsx from 'clsx';
import * as styles from './button.css.js';
export default function Button({
className,
children,
type = 'button',
...props
}: React.ComponentProps<'button'>) {
return (
<button {...props} type={type} className={clsx(styles.btn, className)}>
{children}
</button>
);
}
================================================
FILE: fixtures/react-library-example/src/checkbox/checkbox.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from '../styles/vars.css.js';
export const label = style({
display: 'block',
...vars.typography.body.medium,
'::before': {
background: vars.color.background.brand,
borderColor: vars.color.border.default,
borderWidth: 1,
borderStyle: 'solid',
content: '',
borderRadius: vars.size.radius['200'],
marginRight: vars.size.space['300'],
},
});
export const input = style({
width: '1.5rem',
height: '1.5rem',
});
================================================
FILE: fixtures/react-library-example/src/checkbox/checkbox.tsx
================================================
import { useId } from 'react';
import clsx from 'clsx';
import * as styles from './checkbox.css.js';
export default function Radio({
children,
className,
id,
...props
}: React.ComponentProps<'input'> & { children: React.ReactNode }) {
const randomID = useId();
return (
<>
<input
{...props}
className={styles.input}
id={id ?? randomID}
type="checkbox"
/>
<label className={clsx(styles.label, className)} htmlFor={id ?? randomID}>
{children}
</label>
</>
);
}
================================================
FILE: fixtures/react-library-example/src/index.ts
================================================
// 1. Style reset
import './styles/reset.css.js';
// 2. Design library
export { default as Button } from './button/button.js';
export { default as Checkbox } from './checkbox/checkbox.js';
export { default as Radio } from './radio/radio.js';
// 3. Utility CSS should be last
import './styles/utility.css.js';
================================================
FILE: fixtures/react-library-example/src/radio/radio.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from '../styles/vars.css.js';
export const label = style({
display: 'block',
...vars.typography.body.medium,
'::before': {
background: vars.color.background.brand,
borderColor: vars.color.border.default,
borderWidth: 1,
borderStyle: 'solid',
content: '',
borderRadius: vars.size.radius.full,
marginRight: vars.size.space['300'],
},
});
export const input = style({
width: '1.5rem',
height: '1.5rem',
});
================================================
FILE: fixtures/react-library-example/src/radio/radio.tsx
================================================
import { useId } from 'react';
import clsx from 'clsx';
import * as styles from './radio.css.js';
export default function Radio({
children,
className,
id,
...props
}: React.ComponentProps<'input'> & { children: React.ReactNode }) {
const randomID = useId();
return (
<>
<input
{...props}
className={styles.input}
id={id ?? randomID}
type="radio"
/>
<label className={clsx(styles.label, className)} htmlFor={id ?? randomID}>
{children}
</label>
</>
);
}
================================================
FILE: fixtures/react-library-example/src/styles/reset.css.ts
================================================
import { globalStyle } from '@vanilla-extract/css';
globalStyle('html, body', {
fontSize: '100%',
height: '100%',
lineHeight: 1,
margin: 0,
});
================================================
FILE: fixtures/react-library-example/src/styles/utility.css.ts
================================================
import { style } from '@vanilla-extract/css';
import { vars } from './vars.css.js';
// Note: these aren’t meant to be intended as best practice over Sprinkles,
// these are only testing style() declarations loaded differently
export const mt100 = style({ marginTop: vars.size.space[100] });
export const mt200 = style({ marginTop: vars.size.space[200] });
export const mt300 = style({ marginTop: vars.size.space[300] });
export const mt400 = style({ marginTop: vars.size.space[400] });
================================================
FILE: fixtures/react-library-example/src/styles/vars.css.ts
================================================
import { createGlobalThemeContract, createTheme } from '@vanilla-extract/css';
/**
* Figma’s Simple Design System
* Licensed under Creative Commons Attribution 4.0
* @see https://www.figma.com/community/file/1380235722331273046
*/
export const vars = createGlobalThemeContract({
color: {
black: {
'100': 'color-black-100',
'200': 'color-black-200',
'300': 'color-black-300',
'400': 'color-black-400',
'500': 'color-black-500',
'600': 'color-black-600',
'700': 'color-black-700',
'800': 'color-black-800',
'900': 'color-black-900',
'1000': 'color-black-1000',
},
brand: {
'100': 'color-brand-100',
'200': 'color-brand-200',
'300': 'color-brand-300',
'400': 'color-brand-400',
'500': 'color-brand-500',
'600': 'color-brand-600',
'700': 'color-brand-700',
'800': 'color-brand-800',
'900': 'color-brand-900',
'1000': 'color-brand-1000',
},
gray: {
'100': 'color-gray-100',
'200': 'color-gray-200',
'300': 'color-gray-300',
'400': 'color-gray-400',
'500': 'color-gray-500',
'600': 'color-gray-600',
'700': 'color-gray-700',
'800': 'color-gray-800',
'900': 'color-gray-900',
'1000': 'color-gray-1000',
},
green: {
'100': 'color-green-100',
'200': 'color-green-200',
'300': 'color-green-300',
'400': 'color-green-400',
'500': 'color-green-500',
'600': 'color-green-600',
'700': 'color-green-700',
'800': 'color-green-800',
'900': 'color-green-900',
'1000': 'color-green-1000',
},
pink: {
'100': 'color-pink-100',
'200': 'color-pink-200',
'300': 'color-pink-300',
'400': 'color-pink-400',
'500': 'color-pink-500',
'600': 'color-pink-600',
'700': 'color-pink-700',
'800': 'color-pink-800',
'900': 'color-pink-900',
'1000': 'color-pink-1000',
},
red: {
'100': 'color-red-100',
'200': 'color-red-200',
'300': 'color-red-300',
'400': 'color-red-400',
'500': 'color-red-500',
'600': 'color-red-600',
'700': 'color-red-700',
'800': 'color-red-800',
'900': 'color-red-900',
'1000': 'color-red-1000',
},
slate: {
'100': 'color-slate-100',
'200': 'color-slate-200',
'300': 'color-slate-300',
'400': 'color-slate-400',
'500': 'color-slate-500',
'600': 'color-slate-600',
'700': 'color-slate-700',
'800': 'color-slate-800',
'900': 'color-slate-900',
'1000': 'color-slate-1000',
},
white: {
'100': 'color-white-100',
'200': 'color-white-200',
'300': 'color-white-300',
'400': 'color-white-400',
'500': 'color-white-500',
'600': 'color-white-600',
'700': 'color-white-700',
'800': 'color-white-800',
'900': 'color-white-900',
'1000': 'color-white-1000',
},
yellow: {
'100': 'color-yellow-100',
'200': 'color-yellow-200',
'300': 'color-yellow-300',
'400': 'color-yellow-400',
'500': 'color-yellow-500',
'600': 'color-yellow-600',
'700': 'color-yellow-700',
'800': 'color-yellow-800',
'900': 'color-yellow-900',
'1000': 'color-yellow-1000',
},
background: {
brand: 'color-background-brand-default',
default: 'color-background-default-default',
},
border: {
default: 'color-border-default-default',
},
text: {
brand: 'color-text-brand-default',
default: 'color-text-default-default',
},
},
size: {
blur: {
'100': 'size-blur-100',
},
depth: {
'0': 'size-depth-0',
'025': 'size-depth-025',
'100': 'size-depth-100',
'200': 'size-depth-200',
'400': 'size-depth-400',
'800': 'size-depth-800',
'1200': 'size-depth-1200',
negative025: 'size-depth-negative-025',
negative100: 'size-depth-negative-100',
negative200: 'size-depth-negative-200',
negative400: 'size-depth-negative-400',
negative800: 'size-depth-negative-800',
negative1200: 'size-depth-negative-1200',
},
icon: {
small: 'size-icon-small',
medium: 'size-icon-medium',
large: 'size-icon-large',
},
radius: {
'100': 'size-radius-100',
'200': 'size-radius-200',
'400': 'size-radius-400',
full: 'size-radius-full',
},
space: {
'0': 'size-space-0',
'050': 'size-space-050',
'100': 'size-space-100',
'150': 'size-space-150',
'200': 'size-space-200',
'300': 'size-space-300',
'400': 'size-space-400',
'600': 'size-space-600',
'800': 'size-space-800',
'1200': 'size-space-1200',
'1600': 'size-space-1600',
'2400': 'size-space-2400',
'4000': 'size-space-4000',
negative100: 'size-space-negative-100',
negative200: 'size-space-negative-200',
negative300: 'size-space-negative-300',
negative400: 'size-space-negative-400',
negative600: 'size-space-negative-600',
},
stroke: {
border: 'size-stroke-border',
focusRing: 'size-stroke-focus-ring',
},
},
typography: {
body: {
small: {
fontFamily: 'typography-body-small-font-family',
fontSize: 'typography-body-small-font-size',
fontWeight: 'typography-body-small-font-weight',
},
medium: {
fontFamily: 'typography-body-medium-font-family',
fontSize: 'typography-body-medium-font-size',
fontWeight: 'typography-body-medium-font-weight',
},
large: {
fontFamily: 'typography-body-large-font-family',
fontSize: 'typography-body-large-font-size',
fontWeight: 'typography-body-large-font-weight',
},
},
code: {
small: {
fontFamily: 'typography-code-small-font-family',
fontSize: 'typography-code-small-font-size',
fontWeight: 'typography-code-small-font-weight',
},
medium: {
fontFamily: 'typography-code-medium-font-family',
fontSize: 'typography-code-medium-font-size',
fontWeight: 'typography-code-medium-font-weight',
},
large: {
fontFamily: 'typography-code-large-font-family',
fontSize: 'typography-code-large-font-size',
fontWeight: 'typography-code-large-font-weight',
},
},
family: {
mono: 'typography-family-mono',
sans: 'typography-family-sans',
serif: 'typography-family-serif',
},
scale: {
'10': 'typography-scale-10',
'01': 'typography-scale-01',
'02': 'typography-scale-02',
'03': 'typography-scale-03',
'04': 'typography-scale-04',
'05': 'typography-scale-05',
'06': 'typography-scale-06',
'07': 'typography-scale-07',
'08': 'typography-scale-08',
'09': 'typography-scale-09',
},
weight: {
thin: 'typography-weight-thin',
extralight: 'typography-weight-extralight',
light: 'typography-weight-light',
regular: 'typography-weight-regular',
medium: 'typography-weight-medium',
semibold: 'typography-weight-semibold',
bold: 'typography-weight-bold',
extrabold: 'typography-weight-extrabold',
black: 'typography-weight-black',
},
},
});
createTheme(vars, {
color: {
black: {
'100':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.050980392156862744)',
'200':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.10196078431372549)',
'300':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.2)',
'400':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.4)',
'500':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.6980392156862745)',
'600':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8)',
'700':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8509803921568627)',
'800':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8980392156862745)',
'900':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.9490196078431372)',
'1000':
'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744)',
},
brand: {
'100':
'color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902)',
'200':
'color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255)',
'300':
'color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627)',
'400':
'color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254)',
'500':
'color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647)',
'600':
'color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666)',
'700':
'color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549)',
'800':
'color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313)',
'900':
'color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941)',
'1000':
'color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667)',
},
gray: {
'100':
'color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902)',
'200':
'color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255)',
'300':
'color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627)',
'400':
'color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254)',
'500':
'color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647)',
'600':
'color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666)',
'700':
'color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549)',
'800':
'color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313)',
'900':
'color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941)',
'1000':
'color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667)',
},
green: {
'100': 'color(srgb 0.9215686274509803 1 0.9333333333333333)',
'200':
'color(srgb 0.8117647058823529 0.9686274509803922 0.8274509803921568)',
'300':
'color(srgb 0.6862745098039216 0.9568627450980393 0.7764705882352941)',
'400':
'color(srgb 0.5215686274509804 0.8784313725490196 0.6392156862745098)',
'500':
'color(srgb 0.0784313725490196 0.6823529411764706 0.3607843137254902)',
'600': 'color(srgb 0 0.6 0.3176470588235294)',
'700': 'color(srgb 0 0.5019607843137255 0.2627450980392157)',
'800':
'color(srgb 0.00784313725490196 0.32941176470588235 0.17647058823529413)',
'900':
'color(srgb 0.00784313725490196 0.25098039215686274 0.13725490196078433)',
'1000':
'color(srgb 0.023529411764705882 0.17647058823529413 0.10588235294117647)',
},
pink: {
'100':
'color(srgb 0.9882352941176471 0.9450980392156862 0.9921568627450981)',
'200':
'color(srgb 0.9803921568627451 0.8823529411764706 0.9803921568627451)',
'300':
'color(srgb 0.9607843137254902 0.7529411764705882 0.9372549019607843)',
'400':
'color(srgb 0.9450980392156862 0.6196078431372549 0.8627450980392157)',
'500':
'color(srgb 0.9176470588235294 0.24705882352941178 0.7215686274509804)',
'600':
'color(srgb 0.8431372549019608 0.19607843137254902 0.6588235294117647)',
'700':
'color(srgb 0.7294117647058823 0.16470588235294117 0.5725490196078431)',
'800':
'color(srgb 0.5411764705882353 0.13333333333333333 0.43529411764705883)',
'900':
'color(srgb 0.3411764705882353 0.09411764705882353 0.2901960784313726)',
'1000':
'color(srgb 0.24705882352941178 0.08235294117647059 0.21176470588235294)',
},
red: {
'100':
'color(srgb 0.996078431372549 0.9137254901960784 0.9058823529411765)',
'200':
'color(srgb 0.9921568627450981 0.8274509803921568 0.8156862745098039)',
'300':
'color(srgb 0.9882352941176471 0.7019607843137254 0.6784313725490196)',
'400':
'color(srgb 0.9568627450980393 0.4666666666666667 0.41568627450980394)',
'500':
'color(srgb 0.9254901960784314 0.13333333333333333 0.12156862745098039)',
'600':
'color(srgb 0.7529411764705882 0.058823529411764705 0.047058823529411764)',
'700':
'color(srgb 0.5647058823529412 0.043137254901960784 0.03529411764705882)',
'800':
'color(srgb 0.4117647058823529 0.03137254901960784 0.027450980392156862)',
'900':
'color(srgb 0.30196078431372547 0.043137254901960784 0.0392156862745098)',
'1000':
'color(srgb 0.18823529411764706 0.023529411764705882 0.011764705882352941)',
},
slate: {
'100':
'color(srgb 0.9529411764705882 0.9529411764705882 0.9529411764705882)',
'200':
'color(srgb 0.8901960784313725 0.8901960784313725 0.8901960784313725)',
'300':
'color(srgb 0.803921568627451 0.803921568627451 0.803921568627451)',
'400':
'color(srgb 0.6980392156862745 0.6980392156862745 0.6980392156862745)',
'500':
'color(srgb 0.5803921568627451 0.5803921568627451 0.5803921568627451)',
'600':
'color(srgb 0.4627450980392157 0.4627450980392157 0.4627450980392157)',
'700':
'color(srgb 0.35294117647058826 0.35294117647058826 0.35294117647058826)',
'800':
'color(srgb 0.2627450980392157 0.2627450980392157 0.2627450980392157)',
'900':
'color(srgb 0.18823529411764706 0.18823529411764706 0.18823529411764706)',
'1000':
'color(srgb 0.1411764705882353 0.1411764705882353 0.1411764705882353)',
},
white: {
'100': 'color(srgb 1 1 1 / 0.050980392156862744)',
'200': 'color(srgb 1 1 1 / 0.10196078431372549)',
'300': 'color(srgb 1 1 1 / 0.2)',
'400': 'color(srgb 1 1 1 / 0.4)',
'500': 'color(srgb 1 1 1 / 0.6980392156862745)',
'600': 'color(srgb 1 1 1 / 0.8)',
'700': 'color(srgb 1 1 1 / 0.8509803921568627)',
'800': 'color(srgb 1 1 1 / 0.8980392156862745)',
'900': 'color(srgb 1 1 1 / 0.9490196078431372)',
'1000': 'color(srgb 1 1 1)',
},
yellow: {
'100': 'color(srgb 1 0.984313725490196 0.9215686274509803)',
'200': 'color(srgb 1 0.9450980392156862 0.7607843137254902)',
'300': 'color(srgb 1 0.9098039215686274 0.6392156862745098)',
'400':
'color(srgb 0.9098039215686274 0.7254901960784313 0.19215686274509805)',
'500': 'color(srgb 0.8980392156862745 0.6274509803921569 0)',
'600':
'color(srgb 0.7490196078431373 0.41568627450980394 0.00784313725490196)',
'700':
'color(srgb 0.592156862745098 0.3176470588235294 0.00784313725490196)',
'800':
'color(srgb 0.40784313725490196 0.17647058823529413 0.011764705882352941)',
'900':
'color(srgb 0.3215686274509804 0.1450980392156863 0.01568627450980392)',
'1000':
'color(srgb 0.25098039215686274 0.10588235294117647 0.00392156862745098)',
},
background: {
brand: vars.color.brand[800],
default: vars.color.white[1000],
},
border: {
default: vars.color.gray[300],
},
text: {
brand: vars.color.brand[800],
default: vars.color.gray[900],
},
},
size: {
blur: {
'100': '0.25rem',
},
depth: {
'0': '0',
'025': '0.0625rem',
'100': '0.25rem',
'200': '0.5rem',
'400': '1rem',
'800': '2rem',
'1200': '3rem',
negative025: '-0.0625rem',
negative100: '-0.25rem',
negative200: '-0.5rem',
negative400: '-1rem',
negative800: '-2rem',
negative1200: '-3rem',
},
icon: {
small: '1.5rem',
medium: '2rem',
large: '2.5rem',
},
radius: {
'100': '0.25rem',
'200': '0.5rem',
'400': '1rem',
full: '624.9375rem',
},
space: {
'0': '0',
'050': '0.125rem',
'100': '0.25rem',
'150': '0.375rem',
'200': '0.5rem',
'300': '0.75rem',
'400': '1rem',
'600': '1.5rem',
'800': '2rem',
'1200': '3rem',
'1600': '4rem',
'2400': '6rem',
'4000': '0',
negative100: '-0.25rem',
negative200: '-0.5rem',
negative300: '-0.75rem',
negative400: '-1rem',
negative600: '-1.5rem',
},
stroke: {
border: '0.0625rem',
focusRing: '0.125rem',
},
},
typography: {
body: {
small: {
fontFamily: vars.typography.family.sans,
fontSize: vars.typography.scale['02'],
fontWeight: vars.typography.weight.regular,
},
medium: {
fontFamily: vars.typography.family.sans,
fontSize: vars.typography.scale['03'],
fontWeight: vars.typography.weight.regular,
},
large: {
fontFamily: vars.typography.family.sans,
fontSize: vars.typography.scale['04'],
fontWeight: vars.typography.weight.regular,
},
},
code: {
small: {
fontFamily: vars.typography.family.mono,
fontSize: vars.typography.scale['02'],
fontWeight: vars.typography.weight.regular,
},
medium: {
fontFamily: vars.typography.family.mono,
fontSize: vars.typography.scale['03'],
fontWeight: vars.typography.weight.regular,
},
large: {
fontFamily: vars.typography.family.mono,
fontSize: vars.typography.scale['04'],
fontWeight: vars.typography.weight.regular,
},
},
family: {
mono: '"roboto mono", monospace',
sans: 'inter, sans-serif',
serif: '"noto serif", serif',
},
scale: {
'01': '0.75rem',
'02': '0.875rem',
'03': '1rem',
'04': '1.25rem',
'05': '1.5rem',
'06': '2rem',
'07': '2.5rem',
'08': '3rem',
'09': '4rem',
'10': '4.5rem',
},
weight: {
thin: '100',
extralight: '200',
light: '300',
regular: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
},
});
================================================
FILE: fixtures/react-library-example/tsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": "src",
"module": "NodeNext",
"moduleResolution": "nodenext",
"incremental": true,
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true
},
"include": ["src"]
}
================================================
FILE: fixtures/recipes/CHANGELOG.md
================================================
# @fixtures/recipes
## 0.0.36
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/recipes@0.5.5
## 0.0.35
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/recipes@0.5.5
## 0.0.34
### Patch Changes
- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:
- @vanilla-extract/recipes@0.5.4
## 0.0.33
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/recipes@0.5.3
## 0.0.32
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/recipes@0.5.3
- @vanilla-extract/css@1.15.2
## 0.0.31
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.30
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.29
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.28
### Patch Changes
- Updated dependencies [[`3f8b653`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3f8b65368b26100919debd4591245380322c2cd7)]:
- @vanilla-extract/recipes@0.5.2
## 0.0.27
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.26
### Patch Changes
- Updated dependencies [[`d16c22f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d16c22f19d86bf01c1fc4bf4c8914786fb0b9cc9), [`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/recipes@0.5.1
- @vanilla-extract/css@1.14.0
## 0.0.25
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.24
### Patch Changes
- Updated dependencies [[`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb), [`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb)]:
- @vanilla-extract/recipes@0.5.0
## 0.0.23
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.21
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`3163abc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3163abc75c2e280e96989f732e4e5e60e4941eff)]:
- @vanilla-extract/recipes@0.4.0
## 0.0.19
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.18
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.17
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.16
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.15
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39), [`0906063`](https://github.com/vanilla-extract-css/vanilla-extract/commit/09060639099ec580ac90cac48c3b79f0177ecfcd)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/recipes@0.3.0
## 0.0.14
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.13
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.12
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.11
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.10
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.9
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.8
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0), [`64378b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64378b083ed6fb54f073e77b62fefee673602742)]:
- @vanilla-extract/css@1.7.1
- @vanilla-extract/recipes@0.2.5
## 0.0.7
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.6
### Patch Changes
- Updated dependencies [[`d91ddde`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d91dddeb0d57f2322a6e3c1936cde2a2771d7414)]:
- @vanilla-extract/recipes@0.2.4
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/recipes@0.2.3
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/recipes@0.2.2
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/recipes/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/recipes/package.json
================================================
{
"name": "@fixtures/recipes",
"version": "0.0.36",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/recipes": "workspace:^"
}
}
================================================
FILE: fixtures/recipes/src/html.ts
================================================
import { button, stack } from './styles.css';
export default `<div class="${stack()}">
<button class="${button()}">
Standard calm button
</button>
<button class="${button({ size: 'small' })}">
Small calm button
</button>
<button class="${button({ tone: 'angry' })}">
Standard angry button
</button>
<button class="${button({
size: 'small',
tone: 'angry',
bold: true,
})}">
Small angry button
</button>
</div>`;
================================================
FILE: fixtures/recipes/src/index.ts
================================================
import html from './html';
function render() {
document.body.innerHTML = html;
}
render();
================================================
FILE: fixtures/recipes/src/styles.css.ts
================================================
import { style, createThemeContract, createTheme } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
const vars = createThemeContract({
bg: null,
fg: null,
});
const calm = createTheme(vars, {
bg: 'powderblue',
fg: 'white',
});
const angry = createTheme(vars, {
bg: 'crimson',
fg: 'black',
});
export const reset = style({
border: 0,
});
export const button = recipe(
{
base: [
reset,
{
borderRadius: '6px',
background: vars.bg,
color: vars.fg,
transition: 'all 0.2s ease',
':hover': {
transform: 'translateY(-3px)',
},
},
],
variants: {
size: {
small: {
fontSize: '16px',
lineHeight: '24px',
},
standard: {
fontSize: '24px',
lineHeight: '40px',
},
},
tone: {
calm,
angry: [
angry,
{
':hover': {
boxShadow: '0 10px 6px -6px #777',
},
},
],
},
bold: {
true: {
fontWeight: 'bold',
},
},
},
defaultVariants: {
size: 'standard',
tone: 'calm',
},
compoundVariants: [
{
variants: {
size: 'small',
bold: true,
},
style: {
'@media': {
'only screen and (min-width: 600px)': {
border: '2px green solid',
},
},
},
},
],
},
'button',
);
export const stack = recipe({
base: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
},
variants: {
space: {
medium: {
gap: 20,
'@media': {
'only screen and (min-width: 600px)': {
gap: 30,
},
},
},
},
},
defaultVariants: {
space: 'medium',
},
});
================================================
FILE: fixtures/sprinkles/CHANGELOG.md
================================================
# @fixtures/sprinkles
## 0.0.36
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/sprinkles@1.6.3
## 0.0.35
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/sprinkles@1.6.3
## 0.0.34
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/sprinkles@1.6.2
## 0.0.33
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/sprinkles@1.6.2
- @vanilla-extract/css@1.15.2
## 0.0.32
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.31
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.30
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.29
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.28
### Patch Changes
- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/css@1.14.0
## 0.0.27
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.26
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3), [`8a35dff`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a35dff7f8b4f75691b7ba6ecdc98f45d6e8c5f4)]:
- @vanilla-extract/css@1.12.0
- @vanilla-extract/sprinkles@1.6.1
## 0.0.25
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.24
### Patch Changes
- Updated dependencies [[`d33aa4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d33aa4a2c6422803967bf4ff1131d1a86a35797d)]:
- @vanilla-extract/sprinkles@1.6.0
## 0.0.23
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`4e8377b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e8377bdcfb8ffa237f94da67624458a8ff3b2b5), [`8365959`](https://github.com/vanilla-extract-css/vanilla-extract/commit/836595943eb21f97400986a123788ec46f165139)]:
- @vanilla-extract/sprinkles@1.5.2
## 0.0.21
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.19
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.18
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.17
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/sprinkles@1.5.1
## 0.0.16
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.15
### Patch Changes
- Updated dependencies [[`009e122`](https://github.com/vanilla-extract-css/vanilla-extract/commit/009e122693b92834125b6ca14b30fee5e626e245)]:
- @vanilla-extract/sprinkles@1.5.0
## 0.0.14
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.13
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.12
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.11
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.10
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.9
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.8
### Patch Changes
- Updated dependencies [[`98ab94a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98ab94a99fa7dbee395a7ae6ea4af24c7b1bd7ab)]:
- @vanilla-extract/sprinkles@1.4.1
## 0.0.7
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.6
### Patch Changes
- Updated dependencies [[`81a3d98`](https://github.com/vanilla-extract-css/vanilla-extract/commit/81a3d98b3fb36660406a59049e1cd464418b00fc)]:
- @vanilla-extract/sprinkles@1.4.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/sprinkles@1.3.3
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/sprinkles@1.3.2
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/sprinkles/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/sprinkles/package.json
================================================
{
"name": "@fixtures/sprinkles",
"version": "0.0.36",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/sprinkles": "workspace:^"
}
}
================================================
FILE: fixtures/sprinkles/src/html.ts
================================================
import {
sprinkles,
mapResponsiveValue,
normalizeResponsiveValue,
preComposedSprinkles,
preComposedSprinklesUsedInSelector,
container,
} from './styles.css';
import testNodes from '../test-nodes.json';
export default `
<div id="${testNodes.root}" class="${container}">
<div class="${sprinkles({
display: normalizeResponsiveValue('block').mobile,
paddingTop: mapResponsiveValue(
{
mobile: 'small',
desktop: 'medium',
} as const,
(x) => x,
),
})}">
Sprinkles
</div>
<div class="${preComposedSprinkles}">Precomposed sprinkles</div>
<div class="${preComposedSprinklesUsedInSelector}">Precomposed Sprinkles Used In Selector</div>
</div>
`;
================================================
FILE: fixtures/sprinkles/src/index.ts
================================================
import html from './html';
function render() {
document.body.innerHTML = html;
}
render();
================================================
FILE: fixtures/sprinkles/src/styles.css.ts
================================================
import {
globalStyle,
createVar,
createContainer,
style,
} from '@vanilla-extract/css';
import {
defineProperties,
createSprinkles,
createMapValueFn,
createNormalizeValueFn,
} from '@vanilla-extract/sprinkles';
const alpha = createVar();
const textAlpha = createVar();
const containerName = createContainer();
export const container = style({
containerName,
containerType: 'size',
});
const responsiveConditions = {
defaultCondition: 'mobile',
conditions: {
mobile: {},
tablet: {
'@container': `${containerName} (min-width: 768px)`,
'@media': 'screen and (min-width: 768px)',
},
desktop: {
'@container': `${containerName} (min-width: 1024px)`,
'@media': 'screen and (min-width: 1024px)',
},
darkDesktop: {
'@supports': 'not (display: grid)',
'@media': 'screen and (min-width: 1024px)',
selector: '[data-dark-mode] &',
},
},
responsiveArray: ['mobile', 'tablet', 'desktop'],
} as const;
const responsiveProperties = defineProperties({
...responsiveConditions,
properties: {
display: ['flex', 'none', 'block'],
paddingTop: {
small: '10px',
medium: '20px',
},
},
});
const responsiveLayerProperties = defineProperties({
'@layer': 'responsive-layer-name',
...responsiveConditions,
properties: {
background: {
red: {
vars: { [alpha]: '1' },
background: `rgba(255, 0, 0, ${alpha})`,
},
},
backgroundOpacity: {
1: { vars: { [alpha]: '1' } },
0.1: { vars: { [alpha]: '0.1' } },
0.2: { vars: { [alpha]: '0.2' } },
0.3: { vars: { [alpha]: '0.3' } },
},
},
});
const unconditionalProperties = defineProperties({
properties: {
color: {
red: {
vars: {
[textAlpha]: '1',
},
color: `rgba(255, 0, 0, ${textAlpha})`,
},
},
},
});
const unconditionalLayerProperties = defineProperties({
'@layer': 'unconditional-layer-name',
properties: {
textOpacity: {
1: { vars: { [textAlpha]: '1' } },
0.8: { vars: { [textAlpha]: '0.8' } },
},
},
});
export const sprinkles = createSprinkles(
responsiveProperties,
responsiveLayerProperties,
unconditionalProperties,
unconditionalLayerProperties,
);
export const mapResponsiveValue = createMapValueFn(responsiveProperties);
export const normalizeResponsiveValue =
createNormalizeValueFn(responsiveProperties);
export const preComposedSprinkles = sprinkles({
display: 'block',
paddingTop: 'small',
background: 'red',
backgroundOpacity: { mobile: 0.1, tablet: 0.2, desktop: 0.3 },
color: 'red',
textOpacity: 0.8,
});
export const preComposedSprinklesUsedInSelector = sprinkles({
display: 'flex',
paddingTop: 'medium',
});
globalStyle('body', {
margin: 0,
});
globalStyle(`body ${preComposedSprinklesUsedInSelector}`, {
background: 'red',
});
================================================
FILE: fixtures/sprinkles/test-nodes.json
================================================
{
"root": "root"
}
================================================
FILE: fixtures/template-string-paths/CHANGELOG.md
================================================
# @fixtures/template-string-paths
## 0.0.8
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
## 0.0.7
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
## 0.0.6
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
## 0.0.5
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
## 0.0.4
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.3
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.2
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
================================================
FILE: fixtures/template-string-paths/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/template-string-paths/package.json
================================================
{
"name": "@fixtures/template-string-paths",
"version": "0.0.8",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^"
}
}
================================================
FILE: fixtures/template-string-paths/src/[...slug]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const catchAllSegment = style({ color: 'lime' });
================================================
FILE: fixtures/template-string-paths/src/[[...slug]]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const optionalCatchAllSegment = style({ color: 'orchid' });
================================================
FILE: fixtures/template-string-paths/src/[[id]]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const doubleSquareBracketId = style({ color: 'darkkhaki' });
================================================
FILE: fixtures/template-string-paths/src/[]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const emptySquareBrackets = style({ color: 'blue' });
================================================
FILE: fixtures/template-string-paths/src/[blog-id]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const withHyphen = style({ color: 'indigo' });
================================================
FILE: fixtures/template-string-paths/src/[id]/index.css.ts
================================================
import { style } from '@vanilla-extract/css';
export const singleSquareBracketsId = style({ color: 'tomato' });
================================================
FILE: fixtures/template-string-paths/src/index.ts
================================================
import { emptySquareBrackets } from './[]/index.css';
import { singleSquareBracketsId } from './[id]/index.css';
import { doubleSquareBracketId } from './[[id]]/index.css';
import { catchAllSegment } from './[...slug]/index.css';
import { optionalCatchAllSegment } from './[[...slug]]/index.css';
import { withHyphen } from './[blog-id]/index.css';
// Fixture for testing escaping of webpack template strings and Next.js dyanmic routes
// https://webpack.js.org/configuration/output/#template-strings
// https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
function render() {
document.body.innerHTML = `
<div class="${emptySquareBrackets}">[] path</div>
<div class="${singleSquareBracketsId}">[id] path</div>
<div class="${doubleSquareBracketId}">[[id]] path</div>
<div class="${catchAllSegment}">[...slug] path</div>
<div class="${optionalCatchAllSegment}">[[...slug]] path</div>
<div class="${withHyphen}">[blog-id] path</div>
`;
}
render();
================================================
FILE: fixtures/themed/CHANGELOG.md
================================================
# @fixtures/themed
## 0.0.31
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @vanilla-extract/dynamic@2.1.2
## 0.0.30
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @vanilla-extract/dynamic@2.1.2
## 0.0.29
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @vanilla-extract/dynamic@2.1.1
## 0.0.28
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/dynamic@2.1.1
- @vanilla-extract/css@1.15.2
## 0.0.27
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
## 0.0.26
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
## 0.0.25
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
## 0.0.24
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
## 0.0.23
### Patch Changes
- Updated dependencies [[`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839), [`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839), [`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:
- @vanilla-extract/dynamic@2.1.0
- @vanilla-extract/css@1.14.0
## 0.0.22
### Patch Changes
- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:
- @vanilla-extract/css@1.13.0
## 0.0.21
### Patch Changes
- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:
- @vanilla-extract/css@1.12.0
## 0.0.20
### Patch Changes
- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:
- @vanilla-extract/css@1.11.1
## 0.0.19
### Patch Changes
- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:
- @vanilla-extract/css@1.11.0
## 0.0.18
### Patch Changes
- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:
- @vanilla-extract/css@1.10.0
## 0.0.17
### Patch Changes
- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:
- @vanilla-extract/css@1.9.5
## 0.0.16
### Patch Changes
- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:
- @vanilla-extract/css@1.9.4
## 0.0.15
### Patch Changes
- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:
- @vanilla-extract/css@1.9.3
## 0.0.14
### Patch Changes
- Updated dependencies [[`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb), [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e), [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39)]:
- @vanilla-extract/css@1.9.2
- @vanilla-extract/dynamic@2.0.3
## 0.0.13
### Patch Changes
- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:
- @vanilla-extract/css@1.9.1
## 0.0.12
### Patch Changes
- Updated dependencies [[`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb), [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb)]:
- @vanilla-extract/css@1.9.0
## 0.0.11
### Patch Changes
- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:
- @vanilla-extract/css@1.8.0
## 0.0.10
### Patch Changes
- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:
- @vanilla-extract/css@1.7.4
## 0.0.9
### Patch Changes
- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:
- @vanilla-extract/css@1.7.3
## 0.0.8
### Patch Changes
- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:
- @vanilla-extract/css@1.7.2
## 0.0.7
### Patch Changes
- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:
- @vanilla-extract/css@1.7.1
## 0.0.6
### Patch Changes
- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:
- @vanilla-extract/css@1.7.0
## 0.0.5
### Patch Changes
- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:
- @vanilla-extract/css@1.6.8
- @vanilla-extract/dynamic@2.0.2
## 0.0.4
### Patch Changes
- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:
- @vanilla-extract/css@1.6.7
## 0.0.3
### Patch Changes
- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:
- @vanilla-extract/css@1.6.6
- @vanilla-extract/dynamic@2.0.1
## 0.0.2
### Patch Changes
- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:
- @vanilla-extract/css@1.6.5
## 0.0.1
### Patch Changes
- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:
- @vanilla-extract/css@1.6.4
================================================
FILE: fixtures/themed/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/themed/package.json
================================================
{
"name": "@fixtures/themed",
"version": "0.0.31",
"main": "src/index.ts",
"sideEffects": true,
"author": "SEEK",
"private": true,
"dependencies": {
"@vanilla-extract/css": "workspace:^",
"@vanilla-extract/dynamic": "workspace:^"
}
}
================================================
FILE: fixtures/themed/src/index.ts
================================================
import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';
import { theme, altTheme, responsiveTheme, vars } from './themes.css';
import { button, container, opacity } from './styles.css';
import { shadow } from './shared.css';
import testNodes from '../test-nodes.json';
// Uncomment to get HMR for Vite working
// if (import.meta.hot) {
// import.meta.hot.accept(
// ['./themes.css', './styles.css', './shared.css'],
// () => {
// render();
// },
// );
// }
const inlineTheme = assignInlineVars(vars, {
colors: {
backgroundColor: 'orange',
text: 'black',
},
space: {
1: '4px',
2: '8px',
3: '12px',
},
});
function render() {
document.body.innerHTML = `
<div id="${testNodes.root}" class="${shadow}">
Root theme
<div id="${testNodes.rootContainer}" class="${container}">
<button id="${testNodes.rootButton}" class="${button}">Main theme button</button>
<div class="${altTheme}">
Alt theme
<div id="${testNodes.altContainer}" class="${container}">
<button id="${testNodes.altButton}" class="${button}">Alt theme button</button>
<div class="${theme}">
Back to root theme
<div id="${testNodes.nestedRootContainer}" class="${container}">
<button id="${testNodes.nestedRootButton}" class="${button}">Main theme button</button>
<div style="${inlineTheme}">
Inline theme
<div id="${testNodes.inlineThemeContainer}" class="${container}">
<button id="${testNodes.inlineThemeButton}" class="${button} ${opacity['1/2']}">Inline theme <span class="{${opacity['1/4']}}">button</span></button>
<div>
Dynamic vars
<div id="${testNodes.dynamicVarsContainer}" class="${container}">
<button id="${testNodes.dynamicVarsButton}" class="${button}">Dynamic vars button</button>
<div class="${responsiveTheme}">
Responsive theme
<div id="${testNodes.responsiveThemeContainer}" class="${container}">
<button id="${testNodes.responsiveThemeButton}" class="${button}">Responsive theme button</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
const dynamicVarsContainer = document.getElementById(
testNodes.dynamicVarsContainer,
);
if (!dynamicVarsContainer) {
throw new Error('Dynamic vars container not found.');
}
setElementVars(dynamicVarsContainer, vars, {
colors: {
backgroundColor: 'transparent',
text: 'papayawhip',
},
space: {
1: '5px',
2: '10px',
3: '15px',
},
});
setElementVars(dynamicVarsContainer, {
[vars.colors.backgroundColor]: 'darksalmon',
});
}
render();
================================================
FILE: fixtures/themed/src/shared.css.ts
================================================
import { globalStyle, style } from '@vanilla-extract/css';
export const shadow: string = style({
boxShadow: '0 0 5px red',
});
globalStyle('body', {
backgroundColor: 'skyblue',
});
// make the screenshot less flaky in CI
globalStyle('body, button', {
lineHeight: '16px',
});
================================================
FILE: fixtures/themed/src/styles.css.ts
================================================
import {
style,
styleVariants,
createVar,
fallbackVar,
fontFace,
globalFontFace,
globalStyle,
} from '@vanilla-extract/css';
import { shadow } from './shared.css';
import { vars, theme, altTheme } from './themes.css';
const impact = fontFace({
src: 'local("Impact")',
});
globalFontFace('MyGlobalComicSans', {
src: 'local("Comic Sans MS")',
});
export const container = style({
display: 'flex',
flexDirection: 'column',
gap: vars.space[2],
padding: vars.space[3],
'@media': {
'only screen and (min-width: 500px)': {
border: `1px solid ${vars.colors.backgroundColor}`,
},
},
});
const iDunno = style([{ zIndex: 1 }, { position: 'relative' }]);
export const button = style([
{
fontFamily: impact,
backgroundColor: fallbackVar(
vars.colors.backgroundColor,
'"THIS FALLBACK VALUE SHOULD NEVER BE USED"',
),
color: vars.colors.text,
borderRadius: '9999px',
'@media': {
'only screen and (min-width: 500px)': {
padding: vars.space[1],
},
'only screen and (min-width: 1000px)': {
padding: vars.space[2],
},
},
selectors: {
[`${altTheme} ${theme} ${container} &`]: {
fontFamily: 'MyGlobalComicSans',
outline: '5px solid red',
},
},
},
shadow,
iDunno,
]);
globalStyle(`body ${iDunno}:after`, {
content: "'I am content'",
});
const blankVar1 = createVar({
syntax: '<number>',
inherits: false,
initialValue: '0.5',
});
const blankVar2 = createVar();
export const opacity = styleVariants(
{
'1/2': blankVar1,
'1/4': fallbackVar(blankVar1, blankVar2, '0.25'),
},
(value) => ({
selectors: { 'html &': { opacity: value } },
}),
);
================================================
FILE: fixtures/themed/src/themes.css.ts
================================================
import {
createGlobalTheme,
createTheme,
assignVars,
style,
layer,
} from '@vanilla-extract/css';
export const theme = style({});
export const vars = createGlobalTheme(`:root, ${theme}`, {
colors: {
backgroundColor: 'blue',
text: 'white',
},
space: {
1: '4px',
2: '8px',
3: '12px',
},
});
export const altTheme = createTheme(vars, {
colors: {
backgroundColor: 'green',
text: 'white',
},
space: {
1: '8px',
2: '12px',
3: '16px',
},
});
const themeLayer = layer();
// Not tested visually, exported for CSS output testing
export const [altTheme2Class, altTheme2Contract] = createTheme({
'@layer': themeLayer,
colors: {
backgroundColor: 'green',
text: 'white',
},
space: {
1: '8px',
2: '12px',
3: '16px',
},
});
// Not tested visually, exported for CSS output testing
export const altTheme3 = createGlobalTheme(':root', altTheme2Contract, {
'@layer': 'globalThemeLayer',
colors: {
backgroundColor: 'green',
text: 'white',
},
space: {
1: '8px',
2: '12px',
3: '16px',
},
});
export const responsiveTheme = style({
vars: assignVars(vars, {
colors: {
backgroundColor: 'pink',
text: 'purple',
},
space: {
1: '6px',
2: '12px',
3: '18px',
},
}),
'@media': {
'screen and (min-width: 768px)': {
vars: assignVars(vars.colors, {
backgroundColor: 'purple',
text: 'pink',
}),
},
},
});
================================================
FILE: fixtures/themed/test-nodes.json
================================================
{
"root": "root",
"rootContainer": "rootContainer",
"rootButton": "rootButton",
"altContainer": "altContainer",
"altButton": "altButton",
"nestedRootContainer": "nestedRootContainer",
"nestedRootButton": "nestedRootButton",
"inlineThemeContainer": "inlineThemeContainer",
"inlineThemeButton": "inlineThemeButton",
"dynamicVarsContainer": "dynamicVarsContainer",
"dynamicVarsButton": "dynamicVarsButton",
"responsiveThemeContainer": "responsiveThemeContainer",
"responsiveThemeButton": "responsiveThemeButton"
}
================================================
FILE: fixtures/thirdparty/CHANGELOG.md
================================================
# @fixtures/thirdparty
## 0.0.9
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @fixtures/thirdparty-dep@0.0.9
## 0.0.8
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @fixtures/thirdparty-dep@0.0.8
## 0.0.7
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:
- @vanilla-extract/css@1.15.3
- @fixtures/thirdparty-dep@0.0.7
## 0.0.6
### Patch Changes
- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:
- @vanilla-extract/css@1.15.2
- @fixtures/thirdparty-dep@0.0.6
## 0.0.5
### Patch Changes
- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:
- @vanilla-extract/css@1.15.1
- @fixtures/thirdparty-dep@0.0.5
## 0.0.4
### Patch Changes
- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:
- @vanilla-extract/css@1.15.0
- @fixtures/thirdparty-dep@0.0.4
## 0.0.3
### Patch Changes
- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:
- @vanilla-extract/css@1.14.2
- @fixtures/thirdparty-dep@0.0.3
## 0.0.2
### Patch Changes
- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:
- @vanilla-extract/css@1.14.1
- @fixtures/thirdparty-dep@0.0.2
================================================
FILE: fixtures/thirdparty/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>
================================================
FILE: fixtures/thirdparty/package.json
================================================
{
"name": "@fixtures/thirdparty",
"version": "0.0.9",
"main": "src/index.ts",
"author": "SEEK",
"private": true,
"dependencies": {
"@fixtures/thirdparty-dep": "workspace:*",
"@vanilla-extract/css": "workspace:*"
}
}
================================================
FILE: fixtures/thirdparty/src/index.ts
================================================
import { block, depBlock, depdepBlock } from './styles.css';
import testNodes from '../test-nodes.json';
document.body.innerHTML = `
<div id="${testNodes.first}" class="${block}">
I'm a first-party block
<div id="${testNodes.third}" class="${depBlock}">
I'm a third party block
<div id="${testNodes.thirdThird}" class="${depdepBlock}">
I'm a third party of third party block
</div>
</div>
</div>
`;
================================================
FILE: fixtures/thirdparty/src/styles.css.ts
================================================
import { style, createVar } from '@vanilla-extract/css';
export {
depBlock,
depColor,
depdepBlock,
depdepColor,
} from '@fixtures/thirdparty-dep';
const color = createVar();
export const block = style({
vars: {
[color]: 'red',
},
backgroundColor: color,
});
================================================
FILE: fixtures/thirdparty/test-nodes.json
================================================
{
"first": "first",
"third": "third",
"thirdThird": "thirdThird"
}
================================================
FILE: fixtures/thirdparty/thirdparty-dep/CHANGELOG.md
================================================
# @fixtures/thirdparty-dep
## 0.0.9
### Patch Changes
- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:
- @vanilla-extract/css@1.15.5
- @fixtures/thirdparty-dep-dep@0.0.9
## 0.0.8
### Patch Changes
- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:
- @vanilla-extract/css@1.15.4
- @fixtures/thirdparty-dep-dep@0.0.8
## 0.0.7
### Patch Changes
- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://
gitextract_3bw1abum/ ├── .changeset/ │ ├── README.md │ └── config.json ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.yml │ │ └── config.yml │ └── workflows/ │ ├── deploy-site.yml │ ├── release.yml │ └── validate.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .oxlintrc.json ├── .prettierignore ├── .vscode/ │ └── settings.json ├── LICENSE ├── README.md ├── babel.config.js ├── docs/ │ └── treat-migration-guide.md ├── examples/ │ ├── next/ │ │ ├── components/ │ │ │ ├── HelloWorld.css.ts │ │ │ └── HelloWorld.tsx │ │ ├── next.config.js │ │ ├── package.json │ │ ├── pages/ │ │ │ └── index.tsx │ │ └── tsconfig.json │ └── webpack-react/ │ ├── CHANGELOG.md │ ├── package.json │ ├── sandbox.config.json │ ├── src/ │ │ ├── App.css.ts │ │ ├── App.tsx │ │ ├── global.css.ts │ │ ├── index.tsx │ │ ├── sprinkles.css.ts │ │ └── vars.css.ts │ └── webpack.config.js ├── fixtures/ │ ├── features/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── features.css.ts │ │ │ ├── html.ts │ │ │ └── index.ts │ │ └── test-nodes.json │ ├── layers/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ └── src/ │ │ ├── index.ts │ │ └── styles.css.ts │ ├── low-level/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── styles.css.ts │ │ └── test-nodes.json │ ├── next-12-pages-router/ │ │ ├── CHANGELOG.md │ │ ├── next.config.js │ │ ├── package.json │ │ ├── src/ │ │ │ └── pages/ │ │ │ ├── features/ │ │ │ │ └── index.tsx │ │ │ ├── index.tsx │ │ │ ├── recipes/ │ │ │ │ └── index.tsx │ │ │ └── sprinkles/ │ │ │ └── index.tsx │ │ └── tsconfig.json │ ├── next-13-app-router/ │ │ ├── CHANGELOG.md │ │ ├── next.config.js │ │ ├── package.json │ │ ├── src/ │ │ │ └── app/ │ │ │ ├── features/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ ├── recipes/ │ │ │ │ └── page.tsx │ │ │ └── sprinkles/ │ │ │ └── page.tsx │ │ └── tsconfig.json │ ├── next-16-app-pages-router/ │ │ ├── next.config.ts │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── creepster/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── duplication-test/ │ │ │ │ │ ├── a-plain.css.ts │ │ │ │ │ ├── a.css.ts │ │ │ │ │ ├── b-plain.css.ts │ │ │ │ │ ├── b.css.ts │ │ │ │ │ ├── extra/ │ │ │ │ │ │ ├── c-plain.css.ts │ │ │ │ │ │ └── c.css.ts │ │ │ │ │ └── page.tsx │ │ │ │ ├── features/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── function-serializer/ │ │ │ │ │ ├── page.tsx │ │ │ │ │ ├── runtime.tsx │ │ │ │ │ ├── source.css.ts │ │ │ │ │ └── styled.ts │ │ │ │ ├── layout.tsx │ │ │ │ ├── next-font/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── next-image/ │ │ │ │ │ ├── image.css.ts │ │ │ │ │ └── page.tsx │ │ │ │ ├── page.tsx │ │ │ │ ├── recipes/ │ │ │ │ │ └── page.tsx │ │ │ │ └── sprinkles/ │ │ │ │ └── page.tsx │ │ │ ├── pages/ │ │ │ │ └── pages-router/ │ │ │ │ ├── features/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── recipes/ │ │ │ │ │ └── index.tsx │ │ │ │ └── sprinkles/ │ │ │ │ └── index.tsx │ │ │ └── styles/ │ │ │ ├── creepster-font.ts │ │ │ ├── creepster.css.ts │ │ │ ├── fonts.ts │ │ │ └── nextFont.css.ts │ │ └── tsconfig.json │ ├── react-library-example/ │ │ ├── package.json │ │ ├── src/ │ │ │ ├── button/ │ │ │ │ ├── button.css.ts │ │ │ │ └── button.tsx │ │ │ ├── checkbox/ │ │ │ │ ├── checkbox.css.ts │ │ │ │ └── checkbox.tsx │ │ │ ├── index.ts │ │ │ ├── radio/ │ │ │ │ ├── radio.css.ts │ │ │ │ └── radio.tsx │ │ │ └── styles/ │ │ │ ├── reset.css.ts │ │ │ ├── utility.css.ts │ │ │ └── vars.css.ts │ │ └── tsconfig.json │ ├── recipes/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ └── src/ │ │ ├── html.ts │ │ ├── index.ts │ │ └── styles.css.ts │ ├── sprinkles/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── html.ts │ │ │ ├── index.ts │ │ │ └── styles.css.ts │ │ └── test-nodes.json │ ├── template-string-paths/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ └── src/ │ │ ├── [...slug]/ │ │ │ └── index.css.ts │ │ ├── [[...slug]]/ │ │ │ └── index.css.ts │ │ ├── [[id]]/ │ │ │ └── index.css.ts │ │ ├── []/ │ │ │ └── index.css.ts │ │ ├── [blog-id]/ │ │ │ └── index.css.ts │ │ ├── [id]/ │ │ │ └── index.css.ts │ │ └── index.ts │ ├── themed/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── shared.css.ts │ │ │ ├── styles.css.ts │ │ │ └── themes.css.ts │ │ └── test-nodes.json │ ├── thirdparty/ │ │ ├── CHANGELOG.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── styles.css.ts │ │ ├── test-nodes.json │ │ └── thirdparty-dep/ │ │ ├── CHANGELOG.md │ │ ├── index.mjs │ │ ├── package.json │ │ ├── styles.css.mjs │ │ └── thirdparty-dep-dep/ │ │ ├── CHANGELOG.md │ │ ├── index.mjs │ │ ├── package.json │ │ └── styles.css.mjs │ └── unused-modules/ │ ├── CHANGELOG.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── global.css.ts │ │ ├── index.ts │ │ ├── lookup.ts │ │ ├── reset/ │ │ │ ├── index.ts │ │ │ └── reset.css.ts │ │ ├── shared/ │ │ │ ├── index.ts │ │ │ └── shared.css.ts │ │ ├── unused/ │ │ │ ├── index.ts │ │ │ └── unused.css.ts │ │ └── used/ │ │ ├── index.ts │ │ └── used.css.ts │ └── test-nodes.json ├── package.json ├── packages/ │ ├── babel-plugin-debug-ids/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ ├── index.test.ts │ │ └── index.ts │ ├── compiler/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ └── src/ │ │ ├── compiler.ts │ │ ├── index.ts │ │ └── lock.ts │ ├── css/ │ │ ├── CHANGELOG.md │ │ ├── adapter/ │ │ │ └── package.json │ │ ├── disableRuntimeStyles/ │ │ │ └── package.json │ │ ├── fileScope/ │ │ │ └── package.json │ │ ├── functionSerializer/ │ │ │ └── package.json │ │ ├── injectStyles/ │ │ │ └── package.json │ │ ├── package.json │ │ ├── recipe/ │ │ │ └── package.json │ │ ├── src/ │ │ │ ├── adapter.ts │ │ │ ├── conditionalRulesets.ts │ │ │ ├── container.ts │ │ │ ├── disableRuntimeStyles.ts │ │ │ ├── fileScope.ts │ │ │ ├── functionSerializer.ts │ │ │ ├── getDebugFileName.test.ts │ │ │ ├── getDebugFileName.ts │ │ │ ├── identifier.test.ts │ │ │ ├── identifier.ts │ │ │ ├── index.ts │ │ │ ├── injectStyles.ts │ │ │ ├── layer.test.ts │ │ │ ├── layer.ts │ │ │ ├── recipe.ts │ │ │ ├── runtimeAdapter.ts │ │ │ ├── simplePseudos.ts │ │ │ ├── style.ts │ │ │ ├── theme.ts │ │ │ ├── transformCss.test.ts │ │ │ ├── transformCss.ts │ │ │ ├── types.ts │ │ │ ├── utils.test.ts │ │ │ ├── utils.ts │ │ │ ├── validateContract.test.ts │ │ │ ├── validateContract.ts │ │ │ ├── validateMediaQuery.test.ts │ │ │ ├── validateMediaQuery.ts │ │ │ ├── validateSelector.test.ts │ │ │ ├── validateSelector.ts │ │ │ ├── vars.test.ts │ │ │ ├── vars.ts │ │ │ └── viewTransition.ts │ │ ├── transformCss/ │ │ │ └── package.json │ │ └── vanilla.virtual.css │ ├── dynamic/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ ├── assignInlineVars.css.ts │ │ ├── assignInlineVars.test.ts │ │ ├── assignInlineVars.ts │ │ ├── index.ts │ │ ├── setElementVars.test.ts │ │ ├── setElementVars.ts │ │ └── setElementVarts.css.ts │ ├── esbuild-plugin/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── esbuild-plugin-next/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── integration/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ └── src/ │ │ ├── addFileScope.test.ts │ │ ├── addFileScope.ts │ │ ├── compile.ts │ │ ├── filters.ts │ │ ├── hash.ts │ │ ├── index.ts │ │ ├── packageInfo.ts │ │ ├── processVanillaFile.test.ts │ │ ├── processVanillaFile.ts │ │ ├── serialize.ts │ │ ├── transform.ts │ │ ├── types.ts │ │ └── virtualFile.ts │ ├── jest-transform/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── next-plugin/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── parcel-transformer/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ ├── private/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ ├── get.ts │ │ ├── getVarName.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── walkObject.ts │ ├── recipes/ │ │ ├── CHANGELOG.md │ │ ├── createRuntimeFn/ │ │ │ └── package.json │ │ ├── package.json │ │ └── src/ │ │ ├── createRuntimeFn.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils.ts │ ├── rollup-plugin/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── lib.ts │ │ └── test/ │ │ ├── __snapshots__/ │ │ │ └── rollup-plugin.test.ts.snap │ │ └── rollup-plugin.test.ts │ ├── sprinkles/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── createRuntimeSprinkles/ │ │ │ └── package.json │ │ ├── createUtils/ │ │ │ └── package.json │ │ ├── package.json │ │ └── src/ │ │ ├── createRuntimeSprinkles.ts │ │ ├── createSprinkles.ts │ │ ├── createUtils.ts │ │ ├── index.ts │ │ └── types.ts │ ├── turbopack-plugin/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ ├── index.test.ts │ │ ├── index.ts │ │ └── next-font/ │ │ ├── inject.ts │ │ ├── plugin.ts │ │ └── transform.ts │ ├── utils/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ ├── index.test.ts │ │ └── index.ts │ ├── vite-plugin/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── src/ │ │ └── index.ts │ └── webpack-plugin/ │ ├── CHANGELOG.md │ ├── extracted.js │ ├── loader/ │ │ └── package.json │ ├── next/ │ │ └── package.json │ ├── package.json │ ├── src/ │ │ ├── __snapshots__/ │ │ │ └── compiler.test.ts.snap │ │ ├── compat.ts │ │ ├── compiler.test.ts │ │ ├── compiler.ts │ │ ├── index.ts │ │ ├── loader.ts │ │ ├── logger.ts │ │ ├── next.ts │ │ ├── plugin.ts │ │ ├── types.ts │ │ ├── virtualFileLoader.ts │ │ └── virtualNextFileLoader.ts │ ├── vanilla.virtual.css │ ├── virtualFileLoader/ │ │ └── package.json │ └── virtualNextFileLoader/ │ └── package.json ├── playwright.config.ts ├── pnpm-workspace.yaml ├── prettier.config.js ├── scripts/ │ ├── build-dts.ts │ ├── copy-next-plugin.ts │ ├── copy-readme-to-packages.ts │ └── package.json ├── site/ │ ├── .gitignore │ ├── babel.config.js │ ├── code-block-loader.js │ ├── contents.mts │ ├── docs/ │ │ ├── api/ │ │ │ ├── add-function-serializer.md │ │ │ ├── assign-vars.md │ │ │ ├── create-container.md │ │ │ ├── create-theme-contract.md │ │ │ ├── create-theme.md │ │ │ ├── create-var.md │ │ │ ├── create-view-transition.md │ │ │ ├── fallback-var.md │ │ │ ├── font-face.md │ │ │ ├── keyframes.md │ │ │ ├── layer.md │ │ │ ├── style-variants.md │ │ │ └── style.md │ │ ├── global-api/ │ │ │ ├── create-global-theme-contract.md │ │ │ ├── create-global-theme.md │ │ │ ├── create-global-var.md │ │ │ ├── global-font-face.md │ │ │ ├── global-keyframes.md │ │ │ ├── global-layer.md │ │ │ └── global-style.md │ │ ├── integrations/ │ │ │ ├── astro.md │ │ │ ├── esbuild.md │ │ │ ├── gatsby.md │ │ │ ├── next.md │ │ │ ├── parcel.md │ │ │ ├── remix.md │ │ │ ├── rollup.md │ │ │ ├── vite.md │ │ │ └── webpack.md │ │ ├── overview/ │ │ │ ├── getting-started.md │ │ │ ├── style-composition.md │ │ │ ├── styling.md │ │ │ ├── test-environments.md │ │ │ └── theming.md │ │ └── packages/ │ │ ├── css-utils.md │ │ ├── dynamic.md │ │ ├── recipes.md │ │ └── sprinkles.md │ ├── documentIndexer.mts │ ├── legacy-routes.json │ ├── makeDocsManifest.mts │ ├── package.json │ ├── src/ │ │ ├── App.css.ts │ │ ├── App.tsx │ │ ├── Blockquote/ │ │ │ ├── Blockquote.css.ts │ │ │ └── Blockquote.tsx │ │ ├── Chevron/ │ │ │ ├── Chevron.css.ts │ │ │ └── Chevron.tsx │ │ ├── Code/ │ │ │ ├── CompiledCode.css.ts │ │ │ ├── CompiledCode.tsx │ │ │ ├── ErrorHighlighter.css.ts │ │ │ ├── ErrorHighlighter.tsx │ │ │ ├── SyntaxHighlighter.css.ts │ │ │ └── SyntaxHighlighter.tsx │ │ ├── ColorModeToggle/ │ │ │ ├── ColorModeToggle.css.ts │ │ │ └── ColorModeToggle.tsx │ │ ├── Divider/ │ │ │ ├── Divider.css.ts │ │ │ └── Divider.tsx │ │ ├── DocsPage/ │ │ │ ├── DocsPage.css.ts │ │ │ ├── DocsPage.tsx │ │ │ └── SiblingDoc/ │ │ │ └── SiblingDoc.tsx │ │ ├── Fab/ │ │ │ ├── Fab.css.ts │ │ │ └── Fab.tsx │ │ ├── GitHubStars/ │ │ │ └── GitHubStars.tsx │ │ ├── HomePage/ │ │ │ ├── HomePage.css.ts │ │ │ └── HomePage.tsx │ │ ├── InlineCode/ │ │ │ ├── InlineCode.css.ts │ │ │ └── InlineCode.tsx │ │ ├── Logo/ │ │ │ └── Logo.tsx │ │ ├── SearchInput/ │ │ │ ├── SearchInput.css.ts │ │ │ └── SearchInput.tsx │ │ ├── Tweet/ │ │ │ ├── Tweet.css.ts │ │ │ └── Tweet.tsx │ │ ├── Typography/ │ │ │ ├── Heading.tsx │ │ │ ├── Link.css.ts │ │ │ ├── Link.tsx │ │ │ ├── Text.tsx │ │ │ └── typography.css.ts │ │ ├── assets/ │ │ │ └── site.webmanifest │ │ ├── client.tsx │ │ ├── docs-store.ts │ │ ├── index.d.ts │ │ ├── mdx-components.css.ts │ │ ├── mdx-components.tsx │ │ ├── render.tsx │ │ ├── system/ │ │ │ ├── Box/ │ │ │ │ └── Box.tsx │ │ │ ├── ButtonLink/ │ │ │ │ ├── ButtonLink.css.ts │ │ │ │ └── ButtonLink.tsx │ │ │ ├── Columns/ │ │ │ │ └── Columns.tsx │ │ │ ├── ContentBlock/ │ │ │ │ ├── ContentBlock.css.ts │ │ │ │ └── ContentBlock.tsx │ │ │ ├── Stack/ │ │ │ │ └── Stack.tsx │ │ │ ├── index.ts │ │ │ └── styles/ │ │ │ ├── reset.css.ts │ │ │ └── sprinkles.css.ts │ │ ├── themeUtils.ts │ │ ├── themes.css.ts │ │ └── useHeadingRoute.ts │ └── webpack.config.js ├── test-helpers/ │ ├── CHANGELOG.md │ ├── package.json │ └── src/ │ ├── getStylesheet.ts │ ├── index.ts │ ├── startFixture/ │ │ ├── esbuild.ts │ │ ├── index.ts │ │ ├── next.ts │ │ ├── parcel-config.json │ │ ├── parcel.ts │ │ ├── types.ts │ │ ├── vite.ts │ │ └── webpack.ts │ └── startFixtureCLI.ts ├── tests/ │ ├── CHANGELOG.md │ ├── compiler/ │ │ ├── compiler.test.ts │ │ └── fixtures/ │ │ ├── assets-inline-limit/ │ │ │ ├── assets.d.ts │ │ │ └── styles.css.ts │ │ ├── class-composition/ │ │ │ ├── base.css.ts │ │ │ ├── button.css.ts │ │ │ ├── shared.css.ts │ │ │ ├── stepper.css.ts │ │ │ └── styles.css.ts │ │ ├── importer-tree/ │ │ │ ├── evenMoreStyles.css.ts │ │ │ ├── moreStyles.css.ts │ │ │ ├── moreStyles2.css.ts │ │ │ ├── otherTokens.ts │ │ │ ├── reExporter.ts │ │ │ ├── styles.css.ts │ │ │ └── tokens.ts │ │ ├── recipes/ │ │ │ └── recipeClassNames.css.ts │ │ ├── selectors/ │ │ │ └── getter.css.ts │ │ ├── tsconfig-paths/ │ │ │ ├── src/ │ │ │ │ ├── main.css.ts │ │ │ │ └── main.tsx │ │ │ └── tsconfig.json │ │ ├── unused-compositions/ │ │ │ ├── shared.css.ts │ │ │ ├── styles_a.css.ts │ │ │ └── styles_b.css.ts │ │ └── vite-config/ │ │ ├── alias.css.ts │ │ ├── image.css.ts │ │ ├── plugin.css.ts │ │ └── util/ │ │ └── vars.css.ts │ ├── e2e/ │ │ ├── css-deduplication.playwright.ts │ │ ├── features.playwright.ts │ │ ├── features.playwright.ts-snapshots/ │ │ │ ├── features-esbuild--development.css │ │ │ ├── features-esbuild--production.css │ │ │ ├── features-esbuild-next--development.css │ │ │ ├── features-esbuild-next--production.css │ │ │ ├── features-mini-css-extract--development.css │ │ │ ├── features-mini-css-extract--production.css │ │ │ ├── features-parcel--development.css │ │ │ ├── features-parcel--production.css │ │ │ └── features-vite--production.css │ │ ├── fixture.ts │ │ ├── fixtures-next-unified.playwright.ts │ │ ├── layers.playwright.ts │ │ ├── layers.playwright.ts-snapshots/ │ │ │ ├── layers-esbuild--development.css │ │ │ ├── layers-esbuild--production.css │ │ │ ├── layers-esbuild-next--development.css │ │ │ ├── layers-esbuild-next--production.css │ │ │ ├── layers-mini-css-extract--development.css │ │ │ ├── layers-mini-css-extract--production.css │ │ │ ├── layers-parcel--development.css │ │ │ ├── layers-parcel--production.css │ │ │ └── layers-vite--production.css │ │ ├── low-level.playwright.ts │ │ ├── low-level.playwright.ts-snapshots/ │ │ │ ├── low-level-esbuild--development.css │ │ │ ├── low-level-esbuild--production.css │ │ │ ├── low-level-esbuild-next--development.css │ │ │ ├── low-level-esbuild-next--production.css │ │ │ ├── low-level-mini-css-extract--development.css │ │ │ ├── low-level-mini-css-extract--production.css │ │ │ ├── low-level-parcel--development.css │ │ │ ├── low-level-parcel--production.css │ │ │ └── low-level-vite--production.css │ │ ├── recipes.playwright.ts │ │ ├── recipes.playwright.ts-snapshots/ │ │ │ ├── recipes-esbuild--development.css │ │ │ ├── recipes-esbuild--production.css │ │ │ ├── recipes-esbuild-next--development.css │ │ │ ├── recipes-esbuild-next--production.css │ │ │ ├── recipes-mini-css-extract--development.css │ │ │ ├── recipes-mini-css-extract--production.css │ │ │ ├── recipes-parcel--development.css │ │ │ ├── recipes-parcel--production.css │ │ │ └── recipes-vite--production.css │ │ ├── sprinkles.playwright.ts │ │ ├── sprinkles.playwright.ts-snapshots/ │ │ │ ├── sprinkles-esbuild--development.css │ │ │ ├── sprinkles-esbuild--production.css │ │ │ ├── sprinkles-esbuild-next--development.css │ │ │ ├── sprinkles-esbuild-next--production.css │ │ │ ├── sprinkles-mini-css-extract--development.css │ │ │ ├── sprinkles-mini-css-extract--production.css │ │ │ ├── sprinkles-parcel--development.css │ │ │ ├── sprinkles-parcel--production.css │ │ │ └── sprinkles-vite--production.css │ │ ├── template-string-paths.playwright.ts │ │ ├── template-string-paths.playwright.ts-snapshots/ │ │ │ ├── template-string-paths-mini-css-extract--development.css │ │ │ └── template-string-paths-mini-css-extract--production.css │ │ ├── testCases.ts │ │ ├── themed.playwright.ts │ │ ├── themed.playwright.ts-snapshots/ │ │ │ ├── themed-esbuild--development.css │ │ │ ├── themed-esbuild--production.css │ │ │ ├── themed-esbuild-next--development.css │ │ │ ├── themed-esbuild-next--production.css │ │ │ ├── themed-mini-css-extract--development.css │ │ │ ├── themed-mini-css-extract--production.css │ │ │ ├── themed-parcel--development.css │ │ │ ├── themed-parcel--production.css │ │ │ └── themed-vite--production.css │ │ ├── thirdparty.playwright.ts │ │ └── thirdparty.playwright.ts-snapshots/ │ │ ├── thirdparty-esbuild--development.css │ │ ├── thirdparty-esbuild--production.css │ │ ├── thirdparty-esbuild-next--development.css │ │ ├── thirdparty-esbuild-next--production.css │ │ ├── thirdparty-mini-css-extract--development.css │ │ ├── thirdparty-mini-css-extract--production.css │ │ ├── thirdparty-parcel--development.css │ │ ├── thirdparty-parcel--production.css │ │ └── thirdparty-vite--production.css │ ├── jsdom/ │ │ ├── jsdom.css.ts │ │ └── jsdom.test.ts │ ├── package.json │ ├── recipes/ │ │ ├── recipes-type-tests.ts │ │ ├── recipes.css.ts │ │ └── recipes.test.ts │ ├── servers.ts │ ├── sprinkles/ │ │ ├── index.css.ts │ │ ├── sprinkles-type-tests.ts │ │ └── sprinkles.test.ts │ ├── types/ │ │ └── type-tests.ts │ └── walkObject/ │ ├── tokens.ts │ └── walkObject.test.ts ├── tsconfig.json └── vitest.config.ts
SYMBOL INDEX (445 symbols across 133 files)
FILE: examples/next/components/HelloWorld.tsx
function HelloWorld (line 3) | function HelloWorld() {
FILE: examples/next/pages/index.tsx
function Home (line 3) | function Home() {
FILE: fixtures/features/src/index.ts
function render (line 3) | function render() {
FILE: fixtures/next-12-pages-router/src/pages/features/index.tsx
function Features (line 3) | function Features() {
FILE: fixtures/next-12-pages-router/src/pages/index.tsx
function Home (line 3) | function Home() {
FILE: fixtures/next-12-pages-router/src/pages/recipes/index.tsx
function Recipes (line 3) | function Recipes() {
FILE: fixtures/next-12-pages-router/src/pages/sprinkles/index.tsx
function Sprinkles (line 3) | function Sprinkles() {
FILE: fixtures/next-13-app-router/src/app/features/page.tsx
function Features (line 3) | function Features() {
FILE: fixtures/next-13-app-router/src/app/layout.tsx
function RootLayout (line 1) | function RootLayout({
FILE: fixtures/next-13-app-router/src/app/page.tsx
function Home (line 3) | function Home() {
FILE: fixtures/next-13-app-router/src/app/recipes/page.tsx
function Recipes (line 3) | function Recipes() {
FILE: fixtures/next-13-app-router/src/app/sprinkles/page.tsx
function Sprinkles (line 3) | function Sprinkles() {
FILE: fixtures/next-16-app-pages-router/src/app/creepster/page.tsx
function CreepsterPage (line 3) | function CreepsterPage() {
FILE: fixtures/next-16-app-pages-router/src/app/duplication-test/page.tsx
function DuplicationTestPage (line 8) | function DuplicationTestPage() {
FILE: fixtures/next-16-app-pages-router/src/app/features/page.tsx
function Features (line 3) | function Features() {
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/page.tsx
function Page (line 3) | function Page() {
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/runtime.tsx
function runtimeStyled (line 1) | function runtimeStyled<Tag extends keyof JSX.IntrinsicElements>(
FILE: fixtures/next-16-app-pages-router/src/app/function-serializer/styled.ts
function styled (line 12) | function styled<Tag extends keyof JSX.IntrinsicElements>(
FILE: fixtures/next-16-app-pages-router/src/app/layout.tsx
function RootLayout (line 1) | function RootLayout({
FILE: fixtures/next-16-app-pages-router/src/app/next-font/page.tsx
function NextFontChecks (line 4) | function NextFontChecks() {
FILE: fixtures/next-16-app-pages-router/src/app/next-image/page.tsx
function NextImagePage (line 3) | function NextImagePage() {
FILE: fixtures/next-16-app-pages-router/src/app/page.tsx
function Home (line 3) | function Home() {
FILE: fixtures/next-16-app-pages-router/src/app/recipes/page.tsx
function Recipes (line 3) | function Recipes() {
FILE: fixtures/next-16-app-pages-router/src/app/sprinkles/page.tsx
function Sprinkles (line 3) | function Sprinkles() {
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/features/index.tsx
function Features (line 3) | function Features() {
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/index.tsx
function Home (line 3) | function Home() {
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/recipes/index.tsx
function Recipes (line 3) | function Recipes() {
FILE: fixtures/next-16-app-pages-router/src/pages/pages-router/sprinkles/index.tsx
function Sprinkles (line 3) | function Sprinkles() {
FILE: fixtures/react-library-example/src/button/button.tsx
function Button (line 4) | function Button({
FILE: fixtures/react-library-example/src/checkbox/checkbox.tsx
function Radio (line 5) | function Radio({
FILE: fixtures/react-library-example/src/radio/radio.tsx
function Radio (line 5) | function Radio({
FILE: fixtures/recipes/src/index.ts
function render (line 3) | function render() {
FILE: fixtures/sprinkles/src/index.ts
function render (line 3) | function render() {
FILE: fixtures/template-string-paths/src/index.ts
function render (line 11) | function render() {
FILE: fixtures/themed/src/index.ts
function render (line 30) | function render() {
FILE: packages/babel-plugin-debug-ids/src/index.ts
type DebugConfig (line 13) | type DebugConfig = {
type StyleFunction (line 76) | type StyleFunction = (typeof styleFunctions)[number];
type Context (line 229) | type Context = PluginPass & {
method pre (line 236) | pre() {
method ImportDeclaration (line 241) | ImportDeclaration(path) {
method CallExpression (line 260) | CallExpression(path) {
FILE: packages/compiler/src/compiler.ts
type Css (line 17) | type Css = Parameters<Adapter['appendCss']>[0];
type Composition (line 18) | type Composition = Parameters<Adapter['registerComposition']>[0];
type ModuleScanResult (line 22) | type ModuleScanResult = {
method resolveId (line 143) | async resolveId(source, importer) {
method transform (line 155) | async transform(code, id) {
class ViteNodeRunnerWithContext (line 182) | class ViteNodeRunnerWithContext extends ViteNodeRunner {
method prepareContext (line 185) | prepareContext(context: Record<string, any>): Record<string, any> {
method fetchModule (line 196) | fetchModule(id) {
method resolveId (line 199) | resolveId(id, importer) {
class NormalizedMap (line 216) | class NormalizedMap<V> extends Map<string, V> {
method constructor (line 217) | constructor(readonly root: string) {
method #normalizePath (line 221) | #normalizePath(filePath: string) {
method get (line 227) | get(filePath: string) {
method set (line 232) | set(filePath: string, value: V) {
type Compiler (line 238) | interface Compiler {
type ProcessedVanillaFile (line 255) | interface ProcessedVanillaFile {
type CreateCompilerOptions (line 260) | interface CreateCompilerOptions {
method processVanillaFile (line 327) | async processVanillaFile(
method unstable_invalidateAllModules (line 522) | async unstable_invalidateAllModules() {
method getCssForFile (line 537) | getCssForFile(filePath: string) {
method close (line 552) | async close() {
method getAllCss (line 557) | getAllCss() {
method findImporterTree (line 573) | async findImporterTree(filePath, transformedModules) {
function _findImporterTree (line 591) | function _findImporterTree(
FILE: packages/compiler/src/lock.ts
type AsyncFunction (line 1) | type AsyncFunction<T> = () => Promise<T>;
function lock (line 6) | async function lock<T>(fn: AsyncFunction<T>): Promise<T> {
function processQueue (line 28) | async function processQueue() {
FILE: packages/css/src/conditionalRulesets.ts
type Query (line 2) | type Query = string;
type Rule (line 4) | interface Rule {
type Condition (line 9) | type Condition = {
type RenderedConditionalRule (line 15) | type RenderedConditionalRule = Record<string, Record<string, any>>;
class ConditionalRuleset (line 17) | class ConditionalRuleset {
method constructor (line 27) | constructor() {
method findOrCreateCondition (line 32) | findOrCreateCondition(conditionQuery: Query): Condition {
method getConditionalRulesetByPath (line 48) | getConditionalRulesetByPath(conditionPath: Array<Query>): ConditionalR...
method addRule (line 62) | addRule(
method addConditionPrecedence (line 77) | addConditionPrecedence(
method isCompatible (line 97) | isCompatible(incomingRuleset: ConditionalRuleset): boolean {
method merge (line 128) | merge(incomingRuleset: ConditionalRuleset): void {
method mergeIfCompatible (line 161) | mergeIfCompatible(incomingRuleset: ConditionalRuleset): boolean {
method getSortedRuleset (line 171) | getSortedRuleset(): Condition[] {
method renderToArray (line 200) | renderToArray(): RenderedConditionalRule[] {
FILE: packages/css/src/fileScope.ts
function setFileScope (line 9) | function setFileScope(filePath: string, packageName?: string): void {
function endFileScope (line 19) | function endFileScope(): void {
function hasFileScope (line 25) | function hasFileScope(): boolean {
function getFileScope (line 29) | function getFileScope(): FileScope {
function getAndIncrementRefCounter (line 44) | function getAndIncrementRefCounter(): number {
FILE: packages/css/src/functionSerializer.ts
type Primitive (line 1) | type Primitive = string | number | boolean | null | undefined;
type Serializable (line 3) | type Serializable =
type SerializerConfig (line 10) | interface SerializerConfig {
function addFunctionSerializer (line 16) | function addFunctionSerializer<Target extends object>(
FILE: packages/css/src/identifier.ts
function getDevPrefix (line 7) | function getDevPrefix({
function normalizeIdentifier (line 30) | function normalizeIdentifier(identifier: string) {
type GenerateIdentifierOptions (line 34) | interface GenerateIdentifierOptions {
function generateIdentifier (line 41) | function generateIdentifier(
FILE: packages/css/src/injectStyles.ts
type InjectStylesOptions (line 5) | interface InjectStylesOptions {
FILE: packages/css/src/layer.ts
type LayerOptions (line 5) | type LayerOptions = {
function layer (line 28) | function layer(...args: any[]): string {
function globalLayer (line 43) | function globalLayer(...args: any[]): string {
FILE: packages/css/src/simplePseudos.ts
type SimplePseudos (line 124) | type SimplePseudos = keyof typeof simplePseudoMap;
FILE: packages/css/src/style.ts
function composedStyle (line 23) | function composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: s...
function style (line 70) | function style(rule: ComplexStyleRule, debugId?: string): string {
function composeStyles (line 86) | function composeStyles(...classNames: Array<ClassNames>): string {
function globalStyle (line 92) | function globalStyle(selector: string, rule: GlobalStyleRule): void {
function fontFace (line 96) | function fontFace(
function globalFontFace (line 124) | function globalFontFace(
function keyframes (line 138) | function keyframes(rule: CSSKeyframes, debugId?: string): string {
function globalKeyframes (line 148) | function globalKeyframes(name: string, rule: CSSKeyframes): void {
function styleVariants (line 163) | function styleVariants(...args: any[]) {
FILE: packages/css/src/theme.ts
type WithOptionalLayer (line 8) | type WithOptionalLayer<T extends Tokens> = T & {
type WithoutLayer (line 12) | type WithoutLayer<T> = Omit<T, '@layer'>;
function createGlobalTheme (line 23) | function createGlobalTheme(
function createTheme (line 75) | function createTheme(arg1: any, arg2?: any, arg3?: string): any {
function extractLayerFromTokens (line 90) | function extractLayerFromTokens(
FILE: packages/css/src/transformCss.test.ts
method selectors (line 1035) | get selectors() {
FILE: packages/css/src/transformCss.ts
constant DECLARATION (line 25) | const DECLARATION = '__DECLARATION';
constant UNITLESS (line 27) | const UNITLESS: Record<string, boolean> = {
function dashify (line 77) | function dashify(str: string) {
function replaceBetweenIndexes (line 84) | function replaceBetweenIndexes(
constant DOUBLE_SPACE (line 96) | const DOUBLE_SPACE = ' ';
type CSSRule (line 108) | interface CSSRule {
class Stylesheet (line 114) | class Stylesheet {
method constructor (line 126) | constructor(
method processCssObj (line 151) | processCssObj(root: CSS) {
method addConditionalRule (line 209) | addConditionalRule(cssRule: CSSRule, conditions: Array<string>) {
method addRule (line 231) | addRule(cssRule: CSSRule) {
method addLayer (line 242) | addLayer(layer: Array<string>) {
method transformProperties (line 248) | transformProperties(cssRule: CSSPropertiesWithVars) {
method pixelifyProperties (line 252) | pixelifyProperties(cssRule: CSSPropertiesWithVars) {
method transformVars (line 267) | transformVars({ vars, ...rest }: CSSPropertiesWithVars) {
method transformContent (line 278) | transformContent({ content, ...rest }: CSSPropertiesWithVars) {
method transformClassname (line 302) | transformClassname(identifier: string) {
method transformSelector (line 308) | transformSelector(selector: string) {
method transformSelectors (line 365) | transformSelectors(
method transformMedia (line 421) | transformMedia(
method transformContainer (line 464) | transformContainer(
method transformLayer (line 505) | transformLayer(
method transformSupports (line 545) | transformSupports(
method transformSimplePseudos (line 584) | transformSimplePseudos(
method transformStartingStyle (line 619) | transformStartingStyle(
method toCss (line 656) | toCss() {
function renderCss (line 706) | function renderCss(v: Record<string, any>, indent: string = '') {
type TransformCSSParams (line 737) | interface TransformCSSParams {
function transformCss (line 742) | function transformCss({
FILE: packages/css/src/types.ts
type Resolve (line 6) | type Resolve<T> = {
type CSSTypeProperties (line 10) | type CSSTypeProperties = Properties<number | (string & {})>;
type CSSProperties (line 12) | type CSSProperties = {
type CSSKeyframes (line 19) | interface CSSKeyframes {
type CSSPropertiesWithVars (line 23) | type CSSPropertiesWithVars = CSSProperties & {
type PseudoProperties (line 29) | type PseudoProperties = {
type CSSPropertiesAndPseudos (line 33) | type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
type Query (line 35) | type Query<Key extends string, StyleType> = {
type MediaQueries (line 41) | type MediaQueries<StyleType> = Query<'@media', StyleType>;
type FeatureQueries (line 42) | type FeatureQueries<StyleType> = Query<'@supports', StyleType>;
type ContainerQueries (line 43) | type ContainerQueries<StyleType> = Query<'@container', StyleType>;
type Layers (line 44) | type Layers<StyleType> = Query<'@layer', StyleType>;
type StartingStyle (line 45) | type StartingStyle<StyleType> = {
type AllQueries (line 49) | interface AllQueries<StyleType>
type WithQueries (line 57) | type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
type SelectorMap (line 59) | interface SelectorMap {
type StyleWithSelectors (line 63) | interface StyleWithSelectors extends CSSPropertiesAndPseudos {
type StyleRule (line 67) | type StyleRule = WithQueries<StyleWithSelectors>;
type GlobalStyleRule (line 69) | type GlobalStyleRule = WithQueries<CSSPropertiesWithVars>;
type GlobalFontFaceRule (line 71) | type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> &
type FontFaceRule (line 73) | type FontFaceRule = Omit<GlobalFontFaceRule, 'fontFamily'>;
type CSSStyleBlock (line 75) | type CSSStyleBlock = {
type CSSFontFaceBlock (line 81) | type CSSFontFaceBlock = {
type CSSKeyframesBlock (line 86) | type CSSKeyframesBlock = {
type CSSSelectorBlock (line 92) | type CSSSelectorBlock = {
type CSSLayerDeclaration (line 98) | type CSSLayerDeclaration = {
type CSSPropertyBlock (line 103) | type CSSPropertyBlock = {
type CSS (line 109) | type CSS =
type FileScope (line 117) | type FileScope = {
type Composition (line 122) | interface Composition {
type CustomIdentFunction (line 127) | type CustomIdentFunction = (params: {
type IdentOption (line 134) | type IdentOption = 'short' | 'debug' | CustomIdentFunction;
type Adapter (line 136) | interface Adapter {
type NullableTokens (line 146) | type NullableTokens = {
type Tokens (line 150) | type Tokens = {
type ThemeVars (line 154) | type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<
type ClassNames (line 159) | type ClassNames = string | Array<ClassNames>;
type ComplexStyleRule (line 161) | type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
type _PropertySyntax (line 163) | type _PropertySyntax =
type LooseAutocomplete (line 182) | type LooseAutocomplete<Suggestions extends string> =
type PropertySyntax (line 186) | type PropertySyntax = LooseAutocomplete<_PropertySyntax>;
FILE: packages/css/src/utils.ts
type BasicObj (line 3) | type BasicObj = { [key: string]: any };
function forEach (line 5) | function forEach<Input extends BasicObj>(
function omit (line 14) | function omit<Input extends BasicObj, OmitKey extends string>(
function mapKeys (line 29) | function mapKeys<Input extends BasicObj>(
function isEqual (line 42) | function isEqual(a: any, b: any) {
function composeStylesIntoSet (line 67) | function composeStylesIntoSet(
function dedupeAndJoinClassList (line 88) | function dedupeAndJoinClassList(classNames: Array<ClassNames>) {
FILE: packages/css/src/validateContract.ts
function validateContract (line 7) | function validateContract(
function diffLine (line 23) | function diffLine(value: string, nesting: number, type?: '+' | '-') {
function renderDiff (line 40) | function renderDiff(orig: any, diff: any, nesting: number = 0): string {
FILE: packages/css/src/validateSelector.ts
function escapeRegex (line 6) | function escapeRegex(string: string) {
type Selector (line 10) | type Selector = ReturnType<typeof parse>[number];
function targetsClassName (line 12) | function targetsClassName(tokens: Selector, targetClassName: string): bo...
FILE: packages/css/src/vars.ts
type VarDeclaration (line 19) | type VarDeclaration =
function createVar (line 46) | function createVar(
function createGlobalVar (line 80) | function createGlobalVar(
function assertVarName (line 98) | function assertVarName(
function fallbackVar (line 106) | function fallbackVar(
function assignVars (line 124) | function assignVars<VarContract extends Contract>(
function createThemeContract (line 142) | function createThemeContract<ThemeTokens extends NullableTokens>(
function createGlobalThemeContract (line 157) | function createGlobalThemeContract(
FILE: packages/dynamic/src/assignInlineVars.ts
type Styles (line 9) | type Styles = { [cssVarName: string]: string };
function assignInlineVars (line 18) | function assignInlineVars(varsOrContract: any, tokens?: any) {
FILE: packages/dynamic/src/setElementVars.ts
function setVar (line 9) | function setVar(element: HTMLElement, variable: string, value: string) {
function setElementVars (line 22) | function setElementVars(
FILE: packages/esbuild-plugin-next/src/index.ts
type VanillaExtractPluginOptions (line 16) | interface VanillaExtractPluginOptions {
function vanillaExtractPlugin (line 23) | function vanillaExtractPlugin({
FILE: packages/esbuild-plugin/src/index.ts
type VanillaExtractPluginOptions (line 17) | interface VanillaExtractPluginOptions {
function vanillaExtractPlugin (line 28) | function vanillaExtractPlugin({
FILE: packages/integration/src/addFileScope.ts
type AddFileScopeParams (line 10) | interface AddFileScopeParams {
function addFileScope (line 17) | function addFileScope({
FILE: packages/integration/src/compile.ts
type VanillaExtractTransformPluginParams (line 15) | interface VanillaExtractTransformPluginParams {
method setup (line 22) | setup(build) {
type CompileOptions (line 46) | interface CompileOptions {
function compile (line 55) | async function compile({
FILE: packages/integration/src/packageInfo.ts
type PackageInfo (line 5) | interface PackageInfo {
function getClosestPackageInfo (line 11) | function getClosestPackageInfo(directory: string) {
function getPackageInfo (line 29) | function getPackageInfo(cwd?: string | null): PackageInfo {
FILE: packages/integration/src/processVanillaFile.ts
function isPlainObject (line 15) | function isPlainObject(value: unknown) {
function stringifyFileScope (line 40) | function stringifyFileScope({
function parseFileScope (line 47) | function parseFileScope(serialisedFileScope: string): FileScope {
type ProcessVanillaFileOptions (line 56) | interface ProcessVanillaFileOptions {
function processVanillaFile (line 67) | async function processVanillaFile({
function stringifyExports (line 181) | function stringifyExports(
class DependencyGraph (line 289) | class DependencyGraph {
method constructor (line 292) | public constructor() {
method addDependency (line 299) | public addDependency(key: string, dependency: string) {
method dependsOn (line 312) | public dependsOn(key: string, dependency: string): boolean {
function serializeVanillaModule (line 331) | function serializeVanillaModule(
FILE: packages/integration/src/serialize.ts
function serializeCss (line 11) | async function serializeCss(source: string): Promise<string> {
function deserializeCss (line 21) | async function deserializeCss(source: string): Promise<string> {
FILE: packages/integration/src/transform.ts
type TransformParams (line 9) | interface TransformParams {
FILE: packages/integration/src/types.ts
type IdentifierOption (line 3) | type IdentifierOption = ReturnType<Adapter['getIdentOption']>;
FILE: packages/integration/src/virtualFile.ts
function getSourceFromVirtualCssFile (line 3) | async function getSourceFromVirtualCssFile(id: string): Promise<{
FILE: packages/jest-transform/src/index.ts
method process (line 12) | process(source, filePath, options) {
FILE: packages/next-plugin/src/index.ts
type PluginOptions (line 21) | type PluginOptions = ConstructorParameters<typeof VanillaExtractPlugin>[...
function getSupportedBrowsers (line 37) | function getSupportedBrowsers(dir: string, isDevelopment: boolean) {
method webpack (line 225) | webpack(config: any, options: WebpackConfigContext) {
FILE: packages/parcel-transformer/src/index.ts
method transform (line 5) | async transform({ asset, options }) {
FILE: packages/private/src/get.ts
function get (line 1) | function get(obj: any, path: Array<string>): any {
FILE: packages/private/src/getVarName.ts
function getVarName (line 1) | function getVarName(variable: string): string {
FILE: packages/private/src/types.ts
type CSSVarFunction (line 1) | type CSSVarFunction = `var(--${string})`;
type Contract (line 3) | type Contract = {
type Primitive (line 7) | type Primitive = string | boolean | number | null | undefined;
type MapLeafNodes (line 9) | type MapLeafNodes<Obj, LeafType> = {
FILE: packages/private/src/walkObject.ts
type Primitive (line 3) | type Primitive = string | number | null | undefined;
type Walkable (line 5) | type Walkable = {
function walkObject (line 9) | function walkObject<T extends Walkable, MapTo>(
FILE: packages/recipes/src/createRuntimeFn.ts
method base (line 70) | get base() {
method variants (line 74) | get variants() {
FILE: packages/recipes/src/index.ts
function recipe (line 16) | function recipe<Variants extends VariantGroups>(
FILE: packages/recipes/src/types.ts
type Resolve (line 3) | type Resolve<T> = {
type RecipeStyleRule (line 7) | type RecipeStyleRule = ComplexStyleRule | string;
type VariantDefinitions (line 9) | type VariantDefinitions = Record<string, RecipeStyleRule>;
type BooleanMap (line 11) | type BooleanMap<T> = T extends 'true' | 'false' ? boolean : T;
type VariantGroups (line 13) | type VariantGroups = Record<string, VariantDefinitions>;
type VariantSelection (line 14) | type VariantSelection<Variants extends VariantGroups> = {
type VariantsClassNames (line 20) | type VariantsClassNames<Variants extends VariantGroups> = {
type PatternResult (line 26) | type PatternResult<Variants extends VariantGroups> = {
type CompoundVariant (line 33) | interface CompoundVariant<Variants extends VariantGroups> {
type PatternOptions (line 38) | type PatternOptions<Variants extends VariantGroups> = {
type RecipeClassNames (line 45) | type RecipeClassNames<Variants extends VariantGroups> = {
type RuntimeFn (line 50) | type RuntimeFn<Variants extends VariantGroups> = ((
type RecipeVariants (line 57) | type RecipeVariants<RecipeFn extends RuntimeFn<VariantGroups>> = Resolve<
FILE: packages/recipes/src/utils.ts
function mapValues (line 1) | function mapValues<Input extends Record<string, any>, OutputValue>(
FILE: packages/rollup-plugin/src/index.ts
type Options (line 21) | interface Options {
function vanillaExtractPlugin (line 72) | function vanillaExtractPlugin({
FILE: packages/rollup-plugin/src/lib.ts
function generateCssBundle (line 7) | function generateCssBundle(
type ImportChain (line 43) | type ImportChain = [id: string, order: number][];
function buildImportChain (line 46) | function buildImportChain(
function sortModules (line 82) | function sortModules(modules: Record<string, ImportChain>): string[] {
constant SIDE_EFFECT_IMPORT_RE (line 105) | const SIDE_EFFECT_IMPORT_RE =
function tryGetPackageName (line 117) | async function tryGetPackageName(cwd: string): Promise<string | null> {
FILE: packages/rollup-plugin/test/rollup-plugin.test.ts
type BuildOptions (line 25) | interface BuildOptions extends VanillaExtractPluginOptions {
function build (line 29) | async function build({
function buildAndMatchSnapshot (line 53) | async function buildAndMatchSnapshot(options: BuildOptions) {
method assetFileNames (line 179) | assetFileNames({ names }) {
function build (line 207) | async function build({
function buildAndMatchSnapshot (line 233) | async function buildAndMatchSnapshot(
method assetFileNames (line 344) | assetFileNames({ names }) {
method assetFileNames (line 362) | assetFileNames({ names }) {
FILE: packages/sprinkles/src/createSprinkles.ts
type ResponsiveArrayVariant (line 11) | type ResponsiveArrayVariant<
type ConditionalStyle (line 16) | type ConditionalStyle<
type ConditionalStyleWithResponsiveArray (line 25) | type ConditionalStyleWithResponsiveArray<
type ChildSprinkleProps (line 30) | type ChildSprinkleProps<Sprinkles extends SprinklesProperties['styles']>...
type SprinkleProps (line 58) | type SprinkleProps<Args extends ReadonlyArray<any>> = Args extends [
type SprinklesFn (line 66) | type SprinklesFn<Args extends ReadonlyArray<SprinklesProperties>> = ((
class SprinklesError (line 166) | class SprinklesError extends Error {
method constructor (line 167) | constructor(message: string) {
function format (line 278) | function format(v: string | number) {
FILE: packages/sprinkles/src/createUtils.ts
type ExtractValue (line 7) | type ExtractValue<
type Conditions (line 24) | type Conditions<ConditionName extends string> = {
type ExtractDefaultCondition (line 32) | type ExtractDefaultCondition<SprinklesProperties extends Conditions<stri...
type ExtractConditionNames (line 35) | type ExtractConditionNames<SprinklesProperties extends Conditions<string...
type ConditionalValue (line 38) | type ConditionalValue<
type RequiredConditionalObject (line 53) | type RequiredConditionalObject<
type RequiredConditionalValue (line 60) | type RequiredConditionalValue<
function createNormalizeValueFn (line 85) | function createNormalizeValueFn<
function createMapValueFn (line 137) | function createMapValueFn<
FILE: packages/sprinkles/src/index.ts
type ConditionKey (line 21) | type ConditionKey = '@media' | '@supports' | '@container' | 'selector';
type Condition (line 22) | type Condition = Partial<Record<ConditionKey, string>>;
type BaseConditions (line 24) | type BaseConditions = { [conditionName: string]: Condition };
type AtomicCSSProperties (line 26) | type AtomicCSSProperties = {
type AtomicCustomProperties (line 32) | type AtomicCustomProperties = Record<
type AtomicProperties (line 37) | type AtomicProperties = AtomicCSSProperties | AtomicCustomProperties;
type ShorthandOptions (line 39) | type ShorthandOptions<
type UnconditionalAtomicOptions (line 46) | type UnconditionalAtomicOptions<Properties extends AtomicProperties> = {
type ResponsiveArrayOptions (line 51) | type ResponsiveArrayOptions<
type ConditionalAtomicOptions (line 60) | type ConditionalAtomicOptions<
type Values (line 69) | type Values<Property, Result> = {
type UnconditionalAtomicStyles (line 77) | type UnconditionalAtomicStyles<Properties extends AtomicProperties> = {
type ConditionalAtomicStyles (line 86) | type ConditionalAtomicStyles<
type ConditionalWithResponsiveArrayAtomicStyles (line 110) | type ConditionalWithResponsiveArrayAtomicStyles<
type ShorthandAtomicStyles (line 137) | type ShorthandAtomicStyles<
function defineProperties (line 213) | function defineProperties(options: any): any {
function createSprinkles (line 359) | function createSprinkles<
FILE: packages/sprinkles/src/types.ts
type ResponsiveArray (line 1) | interface ResponsiveArray<
type RequiredResponsiveArray (line 9) | interface RequiredResponsiveArray<
type ResponsiveArrayConfig (line 17) | type ResponsiveArrayConfig<Value> = ResponsiveArray<
type ResponsiveArrayByMaxLength (line 22) | type ResponsiveArrayByMaxLength<MaxLength extends number, Value> = [
type RequiredResponsiveArrayByMaxLength (line 34) | type RequiredResponsiveArrayByMaxLength<
type ConditionalPropertyValue (line 49) | type ConditionalPropertyValue = {
type ConditionalWithResponsiveArrayProperty (line 56) | type ConditionalWithResponsiveArrayProperty = {
type ConditionalProperty (line 63) | type ConditionalProperty = {
type UnconditionalProperty (line 69) | type UnconditionalProperty = {
type ShorthandProperty (line 77) | type ShorthandProperty = {
type SprinklesProperties (line 81) | type SprinklesProperties = {
type AtomicStyles (line 92) | type AtomicStyles = SprinklesProperties;
FILE: packages/turbopack-plugin/src/index.ts
type TurboLoaderContext (line 15) | type TurboLoaderContext<OptionsType> = {
type TurboLoaderOptions (line 32) | type TurboLoaderOptions = {
method load (line 84) | async load(id: string) {
method resolveId (line 101) | async resolveId(source: string, importer: string | undefined) {
method resolveId (line 167) | async resolveId(source: string, importer: string | undefined) {
function turbopackVanillaExtractLoader (line 187) | async function turbopackVanillaExtractLoader(
FILE: packages/turbopack-plugin/src/next-font/inject.ts
function injectFontImports (line 11) | async function injectFontImports(
FILE: packages/turbopack-plugin/src/next-font/plugin.ts
function createNextFontVePlugin (line 4) | function createNextFontVePlugin(): Plugin {
FILE: packages/turbopack-plugin/src/next-font/transform.ts
type NextFontTransformResult (line 4) | type NextFontTransformResult = {
constant THROW_MSG (line 9) | const THROW_MSG =
constant GENERIC_FAMILIES (line 12) | const GENERIC_FAMILIES = new Set([
function formatFontFamily (line 30) | function formatFontFamily(name: string): string {
function getFontFamily (line 35) | function getFontFamily(
function parseWeight (line 59) | function parseWeight(weight: unknown): number | undefined {
function parseStyle (line 68) | function parseStyle(style: unknown, isGoogle: boolean): string | undefin...
type FontOptions (line 76) | type FontOptions = {
function unwrapValue (line 87) | function unwrapValue(node: Expression | undefined): unknown {
function extractFontOptions (line 108) | function extractFontOptions(args: Argument[]): FontOptions {
function createStubNode (line 146) | async function createStubNode(
function processDeclarator (line 176) | async function processDeclarator(
function transformNextFont (line 210) | async function transformNextFont(
FILE: packages/utils/src/index.ts
type Operator (line 1) | type Operator = '+' | '-' | '*' | '/';
type Operand (line 2) | type Operand = string | number | CalcChain;
type CalcChain (line 24) | type CalcChain = {
type Calc (line 33) | interface Calc {
FILE: packages/vite-plugin/src/index.ts
constant PLUGIN_NAMESPACE (line 22) | const PLUGIN_NAMESPACE = 'vite-plugin-vanilla-extract';
type PluginFilter (line 33) | type PluginFilter = (filterProps: {
type Options (line 43) | interface Options {
constant COMPATIBLE_PLUGINS (line 51) | const COMPATIBLE_PLUGINS = ['vite-tsconfig-paths'];
function vanillaExtractPlugin (line 61) | function vanillaExtractPlugin({
FILE: packages/webpack-plugin/src/compat.ts
type WebpackCompat (line 10) | interface WebpackCompat {
FILE: packages/webpack-plugin/src/compiler.ts
type Externals (line 5) | type Externals = any;
type CompilationResult (line 7) | interface CompilationResult {
class ChildCompiler (line 16) | class ChildCompiler {
method constructor (line 19) | constructor(externals: Externals) {
method isChildCompiler (line 23) | isChildCompiler(name: string | undefined): boolean {
method getCompiledSource (line 29) | async getCompiledSource(loader: LoaderContext): Promise<{
function getRootCompilation (line 51) | function getRootCompilation(loader: LoaderContext) {
function compileVanillaSource (line 69) | function compileVanillaSource(
FILE: packages/webpack-plugin/src/index.ts
class VanillaExtractPlugin (line 4) | class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {
method apply (line 5) | apply(compiler: Compiler): void {
FILE: packages/webpack-plugin/src/loader.ts
type LoaderOptions (line 36) | interface LoaderOptions {
type InternalLoaderOptions (line 41) | interface InternalLoaderOptions extends LoaderOptions {
function pitch (line 74) | function pitch(this: LoaderContext): void {
FILE: packages/webpack-plugin/src/next.ts
class VanillaExtractPlugin (line 15) | class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {
method apply (line 18) | apply(compiler: Compiler): void {
FILE: packages/webpack-plugin/src/plugin.ts
function markCSSFilesAsSideEffects (line 16) | function markCSSFilesAsSideEffects(compiler: Compiler, compat: WebpackCo...
type PluginOptions (line 56) | interface PluginOptions {
method constructor (line 72) | constructor(options: PluginOptions = {}) {
method inject (line 92) | protected inject(
FILE: packages/webpack-plugin/src/types.ts
type LoaderContext (line 3) | interface LoaderContext {
FILE: scripts/build-dts.ts
function resolveEntry (line 11) | function resolveEntry<PackageJson>(
function buildEntry (line 30) | async function buildEntry(packageDir: string, entryPath: string) {
function removePreconstructDeclarations (line 83) | async function removePreconstructDeclarations(
FILE: site/code-block-loader.js
function extractFilesFromCodeBlock (line 40) | function extractFilesFromCodeBlock(code) {
function getCss (line 64) | async function getCss(entrypointFile, files, rootContext) {
function loader (line 129) | async function loader(source) {
FILE: site/src/Chevron/Chevron.tsx
type ChevronProps (line 4) | interface ChevronProps {
FILE: site/src/Code/CompiledCode.tsx
type File (line 10) | interface File {
type CompiledCodeProps (line 17) | interface CompiledCodeProps {
FILE: site/src/Code/ErrorHighlighter.tsx
type CodeProps (line 4) | interface CodeProps {
FILE: site/src/Code/SyntaxHighlighter.tsx
type CodeProps (line 14) | interface CodeProps {
FILE: site/src/ColorModeToggle/ColorModeToggle.tsx
type ColorMode (line 11) | type ColorMode = 'dark' | 'light';
type ColorModeContextValues (line 14) | interface ColorModeContextValues {
function ColorModeProvider (line 24) | function ColorModeProvider({ children }: { children: ReactNode }) {
FILE: site/src/DocsPage/DocsPage.tsx
type DocsRouteProps (line 26) | interface DocsRouteProps {
FILE: site/src/DocsPage/SiblingDoc/SiblingDoc.tsx
type SiblingDocProps (line 6) | interface SiblingDocProps {
FILE: site/src/InlineCode/InlineCode.tsx
type InlineCodeProps (line 5) | interface InlineCodeProps {
FILE: site/src/SearchInput/SearchInput.tsx
type DocSearchProps (line 7) | type DocSearchProps = ComponentProps<typeof DocSearch>;
FILE: site/src/Tweet/Tweet.tsx
type TweetProps (line 7) | interface TweetProps {
FILE: site/src/Typography/Heading.tsx
type HeadingLevel (line 8) | type HeadingLevel = keyof typeof styles.heading;
type HeadingProps (line 27) | interface HeadingProps {
FILE: site/src/Typography/Link.tsx
type Props (line 8) | interface Props extends LinkProps {
FILE: site/src/Typography/Text.tsx
type TextStyleProps (line 16) | interface TextStyleProps {
type TextProps (line 25) | interface TextProps extends TextStyleProps {
FILE: site/src/mdx-components.tsx
type HeadingProps (line 92) | interface HeadingProps extends AllHTMLAttributes<HTMLHeadingElement> {
FILE: site/src/render.tsx
type HeadTags (line 10) | type HeadTags = React.ReactElement<unknown>[];
type RenderParams (line 26) | interface RenderParams {
FILE: site/src/system/Box/Box.tsx
type BoxProps (line 6) | interface BoxProps
FILE: site/src/system/ButtonLink/ButtonLink.tsx
type ButtonLinkProps (line 9) | interface ButtonLinkProps extends NavLinkProps {
FILE: site/src/system/Columns/Columns.tsx
type Props (line 9) | interface Props {
FILE: site/src/system/styles/sprinkles.css.ts
type Space (line 14) | type Space = keyof typeof space;
type ResponsiveValue (line 75) | type ResponsiveValue<Value extends string | number> = ConditionalValue<
type Sprinkles (line 120) | type Sprinkles = Parameters<typeof sprinkles>[0];
FILE: site/src/themeUtils.ts
type Breakpoint (line 13) | type Breakpoint = keyof typeof breakpoints;
type CSSProps (line 14) | type CSSProps = Omit<StyleRule, '@media' | '@supports'>;
type ResponsiveStyle (line 34) | interface ResponsiveStyle {
FILE: test-helpers/src/getStylesheet.ts
function getStylesheet (line 8) | async function getStylesheet(
FILE: test-helpers/src/startFixture/esbuild.ts
type EsbuildFixtureOptions (line 10) | interface EsbuildFixtureOptions {
FILE: test-helpers/src/startFixture/index.ts
type SharedOptions (line 13) | type SharedOptions = {
type FixtureOptions (line 17) | type FixtureOptions = SharedOptions &
function startFixture (line 26) | async function startFixture(
FILE: test-helpers/src/startFixture/next.ts
type Server (line 12) | type Server = _Server & {
constant DIST_DIR (line 16) | const DIST_DIR = 'dist';
type NextFixtureOptions (line 22) | interface NextFixtureOptions {
FILE: test-helpers/src/startFixture/parcel.ts
type ParcelFixtureOptions (line 7) | interface ParcelFixtureOptions {
FILE: test-helpers/src/startFixture/types.ts
type BuildType (line 7) | type BuildType =
type TestServer (line 14) | interface TestServer {
FILE: test-helpers/src/startFixture/vite.ts
type ViteFixtureOptions (line 29) | interface ViteFixtureOptions {
FILE: test-helpers/src/startFixture/webpack.ts
type WebpackFixtureOptions (line 35) | interface WebpackFixtureOptions {
FILE: tests/compiler/compiler.test.ts
function getLocalFiles (line 13) | function getLocalFiles(files: Set<string>) {
method resolveId (line 47) | resolveId(id) {
FILE: tests/compiler/fixtures/selectors/getter.css.ts
method selectors (line 5) | get selectors() {
FILE: tests/e2e/fixture.ts
type TestFixtures (line 3) | type TestFixtures = {
FILE: tests/recipes/recipes-type-tests.ts
type AssertIsString (line 8) | type AssertIsString<S> = S extends string ? true : never;
type TextVariants (line 22) | type TextVariants = RecipeVariants<typeof textRecipes>;
FILE: tests/servers.ts
type ServerDefinition (line 1) | interface ServerDefinition {
constant NEXT_SERVERS (line 9) | const NEXT_SERVERS: ServerDefinition[] = [
FILE: tests/sprinkles/sprinkles-type-tests.ts
function testGenericNormalizeValue (line 136) | function testGenericNormalizeValue<Key extends string | number | boolean>(
type ResponsiveValue (line 166) | type ResponsiveValue<Value extends string | number | boolean> =
type InvalidRequiredResponsiveValue (line 269) | type InvalidRequiredResponsiveValue<Value extends string | number> =
Condensed preview — 572 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,649K chars).
[
{
"path": ".changeset/README.md",
"chars": 512,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 540,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@3.0.3/schema.json\",\n \"changelog\": [\n \"@changesets/changelog-git"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yml",
"chars": 2483,
"preview": "name: \"Bug report\"\ndescription: Report an issue with vanilla-extract\nlabels: [pending triage]\nbody:\n - type: markdown\n "
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 400,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Feature requests, Questions & Discussions\n url: https://github.c"
},
{
"path": ".github/workflows/deploy-site.yml",
"chars": 1014,
"preview": "name: Deploy site\n\non: push\n\njobs:\n deploy-site:\n name: Deploy site\n runs-on: ubuntu-latest\n env:\n CI: tr"
},
{
"path": ".github/workflows/release.yml",
"chars": 1763,
"preview": "name: Release\n\non:\n push:\n branches:\n - master\n workflow_dispatch:\n\njobs:\n release:\n name: Publish & Deplo"
},
{
"path": ".github/workflows/validate.yml",
"chars": 2790,
"preview": "name: Validate\n\non: [push, pull_request]\n\njobs:\n test:\n strategy:\n matrix:\n # Blank string allows us to "
},
{
"path": ".gitignore",
"chars": 222,
"preview": "node_modules\ndist\ntsconfig.tsbuildinfo\npackages/**/README.md\n!packages/sprinkles/README.md\n!packages/integration/README."
},
{
"path": ".npmrc",
"chars": 37,
"preview": "registry=https://registry.npmjs.org/\n"
},
{
"path": ".nvmrc",
"chars": 12,
"preview": "lts/krypton\n"
},
{
"path": ".oxlintrc.json",
"chars": 129,
"preview": "{\n \"$schema\": \"./node_modules/oxlint/configuration_schema.json\",\n \"ignorePatterns\": [\"packages/webpack-plugin/extracte"
},
{
"path": ".prettierignore",
"chars": 208,
"preview": ".idea/\n.vscode/\nnode_modules\ndist\nCHANGELOG.md\nREADME.md\n.github/ISSUE_TEMPLATE\nsite/docs-manifest.json\n.changeset\n.next"
},
{
"path": ".vscode/settings.json",
"chars": 124,
"preview": "{\n \"typescript.tsdk\": \"node_modules/typescript/lib\",\n \"vitest.enable\": true,\n \"vitest.commandLine\": \"pnpm test:vitest"
},
{
"path": "LICENSE",
"chars": 1060,
"preview": "MIT License\n\nCopyright (c) 2021 SEEK\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof th"
},
{
"path": "README.md",
"chars": 3140,
"preview": "# 🧁 vanilla-extract\n\n**Zero-runtime Stylesheets-in-TypeScript.**\n\nWrite your styles in TypeScript (or JavaScript) with l"
},
{
"path": "babel.config.js",
"chars": 440,
"preview": "module.exports = {\n presets: [\n ['@babel/preset-env', { targets: { node: '14.21' } }],\n '@babel/preset-typescript"
},
{
"path": "docs/treat-migration-guide.md",
"chars": 11924,
"preview": "# 🍬 treat migration guide\n\n🎉 First of all, thanks for using treat, and thanks for your interest in vanilla-extract!\n\nWhe"
},
{
"path": "examples/next/components/HelloWorld.css.ts",
"chars": 774,
"preview": "import { style, createVar, keyframes, fallbackVar } from '@vanilla-extract/css';\n\nconst color = createVar();\nconst angle"
},
{
"path": "examples/next/components/HelloWorld.tsx",
"chars": 184,
"preview": "import * as styles from './HelloWorld.css';\n\nexport function HelloWorld() {\n return (\n <div className={styles.root}>"
},
{
"path": "examples/next/next.config.js",
"chars": 177,
"preview": "const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');\nconst withVanillaExtract = createVanilla"
},
{
"path": "examples/next/package.json",
"chars": 604,
"preview": "{\n \"name\": \"vanilla-extract-example-next\",\n \"description\": \"Example project using vanilla-extract, compiling with Next"
},
{
"path": "examples/next/pages/index.tsx",
"chars": 116,
"preview": "import { HelloWorld } from '../components/HelloWorld';\n\nexport default function Home() {\n return <HelloWorld />;\n}\n"
},
{
"path": "examples/next/tsconfig.json",
"chars": 510,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": "examples/webpack-react/CHANGELOG.md",
"chars": 9851,
"preview": "# vanilla-extract-example-webpack-react\n\n## 0.0.34\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45"
},
{
"path": "examples/webpack-react/package.json",
"chars": 1168,
"preview": "{\n \"name\": \"vanilla-extract-example-webpack-react\",\n \"description\": \"Example React project using vanilla-extract and S"
},
{
"path": "examples/webpack-react/sandbox.config.json",
"chars": 80,
"preview": "{\n \"template\": \"node\",\n \"node\": \"14\",\n \"container\": {\n \"node\": \"14\"\n }\n}\n"
},
{
"path": "examples/webpack-react/src/App.css.ts",
"chars": 502,
"preview": "import { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css';\n\nexport const card = style([\n"
},
{
"path": "examples/webpack-react/src/App.tsx",
"chars": 1645,
"preview": "import { sprinkles } from './sprinkles.css';\nimport * as styles from './App.css';\n\nexport const App = () => (\n <div\n "
},
{
"path": "examples/webpack-react/src/global.css.ts",
"chars": 130,
"preview": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('body, body *', {\n all: 'unset',\n boxSizing: 'border-"
},
{
"path": "examples/webpack-react/src/index.tsx",
"chars": 190,
"preview": "import { render } from 'react-dom';\nimport './global.css';\nimport { App } from './App';\n\nconst root = document.createEle"
},
{
"path": "examples/webpack-react/src/sprinkles.css.ts",
"chars": 1556,
"preview": "import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css';\n\ncons"
},
{
"path": "examples/webpack-react/src/vars.css.ts",
"chars": 2298,
"preview": "import { createGlobalTheme } from '@vanilla-extract/css';\nimport { modularScale } from 'polished';\nimport colors from 't"
},
{
"path": "examples/webpack-react/webpack.config.js",
"chars": 1260,
"preview": "const path = require('path');\nconst { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');\nconst HtmlWeb"
},
{
"path": "fixtures/features/CHANGELOG.md",
"chars": 8298,
"preview": "# @fixtures/features\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`]"
},
{
"path": "fixtures/features/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/features/package.json",
"chars": 260,
"preview": "{\n \"name\": \"@fixtures/features\",\n \"version\": \"0.0.31\",\n \"main\": \"src/index.ts\",\n \"sideEffects\": true,\n \"author\": \"S"
},
{
"path": "fixtures/features/src/features.css.ts",
"chars": 1907,
"preview": "import { globalStyle, style, styleVariants } from '@vanilla-extract/css';\n\nexport const mergedStyle = style([\n { height"
},
{
"path": "fixtures/features/src/html.ts",
"chars": 1435,
"preview": "import * as styles from './features.css';\nimport testNodes from '../test-nodes.json';\n\nexport default `\n <div id=\"${t"
},
{
"path": "fixtures/features/src/index.ts",
"chars": 95,
"preview": "import html from './html';\n\nfunction render() {\n document.body.innerHTML = html;\n}\n\nrender();\n"
},
{
"path": "fixtures/features/test-nodes.json",
"chars": 525,
"preview": "{\n \"mergedStyle\": \"mergedStyle\",\n \"styleWithComposition\": \"styleWithComposition\",\n \"styleWithNestedComposition\": \"sty"
},
{
"path": "fixtures/layers/CHANGELOG.md",
"chars": 3291,
"preview": "# @fixtures/layers\n\n## 0.0.14\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](h"
},
{
"path": "fixtures/layers/index.html",
"chars": 294,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/layers/package.json",
"chars": 188,
"preview": "{\n \"name\": \"@fixtures/layers\",\n \"version\": \"0.0.14\",\n \"main\": \"src/index.ts\",\n \"author\": \"SEEK\",\n \"private\": true,\n"
},
{
"path": "fixtures/layers/src/index.ts",
"chars": 533,
"preview": "import { link, pink } from './styles.css';\n\nconst html = String.raw;\n\ndocument.body.innerHTML = html`\n <main>\n <p>\n "
},
{
"path": "fixtures/layers/src/styles.css.ts",
"chars": 1032,
"preview": "import { style, globalStyle, layer, globalLayer } from '@vanilla-extract/css';\n\n/*\nThe resulting layer order:\n1. lib\n2. "
},
{
"path": "fixtures/low-level/CHANGELOG.md",
"chars": 7785,
"preview": "# @fixtures/low-level\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`"
},
{
"path": "fixtures/low-level/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/low-level/package.json",
"chars": 191,
"preview": "{\n \"name\": \"@fixtures/low-level\",\n \"version\": \"0.0.31\",\n \"main\": \"src/index.ts\",\n \"author\": \"SEEK\",\n \"private\": tru"
},
{
"path": "fixtures/low-level/src/index.ts",
"chars": 373,
"preview": "import { block, container } from './styles.css';\nimport testNodes from '../test-nodes.json';\n\ndocument.body.innerHTML = "
},
{
"path": "fixtures/low-level/src/styles.css.ts",
"chars": 556,
"preview": "import { style, createVar, createContainer } from '@vanilla-extract/css';\n\nconst color = createVar();\n\nconst myContainer"
},
{
"path": "fixtures/low-level/test-nodes.json",
"chars": 23,
"preview": "{\n \"block\": \"block\"\n}\n"
},
{
"path": "fixtures/next-12-pages-router/CHANGELOG.md",
"chars": 2849,
"preview": "# @fixtures/next-pages-router\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03"
},
{
"path": "fixtures/next-12-pages-router/next.config.js",
"chars": 612,
"preview": "const {\n createVanillaExtractPlugin,\n} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');\n\nconst withV"
},
{
"path": "fixtures/next-12-pages-router/package.json",
"chars": 910,
"preview": "{\n \"name\": \"@fixtures/next-12-pages-router\",\n \"description\": \"Next pages router fixtures\",\n \"version\": \"0.0.7\",\n \"pr"
},
{
"path": "fixtures/next-12-pages-router/src/pages/features/index.tsx",
"chars": 205,
"preview": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n return (\n <>\n <span id=\""
},
{
"path": "fixtures/next-12-pages-router/src/pages/index.tsx",
"chars": 258,
"preview": "import Link from 'next/link';\n\nexport default function Home() {\n return (\n <>\n <Link href=\"/sprinkles\">sprinkle"
},
{
"path": "fixtures/next-12-pages-router/src/pages/recipes/index.tsx",
"chars": 202,
"preview": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n return (\n <>\n <span id=\"re"
},
{
"path": "fixtures/next-12-pages-router/src/pages/sprinkles/index.tsx",
"chars": 208,
"preview": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n return (\n <>\n <span id"
},
{
"path": "fixtures/next-12-pages-router/tsconfig.json",
"chars": 307,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"forceConsistentCasingInFileNames\": true,\n \"jsx\": \"p"
},
{
"path": "fixtures/next-13-app-router/CHANGELOG.md",
"chars": 2847,
"preview": "# @fixtures/next-app-router\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b0"
},
{
"path": "fixtures/next-13-app-router/next.config.js",
"chars": 612,
"preview": "const {\n createVanillaExtractPlugin,\n} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');\n\nconst withV"
},
{
"path": "fixtures/next-13-app-router/package.json",
"chars": 916,
"preview": "{\n \"name\": \"@fixtures/next-13-app-router\",\n \"description\": \"Next app router fixtures\",\n \"version\": \"0.0.7\",\n \"privat"
},
{
"path": "fixtures/next-13-app-router/src/app/features/page.tsx",
"chars": 205,
"preview": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n return (\n <>\n <span id=\""
},
{
"path": "fixtures/next-13-app-router/src/app/layout.tsx",
"chars": 169,
"preview": "export default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n <html lang=\"en\">\n"
},
{
"path": "fixtures/next-13-app-router/src/app/page.tsx",
"chars": 258,
"preview": "import Link from 'next/link';\n\nexport default function Home() {\n return (\n <>\n <Link href=\"/sprinkles\">sprinkle"
},
{
"path": "fixtures/next-13-app-router/src/app/recipes/page.tsx",
"chars": 202,
"preview": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n return (\n <>\n <span id=\"re"
},
{
"path": "fixtures/next-13-app-router/src/app/sprinkles/page.tsx",
"chars": 208,
"preview": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n return (\n <>\n <span id"
},
{
"path": "fixtures/next-13-app-router/tsconfig.json",
"chars": 407,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"forceConsistentCasingInFileNames\": true,\n \"jsx\": \"p"
},
{
"path": "fixtures/next-16-app-pages-router/next.config.ts",
"chars": 541,
"preview": "import { NextConfig } from 'next';\nimport { createVanillaExtractPlugin } from './next-plugin/dist/vanilla-extract-next-p"
},
{
"path": "fixtures/next-16-app-pages-router/package.json",
"chars": 1225,
"preview": "{\n \"name\": \"@fixtures/next-16-app-pages-router\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"description\": \"Next 16 fix"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/creepster/page.tsx",
"chars": 219,
"preview": "import { creepsterText } from '../../styles/creepster.css';\n\nexport default function CreepsterPage() {\n return (\n <d"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/duplication-test/a-plain.css.ts",
"chars": 109,
"preview": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n backgroundColor: '#0cdbcd',\n});\n"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/duplication-test/a.css.ts",
"chars": 175,
"preview": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n backgroundColor: '#0cdbcd',\n});\n\nexp"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/duplication-test/b-plain.css.ts",
"chars": 109,
"preview": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n backgroundColor: '#0cdbcd',\n});\n"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/duplication-test/b.css.ts",
"chars": 173,
"preview": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n backgroundColor: '#0cdbcd',\n});\n\nexp"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c-plain.css.ts",
"chars": 109,
"preview": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n backgroundColor: '#0cdbcd',\n});\n"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c.css.ts",
"chars": 175,
"preview": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n backgroundColor: '#0cdbcd',\n});\n\nexp"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/duplication-test/page.tsx",
"chars": 393,
"preview": "import './a-plain.css';\nimport { a } from './a.css';\nimport './b-plain.css';\nimport { b } from './b.css';\nimport './extr"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/features/page.tsx",
"chars": 205,
"preview": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n return (\n <>\n <span id=\""
},
{
"path": "fixtures/next-16-app-pages-router/src/app/function-serializer/page.tsx",
"chars": 269,
"preview": "import { RedBox, BlueText } from './source.css';\n\nexport default function Page() {\n return (\n <div>\n <h1>Functi"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/function-serializer/runtime.tsx",
"chars": 350,
"preview": "export function runtimeStyled<Tag extends keyof JSX.IntrinsicElements>(\n tag: Tag,\n className: string,\n) {\n return fu"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/function-serializer/source.css.ts",
"chars": 226,
"preview": "import { styled } from './styled';\n\nexport const RedBox = styled('div', {\n backgroundColor: 'red',\n color: 'white',\n "
},
{
"path": "fixtures/next-16-app-pages-router/src/app/function-serializer/styled.ts",
"chars": 726,
"preview": "import { addFunctionSerializer } from '@vanilla-extract/css/functionSerializer';\nimport { style, type StyleRule } from '"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/layout.tsx",
"chars": 169,
"preview": "export default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n <html lang=\"en\">\n"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/next-font/page.tsx",
"chars": 1268,
"preview": "import * as directFonts from '../../styles/fonts';\nimport { pickedValues } from '../../styles/nextFont.css';\n\nexport def"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/next-image/image.css.ts",
"chars": 406,
"preview": "import logo from './logo.png';\nimport { style } from '@vanilla-extract/css';\nimport type { StaticImageData } from 'next/"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/next-image/page.tsx",
"chars": 147,
"preview": "import { imageStyle } from './image.css';\n\nexport default function NextImagePage() {\n return <div className={imageStyle"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/page.tsx",
"chars": 599,
"preview": "import Link from 'next/link';\n\nexport default function Home() {\n return (\n <>\n <Link href=\"/sprinkles\">sprinkle"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/recipes/page.tsx",
"chars": 202,
"preview": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n return (\n <>\n <span id=\"re"
},
{
"path": "fixtures/next-16-app-pages-router/src/app/sprinkles/page.tsx",
"chars": 208,
"preview": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n return (\n <>\n <span id"
},
{
"path": "fixtures/next-16-app-pages-router/src/pages/pages-router/features/index.tsx",
"chars": 205,
"preview": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n return (\n <>\n <span id=\""
},
{
"path": "fixtures/next-16-app-pages-router/src/pages/pages-router/index.tsx",
"chars": 297,
"preview": "import Link from 'next/link';\n\nexport default function Home() {\n return (\n <>\n <Link href=\"/pages-router/sprink"
},
{
"path": "fixtures/next-16-app-pages-router/src/pages/pages-router/recipes/index.tsx",
"chars": 202,
"preview": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n return (\n <>\n <span id=\"re"
},
{
"path": "fixtures/next-16-app-pages-router/src/pages/pages-router/sprinkles/index.tsx",
"chars": 208,
"preview": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n return (\n <>\n <span id"
},
{
"path": "fixtures/next-16-app-pages-router/src/styles/creepster-font.ts",
"chars": 164,
"preview": "import { Creepster } from 'next/font/google';\n\nexport const creepster = Creepster({\n weight: '400',\n subsets: ['latin'"
},
{
"path": "fixtures/next-16-app-pages-router/src/styles/creepster.css.ts",
"chars": 212,
"preview": "import { style } from '@vanilla-extract/css';\nimport { creepster } from './creepster-font';\n\nexport const creepsterText "
},
{
"path": "fixtures/next-16-app-pages-router/src/styles/fonts.ts",
"chars": 6258,
"preview": "// --- 1. Imports ---\n// Test weirdly named imports for both local and google fonts.\n\nimport {\n Noto_Serif as NotoSerif"
},
{
"path": "fixtures/next-16-app-pages-router/src/styles/nextFont.css.ts",
"chars": 452,
"preview": "import * as fonts from './fonts';\n\nexport const pickedValues = Object.fromEntries(\n Object.entries(fonts).map(\n ([im"
},
{
"path": "fixtures/next-16-app-pages-router/tsconfig.json",
"chars": 950,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2017\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n "
},
{
"path": "fixtures/react-library-example/package.json",
"chars": 422,
"preview": "{\n \"name\": \"@fixtures/react-library-example\",\n \"description\": \"React design system library\",\n \"version\": \"0.0.1\",\n \""
},
{
"path": "fixtures/react-library-example/src/button/button.css.ts",
"chars": 349,
"preview": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../styles/vars.css.js';\n\nexport const btn = style({\n"
},
{
"path": "fixtures/react-library-example/src/button/button.tsx",
"chars": 319,
"preview": "import clsx from 'clsx';\nimport * as styles from './button.css.js';\n\nexport default function Button({\n className,\n chi"
},
{
"path": "fixtures/react-library-example/src/checkbox/checkbox.css.ts",
"chars": 511,
"preview": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../styles/vars.css.js';\n\nexport const label = style("
},
{
"path": "fixtures/react-library-example/src/checkbox/checkbox.tsx",
"chars": 546,
"preview": "import { useId } from 'react';\nimport clsx from 'clsx';\nimport * as styles from './checkbox.css.js';\n\nexport default fun"
},
{
"path": "fixtures/react-library-example/src/index.ts",
"chars": 311,
"preview": "// 1. Style reset\nimport './styles/reset.css.js';\n\n// 2. Design library\nexport { default as Button } from './button/butt"
},
{
"path": "fixtures/react-library-example/src/radio/radio.css.ts",
"chars": 509,
"preview": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../styles/vars.css.js';\n\nexport const label = style("
},
{
"path": "fixtures/react-library-example/src/radio/radio.tsx",
"chars": 540,
"preview": "import { useId } from 'react';\nimport clsx from 'clsx';\nimport * as styles from './radio.css.js';\n\nexport default functi"
},
{
"path": "fixtures/react-library-example/src/styles/reset.css.ts",
"chars": 153,
"preview": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('html, body', {\n fontSize: '100%',\n height: '100%',\n "
},
{
"path": "fixtures/react-library-example/src/styles/utility.css.ts",
"chars": 488,
"preview": "import { style } from '@vanilla-extract/css';\nimport { vars } from './vars.css.js';\n\n// Note: these aren’t meant to be i"
},
{
"path": "fixtures/react-library-example/src/styles/vars.css.ts",
"chars": 18690,
"preview": "import { createGlobalThemeContract, createTheme } from '@vanilla-extract/css';\n\n/**\n * Figma’s Simple Design System\n * L"
},
{
"path": "fixtures/react-library-example/tsconfig.json",
"chars": 239,
"preview": "{\n \"compilerOptions\": {\n \"baseUrl\": \"src\",\n \"module\": \"NodeNext\",\n \"moduleResolution\": \"nodenext\",\n \"increm"
},
{
"path": "fixtures/recipes/CHANGELOG.md",
"chars": 9639,
"preview": "# @fixtures/recipes\n\n## 0.0.36\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`]("
},
{
"path": "fixtures/recipes/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/recipes/package.json",
"chars": 259,
"preview": "{\n \"name\": \"@fixtures/recipes\",\n \"version\": \"0.0.36\",\n \"main\": \"src/index.ts\",\n \"sideEffects\": true,\n \"author\": \"SE"
},
{
"path": "fixtures/recipes/src/html.ts",
"chars": 496,
"preview": "import { button, stack } from './styles.css';\n\nexport default `<div class=\"${stack()}\">\n <button class=\"${button()}\">"
},
{
"path": "fixtures/recipes/src/index.ts",
"chars": 95,
"preview": "import html from './html';\n\nfunction render() {\n document.body.innerHTML = html;\n}\n\nrender();\n"
},
{
"path": "fixtures/recipes/src/styles.css.ts",
"chars": 1927,
"preview": "import { style, createThemeContract, createTheme } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract"
},
{
"path": "fixtures/sprinkles/CHANGELOG.md",
"chars": 9482,
"preview": "# @fixtures/sprinkles\n\n## 0.0.36\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`"
},
{
"path": "fixtures/sprinkles/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/sprinkles/package.json",
"chars": 263,
"preview": "{\n \"name\": \"@fixtures/sprinkles\",\n \"version\": \"0.0.36\",\n \"main\": \"src/index.ts\",\n \"sideEffects\": true,\n \"author\": \""
},
{
"path": "fixtures/sprinkles/src/html.ts",
"chars": 740,
"preview": "import {\n sprinkles,\n mapResponsiveValue,\n normalizeResponsiveValue,\n preComposedSprinkles,\n preComposedSprinklesUs"
},
{
"path": "fixtures/sprinkles/src/index.ts",
"chars": 95,
"preview": "import html from './html';\n\nfunction render() {\n document.body.innerHTML = html;\n}\n\nrender();\n"
},
{
"path": "fixtures/sprinkles/src/styles.css.ts",
"chars": 2891,
"preview": "import {\n globalStyle,\n createVar,\n createContainer,\n style,\n} from '@vanilla-extract/css';\nimport {\n definePropert"
},
{
"path": "fixtures/sprinkles/test-nodes.json",
"chars": 21,
"preview": "{\n \"root\": \"root\"\n}\n"
},
{
"path": "fixtures/template-string-paths/CHANGELOG.md",
"chars": 1960,
"preview": "# @fixtures/template-string-paths\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe3641"
},
{
"path": "fixtures/template-string-paths/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/template-string-paths/package.json",
"chars": 225,
"preview": "{\n \"name\": \"@fixtures/template-string-paths\",\n \"version\": \"0.0.8\",\n \"main\": \"src/index.ts\",\n \"sideEffects\": true,\n "
},
{
"path": "fixtures/template-string-paths/src/[...slug]/index.css.ts",
"chars": 104,
"preview": "import { style } from '@vanilla-extract/css';\n\nexport const catchAllSegment = style({ color: 'lime' });\n"
},
{
"path": "fixtures/template-string-paths/src/[[...slug]]/index.css.ts",
"chars": 114,
"preview": "import { style } from '@vanilla-extract/css';\n\nexport const optionalCatchAllSegment = style({ color: 'orchid' });\n"
},
{
"path": "fixtures/template-string-paths/src/[[id]]/index.css.ts",
"chars": 115,
"preview": "import { style } from '@vanilla-extract/css';\n\nexport const doubleSquareBracketId = style({ color: 'darkkhaki' });\n"
},
{
"path": "fixtures/template-string-paths/src/[]/index.css.ts",
"chars": 108,
"preview": "import { style } from '@vanilla-extract/css';\n\nexport const emptySquareBrackets = style({ color: 'blue' });\n"
},
{
"path": "fixtures/template-string-paths/src/[blog-id]/index.css.ts",
"chars": 101,
"preview": "import { style } from '@vanilla-extract/css';\n\nexport const withHyphen = style({ color: 'indigo' });\n"
},
{
"path": "fixtures/template-string-paths/src/[id]/index.css.ts",
"chars": 113,
"preview": "import { style } from '@vanilla-extract/css';\n\nexport const singleSquareBracketsId = style({ color: 'tomato' });\n"
},
{
"path": "fixtures/template-string-paths/src/index.ts",
"chars": 999,
"preview": "import { emptySquareBrackets } from './[]/index.css';\nimport { singleSquareBracketsId } from './[id]/index.css';\nimport "
},
{
"path": "fixtures/themed/CHANGELOG.md",
"chars": 8296,
"preview": "# @fixtures/themed\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](h"
},
{
"path": "fixtures/themed/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/themed/package.json",
"chars": 258,
"preview": "{\n \"name\": \"@fixtures/themed\",\n \"version\": \"0.0.31\",\n \"main\": \"src/index.ts\",\n \"sideEffects\": true,\n \"author\": \"SEE"
},
{
"path": "fixtures/themed/src/index.ts",
"chars": 3075,
"preview": "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';\n\nimport { theme, altTheme, responsiveTheme,"
},
{
"path": "fixtures/themed/src/shared.css.ts",
"chars": 284,
"preview": "import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const shadow: string = style({\n boxShadow: '0 0 5px "
},
{
"path": "fixtures/themed/src/styles.css.ts",
"chars": 1719,
"preview": "import {\n style,\n styleVariants,\n createVar,\n fallbackVar,\n fontFace,\n globalFontFace,\n globalStyle,\n} from '@van"
},
{
"path": "fixtures/themed/src/themes.css.ts",
"chars": 1492,
"preview": "import {\n createGlobalTheme,\n createTheme,\n assignVars,\n style,\n layer,\n} from '@vanilla-extract/css';\n\nexport cons"
},
{
"path": "fixtures/themed/test-nodes.json",
"chars": 537,
"preview": "{\n \"root\": \"root\",\n \"rootContainer\": \"rootContainer\",\n \"rootButton\": \"rootButton\",\n \"altContainer\": \"altContainer\",\n"
},
{
"path": "fixtures/thirdparty/CHANGELOG.md",
"chars": 2433,
"preview": "# @fixtures/thirdparty\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`"
},
{
"path": "fixtures/thirdparty/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/thirdparty/package.json",
"chars": 238,
"preview": "{\n \"name\": \"@fixtures/thirdparty\",\n \"version\": \"0.0.9\",\n \"main\": \"src/index.ts\",\n \"author\": \"SEEK\",\n \"private\": tru"
},
{
"path": "fixtures/thirdparty/src/index.ts",
"chars": 442,
"preview": "import { block, depBlock, depdepBlock } from './styles.css';\nimport testNodes from '../test-nodes.json';\n\ndocument.body."
},
{
"path": "fixtures/thirdparty/src/styles.css.ts",
"chars": 279,
"preview": "import { style, createVar } from '@vanilla-extract/css';\n\nexport {\n depBlock,\n depColor,\n depdepBlock,\n depdepColor,"
},
{
"path": "fixtures/thirdparty/test-nodes.json",
"chars": 73,
"preview": "{\n \"first\": \"first\",\n \"third\": \"third\",\n \"thirdThird\": \"thirdThird\"\n}\n"
},
{
"path": "fixtures/thirdparty/thirdparty-dep/CHANGELOG.md",
"chars": 2469,
"preview": "# @fixtures/thirdparty-dep\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01"
},
{
"path": "fixtures/thirdparty/thirdparty-dep/index.mjs",
"chars": 129,
"preview": "export { depBlock, depColor } from './styles.css.mjs';\n\nexport { depdepBlock, depdepColor } from '@fixtures/thirdparty-d"
},
{
"path": "fixtures/thirdparty/thirdparty-dep/package.json",
"chars": 327,
"preview": "{\n \"name\": \"@fixtures/thirdparty-dep\",\n \"version\": \"0.0.9\",\n \"exports\": {\n \".\": {\n \"import\": \"./index.mjs\"\n "
},
{
"path": "fixtures/thirdparty/thirdparty-dep/styles.css.mjs",
"chars": 201,
"preview": "import { style, createVar } from '@vanilla-extract/css';\n\nexport const depColor = createVar();\n\nexport const depBlock = "
},
{
"path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/CHANGELOG.md",
"chars": 2161,
"preview": "# @fixtures/thirdparty-dep-dep\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b0"
},
{
"path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/index.mjs",
"chars": 61,
"preview": "export { depdepBlock, depdepColor } from './styles.css.mjs';\n"
},
{
"path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/package.json",
"chars": 280,
"preview": "{\n \"name\": \"@fixtures/thirdparty-dep-dep\",\n \"version\": \"0.0.9\",\n \"exports\": {\n \".\": {\n \"import\": \"./index.mjs"
},
{
"path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/styles.css.mjs",
"chars": 212,
"preview": "import { style, createVar } from '@vanilla-extract/css';\n\nexport const depdepColor = createVar();\n\nexport const depdepBl"
},
{
"path": "fixtures/unused-modules/CHANGELOG.md",
"chars": 7790,
"preview": "# @fixtures/unused-modules\n\n## 1.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b0"
},
{
"path": "fixtures/unused-modules/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "fixtures/unused-modules/package.json",
"chars": 244,
"preview": "{\n \"name\": \"@fixtures/unused-modules\",\n \"version\": \"1.0.31\",\n \"main\": \"src/index.ts\",\n \"sideEffects\": [\n \"src/glo"
},
{
"path": "fixtures/unused-modules/src/global.css.ts",
"chars": 110,
"preview": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n backgroundColor: 'lavender',\n});\n"
},
{
"path": "fixtures/unused-modules/src/index.ts",
"chars": 322,
"preview": "import './global.css';\nimport { usedStyle } from './lookup';\nimport { resetStyle } from './reset';\nimport testNodes from"
},
{
"path": "fixtures/unused-modules/src/lookup.ts",
"chars": 75,
"preview": "export * from './unused';\nexport * from './used';\nexport * from './reset';\n"
},
{
"path": "fixtures/unused-modules/src/reset/index.ts",
"chars": 53,
"preview": "export { default as resetStyle } from './reset.css';\n"
},
{
"path": "fixtures/unused-modules/src/reset/reset.css.ts",
"chars": 101,
"preview": "import { style } from '@vanilla-extract/css';\n\nexport default style({\n boxSizing: 'border-box',\n});\n"
},
{
"path": "fixtures/unused-modules/src/shared/index.ts",
"chars": 55,
"preview": "export { default as sharedStyle } from './shared.css';\n"
},
{
"path": "fixtures/unused-modules/src/shared/shared.css.ts",
"chars": 162,
"preview": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n border: '5px solid black',\n});\n\nexpo"
},
{
"path": "fixtures/unused-modules/src/unused/index.ts",
"chars": 55,
"preview": "export { default as unusedStyle } from './unused.css';\n"
},
{
"path": "fixtures/unused-modules/src/unused/unused.css.ts",
"chars": 208,
"preview": "import { style } from '@vanilla-extract/css';\nimport { sharedStyle } from '../shared';\n\nconst className = style({\n colo"
},
{
"path": "fixtures/unused-modules/src/used/index.ts",
"chars": 51,
"preview": "export { default as usedStyle } from './used.css';\n"
},
{
"path": "fixtures/unused-modules/src/used/used.css.ts",
"chars": 217,
"preview": "import { style } from '@vanilla-extract/css';\nimport { sharedStyle } from '../shared';\n\nconst className = style({\n heig"
},
{
"path": "fixtures/unused-modules/test-nodes.json",
"chars": 21,
"preview": "{\n \"root\": \"root\"\n}\n"
},
{
"path": "package.json",
"chars": 2171,
"preview": "{\n \"name\": \"vanilla-extract\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"author\": \"SEEK\",\n \"license\": \"MIT\",\n \"scrip"
},
{
"path": "packages/babel-plugin-debug-ids/CHANGELOG.md",
"chars": 3495,
"preview": "# @vanilla-extract/babel-plugin-debug-ids\n\n## 1.2.2\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css"
},
{
"path": "packages/babel-plugin-debug-ids/package.json",
"chars": 807,
"preview": "{\n \"name\": \"@vanilla-extract/babel-plugin-debug-ids\",\n \"version\": \"1.2.2\",\n \"description\": \"Zero-runtime Stylesheets-"
},
{
"path": "packages/babel-plugin-debug-ids/src/index.test.ts",
"chars": 18502,
"preview": "import { describe, expect, it } from 'vitest';\nimport { transformSync } from '@babel/core';\n// @ts-expect-error\nimport t"
},
{
"path": "packages/babel-plugin-debug-ids/src/index.ts",
"chars": 8093,
"preview": "import {\n types as t,\n type PluginObj,\n type PluginPass,\n type NodePath,\n} from '@babel/core';\n\nconst packageIdentif"
},
{
"path": "packages/compiler/CHANGELOG.md",
"chars": 10751,
"preview": "# @vanilla-extract/compiler\n\n## 0.6.0\n\n### Minor Changes\n\n- [#1701](https://github.com/vanilla-extract-css/vanilla-extra"
},
{
"path": "packages/compiler/README.md",
"chars": 82,
"preview": "# @vanilla-extract/compiler\n\nThis package is not intended for public consumption.\n"
},
{
"path": "packages/compiler/package.json",
"chars": 717,
"preview": "{\n \"name\": \"@vanilla-extract/compiler\",\n \"version\": \"0.6.0\",\n \"description\": \"Zero-runtime Stylesheets-in-TypeScript\""
},
{
"path": "packages/compiler/src/compiler.ts",
"chars": 18166,
"preview": "import assert from 'assert';\nimport { join, isAbsolute } from 'path';\nimport type { Adapter } from '@vanilla-extract/css"
},
{
"path": "packages/compiler/src/index.ts",
"chars": 95,
"preview": "export {\n createCompiler,\n type Compiler,\n type CreateCompilerOptions,\n} from './compiler';\n"
},
{
"path": "packages/compiler/src/lock.ts",
"chars": 736,
"preview": "type AsyncFunction<T> = () => Promise<T>;\n\nconst queue: Array<() => void> = [];\nlet isProcessingQueue = false;\n\nexport a"
},
{
"path": "packages/css/CHANGELOG.md",
"chars": 48634,
"preview": "# @vanilla-extract/css\n\n## 1.20.0\n\n### Minor Changes\n\n- [#1702](https://github.com/vanilla-extract-css/vanilla-extract/p"
},
{
"path": "packages/css/adapter/package.json",
"chars": 727,
"preview": "{\n \"main\": \"dist/vanilla-extract-css-adapter.cjs.js\",\n \"module\": \"dist/vanilla-extract-css-adapter.esm.js\",\n \"browser"
},
{
"path": "packages/css/disableRuntimeStyles/package.json",
"chars": 833,
"preview": "{\n \"main\": \"dist/vanilla-extract-css-disableRuntimeStyles.cjs.js\",\n \"module\": \"dist/vanilla-extract-css-disableRuntime"
},
{
"path": "packages/css/fileScope/package.json",
"chars": 747,
"preview": "{\n \"main\": \"dist/vanilla-extract-css-fileScope.cjs.js\",\n \"module\": \"dist/vanilla-extract-css-fileScope.esm.js\",\n \"bro"
},
{
"path": "packages/css/functionSerializer/package.json",
"chars": 813,
"preview": "{\n \"main\": \"dist/vanilla-extract-css-functionSerializer.cjs.js\",\n \"module\": \"dist/vanilla-extract-css-functionSerializ"
},
{
"path": "packages/css/injectStyles/package.json",
"chars": 753,
"preview": "{\n \"main\": \"dist/vanilla-extract-css-injectStyles.cjs.js\",\n \"module\": \"dist/vanilla-extract-css-injectStyles.esm.js\",\n"
},
{
"path": "packages/css/package.json",
"chars": 5390,
"preview": "{\n \"name\": \"@vanilla-extract/css\",\n \"version\": \"1.20.0\",\n \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n "
},
{
"path": "packages/css/recipe/package.json",
"chars": 693,
"preview": "{\n \"main\": \"dist/vanilla-extract-css-recipe.cjs.js\",\n \"module\": \"dist/vanilla-extract-css-recipe.esm.js\",\n \"browser\":"
},
{
"path": "packages/css/src/adapter.ts",
"chars": 2176,
"preview": "import type { Adapter } from './types';\n\nexport const mockAdapter: Adapter = {\n appendCss: () => {},\n registerClassNam"
},
{
"path": "packages/css/src/conditionalRulesets.ts",
"chars": 5987,
"preview": "/** e.g. @media screen and (min-width: 500px) */\ntype Query = string;\n\ninterface Rule {\n selector: string;\n rule: any;"
},
{
"path": "packages/css/src/container.ts",
"chars": 267,
"preview": "import { generateIdentifier } from './identifier';\n\n// createContainer is used for local scoping of CSS containers\n// Fo"
},
{
"path": "packages/css/src/disableRuntimeStyles.ts",
"chars": 79,
"preview": "import { setAdapter, mockAdapter } from './adapter';\n\nsetAdapter(mockAdapter);\n"
},
{
"path": "packages/css/src/fileScope.ts",
"chars": 1139,
"preview": "import dedent from 'dedent';\nimport { onBeginFileScope, onEndFileScope } from './adapter';\nimport type { FileScope } fro"
},
{
"path": "packages/css/src/functionSerializer.ts",
"chars": 668,
"preview": "type Primitive = string | number | boolean | null | undefined;\n\ntype Serializable =\n | Primitive\n | {\n [Key in st"
},
{
"path": "packages/css/src/getDebugFileName.test.ts",
"chars": 1221,
"preview": "import { describe, expect, it } from 'vitest';\nimport { getDebugFileName } from './getDebugFileName';\n\nconst testCases ="
},
{
"path": "packages/css/src/getDebugFileName.ts",
"chars": 2079,
"preview": "import { LRUCache } from 'lru-cache';\n\nconst getLastSlashBeforeIndex = (path: string, index: number) => {\n let pathInde"
},
{
"path": "packages/css/src/identifier.test.ts",
"chars": 3548,
"preview": "import { afterAll, beforeAll, describe, expect, it } from 'vitest';\nimport { removeAdapter, setAdapter } from './adapter"
},
{
"path": "packages/css/src/identifier.ts",
"chars": 2229,
"preview": "import hash from '@emotion/hash';\n\nimport { getIdentOption } from './adapter';\nimport { getAndIncrementRefCounter, getFi"
}
]
// ... and 372 more files (download for full content)
About this extraction
This page contains the full source code of the vanilla-extract-css/vanilla-extract GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 572 files (1.5 MB), approximately 464.9k tokens, and a symbol index with 445 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.