[
  {
    "path": ".changeset/README.md",
    "content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)\n"
  },
  {
    "path": ".changeset/config.json",
    "content": "{\n  \"$schema\": \"https://unpkg.com/@changesets/config@3.0.3/schema.json\",\n  \"changelog\": [\n    \"@changesets/changelog-github\",\n    { \"repo\": \"vanilla-extract-css/vanilla-extract\" }\n  ],\n  \"commit\": false,\n  \"linked\": [],\n  \"access\": \"public\",\n  \"baseBranch\": \"master\",\n  \"updateInternalDependencies\": \"patch\",\n  \"snapshot\": {\n    \"useCalculatedVersion\": true\n  },\n  \"privatePackages\": {\n    \"tag\": false, \"version\": false\n  },\n  \"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH\": {\n    \"onlyUpdatePeerDependentsWhenOutOfRange\": true\n  }\n}\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.yml",
    "content": "name: \"Bug report\"\ndescription: Report an issue with vanilla-extract\nlabels: [pending triage]\nbody:\n  - type: markdown\n    attributes:\n      value: |\n        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)\n  - type: textarea\n    id: bug-description\n    attributes:\n      label: Describe the bug\n      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!\n      placeholder: Bug description\n    validations:\n      required: true\n  - type: input\n    id: reproduction\n    attributes:\n      label: Reproduction\n      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.\n      placeholder: Reproduction\n    validations:\n      required: true\n  - type: textarea\n    id: system-info\n    attributes:\n      label: System Info\n      description: Output of `npx envinfo --system --npmPackages '{@vanilla-extract/*,webpack,esbuild,vite,rollup}' --binaries --browsers`\n      render: shell\n      placeholder: System, Binaries, Browsers\n    validations:\n      required: true\n  - type: dropdown\n    id: package-manager\n    attributes:\n      label: Used Package Manager\n      description: Select the used package manager\n      options:\n        - npm\n        - yarn\n        - pnpm\n        - bun\n    validations:\n      required: true\n  - type: textarea\n    id: logs\n    attributes:\n      label: Logs\n      description: |\n        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.\n      render: shell\n  - type: checkboxes\n    id: checkboxes\n    attributes:\n      label: Validations\n      description: Before submitting the issue, please make sure you do the following\n      options:\n        - 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.\n          required: true\n        - label: The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.\n          required: true"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: false\ncontact_links:\n  - name: Feature requests, Questions & Discussions\n    url: https://github.com/vanilla-extract-css/vanilla-extract/discussions\n    about: Use GitHub discussions for message-board style questions and discussions\n  - name: Discord Chat\n    url: https://discord.gg/6nCfPwwz6w\n    about: Ask questions and discuss with other vanilla-extract users in real time."
  },
  {
    "path": ".github/workflows/deploy-site.yml",
    "content": "name: Deploy site\n\non: push\n\njobs:\n  deploy-site:\n    name: Deploy site\n    runs-on: ubuntu-latest\n    env:\n      CI: true\n    steps:\n      - name: Checkout Repo\n        uses: actions/checkout@v6\n\n      - name: Set up PNPM\n        uses: pnpm/action-setup@v4\n\n      - name: Set up Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version-file: '.nvmrc'\n          cache: 'pnpm'\n\n      - name: Install Dependencies\n        run: pnpm install\n\n      - name: Build packages\n        run: pnpm run build\n\n      - name: Build site\n        run: pnpm --filter \"./site\" build\n\n      - name: Draft deploy site to Netlify\n        run: pnpm --filter \"./site\" deploy:branch\n        if: github.ref != 'refs/heads/master'\n        env:\n          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}\n\n      - name: Deploy site to Netlify\n        run: pnpm --filter \"./site\" deploy:prod\n        if: github.ref == 'refs/heads/master'\n        env:\n          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: Release\n\non:\n  push:\n    branches:\n      - master\n  workflow_dispatch:\n\njobs:\n  release:\n    name: Publish & Deploy\n    if: github.event_name == 'push'\n    runs-on: ubuntu-latest\n    permissions:\n      id-token: write\n    env:\n      CI: true\n    steps:\n      - name: Checkout Repo\n        uses: actions/checkout@v6\n        with:\n          fetch-depth: 0\n          token: ${{ secrets.VANILLA_EXTRACT_CI_GITHUB_TOKEN }}\n\n      - name: Set up PNPM\n        uses: pnpm/action-setup@v4\n\n      - name: Set up Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version-file: '.nvmrc'\n          cache: 'pnpm'\n\n      - name: Install Dependencies\n        run: pnpm install\n\n      - name: Create release PR or publish to npm\n        uses: changesets/action@v1\n        with:\n          version: pnpm run version\n          publish: pnpm release\n        env:\n          GITHUB_TOKEN: ${{ secrets.VANILLA_EXTRACT_CI_GITHUB_TOKEN }}\n\n  snapshot:\n    name: Publish snapshot version\n    if: github.event_name == 'workflow_dispatch'\n    runs-on: ubuntu-latest\n    permissions:\n      id-token: write\n    env:\n      CI: true\n    steps:\n      - name: Checkout Repo\n        uses: actions/checkout@v6\n        with:\n          fetch-depth: 0\n          token: ${{ secrets.VANILLA_EXTRACT_CI_GITHUB_TOKEN }}\n\n      - name: Set up PNPM\n        uses: pnpm/action-setup@v4\n\n      - name: Set up Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version-file: '.nvmrc'\n          cache: 'pnpm'\n\n      - name: Install Dependencies\n        run: pnpm install\n\n      - name: Publish\n        uses: seek-oss/changesets-snapshot@v0\n        with:\n          pre-publish: pnpm prepare-release\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/validate.yml",
    "content": "name: Validate\n\non: [push, pull_request]\n\njobs:\n  test:\n    strategy:\n      matrix:\n        # Blank string allows us to test against version in nvmrc file\n        # configured in 'Set up Node.js' down below.\n        node: ['', '22']\n    name: Lint & Test (${{ (matrix.node && matrix.node != '22') && format('node {0}', matrix.node) || matrix.node || 'nvmrc' }})\n    runs-on: ubuntu-latest\n    env:\n      CI: true\n    steps:\n      - name: Checkout Repo\n        uses: actions/checkout@v6\n\n      - name: Set up PNPM\n        uses: pnpm/action-setup@v4\n\n      - name: Set up Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version: ${{ matrix.node }}\n          node-version-file: ${{ matrix.node == '' && '.nvmrc' || '' }}\n          cache: 'pnpm'\n\n      - name: Install Dependencies\n        run: pnpm install\n\n      - name: Build\n        run: pnpm build && pnpm --filter \"./site\" generate:docs-manifest\n\n      - name: Lint\n        run: pnpm lint\n\n      - name: Unit Test\n        run: pnpm test:unit\n  windows-test:\n    strategy:\n      matrix:\n        # Blank string allows us to test against version in nvmrc file\n        # configured in 'Set up Node.js' down below.\n        node: ['', '22']\n    name: Windows Tests (${{ (matrix.node && matrix.node != '22') && format('node {0}', matrix.node) || matrix.node || 'nvmrc' }})\n    runs-on: windows-latest\n    env:\n      CI: true\n    steps:\n      - name: Checkout Repo\n        uses: actions/checkout@v6\n\n      - name: Set up PNPM\n        uses: pnpm/action-setup@v4\n\n      - name: Set up Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version: ${{ matrix.node }}\n          node-version-file: ${{ matrix.node == '' && '.nvmrc' || '' }}\n          cache: 'pnpm'\n\n      - name: Install Dependencies\n        run: pnpm install\n\n      - name: Build\n        run: pnpm build\n\n      - name: Unit Test\n        run: pnpm test:unit\n  playwright:\n    name: Playwright tests\n    runs-on: macos-latest\n    if: github.ref != 'refs/heads/changeset-release/master' && github.head_ref != 'changeset-release/master'\n    env:\n      CI: true\n    steps:\n      - name: Checkout Repo\n        uses: actions/checkout@v6\n\n      - name: Set up PNPM\n        uses: pnpm/action-setup@v4\n\n      - name: Set up Node.js\n        uses: actions/setup-node@v6\n        with:\n          node-version-file: '.nvmrc'\n          cache: 'pnpm'\n\n      - name: Install Dependencies\n        run: pnpm install\n\n      - name: Install Browsers\n        run: pnpm playwright install chromium\n\n      - name: Build packages\n        run: pnpm build\n\n      - name: Playwright tests\n        run: pnpm test:playwright\n\n      - uses: actions/upload-artifact@v4\n        if: ${{ failure() }}\n        with:\n          name: test-results\n          path: test-results/\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\ndist\ntsconfig.tsbuildinfo\npackages/**/README.md\n!packages/sprinkles/README.md\n!packages/integration/README.md\n!packages/compiler/README.md\ntest-results\n.parcel-cache\n\n.pnp.*\n.next\n.DS_Store\n.idea\nnext-env.d.ts"
  },
  {
    "path": ".npmrc",
    "content": "registry=https://registry.npmjs.org/\n"
  },
  {
    "path": ".nvmrc",
    "content": "lts/krypton\n"
  },
  {
    "path": ".oxlintrc.json",
    "content": "{\n  \"$schema\": \"./node_modules/oxlint/configuration_schema.json\",\n  \"ignorePatterns\": [\"packages/webpack-plugin/extracted.js\"]\n}\n"
  },
  {
    "path": ".prettierignore",
    "content": ".idea/\n.vscode/\nnode_modules\ndist\nCHANGELOG.md\nREADME.md\n.github/ISSUE_TEMPLATE\nsite/docs-manifest.json\n.changeset\n.next\npnpm-lock.yaml\n*-snapshots\ntest-results\nexamples/remix/build\n.pnpm-store\nnext-env.d.ts\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"typescript.tsdk\": \"node_modules/typescript/lib\",\n  \"vitest.enable\": true,\n  \"vitest.commandLine\": \"pnpm test:vitest\"\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 SEEK\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "README.md",
    "content": "# 🧁 vanilla-extract\n\n**Zero-runtime Stylesheets-in-TypeScript.**\n\nWrite your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.\n\nBasically, it’s [“CSS Modules](https://github.com/css-modules/css-modules)-in-TypeScript” but with scoped CSS Variables + heaps more.\n\n🔥 &nbsp; All styles generated at build time — just like [Sass](https://sass-lang.com), [Less](http://lesscss.org), etc.\n\n✨ &nbsp; Minimal abstraction over standard CSS.\n\n🦄 &nbsp; Works with any front-end framework — or even without one.\n\n🌳 &nbsp; Locally scoped class names — just like [CSS Modules.](https://github.com/css-modules/css-modules)\n\n🚀 &nbsp; Locally scoped [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), `@keyframes` and `@font-face` rules.\n\n🎨 &nbsp; High-level theme system with support for simultaneous themes. No globals!\n\n🛠 &nbsp; Utils for generating variable-based `calc` expressions.\n\n💪 &nbsp; Type-safe styles via [CSSType.](https://github.com/frenic/csstype)\n\n🏃‍♂️ &nbsp; Optional runtime version for development and testing.\n\n🙈 &nbsp; Optional API for dynamic runtime theming.\n\n---\n\n🌐 [Check out the documentation site for setup guides, examples and API docs.](https://vanilla-extract.style)\n\n\n\n---\n\n🖥 &nbsp; [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)\n\n---\n\n**Write your styles in `.css.ts` files.**\n\n```ts\n// styles.css.ts\n\nimport { createTheme, style } from '@vanilla-extract/css';\n\nexport const [themeClass, vars] = createTheme({\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\nexport const exampleStyle = style({\n  backgroundColor: vars.color.brand,\n  fontFamily: vars.font.body,\n  color: 'white',\n  padding: 10\n});\n```\n\n> 💡 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.\n\n**Then consume them in your markup.**\n\n```ts\n// app.ts\n\nimport { themeClass, exampleStyle } from './styles.css.ts';\n\ndocument.write(`\n  <section class=\"${themeClass}\">\n    <h1 class=\"${exampleStyle}\">Hello world!</h1>\n  </section>\n`);\n```\n\n---\n\nWant 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.\n\n---\n\n## Thanks\n\n- [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.\n- [Stitches](https://stitches.dev/) for getting us excited about CSS-Variables-in-JS.\n- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.\n\n## License\n\nMIT.\n"
  },
  {
    "path": "babel.config.js",
    "content": "module.exports = {\n  presets: [\n    ['@babel/preset-env', { targets: { node: '14.21' } }],\n    '@babel/preset-typescript',\n  ],\n  overrides: [\n    {\n      include: [\n        './packages/css',\n        './packages/dynamic',\n        './packages/private',\n        './packages/recipes',\n        './packages/sprinkles',\n        './packages/utils',\n      ],\n      presets: [['@babel/preset-env', { targets: { esmodules: true } }]],\n    },\n  ],\n};\n"
  },
  {
    "path": "docs/treat-migration-guide.md",
    "content": "# 🍬 treat migration guide\n\n🎉 First of all, thanks for using treat, and thanks for your interest in vanilla-extract!\n\nWhen 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).\n\nWe'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!\n\n## New file extension\n\nThe file extension has changed from `*.treat.ts` to `*.css.ts`.\n\n## `.css.ts` files can import other `.css.ts` files\n\nThis 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!\n\n## Your webpack config must handle CSS files\n\nIn 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.\n\nFor more detail, check out the [webpack setup guide.](https://github.com/vanilla-extract-css/vanilla-extract#webpack)\n\n## Autoprefixer is no longer included\n\nIf you want Autoprefixer, you'll need to [manually add it to your webpack config.](https://github.com/webpack-contrib/postcss-loader#autoprefixer)\n\nNote 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.\n\n## URL handling should be disabled for `*.vanilla.css` files\n\nIn 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')\"`).\n\nIf 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:\n\n```ts\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        oneOf: [\n          {\n            test: /\\.vanilla\\.css$/i,\n            use: [\n              MiniCssExtractPlugin.loader,\n              {\n                loader: 'css-loader',\n                options: { url: false }\n              }\n            ]\n          },\n          {\n            use: [MiniCssExtractPlugin.loader, 'css-loader']\n          }\n        ]\n      }\n    ]\n  },\n  plugins: [\n    new VanillaExtractPlugin(),\n    new MiniCssExtractPlugin()\n  ]\n};\n```\n\n## `createTheme`\n\nIf 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.\n\n```ts\n// vars.css.ts\n\nimport { createGlobalTheme } from '@vanilla-extract/css';\n\nexport const vars = createGlobalTheme(':root', {\n  ...tokens\n});\n```\n\nIf 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.\n\n```ts\n// vars.css.ts\n\nimport { createTheme } from '@vanilla-extract/css';\n\nexport const [themeA, vars] = createTheme({\n  ...tokens\n});\n\nexport const themeB = createTheme(vars, {\n  ...tokens\n});\n```\n\nIf you're bundle-splitting your themes, you'll probably want the [`createThemeContract`](https://github.com/vanilla-extract-css/vanilla-extract#createthemecontract) function.\n\n## `TreatProvider`\n\n> 💡 This isn't required if you only have a single global theme set up via `createGlobalTheme`.\n\nYou 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.\n\n```tsx\n// App.ts\n\nimport { themeClass } from './vars.css';\n\nexport const App = () => (\n  <div className={themeClass}>...</div>\n);\n```\n\n## Theme tokens must be strings\n\nTo 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.\n\n```diff\nconst themeClass = createGlobalTheme(':root', {\n-  grid: 4,\n+  grid: '4px',\n});\n```\n\nIf you need a unitless number, just convert it to a string as-is.\n\n```diff\nconst themeClass = createGlobalTheme(':root', {\n-  headingWeight: 600,\n+  headingWeight: '600',\n});\n```\n\n## Theme classes must be forwarded through React portals\n\n> 💡 This isn't required if you only have a single global theme set up via `createGlobalTheme`.\n\nCSS 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.\n\nAs a basic example, let's set up a `VanillaThemeContext`.\n\n```tsx\n// VanillaThemeContext.tsx\n\nimport { createContext, useContext } from 'react';\n\nconst VanillaThemeContext = createContext<string | null>(\n  null\n);\n\nexport const VanillaThemeProvider =\n  VanillaThemeContext.Provider;\n\nexport const useVanillaTheme = () => {\n  const themeClass = useContext(VanillaThemeContext);\n\n  if (themeClass === null) {\n    throw new Error('Must be inside VanillaThemeProvider');\n  }\n\n  return themeClass;\n};\n```\n\nWe can then use this `VanillaThemeProvider` at the root of our app.\n\n```tsx\n// App.tsx\n\nimport { createContext, useContext } from 'react';\nimport { themeClass } from './vars.css';\nimport { VanillaThemeProvider } from './VanillaThemeContext';\n\nexport const App = () => (\n  <VanillaThemeProvider value={themeClass}>\n    <div className={themeClass}>...</div>\n  </VanillaThemeProvider>\n);\n```\n\nWe can now access the theme via our custom `useVanillaTheme` Hook and apply it to the root element of our portal.\n\n```tsx\n// MyPortalComponent.tsx\n\nimport { createPortal } from 'react-dom';\nimport { useVanillaTheme } from './VanillaThemeContext';\n\nexport const MyPortalComponent = () => {\n  const themeClass = useVanillaTheme();\n\n  return createPortal(\n    <div className={themeClass}>...</div>,\n    document.body\n  );\n};\n```\n\n## `useStyles` / `resolveStyles`\n\nThe whole concept of `styleRefs` and `useStyles`/`resolveStyles` goes away. No more plumbing required, just access the CSS exports directly.\n\n```diff\n-import { useStyles } from 'react-treat';\n-import * as styleRefs from './styles.treat';\n+import * as styles from './styles.css';\n\nexport const Foo = () => {\n-  const styles = useStyles(styleRefs);\n\n  return (\n    <div className={styles.root}>\n      ...\n    </div>\n  );\n}\n```\n\n## `style`\n\nSince theme variables are now managed by the browser, the `style` function no longer accepts a theme callback.\n\nTo get access to variables, we now import theme variables from the `.css.ts` file that defines them.\n\n```diff\n-import { style } from 'treat';\n-\n-const className = style(theme => ({\n-  paddingTop: theme.space.small\n-}))\n\n+import { style } from '@vanilla-extract/css';\n+import { vars } from '../vars.css';\n+\n+export const className = style({\n+  paddingTop: vars.space.small\n+});\n```\n\nNote 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.\n\n## Style calculations\n\n> **⚠️ 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.**\n>\n> 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.\n\nTheme 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.\n\nSimple 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.\n\n```diff\n-import { style } from 'treat';\n-\n-const className = style(theme => ({\n-  marginTop: theme.space.small * -1\n-}))\n\n+import { style } from '@vanilla-extract/css';\n+import { calc } from '@vanilla-extract/css-utils';\n+import { vars } from '../vars.css';\n+\n+const className = style({\n+  marginTop: calc.negate(vars.space.small)\n+});\n```\n\nIf 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.\n\nFor example, let's assume you've calculated a lighter colour variant inline using [Polished.](https://polished.js.org/)\n\n```ts\nimport { style } from 'treat';\nimport { lighten } from 'polished';\n\nexport const className = style((theme) => ({\n  background: lighten(0.2, theme.color.brand)\n}));\n```\n\nSince 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.\n\n```ts\n// vars.css.ts\n\nimport { createGlobalTheme } from '@vanilla-extract/css';\nimport { lighten } from 'polished';\n\nconst brandColor = 'blue';\n\nexport const vars = createGlobalTheme(':root', {\n  color: {\n    brand: brandColor,\n    brandLight: lighten(0.2, brandColor)\n  }\n});\n```\n\nYou would then update your styles to use this new CSS Variable instead.\n\n```diff\n-import { style } from 'treat';\n-import { lighten } from 'polished';\n+import { style } from '@vanilla-extract/css';\n+import { vars } from '../vars.css';\n\n-export const className = style(theme => ({\n-  background: lighten(0.2, theme.color.brand)\n-}));\n+export const className = style({\n+  background: vars.color.brandLight\n+});\n```\n\n## `styleMap`\n\nYou 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`.\n\n## `styleTree`\n\nSince you now have direct access to theme objects outside of a style block, this function is no longer necessary.\n\n## `@keyframes`\n\nThe `@keyframes` property is no longer supported on style objects. Instead, you should create keyframes separately with the `keyframes` function.\n\n```diff\n-import { style } from 'treat';\n-\n-const className = style({\n-  '@keyframes': { ... },\n-  animationName: '@keyframes'\n-});\n\n+import { keyframes, style } from '@vanilla-extract/css';\n+const myAnimationName = keyframes({ ... });\n+\n+const className = style({\n+  animationName: myAnimationName\n+});\n```\n\n## Did we forget anything?\n\n[Please let us know.](https://github.com/vanilla-extract-css/vanilla-extract/issues/new)\n"
  },
  {
    "path": "examples/next/components/HelloWorld.css.ts",
    "content": "import { style, createVar, keyframes, fallbackVar } from '@vanilla-extract/css';\n\nconst color = createVar();\nconst angle = createVar({\n  syntax: '<angle>',\n  inherits: false,\n  initialValue: '0deg',\n});\n\nconst angleKeyframes = keyframes({\n  '100%': {\n    vars: {\n      [angle]: '360deg',\n    },\n  },\n});\n\nexport const root = style({\n  background: 'pink',\n  color: 'blue',\n  padding: '16px',\n  transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer\n  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,\n  animation: `${angleKeyframes} 7s infinite ease-in-out both`,\n  ':hover': {\n    opacity: 0.8,\n    color: color,\n  },\n\n  vars: {\n    [color]: '#fef',\n    [angle]: fallbackVar(angle, '138deg'),\n  },\n});\n"
  },
  {
    "path": "examples/next/components/HelloWorld.tsx",
    "content": "import * as styles from './HelloWorld.css';\n\nexport function HelloWorld() {\n  return (\n    <div className={styles.root}>\n      <h1>🧁 Hello from vanilla-extract!</h1>\n    </div>\n  );\n}\n"
  },
  {
    "path": "examples/next/next.config.js",
    "content": "const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');\nconst withVanillaExtract = createVanillaExtractPlugin();\n\nmodule.exports = withVanillaExtract();\n"
  },
  {
    "path": "examples/next/package.json",
    "content": "{\n  \"name\": \"vanilla-extract-example-next\",\n  \"description\": \"Example project using vanilla-extract, compiling with Next.js\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\"\n  },\n  \"dependencies\": {\n    \"next\": \"12.3.4\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.2.55\",\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"@vanilla-extract/next-plugin\": \"workspace:^\"\n  },\n  \"browserslist\": [\n    \">0.3%\",\n    \"ie 11\",\n    \"safari 4\",\n    \"not op_mini all\"\n  ]\n}\n"
  },
  {
    "path": "examples/next/pages/index.tsx",
    "content": "import { HelloWorld } from '../components/HelloWorld';\n\nexport default function Home() {\n  return <HelloWorld />;\n}\n"
  },
  {
    "path": "examples/next/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "examples/webpack-react/CHANGELOG.md",
    "content": "# vanilla-extract-example-webpack-react\n\n## 0.0.34\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @vanilla-extract/webpack-plugin@2.3.13\n  - @vanilla-extract/sprinkles@1.6.3\n\n## 0.0.33\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/sprinkles@1.6.3\n  - @vanilla-extract/webpack-plugin@2.3.12\n\n## 0.0.32\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.11\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @vanilla-extract/sprinkles@1.6.2\n  - @vanilla-extract/webpack-plugin@2.3.10\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/webpack-plugin@2.3.9\n  - @vanilla-extract/sprinkles@1.6.2\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n  - @vanilla-extract/webpack-plugin@2.3.8\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.26\n\n### Patch Changes\n\n- Updated dependencies [[`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1), [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/webpack-plugin@2.3.3\n  - @vanilla-extract/css@1.14.1\n\n## 0.0.25\n\n### Patch Changes\n\n- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:\n  - @vanilla-extract/css@1.14.0\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n  - @vanilla-extract/webpack-plugin@2.3.0\n\n## 0.0.23\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3), [`8a35dff`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a35dff7f8b4f75691b7ba6ecdc98f45d6e8c5f4)]:\n  - @vanilla-extract/css@1.12.0\n  - @vanilla-extract/sprinkles@1.6.1\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 0.0.17\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n\n## 0.0.16\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n  - @vanilla-extract/sprinkles@1.5.1\n\n## 0.0.15\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/webpack-plugin@2.2.0\n  - @vanilla-extract/css@1.9.1\n\n## 0.0.14\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n\n## 0.0.13\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/babel-plugin@1.2.0\n  - @vanilla-extract/css@1.8.0\n\n## 0.0.12\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`21afc23`](https://github.com/vanilla-extract-css/vanilla-extract/commit/21afc23ae552b8071fbe5d7b0c3dce07fc016ee7), [`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/webpack-plugin@2.1.12\n  - @vanilla-extract/css@1.7.3\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n  - @vanilla-extract/babel-plugin@1.1.7\n  - @vanilla-extract/webpack-plugin@2.1.11\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:\n  - @vanilla-extract/css@1.7.1\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c), [`69b8460`](https://github.com/vanilla-extract-css/vanilla-extract/commit/69b846015ecada3354ea292e1276e5da560923c6)]:\n  - @vanilla-extract/css@1.7.0\n  - @vanilla-extract/webpack-plugin@2.1.8\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n  - @vanilla-extract/sprinkles@1.3.3\n  - @vanilla-extract/babel-plugin@1.1.3\n  - @vanilla-extract/webpack-plugin@2.1.4\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n  - @vanilla-extract/sprinkles@1.3.2\n  - @vanilla-extract/webpack-plugin@2.1.3\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`f2d2d9e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f2d2d9eea18dcd4ffec694f8056a78d850485592), [`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/webpack-plugin@2.1.2\n  - @vanilla-extract/css@1.6.4\n"
  },
  {
    "path": "examples/webpack-react/package.json",
    "content": "{\n  \"name\": \"vanilla-extract-example-webpack-react\",\n  \"description\": \"Example React project using vanilla-extract and Sprinkles, compiling with webpack\",\n  \"keywords\": [\n    \"vanilla-extract\",\n    \"sprinkles\",\n    \"css-in-js\",\n    \"css-in-ts\",\n    \"css\",\n    \"webpack\",\n    \"react\"\n  ],\n  \"version\": \"0.0.34\",\n  \"main\": \"src/index.ts\",\n  \"author\": \"SEEK\",\n  \"scripts\": {\n    \"start\": \"webpack serve\",\n    \"build\": \"webpack\"\n  },\n  \"private\": true,\n  \"dependencies\": {\n    \"@babel/preset-env\": \"^7.23.9\",\n    \"@babel/preset-react\": \"^7.23.3\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"@vanilla-extract/sprinkles\": \"workspace:^\",\n    \"@vanilla-extract/webpack-plugin\": \"workspace:^\",\n    \"babel-loader\": \"^10.0.0\",\n    \"css-loader\": \"^7.1.2\",\n    \"html-webpack-plugin\": \"^5.3.1\",\n    \"mini-css-extract-plugin\": \"^2.9.4\",\n    \"polished\": \"^4.1.2\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"tailwindcss\": \"^4.1.18\",\n    \"webpack\": \"^5.90.0\",\n    \"webpack-cli\": \"^6.0.1\",\n    \"webpack-dev-server\": \"^5.2.2\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.2.55\",\n    \"@types/react-dom\": \"^18.2.19\"\n  }\n}\n"
  },
  {
    "path": "examples/webpack-react/sandbox.config.json",
    "content": "{\n  \"template\": \"node\",\n  \"node\": \"14\",\n  \"container\": {\n    \"node\": \"14\"\n  }\n}\n"
  },
  {
    "path": "examples/webpack-react/src/App.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css';\n\nexport const card = style([\n  sprinkles({\n    background: {\n      lightMode: 'green-50',\n      darkMode: 'gray-800',\n    },\n    borderRadius: {\n      mobile: '4x',\n      desktop: '5x',\n    },\n    padding: {\n      mobile: '7x',\n      desktop: '8x',\n    },\n  }),\n  {\n    transition: 'transform 4s ease-in-out',\n    ':hover': {\n      cursor: 'default',\n      transform: 'scale(2) rotate(720deg)',\n    },\n  },\n]);\n"
  },
  {
    "path": "examples/webpack-react/src/App.tsx",
    "content": "import { sprinkles } from './sprinkles.css';\nimport * as styles from './App.css';\n\nexport const App = () => (\n  <div\n    className={sprinkles({\n      background: {\n        lightMode: 'green-500',\n        darkMode: 'gray-900',\n      },\n      height: '100vh',\n      width: '100vw',\n      display: 'flex',\n      placeItems: 'center',\n      padding: '6x',\n    })}\n  >\n    <div className={styles.card}>\n      <div\n        className={sprinkles({\n          display: 'flex',\n          alignItems: 'center',\n          flexDirection: 'column',\n          gap: {\n            mobile: '5x',\n            desktop: '6x',\n          },\n        })}\n      >\n        <h1\n          className={sprinkles({\n            fontFamily: 'body',\n            textAlign: 'center',\n            typeSize: {\n              mobile: '4x',\n              tablet: '4x',\n              desktop: '5x',\n            },\n          })}\n        >\n          <span role=\"img\" aria-label=\"Waving hand\">\n            👋\n          </span>\n          <span role=\"img\" aria-label=\"vanilla-extract logo\">\n            🧁\n          </span>\n          <span role=\"img\" aria-label=\"Sprinkles logo\">\n            🍨\n          </span>\n        </h1>\n        <h2\n          className={sprinkles({\n            fontFamily: 'body',\n            color: {\n              lightMode: 'green-700',\n              darkMode: 'green-50',\n            },\n            textAlign: 'center',\n            typeSize: {\n              mobile: '2x',\n              tablet: '3x',\n              desktop: '4x',\n            },\n          })}\n        >\n          Hello from vanilla-extract and Sprinkles\n        </h2>\n      </div>\n    </div>\n  </div>\n);\n"
  },
  {
    "path": "examples/webpack-react/src/global.css.ts",
    "content": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('body, body *', {\n  all: 'unset',\n  boxSizing: 'border-box',\n});\n"
  },
  {
    "path": "examples/webpack-react/src/index.tsx",
    "content": "import { render } from 'react-dom';\nimport './global.css';\nimport { App } from './App';\n\nconst root = document.createElement('div');\ndocument.body.appendChild(root);\n\nrender(<App />, root);\n"
  },
  {
    "path": "examples/webpack-react/src/sprinkles.css.ts",
    "content": "import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' },\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    justifyContent: ['stretch', 'flex-start', 'center', 'flex-end'],\n    gap: vars.space,\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space,\n    width: ['100vw'],\n    height: ['100vh'],\n    borderRadius: vars.borderRadius,\n    fontFamily: vars.fontFamily,\n    fontSize: vars.fontSize,\n    lineHeight: vars.lineHeight,\n    textAlign: ['center'],\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['alignItems', 'justifyContent'],\n    typeSize: ['fontSize', 'lineHeight'],\n  },\n});\n\nconst colorModeProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' },\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: vars.color,\n    background: vars.color,\n  },\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorModeProperties,\n);\n"
  },
  {
    "path": "examples/webpack-react/src/vars.css.ts",
    "content": "import { createGlobalTheme } from '@vanilla-extract/css';\nimport { modularScale } from 'polished';\nimport colors from 'tailwindcss/colors';\n\nconst createScale = (ratio: number, base: number) => (steps: number) =>\n  `${modularScale(steps, base, ratio)}px`;\n\nconst spaceScale = createScale(1.4, 4);\nconst fontSizeScale = createScale(1.3, 16);\nconst lineHeightScale = createScale(1.25, 24);\nconst borderRadiusScale = createScale(1.5, 4);\n\nexport const vars = createGlobalTheme(':root', {\n  space: {\n    none: '0',\n    '0x': spaceScale(0),\n    '1x': spaceScale(1),\n    '2x': spaceScale(2),\n    '3x': spaceScale(3),\n    '4x': spaceScale(4),\n    '5x': spaceScale(5),\n    '6x': spaceScale(6),\n    '7x': spaceScale(7),\n    '8x': spaceScale(8),\n  },\n  color: {\n    white: '#fff',\n\n    'gray-50': colors.gray[50],\n    'gray-100': colors.gray[100],\n    'gray-200': colors.gray[200],\n    'gray-300': colors.gray[300],\n    'gray-400': colors.gray[400],\n    'gray-500': colors.gray[500],\n    'gray-600': colors.gray[600],\n    'gray-700': colors.gray[700],\n    'gray-800': colors.gray[800],\n    'gray-900': colors.gray[900],\n\n    'green-50': colors.emerald[50],\n    'green-100': colors.emerald[100],\n    'green-200': colors.emerald[200],\n    'green-300': colors.emerald[300],\n    'green-400': colors.emerald[400],\n    'green-500': colors.emerald[500],\n    'green-600': colors.emerald[600],\n    'green-700': colors.emerald[700],\n    'green-800': colors.emerald[800],\n    'green-900': colors.emerald[900],\n  },\n  borderRadius: {\n    '0x': borderRadiusScale(0),\n    '1x': borderRadiusScale(1),\n    '2x': borderRadiusScale(2),\n    '3x': borderRadiusScale(3),\n    '4x': borderRadiusScale(4),\n    '5x': borderRadiusScale(5),\n    full: '99999px',\n  },\n  fontFamily: {\n    body: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n  },\n  fontSize: {\n    '0x': fontSizeScale(0),\n    '1x': fontSizeScale(1),\n    '2x': fontSizeScale(2),\n    '3x': fontSizeScale(3),\n    '4x': fontSizeScale(4),\n    '5x': fontSizeScale(5),\n  },\n  lineHeight: {\n    '0x': lineHeightScale(0),\n    '1x': lineHeightScale(1),\n    '2x': lineHeightScale(2),\n    '3x': lineHeightScale(3),\n    '4x': lineHeightScale(4),\n    '5x': lineHeightScale(5),\n  },\n});\n"
  },
  {
    "path": "examples/webpack-react/webpack.config.js",
    "content": "const path = require('path');\nconst { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n  entry: path.join(__dirname, './src/index.tsx'),\n  mode: 'development',\n  resolve: {\n    extensions: ['.js', '.json', '.ts', '.tsx'],\n  },\n  devtool: 'source-map',\n  devServer: {\n    allowedHosts: 'all',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(js|ts|tsx)$/,\n        exclude: [/node_modules/],\n        use: [\n          {\n            loader: 'babel-loader',\n            options: {\n              babelrc: false,\n              presets: [\n                '@babel/preset-typescript',\n                ['@babel/preset-react', { runtime: 'automatic' }],\n                [\n                  '@babel/preset-env',\n                  { targets: { node: 14 }, modules: false },\n                ],\n              ],\n            },\n          },\n        ],\n      },\n      {\n        test: /\\.css$/i,\n        use: [MiniCssExtractPlugin.loader, 'css-loader'],\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new MiniCssExtractPlugin(),\n    new VanillaExtractPlugin(),\n  ],\n  stats: 'minimal',\n};\n"
  },
  {
    "path": "fixtures/features/CHANGELOG.md",
    "content": "# @fixtures/features\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @vanilla-extract/dynamic@2.1.2\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/dynamic@2.1.2\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @vanilla-extract/dynamic@2.1.1\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/dynamic@2.1.1\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.26\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.25\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n\n## 0.0.23\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/dynamic@2.1.0\n  - @vanilla-extract/css@1.14.0\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:\n  - @vanilla-extract/css@1.12.0\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 0.0.17\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n\n## 0.0.16\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 0.0.15\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n\n## 0.0.14\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n  - @vanilla-extract/dynamic@2.0.3\n\n## 0.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:\n  - @vanilla-extract/css@1.9.1\n\n## 0.0.12\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/css@1.8.0\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/css@1.7.3\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:\n  - @vanilla-extract/css@1.7.1\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:\n  - @vanilla-extract/css@1.7.0\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n  - @vanilla-extract/dynamic@2.0.2\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n  - @vanilla-extract/dynamic@2.0.1\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/css@1.6.4\n"
  },
  {
    "path": "fixtures/features/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/features/package.json",
    "content": "{\n  \"name\": \"@fixtures/features\",\n  \"version\": \"0.0.31\",\n  \"main\": \"src/index.ts\",\n  \"sideEffects\": true,\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"@vanilla-extract/dynamic\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/features/src/features.css.ts",
    "content": "import { globalStyle, style, styleVariants } from '@vanilla-extract/css';\n\nexport const mergedStyle = style([\n  { height: 50, ':after': { display: 'block', content: '\"Below 700px\"' } },\n  {\n    '@media': {\n      'screen and (min-width: 700px)': {\n        ':after': { content: '\"Above 700px\"' },\n      },\n    },\n  },\n  {\n    '@media': {\n      'screen and (min-width: 700px)': {\n        color: 'plum',\n      },\n    },\n  },\n]);\n\nexport const styleWithComposition = style([\n  { backgroundColor: 'powderblue' },\n  mergedStyle,\n  { selectors: { '&:hover': { backgroundColor: 'slategray' } } },\n]);\n\nexport const styleWithNestedComposition = style([\n  { backgroundColor: 'powderblue' },\n  [mergedStyle],\n  { selectors: { '&:hover': { backgroundColor: 'slategray' } } },\n]);\n\nexport const styleVariantsWithComposition = styleVariants({\n  variant: [\n    { backgroundColor: 'powderblue' },\n    mergedStyle,\n    { selectors: { '&:hover': { backgroundColor: 'slategray' } } },\n  ],\n});\n\nexport const styleVariantsWithMappedComposition = styleVariants(\n  { variant: 'slategray' },\n  (backgroundColor) => [\n    { backgroundColor: 'powderblue' },\n    mergedStyle,\n    { selectors: { '&:hover': { backgroundColor } } },\n  ],\n);\n\nexport const compositionOnly = style([mergedStyle, styleWithComposition]);\n\n// Force composition for use in selector\nexport const styleCompositionInSelector = style([\n  style({ color: 'white' }),\n  style({ backgroundColor: 'black' }),\n]);\n\nglobalStyle(`body ${styleCompositionInSelector}`, {\n  fontSize: '24px',\n});\n\nexport const styleVariantsCompositionInSelector = styleVariants({\n  variant: [style({ color: 'white' }), style({ backgroundColor: 'black' })],\n});\n\nglobalStyle(`body ${styleVariantsCompositionInSelector.variant}`, {\n  fontSize: '24px',\n});\n\nexport const styleWithStartingStyle = style({\n  backgroundColor: 'black',\n  '@starting-style': {\n    backgroundColor: 'white',\n  },\n});\n"
  },
  {
    "path": "fixtures/features/src/html.ts",
    "content": "import * as styles from './features.css';\nimport testNodes from '../test-nodes.json';\n\nexport default `\n    <div id=\"${testNodes.mergedStyle}\" class=\"${styles.mergedStyle}\">Merged style</div>\n    <div id=\"${testNodes.styleWithComposition}\" class=\"${styles.styleWithComposition}\">Style with composition</div>\n    <div id=\"${testNodes.styleWithNestedComposition}\" class=\"${styles.styleWithNestedComposition}\">Style with nested composition</div>\n    <div id=\"${testNodes.styleVariantsWithComposition}\" class=\"${styles.styleVariantsWithComposition.variant}\">Style variants with composition</div>\n    <div id=\"${testNodes.styleVariantsWithMappedComposition}\" class=\"${styles.styleVariantsWithMappedComposition.variant}\">Style variants with mapped composition</div>\n    <div id=\"${testNodes.compositionOnly}\" class=\"${styles.compositionOnly}\">Composition only</div>\n    <div id=\"${testNodes.styleCompositionInSelector}\" class=\"${styles.styleCompositionInSelector}\">Style composition in selector</div>\n    <div id=\"${testNodes.styleVariantsCompositionInSelector}\" class=\"${styles.styleVariantsCompositionInSelector.variant}\">Style variants composition in selector</div>\n    <div id=\"${testNodes.styleWithStartingStyle}\" class=\"${styles.styleWithStartingStyle}\">Style with @starting-style rule</div>\n  `;\n\n// @ts-expect-error Vite env not defined\nif (import.meta.hot) {\n  // @ts-expect-error Vite env not defined\n  import.meta.hot.accept();\n}\n"
  },
  {
    "path": "fixtures/features/src/index.ts",
    "content": "import html from './html';\n\nfunction render() {\n  document.body.innerHTML = html;\n}\n\nrender();\n"
  },
  {
    "path": "fixtures/features/test-nodes.json",
    "content": "{\n  \"mergedStyle\": \"mergedStyle\",\n  \"styleWithComposition\": \"styleWithComposition\",\n  \"styleWithNestedComposition\": \"styleWithNestedComposition\",\n  \"styleVariantsWithComposition\": \"styleVariantsWithComposition\",\n  \"styleVariantsWithMappedComposition\": \"styleVariantsWithMappedComposition\",\n  \"compositionOnly\": \"compositionOnly\",\n  \"styleCompositionInSelector\": \"styleCompositionInSelector\",\n  \"styleVariantsCompositionInSelector\": \"styleVariantsCompositionInSelector\",\n  \"styleWithStartingStyle\": \"styleWithStartingStyle\"\n}\n"
  },
  {
    "path": "fixtures/layers/CHANGELOG.md",
    "content": "# @fixtures/layers\n\n## 0.0.14\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n\n## 0.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n\n## 0.0.12\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:\n  - @vanilla-extract/css@1.14.0\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:\n  - @vanilla-extract/css@1.12.0\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n"
  },
  {
    "path": "fixtures/layers/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Layers</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/layers/package.json",
    "content": "{\n  \"name\": \"@fixtures/layers\",\n  \"version\": \"0.0.14\",\n  \"main\": \"src/index.ts\",\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/layers/src/index.ts",
    "content": "import { link, pink } from './styles.css';\n\nconst html = String.raw;\n\ndocument.body.innerHTML = html`\n  <main>\n    <p>\n      <a href=\"#\">This link</a> should be <b>red</b> on mobile, green on\n      desktop.\n    </p>\n    <p>\n      <a href=\"#\" class=${link}>This link with class of <code>link</code></a>\n      should be <b>blue</b> on mobile, green on desktop.\n    </p>\n    <p>\n      <a href=\"#\" class=${pink}>This link with class of <code>pink</code></a>\n      should be <b>pink</b> on mobile, green on desktop.\n    </p>\n  </main>\n`;\n"
  },
  {
    "path": "fixtures/layers/src/styles.css.ts",
    "content": "import { style, globalStyle, layer, globalLayer } from '@vanilla-extract/css';\n\n/*\nThe resulting layer order:\n1. lib\n2. base\n3. typography (when above 600px)\n4. utilities\n5. typography (when below 600px)\n\nThis will make links red/blue/pink when below 600px and green when above 600px.\n*/\n\nconst typography = 'typography'; // this layer is defined conditionally\n\nconst lib = globalLayer('lib');\nconst base = layer({ parent: lib });\n\nglobalStyle('a', {\n  '@media': {\n    'screen and (min-width: 600px)': {\n      '@layer': {\n        [typography]: {\n          color: 'green', // styles *all* links\n          fontSize: '1.5rem',\n        },\n      },\n    },\n  },\n  '@layer': {\n    [base]: {\n      fontWeight: 800,\n      color: 'red',\n    },\n  },\n});\n\nexport const link = style({\n  '@layer': {\n    [base]: {\n      color: 'blue',\n    },\n  },\n});\n\nconst utilities = layer({ parent: lib });\n\nexport const pink = style({\n  '@layer': {\n    [utilities]: {\n      color: 'hotpink', // styles *all* .pink's\n    },\n  },\n});\n\nglobalLayer(typography);\n"
  },
  {
    "path": "fixtures/low-level/CHANGELOG.md",
    "content": "# @fixtures/low-level\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.26\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.25\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n\n## 0.0.23\n\n### Patch Changes\n\n- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:\n  - @vanilla-extract/css@1.14.0\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:\n  - @vanilla-extract/css@1.12.0\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 0.0.17\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n\n## 0.0.16\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 0.0.15\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n\n## 0.0.14\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n\n## 0.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:\n  - @vanilla-extract/css@1.9.1\n\n## 0.0.12\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/css@1.8.0\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/css@1.7.3\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:\n  - @vanilla-extract/css@1.7.1\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:\n  - @vanilla-extract/css@1.7.0\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/css@1.6.4\n"
  },
  {
    "path": "fixtures/low-level/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/low-level/package.json",
    "content": "{\n  \"name\": \"@fixtures/low-level\",\n  \"version\": \"0.0.31\",\n  \"main\": \"src/index.ts\",\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/low-level/src/index.ts",
    "content": "import { block, container } from './styles.css';\nimport testNodes from '../test-nodes.json';\n\ndocument.body.innerHTML = `\n<div class=\"${container}\"> \n  <div id=\"${testNodes.block}\" class=\"${block}\"> \n    I'm a block\n  </div>\n</div>\n`;\n\n// @ts-expect-error Vite env not defined\nif (import.meta.hot) {\n  // @ts-expect-error Vite env not defined\n  import.meta.hot.accept();\n}\n"
  },
  {
    "path": "fixtures/low-level/src/styles.css.ts",
    "content": "import { style, createVar, createContainer } from '@vanilla-extract/css';\n\nconst color = createVar();\n\nconst myContainer = createContainer('my-container');\n\nexport const container = style({\n  containerType: 'size',\n  containerName: myContainer,\n  width: 500,\n});\n\nexport const block = style({\n  vars: {\n    [color]: 'blue',\n  },\n  backgroundColor: color,\n  padding: 20,\n  '@media': {\n    'screen and (min-width: 200px)': {\n      '@container': {\n        [`${myContainer} (min-width: 400px)`]: {\n          color: 'white',\n        },\n      },\n    },\n  },\n});\n"
  },
  {
    "path": "fixtures/low-level/test-nodes.json",
    "content": "{\n  \"block\": \"block\"\n}\n"
  },
  {
    "path": "fixtures/next-12-pages-router/CHANGELOG.md",
    "content": "# @fixtures/next-pages-router\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @fixtures/features@0.0.31\n  - @fixtures/recipes@0.0.36\n  - @fixtures/sprinkles@0.0.36\n  - @vanilla-extract/recipes@0.5.5\n  - @vanilla-extract/sprinkles@1.6.3\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/recipes@0.5.5\n  - @vanilla-extract/sprinkles@1.6.3\n  - @fixtures/features@0.0.30\n  - @fixtures/recipes@0.0.35\n  - @fixtures/sprinkles@0.0.35\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:\n  - @vanilla-extract/recipes@0.5.4\n  - @fixtures/recipes@0.0.34\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @fixtures/features@0.0.29\n  - @fixtures/recipes@0.0.33\n  - @fixtures/sprinkles@0.0.34\n  - @vanilla-extract/recipes@0.5.3\n  - @vanilla-extract/sprinkles@1.6.2\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/sprinkles@1.6.2\n  - @vanilla-extract/recipes@0.5.3\n  - @vanilla-extract/css@1.15.2\n  - @fixtures/sprinkles@0.0.33\n  - @fixtures/features@0.0.28\n  - @fixtures/recipes@0.0.32\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n  - @fixtures/features@0.0.27\n  - @fixtures/recipes@0.0.31\n  - @fixtures/sprinkles@0.0.32\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n  - @fixtures/features@0.0.26\n  - @fixtures/recipes@0.0.30\n  - @fixtures/sprinkles@0.0.31\n"
  },
  {
    "path": "fixtures/next-12-pages-router/next.config.js",
    "content": "const {\n  createVanillaExtractPlugin,\n} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');\n\nconst withVanillaExtract = createVanillaExtractPlugin();\n\n/** @type {import('next').NextConfig} */\nconst config = withVanillaExtract({\n  // we need to differentiate build and dev folders\n  // so they don't overwrite eachother when running tests\n  distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',\n  experimental: {\n    externalDir: true,\n  },\n  onDemandEntries: {\n    // Make sure entries are not getting disposed.\n    maxInactiveAge: 1000 * 60 * 60,\n  },\n});\n\nmodule.exports = config;\n"
  },
  {
    "path": "fixtures/next-12-pages-router/package.json",
    "content": "{\n  \"name\": \"@fixtures/next-12-pages-router\",\n  \"description\": \"Next pages router fixtures\",\n  \"version\": \"0.0.7\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"clean:dev\": \"rm -rf .next\",\n    \"clean:prod\": \"rm -rf dist\"\n  },\n  \"dependencies\": {\n    \"@fixtures/features\": \"workspace:*\",\n    \"@fixtures/recipes\": \"workspace:*\",\n    \"@fixtures/sprinkles\": \"workspace:*\",\n    \"@vanilla-extract/css\": \"workspace:*\",\n    \"@vanilla-extract/recipes\": \"workspace:*\",\n    \"@vanilla-extract/sprinkles\": \"workspace:*\",\n    \"next\": \"12.3.4\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.2.55\",\n    \"@vanilla-extract/next-plugin\": \"workspace:*\",\n    \"@vanilla-extract/webpack-plugin\": \"workspace:*\"\n  },\n  \"browserslist\": [\n    \">0.3%\",\n    \"ie 11\",\n    \"safari 4\",\n    \"not op_mini all\"\n  ]\n}\n"
  },
  {
    "path": "fixtures/next-12-pages-router/src/pages/features/index.tsx",
    "content": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n  return (\n    <>\n      <span id=\"features\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-12-pages-router/src/pages/index.tsx",
    "content": "import Link from 'next/link';\n\nexport default function Home() {\n  return (\n    <>\n      <Link href=\"/sprinkles\">sprinkles</Link>\n      <br />\n      <Link href=\"/recipes\">recipes</Link>\n      <br />\n      <Link href=\"/features\">features</Link>\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-12-pages-router/src/pages/recipes/index.tsx",
    "content": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n  return (\n    <>\n      <span id=\"recipes\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-12-pages-router/src/pages/sprinkles/index.tsx",
    "content": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n  return (\n    <>\n      <span id=\"sprinkles\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-12-pages-router/tsconfig.json",
    "content": "{\n  \"extends\": \"../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"forceConsistentCasingInFileNames\": true,\n    \"jsx\": \"preserve\",\n    \"strictNullChecks\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\"\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "fixtures/next-13-app-router/CHANGELOG.md",
    "content": "# @fixtures/next-app-router\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @fixtures/features@0.0.31\n  - @fixtures/recipes@0.0.36\n  - @fixtures/sprinkles@0.0.36\n  - @vanilla-extract/recipes@0.5.5\n  - @vanilla-extract/sprinkles@1.6.3\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/recipes@0.5.5\n  - @vanilla-extract/sprinkles@1.6.3\n  - @fixtures/features@0.0.30\n  - @fixtures/recipes@0.0.35\n  - @fixtures/sprinkles@0.0.35\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:\n  - @vanilla-extract/recipes@0.5.4\n  - @fixtures/recipes@0.0.34\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @fixtures/features@0.0.29\n  - @fixtures/recipes@0.0.33\n  - @fixtures/sprinkles@0.0.34\n  - @vanilla-extract/recipes@0.5.3\n  - @vanilla-extract/sprinkles@1.6.2\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/sprinkles@1.6.2\n  - @vanilla-extract/recipes@0.5.3\n  - @vanilla-extract/css@1.15.2\n  - @fixtures/sprinkles@0.0.33\n  - @fixtures/features@0.0.28\n  - @fixtures/recipes@0.0.32\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n  - @fixtures/features@0.0.27\n  - @fixtures/recipes@0.0.31\n  - @fixtures/sprinkles@0.0.32\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n  - @fixtures/features@0.0.26\n  - @fixtures/recipes@0.0.30\n  - @fixtures/sprinkles@0.0.31\n"
  },
  {
    "path": "fixtures/next-13-app-router/next.config.js",
    "content": "const {\n  createVanillaExtractPlugin,\n} = require('./next-plugin/dist/vanilla-extract-next-plugin.cjs.js');\n\nconst withVanillaExtract = createVanillaExtractPlugin();\n\n/** @type {import('next').NextConfig} */\nconst config = withVanillaExtract({\n  // we need to differentiate build and dev folders\n  // so they don't overwrite eachother when running tests\n  distDir: process.env.NODE_ENV === 'production' ? 'dist' : '.next',\n  experimental: {\n    externalDir: true,\n  },\n  onDemandEntries: {\n    // Make sure entries are not getting disposed.\n    maxInactiveAge: 1000 * 60 * 60,\n  },\n});\n\nmodule.exports = config;\n"
  },
  {
    "path": "fixtures/next-13-app-router/package.json",
    "content": "{\n  \"name\": \"@fixtures/next-13-app-router\",\n  \"description\": \"Next app router fixtures\",\n  \"version\": \"0.0.7\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"clean:dev\": \"rm -rf .next\",\n    \"clean:prod\": \"rm -rf dist\"\n  },\n  \"dependencies\": {\n    \"@fixtures/features\": \"workspace:*\",\n    \"@fixtures/recipes\": \"workspace:*\",\n    \"@fixtures/sprinkles\": \"workspace:*\",\n    \"@vanilla-extract/css\": \"workspace:*\",\n    \"@vanilla-extract/recipes\": \"workspace:*\",\n    \"@vanilla-extract/sprinkles\": \"workspace:*\",\n    \"next\": \"npm:next@13.5.11\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.2.55\",\n    \"@vanilla-extract/next-plugin\": \"workspace:*\",\n    \"@vanilla-extract/webpack-plugin\": \"workspace:*\"\n  },\n  \"browserslist\": [\n    \">0.3%\",\n    \"ie 11\",\n    \"safari 4\",\n    \"not op_mini all\"\n  ]\n}\n"
  },
  {
    "path": "fixtures/next-13-app-router/src/app/features/page.tsx",
    "content": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n  return (\n    <>\n      <span id=\"features\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-13-app-router/src/app/layout.tsx",
    "content": "export default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      <body>{children}</body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-13-app-router/src/app/page.tsx",
    "content": "import Link from 'next/link';\n\nexport default function Home() {\n  return (\n    <>\n      <Link href=\"/sprinkles\">sprinkles</Link>\n      <br />\n      <Link href=\"/recipes\">recipes</Link>\n      <br />\n      <Link href=\"/features\">features</Link>\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-13-app-router/src/app/recipes/page.tsx",
    "content": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n  return (\n    <>\n      <span id=\"recipes\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-13-app-router/src/app/sprinkles/page.tsx",
    "content": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n  return (\n    <>\n      <span id=\"sprinkles\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-13-app-router/tsconfig.json",
    "content": "{\n  \"extends\": \"../../tsconfig.json\",\n  \"compilerOptions\": {\n    \"forceConsistentCasingInFileNames\": true,\n    \"jsx\": \"preserve\",\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"strictNullChecks\": true,\n    \"module\": \"esnext\"\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\",\n    \"dist/types/**/*.ts\"\n  ],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/next.config.ts",
    "content": "import { NextConfig } from 'next';\nimport { createVanillaExtractPlugin } from './next-plugin/dist/vanilla-extract-next-plugin.cjs.js';\nconst withVanillaExtract = createVanillaExtractPlugin({\n  unstable_turbopack: { mode: 'auto' },\n});\n\nexport const config: NextConfig = {\n  distDir: process.env.NEXT_DIST_DIR || '.next',\n  experimental: { externalDir: true },\n  onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 },\n  transpilePackages: ['@fixtures/sprinkles/src/html'],\n  devIndicators: false,\n};\n\nexport default withVanillaExtract(config);\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/package.json",
    "content": "{\n  \"name\": \"@fixtures/next-16-app-pages-router\",\n  \"version\": \"0.0.1\",\n  \"private\": true,\n  \"description\": \"Next 16 fixture with app + pages routers; supports webpack and turbopack builds\",\n  \"scripts\": {\n    \"dev-webpack\": \"NEXT_DIST_DIR=.next/webpack next dev --webpack\",\n    \"dev-turbo\": \"NEXT_DIST_DIR=.next/turbo next dev --turbo\",\n    \"build-webpack\": \"NEXT_DIST_DIR=dist/webpack next build --webpack\",\n    \"start-webpack\": \"NEXT_DIST_DIR=dist/webpack next start\",\n    \"build-turbo\": \"NEXT_DIST_DIR=dist/turbo next build --turbo\",\n    \"start-turbo\": \"NEXT_DIST_DIR=dist/turbo next start\",\n    \"clean:dev\": \"rm -rf .next\",\n    \"clean:prod\": \"rm -rf dist\"\n  },\n  \"dependencies\": {\n    \"@fixtures/features\": \"workspace:*\",\n    \"@fixtures/recipes\": \"workspace:*\",\n    \"@fixtures/sprinkles\": \"workspace:*\",\n    \"@vanilla-extract/css\": \"workspace:*\",\n    \"@vanilla-extract/recipes\": \"workspace:*\",\n    \"@vanilla-extract/sprinkles\": \"workspace:*\",\n    \"next\": \"npm:next@^16.0.0\",\n    \"react\": \"npm:react@^19.2.0\",\n    \"react-dom\": \"npm:react-dom@^19.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.2.55\",\n    \"@vanilla-extract/next-plugin\": \"workspace:*\",\n    \"@vanilla-extract/webpack-plugin\": \"workspace:*\"\n  }\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/creepster/page.tsx",
    "content": "import { creepsterText } from '../../styles/creepster.css';\n\nexport default function CreepsterPage() {\n  return (\n    <div className={creepsterText}>\n      This text should look scary (Creepster Font)\n    </div>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/duplication-test/a-plain.css.ts",
    "content": "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",
    "content": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n  backgroundColor: '#0cdbcd',\n});\n\nexport const a = style({\n  border: '1px solid black',\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/duplication-test/b-plain.css.ts",
    "content": "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",
    "content": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n  backgroundColor: '#0cdbcd',\n});\n\nexport const b = style({\n  border: '1px solid red',\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/duplication-test/extra/c-plain.css.ts",
    "content": "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",
    "content": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n  backgroundColor: '#0cdbcd',\n});\n\nexport const c = style({\n  border: '1px solid black',\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/duplication-test/page.tsx",
    "content": "import './a-plain.css';\nimport { a } from './a.css';\nimport './b-plain.css';\nimport { b } from './b.css';\nimport './extra/c-plain.css';\nimport { c } from './extra/c.css';\n\nexport default function DuplicationTestPage() {\n  return (\n    <div>\n      <div className={a}>\n        <div className={b}>\n          <div className={c}>duplication test</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/features/page.tsx",
    "content": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n  return (\n    <>\n      <span id=\"features\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/function-serializer/page.tsx",
    "content": "import { RedBox, BlueText } from './source.css';\n\nexport default function Page() {\n  return (\n    <div>\n      <h1>Function Serializer Test</h1>\n      <RedBox>\n        This should be a red box with <BlueText>blue text</BlueText> inside\n      </RedBox>\n    </div>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/function-serializer/runtime.tsx",
    "content": "export function runtimeStyled<Tag extends keyof JSX.IntrinsicElements>(\n  tag: Tag,\n  className: string,\n) {\n  return function Component(props: React.ComponentProps<Tag>) {\n    const Element = tag as any;\n    return (\n      <Element\n        {...props}\n        className={[props.className, className].filter(Boolean).join(' ')}\n      />\n    );\n  };\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/function-serializer/source.css.ts",
    "content": "import { styled } from './styled';\n\nexport const RedBox = styled('div', {\n  backgroundColor: 'red',\n  color: 'white',\n  padding: '20px',\n});\n\nexport const BlueText = styled('span', {\n  color: 'blue',\n  fontWeight: 'bold',\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/function-serializer/styled.ts",
    "content": "import { addFunctionSerializer } from '@vanilla-extract/css/functionSerializer';\nimport { style, type StyleRule } from '@vanilla-extract/css';\nimport { runtimeStyled } from './runtime';\nimport React from 'react';\n\nif (React.version.includes('canary')) {\n  throw new Error(\n    'detected vendored React in styles, this will cause errors in some projects',\n  );\n}\n\nexport function styled<Tag extends keyof JSX.IntrinsicElements>(\n  tag: Tag,\n  styles: StyleRule,\n) {\n  const className = style(styles);\n  const args = [tag, className] as const;\n\n  const Component = runtimeStyled(...args);\n\n  addFunctionSerializer(Component, {\n    importPath: './runtime',\n    importName: 'runtimeStyled',\n    args,\n  });\n\n  return Component;\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/layout.tsx",
    "content": "export default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      <body>{children}</body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/next-font/page.tsx",
    "content": "import * as directFonts from '../../styles/fonts';\nimport { pickedValues } from '../../styles/nextFont.css';\n\nexport default function NextFontChecks() {\n  const pairs: Array<\n    [string, string | number | undefined, string | number | undefined]\n  > = [];\n\n  for (const [name, vePicked] of Object.entries(pickedValues)) {\n    const direct = directFonts[name as keyof typeof directFonts];\n    const style = direct?.style || {};\n    pairs.push([`${name} family`, vePicked.fontFamily, style.fontFamily]);\n    pairs.push([`${name} weight`, vePicked.fontWeight, style.fontWeight]);\n    pairs.push([`${name} style`, vePicked.fontStyle, style.fontStyle]);\n  }\n\n  pairs.sort((a, b) => a[0].localeCompare(b[0]));\n\n  for (const [name, fromVe, direct] of pairs) {\n    if (String(fromVe) !== String(direct)) {\n      throw new Error(\n        `[next-font] mismatch for ${name}:\\n${String(fromVe)} !==\\n${String(\n          direct,\n        )}`,\n      );\n    }\n  }\n\n  return (\n    <div id=\"next-font-checks-16\">\n      <h2>next 16 next/font comparisons</h2>\n      <ul>\n        {pairs.map(([name, fromVe, direct]) => (\n          <li key={name} data-name={name} data-ve={fromVe} data-direct={direct}>\n            {name}: {fromVe}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/next-image/image.css.ts",
    "content": "import logo from './logo.png';\nimport { style } from '@vanilla-extract/css';\nimport type { StaticImageData } from 'next/image';\n\n// types are funky because of our monorepo setup\nconst withCast = logo as unknown as StaticImageData;\n\nexport const imageStyle = style({\n  backgroundImage: `url(${withCast.src})`,\n  width: `${withCast.width}px`,\n  height: `${withCast.height}px`,\n  border: '1px solid red',\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/next-image/page.tsx",
    "content": "import { imageStyle } from './image.css';\n\nexport default function NextImagePage() {\n  return <div className={imageStyle}>Next Image Page</div>;\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/page.tsx",
    "content": "import Link from 'next/link';\n\nexport default function Home() {\n  return (\n    <>\n      <Link href=\"/sprinkles\">sprinkles</Link>\n      <br />\n      <Link href=\"/recipes\">recipes</Link>\n      <br />\n      <Link href=\"/features\">features</Link>\n      <br />\n      <Link href=\"/function-serializer\">function serializer</Link>\n      <br />\n      <Link href=\"/creepster\">creepster test</Link>\n      <br />\n      <Link href=\"/next-font\">next font</Link>\n      <br />\n      <Link href=\"/duplication-test\">duplication test</Link>\n      <br />\n      <Link href=\"/next-image\">next image</Link>\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/recipes/page.tsx",
    "content": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n  return (\n    <>\n      <span id=\"recipes\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/app/sprinkles/page.tsx",
    "content": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n  return (\n    <>\n      <span id=\"sprinkles\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/pages/pages-router/features/index.tsx",
    "content": "import html from '@fixtures/features/src/html';\n\nexport default function Features() {\n  return (\n    <>\n      <span id=\"features\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/pages/pages-router/index.tsx",
    "content": "import Link from 'next/link';\n\nexport default function Home() {\n  return (\n    <>\n      <Link href=\"/pages-router/sprinkles\">sprinkles</Link>\n      <br />\n      <Link href=\"/pages-router/recipes\">recipes</Link>\n      <br />\n      <Link href=\"/pages-router/features\">features</Link>\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/pages/pages-router/recipes/index.tsx",
    "content": "import html from '@fixtures/recipes/src/html';\n\nexport default function Recipes() {\n  return (\n    <>\n      <span id=\"recipes\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/pages/pages-router/sprinkles/index.tsx",
    "content": "import html from '@fixtures/sprinkles/src/html';\n\nexport default function Sprinkles() {\n  return (\n    <>\n      <span id=\"sprinkles\" />\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/styles/creepster-font.ts",
    "content": "import { Creepster } from 'next/font/google';\n\nexport const creepster = Creepster({\n  weight: '400',\n  subsets: ['latin'],\n  display: 'block',\n  preload: true,\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/styles/creepster.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { creepster } from './creepster-font';\n\nexport const creepsterText = style({\n  fontFamily: creepster.style.fontFamily,\n  fontSize: '40px',\n  color: 'red',\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/styles/fonts.ts",
    "content": "// --- 1. Imports ---\n// Test weirdly named imports for both local and google fonts.\n\nimport {\n  Noto_Serif as NotoSerif,\n  Roboto as R,\n  Roboto_Flex as RF,\n  Inter as Weird_Renamed_Font$8a_,\n} from 'next/font/google';\nimport weird_renamed_local$3_ from 'next/font/local';\n\n// =================================================================\n// next/font/local (using weird_renamed_local$3_)\n// =================================================================\n\n// --- 2. Local: Variable Name Edge Cases (Export) ---\n// The import name is already tested. This tests weird export names.\n\nexport const localSimple = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  preload: false,\n});\n\nexport const $local_weird_EXPORT_name_ = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  fallback: ['system-ui'],\n  preload: false,\n});\n\n// --- 3. Local: Fallback Prop ---\n\nexport const localFallbackOmitted = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  // fallback is omitted\n  preload: false,\n});\n\nexport const localFallbackSingleArray = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  fallback: ['system-ui'],\n  preload: false,\n});\n\nexport const localFallbackMultiArray = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  fallback: ['Times New Roman', 'Gill Sans', 'emoji'],\n  preload: false,\n});\n\n// --- 4. Local: Style Prop ---\n\nexport const localStyleOmitted = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  // style is omitted\n  preload: false,\n});\n\nexport const localStyleSingle = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  style: 'italic',\n  preload: false,\n});\n\n// --- 5. Local: Weight Prop ---\n\nexport const localWeightOmitted = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  // weight is omitted\n  preload: false,\n});\n\nexport const localWeightSingle = weird_renamed_local$3_({\n  src: './fonts/Inter-Regular.woff2',\n  weight: '400',\n  preload: false,\n});\n\n// =================================================================\n// next/font/google (using Weird_Renamed_Font$8a_)\n// =================================================================\n\n// --- 6. Google: Variable Name Edge Cases (Export) ---\n// The import name is already tested. This tests weird export names.\n\nexport const googleSimple = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  preload: false,\n});\n\nexport const $google_weird_EXPORT_name_ = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  fallback: ['system-ui'],\n  preload: false,\n});\n\n// --- 7. Google: Fallback Prop ---\n\nexport const googleFallbackOmitted = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  // fallback is omitted\n  preload: false,\n});\n\nexport const googleFallbackSingleArray = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  fallback: ['system-ui'],\n  preload: false,\n});\n\nexport const googleFallbackMultiArray = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  fallback: ['Times New Roman', 'Gill Sans', 'emoji'],\n  preload: false,\n});\n\n// --- 8. Google: Style Prop ---\n\nexport const googleStyleOmitted = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  // style is omitted\n  preload: false,\n});\n\nexport const googleStyleSingle = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  style: 'italic',\n  preload: false,\n});\n\nexport const googleStyleArray = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  style: ['italic', 'normal'],\n  preload: false,\n});\n\n// --- 9. Google: Weight Prop ---\n\nexport const googleWeightOmitted = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  // weight is omitted\n  preload: false,\n});\n\nexport const googleWeightSingle = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  weight: '400',\n  preload: false,\n});\n\nexport const googleWeightVariable = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  weight: 'variable',\n  preload: false,\n});\n\nexport const googleWeightArray = Weird_Renamed_Font$8a_({\n  subsets: ['latin'],\n  weight: ['400', '700', '900'],\n  preload: false,\n});\n\n// intentionally odd local variable name to exercise transform edge-cases\nexport const __Local_Font = weird_renamed_local$3_({\n  src: [{ path: './fonts/Inter-Regular.woff2', weight: '400' }],\n  fallback: ['system-ui'],\n  preload: false,\n});\n\n// renamed imports\nexport const _Roboto = R({\n  weight: '400',\n  subsets: ['latin'],\n  fallback: ['system-ui', 'skibidi', 'third font'],\n  style: ['italic', 'normal'],\n  preload: false,\n});\n\nexport const _Flex = RF({\n  subsets: ['latin', 'greek'],\n  weight: ['200', '300'],\n  adjustFontFallback: false,\n  style: 'normal',\n  fallback: ['system-ui'],\n  preload: false,\n});\n\n// style properties are consumed dynamically in nextFont.css.ts via pickedValues\n\n// mirror additional cases from next-16\nexport const _localMultiFallback = weird_renamed_local$3_({\n  src: [{ path: './fonts/Inter-Regular.woff2' }],\n  fallback: ['system-ui', 'ui-monospace', 'third font'],\n  preload: false,\n});\n\nexport const _localExplicit = weird_renamed_local$3_({\n  src: [{ path: './fonts/Inter-Regular.woff2' }],\n  weight: '400',\n  style: 'italic',\n  fallback: ['Times New Roman', 'Gill Sans'],\n  preload: false,\n});\n\nexport const _localDupFallback = weird_renamed_local$3_({\n  src: [{ path: './fonts/Inter-Regular.woff2' }],\n  fallback: ['system-ui', 'system-ui', 'ui-serif', 'weird_font'],\n  preload: false,\n});\n\nexport const _robotoDefaultStyle = R({\n  subsets: ['latin'],\n  fallback: ['serif'],\n  preload: false,\n});\n\nexport const _robotoItalic = R({\n  subsets: ['latin'],\n  fallback: ['sans-serif'],\n  style: 'italic',\n  weight: '400',\n  preload: false,\n});\n\nexport const _robotoMultiStyle = R({\n  subsets: ['latin'],\n  fallback: ['monospace'],\n  style: ['italic', 'normal'],\n  preload: false,\n});\n\nexport const _robotoWeightStr = R({ weight: '400', preload: false });\n\nexport const _robotoWeightVar = R({ weight: 'variable', preload: false });\n\nexport const _notoSerif = NotoSerif({\n  subsets: ['latin'],\n  fallback: ['system-ui'],\n  preload: false,\n});\n\nexport const _robotoFallbackSpaces = R({\n  subsets: ['latin'],\n  fallback: ['Times New Roman', 'Gill Sans', 'Avenir Next'],\n  preload: false,\n});\n\nexport const _robotoDupFallback = R({\n  subsets: ['latin'],\n  fallback: ['system-ui', 'system-ui', 'ui-serif', 'weird_font'],\n  preload: false,\n});\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/src/styles/nextFont.css.ts",
    "content": "import * as fonts from './fonts';\n\nexport const pickedValues = Object.fromEntries(\n  Object.entries(fonts).map(\n    ([importName, { style }]) =>\n      [\n        importName,\n        {\n          fontFamily: style.fontFamily,\n          fontWeight: style.fontWeight,\n          fontStyle: style.fontStyle,\n        },\n      ] as const,\n  ),\n) as Record<\n  keyof typeof fonts,\n  {\n    fontFamily: string;\n    fontWeight: number;\n    fontStyle: string;\n  }\n>;\n"
  },
  {
    "path": "fixtures/next-16-app-pages-router/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    }\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \".next/types/**/*.ts\",\n    \".next/dev/types/**/*.ts\",\n    \"**/*.mts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \"dist/turbo/types/**/*.ts\",\n    \"dist/turbo/dev/types/**/*.ts\",\n    \"dist/webpack/types/**/*.ts\",\n    \"dist/webpack/dev/types/**/*.ts\",\n    \".next/turbo/types/**/*.ts\",\n    \".next/turbo/dev/types/**/*.ts\",\n    \".next/webpack/types/**/*.ts\",\n    \".next/webpack/dev/types/**/*.ts\"\n  ],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "fixtures/react-library-example/package.json",
    "content": "{\n  \"name\": \"@fixtures/react-library-example\",\n  \"description\": \"React design system library\",\n  \"version\": \"0.0.1\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"main\": \"./dist/index.js\",\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:*\",\n    \"clsx\": \"^2.1.1\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.2.55\",\n    \"@types/react-dom\": \"^18.2.19\"\n  }\n}\n"
  },
  {
    "path": "fixtures/react-library-example/src/button/button.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../styles/vars.css.js';\n\nexport const btn = style({\n  background: vars.color.background.brand,\n  borderRadius: vars.size.radius[200],\n  color: vars.color.text.brand,\n  ...vars.typography.body.medium,\n  paddingBlock: vars.size.space[200],\n  paddingInline: vars.size.space[300],\n});\n"
  },
  {
    "path": "fixtures/react-library-example/src/button/button.tsx",
    "content": "import clsx from 'clsx';\nimport * as styles from './button.css.js';\n\nexport default function Button({\n  className,\n  children,\n  type = 'button',\n  ...props\n}: React.ComponentProps<'button'>) {\n  return (\n    <button {...props} type={type} className={clsx(styles.btn, className)}>\n      {children}\n    </button>\n  );\n}\n"
  },
  {
    "path": "fixtures/react-library-example/src/checkbox/checkbox.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../styles/vars.css.js';\n\nexport const label = style({\n  display: 'block',\n  ...vars.typography.body.medium,\n\n  '::before': {\n    background: vars.color.background.brand,\n    borderColor: vars.color.border.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    content: '',\n    borderRadius: vars.size.radius['200'],\n    marginRight: vars.size.space['300'],\n  },\n});\n\nexport const input = style({\n  width: '1.5rem',\n  height: '1.5rem',\n});\n"
  },
  {
    "path": "fixtures/react-library-example/src/checkbox/checkbox.tsx",
    "content": "import { useId } from 'react';\nimport clsx from 'clsx';\nimport * as styles from './checkbox.css.js';\n\nexport default function Radio({\n  children,\n  className,\n  id,\n  ...props\n}: React.ComponentProps<'input'> & { children: React.ReactNode }) {\n  const randomID = useId();\n  return (\n    <>\n      <input\n        {...props}\n        className={styles.input}\n        id={id ?? randomID}\n        type=\"checkbox\"\n      />\n      <label className={clsx(styles.label, className)} htmlFor={id ?? randomID}>\n        {children}\n      </label>\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/react-library-example/src/index.ts",
    "content": "// 1. Style reset\nimport './styles/reset.css.js';\n\n// 2. Design library\nexport { default as Button } from './button/button.js';\nexport { default as Checkbox } from './checkbox/checkbox.js';\nexport { default as Radio } from './radio/radio.js';\n\n// 3. Utility CSS should be last\nimport './styles/utility.css.js';\n"
  },
  {
    "path": "fixtures/react-library-example/src/radio/radio.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../styles/vars.css.js';\n\nexport const label = style({\n  display: 'block',\n  ...vars.typography.body.medium,\n\n  '::before': {\n    background: vars.color.background.brand,\n    borderColor: vars.color.border.default,\n    borderWidth: 1,\n    borderStyle: 'solid',\n    content: '',\n    borderRadius: vars.size.radius.full,\n    marginRight: vars.size.space['300'],\n  },\n});\n\nexport const input = style({\n  width: '1.5rem',\n  height: '1.5rem',\n});\n"
  },
  {
    "path": "fixtures/react-library-example/src/radio/radio.tsx",
    "content": "import { useId } from 'react';\nimport clsx from 'clsx';\nimport * as styles from './radio.css.js';\n\nexport default function Radio({\n  children,\n  className,\n  id,\n  ...props\n}: React.ComponentProps<'input'> & { children: React.ReactNode }) {\n  const randomID = useId();\n  return (\n    <>\n      <input\n        {...props}\n        className={styles.input}\n        id={id ?? randomID}\n        type=\"radio\"\n      />\n      <label className={clsx(styles.label, className)} htmlFor={id ?? randomID}>\n        {children}\n      </label>\n    </>\n  );\n}\n"
  },
  {
    "path": "fixtures/react-library-example/src/styles/reset.css.ts",
    "content": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('html, body', {\n  fontSize: '100%',\n  height: '100%',\n  lineHeight: 1,\n  margin: 0,\n});\n"
  },
  {
    "path": "fixtures/react-library-example/src/styles/utility.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { vars } from './vars.css.js';\n\n// Note: these aren’t meant to be intended as best practice over Sprinkles,\n// these are only testing style() declarations loaded differently\n\nexport const mt100 = style({ marginTop: vars.size.space[100] });\nexport const mt200 = style({ marginTop: vars.size.space[200] });\nexport const mt300 = style({ marginTop: vars.size.space[300] });\nexport const mt400 = style({ marginTop: vars.size.space[400] });\n"
  },
  {
    "path": "fixtures/react-library-example/src/styles/vars.css.ts",
    "content": "import { createGlobalThemeContract, createTheme } from '@vanilla-extract/css';\n\n/**\n * Figma’s Simple Design System\n * Licensed under Creative Commons Attribution 4.0\n * @see https://www.figma.com/community/file/1380235722331273046\n */\n\nexport const vars = createGlobalThemeContract({\n  color: {\n    black: {\n      '100': 'color-black-100',\n      '200': 'color-black-200',\n      '300': 'color-black-300',\n      '400': 'color-black-400',\n      '500': 'color-black-500',\n      '600': 'color-black-600',\n      '700': 'color-black-700',\n      '800': 'color-black-800',\n      '900': 'color-black-900',\n      '1000': 'color-black-1000',\n    },\n    brand: {\n      '100': 'color-brand-100',\n      '200': 'color-brand-200',\n      '300': 'color-brand-300',\n      '400': 'color-brand-400',\n      '500': 'color-brand-500',\n      '600': 'color-brand-600',\n      '700': 'color-brand-700',\n      '800': 'color-brand-800',\n      '900': 'color-brand-900',\n      '1000': 'color-brand-1000',\n    },\n    gray: {\n      '100': 'color-gray-100',\n      '200': 'color-gray-200',\n      '300': 'color-gray-300',\n      '400': 'color-gray-400',\n      '500': 'color-gray-500',\n      '600': 'color-gray-600',\n      '700': 'color-gray-700',\n      '800': 'color-gray-800',\n      '900': 'color-gray-900',\n      '1000': 'color-gray-1000',\n    },\n    green: {\n      '100': 'color-green-100',\n      '200': 'color-green-200',\n      '300': 'color-green-300',\n      '400': 'color-green-400',\n      '500': 'color-green-500',\n      '600': 'color-green-600',\n      '700': 'color-green-700',\n      '800': 'color-green-800',\n      '900': 'color-green-900',\n      '1000': 'color-green-1000',\n    },\n    pink: {\n      '100': 'color-pink-100',\n      '200': 'color-pink-200',\n      '300': 'color-pink-300',\n      '400': 'color-pink-400',\n      '500': 'color-pink-500',\n      '600': 'color-pink-600',\n      '700': 'color-pink-700',\n      '800': 'color-pink-800',\n      '900': 'color-pink-900',\n      '1000': 'color-pink-1000',\n    },\n    red: {\n      '100': 'color-red-100',\n      '200': 'color-red-200',\n      '300': 'color-red-300',\n      '400': 'color-red-400',\n      '500': 'color-red-500',\n      '600': 'color-red-600',\n      '700': 'color-red-700',\n      '800': 'color-red-800',\n      '900': 'color-red-900',\n      '1000': 'color-red-1000',\n    },\n    slate: {\n      '100': 'color-slate-100',\n      '200': 'color-slate-200',\n      '300': 'color-slate-300',\n      '400': 'color-slate-400',\n      '500': 'color-slate-500',\n      '600': 'color-slate-600',\n      '700': 'color-slate-700',\n      '800': 'color-slate-800',\n      '900': 'color-slate-900',\n      '1000': 'color-slate-1000',\n    },\n    white: {\n      '100': 'color-white-100',\n      '200': 'color-white-200',\n      '300': 'color-white-300',\n      '400': 'color-white-400',\n      '500': 'color-white-500',\n      '600': 'color-white-600',\n      '700': 'color-white-700',\n      '800': 'color-white-800',\n      '900': 'color-white-900',\n      '1000': 'color-white-1000',\n    },\n    yellow: {\n      '100': 'color-yellow-100',\n      '200': 'color-yellow-200',\n      '300': 'color-yellow-300',\n      '400': 'color-yellow-400',\n      '500': 'color-yellow-500',\n      '600': 'color-yellow-600',\n      '700': 'color-yellow-700',\n      '800': 'color-yellow-800',\n      '900': 'color-yellow-900',\n      '1000': 'color-yellow-1000',\n    },\n    background: {\n      brand: 'color-background-brand-default',\n      default: 'color-background-default-default',\n    },\n    border: {\n      default: 'color-border-default-default',\n    },\n    text: {\n      brand: 'color-text-brand-default',\n      default: 'color-text-default-default',\n    },\n  },\n  size: {\n    blur: {\n      '100': 'size-blur-100',\n    },\n    depth: {\n      '0': 'size-depth-0',\n      '025': 'size-depth-025',\n      '100': 'size-depth-100',\n      '200': 'size-depth-200',\n      '400': 'size-depth-400',\n      '800': 'size-depth-800',\n      '1200': 'size-depth-1200',\n      negative025: 'size-depth-negative-025',\n      negative100: 'size-depth-negative-100',\n      negative200: 'size-depth-negative-200',\n      negative400: 'size-depth-negative-400',\n      negative800: 'size-depth-negative-800',\n      negative1200: 'size-depth-negative-1200',\n    },\n    icon: {\n      small: 'size-icon-small',\n      medium: 'size-icon-medium',\n      large: 'size-icon-large',\n    },\n    radius: {\n      '100': 'size-radius-100',\n      '200': 'size-radius-200',\n      '400': 'size-radius-400',\n      full: 'size-radius-full',\n    },\n    space: {\n      '0': 'size-space-0',\n      '050': 'size-space-050',\n      '100': 'size-space-100',\n      '150': 'size-space-150',\n      '200': 'size-space-200',\n      '300': 'size-space-300',\n      '400': 'size-space-400',\n      '600': 'size-space-600',\n      '800': 'size-space-800',\n      '1200': 'size-space-1200',\n      '1600': 'size-space-1600',\n      '2400': 'size-space-2400',\n      '4000': 'size-space-4000',\n      negative100: 'size-space-negative-100',\n      negative200: 'size-space-negative-200',\n      negative300: 'size-space-negative-300',\n      negative400: 'size-space-negative-400',\n      negative600: 'size-space-negative-600',\n    },\n    stroke: {\n      border: 'size-stroke-border',\n      focusRing: 'size-stroke-focus-ring',\n    },\n  },\n  typography: {\n    body: {\n      small: {\n        fontFamily: 'typography-body-small-font-family',\n        fontSize: 'typography-body-small-font-size',\n        fontWeight: 'typography-body-small-font-weight',\n      },\n      medium: {\n        fontFamily: 'typography-body-medium-font-family',\n        fontSize: 'typography-body-medium-font-size',\n        fontWeight: 'typography-body-medium-font-weight',\n      },\n      large: {\n        fontFamily: 'typography-body-large-font-family',\n        fontSize: 'typography-body-large-font-size',\n        fontWeight: 'typography-body-large-font-weight',\n      },\n    },\n    code: {\n      small: {\n        fontFamily: 'typography-code-small-font-family',\n        fontSize: 'typography-code-small-font-size',\n        fontWeight: 'typography-code-small-font-weight',\n      },\n      medium: {\n        fontFamily: 'typography-code-medium-font-family',\n        fontSize: 'typography-code-medium-font-size',\n        fontWeight: 'typography-code-medium-font-weight',\n      },\n      large: {\n        fontFamily: 'typography-code-large-font-family',\n        fontSize: 'typography-code-large-font-size',\n        fontWeight: 'typography-code-large-font-weight',\n      },\n    },\n    family: {\n      mono: 'typography-family-mono',\n      sans: 'typography-family-sans',\n      serif: 'typography-family-serif',\n    },\n    scale: {\n      '10': 'typography-scale-10',\n      '01': 'typography-scale-01',\n      '02': 'typography-scale-02',\n      '03': 'typography-scale-03',\n      '04': 'typography-scale-04',\n      '05': 'typography-scale-05',\n      '06': 'typography-scale-06',\n      '07': 'typography-scale-07',\n      '08': 'typography-scale-08',\n      '09': 'typography-scale-09',\n    },\n    weight: {\n      thin: 'typography-weight-thin',\n      extralight: 'typography-weight-extralight',\n      light: 'typography-weight-light',\n      regular: 'typography-weight-regular',\n      medium: 'typography-weight-medium',\n      semibold: 'typography-weight-semibold',\n      bold: 'typography-weight-bold',\n      extrabold: 'typography-weight-extrabold',\n      black: 'typography-weight-black',\n    },\n  },\n});\n\ncreateTheme(vars, {\n  color: {\n    black: {\n      '100':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.050980392156862744)',\n      '200':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.10196078431372549)',\n      '300':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.2)',\n      '400':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.4)',\n      '500':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.6980392156862745)',\n      '600':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8)',\n      '700':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8509803921568627)',\n      '800':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8980392156862745)',\n      '900':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.9490196078431372)',\n      '1000':\n        'color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744)',\n    },\n    brand: {\n      '100':\n        'color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902)',\n      '200':\n        'color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255)',\n      '300':\n        'color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627)',\n      '400':\n        'color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254)',\n      '500':\n        'color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647)',\n      '600':\n        'color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666)',\n      '700':\n        'color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549)',\n      '800':\n        'color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313)',\n      '900':\n        'color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941)',\n      '1000':\n        'color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667)',\n    },\n    gray: {\n      '100':\n        'color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902)',\n      '200':\n        'color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255)',\n      '300':\n        'color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627)',\n      '400':\n        'color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254)',\n      '500':\n        'color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647)',\n      '600':\n        'color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666)',\n      '700':\n        'color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549)',\n      '800':\n        'color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313)',\n      '900':\n        'color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941)',\n      '1000':\n        'color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667)',\n    },\n    green: {\n      '100': 'color(srgb 0.9215686274509803 1 0.9333333333333333)',\n      '200':\n        'color(srgb 0.8117647058823529 0.9686274509803922 0.8274509803921568)',\n      '300':\n        'color(srgb 0.6862745098039216 0.9568627450980393 0.7764705882352941)',\n      '400':\n        'color(srgb 0.5215686274509804 0.8784313725490196 0.6392156862745098)',\n      '500':\n        'color(srgb 0.0784313725490196 0.6823529411764706 0.3607843137254902)',\n      '600': 'color(srgb 0 0.6 0.3176470588235294)',\n      '700': 'color(srgb 0 0.5019607843137255 0.2627450980392157)',\n      '800':\n        'color(srgb 0.00784313725490196 0.32941176470588235 0.17647058823529413)',\n      '900':\n        'color(srgb 0.00784313725490196 0.25098039215686274 0.13725490196078433)',\n      '1000':\n        'color(srgb 0.023529411764705882 0.17647058823529413 0.10588235294117647)',\n    },\n    pink: {\n      '100':\n        'color(srgb 0.9882352941176471 0.9450980392156862 0.9921568627450981)',\n      '200':\n        'color(srgb 0.9803921568627451 0.8823529411764706 0.9803921568627451)',\n      '300':\n        'color(srgb 0.9607843137254902 0.7529411764705882 0.9372549019607843)',\n      '400':\n        'color(srgb 0.9450980392156862 0.6196078431372549 0.8627450980392157)',\n      '500':\n        'color(srgb 0.9176470588235294 0.24705882352941178 0.7215686274509804)',\n      '600':\n        'color(srgb 0.8431372549019608 0.19607843137254902 0.6588235294117647)',\n      '700':\n        'color(srgb 0.7294117647058823 0.16470588235294117 0.5725490196078431)',\n      '800':\n        'color(srgb 0.5411764705882353 0.13333333333333333 0.43529411764705883)',\n      '900':\n        'color(srgb 0.3411764705882353 0.09411764705882353 0.2901960784313726)',\n      '1000':\n        'color(srgb 0.24705882352941178 0.08235294117647059 0.21176470588235294)',\n    },\n    red: {\n      '100':\n        'color(srgb 0.996078431372549 0.9137254901960784 0.9058823529411765)',\n      '200':\n        'color(srgb 0.9921568627450981 0.8274509803921568 0.8156862745098039)',\n      '300':\n        'color(srgb 0.9882352941176471 0.7019607843137254 0.6784313725490196)',\n      '400':\n        'color(srgb 0.9568627450980393 0.4666666666666667 0.41568627450980394)',\n      '500':\n        'color(srgb 0.9254901960784314 0.13333333333333333 0.12156862745098039)',\n      '600':\n        'color(srgb 0.7529411764705882 0.058823529411764705 0.047058823529411764)',\n      '700':\n        'color(srgb 0.5647058823529412 0.043137254901960784 0.03529411764705882)',\n      '800':\n        'color(srgb 0.4117647058823529 0.03137254901960784 0.027450980392156862)',\n      '900':\n        'color(srgb 0.30196078431372547 0.043137254901960784 0.0392156862745098)',\n      '1000':\n        'color(srgb 0.18823529411764706 0.023529411764705882 0.011764705882352941)',\n    },\n    slate: {\n      '100':\n        'color(srgb 0.9529411764705882 0.9529411764705882 0.9529411764705882)',\n      '200':\n        'color(srgb 0.8901960784313725 0.8901960784313725 0.8901960784313725)',\n      '300':\n        'color(srgb 0.803921568627451 0.803921568627451 0.803921568627451)',\n      '400':\n        'color(srgb 0.6980392156862745 0.6980392156862745 0.6980392156862745)',\n      '500':\n        'color(srgb 0.5803921568627451 0.5803921568627451 0.5803921568627451)',\n      '600':\n        'color(srgb 0.4627450980392157 0.4627450980392157 0.4627450980392157)',\n      '700':\n        'color(srgb 0.35294117647058826 0.35294117647058826 0.35294117647058826)',\n      '800':\n        'color(srgb 0.2627450980392157 0.2627450980392157 0.2627450980392157)',\n      '900':\n        'color(srgb 0.18823529411764706 0.18823529411764706 0.18823529411764706)',\n      '1000':\n        'color(srgb 0.1411764705882353 0.1411764705882353 0.1411764705882353)',\n    },\n    white: {\n      '100': 'color(srgb 1 1 1 / 0.050980392156862744)',\n      '200': 'color(srgb 1 1 1 / 0.10196078431372549)',\n      '300': 'color(srgb 1 1 1 / 0.2)',\n      '400': 'color(srgb 1 1 1 / 0.4)',\n      '500': 'color(srgb 1 1 1 / 0.6980392156862745)',\n      '600': 'color(srgb 1 1 1 / 0.8)',\n      '700': 'color(srgb 1 1 1 / 0.8509803921568627)',\n      '800': 'color(srgb 1 1 1 / 0.8980392156862745)',\n      '900': 'color(srgb 1 1 1 / 0.9490196078431372)',\n      '1000': 'color(srgb 1 1 1)',\n    },\n    yellow: {\n      '100': 'color(srgb 1 0.984313725490196 0.9215686274509803)',\n      '200': 'color(srgb 1 0.9450980392156862 0.7607843137254902)',\n      '300': 'color(srgb 1 0.9098039215686274 0.6392156862745098)',\n      '400':\n        'color(srgb 0.9098039215686274 0.7254901960784313 0.19215686274509805)',\n      '500': 'color(srgb 0.8980392156862745 0.6274509803921569 0)',\n      '600':\n        'color(srgb 0.7490196078431373 0.41568627450980394 0.00784313725490196)',\n      '700':\n        'color(srgb 0.592156862745098 0.3176470588235294 0.00784313725490196)',\n      '800':\n        'color(srgb 0.40784313725490196 0.17647058823529413 0.011764705882352941)',\n      '900':\n        'color(srgb 0.3215686274509804 0.1450980392156863 0.01568627450980392)',\n      '1000':\n        'color(srgb 0.25098039215686274 0.10588235294117647 0.00392156862745098)',\n    },\n    background: {\n      brand: vars.color.brand[800],\n      default: vars.color.white[1000],\n    },\n    border: {\n      default: vars.color.gray[300],\n    },\n    text: {\n      brand: vars.color.brand[800],\n      default: vars.color.gray[900],\n    },\n  },\n  size: {\n    blur: {\n      '100': '0.25rem',\n    },\n    depth: {\n      '0': '0',\n      '025': '0.0625rem',\n      '100': '0.25rem',\n      '200': '0.5rem',\n      '400': '1rem',\n      '800': '2rem',\n      '1200': '3rem',\n      negative025: '-0.0625rem',\n      negative100: '-0.25rem',\n      negative200: '-0.5rem',\n      negative400: '-1rem',\n      negative800: '-2rem',\n      negative1200: '-3rem',\n    },\n    icon: {\n      small: '1.5rem',\n      medium: '2rem',\n      large: '2.5rem',\n    },\n    radius: {\n      '100': '0.25rem',\n      '200': '0.5rem',\n      '400': '1rem',\n      full: '624.9375rem',\n    },\n    space: {\n      '0': '0',\n      '050': '0.125rem',\n      '100': '0.25rem',\n      '150': '0.375rem',\n      '200': '0.5rem',\n      '300': '0.75rem',\n      '400': '1rem',\n      '600': '1.5rem',\n      '800': '2rem',\n      '1200': '3rem',\n      '1600': '4rem',\n      '2400': '6rem',\n      '4000': '0',\n      negative100: '-0.25rem',\n      negative200: '-0.5rem',\n      negative300: '-0.75rem',\n      negative400: '-1rem',\n      negative600: '-1.5rem',\n    },\n    stroke: {\n      border: '0.0625rem',\n      focusRing: '0.125rem',\n    },\n  },\n  typography: {\n    body: {\n      small: {\n        fontFamily: vars.typography.family.sans,\n        fontSize: vars.typography.scale['02'],\n        fontWeight: vars.typography.weight.regular,\n      },\n      medium: {\n        fontFamily: vars.typography.family.sans,\n        fontSize: vars.typography.scale['03'],\n        fontWeight: vars.typography.weight.regular,\n      },\n      large: {\n        fontFamily: vars.typography.family.sans,\n        fontSize: vars.typography.scale['04'],\n        fontWeight: vars.typography.weight.regular,\n      },\n    },\n    code: {\n      small: {\n        fontFamily: vars.typography.family.mono,\n        fontSize: vars.typography.scale['02'],\n        fontWeight: vars.typography.weight.regular,\n      },\n      medium: {\n        fontFamily: vars.typography.family.mono,\n        fontSize: vars.typography.scale['03'],\n        fontWeight: vars.typography.weight.regular,\n      },\n      large: {\n        fontFamily: vars.typography.family.mono,\n        fontSize: vars.typography.scale['04'],\n        fontWeight: vars.typography.weight.regular,\n      },\n    },\n    family: {\n      mono: '\"roboto mono\", monospace',\n      sans: 'inter, sans-serif',\n      serif: '\"noto serif\", serif',\n    },\n    scale: {\n      '01': '0.75rem',\n      '02': '0.875rem',\n      '03': '1rem',\n      '04': '1.25rem',\n      '05': '1.5rem',\n      '06': '2rem',\n      '07': '2.5rem',\n      '08': '3rem',\n      '09': '4rem',\n      '10': '4.5rem',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      regular: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n  },\n});\n"
  },
  {
    "path": "fixtures/react-library-example/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\",\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"nodenext\",\n    \"incremental\": true,\n    \"strict\": true,\n    \"jsx\": \"react-jsx\",\n    \"verbatimModuleSyntax\": true\n  },\n  \"include\": [\"src\"]\n}\n"
  },
  {
    "path": "fixtures/recipes/CHANGELOG.md",
    "content": "# @fixtures/recipes\n\n## 0.0.36\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @vanilla-extract/recipes@0.5.5\n\n## 0.0.35\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/recipes@0.5.5\n\n## 0.0.34\n\n### Patch Changes\n\n- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:\n  - @vanilla-extract/recipes@0.5.4\n\n## 0.0.33\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @vanilla-extract/recipes@0.5.3\n\n## 0.0.32\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/recipes@0.5.3\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`3f8b653`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3f8b65368b26100919debd4591245380322c2cd7)]:\n  - @vanilla-extract/recipes@0.5.2\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n\n## 0.0.26\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/recipes@0.5.1\n  - @vanilla-extract/css@1.14.0\n\n## 0.0.25\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb), [`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb)]:\n  - @vanilla-extract/recipes@0.5.0\n\n## 0.0.23\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:\n  - @vanilla-extract/css@1.12.0\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`3163abc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3163abc75c2e280e96989f732e4e5e60e4941eff)]:\n  - @vanilla-extract/recipes@0.4.0\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n\n## 0.0.17\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 0.0.16\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n\n## 0.0.15\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n  - @vanilla-extract/recipes@0.3.0\n\n## 0.0.14\n\n### Patch Changes\n\n- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:\n  - @vanilla-extract/css@1.9.1\n\n## 0.0.13\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n\n## 0.0.12\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/css@1.8.0\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/css@1.7.3\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0), [`64378b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64378b083ed6fb54f073e77b62fefee673602742)]:\n  - @vanilla-extract/css@1.7.1\n  - @vanilla-extract/recipes@0.2.5\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:\n  - @vanilla-extract/css@1.7.0\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`d91ddde`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d91dddeb0d57f2322a6e3c1936cde2a2771d7414)]:\n  - @vanilla-extract/recipes@0.2.4\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n  - @vanilla-extract/recipes@0.2.3\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n  - @vanilla-extract/recipes@0.2.2\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/css@1.6.4\n"
  },
  {
    "path": "fixtures/recipes/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/recipes/package.json",
    "content": "{\n  \"name\": \"@fixtures/recipes\",\n  \"version\": \"0.0.36\",\n  \"main\": \"src/index.ts\",\n  \"sideEffects\": true,\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"@vanilla-extract/recipes\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/recipes/src/html.ts",
    "content": "import { button, stack } from './styles.css';\n\nexport default `<div class=\"${stack()}\">\n    <button class=\"${button()}\"> \n      Standard calm button\n    </button>\n    <button class=\"${button({ size: 'small' })}\"> \n      Small calm button\n    </button>\n    <button class=\"${button({ tone: 'angry' })}\"> \n      Standard angry button\n    </button>\n    <button class=\"${button({\n      size: 'small',\n      tone: 'angry',\n      bold: true,\n    })}\"> \n      Small angry button\n    </button>\n  </div>`;\n"
  },
  {
    "path": "fixtures/recipes/src/index.ts",
    "content": "import html from './html';\n\nfunction render() {\n  document.body.innerHTML = html;\n}\n\nrender();\n"
  },
  {
    "path": "fixtures/recipes/src/styles.css.ts",
    "content": "import { style, createThemeContract, createTheme } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nconst vars = createThemeContract({\n  bg: null,\n  fg: null,\n});\n\nconst calm = createTheme(vars, {\n  bg: 'powderblue',\n  fg: 'white',\n});\n\nconst angry = createTheme(vars, {\n  bg: 'crimson',\n  fg: 'black',\n});\n\nexport const reset = style({\n  border: 0,\n});\n\nexport const button = recipe(\n  {\n    base: [\n      reset,\n      {\n        borderRadius: '6px',\n        background: vars.bg,\n        color: vars.fg,\n        transition: 'all 0.2s ease',\n\n        ':hover': {\n          transform: 'translateY(-3px)',\n        },\n      },\n    ],\n\n    variants: {\n      size: {\n        small: {\n          fontSize: '16px',\n          lineHeight: '24px',\n        },\n        standard: {\n          fontSize: '24px',\n          lineHeight: '40px',\n        },\n      },\n      tone: {\n        calm,\n        angry: [\n          angry,\n          {\n            ':hover': {\n              boxShadow: '0 10px 6px -6px #777',\n            },\n          },\n        ],\n      },\n      bold: {\n        true: {\n          fontWeight: 'bold',\n        },\n      },\n    },\n\n    defaultVariants: {\n      size: 'standard',\n      tone: 'calm',\n    },\n\n    compoundVariants: [\n      {\n        variants: {\n          size: 'small',\n          bold: true,\n        },\n        style: {\n          '@media': {\n            'only screen and (min-width: 600px)': {\n              border: '2px green solid',\n            },\n          },\n        },\n      },\n    ],\n  },\n  'button',\n);\n\nexport const stack = recipe({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n\n  variants: {\n    space: {\n      medium: {\n        gap: 20,\n        '@media': {\n          'only screen and (min-width: 600px)': {\n            gap: 30,\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    space: 'medium',\n  },\n});\n"
  },
  {
    "path": "fixtures/sprinkles/CHANGELOG.md",
    "content": "# @fixtures/sprinkles\n\n## 0.0.36\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @vanilla-extract/sprinkles@1.6.3\n\n## 0.0.35\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/sprinkles@1.6.3\n\n## 0.0.34\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @vanilla-extract/sprinkles@1.6.2\n\n## 0.0.33\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/sprinkles@1.6.2\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.32\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:\n  - @vanilla-extract/css@1.14.0\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n\n## 0.0.26\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3), [`8a35dff`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a35dff7f8b4f75691b7ba6ecdc98f45d6e8c5f4)]:\n  - @vanilla-extract/css@1.12.0\n  - @vanilla-extract/sprinkles@1.6.1\n\n## 0.0.25\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`d33aa4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d33aa4a2c6422803967bf4ff1131d1a86a35797d)]:\n  - @vanilla-extract/sprinkles@1.6.0\n\n## 0.0.23\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`4e8377b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e8377bdcfb8ffa237f94da67624458a8ff3b2b5), [`8365959`](https://github.com/vanilla-extract-css/vanilla-extract/commit/836595943eb21f97400986a123788ec46f165139)]:\n  - @vanilla-extract/sprinkles@1.5.2\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n\n## 0.0.17\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n  - @vanilla-extract/sprinkles@1.5.1\n\n## 0.0.16\n\n### Patch Changes\n\n- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:\n  - @vanilla-extract/css@1.9.1\n\n## 0.0.15\n\n### Patch Changes\n\n- Updated dependencies [[`009e122`](https://github.com/vanilla-extract-css/vanilla-extract/commit/009e122693b92834125b6ca14b30fee5e626e245)]:\n  - @vanilla-extract/sprinkles@1.5.0\n\n## 0.0.14\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n\n## 0.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/css@1.8.0\n\n## 0.0.12\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/css@1.7.3\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:\n  - @vanilla-extract/css@1.7.1\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`98ab94a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98ab94a99fa7dbee395a7ae6ea4af24c7b1bd7ab)]:\n  - @vanilla-extract/sprinkles@1.4.1\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:\n  - @vanilla-extract/css@1.7.0\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`81a3d98`](https://github.com/vanilla-extract-css/vanilla-extract/commit/81a3d98b3fb36660406a59049e1cd464418b00fc)]:\n  - @vanilla-extract/sprinkles@1.4.0\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n  - @vanilla-extract/sprinkles@1.3.3\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n  - @vanilla-extract/sprinkles@1.3.2\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/css@1.6.4\n"
  },
  {
    "path": "fixtures/sprinkles/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/sprinkles/package.json",
    "content": "{\n  \"name\": \"@fixtures/sprinkles\",\n  \"version\": \"0.0.36\",\n  \"main\": \"src/index.ts\",\n  \"sideEffects\": true,\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"@vanilla-extract/sprinkles\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/sprinkles/src/html.ts",
    "content": "import {\n  sprinkles,\n  mapResponsiveValue,\n  normalizeResponsiveValue,\n  preComposedSprinkles,\n  preComposedSprinklesUsedInSelector,\n  container,\n} from './styles.css';\nimport testNodes from '../test-nodes.json';\n\nexport default `\n  <div id=\"${testNodes.root}\" class=\"${container}\">\n    <div class=\"${sprinkles({\n      display: normalizeResponsiveValue('block').mobile,\n      paddingTop: mapResponsiveValue(\n        {\n          mobile: 'small',\n          desktop: 'medium',\n        } as const,\n        (x) => x,\n      ),\n    })}\">\n      Sprinkles\n    </div>\n    <div class=\"${preComposedSprinkles}\">Precomposed sprinkles</div>\n    <div class=\"${preComposedSprinklesUsedInSelector}\">Precomposed Sprinkles Used In Selector</div>\n  </div>\n`;\n"
  },
  {
    "path": "fixtures/sprinkles/src/index.ts",
    "content": "import html from './html';\n\nfunction render() {\n  document.body.innerHTML = html;\n}\n\nrender();\n"
  },
  {
    "path": "fixtures/sprinkles/src/styles.css.ts",
    "content": "import {\n  globalStyle,\n  createVar,\n  createContainer,\n  style,\n} from '@vanilla-extract/css';\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn,\n  createNormalizeValueFn,\n} from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\nconst textAlpha = createVar();\n\nconst containerName = createContainer();\n\nexport const container = style({\n  containerName,\n  containerType: 'size',\n});\n\nconst responsiveConditions = {\n  defaultCondition: 'mobile',\n  conditions: {\n    mobile: {},\n    tablet: {\n      '@container': `${containerName} (min-width: 768px)`,\n      '@media': 'screen and (min-width: 768px)',\n    },\n    desktop: {\n      '@container': `${containerName} (min-width: 1024px)`,\n      '@media': 'screen and (min-width: 1024px)',\n    },\n    darkDesktop: {\n      '@supports': 'not (display: grid)',\n      '@media': 'screen and (min-width: 1024px)',\n      selector: '[data-dark-mode] &',\n    },\n  },\n  responsiveArray: ['mobile', 'tablet', 'desktop'],\n} as const;\n\nconst responsiveProperties = defineProperties({\n  ...responsiveConditions,\n  properties: {\n    display: ['flex', 'none', 'block'],\n    paddingTop: {\n      small: '10px',\n      medium: '20px',\n    },\n  },\n});\n\nconst responsiveLayerProperties = defineProperties({\n  '@layer': 'responsive-layer-name',\n  ...responsiveConditions,\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`,\n      },\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } },\n      0.2: { vars: { [alpha]: '0.2' } },\n      0.3: { vars: { [alpha]: '0.3' } },\n    },\n  },\n});\n\nconst unconditionalProperties = defineProperties({\n  properties: {\n    color: {\n      red: {\n        vars: {\n          [textAlpha]: '1',\n        },\n        color: `rgba(255, 0, 0, ${textAlpha})`,\n      },\n    },\n  },\n});\n\nconst unconditionalLayerProperties = defineProperties({\n  '@layer': 'unconditional-layer-name',\n  properties: {\n    textOpacity: {\n      1: { vars: { [textAlpha]: '1' } },\n      0.8: { vars: { [textAlpha]: '0.8' } },\n    },\n  },\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  responsiveLayerProperties,\n  unconditionalProperties,\n  unconditionalLayerProperties,\n);\n\nexport const mapResponsiveValue = createMapValueFn(responsiveProperties);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n\nexport const preComposedSprinkles = sprinkles({\n  display: 'block',\n  paddingTop: 'small',\n  background: 'red',\n  backgroundOpacity: { mobile: 0.1, tablet: 0.2, desktop: 0.3 },\n  color: 'red',\n  textOpacity: 0.8,\n});\n\nexport const preComposedSprinklesUsedInSelector = sprinkles({\n  display: 'flex',\n  paddingTop: 'medium',\n});\n\nglobalStyle('body', {\n  margin: 0,\n});\n\nglobalStyle(`body ${preComposedSprinklesUsedInSelector}`, {\n  background: 'red',\n});\n"
  },
  {
    "path": "fixtures/sprinkles/test-nodes.json",
    "content": "{\n  \"root\": \"root\"\n}\n"
  },
  {
    "path": "fixtures/template-string-paths/CHANGELOG.md",
    "content": "# @fixtures/template-string-paths\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n"
  },
  {
    "path": "fixtures/template-string-paths/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/template-string-paths/package.json",
    "content": "{\n  \"name\": \"@fixtures/template-string-paths\",\n  \"version\": \"0.0.8\",\n  \"main\": \"src/index.ts\",\n  \"sideEffects\": true,\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/template-string-paths/src/[...slug]/index.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const catchAllSegment = style({ color: 'lime' });\n"
  },
  {
    "path": "fixtures/template-string-paths/src/[[...slug]]/index.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const optionalCatchAllSegment = style({ color: 'orchid' });\n"
  },
  {
    "path": "fixtures/template-string-paths/src/[[id]]/index.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const doubleSquareBracketId = style({ color: 'darkkhaki' });\n"
  },
  {
    "path": "fixtures/template-string-paths/src/[]/index.css.ts",
    "content": "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",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const withHyphen = style({ color: 'indigo' });\n"
  },
  {
    "path": "fixtures/template-string-paths/src/[id]/index.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const singleSquareBracketsId = style({ color: 'tomato' });\n"
  },
  {
    "path": "fixtures/template-string-paths/src/index.ts",
    "content": "import { emptySquareBrackets } from './[]/index.css';\nimport { singleSquareBracketsId } from './[id]/index.css';\nimport { doubleSquareBracketId } from './[[id]]/index.css';\nimport { catchAllSegment } from './[...slug]/index.css';\nimport { optionalCatchAllSegment } from './[[...slug]]/index.css';\nimport { withHyphen } from './[blog-id]/index.css';\n\n// Fixture for testing escaping of webpack template strings and Next.js dyanmic routes\n// https://webpack.js.org/configuration/output/#template-strings\n// https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes\nfunction render() {\n  document.body.innerHTML = `\n    <div class=\"${emptySquareBrackets}\">[] path</div>\n    <div class=\"${singleSquareBracketsId}\">[id] path</div>\n    <div class=\"${doubleSquareBracketId}\">[[id]] path</div>\n    <div class=\"${catchAllSegment}\">[...slug] path</div>\n    <div class=\"${optionalCatchAllSegment}\">[[...slug]] path</div>\n    <div class=\"${withHyphen}\">[blog-id] path</div>\n  `;\n}\n\nrender();\n"
  },
  {
    "path": "fixtures/themed/CHANGELOG.md",
    "content": "# @fixtures/themed\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @vanilla-extract/dynamic@2.1.2\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/dynamic@2.1.2\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @vanilla-extract/dynamic@2.1.1\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/dynamic@2.1.1\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.26\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.25\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n\n## 0.0.23\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/dynamic@2.1.0\n  - @vanilla-extract/css@1.14.0\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:\n  - @vanilla-extract/css@1.12.0\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 0.0.17\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n\n## 0.0.16\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 0.0.15\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n\n## 0.0.14\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n  - @vanilla-extract/dynamic@2.0.3\n\n## 0.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:\n  - @vanilla-extract/css@1.9.1\n\n## 0.0.12\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/css@1.8.0\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/css@1.7.3\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:\n  - @vanilla-extract/css@1.7.1\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:\n  - @vanilla-extract/css@1.7.0\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n  - @vanilla-extract/dynamic@2.0.2\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n  - @vanilla-extract/dynamic@2.0.1\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/css@1.6.4\n"
  },
  {
    "path": "fixtures/themed/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/themed/package.json",
    "content": "{\n  \"name\": \"@fixtures/themed\",\n  \"version\": \"0.0.31\",\n  \"main\": \"src/index.ts\",\n  \"sideEffects\": true,\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"@vanilla-extract/dynamic\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/themed/src/index.ts",
    "content": "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';\n\nimport { theme, altTheme, responsiveTheme, vars } from './themes.css';\nimport { button, container, opacity } from './styles.css';\nimport { shadow } from './shared.css';\nimport testNodes from '../test-nodes.json';\n\n// Uncomment to get HMR for Vite working\n// if (import.meta.hot) {\n//   import.meta.hot.accept(\n//     ['./themes.css', './styles.css', './shared.css'],\n//     () => {\n//       render();\n//     },\n//   );\n// }\n\nconst inlineTheme = assignInlineVars(vars, {\n  colors: {\n    backgroundColor: 'orange',\n    text: 'black',\n  },\n  space: {\n    1: '4px',\n    2: '8px',\n    3: '12px',\n  },\n});\n\nfunction render() {\n  document.body.innerHTML = `\n  <div id=\"${testNodes.root}\" class=\"${shadow}\"> \n    Root theme\n    <div id=\"${testNodes.rootContainer}\" class=\"${container}\">\n      <button id=\"${testNodes.rootButton}\" class=\"${button}\">Main theme button</button>\n      <div class=\"${altTheme}\"> \n        Alt theme\n        <div id=\"${testNodes.altContainer}\" class=\"${container}\">\n          <button id=\"${testNodes.altButton}\" class=\"${button}\">Alt theme button</button>\n          <div class=\"${theme}\"> \n            Back to root theme\n            <div id=\"${testNodes.nestedRootContainer}\" class=\"${container}\">\n              <button id=\"${testNodes.nestedRootButton}\" class=\"${button}\">Main theme button</button>\n            <div style=\"${inlineTheme}\">\n              Inline theme\n                <div id=\"${testNodes.inlineThemeContainer}\" class=\"${container}\">\n                  <button id=\"${testNodes.inlineThemeButton}\" class=\"${button} ${opacity['1/2']}\">Inline theme <span class=\"{${opacity['1/4']}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"${testNodes.dynamicVarsContainer}\" class=\"${container}\">\n                      <button id=\"${testNodes.dynamicVarsButton}\" class=\"${button}\">Dynamic vars button</button>\n                  <div class=\"${responsiveTheme}\">\n              Responsive theme\n                <div id=\"${testNodes.responsiveThemeContainer}\" class=\"${container}\">\n                  <button id=\"${testNodes.responsiveThemeButton}\" class=\"${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n`;\n\n  const dynamicVarsContainer = document.getElementById(\n    testNodes.dynamicVarsContainer,\n  );\n\n  if (!dynamicVarsContainer) {\n    throw new Error('Dynamic vars container not found.');\n  }\n\n  setElementVars(dynamicVarsContainer, vars, {\n    colors: {\n      backgroundColor: 'transparent',\n      text: 'papayawhip',\n    },\n    space: {\n      1: '5px',\n      2: '10px',\n      3: '15px',\n    },\n  });\n\n  setElementVars(dynamicVarsContainer, {\n    [vars.colors.backgroundColor]: 'darksalmon',\n  });\n}\n\nrender();\n"
  },
  {
    "path": "fixtures/themed/src/shared.css.ts",
    "content": "import { globalStyle, style } from '@vanilla-extract/css';\n\nexport const shadow: string = style({\n  boxShadow: '0 0 5px red',\n});\n\nglobalStyle('body', {\n  backgroundColor: 'skyblue',\n});\n\n// make the screenshot less flaky in CI\nglobalStyle('body, button', {\n  lineHeight: '16px',\n});\n"
  },
  {
    "path": "fixtures/themed/src/styles.css.ts",
    "content": "import {\n  style,\n  styleVariants,\n  createVar,\n  fallbackVar,\n  fontFace,\n  globalFontFace,\n  globalStyle,\n} from '@vanilla-extract/css';\nimport { shadow } from './shared.css';\nimport { vars, theme, altTheme } from './themes.css';\n\nconst impact = fontFace({\n  src: 'local(\"Impact\")',\n});\n\nglobalFontFace('MyGlobalComicSans', {\n  src: 'local(\"Comic Sans MS\")',\n});\n\nexport const container = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.space[2],\n  padding: vars.space[3],\n  '@media': {\n    'only screen and (min-width: 500px)': {\n      border: `1px solid ${vars.colors.backgroundColor}`,\n    },\n  },\n});\n\nconst iDunno = style([{ zIndex: 1 }, { position: 'relative' }]);\n\nexport const button = style([\n  {\n    fontFamily: impact,\n    backgroundColor: fallbackVar(\n      vars.colors.backgroundColor,\n      '\"THIS FALLBACK VALUE SHOULD NEVER BE USED\"',\n    ),\n    color: vars.colors.text,\n    borderRadius: '9999px',\n    '@media': {\n      'only screen and (min-width: 500px)': {\n        padding: vars.space[1],\n      },\n      'only screen and (min-width: 1000px)': {\n        padding: vars.space[2],\n      },\n    },\n    selectors: {\n      [`${altTheme} ${theme} ${container} &`]: {\n        fontFamily: 'MyGlobalComicSans',\n        outline: '5px solid red',\n      },\n    },\n  },\n  shadow,\n  iDunno,\n]);\n\nglobalStyle(`body ${iDunno}:after`, {\n  content: \"'I am content'\",\n});\n\nconst blankVar1 = createVar({\n  syntax: '<number>',\n  inherits: false,\n  initialValue: '0.5',\n});\nconst blankVar2 = createVar();\n\nexport const opacity = styleVariants(\n  {\n    '1/2': blankVar1,\n    '1/4': fallbackVar(blankVar1, blankVar2, '0.25'),\n  },\n  (value) => ({\n    selectors: { 'html &': { opacity: value } },\n  }),\n);\n"
  },
  {
    "path": "fixtures/themed/src/themes.css.ts",
    "content": "import {\n  createGlobalTheme,\n  createTheme,\n  assignVars,\n  style,\n  layer,\n} from '@vanilla-extract/css';\n\nexport const theme = style({});\n\nexport const vars = createGlobalTheme(`:root, ${theme}`, {\n  colors: {\n    backgroundColor: 'blue',\n    text: 'white',\n  },\n  space: {\n    1: '4px',\n    2: '8px',\n    3: '12px',\n  },\n});\n\nexport const altTheme = createTheme(vars, {\n  colors: {\n    backgroundColor: 'green',\n    text: 'white',\n  },\n  space: {\n    1: '8px',\n    2: '12px',\n    3: '16px',\n  },\n});\n\nconst themeLayer = layer();\n\n// Not tested visually, exported for CSS output testing\nexport const [altTheme2Class, altTheme2Contract] = createTheme({\n  '@layer': themeLayer,\n  colors: {\n    backgroundColor: 'green',\n    text: 'white',\n  },\n  space: {\n    1: '8px',\n    2: '12px',\n    3: '16px',\n  },\n});\n\n// Not tested visually, exported for CSS output testing\nexport const altTheme3 = createGlobalTheme(':root', altTheme2Contract, {\n  '@layer': 'globalThemeLayer',\n  colors: {\n    backgroundColor: 'green',\n    text: 'white',\n  },\n  space: {\n    1: '8px',\n    2: '12px',\n    3: '16px',\n  },\n});\n\nexport const responsiveTheme = style({\n  vars: assignVars(vars, {\n    colors: {\n      backgroundColor: 'pink',\n      text: 'purple',\n    },\n    space: {\n      1: '6px',\n      2: '12px',\n      3: '18px',\n    },\n  }),\n  '@media': {\n    'screen and (min-width: 768px)': {\n      vars: assignVars(vars.colors, {\n        backgroundColor: 'purple',\n        text: 'pink',\n      }),\n    },\n  },\n});\n"
  },
  {
    "path": "fixtures/themed/test-nodes.json",
    "content": "{\n  \"root\": \"root\",\n  \"rootContainer\": \"rootContainer\",\n  \"rootButton\": \"rootButton\",\n  \"altContainer\": \"altContainer\",\n  \"altButton\": \"altButton\",\n  \"nestedRootContainer\": \"nestedRootContainer\",\n  \"nestedRootButton\": \"nestedRootButton\",\n  \"inlineThemeContainer\": \"inlineThemeContainer\",\n  \"inlineThemeButton\": \"inlineThemeButton\",\n  \"dynamicVarsContainer\": \"dynamicVarsContainer\",\n  \"dynamicVarsButton\": \"dynamicVarsButton\",\n  \"responsiveThemeContainer\": \"responsiveThemeContainer\",\n  \"responsiveThemeButton\": \"responsiveThemeButton\"\n}\n"
  },
  {
    "path": "fixtures/thirdparty/CHANGELOG.md",
    "content": "# @fixtures/thirdparty\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @fixtures/thirdparty-dep@0.0.9\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @fixtures/thirdparty-dep@0.0.8\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @fixtures/thirdparty-dep@0.0.7\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/css@1.15.2\n  - @fixtures/thirdparty-dep@0.0.6\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n  - @fixtures/thirdparty-dep@0.0.5\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n  - @fixtures/thirdparty-dep@0.0.4\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n  - @fixtures/thirdparty-dep@0.0.3\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n  - @fixtures/thirdparty-dep@0.0.2\n"
  },
  {
    "path": "fixtures/thirdparty/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/thirdparty/package.json",
    "content": "{\n  \"name\": \"@fixtures/thirdparty\",\n  \"version\": \"0.0.9\",\n  \"main\": \"src/index.ts\",\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@fixtures/thirdparty-dep\": \"workspace:*\",\n    \"@vanilla-extract/css\": \"workspace:*\"\n  }\n}\n"
  },
  {
    "path": "fixtures/thirdparty/src/index.ts",
    "content": "import { block, depBlock, depdepBlock } from './styles.css';\nimport testNodes from '../test-nodes.json';\n\ndocument.body.innerHTML = `\n  <div id=\"${testNodes.first}\" class=\"${block}\">\n    I'm a first-party block\n    <div id=\"${testNodes.third}\" class=\"${depBlock}\">\n      I'm a third party block\n      <div id=\"${testNodes.thirdThird}\" class=\"${depdepBlock}\">\n        I'm a third party of third party block\n      </div>\n    </div>\n  </div>\n`;\n"
  },
  {
    "path": "fixtures/thirdparty/src/styles.css.ts",
    "content": "import { style, createVar } from '@vanilla-extract/css';\n\nexport {\n  depBlock,\n  depColor,\n  depdepBlock,\n  depdepColor,\n} from '@fixtures/thirdparty-dep';\n\nconst color = createVar();\n\nexport const block = style({\n  vars: {\n    [color]: 'red',\n  },\n  backgroundColor: color,\n});\n"
  },
  {
    "path": "fixtures/thirdparty/test-nodes.json",
    "content": "{\n  \"first\": \"first\",\n  \"third\": \"third\",\n  \"thirdThird\": \"thirdThird\"\n}\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/CHANGELOG.md",
    "content": "# @fixtures/thirdparty-dep\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n  - @fixtures/thirdparty-dep-dep@0.0.9\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n  - @fixtures/thirdparty-dep-dep@0.0.8\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @fixtures/thirdparty-dep-dep@0.0.7\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/css@1.15.2\n  - @fixtures/thirdparty-dep-dep@0.0.6\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n  - @fixtures/thirdparty-dep-dep@0.0.5\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n  - @fixtures/thirdparty-dep-dep@0.0.4\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n  - @fixtures/thirdparty-dep-dep@0.0.3\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n  - @fixtures/thirdparty-dep-dep@0.0.2\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/index.mjs",
    "content": "export { depBlock, depColor } from './styles.css.mjs';\n\nexport { depdepBlock, depdepColor } from '@fixtures/thirdparty-dep-dep';\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/package.json",
    "content": "{\n  \"name\": \"@fixtures/thirdparty-dep\",\n  \"version\": \"0.0.9\",\n  \"exports\": {\n    \".\": {\n      \"import\": \"./index.mjs\"\n    },\n    \"./package.json\": \"./package.json\"\n  },\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@fixtures/thirdparty-dep-dep\": \"workspace:*\",\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/styles.css.mjs",
    "content": "import { style, createVar } from '@vanilla-extract/css';\n\nexport const depColor = createVar();\n\nexport const depBlock = style({\n  vars: {\n    [depColor]: 'green',\n  },\n  backgroundColor: depColor,\n});\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/CHANGELOG.md",
    "content": "# @fixtures/thirdparty-dep-dep\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/css@1.15.2\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/index.mjs",
    "content": "export { depdepBlock, depdepColor } from './styles.css.mjs';\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/package.json",
    "content": "{\n  \"name\": \"@fixtures/thirdparty-dep-dep\",\n  \"version\": \"0.0.9\",\n  \"exports\": {\n    \".\": {\n      \"import\": \"./index.mjs\"\n    },\n    \"./package.json\": \"./package.json\"\n  },\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/thirdparty/thirdparty-dep/thirdparty-dep-dep/styles.css.mjs",
    "content": "import { style, createVar } from '@vanilla-extract/css';\n\nexport const depdepColor = createVar();\n\nexport const depdepBlock = style({\n  vars: {\n    [depdepColor]: 'blue',\n  },\n  backgroundColor: depdepColor,\n});\n"
  },
  {
    "path": "fixtures/unused-modules/CHANGELOG.md",
    "content": "# @fixtures/unused-modules\n\n## 1.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n\n## 1.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n\n## 1.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n\n## 1.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/css@1.15.2\n\n## 1.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 1.0.26\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n\n## 1.0.25\n\n### Patch Changes\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 1.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/css@1.14.1\n\n## 1.0.23\n\n### Patch Changes\n\n- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:\n  - @vanilla-extract/css@1.14.0\n\n## 1.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n\n## 1.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3)]:\n  - @vanilla-extract/css@1.12.0\n\n## 1.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n\n## 1.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n\n## 1.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 1.0.17\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n\n## 1.0.16\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 1.0.15\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n\n## 1.0.14\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n\n## 1.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:\n  - @vanilla-extract/css@1.9.1\n\n## 1.0.12\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n\n## 1.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/css@1.8.0\n\n## 1.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n\n## 1.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/css@1.7.3\n\n## 1.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n\n## 1.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0)]:\n  - @vanilla-extract/css@1.7.1\n\n## 1.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:\n  - @vanilla-extract/css@1.7.0\n\n## 1.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n\n## 1.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n\n## 1.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n\n## 1.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n\n## 1.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/css@1.6.4\n"
  },
  {
    "path": "fixtures/unused-modules/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"./src/index.ts\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "fixtures/unused-modules/package.json",
    "content": "{\n  \"name\": \"@fixtures/unused-modules\",\n  \"version\": \"1.0.31\",\n  \"main\": \"src/index.ts\",\n  \"sideEffects\": [\n    \"src/global.css.ts\"\n  ],\n  \"author\": \"SEEK\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "fixtures/unused-modules/src/global.css.ts",
    "content": "import { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n  backgroundColor: 'lavender',\n});\n"
  },
  {
    "path": "fixtures/unused-modules/src/index.ts",
    "content": "import './global.css';\nimport { usedStyle } from './lookup';\nimport { resetStyle } from './reset';\nimport testNodes from '../test-nodes.json';\n\nconst node = document.createElement('div');\n\nnode.setAttribute('id', testNodes.root);\nnode.setAttribute('class', `${resetStyle} ${usedStyle}`);\n\ndocument.body.appendChild(node);\n"
  },
  {
    "path": "fixtures/unused-modules/src/lookup.ts",
    "content": "export * from './unused';\nexport * from './used';\nexport * from './reset';\n"
  },
  {
    "path": "fixtures/unused-modules/src/reset/index.ts",
    "content": "export { default as resetStyle } from './reset.css';\n"
  },
  {
    "path": "fixtures/unused-modules/src/reset/reset.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport default style({\n  boxSizing: 'border-box',\n});\n"
  },
  {
    "path": "fixtures/unused-modules/src/shared/index.ts",
    "content": "export { default as sharedStyle } from './shared.css';\n"
  },
  {
    "path": "fixtures/unused-modules/src/shared/shared.css.ts",
    "content": "import { globalStyle, style } from '@vanilla-extract/css';\n\nglobalStyle('body', {\n  border: '5px solid black',\n});\n\nexport default style({\n  display: 'flex',\n});\n"
  },
  {
    "path": "fixtures/unused-modules/src/unused/index.ts",
    "content": "export { default as unusedStyle } from './unused.css';\n"
  },
  {
    "path": "fixtures/unused-modules/src/unused/unused.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { sharedStyle } from '../shared';\n\nconst className = style({\n  color: 'red',\n  backgroundColor: 'blue',\n});\n\nexport default `${className} ${sharedStyle}`;\n"
  },
  {
    "path": "fixtures/unused-modules/src/used/index.ts",
    "content": "export { default as usedStyle } from './used.css';\n"
  },
  {
    "path": "fixtures/unused-modules/src/used/used.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { sharedStyle } from '../shared';\n\nconst className = style({\n  height: 100,\n  width: 100,\n  background: 'green',\n});\n\nexport default `${className} ${sharedStyle}`;\n"
  },
  {
    "path": "fixtures/unused-modules/test-nodes.json",
    "content": "{\n  \"root\": \"root\"\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vanilla-extract\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"dev\": \"preconstruct dev\",\n    \"build\": \"preconstruct build && pnpm build:dts\",\n    \"build:dts\": \"node ./scripts/build-dts.ts\",\n    \"watch\": \"preconstruct watch\",\n    \"start-fixture\": \"tsx ./test-helpers/src/startFixtureCLI\",\n    \"start\": \"pnpm start-fixture themed\",\n    \"start-site\": \"pnpm --filter=site start\",\n    \"build-site\": \"pnpm --filter=site build\",\n    \"test:unit\": \"vitest run\",\n    \"test:playwright\": \"pnpm test:clean-next && pnpm test:build-next && playwright test\",\n    \"test:clean-next\": \"pnpm --filter=@fixtures/next-* run '/^clean.*/'\",\n    \"test:build-next\": \"node scripts/copy-next-plugin.ts && pnpm --filter=@fixtures/next-* run '/^build.*/'\",\n    \"format\": \"oxlint --fix && prettier --write .\",\n    \"lint\": \"pnpm run --no-bail '/^lint:.*/'\",\n    \"lint:manypkg\": \"manypkg check\",\n    \"lint:prettier\": \"prettier --cache --check .\",\n    \"lint:tsc\": \"tsc\",\n    \"lint:oxlint\": \"oxlint\",\n    \"copy-readme-to-packages\": \"node scripts/copy-readme-to-packages.ts\",\n    \"version\": \"changeset version && pnpm install --lockfile-only\",\n    \"prepare-release\": \"pnpm copy-readme-to-packages && pnpm build\",\n    \"release\": \"pnpm prepare-release && changeset publish\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.23.9\",\n    \"@babel/preset-env\": \"^7.23.9\",\n    \"@babel/preset-react\": \"^7.23.3\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"@changesets/changelog-github\": \"^0.6.0\",\n    \"@changesets/cli\": \"^2.30.0\",\n    \"@manypkg/cli\": \"^0.25.1\",\n    \"@playwright/test\": \"^1.57.0\",\n    \"@preconstruct/cli\": \"^2.8.2\",\n    \"@types/node\": \"^22.15.3\",\n    \"@vanilla-extract/vite-plugin\": \"workspace:*\",\n    \"jsdom\": \"^29.0.0\",\n    \"oxlint\": \"^1.55.0\",\n    \"prettier\": \"^3.8.1\",\n    \"tsx\": \"^4.20.6\",\n    \"typescript\": \"^5.8.3\",\n    \"vitest\": \"^4.1.0\"\n  },\n  \"preconstruct\": {\n    \"___experimentalFlags_WILL_CHANGE_IN_PATCH\": {\n      \"keepDynamicImportAsDynamicImportInCommonJS\": true\n    },\n    \"packages\": [\n      \"packages/*\"\n    ]\n  },\n  \"manypkg\": {\n    \"workspaceProtocol\": \"require\"\n  },\n  \"packageManager\": \"pnpm@10.32.0\"\n}\n"
  },
  {
    "path": "packages/babel-plugin-debug-ids/CHANGELOG.md",
    "content": "# @vanilla-extract/babel-plugin-debug-ids\n\n## 1.2.2\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n## 1.2.1\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n## 1.2.0\n\n### Minor Changes\n\n- [#1092](https://github.com/vanilla-extract-css/vanilla-extract/pull/1092) [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b) Thanks [@z4o4z](https://github.com/z4o4z)! - Add support for `createVar` calls that declare `@property` rules\n\n## 1.1.0\n\n### Minor Changes\n\n- [#1450](https://github.com/vanilla-extract-css/vanilla-extract/pull/1450) [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415) Thanks [@wuz](https://github.com/wuz)! - Add support for the new `createViewTransition` API\n\n## 1.0.6\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n## 1.0.5\n\n### Patch Changes\n\n- [#1319](https://github.com/vanilla-extract-css/vanilla-extract/pull/1319) [`6f7f738`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6f7f7382495582759cececa421ef83142935772b) Thanks [@joeldavuk](https://github.com/joeldavuk)! - Update Babel dependencies to address https://github.com/advisories/GHSA-67hx-6x53-jw92\n\n## 1.0.4\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n## 1.0.3\n\n### Patch Changes\n\n- [#1054](https://github.com/vanilla-extract-css/vanilla-extract/pull/1054) [`3c74cc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c74cc2a8fab0dde26aab57c568af70b42ab5347) Thanks [@askoufis](https://github.com/askoufis)! - Handle alternative compiled forms of array destructured `createTheme`\n\n## 1.0.2\n\n### Patch Changes\n\n- [#1015](https://github.com/vanilla-extract-css/vanilla-extract/pull/1015) [`8a1751c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a1751c8fcbeaa0cfb8d894a8050535372516dd4) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Fix `args.at is not a function` error\n\n  Refactor argument traversal to ensure compatibility with node 14.\n\n## 1.0.1\n\n### Patch Changes\n\n- [#956](https://github.com/vanilla-extract-css/vanilla-extract/pull/956) [`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101) Thanks [@mrm007](https://github.com/mrm007)! - Ensure support for new TypeScript language features by bumping the minimum required Babel dependency versions.\n"
  },
  {
    "path": "packages/babel-plugin-debug-ids/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/babel-plugin-debug-ids\",\n  \"version\": \"1.2.2\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-babel-plugin-debug-ids.cjs.js\",\n  \"module\": \"dist/vanilla-extract-babel-plugin-debug-ids.esm.js\",\n  \"types\": \"dist/vanilla-extract-babel-plugin-debug-ids.cjs.d.ts\",\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/babel-plugin-debug-ids\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@babel/core\": \"^7.23.9\"\n  },\n  \"devDependencies\": {\n    \"@babel/plugin-syntax-typescript\": \"^7.23.3\",\n    \"@types/babel__core\": \"^7.20.5\"\n  }\n}\n"
  },
  {
    "path": "packages/babel-plugin-debug-ids/src/index.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { transformSync } from '@babel/core';\n// @ts-expect-error\nimport typescriptSyntax from '@babel/plugin-syntax-typescript';\nimport plugin from './';\n\n// remove quotes around the snapshot\nexpect.addSnapshotSerializer({\n  test: (val) => typeof val === 'string',\n  print: (val) => (val as string).trim(),\n});\n\nconst transform = (source: string, filename = './dir/mockFilename.css.ts') => {\n  const result = transformSync(source, {\n    filename,\n    cwd: __dirname,\n    plugins: [plugin, typescriptSyntax],\n    configFile: false,\n  });\n\n  if (!result) {\n    throw new Error('No result');\n  }\n\n  return result.code;\n};\n\ndescribe('babel plugin', () => {\n  it('should not crash when using `satisfies` operator', () => {\n    const source = `\n      const dummy = {} satisfies {};\n    `;\n\n    expect(() => transform(source)).not.toThrow();\n  });\n\n  it('should handle style assigned to const', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      const one = style({\n        zIndex: 2,\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      const one = style({\n        zIndex: 2\n      }, \"one\");\n    `);\n  });\n\n  it('should handle styleVariants assigned to const', () => {\n    const source = `\n      import { styleVariants } from '@vanilla-extract/css';\n\n      const colors = styleVariants({\n        red: { color: 'red' }\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { styleVariants } from '@vanilla-extract/css';\n      const colors = styleVariants({\n        red: {\n          color: 'red'\n        }\n      }, \"colors\");\n    `);\n  });\n\n  it('should handle styleVariants with mapper assigned to const', () => {\n    const source = `\n      import { styleVariants } from '@vanilla-extract/css';\n\n      const colors = styleVariants({\n        red: 'red'\n      }, (color) => ({ color }));\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { styleVariants } from '@vanilla-extract/css';\n      const colors = styleVariants({\n        red: 'red'\n      }, color => ({\n        color\n      }), \"colors\");\n    `);\n  });\n\n  it('should handle style assigned to default export', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      export default style({\n          zIndex: 2,\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      export default style({\n        zIndex: 2\n      }, \"default\");\n    `);\n  });\n\n  it('should handle style assigned to object property', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      const test = {\n        one: {\n          two: style({\n            zIndex: 2,\n          })\n        }\n      };\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      const test = {\n        one: {\n          two: style({\n            zIndex: 2\n          }, \"test_one_two\")\n        }\n      };\n    `);\n  });\n\n  it('should handle style returned from an arrow function', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      const test = () => {\n        return style({\n          color: 'red'\n        });\n      };\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      const test = () => {\n        return style({\n          color: 'red'\n        }, \"test\");\n      };\n    `);\n  });\n\n  it('should handle style returned implicitly from an arrow function', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      const test = () => style({\n        color: 'red'\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      const test = () => style({\n        color: 'red'\n      }, \"test\");\n    `);\n  });\n\n  it('should handle style returned from a function', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      function test() {\n        return style({\n          color: 'red'\n        });\n      }\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      function test() {\n        return style({\n          color: 'red'\n        }, \"test\");\n      }\n    `);\n  });\n\n  it('should handle globalStyle', () => {\n    const source = `\n      import { globalStyle } from '@vanilla-extract/css';\n\n      globalStyle('html, body', { margin: 0 });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { globalStyle } from '@vanilla-extract/css';\n      globalStyle('html, body', {\n        margin: 0\n      });\n    `);\n  });\n\n  it('should handle createVar assigned to const', () => {\n    const source = `\n      import { createVar } from '@vanilla-extract/css';\n\n      const myVar = createVar();\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createVar } from '@vanilla-extract/css';\n      const myVar = createVar(\"myVar\");\n    `);\n  });\n\n  it('should handle typed createVar assigned to const', () => {\n    const source = `\n      import { createVar } from '@vanilla-extract/css';\n\n      const myVar = createVar({ syntax: '*', inherits: true });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createVar } from '@vanilla-extract/css';\n      const myVar = createVar({\n        syntax: '*',\n        inherits: true\n      }, \"myVar\");\n    `);\n  });\n\n  it('should handle createContainer assigned to const', () => {\n    const source = `\n      import { createContainer } from '@vanilla-extract/css';\n\n      const myContainer = createContainer();\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createContainer } from '@vanilla-extract/css';\n      const myContainer = createContainer(\"myContainer\");\n    `);\n  });\n\n  it('should handle createViewTransition assigned to const', () => {\n    const source = `\n      import { createViewTransition } from '@vanilla-extract/css';\n\n      const myViewTransition = createViewTransition();\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createViewTransition } from '@vanilla-extract/css';\n      const myViewTransition = createViewTransition(\"myViewTransition\");\n    `);\n  });\n\n  it('should handle fontFace assigned to const', () => {\n    const source = `\n      import { fontFace } from '@vanilla-extract/css';\n\n      const myFont = fontFace({\n        src: 'local(\"Comic Sans MS\")',\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { fontFace } from '@vanilla-extract/css';\n      const myFont = fontFace({\n        src: 'local(\"Comic Sans MS\")'\n      }, \"myFont\");\n    `);\n  });\n\n  it('should handle globalFontFace', () => {\n    const source = `\n      import { globalFontFace } from '@vanilla-extract/css';\n\n      globalFontFace('myFont', {\n        src: 'local(\"Comic Sans MS\")',\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { globalFontFace } from '@vanilla-extract/css';\n      globalFontFace('myFont', {\n        src: 'local(\"Comic Sans MS\")'\n      });\n    `);\n  });\n\n  it('should handle keyframes assigned to const', () => {\n    const source = `\n      import { keyframes } from '@vanilla-extract/css';\n\n      const myAnimation = keyframes({\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' }\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { keyframes } from '@vanilla-extract/css';\n      const myAnimation = keyframes({\n        from: {\n          transform: 'rotate(0deg)'\n        },\n        to: {\n          transform: 'rotate(360deg)'\n        }\n      }, \"myAnimation\");\n    `);\n  });\n\n  it('should handle globalKeyframes', () => {\n    const source = `\n      import { globalKeyframes } from '@vanilla-extract/css';\n\n      globalKeyframes('myKeyframes', {\n        from: { transform: 'rotate(0deg)' },\n        to: { transform: 'rotate(360deg)' }\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { globalKeyframes } from '@vanilla-extract/css';\n      globalKeyframes('myKeyframes', {\n        from: {\n          transform: 'rotate(0deg)'\n        },\n        to: {\n          transform: 'rotate(360deg)'\n        }\n      });\n    `);\n  });\n\n  it('should handle layer assigned to const', () => {\n    const source = `\n      import { layer } from '@vanilla-extract/css';\n\n      const autoDebugId = layer();\n      const providedDebugId = layer('utils');\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { layer } from '@vanilla-extract/css';\n      const autoDebugId = layer(\"autoDebugId\");\n      const providedDebugId = layer('utils');\n    `);\n  });\n\n  it('should handle layer assigned to a variable', () => {\n    const source = `\n      import { layer } from '@vanilla-extract/css';\n\n      let reset;\n      reset = layer();\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { layer } from '@vanilla-extract/css';\n      let reset;\n      reset = layer(\"reset\");\n    `);\n  });\n\n  it('should handle layer with a parent', () => {\n    const source = `\n      import { layer } from '@vanilla-extract/css';\n\n      const reset = layer({ parent: 'papa' });\n      const providedDebugId = layer({ parent: 'papa' }, 'utils');\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { layer } from '@vanilla-extract/css';\n      const reset = layer({\n        parent: 'papa'\n      }, \"reset\");\n      const providedDebugId = layer({\n        parent: 'papa'\n      }, 'utils');\n    `);\n  });\n\n  it('should handle globalLayer', () => {\n    const source = `\n      import { globalLayer } from '@vanilla-extract/css';\n\n      globalLayer('reset');\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { globalLayer } from '@vanilla-extract/css';\n      globalLayer('reset');\n    `);\n  });\n\n  it('should handle globalLayer with a parent', () => {\n    const source = `\n      import { globalLayer } from '@vanilla-extract/css';\n\n      const reset = globalLayer({ parent: 'papa' }, 'my-reset');\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { globalLayer } from '@vanilla-extract/css';\n      const reset = globalLayer({\n        parent: 'papa'\n      }, 'my-reset');\n    `);\n  });\n\n  it('should handle createTheme assigned to const', () => {\n    const source = `\n      import { createTheme } from '@vanilla-extract/css';\n\n      const darkTheme = createTheme({}, {});\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createTheme } from '@vanilla-extract/css';\n      const darkTheme = createTheme({}, {}, \"darkTheme\");\n    `);\n  });\n\n  it('should handle createTheme using destructuring', () => {\n    const source = `\n      import { createTheme } from '@vanilla-extract/css';\n\n      const [theme, vars] = createTheme({}, {});\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createTheme } from '@vanilla-extract/css';\n      const [theme, vars] = createTheme({}, {}, \"theme\");\n    `);\n  });\n\n  it('should handle createTheme using destructuring when already compiled scenario 1', () => {\n    const source = `\n      import { createTheme } from '@vanilla-extract/css';\n\n      var _createTheme = createTheme({}),\n        _createTheme2 = _slicedToArray(_createTheme, 2),\n        myThemeClass = _createTheme2[0],\n        vars = _createTheme2[1];\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createTheme } from '@vanilla-extract/css';\n      var _createTheme = createTheme({}, \"myThemeClass\"),\n        _createTheme2 = _slicedToArray(_createTheme, 2),\n        myThemeClass = _createTheme2[0],\n        vars = _createTheme2[1];\n    `);\n  });\n\n  it('should handle createTheme using destructuring when already compiled scenario 2', () => {\n    const source = `\n      import { createTheme } from '@vanilla-extract/css';\n\n      var ref = _slicedToArray(createTheme({}), 2);\n      export var myThemeClass = ref[0],\n        vars = ref[1];\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createTheme } from '@vanilla-extract/css';\n      var ref = _slicedToArray(createTheme({}, \"myThemeClass\"), 2);\n      export var myThemeClass = ref[0],\n        vars = ref[1];\n    `);\n  });\n\n  it('should handle createTheme using destructuring when already compiled scenario 3', () => {\n    const source = `\n      import { createTheme } from '@vanilla-extract/css';\n\n      var ref = _slicedToArray(createTheme({}), 2),\n        myThemeClass = ref[0],\n        vars = ref[1];\n      export { myThemeClass, vars };\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createTheme } from '@vanilla-extract/css';\n      var ref = _slicedToArray(createTheme({}, \"myThemeClass\"), 2),\n        myThemeClass = ref[0],\n        vars = ref[1];\n      export { myThemeClass, vars };\n    `);\n  });\n\n  it('should handle createGlobalTheme', () => {\n    const source = `\n      import { createGlobalTheme } from '@vanilla-extract/css';\n\n      const vars = createGlobalTheme(':root', { foo: 'bar' });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createGlobalTheme } from '@vanilla-extract/css';\n      const vars = createGlobalTheme(':root', {\n        foo: 'bar'\n      });\n    `);\n  });\n\n  it('should handle createThemeContract', () => {\n    const source = `\n      import { createThemeContract } from '@vanilla-extract/css';\n\n      const vars = createThemeContract({\n        foo: 'bar'\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { createThemeContract } from '@vanilla-extract/css';\n      const vars = createThemeContract({\n        foo: 'bar'\n      });\n    `);\n  });\n\n  it('should handle recipe assigned to const', () => {\n    const source = `\n      import { recipe } from '@vanilla-extract/recipes';\n\n      const button = recipe({});\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { recipe } from '@vanilla-extract/recipes';\n      const button = recipe({}, \"button\");\n    `);\n  });\n\n  it('should ignore functions that already supply a debug name', () => {\n    const source = `\n      import { style, styleVariants } from '@vanilla-extract/css';\n\n      const three = style({\n        testStyle: {\n          zIndex: 2,\n        }\n      }, 'myDebugValue');\n\n      const four = styleVariants({\n        red: { color: 'red' }\n      }, 'myDebugValue');\n\n      const fourTemplate = styleVariants({\n        red: { color: 'red' }\n      }, \\`myDebugValue_\\${i}\\`);\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style, styleVariants } from '@vanilla-extract/css';\n      const three = style({\n        testStyle: {\n          zIndex: 2\n        }\n      }, 'myDebugValue');\n      const four = styleVariants({\n        red: {\n          color: 'red'\n        }\n      }, 'myDebugValue');\n      const fourTemplate = styleVariants({\n        red: {\n          color: 'red'\n        }\n      }, \\`myDebugValue_\\${i}\\`);\n    `);\n  });\n\n  it('should only apply debug ids to functions imported from the relevant package', () => {\n    const source = `\n      import { style } from 'some-other-package';\n\n      const three = style({\n        zIndex: 2,\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from 'some-other-package';\n      const three = style({\n        zIndex: 2\n      });\n    `);\n  });\n\n  it('should handle renaming imports', () => {\n    const source = `\n      import { style as specialStyle } from '@vanilla-extract/css';\n\n      const four = specialStyle({\n        zIndex: 2,\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style as specialStyle } from '@vanilla-extract/css';\n      const four = specialStyle({\n        zIndex: 2\n      }, \"four\");\n    `);\n  });\n\n  it('should handle anonymous style in arrays', () => {\n    const source = `\n       import { style } from '@vanilla-extract/css';\n\n       export const height = [\n        style({\n          zIndex: 2,\n        })\n      ];\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      export const height = [style({\n        zIndex: 2\n      }, \"height\")];\n    `);\n  });\n\n  it('should handle object key with anonymous style in arrays', () => {\n    const source = `\n       import { style } from '@vanilla-extract/css';\n\n       export const height = {\n        full: [style({\n          zIndex: 2,\n        })]\n       };\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      export const height = {\n        full: [style({\n          zIndex: 2\n        }, \"height_full\")]\n      };\n    `);\n  });\n\n  it('should handle namespace imports', () => {\n    const source = `\n      import * as css from '@vanilla-extract/css';\n\n      const one = css.style({\n          zIndex: 2,\n      });\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import * as css from '@vanilla-extract/css';\n      const one = css.style({\n        zIndex: 2\n      }, \"one\");\n    `);\n  });\n\n  it('should handle nested call expressions', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      const one = instrument(style({\n        zIndex: 1,\n      }));\n\n      const two = instrument(instrument(style({\n        zIndex: 2,\n      })));\n\n      const three = instrument(instrument(instrument(style({\n        zIndex: 3,\n      }))));\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      const one = instrument(style({\n        zIndex: 1\n      }, \"one\"));\n      const two = instrument(instrument(style({\n        zIndex: 2\n      }, \"two\")));\n      const three = instrument(instrument(instrument(style({\n        zIndex: 3\n      }, \"three\"))));\n    `);\n  });\n\n  it('should handle instrumentation via sequence expresions', () => {\n    const source = `\n      import { style } from '@vanilla-extract/css';\n\n      const one = (something++, style({\n        zIndex: 1,\n      }));\n    `;\n\n    expect(transform(source)).toMatchInlineSnapshot(`\n      import { style } from '@vanilla-extract/css';\n      const one = (something++, style({\n        zIndex: 1\n      }, \"one\"));\n    `);\n  });\n});\n"
  },
  {
    "path": "packages/babel-plugin-debug-ids/src/index.ts",
    "content": "import {\n  types as t,\n  type PluginObj,\n  type PluginPass,\n  type NodePath,\n} from '@babel/core';\n\nconst packageIdentifiers = new Set([\n  '@vanilla-extract/css',\n  '@vanilla-extract/recipes',\n]);\n\ntype DebugConfig = {\n  maxParams: number;\n  hasDebugId?: (node: t.CallExpression) => boolean;\n};\n\nconst debuggableFunctionConfig = {\n  style: {\n    maxParams: 2,\n  },\n  createTheme: {\n    maxParams: 3,\n  },\n  styleVariants: {\n    maxParams: 3,\n    hasDebugId: ({ arguments: args }) => {\n      const previousArg = args[args.length - 1];\n      return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);\n    },\n  },\n  fontFace: {\n    maxParams: 2,\n  },\n  keyframes: {\n    maxParams: 2,\n  },\n  createVar: {\n    maxParams: 2,\n    hasDebugId: ({ arguments: args }) => {\n      const previousArg = args[args.length - 1];\n      return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);\n    },\n  },\n  recipe: {\n    maxParams: 2,\n  },\n  createContainer: {\n    maxParams: 1,\n  },\n  createViewTransition: {\n    maxParams: 1,\n  },\n  layer: {\n    maxParams: 2,\n    hasDebugId: ({ arguments: args }) => {\n      const previousArg = args[args.length - 1];\n      return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);\n    },\n  },\n} satisfies Record<string, DebugConfig>;\n\nconst styleFunctions = [\n  ...(Object.keys(debuggableFunctionConfig) as Array<\n    keyof typeof debuggableFunctionConfig\n  >),\n  'globalStyle',\n  'createGlobalTheme',\n  'createThemeContract',\n  'globalFontFace',\n  'globalKeyframes',\n  'globalLayer',\n  'recipe',\n] as const;\n\ntype StyleFunction = (typeof styleFunctions)[number];\n\nconst extractName = (node: t.Node) => {\n  if (t.isObjectProperty(node) && t.isIdentifier(node.key)) {\n    return node.key.name;\n  } else if (\n    (t.isVariableDeclarator(node) || t.isFunctionDeclaration(node)) &&\n    t.isIdentifier(node.id)\n  ) {\n    return node.id.name;\n  } else if (t.isAssignmentExpression(node) && t.isIdentifier(node.left)) {\n    return node.left.name;\n  } else if (t.isExportDefaultDeclaration(node)) {\n    return 'default';\n  } else if (\n    t.isVariableDeclarator(node) &&\n    t.isArrayPattern(node.id) &&\n    t.isIdentifier(node.id.elements[0])\n  ) {\n    return node.id.elements[0].name;\n  }\n};\n\nconst getDebugId = (path: NodePath<t.CallExpression>) => {\n  const firstRelevantParentPath = path.findParent(\n    ({ node }) => !(t.isCallExpression(node) || t.isSequenceExpression(node)),\n  );\n\n  if (!firstRelevantParentPath) {\n    return;\n  }\n\n  // Special case 1: Handle `export const [themeClass, vars] = createTheme({});`\n  // when it's already been compiled into one of the following forms:\n  //\n  // var _createTheme = createTheme({}),\n  //   _createTheme2 = _slicedToArray(_createTheme, 2),\n  //   themeClass = _createTheme2[0],\n  //   vars = _createTheme2[1];\n  if (t.isVariableDeclaration(firstRelevantParentPath.parent)) {\n    if (firstRelevantParentPath.parent.declarations.length === 4) {\n      const [themeDeclarator, , classNameDeclarator] =\n        firstRelevantParentPath.parent.declarations;\n\n      if (\n        t.isCallExpression(themeDeclarator.init) &&\n        t.isIdentifier(themeDeclarator.init.callee, { name: 'createTheme' }) &&\n        t.isIdentifier(classNameDeclarator.id)\n      ) {\n        return classNameDeclarator.id.name;\n      }\n    }\n    // alternative compiled form:\n    //\n    // var ref = _slicedToArray(createTheme({}), 2);\n    // export var themeClass = ref[0],\n    //   vars = ref[1];\n    else if (firstRelevantParentPath.parent.declarations.length === 1) {\n      const [themeDeclarator] = firstRelevantParentPath.parent.declarations;\n      const nextSibling =\n        firstRelevantParentPath.parentPath?.getNextSibling().node;\n\n      if (\n        t.isCallExpression(themeDeclarator.init) &&\n        t.isCallExpression(themeDeclarator.init.arguments[0]) &&\n        t.isIdentifier(themeDeclarator.init.arguments[0].callee, {\n          name: 'createTheme',\n        }) &&\n        t.isExportNamedDeclaration(nextSibling) &&\n        t.isVariableDeclaration(nextSibling.declaration) &&\n        t.isVariableDeclarator(nextSibling.declaration.declarations[0]) &&\n        t.isIdentifier(nextSibling.declaration.declarations[0].id)\n      ) {\n        return nextSibling.declaration.declarations[0].id.name;\n      }\n    }\n    // Special case 2: Handle `const [themeClass, vars] = createTheme({});\n    //                        export { themeClass, vars };`\n    // when compiled into the following:\n    //\n    // var ref = _slicedToArray(createTheme({}), 2),\n    //   myThemeClass = ref[0],\n    //   vars = ref[1];\n    // export { themeClass, vars };\n    else if (firstRelevantParentPath.parent.declarations.length === 3) {\n      const [themeDeclarator, classNameDeclarator] =\n        firstRelevantParentPath.parent.declarations;\n\n      if (\n        t.isCallExpression(themeDeclarator.init) &&\n        t.isCallExpression(themeDeclarator.init.arguments[0]) &&\n        t.isIdentifier(themeDeclarator.init.arguments[0].callee, {\n          name: 'createTheme',\n        }) &&\n        t.isIdentifier(classNameDeclarator.id)\n      ) {\n        return classNameDeclarator.id.name;\n      }\n    }\n  }\n\n  const relevantParent = firstRelevantParentPath.node;\n\n  if (\n    t.isObjectProperty(relevantParent) ||\n    t.isReturnStatement(relevantParent) ||\n    t.isArrowFunctionExpression(relevantParent) ||\n    t.isArrayExpression(relevantParent) ||\n    t.isSpreadElement(relevantParent)\n  ) {\n    const names: Array<string> = [];\n\n    path.findParent(({ node }) => {\n      const name = extractName(node);\n      if (name) {\n        names.unshift(name);\n      }\n      // Traverse all the way to the root\n      return false;\n    });\n\n    return names.join('_');\n  } else {\n    return extractName(relevantParent);\n  }\n};\n\nconst getRelevantCall = (\n  node: t.CallExpression,\n  namespaceImport: string,\n  importIdentifiers: Map<string, StyleFunction>,\n) => {\n  const { callee } = node;\n\n  if (\n    namespaceImport &&\n    t.isMemberExpression(callee) &&\n    t.isIdentifier(callee.object, { name: namespaceImport })\n  ) {\n    return styleFunctions.find((exportName) =>\n      t.isIdentifier(callee.property, { name: exportName }),\n    );\n  } else {\n    const importInfo = Array.from(importIdentifiers.entries()).find(\n      ([identifier]) => t.isIdentifier(callee, { name: identifier }),\n    );\n\n    if (importInfo) {\n      return importInfo[1];\n    }\n  }\n};\n\ntype Context = PluginPass & {\n  namespaceImport: string;\n  importIdentifiers: Map<string, StyleFunction>;\n};\n\nexport default function (): PluginObj<Context> {\n  return {\n    pre() {\n      this.importIdentifiers = new Map();\n      this.namespaceImport = '';\n    },\n    visitor: {\n      ImportDeclaration(path) {\n        if (packageIdentifiers.has(path.node.source.value)) {\n          path.node.specifiers.forEach((specifier) => {\n            if (t.isImportNamespaceSpecifier(specifier)) {\n              this.namespaceImport = specifier.local.name;\n            } else if (t.isImportSpecifier(specifier)) {\n              const { imported, local } = specifier;\n\n              const importName = (\n                t.isIdentifier(imported) ? imported.name : imported.value\n              ) as StyleFunction;\n\n              if (styleFunctions.includes(importName)) {\n                this.importIdentifiers.set(local.name, importName);\n              }\n            }\n          });\n        }\n      },\n      CallExpression(path) {\n        const { node } = path;\n\n        const usedExport = getRelevantCall(\n          node,\n          this.namespaceImport,\n          this.importIdentifiers,\n        );\n\n        if (usedExport && usedExport in debuggableFunctionConfig) {\n          const { maxParams, hasDebugId } = (\n            debuggableFunctionConfig as Record<string, DebugConfig>\n          )[usedExport];\n\n          if (node.arguments.length < maxParams && !hasDebugId?.(node)) {\n            const debugIdent = getDebugId(path);\n\n            if (debugIdent) {\n              node.arguments.push(t.stringLiteral(debugIdent));\n            }\n          }\n        }\n      },\n    },\n  };\n}\n"
  },
  {
    "path": "packages/compiler/CHANGELOG.md",
    "content": "# @vanilla-extract/compiler\n\n## 0.6.0\n\n### Minor Changes\n\n- [#1701](https://github.com/vanilla-extract-css/vanilla-extract/pull/1701) [`b066d1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b066d1c253ee09f2967bfddd7b6762f5dfa2d7d7) Thanks [@askoufis](https://github.com/askoufis)! - Expose `compiler.findImporterTree` API\n\n## 0.5.1\n\n### Patch Changes\n\n- [#1696](https://github.com/vanilla-extract-css/vanilla-extract/pull/1696) [`680097c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/680097c49f79a562fdd88aba85ce0f655ed8fb5a) Thanks [@askoufis](https://github.com/askoufis)! - Set `appType: 'custom'` on compiler's Vite server to disable unused HTML middlewares\n\n- [#1696](https://github.com/vanilla-extract-css/vanilla-extract/pull/1696) [`680097c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/680097c49f79a562fdd88aba85ce0f655ed8fb5a) Thanks [@askoufis](https://github.com/askoufis)! - Propagate `server.middlewareMode` from parent server's Vite config\n\n- [#1694](https://github.com/vanilla-extract-css/vanilla-extract/pull/1694) [`d1257c7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d1257c7e934865bd381941f601af5305cbcc2b90) Thanks [@askoufis](https://github.com/askoufis)! - Add `^5.0.0` and `^6.0.0` to `vite-node` dependency range\n\n- Updated dependencies [[`9b1bfd0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b1bfd068a61a042ff0276a901edf4e44f6c8cea), [`c34e69a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c34e69a918b55e02ce8106a193b10dcfce933437)]:\n  - @vanilla-extract/css@1.19.1\n  - @vanilla-extract/integration@8.0.9\n\n## 0.5.0\n\n### Minor Changes\n\n- [#1687](https://github.com/vanilla-extract-css/vanilla-extract/pull/1687) [`e29f242`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e29f242953fcb46315cebe5b3374a5a1f89d93af) Thanks [@askoufis](https://github.com/askoufis)! - Add support for Vite 8\n\n## 0.4.0\n\n### Minor Changes\n\n- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - Add `unstable_splitCssPerRule` option to generate one CSS import per rule instead of one per file\n\n- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - Add `unstable_invalidateAllModules` API to manually clear module cache\n\n- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - `createCompiler`: The `cssImportSpecifier` option now receives the CSS content in addition to the module id\n\n### Patch Changes\n\n- Updated dependencies [[`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99)]:\n  - @vanilla-extract/css@1.19.0\n  - @vanilla-extract/integration@8.0.8\n\n## 0.3.4\n\n### Patch Changes\n\n- [#1665](https://github.com/vanilla-extract-css/vanilla-extract/pull/1665) [`352fc19`](https://github.com/vanilla-extract-css/vanilla-extract/commit/352fc19169e5f0233f8135842857399ccd46727d) Thanks [@askoufis](https://github.com/askoufis)! - Pass through `viteConfig.build.assetsInlineLimit` to the compiler's `vite` server\n\n- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704), [`0b2c09e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b2c09e0fec1bee0e996f1920a106daab471178a), [`c6047fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6047fbe3f5e55a45780aa3dffd478a7743b8b3a), [`8b49b35`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b49b354d4364ce6e0db5e8ba16c92ca3e6b9cea)]:\n  - @vanilla-extract/integration@8.0.7\n  - @vanilla-extract/css@1.18.0\n\n## 0.3.3\n\n### Patch Changes\n\n- Updated dependencies [[`11a7c66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/11a7c668683d0c3e324d4337676e807680a895bd)]:\n  - @vanilla-extract/css@1.17.5\n  - @vanilla-extract/integration@8.0.6\n\n## 0.3.2\n\n### Patch Changes\n\n- [#1638](https://github.com/vanilla-extract-css/vanilla-extract/pull/1638) [`46ef1db`](https://github.com/vanilla-extract-css/vanilla-extract/commit/46ef1db201ad83d50c4620e331ec53f9affe1d84) Thanks [@PsychoLlama](https://github.com/PsychoLlama)! - Inherit parent vite `server.watch` options\n\n- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:\n  - @vanilla-extract/integration@8.0.5\n\n## 0.3.1\n\n### Patch Changes\n\n- [#1624](https://github.com/vanilla-extract-css/vanilla-extract/pull/1624) [`50f1234`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50f12348894a9e77a36ec269fcdf2ad159e5211d) Thanks [@BPScott](https://github.com/BPScott)! - Include `^7.0.0` in `vite` dependency range\n\n## 0.3.0\n\n### Minor Changes\n\n- [#1614](https://github.com/vanilla-extract-css/vanilla-extract/pull/1614) [`4e92cce`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e92ccee6d7b0c2ee16163446e5938c7365224b3) Thanks [@askoufis](https://github.com/askoufis)! - Add new `getAllCss` API\n\n  The `Compiler` class now provides a `getAllCss` method that returns all the CSS currently stored by the compiler.\n\n  **EXAMPLE USAGE**:\n\n  ```ts\n  import { createCompiler } from '@vanilla-extract/compiler';\n\n  const compiler = createCompiler({\n    root: process.cwd()\n  });\n\n  await compiler.processVanillaFile('foo.css.ts');\n  await compiler.processVanillaFile('bar.css.ts');\n\n  // Contains all CSS created by `foo.css.ts` and `bar.css.ts`\n  const allCss = compiler.getAllCss();\n  ```\n\n## 0.2.3\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:\n  - @vanilla-extract/css@1.17.4\n  - @vanilla-extract/integration@8.0.4\n\n## 0.2.2\n\n### Patch Changes\n\n- [#1605](https://github.com/vanilla-extract-css/vanilla-extract/pull/1605) [`9bf58ee`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9bf58ee1e9a8371f4ddc245b0a96afcfcf5eac29) Thanks [@sapphi-red](https://github.com/sapphi-red)! - Update `vite-node` dependency to `^3.2.2`\n\n## 0.2.1\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies [[`f0533be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0533be939e6835ae961e3dd10b764c0c052ee75), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:\n  - @vanilla-extract/css@1.17.3\n  - @vanilla-extract/integration@8.0.3\n\n## 0.2.0\n\n### Minor Changes\n\n- [#1592](https://github.com/vanilla-extract-css/vanilla-extract/pull/1592) [`35d6b3f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/35d6b3fe5d297dc76f1629a9f54f21d0f97e7c9f) Thanks [@askoufis](https://github.com/askoufis)! - `createCompiler`: Add `enableFileWatcher` option\n\n  By default, the compiler sets up its own file watcher.\n  This option allows you to disable it if necessary, such as during a production build.\n\n  **EXAMPLE USAGE**:\n\n  ```ts\n  const compiler = createCompiler({\n    root: process.cwd(),\n    enableFileWatcher: false\n  });\n  ```\n\n## 0.1.3\n\n### Patch Changes\n\n- [#1583](https://github.com/vanilla-extract-css/vanilla-extract/pull/1583) [`6488e28`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6488e28337106582231b418778c884f26e393219) Thanks [@askoufis](https://github.com/askoufis)! - Ignore Vite `base` config\n\n  Fixes a bug where imported asset URLs would be transformed by the compiler when setting the `base` option in Vite, resulting in incorrect resolution and bundling of these assets during the build process.\n\n- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8), [`c66be53`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c66be53d600802b2922da1d6034e2a5ff3fbbcae)]:\n  - @vanilla-extract/css@1.17.2\n  - @vanilla-extract/integration@8.0.2\n\n## 0.1.2\n\n### Patch Changes\n\n- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:\n  - @vanilla-extract/integration@8.0.1\n\n## 0.1.1\n\n### Patch Changes\n\n- [#1529](https://github.com/vanilla-extract-css/vanilla-extract/pull/1529) [`d5b6e70`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d5b6e70f44a3d4f03e113fe78e0605b358e9c0d7) Thanks [@askoufis](https://github.com/askoufis)! - Update `vite-node` dependency\n\n- [#1529](https://github.com/vanilla-extract-css/vanilla-extract/pull/1529) [`d5b6e70`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d5b6e70f44a3d4f03e113fe78e0605b358e9c0d7) Thanks [@askoufis](https://github.com/askoufis)! - Include `^6.0.0` in `vite` dependency range\n\n## 0.1.0\n\n### Minor Changes\n\n- [#1536](https://github.com/vanilla-extract-css/vanilla-extract/pull/1536) [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3) Thanks [@askoufis](https://github.com/askoufis)! - Initial release\n\n### Patch Changes\n\n- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`c432ff3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c432ff33a8aead2c94fa6a4fcc9fcb1d7990427d), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:\n  - @vanilla-extract/integration@8.0.0\n  - @vanilla-extract/css@1.17.1\n"
  },
  {
    "path": "packages/compiler/README.md",
    "content": "# @vanilla-extract/compiler\n\nThis package is not intended for public consumption.\n"
  },
  {
    "path": "packages/compiler/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/compiler\",\n  \"version\": \"0.6.0\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-compiler.cjs.js\",\n  \"module\": \"dist/vanilla-extract-compiler.esm.js\",\n  \"types\": \"dist/vanilla-extract-compiler.cjs.d.ts\",\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/compiler\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"@vanilla-extract/integration\": \"workspace:^\",\n    \"vite\": \"^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0\",\n    \"vite-node\": \"^3.2.2 || ^5.0.0 || ^6.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/compiler/src/compiler.ts",
    "content": "import assert from 'assert';\nimport { join, isAbsolute } from 'path';\nimport type { Adapter } from '@vanilla-extract/css';\nimport { transformCss } from '@vanilla-extract/css/transformCss';\nimport type { ModuleNode, UserConfig as ViteUserConfig } from 'vite';\n\nimport {\n  cssFileFilter,\n  transform,\n  normalizePath,\n  getPackageInfo,\n  serializeVanillaModule,\n  type IdentifierOption,\n} from '@vanilla-extract/integration';\nimport { lock } from './lock';\n\ntype Css = Parameters<Adapter['appendCss']>[0];\ntype Composition = Parameters<Adapter['registerComposition']>[0];\n\nconst globalAdapterIdentifier = '__vanilla_globalCssAdapter__';\n\ntype ModuleScanResult = {\n  cssDeps: string[];\n  watchFiles: Set<string>;\n};\n\nconst createModuleScanner = () => {\n  const cache = new Map<string, ModuleScanResult>();\n\n  const scanModule = (\n    moduleNode: ModuleNode,\n    path: string[] = [],\n  ): ModuleScanResult => {\n    const watchFiles = new Set<string>();\n    const cacheKey = moduleNode.id ?? moduleNode.file;\n\n    if (\n      !cacheKey ||\n      moduleNode.id?.includes('@vanilla-extract/') ||\n      path.includes(cacheKey)\n    ) {\n      return {\n        cssDeps: [],\n        watchFiles,\n      };\n    }\n\n    if (cache.has(cacheKey)) {\n      return cache.get(cacheKey)!;\n    }\n\n    cache.set(cacheKey, {\n      cssDeps: [],\n      watchFiles,\n    });\n\n    const cssDeps = new Set<string>();\n\n    const currentPath = [...path, cacheKey];\n\n    for (const dependencyNode of moduleNode.importedModules) {\n      const { cssDeps: dependencyCssDeps, watchFiles: dependencyWatchFiles } =\n        scanModule(dependencyNode, currentPath);\n\n      dependencyCssDeps.forEach((file) => cssDeps.add(file));\n      dependencyWatchFiles.forEach((file) => watchFiles.add(file));\n    }\n\n    const cssDepsArray = Array.from(cssDeps);\n\n    if (moduleNode.id && cssFileFilter.test(moduleNode.id)) {\n      cssDepsArray.push(moduleNode.id);\n    }\n\n    if (moduleNode.file) {\n      watchFiles.add(moduleNode.file);\n    }\n\n    const scanResult = {\n      cssDeps: cssDepsArray,\n      watchFiles,\n    };\n\n    cache.set(cacheKey, scanResult);\n\n    return scanResult;\n  };\n\n  return scanModule;\n};\n\nconst createViteServer = async ({\n  root,\n  identifiers,\n  viteConfig,\n  enableFileWatcher = true,\n}: Required<\n  Pick<CreateCompilerOptions, 'root' | 'identifiers' | 'viteConfig'>\n> &\n  Pick<CreateCompilerOptions, 'enableFileWatcher'>) => {\n  const pkg = getPackageInfo(root);\n  const vite = await import('vite');\n\n  const server = await vite.createServer({\n    ...viteConfig,\n    // The vite-node server should not rewrite imported asset URLs within VE stylesheets.\n    // Doing so interferes with Vite's resolution and bundling of these assets at build time.\n    base: undefined,\n    configFile: false,\n    root,\n    // Don't include HTML middlewares\n    appType: 'custom',\n    server: {\n      middlewareMode: viteConfig.server?.middlewareMode,\n      hmr: false,\n      watch: enableFileWatcher ? viteConfig.server?.watch : null,\n    },\n    logLevel: 'silent',\n    optimizeDeps: {\n      noDiscovery: true,\n    },\n    build: {\n      dynamicImportVarsOptions: {\n        // Temporary workaround for https://github.com/vitejs/vite/issues/19245.\n        // Shouldn't affect functionality as it's equivalent to the default value.\n        // Can be removed once https://github.com/vitejs/vite/pull/19247 is released.\n        exclude: [/node_modules/],\n      },\n      assetsInlineLimit: viteConfig.build?.assetsInlineLimit,\n    },\n    ssr: {\n      noExternal: true,\n      // `cssesc` is CJS-only, so we need to mark it as external as Vite's transform pipeline\n      // can't handle CJS during dev-time.\n      // See https://github.com/withastro/astro/blob/0879cc2ce7e15a2e7330c68d6667d9a2edea52ab/packages/astro/src/core/create-vite.ts#L86\n      // and https://github.com/withastro/astro/issues/11395\n      external: ['cssesc'],\n    },\n    plugins: [\n      {\n        name: 'vanilla-extract-externalize',\n        enforce: 'pre',\n        async resolveId(source, importer) {\n          if (source.startsWith('@vanilla-extract/')) {\n            const result = await this.resolve(source, importer, {\n              skipSelf: true,\n            });\n\n            return result ? { ...result, external: true } : null;\n          }\n        },\n      },\n      {\n        name: 'vanilla-extract-transform',\n        async transform(code, id) {\n          if (cssFileFilter.test(id)) {\n            const filescopedCode = await transform({\n              source: code,\n              rootPath: root,\n              filePath: id,\n              packageName: pkg.name,\n              identOption: identifiers,\n              globalAdapterIdentifier,\n            });\n\n            return filescopedCode;\n          }\n        },\n      },\n      ...(viteConfig.plugins ?? []),\n    ],\n  });\n\n  // this is need to initialize the plugins\n  await server.pluginContainer.buildStart({});\n\n  const { ViteNodeRunner } = await import('vite-node/client');\n  const { ViteNodeServer } = await import('vite-node/server');\n\n  const node = new ViteNodeServer(server);\n\n  class ViteNodeRunnerWithContext extends ViteNodeRunner {\n    cssAdapter: Adapter | undefined;\n\n    prepareContext(context: Record<string, any>): Record<string, any> {\n      return {\n        ...super.prepareContext(context),\n        [globalAdapterIdentifier]: this.cssAdapter,\n      };\n    }\n  }\n\n  const runner = new ViteNodeRunnerWithContext({\n    root,\n    base: server.config.base,\n    fetchModule(id) {\n      return node.fetchModule(id);\n    },\n    resolveId(id, importer) {\n      return node.resolveId(id, importer);\n    },\n  });\n\n  if (enableFileWatcher) {\n    server.watcher.on('change', (filePath) => {\n      runner.moduleCache.invalidateDepTree([filePath]);\n    });\n  }\n\n  return {\n    server,\n    runner,\n  };\n};\n\nclass NormalizedMap<V> extends Map<string, V> {\n  constructor(readonly root: string) {\n    super();\n  }\n\n  #normalizePath(filePath: string) {\n    return normalizePath(\n      isAbsolute(filePath) ? filePath : join(this.root, filePath),\n    );\n  }\n\n  get(filePath: string) {\n    filePath = this.#normalizePath(filePath);\n    return super.get(filePath);\n  }\n\n  set(filePath: string, value: V) {\n    filePath = this.#normalizePath(filePath);\n    return super.set(filePath, value);\n  }\n}\n\nexport interface Compiler {\n  processVanillaFile(\n    filePath: string,\n    options?: {\n      outputCss?: boolean;\n    },\n  ): Promise<{ source: string; watchFiles: Set<string> }>;\n  unstable_invalidateAllModules(): Promise<void>;\n  getCssForFile(virtualCssFilePath: string): { filePath: string; css: string };\n  close(): Promise<void>;\n  getAllCss(): string;\n  findImporterTree(\n    filePath: string,\n    transformedVeModules: Set<string>,\n  ): Promise<Set<ModuleNode>>;\n}\n\ninterface ProcessedVanillaFile {\n  source: string;\n  watchFiles: Set<string>;\n}\n\nexport interface CreateCompilerOptions {\n  root: string;\n  /**\n   * By default, the compiler sets up its own file watcher. This option allows you to disable it if\n   * necessary, such as during a production build.\n   *\n   * @default true\n   */\n  enableFileWatcher?: boolean;\n  cssImportSpecifier?: (\n    filePath: string,\n    css: string,\n  ) => string | Promise<string>;\n  /**\n   * When true, generates one CSS import per rule instead of one per file.\n   * This can help bundlers like Turbopack deduplicate shared CSS more effectively.\n   *\n   * @default false\n   */\n  unstable_splitCssPerRule?: boolean;\n  identifiers?: IdentifierOption;\n  viteConfig?: ViteUserConfig;\n  /** @deprecated */\n  viteResolve?: ViteUserConfig['resolve'];\n  /** @deprecated */\n  vitePlugins?: ViteUserConfig['plugins'];\n}\nexport const createCompiler = ({\n  root,\n  identifiers = 'debug',\n  cssImportSpecifier = (filePath) => filePath + '.vanilla.css',\n  unstable_splitCssPerRule: splitCssPerRule = false,\n  viteConfig,\n  enableFileWatcher,\n  viteResolve,\n  vitePlugins,\n}: CreateCompilerOptions): Compiler => {\n  assert(\n    !(viteConfig && (viteResolve || vitePlugins)),\n    'viteConfig cannot be used with viteResolve or vitePlugins',\n  );\n\n  const vitePromise = createViteServer({\n    root,\n    identifiers,\n    viteConfig: viteConfig ?? {\n      resolve: viteResolve,\n      plugins: vitePlugins,\n    },\n    enableFileWatcher,\n  });\n\n  const processVanillaFileCache = new Map<\n    string,\n    {\n      lastInvalidationTimestamp: number;\n      result: ProcessedVanillaFile;\n    }\n  >();\n\n  const cssCache = new NormalizedMap<{ css: string; cssRules: string[] }>(root);\n  const classRegistrationsByModuleId = new NormalizedMap<{\n    localClassNames: Set<string>;\n    composedClassLists: Array<Composition>;\n  }>(root);\n\n  return {\n    async processVanillaFile(\n      filePath,\n      options = {},\n    ): Promise<ProcessedVanillaFile> {\n      const { server, runner } = await vitePromise;\n\n      filePath = isAbsolute(filePath) ? filePath : join(root, filePath);\n      const outputCss = options.outputCss ?? true;\n\n      const cacheKey = Object.entries({ filePath, outputCss })\n        .map((entry) => entry.join('='))\n        .join('|');\n      const cachedFile = processVanillaFileCache.get(cacheKey);\n      if (cachedFile) {\n        const moduleNode = server.moduleGraph.getModuleById(filePath);\n        if (\n          cachedFile.lastInvalidationTimestamp ===\n          moduleNode?.lastInvalidationTimestamp\n        ) {\n          return cachedFile.result;\n        }\n      }\n\n      const cssByModuleId = new NormalizedMap<Array<Css>>(root);\n      const localClassNames = new Set<string>();\n      const composedClassLists: Array<Composition> = [];\n\n      const cssAdapter: Adapter = {\n        getIdentOption: () => identifiers,\n        onBeginFileScope: (fileScope) => {\n          // Before evaluating a file, reset the cache for it\n          const moduleId = normalizePath(fileScope.filePath);\n          cssByModuleId.set(moduleId, []);\n          classRegistrationsByModuleId.set(moduleId, {\n            localClassNames: new Set(),\n            composedClassLists: [],\n          });\n        },\n        onEndFileScope: (fileScope) => {\n          // For backwards compatibility, ensure the cache is populated even if\n          // a file didn't contain any CSS. This is to ensure that the only\n          // error messages shown in older versions are the ones below.\n          const moduleId = normalizePath(fileScope.filePath);\n          const cssObjs = cssByModuleId.get(moduleId) ?? [];\n          cssByModuleId.set(moduleId, cssObjs);\n        },\n        registerClassName: (className, fileScope) => {\n          if (!fileScope) {\n            throw new Error(\n              'Your version of @vanilla-extract/css must be at least v1.10.0. Please update to a compatible version.',\n            );\n          }\n\n          localClassNames.add(className);\n\n          const moduleId = normalizePath(fileScope.filePath);\n          classRegistrationsByModuleId\n            .get(moduleId)!\n            .localClassNames.add(className);\n        },\n        registerComposition: (composedClassList, fileScope) => {\n          if (!fileScope) {\n            throw new Error(\n              'Your version of @vanilla-extract/css must be at least v1.10.0. Please update to a compatible version.',\n            );\n          }\n\n          composedClassLists.push(composedClassList);\n\n          const moduleId = normalizePath(fileScope.filePath);\n          classRegistrationsByModuleId\n            .get(moduleId)!\n            .composedClassLists.push(composedClassList);\n        },\n        markCompositionUsed: () => {\n          // This compiler currently retains all composition classes\n        },\n        appendCss: (css, fileScope) => {\n          const moduleId = normalizePath(fileScope.filePath);\n          const cssObjs = cssByModuleId.get(moduleId) ?? [];\n          cssObjs.push(css);\n\n          cssByModuleId.set(moduleId, cssObjs);\n        },\n      };\n\n      const { fileExports, cssImports, watchFiles, lastInvalidationTimestamp } =\n        await lock(async () => {\n          runner.cssAdapter = cssAdapter;\n\n          const fileExports = (await runner.executeFile(filePath)) as Record<\n            string,\n            unknown\n          >;\n\n          const moduleId = normalizePath(filePath);\n          const moduleNode = server.moduleGraph.getModuleById(moduleId);\n\n          if (!moduleNode) {\n            throw new Error(`Can't find ModuleNode for ${filePath}`);\n          }\n\n          const cssImports: string[] = [];\n          const orderedComposedClassLists: Composition[] = [];\n\n          const scanModule = createModuleScanner();\n          const { cssDeps, watchFiles } = scanModule(moduleNode);\n\n          for (const cssDep of cssDeps) {\n            const cssDepModuleId = normalizePath(cssDep);\n            const cssObjs = cssByModuleId.get(cssDepModuleId);\n            const cachedCss = cssCache.get(cssDepModuleId);\n            const cachedClassRegistrations =\n              classRegistrationsByModuleId.get(cssDepModuleId);\n\n            if (cachedClassRegistrations) {\n              orderedComposedClassLists.push(\n                ...cachedClassRegistrations.composedClassLists,\n              );\n            }\n\n            if (!cssObjs && !cachedCss && !cachedClassRegistrations) {\n              continue;\n            }\n\n            if (cssObjs) {\n              let cssRules: string[] = [];\n\n              if (cssObjs.length > 0) {\n                cssRules = transformCss({\n                  localClassNames: Array.from(localClassNames),\n                  composedClassLists: orderedComposedClassLists,\n                  cssObjs,\n                });\n              }\n\n              cssCache.set(cssDepModuleId, {\n                css: cssRules.join('\\n'),\n                cssRules,\n              });\n            } else if (cachedClassRegistrations) {\n              cachedClassRegistrations.localClassNames.forEach(\n                (localClassName) => {\n                  localClassNames.add(localClassName);\n                },\n              );\n              composedClassLists.push(\n                ...cachedClassRegistrations.composedClassLists,\n              );\n            }\n\n            const { css = '', cssRules = [] } =\n              cssCache.get(cssDepModuleId) ?? {};\n\n            if (cssObjs || css) {\n              if (splitCssPerRule) {\n                const importSpecifiers = await Promise.all(\n                  cssRules.map((rule, i) =>\n                    cssImportSpecifier(cssDepModuleId + `#${i}`, rule),\n                  ),\n                );\n                for (const specifier of importSpecifiers) {\n                  cssImports.push(`import '${specifier}';`);\n                }\n              } else {\n                const specifier = await cssImportSpecifier(cssDepModuleId, css);\n                cssImports.push(`import '${specifier}';`);\n              }\n            }\n          }\n\n          return {\n            fileExports,\n            cssImports: outputCss ? cssImports : [],\n            watchFiles,\n            lastInvalidationTimestamp: moduleNode.lastInvalidationTimestamp,\n          };\n        });\n\n      const result: ProcessedVanillaFile = {\n        source: serializeVanillaModule(\n          cssImports,\n          fileExports,\n          null, // This compiler currently retains all composition classes\n        ),\n        watchFiles,\n      };\n\n      processVanillaFileCache.set(cacheKey, {\n        lastInvalidationTimestamp,\n        result,\n      });\n\n      return result;\n    },\n    async unstable_invalidateAllModules() {\n      const { server, runner } = await vitePromise;\n\n      for (const [key] of runner.moduleCache.entries()) {\n        if (!key.includes('node_modules')) {\n          runner.moduleCache.delete(key);\n        }\n      }\n\n      for (const [id, moduleNode] of server.moduleGraph.idToModuleMap) {\n        if (!id.includes('node_modules')) {\n          server.moduleGraph.invalidateModule(moduleNode);\n        }\n      }\n    },\n    getCssForFile(filePath: string) {\n      filePath = isAbsolute(filePath) ? filePath : join(root, filePath);\n      const moduleId = normalizePath(filePath);\n      const result = cssCache.get(moduleId);\n\n      if (!result) {\n        throw new Error(`No CSS for file: ${filePath}`);\n      }\n\n      return {\n        css: result.css,\n        filePath: filePath,\n        resolveDir: root,\n      };\n    },\n    async close() {\n      const { server } = await vitePromise;\n\n      await server.close();\n    },\n    getAllCss() {\n      let allCss = '';\n\n      for (const { css } of cssCache.values()) {\n        if (css) {\n          allCss += css + '\\n';\n        }\n      }\n\n      return allCss;\n    },\n    /**\n     * Returns an importer tree based off the compiler's module graph. We can't use the\n     * consuming Vite dev server's module graph as it ends up modified by the `transform` hook to a\n     * point where we can't reconstruct the original importer chain.\n     */\n    async findImporterTree(filePath, transformedModules) {\n      const { server } = await vitePromise;\n\n      // The compiler's module graph is always a subset of the consuming Vite dev server's module\n      // graph, so this early exit will be hit for any modules that aren't involved in compiling VE\n      // modules\n      const moduleNode = server.moduleGraph.getModuleById(\n        normalizePath(filePath),\n      );\n      if (!moduleNode) {\n        return new Set();\n      }\n\n      return _findImporterTree(moduleNode, transformedModules);\n    },\n  };\n};\n\nfunction _findImporterTree(\n  moduleNode: ModuleNode,\n  transformedModules: Set<string>,\n  visited = new Set<string>(),\n): Set<ModuleNode> {\n  const result = new Set<ModuleNode>();\n  if (!moduleNode.id || visited.has(moduleNode.id)) {\n    return result;\n  }\n\n  // Include the starting module in the tree\n  result.add(moduleNode);\n  visited.add(moduleNode.id);\n\n  // Stop if we hit a transformed module as this is a VE module boundary that we don't\n  // need to invalidate past\n  if (transformedModules.has(moduleNode.id)) {\n    return result;\n  }\n\n  for (const importer of moduleNode.importers) {\n    const chain = _findImporterTree(importer, transformedModules, visited);\n\n    for (const mod of chain) {\n      result.add(mod);\n    }\n  }\n\n  return result;\n}\n"
  },
  {
    "path": "packages/compiler/src/index.ts",
    "content": "export {\n  createCompiler,\n  type Compiler,\n  type CreateCompilerOptions,\n} from './compiler';\n"
  },
  {
    "path": "packages/compiler/src/lock.ts",
    "content": "type AsyncFunction<T> = () => Promise<T>;\n\nconst queue: Array<() => void> = [];\nlet isProcessingQueue = false;\n\nexport async function lock<T>(fn: AsyncFunction<T>): Promise<T> {\n  return new Promise<T>((resolve, reject) => {\n    const queueFn = async () => {\n      try {\n        const result = await fn();\n        resolve(result);\n      } catch (error) {\n        reject(error);\n      } finally {\n        isProcessingQueue = false;\n        processQueue();\n      }\n    };\n\n    queue.push(queueFn);\n\n    if (!isProcessingQueue) {\n      processQueue();\n    }\n  });\n}\n\nasync function processQueue() {\n  if (isProcessingQueue || queue.length === 0) {\n    return;\n  }\n\n  isProcessingQueue = true;\n  const fn = queue.shift()!;\n\n  await fn();\n}\n"
  },
  {
    "path": "packages/css/CHANGELOG.md",
    "content": "# @vanilla-extract/css\n\n## 1.20.0\n\n### Minor Changes\n\n- [#1702](https://github.com/vanilla-extract-css/vanilla-extract/pull/1702) [`48a9caf`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48a9cafbbd4abfcc1bf0e72f01ad4f19f59e48cd) Thanks [@bschlenk](https://github.com/bschlenk)! - Allow `:where` and `:is` in `selectors` if all selectors target `&`\n\n  EXAMPLE USAGE:\n\n  ```ts\n  const example = style({\n    color: 'red',\n    selectors: {\n      // Valid: all selectors in the list target `example`\n      ':is(h1 > &, h2 > &)': { color: 'blue' }\n      // Invalid: the second selector in the list does not target `example`\n      ':is(h1 > &, h2)': { color: 'blue' }\n    }\n  });\n  ```\n\n## 1.19.1\n\n### Patch Changes\n\n- [#1558](https://github.com/vanilla-extract-css/vanilla-extract/pull/1558) [`9b1bfd0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b1bfd068a61a042ff0276a901edf4e44f6c8cea) Thanks [@andjsrk](https://github.com/andjsrk)! - `style`: Fixed a bug where nested arrays of classnames could cause missing or malformed CSS during [style composition](https://vanilla-extract.style/documentation/style-composition/) in certain situations.\n\n  For example, the following style composition would not generate CSS for the `backgroundColor: 'orange'` style, and would also generate malformed CSS:\n\n  ```ts\n  const styleWithNestedComposition = style([\n    [style1, style2],\n    { backgroundColor: 'orange' },\n    [style3]\n  ]);\n  ```\n\n## 1.19.0\n\n### Minor Changes\n\n- [#1686](https://github.com/vanilla-extract-css/vanilla-extract/pull/1686) [`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99) Thanks [@askoufis](https://github.com/askoufis)! - Add `./vanilla.virtual.css?*` entrypoint for Turbopack integration\n\n## 1.18.0\n\n### Minor Changes\n\n- [#1566](https://github.com/vanilla-extract-css/vanilla-extract/pull/1566) [`8b49b35`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b49b354d4364ce6e0db5e8ba16c92ca3e6b9cea) Thanks [@lfantone](https://github.com/lfantone)! - `style`: Add support for `@starting-style` rules\n\n  **EXAMPLE USAGE**:\n\n  ```ts\n  import { style } from '@vanilla-extact/css';\n  export const styleWithStartingStyle = style({\n    backgroundColor: 'black',\n    '@starting-style': {\n      backgroundColor: 'white'\n    }\n  });\n  ```\n\n### Patch Changes\n\n- [#1646](https://github.com/vanilla-extract-css/vanilla-extract/pull/1646) [`0b2c09e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b2c09e0fec1bee0e996f1920a106daab471178a) Thanks [@plesiecki](https://github.com/plesiecki)! - Swap the order of `createVar`'s overloads to enable inference of `VarDelcaration` type\n\n- [#1666](https://github.com/vanilla-extract-css/vanilla-extract/pull/1666) [`c6047fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6047fbe3f5e55a45780aa3dffd478a7743b8b3a) Thanks [@askoufis](https://github.com/askoufis)! - Remove custom container properties type\n\n  The [`csstype`] package used by Vanilla Extract now provides types for container properties, so the custom type definitions that were previously necessary have been removed.\n\n  [`csstype`]: https://www.npmjs.com/package/csstype\n\n## 1.17.5\n\n### Patch Changes\n\n- [#1655](https://github.com/vanilla-extract-css/vanilla-extract/pull/1655) [`11a7c66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/11a7c668683d0c3e324d4337676e807680a895bd) Thanks [@askoufis](https://github.com/askoufis)! - Update `csstype` dependency to `^3.2.3`\n\n## 1.17.4\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:\n  - @vanilla-extract/private@1.0.9\n\n## 1.17.3\n\n### Patch Changes\n\n- [#1596](https://github.com/vanilla-extract-css/vanilla-extract/pull/1596) [`f0533be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0533be939e6835ae961e3dd10b764c0c052ee75) Thanks [@cqh963852](https://github.com/cqh963852)! - `addFunctionSerializer`: Fix `args` type to support arrays of primitive values\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies [[`9d16de8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9d16de85b149b531f2e049e8d93bdb862667ff1f), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:\n  - @vanilla-extract/private@1.0.8\n\n## 1.17.2\n\n### Patch Changes\n\n- [#1557](https://github.com/vanilla-extract-css/vanilla-extract/pull/1557) [`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8) Thanks [@askoufis](https://github.com/askoufis)! - `css`: Improve type-checking performance of string literal types that include CSS variables\n\n- [#1560](https://github.com/vanilla-extract-css/vanilla-extract/pull/1560) [`c66be53`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c66be53d600802b2922da1d6034e2a5ff3fbbcae) Thanks [@andjsrk](https://github.com/andjsrk)! - Remove unnecessary intersections in a few types\n\n- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8)]:\n  - @vanilla-extract/private@1.0.7\n\n## 1.17.1\n\n### Patch Changes\n\n- [#1533](https://github.com/vanilla-extract-css/vanilla-extract/pull/1533) [`c432ff3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c432ff33a8aead2c94fa6a4fcc9fcb1d7990427d) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug where `@container` queries inside `selectors` were not being generated\n\n## 1.17.0\n\n### Minor Changes\n\n- [#1092](https://github.com/vanilla-extract-css/vanilla-extract/pull/1092) [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b) Thanks [@z4o4z](https://github.com/z4o4z)! - `keyframes`: Add support for a `vars` property to steps within `keyframes` declarations\n\n  Example usage:\n\n  ```ts\n  import {\n    createVar,\n    keyframes\n  } from '@vanilla-extract/css';\n\n  const angle = createVar({\n    syntax: '<angle>',\n    inherits: false,\n    initialValue: '0deg'\n  });\n\n  export const angleKeyframes = keyframes({\n    '0%': {\n      vars: {\n        [angle]: '0deg'\n      }\n    },\n    '100%': {\n      vars: {\n        [angle]: '360deg'\n      }\n    }\n  });\n  ```\n\n- [#1512](https://github.com/vanilla-extract-css/vanilla-extract/pull/1512) [`4abfc0b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4abfc0b47c675f9a7bfdb4c3316b1c62d2b8e558) Thanks [@askoufis](https://github.com/askoufis)! - `createTheme`, `createGlobalTheme`: Add support for assigning themes to a layer\n\n  Themes can now be assigned to a layer by name using the `@layer` key at the top-level of the theme definition.\n\n  **EXAMPLE USAGE**:\n\n  ```ts\n  // themes.css.ts\n  import {\n    createTheme,\n    createGlobalTheme,\n    layer\n  } from '@vanilla-extract/css';\n\n  export const themeLayer = layer();\n\n  export const [themeA, vars] = createTheme({\n    '@layer': themeLayer,\n    color: {\n      brand: 'blue'\n    },\n    font: {\n      body: 'arial'\n    }\n  });\n\n  export const vars2 = createGlobalTheme(':root', {\n    '@layer': themeLayer,\n    space: {\n      small: '10px',\n      large: '20px'\n    }\n  });\n  ```\n\n  This will generate the following CSS:\n\n  ```css\n  @layer themes_themeLayer__1k6oxph0;\n  @layer themes_themeLayer__1k6oxph0 {\n    .themes_themeA__1k6oxph1 {\n      --color-brand__1k6oxph2: blue;\n      --font-body__1k6oxph3: arial;\n    }\n\n    :root {\n      --space-small__z05zdf1: 10px;\n      --space-large__z05zdf2: 20px;\n    }\n  }\n  ```\n\n- [#1092](https://github.com/vanilla-extract-css/vanilla-extract/pull/1092) [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b) Thanks [@z4o4z](https://github.com/z4o4z)! - `createVar`: Add support for defining [`@property`] rules\n\n  Example usage:\n\n  ```ts\n  import { createVar } from '@vanilla-extract/css';\n\n  export const myVar = createVar({\n    syntax: '<number>',\n    inherits: false,\n    initialValue: '0.5'\n  });\n  ```\n\n  This will generate the following CSS:\n\n  ```css\n  @property --myVar__jteyb14 {\n    syntax: '<number>';\n    inherits: false;\n    initial-value: 0.5;\n  }\n  ```\n\n  [`@property`]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property\n\n## 1.16.1\n\n### Patch Changes\n\n- [#1505](https://github.com/vanilla-extract-css/vanilla-extract/pull/1505) [`103ce57`](https://github.com/vanilla-extract-css/vanilla-extract/commit/103ce57c98bf632a56fab1d71ae44039a77f5291) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug that caused invalid selectors to be generated when adjacent classnames contained a substring equal to another local classname\n\n## 1.16.0\n\n### Minor Changes\n\n- [#1475](https://github.com/vanilla-extract-css/vanilla-extract/pull/1475) [`cd9d8b2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cd9d8b231bbd7a7ac6674d2b28f77cff93e5be9e) Thanks [@corradopetrelli](https://github.com/corradopetrelli)! - Add `::-webkit-calendar-picker-indicator` as a valid pseudo-element\n\n- [#1450](https://github.com/vanilla-extract-css/vanilla-extract/pull/1450) [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415) Thanks [@wuz](https://github.com/wuz)! - Add `createViewTransition` API\n\n  `createViewTransition` creates a single scoped view transition name for use with CSS View Transitions. This avoids potential naming collisions with other view transitions.\n\n  ```ts\n  import {\n    style,\n    createViewTransition\n  } from '@vanilla-extract/css';\n\n  export const titleViewTransition = createViewTransition();\n\n  export const pageTitle = style({\n    viewTransitionName: titleViewTransition\n  });\n  ```\n\n## 1.15.5\n\n### Patch Changes\n\n- [#1466](https://github.com/vanilla-extract-css/vanilla-extract/pull/1466) [`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c) Thanks [@askoufis](https://github.com/askoufis)! - Speed up dev prefix generation for long file paths\n\n## 1.15.4\n\n### Patch Changes\n\n- [#1463](https://github.com/vanilla-extract-css/vanilla-extract/pull/1463) [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a) Thanks [@askoufis](https://github.com/askoufis)! - Export types with `export { type T }` syntax\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/private@1.0.6\n\n## 1.15.3\n\n### Patch Changes\n\n- [#1425](https://github.com/vanilla-extract-css/vanilla-extract/pull/1425) [`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug where declarations with identical selectors would not be merged correctly inside conditional rules\n\n- [#1410](https://github.com/vanilla-extract-css/vanilla-extract/pull/1410) [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813) Thanks [@pengooseDev](https://github.com/pengooseDev)! - Fixes a bug causing incorrect type inference when calling `createTheme` with a theme contract\n\n## 1.15.2\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/private@1.0.5\n\n## 1.15.1\n\n### Patch Changes\n\n- [#1386](https://github.com/vanilla-extract-css/vanilla-extract/pull/1386) [`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb) Thanks [@askoufis](https://github.com/askoufis)! - Replace `outdent` dependency with `dedent`\n\n- [#1385](https://github.com/vanilla-extract-css/vanilla-extract/pull/1385) [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a) Thanks [@askoufis](https://github.com/askoufis)! - Replace `chalk` dependency with `picocolors`\n\n## 1.15.0\n\n### Minor Changes\n\n- [#1379](https://github.com/vanilla-extract-css/vanilla-extract/pull/1379) [`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214) Thanks [@ronci](https://github.com/ronci)! - Add support for passing multiple font face rules to `globalFontFace`\n\n  **EXAMPLE USAGE:**\n\n  ```ts\n  const gentium = 'GlobalGentium';\n\n  globalFontFace(gentium, [\n    {\n      src: 'local(\"Gentium\")',\n      fontWeight: 'normal'\n    },\n    {\n      src: 'local(\"Gentium Bold\")',\n      fontWeight: 'bold'\n    }\n  ]);\n  ```\n\n## 1.14.2\n\n### Patch Changes\n\n- [#1368](https://github.com/vanilla-extract-css/vanilla-extract/pull/1368) [`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed) Thanks [@askoufis](https://github.com/askoufis)! - Update `@vanilla-extract/private` dependency\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/private@1.0.4\n\n## 1.14.1\n\n### Patch Changes\n\n- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier\n\n## 1.14.0\n\n### Minor Changes\n\n- [#1207](https://github.com/vanilla-extract-css/vanilla-extract/pull/1207) [`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4) Thanks [@CroModder](https://github.com/CroModder)! - Add some missing [simple pseudo selectors]\n\n  [simple pseudo selectors]: https://vanilla-extract.style/documentation/styling/#simple-pseudo-selectors\n\n### Patch Changes\n\n- [#1215](https://github.com/vanilla-extract-css/vanilla-extract/pull/1215) [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99) Thanks [@mrm007](https://github.com/mrm007)! - Replace dependency `ahocorasick` with `modern-ahocorasick`\n\n## 1.13.0\n\n### Minor Changes\n\n- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function\n\n## 1.12.0\n\n### Minor Changes\n\n- [#1114](https://github.com/vanilla-extract-css/vanilla-extract/pull/1114) [`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3) Thanks [@taylorfsteele](https://github.com/taylorfsteele)! - Supports passing multiple font face rules to `fontFace`\n\n  **Example usage**\n\n  ```ts\n  import { fontFace, style } from '@vanilla-extract/css';\n\n  const gentium = fontFace([\n    {\n      src: 'local(\"Gentium\")',\n      fontWeight: 'normal'\n    },\n    {\n      src: 'local(\"Gentium Bold\")',\n      fontWeight: 'bold'\n    }\n  ]);\n\n  export const font = style({\n    fontFamily: gentium\n  });\n  ```\n\n## 1.11.1\n\n### Patch Changes\n\n- [#1106](https://github.com/vanilla-extract-css/vanilla-extract/pull/1106) [`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix \"Invalid selector\" errors on pseudo-elements with params\n\n## 1.11.0\n\n### Minor Changes\n\n- [#955](https://github.com/vanilla-extract-css/vanilla-extract/pull/955) [`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01) Thanks [@mrm007](https://github.com/mrm007)! - Add support for [cascade layers, i.e. `@layer`][cascade layers].\n\n  Create a scoped [layer] to avoid naming collisions, or with an explicit name using [globalLayer]. Styles can then be assigned to layers using the `@layer` key within your style definition.\n\n  ```tsx\n  // layers.css.ts\n  import { layer } from '@vanilla-extract/css';\n\n  export const reset = layer('reset');\n  export const framework = layer('framework');\n  export const typography = layer('typography');\n\n  // typography.css.ts\n  import { style } from '@vanilla-extract/css';\n  import { typography } from './layers.css';\n\n  export const standard = style({\n    '@layer': {\n      [typography]: {\n        fontSize: '1rem'\n      }\n    }\n  });\n  ```\n\n  [cascade layers]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n  [layer]: https://vanilla-extract.style/documentation/api/layer\n  [globallayer]: https://vanilla-extract.style/documentation/global-api/global-layer\n\n## 1.10.0\n\n### Minor Changes\n\n- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Provide current file scope as an additional argument to the adapter methods `registerClassName` and `registerComposition`. This is to allow fine-grained caching of registered class names and class compositions per file.\n\n### Patch Changes\n\n- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Throw when `setAdapter` is called with a falsy value\n\n## 1.9.5\n\n### Patch Changes\n\n- [#990](https://github.com/vanilla-extract-css/vanilla-extract/pull/990) [`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da) Thanks [@askoufis](https://github.com/askoufis)! - Align transformation of `@keyframes` rules with other rules\n\n  This fixes a bug where invalid CSS could be generated inside `@keyframes` rules.\n\n## 1.9.4\n\n### Patch Changes\n\n- [#938](https://github.com/vanilla-extract-css/vanilla-extract/pull/938) [`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9) Thanks [@adrianaferrugento](https://github.com/adrianaferrugento)! - Bump `deep-object-diff` to v1.1.9 in order to fix security vulnerability\n\n## 1.9.3\n\n### Patch Changes\n\n- [#943](https://github.com/vanilla-extract-css/vanilla-extract/pull/943) [`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Fix a `tsc` error caused by a dependency's type declarations being unnecessarily bundled\n\n## 1.9.2\n\n### Patch Changes\n\n- [#900](https://github.com/vanilla-extract-css/vanilla-extract/pull/900) [`176c026`](https://github.com/vanilla-extract-css/vanilla-extract/commit/176c026fd72bda3fc969ba0d91494540f88488cb) Thanks [@wobsoriano](https://github.com/wobsoriano)! - Bump `@emotion/hash` to 0.9.0\n\n* [#854](https://github.com/vanilla-extract-css/vanilla-extract/pull/854) [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e) Thanks [@mrm007](https://github.com/mrm007)! - Bundle TypeScript declaration files (`.d.ts`) when building packages\n\n- [#893](https://github.com/vanilla-extract-css/vanilla-extract/pull/893) [`8ed77c2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8ed77c23ac004cd6e66b27f36100d5d5d014bc39) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where conditional styles (e.g. `@media`, `@supports`, etc) could be ordered incorrectly\n\n## 1.9.1\n\n### Patch Changes\n\n- [#837](https://github.com/vanilla-extract-css/vanilla-extract/pull/837) [`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve performance of selector transforms\n\n  This issue occured on M1 Macs due to performance issues with large regex patterns.\n\n* [#833](https://github.com/vanilla-extract-css/vanilla-extract/pull/833) [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix entrypoint resolving in Vitest\n\n## 1.9.0\n\n### Minor Changes\n\n- [#810](https://github.com/vanilla-extract-css/vanilla-extract/pull/810) [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Support excluding file names from `generateIdentifier` output. This is available by passing a newly-added options object rather than a string.\n\n  **Example usage**\n\n  ```ts\n  import { generateIdentifier } from '@vanilla-extract/css';\n\n  const identifier = generateIdentifier({\n    debugId,\n    debugFileName: false\n  });\n  ```\n\n### Patch Changes\n\n- [#810](https://github.com/vanilla-extract-css/vanilla-extract/pull/810) [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix spaces in debug IDs for variable names.\n\n* [#810](https://github.com/vanilla-extract-css/vanilla-extract/pull/810) [`c38b152`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c38b152ff6dbcf0f2b4226fc167d67314ecebabb) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix file name prefix in debug names when file extension is `.cjs` or `.mjs`.\n\n## 1.8.0\n\n### Minor Changes\n\n- [#807](https://github.com/vanilla-extract-css/vanilla-extract/pull/807) [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `createContainer` API\n\n  `createContainer` creates a single scoped container name for use with CSS Container Queries. This avoids potential naming collisions with other containers.\n\n  ```ts\n  import {\n    style,\n    createContainer\n  } from '@vanilla-extract/css';\n\n  export const sidebarContainer = createContainer();\n\n  export const sidebar = style({\n    containerName: sidebarContainer\n  });\n\n  export const navigation = style({\n    '@container': {\n      [`${sidebarContainer} (min-width: 400px)`]: {\n        display: 'flex'\n      }\n    }\n  });\n  ```\n\n* [#807](https://github.com/vanilla-extract-css/vanilla-extract/pull/807) [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add support for container queries via the new `@container` key.\n\n  ```ts\n  import { style } from '@vanilla-extract/css';\n\n  export const myStyle = style({\n    '@container': {\n      '(min-width: 400px)': {\n        display: 'flex'\n      }\n    }\n  });\n  ```\n\n## 1.7.4\n\n### Patch Changes\n\n- [#804](https://github.com/vanilla-extract-css/vanilla-extract/pull/804) [`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b) Thanks [@m7yue](https://github.com/m7yue)! - Fix `styleVariants` type when using the map data function\n\n## 1.7.3\n\n### Patch Changes\n\n- [#788](https://github.com/vanilla-extract-css/vanilla-extract/pull/788) [`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47) Thanks [@Dremora](https://github.com/Dremora)! - Add `scale` to the list of unitless properties.\n\n## 1.7.2\n\n### Patch Changes\n\n- [#723](https://github.com/vanilla-extract-css/vanilla-extract/pull/723) [`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Validate duplicate '@media' in media queries\n\n## 1.7.1\n\n### Patch Changes\n\n- [#684](https://github.com/vanilla-extract-css/vanilla-extract/pull/684) [`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve media query validation messaging\n\n## 1.7.0\n\n### Minor Changes\n\n- [#651](https://github.com/vanilla-extract-css/vanilla-extract/pull/651) [`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c) Thanks [@amorriscode](https://github.com/amorriscode)! - Add CSS media query validation\n\n## 1.6.8\n\n### Patch Changes\n\n- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)\n\n  This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/private@1.0.3\n\n## 1.6.7\n\n### Patch Changes\n\n- [#514](https://github.com/vanilla-extract-css/vanilla-extract/pull/514) [`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40) Thanks [@benjervis](https://github.com/benjervis)! - Export the package.json for css/fileScope\n\n  This is required to maintain backwards compatibility with older versions of webpack-plugin\n\n## 1.6.6\n\n### Patch Changes\n\n- [#508](https://github.com/vanilla-extract-css/vanilla-extract/pull/508) [`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `exports` field to `package.json` so nested package paths can be imported in a Node.js ESM context\n\n## 1.6.5\n\n### Patch Changes\n\n- [#504](https://github.com/vanilla-extract-css/vanilla-extract/pull/504) [`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure identifiers are escaped properly\n\n## 1.6.4\n\n### Patch Changes\n\n- [#489](https://github.com/vanilla-extract-css/vanilla-extract/pull/489) [`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix theme contract types in TypeScript 4.5\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/private@1.0.2\n\n## 1.6.3\n\n### Patch Changes\n\n- [#428](https://github.com/vanilla-extract-css/vanilla-extract/pull/428) [`e915f7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e915f7f0c1176f8403118d867216cc19490ad13f) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure whitespace is stripped from debug Ids\n\n## 1.6.2\n\n### Patch Changes\n\n- [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Improve the browser runtime dev experience.\n\n  The vanilla browser runtime now creates style tags containing the CSS itself, rather than injecting it directly into the CSSOM.\n\n  This helps with debugability, as the generated CSS can actually be seen in the devtools.\n  There are also some new attributes set on the style tags, making it easier to identify the source of each style.\n\n## 1.6.1\n\n### Patch Changes\n\n- [#381](https://github.com/vanilla-extract-css/vanilla-extract/pull/381) [`b1e5936`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b1e5936db253d81cca60c31adeabd2dd0a240389) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix identfiers not respecting `NODE_ENV` for SSR builds\n\n## 1.6.0\n\n### Minor Changes\n\n- [#361](https://github.com/vanilla-extract-css/vanilla-extract/pull/361) [`531044b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/531044b8c5c2d13c465ed77641d3cc6a11903ced) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Automatically add quotes to `content` values when necessary\n\n  For example `{ content: '' }` will now return CSS of `{ content: \"\" }`\n\n## 1.5.1\n\n### Patch Changes\n\n- [#354](https://github.com/vanilla-extract-css/vanilla-extract/pull/354) [`cdad52d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cdad52d6e95422f4ce53b74456fd510880a4a32a) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix function serialization with older versions of the `@vanilla-extract/integration` package\n\n## 1.5.0\n\n### Minor Changes\n\n- [#348](https://github.com/vanilla-extract-css/vanilla-extract/pull/348) [`c6cd1f2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6cd1f2eee982474c213f43fc23ee38b7a8c5e42) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `addFunctionSerializer` function\n\n  This also marks `addRecipe` as deprecated.\n\n## 1.4.1\n\n### Patch Changes\n\n- [#343](https://github.com/vanilla-extract-css/vanilla-extract/pull/343) [`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Cleanup adapter after processing styles\n\n## 1.4.0\n\n### Minor Changes\n\n- [#326](https://github.com/vanilla-extract-css/vanilla-extract/pull/326) [`2d9b4c3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d9b4c3e711310e55dbefe4b3430a771d95d62fd) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support passing arrays of styles to `style` and `styleVariants`\n\n  Multiple styles can now be composed into a single rule by providing an array of styles.\n\n  ```ts\n  import { style } from '@vanilla-extract/css';\n\n  const base = style({ padding: 12 });\n\n  export const primary = style([\n    base,\n    { background: 'blue' }\n  ]);\n\n  export const secondary = style([\n    base,\n    { background: 'aqua' }\n  ]);\n  ```\n\n  When composed styles are used in selectors, they are assigned an additional class if required so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.\n\n  ```ts\n  import { style, globalStyle } from '@vanilla-extract/css';\n\n  const background = style({ background: 'mintcream' });\n  const padding = style({ padding: 12 });\n\n  export const container = style([background, padding]);\n\n  globalStyle(`${container} *`, {\n    boxSizing: 'border-box'\n  });\n  ```\n\n  This feature is a replacement for the standalone `composeStyles` function which is now marked as deprecated. You can use `style` with an array as a drop-in replacement.\n\n  ```diff\n  -export const container = composeStyles(background, padding);\n  +export const container = style([background, padding]);\n  ```\n\n## 1.3.0\n\n### Minor Changes\n\n- [#319](https://github.com/vanilla-extract-css/vanilla-extract/pull/319) [`26832f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/26832f162e75b72f83dba0c230295a5dfed683aa) Thanks [@nicksrandall](https://github.com/nicksrandall)! - Add `createGlobalThemeContract` function\n\n  Creates a contract of globally scoped variable names for themes to implement.\n\n  > 💡 This is useful if you want to make your theme contract available to non-JavaScript environments.\n\n  ```ts\n  // themes.css.ts\n  import {\n    createGlobalThemeContract,\n    createGlobalTheme\n  } from '@vanilla-extract/css';\n\n  export const vars = createGlobalThemeContract({\n    color: {\n      brand: 'color-brand'\n    },\n    font: {\n      body: 'font-body'\n    }\n  });\n\n  createGlobalTheme(':root', vars, {\n    color: {\n      brand: 'blue'\n    },\n    font: {\n      body: 'arial'\n    }\n  });\n  ```\n\n  You can also provide a map function as the second argument which has access to the value and the object path.\n\n  For example, you can automatically prefix all variable names.\n\n  ```ts\n  // themes.css.ts\n  import { createGlobalThemeContract } from '@vanilla-extract/css';\n\n  export const vars = createGlobalThemeContract(\n    {\n      color: {\n        brand: 'color-brand'\n      },\n      font: {\n        body: 'font-body'\n      }\n    },\n    (value) => `prefix-${value}`\n  );\n  ```\n\n  You can also use the map function to automatically generate names from the object path, joining keys with a hyphen.\n\n  ```ts\n  // themes.css.ts\n  import { createGlobalThemeContract } from '@vanilla-extract/css';\n\n  export const vars = createGlobalThemeContract(\n    {\n      color: {\n        brand: null\n      },\n      font: {\n        body: null\n      }\n    },\n    (_value, path) => `prefix-${path.join('-')}`\n  );\n  ```\n\n* [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support configurable identifier types\n\n## 1.2.3\n\n### Patch Changes\n\n- [#284](https://github.com/vanilla-extract-css/vanilla-extract/pull/284) [`e65c029`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e65c0297a557f141cf84ca0836ee8ab4060c9d78) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix multiple top-level conditional styles in runtime version\n\n## 1.2.2\n\n### Patch Changes\n\n- [#274](https://github.com/vanilla-extract-css/vanilla-extract/pull/274) [`21e2197`](https://github.com/vanilla-extract-css/vanilla-extract/commit/21e2197363fdfbf4ba2cec54ab630cd343281816) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix type errors with nested null values in theme contracts\n\n## 1.2.1\n\n### Patch Changes\n\n- [#265](https://github.com/vanilla-extract-css/vanilla-extract/pull/265) [`385155f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/385155faff4eeab0bba5137383fe948999c04b2c) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix fileScope error if `composeStyles` is called at runtime\n\n## 1.2.0\n\n### Minor Changes\n\n- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of `composeStyles` to be used in selectors\n\n  When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.\n\n  ```ts\n  import {\n    style,\n    globalStyle,\n    composeStyles\n  } from '@vanilla-extract/css';\n\n  const background = style({ background: 'mintcream' });\n  const padding = style({ padding: 12 });\n\n  export const container = composeStyles(\n    background,\n    padding\n  );\n\n  globalStyle(`${container} *`, {\n    boxSizing: 'border-box'\n  });\n  ```\n\n## 1.1.2\n\n### Patch Changes\n\n- [#238](https://github.com/vanilla-extract-css/vanilla-extract/pull/238) [`1ee9ba2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1ee9ba2c5e6598450b8bac10d244b7e375e71617) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow passing of null contract tokens in `createThemeContract`\n\n## 1.1.1\n\n### Patch Changes\n\n- [#235](https://github.com/vanilla-extract-css/vanilla-extract/pull/235) [`1e49dfc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e49dfc4fc21ccb53870e297e5e4664b098cc22e) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `createGlobalTheme` types when accepting an existing contract\n\n- Updated dependencies [[`1e49dfc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e49dfc4fc21ccb53870e297e5e4664b098cc22e)]:\n  - @vanilla-extract/private@1.0.1\n\n## 1.1.0\n\n### Minor Changes\n\n- [#206](https://github.com/vanilla-extract-css/vanilla-extract/pull/206) [`64c18f9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64c18f976bdada1f99022e88065a8277d56b5592) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `disableRuntimeStyles` entrypoint\n\n  In testing environments (like `jsdom`) vanilla-extract will create and insert styles. While this is often desirable, it can be a major slowdown in your tests. If your tests don't require styles to be available, the `disableRuntimeStyles` import will disable all style creation.\n\n  ```ts\n  // setupTests.ts\n  import '@vanilla-extract/css/disableRuntimeStyles';\n  ```\n\n## 1.0.1\n\n### Patch Changes\n\n- [#204](https://github.com/vanilla-extract-css/vanilla-extract/pull/204) [`16f77ef`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16f77efba69a11fb37a43c83af8e39c1534dffea) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Ensure `:where`/`:is` selectors are supported when validating scoped selectors\n\n## 1.0.0\n\n### Major Changes\n\n- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1\n\n### Patch Changes\n\n- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:\n  - @vanilla-extract/private@1.0.0\n\n## 0.5.3\n\n### Patch Changes\n\n- [#166](https://github.com/vanilla-extract-css/vanilla-extract/pull/166) [`156e585`](https://github.com/vanilla-extract-css/vanilla-extract/commit/156e585cb6e3fdaed9e02d6b443a3b67c2210c37) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve missing filescope error\n\n* [#168](https://github.com/vanilla-extract-css/vanilla-extract/pull/168) [`962d64f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/962d64f82cb5afe154eeaef51689bb03baa0a7e3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow camel-case CSS var names instead of converting to snake-case\n\n## 0.5.2\n\n### Patch Changes\n\n- [#154](https://github.com/vanilla-extract-css/vanilla-extract/pull/154) [`f5ab957`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f5ab957b34586886ef428b58de1f2b55b4ab65e0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improved conditional CSS rendering\n\n  Previously all conditional CSS (@media and @supports) in a `.css.ts` file would merge together. This meant each unique query (e.g. `@media screen and (min-width: 700px)`) would only be rendered once. This output is ideal for file size but can lead to the conditions being rendered in the wrong order. The new strategy will still merge conditions together but only if it is considered safe to do so.\n\n* [#152](https://github.com/vanilla-extract-css/vanilla-extract/pull/152) [`ae532f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae532f5a112c0e89a510fea224b43c6706ce6ac2) Thanks [@Saartje87](https://github.com/Saartje87)! - Added support for the following simple pseudo selectors\n  - `::-webkit-resizer`\n  - `::-webkit-scrollbar-button`\n  - `::-webkit-scrollbar-corner`\n  - `::-webkit-scrollbar-thumb`\n  - `::-webkit-scrollbar-track-piece`\n  - `::-webkit-scrollbar-track`\n  - `::-webkit-scrollbar`\n\n## 0.5.1\n\n### Patch Changes\n\n- [#146](https://github.com/vanilla-extract-css/vanilla-extract/pull/146) [`bf51ab5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bf51ab56f5b10474476ef61a00edaaf297a10218) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix escaped characters in selectors\n\n## 0.5.0\n\n### Minor Changes\n\n- [#132](https://github.com/vanilla-extract-css/vanilla-extract/pull/132) [`4f92126`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4f92126c92d853f02e73ffadfed424b594e41166) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Introduce `addRecipe` function, exposed via `@vanilla-extract/css/recipe` entrypoint\n\n### Patch Changes\n\n- [#128](https://github.com/vanilla-extract-css/vanilla-extract/pull/128) [`ed76e45`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ed76e450038cb7cbaf12a511fda9e2a3a6d21b96) Thanks [@ntkoopman](https://github.com/ntkoopman)! - Fix --webkit-line-clamp unit\n\n## 0.4.4\n\n### Patch Changes\n\n- [#121](https://github.com/vanilla-extract-css/vanilla-extract/pull/121) [`823478b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/823478b942e91a7b371743651cf1dc35823be98a) Thanks [@Brendan-csel](https://github.com/Brendan-csel)! - Fix development identifiers for Windows paths\n\n## 0.4.3\n\n### Patch Changes\n\n- [#95](https://github.com/vanilla-extract-css/vanilla-extract/pull/95) [`f9ca82b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f9ca82b908b720785df271ed18d7abe048191759) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix fallbackVar type defintion\n\n## 0.4.2\n\n### Patch Changes\n\n- [#84](https://github.com/vanilla-extract-css/vanilla-extract/pull/84) [`0bc4e0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0bc4e0a164e9167e0356557f8feee42d7889d4b1) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Validate tokens match corresponding theme contracts\n\n- Updated dependencies [[`0bc4e0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0bc4e0a164e9167e0356557f8feee42d7889d4b1)]:\n  - @vanilla-extract/private@0.1.2\n\n## 0.4.1\n\n### Patch Changes\n\n- [#63](https://github.com/vanilla-extract-css/vanilla-extract/pull/63) [`2cecc8a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2cecc8af8634b71f217d713c5a9faf989b46e353) Thanks [@fnky](https://github.com/fnky)! - Export CSSProperties type\n\n## 0.4.0\n\n### Minor Changes\n\n- [#52](https://github.com/vanilla-extract-css/vanilla-extract/pull/52) [`2d98bcc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d98bccb40603585cf9eab70ff0afc52c33f803d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Rename `createThemeVars` to `createThemeContract`\n\n  **BREAKING CHANGE**\n\n  ```diff\n  import {\n  -  createThemeVars,\n  +  createThemeContract,\n    createTheme\n  } from '@vanilla-extract/css';\n\n  -export const vars = createThemeVars({\n  +export const vars = createThemeContract({\n    color: {\n      brand: null\n    },\n    font: {\n      body: null\n    }\n  });\n  ```\n\n### Patch Changes\n\n- [#50](https://github.com/vanilla-extract-css/vanilla-extract/pull/50) [`48c4a78`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48c4a7866a8361de712b89b06abb380bf4709656) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow vars to be passed as values to all style properties\n\n## 0.3.2\n\n### Patch Changes\n\n- [#47](https://github.com/vanilla-extract-css/vanilla-extract/pull/47) [`a18bc03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a18bc034885a8b1cc1396b3890111067d4858626) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve dev prefixes on generated class names\n  - Add file name to class names even if no debug id is present\n  - If file is the index file use directory name instead\n\n* [#49](https://github.com/vanilla-extract-css/vanilla-extract/pull/49) [`2ae4db3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2ae4db3cd442fc493ccc00fd519841b72f1381bf) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Update the unit-less property map\n\n  The original list was borrowed from the [postcss-js parser](https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L5), but decided to reverse engineer an updated list from [csstype](https://github.com/frenic/csstype) for more thorough coverage.\n\n## 0.3.1\n\n### Patch Changes\n\n- [#45](https://github.com/vanilla-extract-css/vanilla-extract/pull/45) [`e154028`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1540281d327fc0883f47255f710de3f9b342c64) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `createThemeVars` when using null values\n\n- Updated dependencies [[`e154028`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1540281d327fc0883f47255f710de3f9b342c64)]:\n  - @vanilla-extract/private@0.1.1\n\n## 0.3.0\n\n### Minor Changes\n\n- [#38](https://github.com/vanilla-extract-css/vanilla-extract/pull/38) [`156b491`](https://github.com/vanilla-extract-css/vanilla-extract/commit/156b49182367bf233564eae7fd3ea9d3f50fd68a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `composeStyles` function\n\n* [#37](https://github.com/vanilla-extract-css/vanilla-extract/pull/37) [`ae9864c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae9864c727c2edd0d415b77f738a3c959c98fca6) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Rename `mapToStyles` to `styleVariants`\n\n  **BREAKING CHANGE**\n\n  ```diff\n  -import { mapToStyles } from '@vanilla-extract/css';\n  +import { styleVariants } from '@vanilla-extract/css';\n\n  -export const variant = mapToStyles({\n  +export const variant = styleVariants({\n    primary: { background: 'blue' },\n    secondary: { background: 'aqua' },\n  });\n  ```\n\n### Patch Changes\n\n- [#34](https://github.com/vanilla-extract-css/vanilla-extract/pull/34) [`756d9b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/756d9b0d0305e8b8a63f0ca1ebe635ab320a5f5b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Reduce CSS var and identifier lengths\n\n## 0.2.0\n\n### Minor Changes\n\n- [#20](https://github.com/vanilla-extract-css/vanilla-extract/pull/20) [`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure generated hashes are scoped by package\n\n  vanilla-extract uses file path to ensure unique identifier (e.g. class names, CSS Variables, keyframes, etc) hashes across your application. This information is added to your `*.css.ts` files at build time. The issue with this approach is it meant `*.css.ts` files couldn't be pre-compiled when being published to npm.\n\n  This change adds support for pre-compilation of packages by adding package name information to identifier hashes.\n\n* [#25](https://github.com/vanilla-extract-css/vanilla-extract/pull/25) [`c4bedd5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c4bedd571f0c21291b58e050589b4db9465c0460) Thanks [@markdalgleish](https://github.com/markdalgleish)! - The `createInlineTheme` function has now moved to the `@vanilla-extract/dynamic` package.\n\n  ```diff\n  -import { createInlineTheme } from '@vanilla-extract/css/createInlineTheme';\n  +import { createInlineTheme } from '@vanilla-extract/dynamic';\n  ```\n\n## 0.1.0\n\n### Minor Changes\n\n- e83ad50: Initial release\n"
  },
  {
    "path": "packages/css/adapter/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-css-adapter.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-adapter.esm.js\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css-adapter.cjs.js\": \"./dist/vanilla-extract-css-adapter.browser.cjs.js\",\n    \"./dist/vanilla-extract-css-adapter.esm.js\": \"./dist/vanilla-extract-css-adapter.browser.esm.js\"\n  },\n  \"sideEffects\": false,\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css-adapter.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css-adapter.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css-adapter.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css-adapter.cjs.js\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/css/disableRuntimeStyles/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-css-disableRuntimeStyles.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-disableRuntimeStyles.esm.js\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css-disableRuntimeStyles.cjs.js\": \"./dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js\",\n    \"./dist/vanilla-extract-css-disableRuntimeStyles.esm.js\": \"./dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js\"\n  },\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css-disableRuntimeStyles.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css-disableRuntimeStyles.cjs.js\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/css/fileScope/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-css-fileScope.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-fileScope.esm.js\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css-fileScope.cjs.js\": \"./dist/vanilla-extract-css-fileScope.browser.cjs.js\",\n    \"./dist/vanilla-extract-css-fileScope.esm.js\": \"./dist/vanilla-extract-css-fileScope.browser.esm.js\"\n  },\n  \"sideEffects\": false,\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css-fileScope.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css-fileScope.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css-fileScope.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css-fileScope.cjs.js\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/css/functionSerializer/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-css-functionSerializer.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-functionSerializer.esm.js\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css-functionSerializer.cjs.js\": \"./dist/vanilla-extract-css-functionSerializer.browser.cjs.js\",\n    \"./dist/vanilla-extract-css-functionSerializer.esm.js\": \"./dist/vanilla-extract-css-functionSerializer.browser.esm.js\"\n  },\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css-functionSerializer.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css-functionSerializer.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css-functionSerializer.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css-functionSerializer.cjs.js\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/css/injectStyles/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-css-injectStyles.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-injectStyles.esm.js\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css-injectStyles.cjs.js\": \"./dist/vanilla-extract-css-injectStyles.browser.cjs.js\",\n    \"./dist/vanilla-extract-css-injectStyles.esm.js\": \"./dist/vanilla-extract-css-injectStyles.browser.esm.js\"\n  },\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css-injectStyles.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css-injectStyles.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css-injectStyles.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css-injectStyles.cjs.js\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/css/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/css\",\n  \"version\": \"1.20.0\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"sideEffects\": true,\n  \"main\": \"dist/vanilla-extract-css.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css.esm.js\",\n  \"types\": \"dist/vanilla-extract-css.cjs.d.ts\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css.cjs.js\": \"./dist/vanilla-extract-css.browser.cjs.js\",\n    \"./dist/vanilla-extract-css.esm.js\": \"./dist/vanilla-extract-css.browser.esm.js\"\n  },\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \"./vanilla.virtual.css?*\": \"./vanilla.virtual.css?*\",\n    \".\": {\n      \"types\": \"./dist/vanilla-extract-css.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css.cjs.js\"\n    },\n    \"./recipe\": {\n      \"types\": \"./recipe/dist/vanilla-extract-css-recipe.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./recipe/dist/vanilla-extract-css-recipe.browser.esm.js\",\n        \"default\": \"./recipe/dist/vanilla-extract-css-recipe.browser.cjs.js\"\n      },\n      \"module\": \"./recipe/dist/vanilla-extract-css-recipe.esm.js\",\n      \"default\": \"./recipe/dist/vanilla-extract-css-recipe.cjs.js\"\n    },\n    \"./functionSerializer\": {\n      \"types\": \"./functionSerializer/dist/vanilla-extract-css-functionSerializer.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.esm.js\",\n        \"default\": \"./functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.cjs.js\"\n      },\n      \"module\": \"./functionSerializer/dist/vanilla-extract-css-functionSerializer.esm.js\",\n      \"default\": \"./functionSerializer/dist/vanilla-extract-css-functionSerializer.cjs.js\"\n    },\n    \"./adapter\": {\n      \"types\": \"./adapter/dist/vanilla-extract-css-adapter.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./adapter/dist/vanilla-extract-css-adapter.browser.esm.js\",\n        \"default\": \"./adapter/dist/vanilla-extract-css-adapter.browser.cjs.js\"\n      },\n      \"module\": \"./adapter/dist/vanilla-extract-css-adapter.esm.js\",\n      \"default\": \"./adapter/dist/vanilla-extract-css-adapter.cjs.js\"\n    },\n    \"./transformCss\": {\n      \"types\": \"./transformCss/dist/vanilla-extract-css-transformCss.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js\",\n        \"default\": \"./transformCss/dist/vanilla-extract-css-transformCss.browser.cjs.js\"\n      },\n      \"module\": \"./transformCss/dist/vanilla-extract-css-transformCss.esm.js\",\n      \"default\": \"./transformCss/dist/vanilla-extract-css-transformCss.cjs.js\"\n    },\n    \"./fileScope\": {\n      \"types\": \"./fileScope/dist/vanilla-extract-css-fileScope.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js\",\n        \"default\": \"./fileScope/dist/vanilla-extract-css-fileScope.browser.cjs.js\"\n      },\n      \"module\": \"./fileScope/dist/vanilla-extract-css-fileScope.esm.js\",\n      \"default\": \"./fileScope/dist/vanilla-extract-css-fileScope.cjs.js\"\n    },\n    \"./fileScope/package.json\": \"./fileScope/package.json\",\n    \"./injectStyles\": {\n      \"types\": \"./injectStyles/dist/vanilla-extract-css-injectStyles.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./injectStyles/dist/vanilla-extract-css-injectStyles.browser.esm.js\",\n        \"default\": \"./injectStyles/dist/vanilla-extract-css-injectStyles.browser.cjs.js\"\n      },\n      \"module\": \"./injectStyles/dist/vanilla-extract-css-injectStyles.esm.js\",\n      \"default\": \"./injectStyles/dist/vanilla-extract-css-injectStyles.cjs.js\"\n    },\n    \"./disableRuntimeStyles\": {\n      \"types\": \"./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.cjs.d.ts\",\n      \"browser\": {\n        \"module\": \"./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js\",\n        \"default\": \"./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js\"\n      },\n      \"module\": \"./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.esm.js\",\n      \"default\": \"./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.cjs.js\"\n    }\n  },\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\",\n      \"recipe.ts\",\n      \"functionSerializer.ts\",\n      \"adapter.ts\",\n      \"transformCss.ts\",\n      \"fileScope.ts\",\n      \"injectStyles.ts\",\n      \"disableRuntimeStyles.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\",\n    \"/recipe\",\n    \"/functionSerializer\",\n    \"/adapter\",\n    \"/transformCss\",\n    \"/fileScope\",\n    \"/injectStyles\",\n    \"/disableRuntimeStyles\",\n    \"vanilla.virtual.css\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/css\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@emotion/hash\": \"^0.9.0\",\n    \"@vanilla-extract/private\": \"workspace:^\",\n    \"css-what\": \"^6.1.0\",\n    \"cssesc\": \"^3.0.0\",\n    \"csstype\": \"^3.2.3\",\n    \"dedent\": \"^1.5.3\",\n    \"deep-object-diff\": \"^1.1.9\",\n    \"deepmerge\": \"^4.2.2\",\n    \"lru-cache\": \"^10.4.3\",\n    \"media-query-parser\": \"^2.0.2\",\n    \"modern-ahocorasick\": \"^1.0.0\",\n    \"picocolors\": \"^1.0.0\"\n  },\n  \"devDependencies\": {\n    \"@types/cssesc\": \"^3.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/css/recipe/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-css-recipe.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-recipe.esm.js\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css-recipe.cjs.js\": \"./dist/vanilla-extract-css-recipe.browser.cjs.js\",\n    \"./dist/vanilla-extract-css-recipe.esm.js\": \"./dist/vanilla-extract-css-recipe.browser.esm.js\"\n  },\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css-recipe.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css-recipe.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css-recipe.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css-recipe.cjs.js\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/css/src/adapter.ts",
    "content": "import type { Adapter } from './types';\n\nexport const mockAdapter: Adapter = {\n  appendCss: () => {},\n  registerClassName: () => {},\n  onEndFileScope: () => {},\n  registerComposition: () => {},\n  markCompositionUsed: () => {},\n  getIdentOption: () =>\n    process.env.NODE_ENV === 'production' ? 'short' : 'debug',\n};\n\nconst adapterStack: Array<Adapter> = [mockAdapter];\n\nconst currentAdapter = () => {\n  if (adapterStack.length < 1) {\n    throw new Error('No adapter configured');\n  }\n\n  return adapterStack[adapterStack.length - 1];\n};\n\nlet hasConfiguredAdapter = false;\n\nexport const setAdapterIfNotSet = (newAdapter: Adapter): void => {\n  if (!hasConfiguredAdapter) {\n    setAdapter(newAdapter);\n  }\n};\n\nexport const setAdapter = (newAdapter: Adapter): void => {\n  if (!newAdapter) {\n    throw new Error('No adapter provided when calling \"setAdapter\"');\n  }\n\n  hasConfiguredAdapter = true;\n\n  adapterStack.push(newAdapter);\n};\n\nexport const removeAdapter = (): void => {\n  adapterStack.pop();\n};\n\nexport const appendCss: Adapter['appendCss'] = (...props) => {\n  return currentAdapter().appendCss(...props);\n};\n\nexport const registerClassName: Adapter['registerClassName'] = (...props) => {\n  return currentAdapter().registerClassName(...props);\n};\n\nexport const registerComposition: Adapter['registerComposition'] = (\n  ...props\n) => {\n  return currentAdapter().registerComposition(...props);\n};\n\nexport const markCompositionUsed: Adapter['markCompositionUsed'] = (\n  ...props\n) => {\n  return currentAdapter().markCompositionUsed(...props);\n};\n\nexport const onBeginFileScope: NonNullable<Adapter['onBeginFileScope']> = (\n  ...props\n) => {\n  return currentAdapter().onBeginFileScope?.(...props);\n};\n\nexport const onEndFileScope: Adapter['onEndFileScope'] = (...props) => {\n  return currentAdapter().onEndFileScope(...props);\n};\n\nexport const getIdentOption: Adapter['getIdentOption'] = (...props) => {\n  const adapter = currentAdapter();\n\n  // Backwards compatibility with old versions of the integration package\n  if (!('getIdentOption' in adapter)) {\n    return process.env.NODE_ENV === 'production' ? 'short' : 'debug';\n  }\n\n  return adapter.getIdentOption(...props);\n};\n"
  },
  {
    "path": "packages/css/src/conditionalRulesets.ts",
    "content": "/** e.g. @media screen and (min-width: 500px) */\ntype Query = string;\n\ninterface Rule {\n  selector: string;\n  rule: any;\n}\n\ntype Condition = {\n  query: Query;\n  rules: Array<Rule>;\n  children: ConditionalRuleset;\n};\n\ntype RenderedConditionalRule = Record<string, Record<string, any>>;\n\nexport class ConditionalRuleset {\n  ruleset: Map<Query, Condition>;\n\n  /**\n   * Stores information about where conditions must be in relation to other conditions\n   *\n   * e.g. mobile -> tablet, desktop\n   */\n  precedenceLookup: Map<Query, Set<string>>;\n\n  constructor() {\n    this.ruleset = new Map();\n    this.precedenceLookup = new Map();\n  }\n\n  findOrCreateCondition(conditionQuery: Query): Condition {\n    let targetCondition = this.ruleset.get(conditionQuery);\n\n    if (!targetCondition) {\n      // No target condition so create one\n      targetCondition = {\n        query: conditionQuery,\n        rules: [],\n        children: new ConditionalRuleset(),\n      };\n      this.ruleset.set(conditionQuery, targetCondition);\n    }\n\n    return targetCondition;\n  }\n\n  getConditionalRulesetByPath(conditionPath: Array<Query>): ConditionalRuleset {\n    // Couldn't fine a way around this\n    // oxlint-disable-next-line typescript/no-this-alias\n    let currRuleset: ConditionalRuleset = this;\n\n    for (const query of conditionPath) {\n      const condition = currRuleset.findOrCreateCondition(query);\n\n      currRuleset = condition.children;\n    }\n\n    return currRuleset;\n  }\n\n  addRule(\n    rule: Rule,\n    conditionQuery: Query,\n    conditionPath: Array<Query>,\n  ): void {\n    const ruleset = this.getConditionalRulesetByPath(conditionPath);\n    const targetCondition = ruleset.findOrCreateCondition(conditionQuery);\n\n    if (!targetCondition) {\n      throw new Error('Failed to add conditional rule');\n    }\n\n    targetCondition.rules.push(rule);\n  }\n\n  addConditionPrecedence(\n    conditionPath: Array<Query>,\n    conditionOrder: Array<Query>,\n  ): void {\n    const ruleset = this.getConditionalRulesetByPath(conditionPath);\n\n    for (let i = 0; i < conditionOrder.length; i++) {\n      const query = conditionOrder[i];\n\n      const conditionPrecedence =\n        ruleset.precedenceLookup.get(query) ?? new Set();\n\n      for (const lowerPrecedenceCondition of conditionOrder.slice(i + 1)) {\n        conditionPrecedence.add(lowerPrecedenceCondition);\n      }\n\n      ruleset.precedenceLookup.set(query, conditionPrecedence);\n    }\n  }\n\n  isCompatible(incomingRuleset: ConditionalRuleset): boolean {\n    for (const [\n      condition,\n      orderPrecedence,\n    ] of this.precedenceLookup.entries()) {\n      for (const lowerPrecedenceCondition of orderPrecedence) {\n        if (\n          incomingRuleset.precedenceLookup\n            .get(lowerPrecedenceCondition as string)\n            ?.has(condition)\n        ) {\n          return false;\n        }\n      }\n    }\n\n    // Check that children are compatible\n    for (const { query, children } of incomingRuleset.ruleset.values()) {\n      const matchingCondition = this.ruleset.get(query);\n\n      if (\n        matchingCondition &&\n        !matchingCondition.children.isCompatible(children)\n      ) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  merge(incomingRuleset: ConditionalRuleset): void {\n    // Merge rulesets into one array\n    for (const { query, rules, children } of incomingRuleset.ruleset.values()) {\n      const matchingCondition = this.ruleset.get(query);\n\n      if (matchingCondition) {\n        matchingCondition.rules.push(...rules);\n\n        matchingCondition.children.merge(children);\n      } else {\n        this.ruleset.set(query, { query, rules, children });\n      }\n    }\n\n    // Merge order precedences\n    for (const [\n      condition,\n      incomingOrderPrecedence,\n    ] of incomingRuleset.precedenceLookup.entries()) {\n      const orderPrecedence = this.precedenceLookup.get(condition) ?? new Set();\n\n      this.precedenceLookup.set(\n        condition,\n        new Set([...orderPrecedence, ...incomingOrderPrecedence]),\n      );\n    }\n  }\n\n  /**\n   * Merge another ConditionalRuleset into this one if they are compatible\n   *\n   * @returns true if successful, false if the ruleset is incompatible\n   */\n  mergeIfCompatible(incomingRuleset: ConditionalRuleset): boolean {\n    if (!this.isCompatible(incomingRuleset)) {\n      return false;\n    }\n\n    this.merge(incomingRuleset);\n\n    return true;\n  }\n\n  getSortedRuleset(): Condition[] {\n    const sortedRuleset: Array<Condition> = [];\n\n    // Loop through all queries and add them to the sorted ruleset\n    for (const [query, dependents] of this.precedenceLookup.entries()) {\n      const conditionForQuery = this.ruleset.get(query);\n\n      if (!conditionForQuery) {\n        throw new Error(`Can't find condition for ${query}`);\n      }\n\n      // Find the location of the first dependent condition in the sortedRuleset\n      // A dependent condition is a condition that must be placed *after* the current one\n      const firstMatchingDependent = sortedRuleset.findIndex((condition) =>\n        dependents.has(condition.query),\n      );\n\n      if (firstMatchingDependent > -1) {\n        // Insert the condition before the dependent one\n        sortedRuleset.splice(firstMatchingDependent, 0, conditionForQuery);\n      } else {\n        // No match, just insert at the end\n        sortedRuleset.push(conditionForQuery);\n      }\n    }\n\n    return sortedRuleset;\n  }\n\n  renderToArray(): RenderedConditionalRule[] {\n    const arr: RenderedConditionalRule[] = [];\n\n    for (const { query, rules, children } of this.getSortedRuleset()) {\n      const selectors: Record<string, any> = {};\n\n      for (const rule of rules) {\n        selectors[rule.selector] = {\n          // Preserve existing declarations if a rule with the same selector has already been added\n          ...selectors[rule.selector],\n          ...rule.rule,\n        };\n      }\n\n      Object.assign(selectors, ...children.renderToArray());\n\n      arr.push({ [query]: selectors });\n    }\n\n    return arr;\n  }\n}\n"
  },
  {
    "path": "packages/css/src/container.ts",
    "content": "import { generateIdentifier } from './identifier';\n\n// createContainer is used for local scoping of CSS containers\n// For now it is mostly just an alias of generateIdentifier\nexport const createContainer = (debugId?: string): string =>\n  generateIdentifier(debugId);\n"
  },
  {
    "path": "packages/css/src/disableRuntimeStyles.ts",
    "content": "import { setAdapter, mockAdapter } from './adapter';\n\nsetAdapter(mockAdapter);\n"
  },
  {
    "path": "packages/css/src/fileScope.ts",
    "content": "import dedent from 'dedent';\nimport { onBeginFileScope, onEndFileScope } from './adapter';\nimport type { FileScope } from './types';\n\nlet refCounter = 0;\n\nconst fileScopes: Array<FileScope> = [];\n\nexport function setFileScope(filePath: string, packageName?: string): void {\n  refCounter = 0;\n  const fileScope = {\n    filePath,\n    packageName,\n  };\n  fileScopes.unshift(fileScope);\n  onBeginFileScope(fileScope);\n}\n\nexport function endFileScope(): void {\n  onEndFileScope(getFileScope());\n  refCounter = 0;\n  fileScopes.splice(0, 1);\n}\n\nexport function hasFileScope(): boolean {\n  return fileScopes.length > 0;\n}\n\nexport function getFileScope(): FileScope {\n  if (fileScopes.length === 0) {\n    throw new Error(\n      dedent`\n        Styles were unable to be assigned to a file. This is generally caused by one of the following:\n\n        - You may have created styles outside of a '.css.ts' context\n        - You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started\n      `,\n    );\n  }\n\n  return fileScopes[0];\n}\n\nexport function getAndIncrementRefCounter(): number {\n  return refCounter++;\n}\n"
  },
  {
    "path": "packages/css/src/functionSerializer.ts",
    "content": "type Primitive = string | number | boolean | null | undefined;\n\ntype Serializable =\n  | Primitive\n  | {\n      [Key in string | number]: Primitive | Serializable;\n    }\n  | ReadonlyArray<Primitive | Serializable>;\n\ninterface SerializerConfig {\n  importPath: string;\n  importName: string;\n  args: ReadonlyArray<Serializable>;\n}\n\nexport function addFunctionSerializer<Target extends object>(\n  target: Target,\n  recipe: SerializerConfig,\n): Target {\n  // TODO: Update to \"__function_serializer__\" in future.\n  // __recipe__ is the backwards compatible name\n  Object.defineProperty(target, '__recipe__', {\n    value: recipe,\n    writable: false,\n  });\n\n  return target;\n}\n"
  },
  {
    "path": "packages/css/src/getDebugFileName.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { getDebugFileName } from './getDebugFileName';\n\nconst testCases = [\n  {\n    name: 'longPath',\n    input:\n      'node_modules/.pnpm/braid-design-system@32.23.0_@types+react@18.3.3_babel-plugin-macros@3.1.0_react-dom@18.3.1_re_ctndskkf4y74v2qksfjwfz6ezy/node_modules/braid-design-system/dist/lib/components/ButtonDir/Button.css.mjs',\n    expected: 'Button',\n  },\n  {\n    name: 'emojiPath',\n    input: 'node_modules/my_package/dist/👨‍👩‍👦Test🎉Dir👨‍🚀/Test🎉File👨‍🚀.css.ts',\n    expected: 'Test🎉File👨‍🚀',\n  },\n  {\n    name: 'loneSurrogates',\n    input: 'node_modules/my_package/dist/Test\\uD801Dir/Test\\uDC01File.css.ts',\n    expected: 'Test\\uDC01File',\n  },\n  {\n    name: 'noExtension',\n    input: 'node_modules/my_package/dist/TestDir/TestFile',\n    expected: '',\n  },\n  {\n    name: 'singleFileSparator',\n    input: 'src/Button.css.ts',\n    expected: 'Button',\n  },\n  {\n    name: 'noDir',\n    input: 'myFile.css.ts',\n    expected: 'myFile',\n  },\n];\n\ndescribe('getDebugFileName', () => {\n  testCases.forEach(({ name, input, expected }) => {\n    it(name, () => {\n      const result = getDebugFileName(input);\n\n      expect(result).toStrictEqual(expected);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/css/src/getDebugFileName.ts",
    "content": "import { LRUCache } from 'lru-cache';\n\nconst getLastSlashBeforeIndex = (path: string, index: number) => {\n  let pathIndex = index - 1;\n\n  while (pathIndex >= 0) {\n    if (path[pathIndex] === '/') {\n      return pathIndex;\n    }\n\n    pathIndex--;\n  }\n\n  return -1;\n};\n\n/**\n * Assumptions:\n * - The path is always normalized to use posix file separators (/) (see `addFileScope`)\n * - The path is always relative to the project root, i.e. there will never be a leading slash (see `addFileScope`)\n * - As long as `.css` is there, we have a valid `.css.*` file path, because otherwise there wouldn't\n *   be a file scope to begin with\n *\n * The LRU cache we use can't cache undefined/null values, so we opt to return an empty string,\n * rather than using a custom Symbol or something similar.\n */\nconst _getDebugFileName = (path: string): string => {\n  let file: string;\n\n  const lastIndexOfDotCss = path.lastIndexOf('.css');\n\n  if (lastIndexOfDotCss === -1) {\n    return '';\n  }\n\n  const lastSlashIndex = getLastSlashBeforeIndex(path, lastIndexOfDotCss);\n  file = path.slice(lastSlashIndex + 1, lastIndexOfDotCss);\n\n  // There are no slashes, therefore theres no directory to extract\n  if (lastSlashIndex === -1) {\n    return file;\n  }\n\n  let secondLastSlashIndex = getLastSlashBeforeIndex(path, lastSlashIndex - 1);\n  // If secondLastSlashIndex is -1, it means that the path looks like `directory/file.css.ts`,\n  // in which case dir will still be sliced starting at 0, which is what we want\n  const dir = path.slice(secondLastSlashIndex + 1, lastSlashIndex);\n\n  const debugFileName = file !== 'index' ? file : dir;\n\n  return debugFileName;\n};\n\nconst memoizedGetDebugFileName = () => {\n  const cache = new LRUCache<string, string>({\n    max: 500,\n  });\n\n  return (path: string): string => {\n    const cachedResult = cache.get(path);\n\n    if (cachedResult) {\n      return cachedResult;\n    }\n\n    const result = _getDebugFileName(path);\n    cache.set(path, result);\n\n    return result;\n  };\n};\n\nexport const getDebugFileName: (path: string) => string =\n  memoizedGetDebugFileName();\n"
  },
  {
    "path": "packages/css/src/identifier.test.ts",
    "content": "import { afterAll, beforeAll, describe, expect, it } from 'vitest';\nimport { removeAdapter, setAdapter } from './adapter';\nimport { endFileScope, setFileScope } from './fileScope';\nimport { generateIdentifier } from './identifier';\n\ndescribe('identifier', () => {\n  beforeAll(() => {\n    setFileScope('path/to/file.css.ts');\n  });\n\n  afterAll(() => {\n    endFileScope();\n  });\n\n  it(`should ignore file scopes without a file extension when creating a path prefix`, () => {\n    setFileScope('test');\n    expect(generateIdentifier(undefined)).toMatchInlineSnapshot(`\"skkcyc0\"`);\n    endFileScope();\n  });\n\n  it(`should create a valid identifier`, () => {\n    expect(generateIdentifier(undefined)).toMatchInlineSnapshot(\n      `\"file__18bazsm0\"`,\n    );\n  });\n\n  it('should create a valid identifier with a debug id', () => {\n    expect(generateIdentifier('debug')).toMatchInlineSnapshot(\n      `\"file_debug__18bazsm1\"`,\n    );\n  });\n\n  it('should create a valid identifier with a debug id with whitespace', () => {\n    expect(generateIdentifier('debug and more')).toMatchInlineSnapshot(\n      `\"file_debug_and_more__18bazsm2\"`,\n    );\n  });\n\n  describe('options object', () => {\n    it(`should create a valid identifier`, () => {\n      expect(generateIdentifier({})).toMatchInlineSnapshot(`\"file__18bazsm3\"`);\n    });\n\n    it('should create a valid identifier with a debug id and with file name debugging explicitly enabled', () => {\n      expect(\n        generateIdentifier({ debugId: 'debug', debugFileName: true }),\n      ).toMatchInlineSnapshot(`\"file_debug__18bazsm4\"`);\n    });\n\n    it('should create a valid identifier with a debug id and without file name debugging', () => {\n      expect(\n        generateIdentifier({ debugId: 'debug', debugFileName: false }),\n      ).toMatchInlineSnapshot(`\"debug__18bazsm5\"`);\n    });\n\n    it('should create a valid identifier without a debug ID or file name', () => {\n      expect(\n        generateIdentifier({ debugFileName: false }),\n      ).toMatchInlineSnapshot(`\"_18bazsm6\"`);\n    });\n  });\n\n  describe('with custom callback', () => {\n    beforeAll(() => {\n      setFileScope('path/to/file.css.ts', 'packagetest');\n      setAdapter({\n        appendCss: () => {},\n        registerClassName: () => {},\n        onEndFileScope: () => {},\n        registerComposition: () => {},\n        markCompositionUsed: () => {},\n        getIdentOption:\n          () =>\n          ({ hash, debugId, filePath, packageName }) => {\n            const filenameWithExtension = filePath?.split('/').pop();\n            const filenameWithoutExtension =\n              filenameWithExtension?.split('.')?.[0];\n\n            return `abc_${debugId}_${hash}_${packageName}_${filenameWithoutExtension}`;\n          },\n      });\n    });\n\n    afterAll(() => {\n      removeAdapter();\n      endFileScope();\n    });\n\n    it('defers to a custom callback', () => {\n      expect(generateIdentifier(`a`)).toMatchInlineSnapshot(\n        `\"abc_a_s0xkdr0_packagetest_file\"`,\n      );\n    });\n\n    it('should allow hyphens in a class name', () => {\n      expect(generateIdentifier('a-b')).toMatchInlineSnapshot(\n        `\"abc_a-b_s0xkdr1_packagetest_file\"`,\n      );\n      expect(generateIdentifier('a-b-c')).toMatchInlineSnapshot(\n        `\"abc_a-b-c_s0xkdr2_packagetest_file\"`,\n      );\n    });\n\n    it('rejects invalid identifiers', () => {\n      // getIdentOption() does not remove spaces from the debug info so the\n      // resulting identifier should be invalid here.\n      expect(() => generateIdentifier(`a b`)).toThrow();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/css/src/identifier.ts",
    "content": "import hash from '@emotion/hash';\n\nimport { getIdentOption } from './adapter';\nimport { getAndIncrementRefCounter, getFileScope } from './fileScope';\nimport { getDebugFileName } from './getDebugFileName';\n\nfunction getDevPrefix({\n  debugId,\n  debugFileName,\n}: {\n  debugId?: string;\n  debugFileName: boolean;\n}) {\n  const parts = debugId ? [debugId.replace(/\\s/g, '_')] : [];\n\n  if (debugFileName) {\n    const { filePath } = getFileScope();\n\n    const debugFileName = getDebugFileName(filePath);\n\n    // debugFileName could be an empty string\n    if (debugFileName) {\n      parts.unshift(debugFileName);\n    }\n  }\n\n  return parts.join('_');\n}\n\nfunction normalizeIdentifier(identifier: string) {\n  return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier;\n}\n\ninterface GenerateIdentifierOptions {\n  debugId?: string;\n  debugFileName?: boolean;\n}\n\nexport function generateIdentifier(debugId?: string): string;\nexport function generateIdentifier(options?: GenerateIdentifierOptions): string;\nexport function generateIdentifier(\n  arg?: string | GenerateIdentifierOptions,\n): string {\n  const identOption = getIdentOption();\n  const { debugId, debugFileName = true } = {\n    ...(typeof arg === 'string' ? { debugId: arg } : null),\n    ...(typeof arg === 'object' ? arg : null),\n  };\n\n  // Convert ref count to base 36 for optimal hash lengths\n  const refCount = getAndIncrementRefCounter().toString(36);\n  const { filePath, packageName } = getFileScope();\n\n  const fileScopeHash = hash(\n    packageName ? `${packageName}${filePath}` : filePath,\n  );\n\n  let identifier = `${fileScopeHash}${refCount}`;\n\n  if (identOption === 'debug') {\n    const devPrefix = getDevPrefix({ debugId, debugFileName });\n\n    if (devPrefix) {\n      identifier = `${devPrefix}__${identifier}`;\n    }\n\n    return normalizeIdentifier(identifier);\n  }\n  if (typeof identOption === 'function') {\n    identifier = identOption({\n      hash: identifier,\n      debugId,\n      filePath,\n      packageName,\n    });\n\n    if (!identifier.match(/^[A-Z_][0-9A-Z_-]+$/i)) {\n      throw new Error(\n        `Identifier function returned invalid indentifier: \"${identifier}\"`,\n      );\n    }\n\n    return identifier;\n  }\n\n  return normalizeIdentifier(identifier);\n}\n"
  },
  {
    "path": "packages/css/src/index.ts",
    "content": "import './runtimeAdapter';\n\nexport type {\n  StyleRule,\n  ComplexStyleRule,\n  GlobalStyleRule,\n  Adapter,\n  FileScope,\n  CSSProperties,\n} from './types';\nexport * from './identifier';\nexport * from './theme';\nexport * from './style';\nexport * from './vars';\nexport { createContainer } from './container';\nexport { createViewTransition } from './viewTransition';\nexport * from './layer';\n"
  },
  {
    "path": "packages/css/src/injectStyles.ts",
    "content": "import type { FileScope } from './types';\n\nconst stylesheets: Record<string, HTMLElement> = {};\n\ninterface InjectStylesOptions {\n  fileScope: FileScope;\n  css: string;\n}\nexport const injectStyles = ({ fileScope, css }: InjectStylesOptions): void => {\n  const fileScopeId = fileScope.packageName\n    ? [fileScope.packageName, fileScope.filePath].join('/')\n    : fileScope.filePath;\n\n  let stylesheet = stylesheets[fileScopeId];\n\n  if (!stylesheet) {\n    const styleEl = document.createElement('style');\n\n    if (fileScope.packageName) {\n      styleEl.setAttribute('data-package', fileScope.packageName);\n    }\n\n    styleEl.setAttribute('data-file', fileScope.filePath);\n    styleEl.setAttribute('type', 'text/css');\n    stylesheet = stylesheets[fileScopeId] = styleEl;\n    document.head.appendChild(styleEl);\n  }\n\n  stylesheet.innerHTML = css;\n};\n"
  },
  {
    "path": "packages/css/src/layer.test.ts",
    "content": "import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';\nimport * as adapter from './adapter';\nimport { endFileScope, setFileScope } from './fileScope';\nimport { globalLayer, layer } from './layer';\n\nvi.mock('./adapter', async () => ({\n  ...(await vi.importActual<typeof adapter>('./adapter')),\n  appendCss: vi.fn().mockName('appendCss'),\n}));\n\nconst appendCss = vi.mocked(adapter.appendCss);\n\nbeforeEach(() => {\n  setFileScope('path/to/file.css.ts', 'foo-package');\n});\n\nafterEach(() => {\n  endFileScope();\n  appendCss.mockClear();\n});\n\ndescribe('layer', () => {\n  it('creates a hashed layer name', () => {\n    expect(layer()).toMatchInlineSnapshot(`\"file__7a74oh0\"`);\n    expect(layer('foo')).toMatchInlineSnapshot(`\"file_foo__7a74oh1\"`);\n  });\n\n  it('creates a hashed layer name with a parent', () => {\n    expect(layer({ parent: 'papa' })).toMatchInlineSnapshot(\n      `\"papa.file__7a74oh0\"`,\n    );\n    expect(layer({ parent: 'papa' }, 'foo')).toMatchInlineSnapshot(\n      `\"papa.file_foo__7a74oh1\"`,\n    );\n  });\n\n  it('commits layers by default', () => {\n    const one = layer('one');\n    layer({ parent: one }, 'two');\n\n    expect(appendCss.mock.calls).toMatchInlineSnapshot(`\n      [\n        [\n          {\n            \"name\": \"file_one__7a74oh0\",\n            \"type\": \"layer\",\n          },\n          {\n            \"filePath\": \"path/to/file.css.ts\",\n            \"packageName\": \"foo-package\",\n          },\n        ],\n        [\n          {\n            \"name\": \"file_one__7a74oh0.file_two__7a74oh1\",\n            \"type\": \"layer\",\n          },\n          {\n            \"filePath\": \"path/to/file.css.ts\",\n            \"packageName\": \"foo-package\",\n          },\n        ],\n      ]\n    `);\n  });\n});\n\ndescribe('globalLayer', () => {\n  it('commits layers by default', () => {\n    globalLayer('one');\n    globalLayer('two');\n\n    expect(appendCss.mock.calls).toMatchInlineSnapshot(`\n      [\n        [\n          {\n            \"name\": \"one\",\n            \"type\": \"layer\",\n          },\n          {\n            \"filePath\": \"path/to/file.css.ts\",\n            \"packageName\": \"foo-package\",\n          },\n        ],\n        [\n          {\n            \"name\": \"two\",\n            \"type\": \"layer\",\n          },\n          {\n            \"filePath\": \"path/to/file.css.ts\",\n            \"packageName\": \"foo-package\",\n          },\n        ],\n      ]\n    `);\n  });\n\n  it('supports specifying a parent', () => {\n    expect(globalLayer({ parent: 'parent' }, 'myLayer')).toMatchInlineSnapshot(\n      `\"parent.myLayer\"`,\n    );\n  });\n});\n"
  },
  {
    "path": "packages/css/src/layer.ts",
    "content": "import { appendCss } from './adapter';\nimport { getFileScope } from './fileScope';\nimport { generateIdentifier } from './identifier';\n\ntype LayerOptions = {\n  parent?: string;\n};\nconst defaultLayerOptions: LayerOptions = {};\n\nconst merge = <T>(obj1: Partial<T>, obj2: Partial<T>) => ({ ...obj1, ...obj2 });\n\nconst getLayerArgs = <Options extends LayerOptions>(\n  ...args: any[]\n): [Options, string] => {\n  let options = defaultLayerOptions;\n  let debugId: string = args[0];\n\n  if (typeof args[0] === 'object') {\n    options = merge(defaultLayerOptions, args[0]);\n    debugId = args[1];\n  }\n\n  return [options as Options, debugId];\n};\n\nexport function layer(options: LayerOptions, debugId?: string): string;\nexport function layer(debugId?: string): string;\nexport function layer(...args: any[]): string {\n  const [options, debugId] = getLayerArgs<LayerOptions>(...args);\n\n  let name = generateIdentifier(debugId);\n  if (options.parent) {\n    name = `${options.parent}.${name}`;\n  }\n\n  appendCss({ type: 'layer', name }, getFileScope());\n\n  return name;\n}\n\nexport function globalLayer(options: LayerOptions, name: string): string;\nexport function globalLayer(name: string): string;\nexport function globalLayer(...args: any[]): string {\n  let [options, name] = getLayerArgs<LayerOptions>(...args);\n\n  if (options.parent) {\n    name = `${options.parent}.${name}`;\n  }\n\n  appendCss({ type: 'layer', name }, getFileScope());\n\n  return name;\n}\n"
  },
  {
    "path": "packages/css/src/recipe.ts",
    "content": "import { addFunctionSerializer } from './functionSerializer';\n\nexport {\n  /**\n   * @deprecated Use 'addFunctionSerializer' from '@vanilla-extract/css/functionSerializer'\n   */\n  addFunctionSerializer as addRecipe,\n};\n"
  },
  {
    "path": "packages/css/src/runtimeAdapter.ts",
    "content": "import type { Adapter, Composition, CSS } from './types';\nimport { injectStyles } from './injectStyles';\nimport { transformCss } from './transformCss';\nimport { setAdapterIfNotSet } from './adapter';\n\nconst localClassNames = new Set<string>();\nconst composedClassLists: Array<Composition> = [];\nlet bufferedCSSObjs: Array<CSS> = [];\n\nconst browserRuntimeAdapter: Adapter = {\n  appendCss: (cssObj: CSS) => {\n    bufferedCSSObjs.push(cssObj);\n  },\n  registerClassName: (className) => {\n    localClassNames.add(className);\n  },\n  registerComposition: (composition) => {\n    composedClassLists.push(composition);\n  },\n  markCompositionUsed: () => {},\n  onEndFileScope: (fileScope) => {\n    const css = transformCss({\n      localClassNames: Array.from(localClassNames),\n      composedClassLists,\n      cssObjs: bufferedCSSObjs,\n    }).join('\\n');\n\n    injectStyles({ fileScope, css });\n\n    bufferedCSSObjs = [];\n  },\n  getIdentOption: () =>\n    process.env.NODE_ENV === 'production' ? 'short' : 'debug',\n};\n\nif (typeof window !== 'undefined') {\n  setAdapterIfNotSet(browserRuntimeAdapter);\n}\n"
  },
  {
    "path": "packages/css/src/simplePseudos.ts",
    "content": "const simplePseudoMap = {\n  ':-moz-any-link': true,\n  ':-moz-full-screen': true,\n  ':-moz-placeholder': true,\n  ':-moz-read-only': true,\n  ':-moz-read-write': true,\n  ':-ms-fullscreen': true,\n  ':-ms-input-placeholder': true,\n  ':-webkit-any-link': true,\n  ':-webkit-full-screen': true,\n  '::-moz-color-swatch': true,\n  '::-moz-list-bullet': true,\n  '::-moz-list-number': true,\n  '::-moz-page-sequence': true,\n  '::-moz-page': true,\n  '::-moz-placeholder': true,\n  '::-moz-progress-bar': true,\n  '::-moz-range-progress': true,\n  '::-moz-range-thumb': true,\n  '::-moz-range-track': true,\n  '::-moz-scrolled-page-sequence': true,\n  '::-moz-selection': true,\n  '::-ms-backdrop': true,\n  '::-ms-browse': true,\n  '::-ms-check': true,\n  '::-ms-clear': true,\n  '::-ms-fill-lower': true,\n  '::-ms-fill-upper': true,\n  '::-ms-fill': true,\n  '::-ms-reveal': true,\n  '::-ms-thumb': true,\n  '::-ms-ticks-after': true,\n  '::-ms-ticks-before': true,\n  '::-ms-tooltip': true,\n  '::-ms-track': true,\n  '::-ms-value': true,\n  '::-webkit-backdrop': true,\n  '::-webkit-calendar-picker-indicator': true,\n  '::-webkit-inner-spin-button': true,\n  '::-webkit-input-placeholder': true,\n  '::-webkit-meter-bar': true,\n  '::-webkit-meter-even-less-good-value': true,\n  '::-webkit-meter-inner-element': true,\n  '::-webkit-meter-optimum-value': true,\n  '::-webkit-meter-suboptimum-value': true,\n  '::-webkit-outer-spin-button': true,\n  '::-webkit-progress-bar': true,\n  '::-webkit-progress-inner-element': true,\n  '::-webkit-progress-inner-value': true,\n  '::-webkit-progress-value': true,\n  '::-webkit-resizer': true,\n  '::-webkit-scrollbar-button': true,\n  '::-webkit-scrollbar-corner': true,\n  '::-webkit-scrollbar-thumb': true,\n  '::-webkit-scrollbar-track-piece': true,\n  '::-webkit-scrollbar-track': true,\n  '::-webkit-scrollbar': true,\n  '::-webkit-search-cancel-button': true,\n  '::-webkit-search-results-button': true,\n  '::-webkit-slider-runnable-track': true,\n  '::-webkit-slider-thumb': true,\n  '::after': true,\n  '::backdrop': true,\n  '::before': true,\n  '::cue': true,\n  '::file-selector-button': true,\n  '::first-letter': true,\n  '::first-line': true,\n  '::grammar-error': true,\n  '::marker': true,\n  '::placeholder': true,\n  '::selection': true,\n  '::spelling-error': true,\n  '::target-text': true,\n  '::view-transition-group': true,\n  '::view-transition-image-pair': true,\n  '::view-transition-new': true,\n  '::view-transition-old': true,\n  '::view-transition': true,\n  ':active': true,\n  ':after': true,\n  ':any-link': true,\n  ':before': true,\n  ':blank': true,\n  ':checked': true,\n  ':default': true,\n  ':defined': true,\n  ':disabled': true,\n  ':empty': true,\n  ':enabled': true,\n  ':first-child': true,\n  ':first-letter': true,\n  ':first-line': true,\n  ':first-of-type': true,\n  ':first': true,\n  ':focus-visible': true,\n  ':focus-within': true,\n  ':focus': true,\n  ':fullscreen': true,\n  ':hover': true,\n  ':in-range': true,\n  ':indeterminate': true,\n  ':invalid': true,\n  ':last-child': true,\n  ':last-of-type': true,\n  ':left': true,\n  ':link': true,\n  ':only-child': true,\n  ':only-of-type': true,\n  ':optional': true,\n  ':out-of-range': true,\n  ':placeholder-shown': true,\n  ':read-only': true,\n  ':read-write': true,\n  ':required': true,\n  ':right': true,\n  ':root': true,\n  ':scope': true,\n  ':target': true,\n  ':valid': true,\n  ':visited': true,\n} as const;\n\nexport type SimplePseudos = keyof typeof simplePseudoMap;\n\nexport const simplePseudos = Object.keys(\n  simplePseudoMap,\n) as Array<SimplePseudos>;\n\nexport const simplePseudoLookup = simplePseudoMap as Record<string, boolean>;\n"
  },
  {
    "path": "packages/css/src/style.ts",
    "content": "import cssesc from 'cssesc';\nimport dedent from 'dedent';\nimport deepmerge from 'deepmerge';\n\nimport type {\n  FontFaceRule,\n  CSSKeyframes,\n  StyleRule,\n  GlobalStyleRule,\n  ClassNames,\n  ComplexStyleRule,\n} from './types';\nimport {\n  registerClassName,\n  appendCss,\n  registerComposition,\n  markCompositionUsed,\n} from './adapter';\nimport { getFileScope, hasFileScope } from './fileScope';\nimport { generateIdentifier } from './identifier';\nimport { dedupeAndJoinClassList } from './utils';\n\nfunction composedStyle(rules: Array<StyleRule | ClassNames>, debugId?: string) {\n  const className = generateIdentifier(debugId);\n  registerClassName(className, getFileScope());\n\n  const classList = [];\n  const styleRules = [];\n\n  for (const rule of rules) {\n    if (typeof rule === 'string' || Array.isArray(rule)) {\n      classList.push(rule);\n    } else {\n      styleRules.push(rule);\n    }\n  }\n\n  let result = className;\n\n  if (classList.length > 0) {\n    result = `${className} ${dedupeAndJoinClassList(classList)}`;\n\n    registerComposition(\n      {\n        identifier: className,\n        classList: result,\n      },\n      getFileScope(),\n    );\n\n    if (styleRules.length > 0) {\n      // If there are styles attached to this composition then it is\n      // always used and should never be removed\n      markCompositionUsed(className);\n    }\n  }\n\n  if (styleRules.length > 0) {\n    const rule = deepmerge.all(styleRules, {\n      // Replace arrays rather than merging\n      arrayMerge: (_, sourceArray) => sourceArray,\n    });\n\n    appendCss({ type: 'local', selector: className, rule }, getFileScope());\n  }\n\n  return result;\n}\n\nexport function style(rule: ComplexStyleRule, debugId?: string): string {\n  if (Array.isArray(rule)) {\n    return composedStyle(rule, debugId);\n  }\n\n  const className = generateIdentifier(debugId);\n\n  registerClassName(className, getFileScope());\n  appendCss({ type: 'local', selector: className, rule }, getFileScope());\n\n  return className;\n}\n\n/**\n * @deprecated The same functionality is now provided by the 'style' function when you pass it an array\n */\nexport function composeStyles(...classNames: Array<ClassNames>): string {\n  const compose = hasFileScope() ? composedStyle : dedupeAndJoinClassList;\n\n  return compose(classNames);\n}\n\nexport function globalStyle(selector: string, rule: GlobalStyleRule): void {\n  appendCss({ type: 'global', selector, rule }, getFileScope());\n}\n\nexport function fontFace(\n  rule: FontFaceRule | FontFaceRule[],\n  debugId?: string,\n): string {\n  const fontFamily = `\"${cssesc(generateIdentifier(debugId), {\n    quotes: 'double',\n  })}\"`;\n\n  const rules = Array.isArray(rule) ? rule : [rule];\n\n  for (const singleRule of rules) {\n    if ('fontFamily' in singleRule) {\n      throw new Error(dedent`\n      This function creates and returns a hashed font-family name, so the \"fontFamily\" property should not be provided.\n    \n      If you'd like to define a globally scoped custom font, you can use the \"globalFontFace\" function instead.\n    `);\n    }\n\n    appendCss(\n      { type: 'fontFace', rule: { ...singleRule, fontFamily } },\n      getFileScope(),\n    );\n  }\n\n  return fontFamily;\n}\n\nexport function globalFontFace(\n  fontFamily: string,\n  rule: FontFaceRule | FontFaceRule[],\n): void {\n  const rules = Array.isArray(rule) ? rule : [rule];\n\n  for (const singleRule of rules) {\n    appendCss(\n      { type: 'fontFace', rule: { ...singleRule, fontFamily } },\n      getFileScope(),\n    );\n  }\n}\n\nexport function keyframes(rule: CSSKeyframes, debugId?: string): string {\n  const name = cssesc(generateIdentifier(debugId), {\n    isIdentifier: true,\n  });\n\n  appendCss({ type: 'keyframes', name, rule }, getFileScope());\n\n  return name;\n}\n\nexport function globalKeyframes(name: string, rule: CSSKeyframes): void {\n  appendCss({ type: 'keyframes', name, rule }, getFileScope());\n}\n\nexport function styleVariants<\n  StyleMap extends Record<string | number, ComplexStyleRule>,\n>(styleMap: StyleMap, debugId?: string): Record<keyof StyleMap, string>;\nexport function styleVariants<\n  Data extends Record<string | number, unknown>,\n  Key extends keyof Data,\n>(\n  data: Data,\n  mapData: (value: Data[Key], key: Key) => ComplexStyleRule,\n  debugId?: string,\n): Record<keyof Data, string>;\nexport function styleVariants(...args: any[]) {\n  if (typeof args[1] === 'function') {\n    const data = args[0];\n    const mapData = args[1];\n    const debugId = args[2];\n\n    const classMap: Record<string | number, string> = {};\n    for (const key in data) {\n      classMap[key] = style(\n        mapData(data[key], key),\n        debugId ? `${debugId}_${key}` : key,\n      );\n    }\n\n    return classMap;\n  }\n\n  const styleMap = args[0];\n  const debugId = args[1];\n\n  const classMap: Record<string | number, string> = {};\n  for (const key in styleMap) {\n    classMap[key] = style(styleMap[key], debugId ? `${debugId}_${key}` : key);\n  }\n\n  return classMap;\n}\n"
  },
  {
    "path": "packages/css/src/theme.ts",
    "content": "import type { Contract, MapLeafNodes } from '@vanilla-extract/private';\nimport type { GlobalStyleRule, Resolve, ThemeVars, Tokens } from './types';\nimport { appendCss, registerClassName } from './adapter';\nimport { getFileScope } from './fileScope';\nimport { generateIdentifier } from './identifier';\nimport { createThemeContract, assignVars } from './vars';\n\ntype WithOptionalLayer<T extends Tokens> = T & {\n  '@layer'?: string;\n};\n\ntype WithoutLayer<T> = Omit<T, '@layer'>;\n\nexport function createGlobalTheme<ThemeTokens extends Tokens>(\n  selector: string,\n  tokens: WithOptionalLayer<ThemeTokens>,\n): Resolve<WithoutLayer<ThemeVars<ThemeTokens>>>;\nexport function createGlobalTheme<ThemeContract extends Contract>(\n  selector: string,\n  themeContract: ThemeContract,\n  tokens: WithOptionalLayer<MapLeafNodes<ThemeContract, string>>,\n): void;\nexport function createGlobalTheme(\n  selector: string,\n  arg2: any,\n  arg3?: any,\n): any {\n  const themeContractProvided = Boolean(arg3);\n\n  const tokenArg = (\n    themeContractProvided ? arg3 : arg2\n  ) as WithOptionalLayer<Tokens>;\n\n  const { layerName, tokens } = extractLayerFromTokens(tokenArg);\n\n  const themeContract = themeContractProvided\n    ? (arg2 as ThemeVars<any>)\n    : createThemeContract(tokens);\n\n  let rule: GlobalStyleRule = {\n    vars: assignVars(themeContract, tokens),\n  };\n\n  if (layerName) {\n    rule = {\n      '@layer': {\n        [layerName]: rule,\n      },\n    };\n  }\n\n  appendCss(\n    {\n      type: 'global',\n      selector: selector,\n      rule,\n    },\n    getFileScope(),\n  );\n\n  if (!themeContractProvided) {\n    return themeContract;\n  }\n}\n\nexport function createTheme<ThemeContract extends Contract>(\n  themeContract: ThemeContract,\n  tokens: WithOptionalLayer<MapLeafNodes<ThemeContract, string>>,\n  debugId?: string,\n): string;\nexport function createTheme<ThemeTokens extends Tokens>(\n  tokens: WithOptionalLayer<ThemeTokens>,\n  debugId?: string,\n): [className: string, vars: Resolve<WithoutLayer<ThemeVars<ThemeTokens>>>];\nexport function createTheme(arg1: any, arg2?: any, arg3?: string): any {\n  const themeClassName = generateIdentifier(\n    typeof arg2 === 'object' ? arg3 : arg2,\n  );\n\n  registerClassName(themeClassName, getFileScope());\n\n  const vars =\n    typeof arg2 === 'object'\n      ? createGlobalTheme(themeClassName, arg1, arg2)\n      : createGlobalTheme(themeClassName, arg1);\n\n  return vars ? [themeClassName, vars] : themeClassName;\n}\n\nfunction extractLayerFromTokens(\n  tokens: WithOptionalLayer<MapLeafNodes<any, string>>,\n): {\n  layerName?: string;\n  tokens: MapLeafNodes<any, string>;\n} {\n  if ('@layer' in tokens) {\n    const { '@layer': layerName, ...rest } = tokens;\n\n    return { layerName, tokens: rest };\n  }\n\n  return { tokens };\n}\n"
  },
  {
    "path": "packages/css/src/transformCss.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { setFileScope, endFileScope } from './fileScope';\nimport { createVar } from './vars';\nimport { transformCss } from './transformCss';\nimport { style } from './style';\n\nsetFileScope('test');\n\nconst testVar = createVar();\nconst testPropertyVar = createVar(\n  {\n    syntax: '<angle>',\n    inherits: false,\n    initialValue: '0deg',\n  },\n  'test-property',\n);\nconst style1 = style({});\nconst style2 = style({});\n\n// remove quotes around the snapshot\nexpect.addSnapshotSerializer({\n  test: (val) => typeof val === 'string',\n  print: (val) => (val as string).trim(),\n});\n\ndescribe('transformCss', () => {\n  it('should escape class names', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['test_1/2_className', '[test_with_brackets]'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'test_1/2_className',\n            rule: {\n              color: 'red',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'green',\n                },\n                'screen and (min-width: 1000px)': {\n                  color: 'purple',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '[test_with_brackets]',\n            rule: {\n              color: 'blue',\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .test_1\\\\/2_className {\n        color: red;\n      }\n      .\\\\[test_with_brackets\\\\] {\n        color: blue;\n      }\n      @media screen and (min-width: 700px) {\n        .test_1\\\\/2_className {\n          color: green;\n        }\n      }\n      @media screen and (min-width: 1000px) {\n        .test_1\\\\/2_className {\n          color: purple;\n        }\n      }\n    `);\n  });\n\n  it('should handle media queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'red',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'green',\n                },\n                'screen and (min-width: 1000px)': {\n                  color: 'purple',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass {\n          color: green;\n        }\n      }\n      @media screen and (min-width: 1000px) {\n        .testClass {\n          color: purple;\n        }\n      }\n    `);\n  });\n\n  it('should handle media queries inside selectors', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'red',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'yellow',\n                },\n                'screen and (min-width: 1000px)': {\n                  color: 'green',\n                },\n              },\n              selectors: {\n                'body &': {\n                  '@media': {\n                    'screen and (min-width: 700px)': {\n                      color: 'green',\n                    },\n                    'screen and (min-width: 1000px)': {\n                      color: 'purple',\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass {\n          color: yellow;\n        }\n        body .testClass {\n          color: green;\n        }\n      }\n      @media screen and (min-width: 1000px) {\n        .testClass {\n          color: green;\n        }\n        body .testClass {\n          color: purple;\n        }\n      }\n    `);\n  });\n\n  it('should merge media queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'green',\n              '@media': {\n                'screen and (min-width: 1000px)': {\n                  color: 'red',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherClass',\n            rule: {\n              color: 'purple',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'red',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherOtherClass',\n            rule: {\n              color: 'purple',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'green',\n                },\n                'screen and (min-width: 1000px)': {\n                  color: 'yellow',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: green;\n      }\n      .otherClass {\n        color: purple;\n      }\n      .otherOtherClass {\n        color: purple;\n      }\n      @media screen and (min-width: 700px) {\n        .otherClass {\n          color: red;\n        }\n        .otherOtherClass {\n          color: green;\n        }\n      }\n      @media screen and (min-width: 1000px) {\n        .testClass {\n          color: red;\n        }\n        .otherOtherClass {\n          color: yellow;\n        }\n      }\n    `);\n  });\n\n  it('should not merge media queries if not safe to do so', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 1000px)': {\n                  color: 'red',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'yellow',\n                },\n                'screen and (min-width: 1000px)': {\n                  color: 'purple',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherOtherClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 600px)': {\n                  color: 'yellow',\n                },\n                'screen and (min-width: 1000px)': {\n                  color: 'purple',\n                },\n                'screen and (min-width: 700px)': {\n                  color: 'purple',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherOtherOtherClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 600px)': {\n                  color: 'yellow',\n                },\n                'screen and (min-width: 700px)': {\n                  color: 'purple',\n                },\n                'screen and (min-width: 1700px)': {\n                  color: 'purple',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @media screen and (min-width: 700px) {\n        .otherClass {\n          color: yellow;\n        }\n      }\n      @media screen and (min-width: 1000px) {\n        .testClass {\n          color: red;\n        }\n        .otherClass {\n          color: purple;\n        }\n      }\n      @media screen and (min-width: 600px) {\n        .otherOtherClass {\n          color: yellow;\n        }\n        .otherOtherOtherClass {\n          color: yellow;\n        }\n      }\n      @media screen and (min-width: 1000px) {\n        .otherOtherClass {\n          color: purple;\n        }\n      }\n      @media screen and (min-width: 700px) {\n        .otherOtherClass {\n          color: purple;\n        }\n        .otherOtherOtherClass {\n          color: purple;\n        }\n      }\n      @media screen and (min-width: 1700px) {\n        .otherOtherOtherClass {\n          color: purple;\n        }\n      }\n    `);\n  });\n\n  it('should not merge nested media queries if not safe to do so', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@supports': {\n                '(display: grid)': {\n                  '@media': {\n                    'screen and (min-width: 1000px)': {\n                      color: 'red',\n                    },\n                  },\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherClass',\n            rule: {\n              '@supports': {\n                '(display: grid)': {\n                  '@media': {\n                    'screen and (min-width: 700px)': {\n                      color: 'yellow',\n                    },\n                    'screen and (min-width: 1000px)': {\n                      color: 'purple',\n                    },\n                  },\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherOtherClass',\n            rule: {\n              '@supports': {\n                '(display: grid)': {\n                  '@media': {\n                    'screen and (min-width: 600px)': {\n                      color: 'yellow',\n                    },\n                    'screen and (min-width: 1000px)': {\n                      color: 'purple',\n                    },\n                    'screen and (min-width: 700px)': {\n                      color: 'purple',\n                    },\n                  },\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherOtherOtherClass',\n            rule: {\n              '@supports': {\n                '(display: grid)': {\n                  '@media': {\n                    'screen and (min-width: 600px)': {\n                      color: 'yellow',\n                    },\n                    'screen and (min-width: 700px)': {\n                      color: 'purple',\n                    },\n                    'screen and (min-width: 1700px)': {\n                      color: 'purple',\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @supports (display: grid) {\n        @media screen and (min-width: 700px) {\n          .otherClass {\n            color: yellow;\n          }\n        }\n        @media screen and (min-width: 1000px) {\n          .testClass {\n            color: red;\n          }\n          .otherClass {\n            color: purple;\n          }\n        }\n      }\n      @supports (display: grid) {\n        @media screen and (min-width: 600px) {\n          .otherOtherClass {\n            color: yellow;\n          }\n          .otherOtherOtherClass {\n            color: yellow;\n          }\n        }\n        @media screen and (min-width: 1000px) {\n          .otherOtherClass {\n            color: purple;\n          }\n        }\n        @media screen and (min-width: 700px) {\n          .otherOtherClass {\n            color: purple;\n          }\n          .otherOtherOtherClass {\n            color: purple;\n          }\n        }\n        @media screen and (min-width: 1700px) {\n          .otherOtherOtherClass {\n            color: purple;\n          }\n        }\n      }\n    `);\n  });\n\n  it('should merge nested media queries if safe to do so', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 1024px)': {\n                  padding: '50px',\n                },\n              },\n            },\n          },\n\n          {\n            type: 'local',\n            selector: '.otherClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 1200px)': {\n                  color: 'red',\n                },\n              },\n            },\n          },\n\n          {\n            type: 'local',\n            selector: '.otherOtherClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 768px)': {\n                  background: 'blue',\n                },\n\n                'screen and (min-width: 1024px)': {\n                  background: 'green',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @media screen and (min-width: 768px) {\n        .otherOtherClass {\n          background: blue;\n        }\n      }\n      @media screen and (min-width: 1024px) {\n        .testClass {\n          padding: 50px;\n        }\n        .otherOtherClass {\n          background: green;\n        }\n      }\n      @media screen and (min-width: 1200px) {\n        .otherClass {\n          color: red;\n        }\n      }\n    `);\n  });\n\n  it('should merge declarations with the same selector when merging conditional rules', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: '.testClass',\n            rule: {\n              '@layer': {\n                myLayer: {\n                  color: 'red',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.testClass',\n            rule: {\n              '@layer': {\n                myLayer: {\n                  fontSize: '32px',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer myLayer;\n      @layer myLayer {\n        .testClass {\n          color: red;\n          font-size: 32px;\n        }\n      }\n    `);\n  });\n\n  it('should handle simple pseudos', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'red',\n              ':hover': {\n                color: 'blue',\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n      }\n      .testClass:hover {\n        color: blue;\n      }\n    `);\n  });\n\n  it('should handle property fallbacks', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: ['red', 'blue'],\n              ':hover': {\n                color: ['blue', 'red', 'yellow'],\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n        color: blue;\n      }\n      .testClass:hover {\n        color: blue;\n        color: red;\n        color: yellow;\n      }\n    `);\n  });\n\n  it('should dashify properties but leave custom properties', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              backgroundColor: 'green',\n              WebkitAlignContent: 'end',\n              vars: {\n                '--myCustomVar': '10px',\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        --myCustomVar: 10px;\n        background-color: green;\n        -webkit-align-content: end;\n      }\n    `);\n  });\n\n  it('should handle blank content', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              content: '',\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        content: \"\";\n      }\n    `);\n  });\n\n  it('should add quotes to custom content values', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              content: 'hello',\n              selectors: {\n                '&': { content: 'there' },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        content: \"hello\";\n      }\n      .testClass {\n        content: \"there\";\n      }\n    `);\n  });\n\n  it('should handle content with fallbacks', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              content: ['hello', 'there'],\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        content: \"hello\";\n        content: \"there\";\n      }\n    `);\n  });\n\n  it('should not add quotes to content that already has quotes', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              content: \"'hello there'\",\n              selectors: {\n                '&': { content: '\"hello there\"' },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        content: 'hello there';\n      }\n      .testClass {\n        content: \"hello there\";\n      }\n    `);\n  });\n\n  it('should not add quotes to meaningful content values (examples from mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/content)', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              content: 'normal',\n              selectors: {\n                '._01 &': { content: 'none' },\n                '._02 &': { content: 'url(\"http://www.example.com/test.png\")' },\n                '._03 &': { content: 'linear-gradient(#e66465, #9198e5)' },\n                '._04 &': {\n                  content: 'image-set(\"image1x.png\" 1x, \"image2x.png\" 2x)',\n                },\n                '._05 &': {\n                  content:\n                    'url(\"http://www.example.com/test.png\") / \"This is the alt text\"',\n                },\n                '._06 &': { content: '\"prefix\"' },\n                '._07 &': { content: 'counter(chapter_counter)' },\n                '._08 &': { content: 'counter(chapter_counter, upper-roman)' },\n                '._09 &': { content: 'counters(section_counter, \".\")' },\n                '._10 &': {\n                  content:\n                    'counters(section_counter, \".\", decimal-leading-zero)',\n                },\n                '._11 &': { content: 'attr(value string)' },\n                '._12 &': { content: 'open-quote' },\n                '._13 &': { content: 'close-quote' },\n                '._14 &': { content: 'no-open-quote' },\n                '._15 &': { content: 'no-close-quote' },\n                '._16 &': { content: 'open-quote counter(chapter_counter)' },\n                '._17 &': { content: 'inherit' },\n                '._18 &': { content: 'initial' },\n                '._19 &': { content: 'revert' },\n                '._20 &': { content: 'unset' },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        content: normal;\n      }\n      ._01 .testClass {\n        content: none;\n      }\n      ._02 .testClass {\n        content: url(\"http://www.example.com/test.png\");\n      }\n      ._03 .testClass {\n        content: linear-gradient(#e66465, #9198e5);\n      }\n      ._04 .testClass {\n        content: image-set(\"image1x.png\" 1x, \"image2x.png\" 2x);\n      }\n      ._05 .testClass {\n        content: url(\"http://www.example.com/test.png\") / \"This is the alt text\";\n      }\n      ._06 .testClass {\n        content: \"prefix\";\n      }\n      ._07 .testClass {\n        content: counter(chapter_counter);\n      }\n      ._08 .testClass {\n        content: counter(chapter_counter, upper-roman);\n      }\n      ._09 .testClass {\n        content: counters(section_counter, \".\");\n      }\n      ._10 .testClass {\n        content: counters(section_counter, \".\", decimal-leading-zero);\n      }\n      ._11 .testClass {\n        content: attr(value string);\n      }\n      ._12 .testClass {\n        content: open-quote;\n      }\n      ._13 .testClass {\n        content: close-quote;\n      }\n      ._14 .testClass {\n        content: no-open-quote;\n      }\n      ._15 .testClass {\n        content: no-close-quote;\n      }\n      ._16 .testClass {\n        content: open-quote counter(chapter_counter);\n      }\n      ._17 .testClass {\n        content: inherit;\n      }\n      ._18 .testClass {\n        content: initial;\n      }\n      ._19 .testClass {\n        content: revert;\n      }\n      ._20 .testClass {\n        content: unset;\n      }\n    `);\n  });\n\n  it('should handle simple pseudos within conditionals', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 500px)': {\n                  color: 'red',\n                  ':hover': {\n                    color: 'blue',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @media screen and (min-width: 500px) {\n        .testClass {\n          color: red;\n        }\n        .testClass:hover {\n          color: blue;\n        }\n      }\n    `);\n  });\n\n  it('should honour input order for simple pseudos', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'red',\n              ':link': {\n                color: 'orange',\n              },\n              ':visited': {\n                color: 'yellow',\n              },\n              ':hover': {\n                color: 'green',\n              },\n              ':active': {\n                color: 'blue',\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n      }\n      .testClass:link {\n        color: orange;\n      }\n      .testClass:visited {\n        color: yellow;\n      }\n      .testClass:hover {\n        color: green;\n      }\n      .testClass:active {\n        color: blue;\n      }\n    `);\n  });\n\n  it('should handle complex selectors', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass', 'parentClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'red',\n              selectors: {\n                '&:nth-child(3)': {\n                  color: 'blue',\n                },\n                'parentClass > div > span ~ &.someGlobalClass:hover': {\n                  background: 'green',\n                },\n                'parentClass&': {\n                  background: 'black',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n      }\n      .testClass:nth-child(3) {\n        color: blue;\n      }\n      .parentClass > div > span ~ .testClass.someGlobalClass:hover {\n        background: green;\n      }\n      .parentClass.testClass {\n        background: black;\n      }\n    `);\n  });\n\n  it('should handle getter selectors', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass', 'parentClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'red',\n              get selectors() {\n                return {\n                  '&:nth-child(3)': {\n                    color: 'blue',\n                  },\n                  'parentClass > div > span ~ &.someGlobalClass:hover': {\n                    background: 'green',\n                  },\n                  'parentClass&': {\n                    background: 'black',\n                  },\n                };\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n      }\n      .testClass:nth-child(3) {\n        color: blue;\n      }\n      .parentClass > div > span ~ .testClass.someGlobalClass:hover {\n        background: green;\n      }\n      .parentClass.testClass {\n        background: black;\n      }\n    `);\n  });\n\n  it('should handle complex selectors within media queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'red',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  selectors: {\n                    '&:nth-child(3)': {\n                      color: 'blue',\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: red;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass:nth-child(3) {\n          color: blue;\n        }\n      }\n    `);\n  });\n\n  it('should handle @supports queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'flex',\n              '@supports': {\n                '(display: grid)': {\n                  display: 'grid',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        display: flex;\n      }\n      @supports (display: grid) {\n        .testClass {\n          display: grid;\n        }\n      }\n    `);\n  });\n\n  it('should handle @container queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'flex',\n              containerName: 'sidebar',\n              '@container': {\n                'sidebar (min-width: 700px)': {\n                  display: 'grid',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        display: flex;\n        container-name: sidebar;\n      }\n      @container sidebar (min-width: 700px) {\n        .testClass {\n          display: grid;\n        }\n      }\n    `);\n  });\n\n  it('should handle container queries inside selectors', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              containerName: 'myContainer',\n              '@container': {\n                'myContainer (min-width: 700px)': {\n                  color: 'red',\n                },\n              },\n              selectors: {\n                ['h1 &']: {\n                  '@container': {\n                    'myContainer (min-width: 700px)': {\n                      color: 'blue',\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        container-name: myContainer;\n      }\n      @container myContainer (min-width: 700px) {\n        .testClass {\n          color: red;\n        }\n        h1 .testClass {\n          color: blue;\n        }\n      }\n    `);\n  });\n\n  it('should handle @layer declarations', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'layer',\n            name: 'reset',\n          },\n          {\n            type: 'layer',\n            name: 'foo.bar.baz',\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer reset;\n      @layer foo.bar.baz;\n    `);\n  });\n\n  it('should hoist @layer declarations', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'flex',\n              '@layer': {\n                layer1: {\n                  display: 'grid',\n                },\n              },\n            },\n          },\n          {\n            type: 'layer',\n            name: 'layer1',\n          },\n          {\n            type: 'layer',\n            name: 'layer2',\n          },\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'flex',\n              '@layer': {\n                layer2: {\n                  display: 'grid',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer layer1;\n      @layer layer2;\n      .testClass {\n        display: flex;\n      }\n      .testClass {\n        display: flex;\n      }\n      @layer layer1 {\n        .testClass {\n          display: grid;\n        }\n      }\n      @layer layer2 {\n        .testClass {\n          display: grid;\n        }\n      }\n    `);\n  });\n\n  it('should handle conditional declaration of layers', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['link', 'pink'],\n        cssObjs: [\n          { type: 'layer', name: 'lib' },\n          { type: 'layer', name: 'lib.base' },\n          {\n            type: 'global',\n            selector: 'a',\n            rule: {\n              '@media': {\n                'screen and (min-width: 600px)': {\n                  '@layer': {\n                    'lib.typography': {\n                      color: 'green',\n                    },\n                  },\n                },\n              },\n              '@layer': {\n                'lib.base': {\n                  fontWeight: 800,\n                  color: 'red',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: 'link',\n            rule: {\n              '@layer': {\n                'lib.base': {\n                  color: 'blue',\n                },\n              },\n            },\n          },\n          { type: 'layer', name: 'lib.utilities' },\n          {\n            type: 'local',\n            selector: 'pink',\n            rule: {\n              '@layer': {\n                'lib.utilities': {\n                  color: 'hotpink',\n                },\n              },\n            },\n          },\n          { type: 'layer', name: 'lib.typography' },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer lib;\n      @layer lib.base;\n      @media screen and (min-width: 600px) {\n        @layer lib.typography;\n      }\n      @layer lib.utilities;\n      @layer lib.typography;\n      @layer lib.base {\n        a {\n          font-weight: 800;\n          color: red;\n        }\n        .link {\n          color: blue;\n        }\n      }\n      @media screen and (min-width: 600px) {\n        @layer lib.typography {\n          a {\n            color: green;\n          }\n        }\n      }\n      @layer lib.utilities {\n        .pink {\n          color: hotpink;\n        }\n      }\n    `);\n  });\n\n  it('should merge styles from the same layer', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['link', 'pink'],\n        cssObjs: [\n          {\n            type: 'global',\n            selector: 'a',\n            rule: {\n              '@layer': {\n                lib: {\n                  fontWeight: 800,\n                  color: 'red',\n                  '@media': {\n                    'screen and (min-width: 600px)': {\n                      color: 'green',\n                    },\n                  },\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: 'link',\n            rule: {\n              '@layer': {\n                lib: {\n                  color: 'blue',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: 'pink',\n            rule: {\n              '@layer': {\n                lib: {\n                  color: 'hotpink',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer lib;\n      @layer lib {\n        a {\n          font-weight: 800;\n          color: red;\n        }\n        .link {\n          color: blue;\n        }\n        .pink {\n          color: hotpink;\n        }\n        @media screen and (min-width: 600px) {\n          a {\n            color: green;\n          }\n        }\n      }\n    `);\n  });\n\n  it('should bailout merging for nested layers', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass', 'otherTestClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@layer': {\n                layerA: {\n                  '@media': {\n                    '(min-width: 700px)': {\n                      display: 'grid',\n                    },\n                  },\n                },\n              },\n            },\n          },\n          {\n            type: 'layer',\n            name: 'layerA.layerA1',\n          },\n          {\n            type: 'layer',\n            name: 'layerA.layerA2',\n          },\n          {\n            type: 'local',\n            selector: 'otherTestClass',\n            rule: {\n              '@layer': {\n                layerA: {\n                  '@media': {\n                    '(min-width: 700px)': {\n                      '@layer': {\n                        layerA2: {\n                          display: 'block',\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer layerA;\n      @layer layerA.layerA1;\n      @layer layerA.layerA2;\n      @layer layerA {\n        @media (min-width: 700px) {\n          @layer layerA2;\n        }\n      }\n      @layer layerA {\n        @media (min-width: 700px) {\n          .testClass {\n            display: grid;\n          }\n          @layer layerA2 {\n            .otherTestClass {\n              display: block;\n            }\n          }\n        }\n      }\n    `);\n  });\n\n  it('should handle @layer rules with complex selectors and simple pseudos', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@layer': {\n                foo: {\n                  ':hover': {\n                    color: 'purple',\n                  },\n                  selectors: {\n                    '&:nth-child(3)': {\n                      color: 'blue',\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer foo;\n      @layer foo {\n        .testClass:hover {\n          color: purple;\n        }\n        .testClass:nth-child(3) {\n          color: blue;\n        }\n      }\n    `);\n  });\n\n  it('should handle nested @supports, @media and @container queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'flex',\n              '@supports': {\n                '(display: grid)': {\n                  backgroundColor: 'yellow',\n                  '@media': {\n                    'screen and (min-width: 700px)': {\n                      display: 'grid',\n                      '@container': {\n                        'sidebar (min-width: 700px)': {\n                          display: 'grid',\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'green',\n                  '@supports': {\n                    '(display: grid)': {\n                      borderColor: 'blue',\n                      '@container': {\n                        'sidebar (min-width: 700px)': {\n                          display: 'grid',\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        display: flex;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass {\n          color: green;\n        }\n        @supports (display: grid) {\n          .testClass {\n            border-color: blue;\n          }\n          @container sidebar (min-width: 700px) {\n            .testClass {\n              display: grid;\n            }\n          }\n        }\n      }\n      @supports (display: grid) {\n        .testClass {\n          background-color: yellow;\n        }\n        @media screen and (min-width: 700px) {\n          .testClass {\n            display: grid;\n          }\n          @container sidebar (min-width: 700px) {\n            .testClass {\n              display: grid;\n            }\n          }\n        }\n      }\n    `);\n  });\n\n  it('should merge nested @supports, @media and @container queries when safe to do so', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass', 'otherClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  '@supports': {\n                    '(display: grid)': {\n                      borderColor: 'blue',\n                      '@container': {\n                        'sidebar (min-width: 700px)': {\n                          display: 'grid',\n                        },\n\n                        'sidebar (min-width: 800px)': {\n                          display: 'grid',\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: 'otherClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  '@supports': {\n                    '(display: grid)': {\n                      borderColor: 'blue',\n                      '@container': {\n                        'sidebar (min-width: 700px)': {\n                          display: 'grid',\n                        },\n\n                        'sidebar (min-width: 800px)': {\n                          display: 'grid',\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @media screen and (min-width: 700px) {\n        @supports (display: grid) {\n          .testClass {\n            border-color: blue;\n          }\n          .otherClass {\n            border-color: blue;\n          }\n          @container sidebar (min-width: 700px) {\n            .testClass {\n              display: grid;\n            }\n            .otherClass {\n              display: grid;\n            }\n          }\n          @container sidebar (min-width: 800px) {\n            .testClass {\n              display: grid;\n            }\n            .otherClass {\n              display: grid;\n            }\n          }\n        }\n      }\n    `);\n  });\n\n  it('should not merge nested @supports, @media and @container queries when not safe to do so', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass', 'otherClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  '@supports': {\n                    '(display: grid)': {\n                      borderColor: 'blue',\n                      '@container': {\n                        'sidebar (min-width: 700px)': {\n                          display: 'grid',\n                        },\n\n                        'sidebar (min-width: 800px)': {\n                          display: 'grid',\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: 'otherClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  '@supports': {\n                    '(display: grid)': {\n                      borderColor: 'blue',\n                      '@container': {\n                        'sidebar (min-width: 800px)': {\n                          display: 'grid',\n                        },\n\n                        'sidebar (min-width: 700px)': {\n                          display: 'grid',\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @media screen and (min-width: 700px) {\n        @supports (display: grid) {\n          .testClass {\n            border-color: blue;\n          }\n          @container sidebar (min-width: 700px) {\n            .testClass {\n              display: grid;\n            }\n          }\n          @container sidebar (min-width: 800px) {\n            .testClass {\n              display: grid;\n            }\n          }\n        }\n      }\n      @media screen and (min-width: 700px) {\n        @supports (display: grid) {\n          .otherClass {\n            border-color: blue;\n          }\n          @container sidebar (min-width: 800px) {\n            .otherClass {\n              display: grid;\n            }\n          }\n          @container sidebar (min-width: 700px) {\n            .otherClass {\n              display: grid;\n            }\n          }\n        }\n      }\n    `);\n  });\n\n  it('should handle @supports negation queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'grid',\n              '@supports': {\n                'not (display: grid)': {\n                  display: 'flex',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        display: grid;\n      }\n      @supports not (display: grid) {\n        .testClass {\n          display: flex;\n        }\n      }\n    `);\n  });\n\n  it('should handle animations', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'keyframes',\n            name: 'myAnimation',\n            rule: {\n              from: {\n                opacity: 0,\n                content: 'none',\n                padding: 0,\n              },\n              to: {\n                opacity: 1,\n                content: 'foo',\n                padding: 10,\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @keyframes myAnimation {\n        from {\n          content: none;\n          opacity: 0;\n          padding: 0;\n        }\n        to {\n          content: \"foo\";\n          opacity: 1;\n          padding: 10px;\n        }\n      }\n    `);\n  });\n\n  it('should handle animations with vars', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'keyframes',\n            name: 'myAnimation',\n            rule: {\n              from: {\n                vars: {\n                  '--my-var': 'red',\n                  [testVar]: 'green',\n                },\n              },\n              to: {\n                vars: {\n                  '--my-var': 'orange',\n                  [testVar]: 'blue',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @keyframes myAnimation {\n        from {\n          --my-var: red;\n          --skkcyc0: green;\n        }\n        to {\n          --my-var: orange;\n          --skkcyc0: blue;\n        }\n      }\n    `);\n  });\n\n  it('should handle font face', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [],\n        cssObjs: [\n          {\n            type: 'fontFace',\n            rule: {\n              src: 'local(\"Comic Sans MS\")',\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @font-face {\n        src: local(\"Comic Sans MS\");\n      }\n    `);\n  });\n\n  it('should handle multiple font faces of the same family', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [],\n        cssObjs: [\n          {\n            type: 'fontFace',\n            rule: {\n              fontFamily: 'MyFont',\n              src: 'local(\"Helvetica\")',\n            },\n          },\n          {\n            type: 'fontFace',\n            rule: {\n              fontFamily: 'MyFont',\n              src: 'local(\"Helvetica-Bold\")',\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @font-face {\n        font-family: MyFont;\n        src: local(\"Helvetica\");\n      }\n      @font-face {\n        font-family: MyFont;\n        src: local(\"Helvetica-Bold\");\n      }\n    `);\n  });\n\n  it('should handle multiple font faces', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [],\n        cssObjs: [\n          {\n            type: 'fontFace',\n            rule: {\n              fontFamily: 'MyFont1',\n              src: 'local(\"Comic Sans MS\")',\n            },\n          },\n          {\n            type: 'fontFace',\n            rule: {\n              fontFamily: 'MyFont2',\n              src: 'local(\"Impact\")',\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @font-face {\n        font-family: MyFont1;\n        src: local(\"Comic Sans MS\");\n      }\n      @font-face {\n        font-family: MyFont2;\n        src: local(\"Impact\");\n      }\n    `);\n  });\n\n  it('should not create empty rules', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'green',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @media screen and (min-width: 700px) {\n        .testClass {\n          color: green;\n        }\n      }\n    `);\n  });\n\n  it('should lower all conditionals styles', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'hotpink',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'green',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherClass',\n            rule: {\n              color: 'indigo',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'red',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: '.otherOtherClass',\n            rule: {\n              color: 'lightcyan',\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: hotpink;\n      }\n      .otherClass {\n        color: indigo;\n      }\n      .otherOtherClass {\n        color: lightcyan;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass {\n          color: green;\n        }\n        .otherClass {\n          color: red;\n        }\n      }\n    `);\n  });\n\n  it('should handle simple css properties', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'block',\n              vars: {\n                '--my-var': 'red',\n                [testVar]: 'green',\n              },\n              selectors: {\n                '&:nth-child(3)': {\n                  vars: {\n                    '--my-var': 'orange',\n                    [testVar]: 'black',\n                  },\n                },\n              },\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  vars: {\n                    '--my-var': 'yellow',\n                    [testVar]: 'blue',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        --my-var: red;\n        --skkcyc0: green;\n        display: block;\n      }\n      .testClass:nth-child(3) {\n        --my-var: orange;\n        --skkcyc0: black;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass {\n          --my-var: yellow;\n          --skkcyc0: blue;\n        }\n      }\n    `);\n  });\n\n  it('should handle complicated css properties', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'block',\n              vars: {\n                '--my-var': 'red',\n                [testPropertyVar]: '10deg',\n              },\n              selectors: {\n                '&:nth-child(3)': {\n                  vars: {\n                    '--my-var': 'orange',\n                    [testPropertyVar]: '20deg',\n                  },\n                },\n              },\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  vars: {\n                    '--my-var': 'yellow',\n                    [testPropertyVar]: '50deg',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        --my-var: red;\n        --test-property__skkcyc1: 10deg;\n        display: block;\n      }\n      .testClass:nth-child(3) {\n        --my-var: orange;\n        --test-property__skkcyc1: 20deg;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass {\n          --my-var: yellow;\n          --test-property__skkcyc1: 50deg;\n        }\n      }\n    `);\n  });\n\n  it('should cast property values to pixels when relevant', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'block',\n              paddingTop: 10,\n              lineHeight: 20,\n              vars: {\n                '--my-var': '12',\n                [testVar]: '24',\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        --my-var: 12;\n        --skkcyc0: 24;\n        display: block;\n        padding-top: 10px;\n        line-height: 20;\n      }\n    `);\n  });\n\n  it('should allow valid global styles', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'global',\n            selector: 'testClass > div',\n            rule: {\n              color: 'red',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  color: 'blue',\n                },\n              },\n              '@supports': {\n                'not (display: grid)': {\n                  display: 'flex',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass > div {\n        color: red;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass > div {\n          color: blue;\n        }\n      }\n      @supports not (display: grid) {\n        .testClass > div {\n          display: flex;\n        }\n      }\n    `);\n  });\n\n  it('should not allow simple pseudos on global styles', () => {\n    expect(() =>\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [],\n        cssObjs: [\n          {\n            type: 'global',\n            selector: 'div',\n            rule: {\n              // @ts-expect-error\n              ':hover': {\n                color: 'red',\n              },\n            },\n          },\n        ],\n      }),\n    ).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Simple pseudos are not valid in \"globalStyle\"]`,\n    );\n  });\n\n  it('should not allow selectors on global styles', () => {\n    expect(() =>\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [],\n        cssObjs: [\n          {\n            type: 'global',\n            selector: 'div',\n            rule: {\n              // @ts-expect-error\n              selectors: {\n                '& > span': {\n                  color: 'red',\n                },\n              },\n            },\n          },\n        ],\n      }),\n    ).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Selectors are not allowed within \"globalStyle\"]`,\n    );\n  });\n\n  it('should map composed class lists into single identifiers', () => {\n    const composedStyle1 = 'composedStyle1 pd-sm dblock border-red';\n    const composedStyle2 = `composedStyle2 background-red ${composedStyle1}`;\n\n    expect(\n      transformCss({\n        composedClassLists: [\n          { identifier: 'composedStyle1', classList: composedStyle1 },\n          {\n            identifier: 'composedStyle2',\n            classList: composedStyle2,\n          },\n        ],\n\n        localClassNames: ['composedStyle1', 'composedStyle2'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: `${composedStyle1} button, body > ${composedStyle2}`,\n            rule: {\n              display: 'block',\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .composedStyle1 button, body > .composedStyle2 {\n        display: block;\n      }\n    `);\n  });\n\n  it('should handle the pseudo-elements with params', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              selectors: {\n                '&::part(external-wrapper)': {\n                  display: 'block',\n                },\n                '&::slotted(span)': {\n                  display: 'block',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass::part(external-wrapper) {\n        display: block;\n      }\n      .testClass::slotted(span) {\n        display: block;\n      }\n    `);\n  });\n\n  it('should handle multiple references to the same locally scoped selector', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [style1, style2, '_1g1ptzo1', '_1g1ptzo10'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: style1,\n            rule: {\n              selectors: {\n                [`${style2} &:before, ${style2} &:after`]: {\n                  background: 'black',\n                },\n                [`_1g1ptzo1_1g1ptzo10 ${style1}`]: {\n                  background: 'blue',\n                },\n                [`_1g1ptzo10_1g1ptzo1 ${style1}`]: {\n                  background: 'blue',\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .skkcyc3 .skkcyc2:before, .skkcyc3 .skkcyc2:after {\n        background: black;\n      }\n      ._1g1ptzo1._1g1ptzo10 .skkcyc2 {\n        background: blue;\n      }\n      ._1g1ptzo10._1g1ptzo1 .skkcyc2 {\n        background: blue;\n      }\n    `);\n  });\n\n  it('should handle adjacent classnames containing a separate local classname as a substring', () => {\n    // Note that `classname2` starts and ends with the same character, so when two `classname1`s are\n    // adjacent, the resulting string will contain `classname2` as a substring\n    const classname1 = 'debugName_hash1';\n    const classname2 = 'debugName_hash1d';\n\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [classname1, classname2],\n\n        cssObjs: [\n          {\n            type: 'local',\n            selector: classname1,\n            rule: {\n              selectors: {\n                ['&&']: {\n                  background: 'black',\n                },\n                [`${classname2}&`]: {\n                  background: 'orange',\n                },\n                [`&${classname2}&`]: {\n                  background: 'orange',\n                },\n                [`${classname2}${classname2}&`]: {\n                  background: 'orange',\n                },\n              },\n            },\n          },\n          {\n            type: 'local',\n            selector: classname2,\n            rule: {},\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .debugName_hash1.debugName_hash1 {\n        background: black;\n      }\n      .debugName_hash1d.debugName_hash1 {\n        background: orange;\n      }\n      .debugName_hash1.debugName_hash1d.debugName_hash1 {\n        background: orange;\n      }\n      .debugName_hash1d.debugName_hash1d.debugName_hash1 {\n        background: orange;\n      }\n    `);\n  });\n\n  it('should handle @starting-style declaration', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              opacity: 1,\n              top: '100%',\n              '@starting-style': {\n                opacity: 0,\n                top: '50%',\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        opacity: 1;\n        top: 100%;\n      }\n      @starting-style {\n        .testClass {\n          opacity: 0;\n          top: 50%;\n        }\n      }\n    `);\n  });\n\n  it('should handle @starting-style inside media queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              display: 'flex',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  top: '0',\n                  '@starting-style': {\n                    top: '100%',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        display: flex;\n      }\n      @media screen and (min-width: 700px) {\n        .testClass {\n          top: 0;\n        }\n        @starting-style {\n          .testClass {\n            top: 100%;\n          }\n        }\n      }\n    `);\n  });\n\n  it('should handle @starting-style inside container queries', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@container': {\n                'sidebar (min-width: 700px)': {\n                  top: '0',\n                  '@starting-style': {\n                    top: '100%',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @container sidebar (min-width: 700px) {\n        .testClass {\n          top: 0;\n        }\n        @starting-style {\n          .testClass {\n            top: 100%;\n          }\n        }\n      }\n    `);\n  });\n\n  it('should handle @starting-style inside a layer', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@layer': {\n                'mock-layer': {\n                  top: '0',\n                  '@starting-style': {\n                    top: '100%',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @layer mock-layer;\n      @layer mock-layer {\n        .testClass {\n          top: 0;\n        }\n        @starting-style {\n          .testClass {\n            top: 100%;\n          }\n        }\n      }\n    `);\n  });\n\n  it('should handle @starting-style inside selectors', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              selectors: {\n                '&:hover': {\n                  top: '0',\n                  '@starting-style': {\n                    top: '100%',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass:hover {\n        top: 0;\n      }\n      @starting-style {\n        .testClass:hover {\n          top: 100%;\n        }\n      }\n    `);\n  });\n\n  it('should handle @starting-style inside @supports', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@supports': {\n                '(display: grid)': {\n                  top: '0',\n                  '@starting-style': {\n                    top: '100%',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      @supports (display: grid) {\n        .testClass {\n          top: 0;\n        }\n        @starting-style {\n          .testClass {\n            top: 100%;\n          }\n        }\n      }\n    `);\n  });\n\n  it('should handle simple pseudos and selectors inside @starting-style', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'orange',\n              '@starting-style': {\n                color: 'green',\n                ':hover': {\n                  color: 'red',\n                },\n                ':focus': {\n                  backgroundColor: 'blue',\n                },\n                selectors: {\n                  '.active &': {\n                    color: 'purple',\n                  },\n                  '& + &': {\n                    marginLeft: '10px',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: orange;\n      }\n      @starting-style {\n        .testClass {\n          color: green;\n        }\n        .testClass:hover {\n          color: red;\n        }\n        .testClass:focus {\n          background-color: blue;\n        }\n        .active .testClass {\n          color: purple;\n        }\n        .testClass + .testClass {\n          margin-left: 10px;\n        }\n      }\n    `);\n  });\n\n  it('should handle many at-rules with an inner starting-style', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              color: 'orange',\n              '@media': {\n                'screen and (min-width: 700px)': {\n                  '@container': {\n                    'sidebar (min-width: 700px)': {\n                      '@supports': {\n                        '(display: grid)': {\n                          '@starting-style': {\n                            color: 'green',\n                            ':hover': {\n                              color: 'red',\n                            },\n                            selectors: {\n                              '& + &': {\n                                marginLeft: '10px',\n                              },\n                            },\n                          },\n                        },\n                      },\n                    },\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .testClass {\n        color: orange;\n      }\n      @media screen and (min-width: 700px) {\n        @container sidebar (min-width: 700px) {\n          @supports (display: grid) {\n            @starting-style {\n              .testClass {\n                color: green;\n              }\n              .testClass:hover {\n                color: red;\n              }\n              .testClass + .testClass {\n                margin-left: 10px;\n              }\n            }\n          }\n        }\n      }\n    `);\n  });\n\n  // BUG: This is a long-standing bug with all at-rules, not just starting-style. This should result\n  // in a runtime error as well as a type error.\n  it('should not process simple pseudos and selectors inside @starting-style for non-local root types', () => {\n    expect(\n      transformCss({\n        composedClassLists: [],\n        localClassNames: [],\n        cssObjs: [\n          {\n            type: 'global',\n            selector: '.globalClass',\n            rule: {\n              color: 'orange',\n              '@starting-style': {\n                color: 'green',\n                // @ts-expect-error\n                ':hover': {\n                  color: 'red',\n                },\n                ':focus': {\n                  backgroundColor: 'blue',\n                },\n                selectors: {\n                  '.active &': {\n                    color: 'purple',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }).join('\\n'),\n    ).toMatchInlineSnapshot(`\n      .globalClass {\n        color: orange;\n      }\n      @starting-style {\n        .globalClass {\n          color: green;\n        }\n      }\n    `);\n  });\n\n  it('should throw an error when a at-rule is use inside @starting-style scope', () => {\n    expect(() =>\n      transformCss({\n        composedClassLists: [],\n        localClassNames: ['testClass'],\n        cssObjs: [\n          {\n            type: 'local',\n            selector: 'testClass',\n            rule: {\n              '@starting-style': {\n                // @ts-expect-error - Using a media query inside @starting-style for testing purposes\n                '@media': {\n                  'screen and (min-width: 700px)': {\n                    display: 'grid',\n                  },\n                },\n              },\n            },\n          },\n        ],\n      }),\n    ).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Nested at-rules (e.g. \"@media\") are not allowed inside @starting-style.]`,\n    );\n  });\n});\n\nendFileScope();\n"
  },
  {
    "path": "packages/css/src/transformCss.ts",
    "content": "import { getVarName } from '@vanilla-extract/private';\nimport cssesc from 'cssesc';\nimport AhoCorasick from 'modern-ahocorasick';\n\nimport type {\n  CSS,\n  CSSStyleBlock,\n  CSSKeyframesBlock,\n  CSSPropertiesWithVars,\n  StyleRule,\n  StyleWithSelectors,\n  GlobalFontFaceRule,\n  CSSSelectorBlock,\n  Composition,\n  WithQueries,\n  CSSPropertyBlock,\n} from './types';\nimport { markCompositionUsed } from './adapter';\nimport { forEach, omit, mapKeys } from './utils';\nimport { validateSelector } from './validateSelector';\nimport { ConditionalRuleset } from './conditionalRulesets';\nimport { simplePseudos, simplePseudoLookup } from './simplePseudos';\nimport { validateMediaQuery } from './validateMediaQuery';\n\nconst DECLARATION = '__DECLARATION';\n\nconst UNITLESS: Record<string, boolean> = {\n  animationIterationCount: true,\n  borderImage: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  boxFlex: true,\n  boxFlexGroup: true,\n  columnCount: true,\n  columns: true,\n  flex: true,\n  flexGrow: true,\n  flexShrink: true,\n  fontWeight: true,\n  gridArea: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnStart: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowStart: true,\n  initialLetter: true,\n  lineClamp: true,\n  lineHeight: true,\n  maxLines: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  scale: true,\n  tabSize: true,\n  WebkitLineClamp: true,\n  widows: true,\n  zIndex: true,\n  zoom: true,\n\n  // svg properties\n  fillOpacity: true,\n  floodOpacity: true,\n  maskBorder: true,\n  maskBorderOutset: true,\n  maskBorderSlice: true,\n  maskBorderWidth: true,\n  shapeImageThreshold: true,\n  stopOpacity: true,\n  strokeDashoffset: true,\n  strokeMiterlimit: true,\n  strokeOpacity: true,\n  strokeWidth: true,\n};\n\nfunction dashify(str: string) {\n  return str\n    .replace(/([A-Z])/g, '-$1')\n    .replace(/^ms-/, '-ms-')\n    .toLowerCase();\n}\n\nfunction replaceBetweenIndexes(\n  target: string,\n  startIndex: number,\n  endIndex: number,\n  replacement: string,\n) {\n  const start = target.slice(0, startIndex);\n  const end = target.slice(endIndex);\n\n  return `${start}${replacement}${end}`;\n}\n\nconst DOUBLE_SPACE = '  ';\n\nconst specialKeys = [\n  ...simplePseudos,\n  '@layer',\n  '@media',\n  '@supports',\n  '@container',\n  '@starting-style',\n  'selectors',\n];\n\ninterface CSSRule {\n  conditions?: Array<string>;\n  selector: string;\n  rule: CSSPropertiesWithVars;\n}\n\nclass Stylesheet {\n  rules: Array<CSSRule>;\n  conditionalRulesets: Array<ConditionalRuleset>;\n  currConditionalRuleset: ConditionalRuleset | undefined;\n  fontFaceRules: Array<GlobalFontFaceRule>;\n  keyframesRules: Array<CSSKeyframesBlock>;\n  localClassNamesMap: Map<string, string>;\n  localClassNamesSearch: AhoCorasick;\n  composedClassLists: Array<{ identifier: string; regex: RegExp }>;\n  layers: Map<string, Array<string>>;\n  propertyRules: Array<CSSPropertyBlock>;\n\n  constructor(\n    localClassNames: Array<string>,\n    composedClassLists: Array<Composition>,\n  ) {\n    this.rules = [];\n    this.conditionalRulesets = [new ConditionalRuleset()];\n    this.fontFaceRules = [];\n    this.keyframesRules = [];\n    this.propertyRules = [];\n    this.localClassNamesMap = new Map(\n      localClassNames.map((localClassName) => [localClassName, localClassName]),\n    );\n    this.localClassNamesSearch = new AhoCorasick(localClassNames);\n    this.layers = new Map();\n\n    // Class list compositions should be priortized by Newer > Older\n    // Therefore we reverse the array as they are added in sequence\n    this.composedClassLists = composedClassLists\n      .map(({ identifier, classList }) => ({\n        identifier,\n        regex: RegExp(`(${classList})`, 'g'),\n      }))\n      .reverse();\n  }\n\n  processCssObj(root: CSS) {\n    if (root.type === 'fontFace') {\n      this.fontFaceRules.push(root.rule);\n\n      return;\n    }\n\n    if (root.type === 'property') {\n      this.propertyRules.push(root);\n\n      return;\n    }\n\n    if (root.type === 'keyframes') {\n      root.rule = Object.fromEntries(\n        Object.entries(root.rule).map(([keyframe, rule]) => {\n          return [keyframe, this.transformVars(this.transformProperties(rule))];\n        }),\n      );\n      this.keyframesRules.push(root);\n\n      return;\n    }\n\n    this.currConditionalRuleset = new ConditionalRuleset();\n\n    if (root.type === 'layer') {\n      const layerDefinition = `@layer ${root.name}`;\n      this.addLayer([layerDefinition]);\n    } else {\n      // Add main styles\n      const mainRule = omit(root.rule, specialKeys);\n      this.addRule({\n        selector: root.selector,\n        rule: mainRule,\n      });\n\n      this.transformLayer(root, root.rule['@layer']);\n      this.transformMedia(root, root.rule['@media']);\n      this.transformSupports(root, root.rule['@supports']);\n      this.transformContainer(root, root.rule['@container']);\n      this.transformStartingStyle(root, root.rule['@starting-style']);\n\n      this.transformSimplePseudos(root, root.rule);\n      this.transformSelectors(root, root.rule);\n    }\n\n    const activeConditionalRuleset =\n      this.conditionalRulesets[this.conditionalRulesets.length - 1];\n\n    if (\n      !activeConditionalRuleset.mergeIfCompatible(this.currConditionalRuleset)\n    ) {\n      // Ruleset merge failed due to incompatibility. We now deopt by starting a fresh ConditionalRuleset\n      this.conditionalRulesets.push(this.currConditionalRuleset);\n    }\n  }\n\n  addConditionalRule(cssRule: CSSRule, conditions: Array<string>) {\n    // Run `transformProperties` before `transformVars` as we don't want to pixelify CSS Vars\n    const rule = this.transformVars(this.transformProperties(cssRule.rule));\n    const selector = this.transformSelector(cssRule.selector);\n\n    if (!this.currConditionalRuleset) {\n      throw new Error(`Couldn't add conditional rule`);\n    }\n\n    const conditionQuery = conditions[conditions.length - 1];\n    const parentConditions = conditions.slice(0, conditions.length - 1);\n\n    this.currConditionalRuleset.addRule(\n      {\n        selector,\n        rule,\n      },\n      conditionQuery,\n      parentConditions,\n    );\n  }\n\n  addRule(cssRule: CSSRule) {\n    // Run `transformProperties` before `transformVars` as we don't want to pixelify CSS Vars\n    const rule = this.transformVars(this.transformProperties(cssRule.rule));\n    const selector = this.transformSelector(cssRule.selector);\n\n    this.rules.push({\n      selector,\n      rule,\n    });\n  }\n\n  addLayer(layer: Array<string>) {\n    const uniqueLayerKey = layer.join(' - ');\n\n    this.layers.set(uniqueLayerKey, layer);\n  }\n\n  transformProperties(cssRule: CSSPropertiesWithVars) {\n    return this.transformContent(this.pixelifyProperties(cssRule));\n  }\n\n  pixelifyProperties(cssRule: CSSPropertiesWithVars) {\n    forEach(cssRule, (value, key) => {\n      if (\n        typeof value === 'number' &&\n        value !== 0 &&\n        !UNITLESS[key as keyof CSSPropertiesWithVars]\n      ) {\n        // @ts-expect-error Any ideas?\n        cssRule[key] = `${value}px`;\n      }\n    });\n\n    return cssRule;\n  }\n\n  transformVars({ vars, ...rest }: CSSPropertiesWithVars) {\n    if (!vars) {\n      return rest;\n    }\n\n    return {\n      ...mapKeys(vars, (_value, key) => getVarName(key)),\n      ...rest,\n    };\n  }\n\n  transformContent({ content, ...rest }: CSSPropertiesWithVars) {\n    if (typeof content === 'undefined') {\n      return rest;\n    }\n\n    // Handle fallback arrays:\n    const contentArray = Array.isArray(content) ? content : [content];\n\n    return {\n      content: contentArray.map((value) =>\n        // This logic was adapted from Stitches :)\n        value &&\n        (value.includes('\"') ||\n          value.includes(\"'\") ||\n          /^([A-Za-z-]+\\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)(\\s|$)/.test(\n            value,\n          ))\n          ? value\n          : `\"${value}\"`,\n      ),\n      ...rest,\n    };\n  }\n\n  transformClassname(identifier: string) {\n    return `.${cssesc(identifier, {\n      isIdentifier: true,\n    })}`;\n  }\n\n  transformSelector(selector: string) {\n    // Map class list compositions to single identifiers\n    let transformedSelector = selector;\n    for (const { identifier, regex } of this.composedClassLists) {\n      transformedSelector = transformedSelector.replace(regex, () => {\n        markCompositionUsed(identifier);\n\n        return identifier;\n      });\n    }\n\n    if (this.localClassNamesMap.has(transformedSelector)) {\n      return this.transformClassname(transformedSelector);\n    }\n\n    const results = this.localClassNamesSearch.search(transformedSelector);\n\n    let lastReplaceIndex = transformedSelector.length;\n\n    // Perform replacements backwards to simplify index handling\n    for (let i = results.length - 1; i >= 0; i--) {\n      const [endIndex, [firstMatch]] = results[i];\n      const startIndex = endIndex - firstMatch.length + 1;\n\n      // Class names can be substrings of other class names\n      // e.g. '_1g1ptzo1' and '_1g1ptzo10'\n      //\n      // Additionally, concatenated classnames can contain substrings equal to other classnames\n      // e.g. '&&' where '&' is 'debugName_hash1' and 'debugName_hash1d' is also a local classname\n      // Before transforming the selector, this would look like `debugName_hash1debugName_hash1`\n      // which contains the substring `debugName_hash1d`’.\n      //\n      // In either of these cases, the last replace index will occur either before or within the\n      // current replacement range (from `startIndex` to `endIndex`).\n      // If this occurs, we skip the replacement to avoid transforming the selector incorrectly.\n      const skipReplacement = lastReplaceIndex <= endIndex;\n\n      if (skipReplacement) {\n        continue;\n      }\n\n      lastReplaceIndex = startIndex;\n\n      // If class names already starts with a '.' then skip\n      if (transformedSelector[startIndex - 1] !== '.') {\n        transformedSelector = replaceBetweenIndexes(\n          transformedSelector,\n          startIndex,\n          endIndex + 1,\n          this.transformClassname(firstMatch),\n        );\n      }\n    }\n\n    return transformedSelector;\n  }\n\n  transformSelectors(\n    root: CSSStyleBlock | CSSSelectorBlock,\n    rule: StyleWithSelectors,\n    conditions?: Array<string>,\n  ) {\n    forEach(rule.selectors, (selectorRule, selector) => {\n      if (root.type !== 'local') {\n        throw new Error(\n          `Selectors are not allowed within ${\n            root.type === 'global' ? '\"globalStyle\"' : '\"selectors\"'\n          }`,\n        );\n      }\n\n      const transformedSelector = this.transformSelector(\n        selector.replace(RegExp('&', 'g'), root.selector),\n      );\n      validateSelector(transformedSelector, root.selector);\n\n      const rule = {\n        selector: transformedSelector,\n        rule: omit(selectorRule, specialKeys),\n      };\n\n      if (conditions) {\n        this.addConditionalRule(rule, conditions);\n      } else {\n        this.addRule(rule);\n      }\n\n      const selectorRoot: CSSSelectorBlock = {\n        type: 'selector',\n        selector: transformedSelector,\n        rule: selectorRule,\n      };\n\n      this.transformLayer(selectorRoot, selectorRule['@layer'], conditions);\n      this.transformSupports(\n        selectorRoot,\n        selectorRule['@supports'],\n        conditions,\n      );\n      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);\n      this.transformContainer(\n        selectorRoot,\n        selectorRule['@container'],\n        conditions,\n      );\n      this.transformStartingStyle(\n        selectorRoot,\n        selectorRule['@starting-style'],\n        conditions,\n      );\n    });\n  }\n\n  transformMedia(\n    root: CSSStyleBlock | CSSSelectorBlock,\n    rules: WithQueries<StyleWithSelectors>['@media'],\n    parentConditions: Array<string> = [],\n  ) {\n    if (rules) {\n      this.currConditionalRuleset?.addConditionPrecedence(\n        parentConditions,\n        Object.keys(rules).map((query) => `@media ${query}`),\n      );\n\n      for (const [query, mediaRule] of Object.entries(rules)) {\n        const mediaQuery = `@media ${query}`;\n\n        validateMediaQuery(mediaQuery);\n\n        const conditions = [...parentConditions, mediaQuery];\n\n        this.addConditionalRule(\n          {\n            selector: root.selector,\n            rule: omit(mediaRule, specialKeys),\n          },\n          conditions,\n        );\n\n        if (root.type === 'local') {\n          this.transformSimplePseudos(root, mediaRule!, conditions);\n          this.transformSelectors(root, mediaRule!, conditions);\n        }\n\n        this.transformLayer(root, mediaRule!['@layer'], conditions);\n        this.transformSupports(root, mediaRule!['@supports'], conditions);\n        this.transformContainer(root, mediaRule!['@container'], conditions);\n        this.transformStartingStyle(\n          root,\n          mediaRule!['@starting-style'],\n          conditions,\n        );\n      }\n    }\n  }\n\n  transformContainer(\n    root: CSSStyleBlock | CSSSelectorBlock,\n    rules: WithQueries<StyleWithSelectors>['@container'],\n    parentConditions: Array<string> = [],\n  ) {\n    if (rules) {\n      this.currConditionalRuleset?.addConditionPrecedence(\n        parentConditions,\n        Object.keys(rules).map((query) => `@container ${query}`),\n      );\n\n      forEach(rules, (containerRule, query) => {\n        const containerQuery = `@container ${query}`;\n\n        const conditions = [...parentConditions, containerQuery];\n\n        this.addConditionalRule(\n          {\n            selector: root.selector,\n            rule: omit(containerRule, specialKeys),\n          },\n          conditions,\n        );\n\n        if (root.type === 'local') {\n          this.transformSimplePseudos(root, containerRule!, conditions);\n          this.transformSelectors(root, containerRule!, conditions);\n        }\n\n        this.transformLayer(root, containerRule!['@layer'], conditions);\n        this.transformSupports(root, containerRule!['@supports'], conditions);\n        this.transformMedia(root, containerRule!['@media'], conditions);\n        this.transformStartingStyle(\n          root,\n          containerRule!['@starting-style'],\n          conditions,\n        );\n      });\n    }\n  }\n\n  transformLayer(\n    root: CSSStyleBlock | CSSSelectorBlock,\n    rules: WithQueries<StyleWithSelectors>['@layer'],\n    parentConditions: Array<string> = [],\n  ) {\n    if (rules) {\n      this.currConditionalRuleset?.addConditionPrecedence(\n        parentConditions,\n        Object.keys(rules).map((name) => `@layer ${name}`),\n      );\n\n      forEach(rules, (layerRule, name) => {\n        const conditions = [...parentConditions, `@layer ${name}`];\n        this.addLayer(conditions);\n\n        this.addConditionalRule(\n          {\n            selector: root.selector,\n            rule: omit(layerRule, specialKeys),\n          },\n          conditions,\n        );\n\n        if (root.type === 'local') {\n          this.transformSimplePseudos(root, layerRule!, conditions);\n          this.transformSelectors(root, layerRule!, conditions);\n        }\n\n        this.transformMedia(root, layerRule!['@media'], conditions);\n        this.transformSupports(root, layerRule!['@supports'], conditions);\n        this.transformContainer(root, layerRule!['@container'], conditions);\n        this.transformStartingStyle(\n          root,\n          layerRule!['@starting-style'],\n          conditions,\n        );\n      });\n    }\n  }\n\n  transformSupports(\n    root: CSSStyleBlock | CSSSelectorBlock,\n    rules: WithQueries<StyleWithSelectors>['@supports'],\n    parentConditions: Array<string> = [],\n  ) {\n    if (rules) {\n      this.currConditionalRuleset?.addConditionPrecedence(\n        parentConditions,\n        Object.keys(rules).map((query) => `@supports ${query}`),\n      );\n\n      forEach(rules, (supportsRule, query) => {\n        const conditions = [...parentConditions, `@supports ${query}`];\n\n        this.addConditionalRule(\n          {\n            selector: root.selector,\n            rule: omit(supportsRule, specialKeys),\n          },\n          conditions,\n        );\n\n        if (root.type === 'local') {\n          this.transformSimplePseudos(root, supportsRule!, conditions);\n          this.transformSelectors(root, supportsRule!, conditions);\n        }\n\n        this.transformLayer(root, supportsRule!['@layer'], conditions);\n        this.transformMedia(root, supportsRule!['@media'], conditions);\n        this.transformContainer(root, supportsRule!['@container'], conditions);\n        this.transformStartingStyle(\n          root,\n          supportsRule!['@starting-style'],\n          conditions,\n        );\n      });\n    }\n  }\n\n  transformSimplePseudos(\n    root: CSSStyleBlock | CSSSelectorBlock,\n    rule: StyleRule,\n    conditions?: Array<string>,\n  ) {\n    for (const key of Object.keys(rule)) {\n      // Process simple pseudos\n      if (simplePseudoLookup[key]) {\n        if (root.type !== 'local') {\n          throw new Error(\n            `Simple pseudos are not valid in ${\n              root.type === 'global' ? '\"globalStyle\"' : '\"selectors\"'\n            }`,\n          );\n        }\n\n        if (conditions) {\n          this.addConditionalRule(\n            {\n              selector: `${root.selector}${key}`,\n              rule: rule[key as keyof typeof rule] as CSSPropertiesWithVars,\n            },\n            conditions,\n          );\n        } else {\n          this.addRule({\n            conditions,\n            selector: `${root.selector}${key}`,\n            rule: rule[key as keyof typeof rule] as CSSPropertiesWithVars,\n          });\n        }\n      }\n    }\n  }\n\n  transformStartingStyle(\n    root: CSSStyleBlock | CSSSelectorBlock,\n    rules: WithQueries<StyleWithSelectors>['@starting-style'],\n    parentConditions: Array<string> = [],\n  ) {\n    if (rules) {\n      const nestedAtRuleKey = Object.keys(rules).find((key) =>\n        key.startsWith('@'),\n      );\n\n      if (nestedAtRuleKey) {\n        throw new Error(\n          `Nested at-rules (e.g. \"${nestedAtRuleKey}\") are not allowed inside @starting-style.`,\n        );\n      }\n\n      this.currConditionalRuleset?.addConditionPrecedence(parentConditions, [\n        '@starting-style',\n      ]);\n\n      const conditions = [...parentConditions, '@starting-style'];\n\n      this.addConditionalRule(\n        {\n          selector: root.selector,\n          rule: omit(rules, specialKeys),\n        },\n        conditions,\n      );\n\n      if (root.type === 'local') {\n        this.transformSimplePseudos(root, rules, conditions);\n        this.transformSelectors(root, rules, conditions);\n      }\n    }\n  }\n\n  toCss() {\n    const css: Array<string> = [];\n\n    // Render font-face rules\n    for (const fontFaceRule of this.fontFaceRules) {\n      css.push(renderCss({ '@font-face': fontFaceRule }));\n    }\n\n    // Render property rules\n    for (const property of this.propertyRules) {\n      css.push(renderCss({ [`@property ${property.name}`]: property.rule }));\n    }\n\n    // Render keyframes\n    for (const keyframe of this.keyframesRules) {\n      css.push(renderCss({ [`@keyframes ${keyframe.name}`]: keyframe.rule }));\n    }\n\n    // Render layer definitions\n    for (const layer of this.layers.values()) {\n      const [definition, ...nesting] = layer.reverse();\n      let cssObj: Record<string, any> = {\n        [definition]: DECLARATION,\n      };\n\n      for (const part of nesting) {\n        cssObj = {\n          [part]: cssObj,\n        };\n      }\n\n      css.push(renderCss(cssObj));\n    }\n\n    // Render unconditional rules\n    for (const rule of this.rules) {\n      css.push(renderCss({ [rule.selector]: rule.rule }));\n    }\n\n    // Render conditional rules\n    for (const conditionalRuleset of this.conditionalRulesets) {\n      for (const conditionalRule of conditionalRuleset.renderToArray()) {\n        css.push(renderCss(conditionalRule));\n      }\n    }\n\n    return css.filter(Boolean);\n  }\n}\n\nfunction renderCss(v: Record<string, any>, indent: string = '') {\n  const rules: Array<string> = [];\n\n  for (const key of Object.keys(v)) {\n    const value = v[key];\n\n    if (value && Array.isArray(value)) {\n      rules.push(...value.map((v) => renderCss({ [key]: v }, indent)));\n    } else if (value && typeof value === 'object') {\n      const isEmpty = Object.keys(value).length === 0;\n\n      if (!isEmpty) {\n        rules.push(\n          `${indent}${key} {\\n${renderCss(\n            value,\n            indent + DOUBLE_SPACE,\n          )}\\n${indent}}`,\n        );\n      }\n    } else if (value === DECLARATION) {\n      rules.push(`${indent}${key};`);\n    } else {\n      rules.push(\n        `${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`,\n      );\n    }\n  }\n\n  return rules.join('\\n');\n}\n\ninterface TransformCSSParams {\n  localClassNames: Array<string>;\n  composedClassLists: Array<Composition>;\n  cssObjs: Array<CSS>;\n}\nexport function transformCss({\n  localClassNames,\n  cssObjs,\n  composedClassLists,\n}: TransformCSSParams): string[] {\n  const stylesheet = new Stylesheet(localClassNames, composedClassLists);\n\n  for (const root of cssObjs) {\n    stylesheet.processCssObj(root);\n  }\n\n  return stylesheet.toCss();\n}\n"
  },
  {
    "path": "packages/css/src/types.ts",
    "content": "import type { CSSVarFunction, MapLeafNodes } from '@vanilla-extract/private';\nimport type { AtRule, Properties } from 'csstype';\n\nimport type { SimplePseudos } from './simplePseudos';\n\nexport type Resolve<T> = {\n  [Key in keyof T]: T[Key];\n} & {};\n\ntype CSSTypeProperties = Properties<number | (string & {})>;\n\nexport type CSSProperties = {\n  [Property in keyof CSSTypeProperties]:\n    | CSSTypeProperties[Property]\n    | CSSVarFunction\n    | Array<CSSVarFunction | CSSTypeProperties[Property]>;\n};\n\nexport interface CSSKeyframes {\n  [time: string]: CSSPropertiesWithVars;\n}\n\nexport type CSSPropertiesWithVars = CSSProperties & {\n  vars?: {\n    [key: string]: string;\n  };\n};\n\ntype PseudoProperties = {\n  [key in SimplePseudos]?: CSSPropertiesWithVars;\n};\n\ntype CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;\n\ntype Query<Key extends string, StyleType> = {\n  [key in Key]?: {\n    [query: string]: Omit<StyleType, Key>;\n  };\n};\n\nexport type MediaQueries<StyleType> = Query<'@media', StyleType>;\nexport type FeatureQueries<StyleType> = Query<'@supports', StyleType>;\nexport type ContainerQueries<StyleType> = Query<'@container', StyleType>;\nexport type Layers<StyleType> = Query<'@layer', StyleType>;\nexport type StartingStyle<StyleType> = {\n  '@starting-style'?: Omit<StyleType, '@starting-style'>;\n};\n\ninterface AllQueries<StyleType>\n  extends\n    MediaQueries<StyleType & AllQueries<StyleType>>,\n    FeatureQueries<StyleType & AllQueries<StyleType>>,\n    ContainerQueries<StyleType & AllQueries<StyleType>>,\n    Layers<StyleType & AllQueries<StyleType>>,\n    StartingStyle<StyleType> {}\n\nexport type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;\n\ninterface SelectorMap {\n  [selector: string]: WithQueries<CSSPropertiesWithVars>;\n}\n\nexport interface StyleWithSelectors extends CSSPropertiesAndPseudos {\n  selectors?: SelectorMap;\n}\n\nexport type StyleRule = WithQueries<StyleWithSelectors>;\n\nexport type GlobalStyleRule = WithQueries<CSSPropertiesWithVars>;\n\nexport type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> &\n  Required<Pick<AtRule.FontFaceFallback, 'src'>>;\nexport type FontFaceRule = Omit<GlobalFontFaceRule, 'fontFamily'>;\n\nexport type CSSStyleBlock = {\n  type: 'local';\n  selector: string;\n  rule: StyleRule;\n};\n\nexport type CSSFontFaceBlock = {\n  type: 'fontFace';\n  rule: GlobalFontFaceRule;\n};\n\nexport type CSSKeyframesBlock = {\n  type: 'keyframes';\n  name: string;\n  rule: CSSKeyframes;\n};\n\nexport type CSSSelectorBlock = {\n  type: 'selector' | 'global';\n  selector: string;\n  rule: GlobalStyleRule;\n};\n\nexport type CSSLayerDeclaration = {\n  type: 'layer';\n  name: string;\n};\n\nexport type CSSPropertyBlock = {\n  type: 'property';\n  name: string;\n  rule: AtRule.Property;\n};\n\nexport type CSS =\n  | CSSStyleBlock\n  | CSSFontFaceBlock\n  | CSSKeyframesBlock\n  | CSSSelectorBlock\n  | CSSLayerDeclaration\n  | CSSPropertyBlock;\n\nexport type FileScope = {\n  packageName?: string;\n  filePath: string;\n};\n\nexport interface Composition {\n  identifier: string;\n  classList: string;\n}\n\ntype CustomIdentFunction = (params: {\n  hash: string;\n  filePath: string;\n  debugId?: string;\n  packageName?: string;\n}) => string;\n\ntype IdentOption = 'short' | 'debug' | CustomIdentFunction;\n\nexport interface Adapter {\n  appendCss: (css: CSS, fileScope: FileScope) => void;\n  registerClassName: (className: string, fileScope: FileScope) => void;\n  registerComposition: (composition: Composition, fileScope: FileScope) => void;\n  markCompositionUsed: (identifier: string) => void;\n  onBeginFileScope?: (fileScope: FileScope) => void;\n  onEndFileScope: (fileScope: FileScope) => void;\n  getIdentOption: () => IdentOption;\n}\n\nexport type NullableTokens = {\n  [key: string]: string | NullableTokens | null;\n};\n\nexport type Tokens = {\n  [key: string]: string | Tokens;\n};\n\nexport type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<\n  ThemeContract,\n  CSSVarFunction\n>;\n\nexport type ClassNames = string | Array<ClassNames>;\n\nexport type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;\n\ntype _PropertySyntax =\n  | '<angle>'\n  | '<color>'\n  | '<custom-ident>'\n  | '<image>'\n  | '<integer>'\n  | '<length-percentage>'\n  | '<length>'\n  | '<number>'\n  | '<percentage>'\n  | '<resolution>'\n  | '<string>'\n  | '<time>'\n  | '<transform-function>'\n  | '<transform-list>'\n  | '<url>'\n  | '*';\n\n/** Suggests elements of the provided string union `Suggestions` while still accepting any string */\ntype LooseAutocomplete<Suggestions extends string> =\n  | Suggestions\n  | Omit<string, Suggestions>;\n\nexport type PropertySyntax = LooseAutocomplete<_PropertySyntax>;\n"
  },
  {
    "path": "packages/css/src/utils.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { isEqual, dedupeAndJoinClassList } from './utils';\n\ndescribe('isEqual', () => {\n  it.each([\n    [{ a: true }, { a: true }, true],\n    [{ a: true }, { a: false }, false],\n    [{ a: true }, { b: true }, false],\n    [{ a: true, b: [1, 2] }, { a: true, b: [1, 2] }, true],\n    [{ a: true, b: [1, 2] }, { a: true, b: [1, 3] }, false],\n    [{ a: true, b: [1, 2, 3] }, { a: true, b: [1, 2] }, false],\n    [{ a: { b: { c: '1' } } }, { a: { b: { c: '1' } } }, true],\n    [{ a: { b: { c: '1' } } }, { a: { b: { c: '2' } } }, false],\n  ])('isEqual', (a, b, expected) => {\n    expect(isEqual(a, b)).toBe(expected);\n  });\n});\n\ndescribe('dedupeAndJoinClassList', () => {\n  it.each([\n    { args: ['1'], output: '1' },\n    { args: ['1 1'], output: '1' },\n    { args: ['1 2 3'], output: '1 2 3' },\n    { args: ['1', '2', '3'], output: '1 2 3' },\n    { args: [['1', '2'], '3'], output: '1 2 3' },\n    { args: [['1', ['2', '3']], '4'], output: '1 2 3 4' },\n    {\n      args: [['1', ['2', ['3', '4']]], ['5', '6'], '7'],\n      output: '1 2 3 4 5 6 7',\n    },\n    { args: ['1', '1', '1'], output: '1' },\n    {\n      args: ['1', ['1', '2'], ['1', '2', '3'], ['1', '2', '3', '4']],\n      output: '1 2 3 4',\n    },\n    { args: ['1 2 3', '2 3 4', '1 5'], output: '1 2 3 4 5' },\n    { args: [' 1  2  3  2 ', ' 2  3  4 2 ', ' 1  5  1 '], output: '1 2 3 4 5' },\n    { args: ['1', '', '2'], output: '1 2' },\n  ])('composeStyles', ({ args, output }) => {\n    expect(dedupeAndJoinClassList(args)).toBe(output);\n  });\n});\n"
  },
  {
    "path": "packages/css/src/utils.ts",
    "content": "import type { ClassNames } from './types';\n\ntype BasicObj = { [key: string]: any };\n\nexport function forEach<Input extends BasicObj>(\n  obj: Input | undefined,\n  fn: <Key extends keyof Input>(value: Input[Key], key: string) => void,\n): void {\n  for (const key in obj) {\n    fn(obj[key], key);\n  }\n}\n\nexport function omit<Input extends BasicObj, OmitKey extends string>(\n  obj: Input | undefined,\n  omitKeys: Array<OmitKey>,\n): Omit<Input, OmitKey> {\n  let result: any = {};\n\n  for (const key in obj) {\n    if (omitKeys.indexOf(key as any) === -1) {\n      result[key] = obj[key];\n    }\n  }\n\n  return result;\n}\n\nexport function mapKeys<Input extends BasicObj>(\n  obj: Input | undefined,\n  fn: <Key extends keyof Input>(value: Input[Key], key: string) => string,\n): Record<string, Input[keyof Input]> {\n  let result: any = {};\n\n  for (const key in obj) {\n    result[fn(obj[key], key)] = obj[key];\n  }\n\n  return result;\n}\n\nexport function isEqual(a: any, b: any) {\n  if (typeof a !== typeof b) {\n    return false;\n  }\n\n  if (typeof a === 'object') {\n    const keys1 = Object.keys(a);\n    const keys2 = Object.keys(b);\n\n    if (keys1.length !== keys2.length) {\n      return false;\n    }\n\n    for (const key in a) {\n      if (!isEqual(a[key], b[key])) {\n        return false;\n      }\n    }\n\n    return true;\n  } else {\n    return a === b;\n  }\n}\n\nfunction composeStylesIntoSet(\n  set: Set<string>,\n  ...classNames: Array<ClassNames>\n) {\n  for (const className of classNames) {\n    if (className.length === 0) {\n      continue;\n    }\n\n    if (typeof className === 'string') {\n      if (className.includes(' ')) {\n        composeStylesIntoSet(set, ...className.trim().split(' '));\n      } else {\n        set.add(className);\n      }\n    } else if (Array.isArray(className)) {\n      composeStylesIntoSet(set, ...className);\n    }\n  }\n}\n\nexport function dedupeAndJoinClassList(classNames: Array<ClassNames>) {\n  const set: Set<string> = new Set();\n\n  composeStylesIntoSet(set, ...classNames);\n\n  return Array.from(set).join(' ');\n}\n"
  },
  {
    "path": "packages/css/src/validateContract.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { validateContract } from './validateContract';\n\ndescribe('validateContract', () => {\n  it('should return valid when tokens match contract', () => {\n    const contract = {\n      colors: {\n        red: '',\n        green: '',\n        blue: '',\n      },\n      space: {\n        1: '',\n        2: '',\n        3: '',\n      },\n    };\n\n    expect(validateContract(contract, contract).valid).toBe(true);\n  });\n\n  it('should show nice diff for added properties', () => {\n    const contract = {\n      colors: {\n        red: '',\n        green: '',\n        blue: '',\n      },\n      space: {\n        1: '',\n        2: '',\n        3: '',\n      },\n    };\n\n    const { valid, diffString } = validateContract(contract, {\n      ...contract,\n      fontWeight: { 300: '300' },\n    });\n\n    expect(valid).toBe(false);\n    expect(diffString).toMatchInlineSnapshot(`\n      \" {\n      +  fontWeight: ...,\n       }\"\n    `);\n  });\n\n  it('should show nice diff for removed properties', () => {\n    const contract = {\n      colors: {\n        red: '',\n        green: '',\n        blue: '',\n      },\n      space: {\n        1: '',\n        2: '',\n        3: '',\n      },\n    };\n\n    const { valid, diffString } = validateContract(contract, {\n      ...contract,\n      colors: undefined,\n    });\n\n    expect(valid).toBe(false);\n    expect(diffString).toMatchInlineSnapshot(`\n      \" {\n      -  colors: ...,\n       }\"\n    `);\n  });\n\n  it('should show nice diff for mixed properties', () => {\n    const contract = {\n      colors: {\n        red: '',\n        green: '',\n        blue: '',\n      },\n      space: {\n        1: '',\n        2: '',\n        3: '',\n      },\n    };\n\n    const { valid, diffString } = validateContract(contract, {\n      ...contract,\n      colors: undefined,\n      fontWeight: { 300: '300' },\n    });\n\n    expect(valid).toBe(false);\n    expect(diffString).toMatchInlineSnapshot(`\n      \" {\n      -  colors: ...,\n      +  fontWeight: ...,\n       }\"\n    `);\n  });\n\n  it('should show nice diff for missing nested properties', () => {\n    const contract = {\n      colors: {\n        red: '',\n        green: '',\n        blue: '',\n      },\n      space: {\n        1: '',\n        2: '',\n        3: '',\n      },\n    };\n\n    const { valid, diffString } = validateContract(contract, {\n      ...contract,\n      colors: {\n        red: '',\n        blue: '',\n      },\n    });\n\n    expect(valid).toBe(false);\n    expect(diffString).toMatchInlineSnapshot(`\n      \" {\n         colors: {\n      -    green: ...,\n         }\n       }\"\n    `);\n  });\n});\n"
  },
  {
    "path": "packages/css/src/validateContract.ts",
    "content": "import { type Contract, walkObject } from '@vanilla-extract/private';\nimport { diff } from 'deep-object-diff';\nimport pc from 'picocolors';\n\nconst normaliseObject = (obj: Contract) => walkObject(obj, () => '');\n\nexport function validateContract(\n  contract: any,\n  tokens: any,\n): {\n  valid: boolean;\n  diffString: string;\n} {\n  const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));\n  const valid = Object.keys(theDiff).length === 0;\n\n  return {\n    valid,\n    diffString: valid ? '' : renderDiff(contract, theDiff),\n  };\n}\n\nfunction diffLine(value: string, nesting: number, type?: '+' | '-') {\n  const whitespace = [...Array(nesting).keys()].map(() => '  ').join('');\n  const line = `${type ? type : ' '}${whitespace}${value}`;\n\n  if (process.env.NODE_ENV !== 'test') {\n    if (type === '-') {\n      return pc.red(line);\n    }\n\n    if (type === '+') {\n      return pc.green(line);\n    }\n  }\n\n  return line;\n}\n\nfunction renderDiff(orig: any, diff: any, nesting: number = 0): string {\n  const lines = [];\n\n  if (nesting === 0) {\n    lines.push(diffLine('{', 0));\n  }\n\n  const innerNesting = nesting + 1;\n\n  const keys = Object.keys(diff).sort();\n\n  for (const key of keys) {\n    const value = diff[key];\n\n    if (!(key in orig)) {\n      lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));\n    } else if (typeof value === 'object') {\n      lines.push(diffLine(`${key}: {`, innerNesting));\n\n      lines.push(renderDiff(orig[key], diff[key], innerNesting));\n\n      lines.push(diffLine('}', innerNesting));\n    } else {\n      lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));\n    }\n  }\n\n  if (nesting === 0) {\n    lines.push(diffLine('}', 0));\n  }\n  return lines.join('\\n');\n}\n"
  },
  {
    "path": "packages/css/src/validateMediaQuery.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { validateMediaQuery } from './validateMediaQuery';\n\ndescribe('validateMediaQuery', () => {\n  describe('valid selectors', () => {\n    const validMediaQueries = [\n      '@media screen',\n      '@media screen, print',\n      '@media screen and (max-width: 600px)',\n      '@media (min-width: 5rem)',\n      '@media (min-width: 30em) and (orientation: landscape)',\n      '@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi)',\n      '@media not screen and (color), print and (color)',\n      '@media (prefers-reduced-motion)',\n      '@media (prefers-reduced-motion: no-preference)',\n    ];\n\n    validMediaQueries.forEach((query) =>\n      it(query, () => {\n        expect(() => validateMediaQuery(query)).not.toThrow();\n      }),\n    );\n  });\n\n  describe('invalid media queries', () => {\n    it('empty query', () => {\n      expect(() => validateMediaQuery('@media '))\n        .toThrowErrorMatchingInlineSnapshot(`\n          [Error: Invalid media query: \"@media \"\n\n          Query is empty\n\n          Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]\n        `);\n    });\n\n    it('random query', () => {\n      expect(() => validateMediaQuery('@media random query'))\n        .toThrowErrorMatchingInlineSnapshot(`\n          [Error: Invalid media query: \"@media random query\"\n\n          Unknown ident 'random' in media query\n\n          Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]\n        `);\n    });\n\n    it('(min-height: 600px', () => {\n      expect(() => validateMediaQuery('@media (min-height: 600px'))\n        .toThrowErrorMatchingInlineSnapshot(`\n          [Error: Invalid media query: \"@media (min-height: 600px\"\n\n          Invalid media condition\n          Expected media condition after '('\n\n          Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]\n        `);\n    });\n\n    it('min-width: 600px)', () => {\n      expect(() => validateMediaQuery('@media min-width: 600px)'))\n        .toThrowErrorMatchingInlineSnapshot(`\n          [Error: Invalid media query: \"@media min-width: 600px)\"\n\n          Unknown ident 'min-width' in media query\n\n          Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]\n        `);\n    });\n\n    it('prefers-reduced-motion: no-preference', () => {\n      expect(() =>\n        validateMediaQuery('@media prefers-reduced-motion: no-preference'),\n      ).toThrowErrorMatchingInlineSnapshot(`\n        [Error: Invalid media query: \"@media prefers-reduced-motion: no-preference\"\n\n        Unknown ident 'prefers-reduced-motion' in media query\n\n        Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]\n      `);\n    });\n\n    it('Double media: @media @media screen and (min-width: 640px)', () => {\n      expect(() =>\n        validateMediaQuery('@media @media screen and (min-width: 640px)'),\n      ).toThrowErrorMatchingInlineSnapshot(`\n        [Error: Invalid media query: \"@media @media screen and (min-width: 640px)\"\n\n        Expected media condition or media prefix\n\n        Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries]\n      `);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/css/src/validateMediaQuery.ts",
    "content": "import dedent from 'dedent';\nimport { toAST } from 'media-query-parser';\n\nconst createMediaQueryError = (mediaQuery: string, msg: string) =>\n  new Error(\n    dedent`\n    Invalid media query: \"${mediaQuery}\"\n\n    ${msg}\n\n    Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries\n  `,\n  );\n\nexport const validateMediaQuery = (mediaQuery: string): void => {\n  // Empty queries will start with '@media '\n  if (mediaQuery === '@media ') {\n    throw createMediaQueryError(mediaQuery, 'Query is empty');\n  }\n\n  try {\n    toAST(mediaQuery);\n  } catch (e: any) {\n    throw createMediaQueryError(mediaQuery, e.message);\n  }\n};\n"
  },
  {
    "path": "packages/css/src/validateSelector.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { validateSelector } from './validateSelector';\n\ndescribe('validateSelector', () => {\n  describe('valid selectors', () => {\n    const validSelectors = [\n      '.target',\n      '.target, .target',\n      '.target:hover',\n      '.target:hover:focus',\n      '.target:where(:hover, :focus)',\n      '.target:where(:hover, :focus), .target',\n      '.target:is(:hover, :focus)',\n      '.target:hover:focus:not(.a)',\n      '.target:hover:focus:where(:not(.a, .b))',\n      '.target:hover:focus:is(:not(.a, .b))',\n      '.target.a',\n      '.a.target',\n      '.a.target.b',\n      '.a.b.target',\n      '.a .target',\n      '.a .target:hover',\n      '.a > .target',\n      '.a ~ .target',\n      '.a + .target',\n      '.a > .b ~ .target',\n      '.a > .b + .target:hover',\n      '.a:where(.b, .c) > .target',\n      '.a:is(.b, .c) > .target',\n      '.target, .foo .target',\n      ':where(.target)',\n      ':where(.target):hover',\n      ':is(.target)',\n      ':is(.target):hover',\n      '.a :where(.target)',\n      '.a > :is(.target)',\n      ':where(.target, .a.target)',\n      ':is(.target, .a.target)',\n      ':where(.target, .a .target)',\n      ':is(.target, .a .target)',\n      ':is(h1, h2, h3) .target',\n      '.target:is(h1, h2, h3)',\n    ];\n\n    it.each(validSelectors)('%s', (selector) => {\n      expect(() => validateSelector(selector, 'target')).not.toThrow();\n    });\n  });\n\n  describe('invalid selectors', () => {\n    const invalidSelectors = [\n      '.a',\n      '.target .a',\n      '.target, .a',\n      '.a, .target',\n      '.target, .target, .a',\n      '.a .target .b',\n      '.target :hover',\n      '.a .target :hover',\n      '.target > .a',\n      '.target + .a',\n      '.target ~ .a',\n      '.target:where(:hover, :focus) .a',\n      ':where(.target) .a',\n      ':is(.target) > .a',\n      ':where(.target, .a)',\n      ':is(.target, .a)',\n      ':where(.target, .a, .target)',\n      ':is(.target, .a, .target)',\n      ':where(.target, .target > span)',\n      ':is(.target, .target > span)',\n      ':where(.a, .b, .c)',\n      ':is(.a, .b, .c)',\n    ];\n\n    it.each(invalidSelectors)('%s', (selector) => {\n      expect(() => validateSelector(selector, 'target')).toThrow();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/css/src/validateSelector.ts",
    "content": "import { parse } from 'css-what';\nimport cssesc from 'cssesc';\nimport dedent from 'dedent';\n\n// https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript\nfunction escapeRegex(string: string) {\n  return string.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n}\n\ntype Selector = ReturnType<typeof parse>[number];\n\nfunction targetsClassName(tokens: Selector, targetClassName: string): boolean {\n  for (let i = tokens.length - 1; i >= 0; i--) {\n    const token = tokens[i];\n\n    if (\n      token.type === 'child' ||\n      token.type === 'parent' ||\n      token.type === 'sibling' ||\n      token.type === 'adjacent' ||\n      token.type === 'descendant'\n    ) {\n      return false;\n    }\n\n    if (\n      token.type === 'attribute' &&\n      token.name === 'class' &&\n      token.value === targetClassName\n    ) {\n      return true;\n    }\n\n    if (\n      token.type === 'pseudo' &&\n      Array.isArray(token.data) &&\n      (token.name === 'is' || token.name === 'where')\n    ) {\n      if (token.data.every((sub) => targetsClassName(sub, targetClassName))) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n}\n\nexport const validateSelector = (\n  selector: string,\n  targetClassName: string,\n): void => {\n  const replaceTarget = () => {\n    const targetRegex = new RegExp(\n      `.${escapeRegex(cssesc(targetClassName, { isIdentifier: true }))}`,\n      'g',\n    );\n    return selector.replace(targetRegex, '&');\n  };\n\n  let selectorParts: ReturnType<typeof parse>;\n\n  try {\n    selectorParts = parse(selector);\n  } catch (err) {\n    throw new Error(`Invalid selector: ${replaceTarget()}`, { cause: err });\n  }\n\n  selectorParts.forEach((tokens) => {\n    if (!targetsClassName(tokens, targetClassName)) {\n      throw new Error(\n        dedent`\n        Invalid selector: ${replaceTarget()}\n\n        Style selectors must target the '&' character (along with any modifiers), e.g. ${'`${parent} &`'} or ${'`${parent} &:hover`'}.\n\n        This is to ensure that each style block only affects the styling of a single class.\n\n        If your selector is targeting another class, you should move it to the style definition for that class, e.g. given we have styles for 'parent' and 'child' elements, instead of adding a selector of ${'`& ${child}`'}) to 'parent', you should add ${'`${parent} &`'} to 'child').\n\n        If your selector is targeting something global, use the 'globalStyle' function instead, e.g. if you wanted to write ${'`& h1`'}, you should instead write 'globalStyle(${'`${parent} h1`'}, { ... })'\n      `,\n      );\n    }\n  });\n};\n"
  },
  {
    "path": "packages/css/src/vars.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { fallbackVar, createGlobalThemeContract } from './vars';\n\ndescribe('fallbackVar', () => {\n  it('supports a single string fallback', () => {\n    expect(fallbackVar('var(--foo-bar)', 'blue')).toMatchInlineSnapshot(\n      `\"var(--foo-bar, blue)\"`,\n    );\n  });\n\n  it('supports a single numeric fallback', () => {\n    expect(fallbackVar('var(--foo-bar)', '10px')).toMatchInlineSnapshot(\n      `\"var(--foo-bar, 10px)\"`,\n    );\n  });\n\n  it('supports a single var fallback', () => {\n    expect(fallbackVar('var(--foo-bar)', 'var(--baz)')).toMatchInlineSnapshot(\n      `\"var(--foo-bar, var(--baz))\"`,\n    );\n  });\n\n  it('supports multiple fallbacks resolving to a string', () => {\n    expect(\n      fallbackVar('var(--foo)', 'var(--bar)', 'var(--baz)', 'blue'),\n    ).toMatchInlineSnapshot(`\"var(--foo, var(--bar, var(--baz, blue)))\"`);\n  });\n\n  it('supports multiple fallbacks resolving to a number', () => {\n    expect(\n      fallbackVar('var(--foo)', 'var(--bar)', 'var(--baz)', '10px'),\n    ).toMatchInlineSnapshot(`\"var(--foo, var(--bar, var(--baz, 10px)))\"`);\n  });\n\n  it('supports multiple fallbacks resolving to a var', () => {\n    expect(\n      fallbackVar(\n        'var(--foo)',\n        'var(--bar)',\n        'var(--baz)',\n        'var(--final-fallback)',\n      ),\n    ).toMatchInlineSnapshot(\n      `\"var(--foo, var(--bar, var(--baz, var(--final-fallback))))\"`,\n    );\n  });\n\n  it('should throw with invalid vars', () => {\n    expect(() => {\n      fallbackVar('INVALID', '10px');\n    }).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name: INVALID]`,\n    );\n\n    expect(() => {\n      fallbackVar('INVALID1', 'INVALID2', '10px');\n    }).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name: INVALID2]`,\n    );\n\n    expect(() => {\n      // @ts-expect-error\n      fallbackVar('INVALID', 10, 10);\n    }).toThrowErrorMatchingInlineSnapshot(`[Error: Invalid variable name: 10]`);\n\n    expect(() => {\n      fallbackVar('var(--foo-bar)', 'INVALID', '10px');\n    }).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name: INVALID]`,\n    );\n\n    expect(() => {\n      fallbackVar('INVALID', 'var(--foo-bar)', '10px');\n    }).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name: INVALID]`,\n    );\n  });\n});\n\ndescribe('createGlobalThemeContract', () => {\n  it('supports defining css vars via object properties', () => {\n    expect(\n      createGlobalThemeContract({\n        color: {\n          red: 'color-red',\n          blue: 'color-blue',\n          green: 'color-green',\n        },\n      }),\n    ).toMatchInlineSnapshot(`\n      {\n        \"color\": {\n          \"blue\": \"var(--color-blue)\",\n          \"green\": \"var(--color-green)\",\n          \"red\": \"var(--color-red)\",\n        },\n      }\n    `);\n  });\n\n  it('ignores leading double hyphen', () => {\n    expect(\n      createGlobalThemeContract({\n        color: {\n          red: '--color-red',\n          blue: '--color-blue',\n          green: '--color-green',\n        },\n      }),\n    ).toMatchInlineSnapshot(`\n      {\n        \"color\": {\n          \"blue\": \"var(--color-blue)\",\n          \"green\": \"var(--color-green)\",\n          \"red\": \"var(--color-red)\",\n        },\n      }\n    `);\n  });\n\n  it('supports adding a prefix', () => {\n    expect(\n      createGlobalThemeContract(\n        {\n          color: {\n            red: 'color-red',\n            blue: 'color-blue',\n            green: 'color-green',\n          },\n        },\n        (value) => `prefix-${value}`,\n      ),\n    ).toMatchInlineSnapshot(`\n      {\n        \"color\": {\n          \"blue\": \"var(--prefix-color-blue)\",\n          \"green\": \"var(--prefix-color-green)\",\n          \"red\": \"var(--prefix-color-red)\",\n        },\n      }\n    `);\n  });\n\n  it('ignores leading double hyphen when adding a prefix', () => {\n    expect(\n      createGlobalThemeContract(\n        {\n          color: {\n            red: 'color-red',\n            blue: 'color-blue',\n            green: 'color-green',\n          },\n        },\n        (value) => `--prefix-${value}`,\n      ),\n    ).toMatchInlineSnapshot(`\n      {\n        \"color\": {\n          \"blue\": \"var(--prefix-color-blue)\",\n          \"green\": \"var(--prefix-color-green)\",\n          \"red\": \"var(--prefix-color-red)\",\n        },\n      }\n    `);\n  });\n\n  it('supports path based names', () => {\n    expect(\n      createGlobalThemeContract(\n        {\n          color: {\n            red: null,\n            blue: null,\n            green: null,\n          },\n        },\n        (_, path) => `prefix-${path.join('-')}`,\n      ),\n    ).toMatchInlineSnapshot(`\n      {\n        \"color\": {\n          \"blue\": \"var(--prefix-color-blue)\",\n          \"green\": \"var(--prefix-color-green)\",\n          \"red\": \"var(--prefix-color-red)\",\n        },\n      }\n    `);\n  });\n\n  it('errors when invalid property value', () => {\n    expect(() =>\n      createGlobalThemeContract({\n        color: {\n          // @ts-expect-error\n          red: null,\n          blue: 'color-blue',\n          green: 'color-green',\n        },\n      }),\n    ).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name for \"color.red\": null]`,\n    );\n  });\n\n  it('errors when escaped property value', () => {\n    expect(() =>\n      createGlobalThemeContract({\n        color: {\n          red: 'color-red',\n          blue: \"color'blue\",\n          green: 'color-green',\n        },\n      }),\n    ).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name for \"color.blue\": color'blue]`,\n    );\n  });\n\n  it('errors when property value starts with a number', () => {\n    expect(() =>\n      createGlobalThemeContract({\n        color: {\n          red: 'color-red',\n          blue: 'color-blue',\n          green: '123-color-green',\n        },\n      }),\n    ).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name for \"color.green\": 123-color-green]`,\n    );\n  });\n\n  it('errors when invalid map value', () => {\n    expect(() =>\n      createGlobalThemeContract(\n        {\n          color: {\n            red: 'color-red',\n            blue: 'color-blue',\n            green: 'color-green',\n          },\n        },\n        // @ts-expect-error\n        () => null,\n      ),\n    ).toThrowErrorMatchingInlineSnapshot(\n      `[Error: Invalid variable name for \"color.red\": null]`,\n    );\n  });\n});\n"
  },
  {
    "path": "packages/css/src/vars.ts",
    "content": "import type { AtRule } from 'csstype';\n\nimport {\n  get,\n  walkObject,\n  type Contract,\n  type MapLeafNodes,\n  type CSSVarFunction,\n} from '@vanilla-extract/private';\nimport cssesc from 'cssesc';\n\nimport type { Tokens, NullableTokens, ThemeVars } from './types';\nimport { validateContract } from './validateContract';\nimport { getFileScope } from './fileScope';\nimport { generateIdentifier } from './identifier';\nimport type { PropertySyntax } from './types';\nimport { appendCss } from './adapter';\n\ntype VarDeclaration =\n  | {\n      syntax: '*';\n      inherits: boolean;\n      initialValue?: string;\n    }\n  | {\n      syntax: Exclude<PropertySyntax, '*'> | Array<PropertySyntax>;\n      inherits: boolean;\n      initialValue: string;\n    };\n\nconst buildPropertyRule = ({\n  syntax,\n  inherits,\n  initialValue,\n}: VarDeclaration): AtRule.Property => ({\n  syntax: `\"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}\"`,\n  inherits: inherits ? 'true' : 'false',\n  ...(initialValue != null ? { initialValue } : {}),\n});\n\nexport function createVar(debugId?: string): CSSVarFunction;\nexport function createVar(\n  declaration: VarDeclaration,\n  debugId?: string,\n): CSSVarFunction;\nexport function createVar(\n  debugIdOrDeclaration?: string | VarDeclaration,\n  debugId?: string,\n): CSSVarFunction {\n  const cssVarName = cssesc(\n    generateIdentifier({\n      debugId:\n        typeof debugIdOrDeclaration === 'string'\n          ? debugIdOrDeclaration\n          : debugId,\n      debugFileName: false,\n    }),\n    { isIdentifier: true },\n  );\n\n  if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {\n    appendCss(\n      {\n        type: 'property',\n        name: `--${cssVarName}`,\n        rule: buildPropertyRule(debugIdOrDeclaration),\n      },\n      getFileScope(),\n    );\n  }\n\n  return `var(--${cssVarName})` as const;\n}\n\nexport function createGlobalVar(name: string): CSSVarFunction;\nexport function createGlobalVar(\n  name: string,\n  declaration: VarDeclaration,\n): CSSVarFunction;\nexport function createGlobalVar(\n  name: string,\n  declaration?: VarDeclaration,\n): CSSVarFunction {\n  if (declaration && typeof declaration === 'object') {\n    appendCss(\n      {\n        type: 'property',\n        name: `--${name}`,\n        rule: buildPropertyRule(declaration),\n      },\n      getFileScope(),\n    );\n  }\n\n  return `var(--${name})`;\n}\n\nexport function assertVarName(\n  value: unknown,\n): asserts value is `var(--${string})` {\n  if (typeof value !== 'string' || !/^var\\(--.*\\)$/.test(value)) {\n    throw new Error(`Invalid variable name: ${value}`);\n  }\n}\n\nexport function fallbackVar(\n  ...values: [string, ...Array<string>]\n): CSSVarFunction {\n  let finalValue = '';\n\n  values.reverse().forEach((value) => {\n    if (finalValue === '') {\n      finalValue = String(value);\n    } else {\n      assertVarName(value);\n\n      finalValue = value.replace(/\\)$/, `, ${finalValue})`);\n    }\n  });\n\n  return finalValue as CSSVarFunction;\n}\n\nexport function assignVars<VarContract extends Contract>(\n  varContract: VarContract,\n  tokens: MapLeafNodes<VarContract, string>,\n): Record<CSSVarFunction, string> {\n  const varSetters: { [cssVarName: string]: string } = {};\n  const { valid, diffString } = validateContract(varContract, tokens);\n\n  if (!valid) {\n    throw new Error(`Tokens don't match contract.\\n${diffString}`);\n  }\n\n  walkObject(tokens, (value, path) => {\n    varSetters[get(varContract, path)] = String(value);\n  });\n\n  return varSetters;\n}\n\nexport function createThemeContract<ThemeTokens extends NullableTokens>(\n  tokens: ThemeTokens,\n): ThemeVars<ThemeTokens> {\n  return walkObject(tokens, (_value, path) => {\n    return createVar(path.join('-'));\n  });\n}\n\nexport function createGlobalThemeContract<ThemeTokens extends Tokens>(\n  tokens: ThemeTokens,\n): ThemeVars<ThemeTokens>;\nexport function createGlobalThemeContract<ThemeTokens extends NullableTokens>(\n  tokens: ThemeTokens,\n  mapFn: (value: string | null, path: Array<string>) => string,\n): ThemeVars<ThemeTokens>;\nexport function createGlobalThemeContract(\n  tokens: Tokens | NullableTokens,\n  mapFn?: (value: string | null, path: Array<string>) => string,\n) {\n  return walkObject(tokens, (value, path) => {\n    const rawVarName =\n      typeof mapFn === 'function'\n        ? mapFn(value as string | null, path)\n        : (value as string);\n\n    const varName =\n      typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;\n\n    if (\n      typeof varName !== 'string' ||\n      varName !== cssesc(varName, { isIdentifier: true })\n    ) {\n      throw new Error(\n        `Invalid variable name for \"${path.join('.')}\": ${varName}`,\n      );\n    }\n\n    return `var(--${varName})`;\n  });\n}\n"
  },
  {
    "path": "packages/css/src/viewTransition.ts",
    "content": "import { generateIdentifier } from './identifier';\n\n// createViewTransition is used for locally scoping CSS view transitions\n// For now it is mostly just an alias of generateIdentifier\nexport const createViewTransition = (debugId?: string): string =>\n  generateIdentifier(debugId);\n"
  },
  {
    "path": "packages/css/transformCss/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-css-transformCss.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-transformCss.esm.js\",\n  \"browser\": {\n    \"./dist/vanilla-extract-css-transformCss.cjs.js\": \"./dist/vanilla-extract-css-transformCss.browser.cjs.js\",\n    \"./dist/vanilla-extract-css-transformCss.esm.js\": \"./dist/vanilla-extract-css-transformCss.browser.esm.js\"\n  },\n  \"sideEffects\": false,\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"browser\": {\n        \"module\": \"./dist/vanilla-extract-css-transformCss.browser.esm.js\",\n        \"default\": \"./dist/vanilla-extract-css-transformCss.browser.cjs.js\"\n      },\n      \"module\": \"./dist/vanilla-extract-css-transformCss.esm.js\",\n      \"default\": \"./dist/vanilla-extract-css-transformCss.cjs.js\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/css/vanilla.virtual.css",
    "content": "/* \n\nThis is a noop file for extracted CSS source to point to.\n\nSome loaders, like Webpack and Turbopack, require a file to exist on disk for virtual source files.\n\nFor turbopack specifically, this reference file must be resolvable from any context where css is imported\neven if the next plugin itself isn't available (for example, in a monorepo).\n\n*/\n"
  },
  {
    "path": "packages/dynamic/CHANGELOG.md",
    "content": "# @vanilla-extract/dynamic\n\n## 2.1.5\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:\n  - @vanilla-extract/private@1.0.9\n\n## 2.1.4\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies [[`9d16de8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9d16de85b149b531f2e049e8d93bdb862667ff1f), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:\n  - @vanilla-extract/private@1.0.8\n\n## 2.1.3\n\n### Patch Changes\n\n- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8)]:\n  - @vanilla-extract/private@1.0.7\n\n## 2.1.2\n\n### Patch Changes\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/private@1.0.6\n\n## 2.1.1\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/private@1.0.5\n\n## 2.1.0\n\n### Minor Changes\n\n- [#1175](https://github.com/vanilla-extract-css/vanilla-extract/pull/1175) [`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839) Thanks [@youngkyo0504](https://github.com/youngkyo0504)! - `assignInlineVars` now accepts `null` and `undefined` values\n\n  Variables with a value of `null` or `undefined` will be omitted from the resulting inline style.\n\n  **NOTE:** This only applies to the case where a theme contract is not provided.\n\n  ```tsx\n  import { assignInlineVars } from '@vanilla-extract/dynamic';\n  import {\n    container,\n    brandColor,\n    textColor\n  } from './styles.css.ts';\n\n  // If `tone` is `undefined`, the following inline style becomes:\n  // { '--brandColor__8uideo0': 'pink' }\n\n  const MyComponent = ({ tone }: { tone?: critical }) => (\n    <section\n      className={container}\n      style={assignInlineVars({\n        [brandColor]: 'pink',\n        [textColor]: tone === 'critical' ? 'red' : null\n      })}\n    >\n      ...\n    </section>\n  );\n  ```\n\n- [#1175](https://github.com/vanilla-extract-css/vanilla-extract/pull/1175) [`ca854f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca854f51d5068fb1105a44b3d9af2852d4b61839) Thanks [@youngkyo0504](https://github.com/youngkyo0504)! - `setElementVars` now accepts `null` and `undefined` values\n\n  Variables with a value of `null` or `undefined` will not be assigned a value.\n\n  **NOTE:** This only applies to the case where a theme contract is not provided.\n\n  ```ts\n  import { setElementVars } from '@vanilla-extract/dynamic';\n  import { brandColor, textColor } from './styles.css.ts';\n\n  const el = document.getElementById('myElement');\n\n  setElementVars(el, {\n    [brandColor]: 'pink',\n    [textColor]: null\n  });\n  ```\n\n## 2.0.3\n\n### Patch Changes\n\n- [#854](https://github.com/vanilla-extract-css/vanilla-extract/pull/854) [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e) Thanks [@mrm007](https://github.com/mrm007)! - Bundle TypeScript declaration files (`.d.ts`) when building packages\n\n## 2.0.2\n\n### Patch Changes\n\n- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)\n\n  This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/private@1.0.3\n\n## 2.0.1\n\n### Patch Changes\n\n- [#508](https://github.com/vanilla-extract-css/vanilla-extract/pull/508) [`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `exports` field to `package.json` so nested package paths can be imported in a Node.js ESM context\n\n## 2.0.0\n\n### Major Changes\n\n- [#276](https://github.com/vanilla-extract-css/vanilla-extract/pull/276) [`4bcbd6f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4bcbd6f4ac0170a09553ce8d44ca84361782cce5) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `assignInlineVars` and `setElementVars` functions\n\n  **assignInlineVars**\n\n  Assigns CSS Variables as inline styles.\n\n  ```tsx\n  // app.tsx\n\n  import { assignInlineVars } from '@vanilla-extract/dynamic';\n  import { vars } from './vars.css.ts';\n\n  const MyComponent = () => (\n    <section\n      style={assignInlineVars({\n        [vars.colors.brand]: 'pink',\n        [vars.colors.accent]: 'green'\n      })}\n    >\n      ...\n    </section>\n  );\n  ```\n\n  You can also assign collections of variables by passing a theme contract as the first argument. All variables must be assigned or it’s a type error.\n\n  ```tsx\n  // app.tsx\n\n  import { assignInlineVars } from '@vanilla-extract/dynamic';\n  import { vars } from './vars.css.ts';\n\n  const MyComponent = () => (\n    <section\n      style={assignInlineVars(vars.colors, {\n        brand: 'pink',\n        accent: 'green'\n      })}\n    >\n      ...\n    </section>\n  );\n  ```\n\n  Even though this function returns an object of inline styles, its `toString` method returns a valid `style` attribute value so that it can be used in string templates.\n\n  ```tsx\n  // app.ts\n\n  import { assignInlineVars } from '@vanilla-extract/dynamic';\n  import { vars } from './vars.css.ts';\n\n  document.write(`\n    <section style=\"${assignInlineVars({\n      [vars.colors.brand]: 'pink',\n      [vars.colors.accent]: 'green'\n    })}\">\n      ...\n    </section>\n  `);\n  ```\n\n  **setElementVars**\n\n  Sets CSS Variables on a DOM element.\n\n  ```tsx\n  // app.ts\n\n  import { setElementVars } from '@vanilla-extract/dynamic';\n  import { vars } from './styles.css.ts';\n\n  const el = document.getElementById('myElement');\n\n  setElementVars(el, {\n    [vars.colors.brand]: 'pink',\n    [vars.colors.accent]: 'green'\n  });\n  ```\n\n  You can also set collections of variables by passing a theme contract as the second argument. All variables must be set or it’s a type error.\n\n  ```tsx\n  // app.ts\n\n  import { setElementVars } from '@vanilla-extract/dynamic';\n  import { vars } from './styles.css.ts';\n\n  const el = document.getElementById('myElement');\n\n  setElementVars(el, vars.colors, {\n    brand: 'pink',\n    accent: 'green'\n  });\n  ```\n\n  **BREAKING CHANGE**\n\n  These functions replace `createInlineTheme`, `setElementTheme` and `setElementVar`.\n\n  `assignInlineVars` works as a drop-in replacement for `createInlineTheme`.\n\n  ```diff\n  -createInlineTheme(vars, { brandColor: 'red' });\n  +assignInlineVars(vars, { brandColor: 'red' });\n  ```\n\n  `setElementVars` works as a drop-in replacement for `setElementTheme`.\n\n  ```diff\n  -setElementTheme(el, vars, { brandColor: 'red' });\n  +setElementVars(el, vars, { brandColor: 'red' });\n  ```\n\n  You can replicate the functionality of `setElementVar` by passing an object with dynamic keys to `setElementVars`. This now makes it easy to support setting multiple vars at once.\n\n  ```diff\n  -setElementVar(el, vars.brandColor, 'red');\n  +setElementVars(el, {\n  +  [vars.brandColor]: 'red'\n  +});\n  ```\n\n## 1.0.0\n\n### Major Changes\n\n- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1\n\n### Patch Changes\n\n- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:\n  - @vanilla-extract/private@1.0.0\n"
  },
  {
    "path": "packages/dynamic/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/dynamic\",\n  \"version\": \"2.1.5\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"sideEffects\": false,\n  \"main\": \"dist/vanilla-extract-dynamic.cjs.js\",\n  \"module\": \"dist/vanilla-extract-dynamic.esm.js\",\n  \"types\": \"dist/vanilla-extract-dynamic.cjs.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/vanilla-extract-dynamic.cjs.d.ts\",\n      \"module\": \"./dist/vanilla-extract-dynamic.esm.js\",\n      \"default\": \"./dist/vanilla-extract-dynamic.cjs.js\"\n    }\n  },\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/dynamic\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/private\": \"workspace:^\"\n  },\n  \"devDependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "packages/dynamic/src/assignInlineVars.css.ts",
    "content": "import { createThemeContract } from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  foo: { bar: null },\n  baz: { qux: null },\n});\n"
  },
  {
    "path": "packages/dynamic/src/assignInlineVars.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { assignInlineVars } from './';\nimport { vars } from './assignInlineVars.css.ts';\n\ndescribe('assignInlineVars', () => {\n  describe('basic assignment', () => {\n    const style = assignInlineVars({\n      [vars.foo.bar]: '1',\n      [vars.baz.qux]: '2',\n      '--global-var-1': '3',\n      '--global-var-2': '4',\n      '--global-var-3': undefined,\n      '--global-var-4': null,\n    });\n\n    it('assigns vars', () => {\n      expect(style).toMatchInlineSnapshot(`\n        {\n          \"--baz-qux__17tpfwq1\": \"2\",\n          \"--foo-bar__17tpfwq0\": \"1\",\n          \"--global-var-1\": \"3\",\n          \"--global-var-2\": \"4\",\n        }\n      `);\n    });\n\n    it('converts to valid inline styles when calling toString', () => {\n      expect(style.toString()).toMatchInlineSnapshot(\n        `\"--foo-bar__17tpfwq0:1;--baz-qux__17tpfwq1:2;--global-var-1:3;--global-var-2:4\"`,\n      );\n    });\n  });\n\n  describe('contract assignment', () => {\n    const style = assignInlineVars(vars, {\n      foo: { bar: '1' },\n      baz: { qux: '2' },\n    });\n\n    it('assigns contract vars', () => {\n      expect(style).toMatchInlineSnapshot(`\n        {\n          \"--baz-qux__17tpfwq1\": \"2\",\n          \"--foo-bar__17tpfwq0\": \"1\",\n        }\n      `);\n    });\n\n    it('converts to valid inline styles when calling toString', () => {\n      expect(style.toString()).toMatchInlineSnapshot(\n        `\"--foo-bar__17tpfwq0:1;--baz-qux__17tpfwq1:2\"`,\n      );\n    });\n  });\n});\n"
  },
  {
    "path": "packages/dynamic/src/assignInlineVars.ts",
    "content": "import {\n  walkObject,\n  get,\n  getVarName,\n  type Contract,\n  type MapLeafNodes,\n} from '@vanilla-extract/private';\n\ntype Styles = { [cssVarName: string]: string };\n\nexport function assignInlineVars(\n  vars: Record<string, string | undefined | null>,\n): Styles;\nexport function assignInlineVars<ThemeContract extends Contract>(\n  contract: ThemeContract,\n  tokens: MapLeafNodes<ThemeContract, string>,\n): Styles;\nexport function assignInlineVars(varsOrContract: any, tokens?: any) {\n  const styles: Styles = {};\n\n  if (typeof tokens === 'object') {\n    const contract = varsOrContract;\n\n    walkObject(tokens, (value, path) => {\n      if (value == null) {\n        return;\n      }\n\n      const varName = get(contract, path);\n\n      styles[getVarName(varName)] = String(value);\n    });\n  } else {\n    const vars = varsOrContract;\n\n    for (const varName in vars) {\n      const value = vars[varName];\n\n      if (value == null) {\n        continue;\n      }\n\n      styles[getVarName(varName)] = value;\n    }\n  }\n\n  Object.defineProperty(styles, 'toString', {\n    value: function () {\n      return Object.keys(this)\n        .map((key) => `${key}:${this[key]}`)\n        .join(';');\n    },\n    writable: false,\n  });\n\n  return styles;\n}\n"
  },
  {
    "path": "packages/dynamic/src/index.ts",
    "content": "export { assignInlineVars } from './assignInlineVars';\nexport { setElementVars } from './setElementVars';\n"
  },
  {
    "path": "packages/dynamic/src/setElementVars.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\n/**\n * @vitest-environment jsdom\n */\nimport { setElementVars } from './';\nimport { vars } from './assignInlineVars.css.ts';\n\ndescribe('setElementVars', () => {\n  it('assigns vars', () => {\n    const el = document.body.appendChild(document.createElement('div'));\n\n    setElementVars(el, {\n      [vars.foo.bar]: '1',\n      [vars.baz.qux]: '2',\n      '--global-var-1': '3',\n      '--global-var-2': '4',\n      '--global-var-3': undefined,\n      '--global-var-4': null,\n    });\n\n    // Can't query CSS vars directly as jsdom doesn't support it\n    expect(el.getAttribute('style')).toMatchInlineSnapshot(\n      `\"--foo-bar__17tpfwq0: 1; --baz-qux__17tpfwq1: 2; --global-var-1: 3; --global-var-2: 4;\"`,\n    );\n  });\n\n  it('assigns contract vars', () => {\n    const el = document.body.appendChild(document.createElement('div'));\n\n    setElementVars(el, vars, {\n      foo: { bar: '1' },\n      baz: { qux: '2' },\n    });\n\n    // Can't query CSS vars directly as jsdom doesn't support it\n    expect(el.getAttribute('style')).toMatchInlineSnapshot(\n      `\"--foo-bar__17tpfwq0: 1; --baz-qux__17tpfwq1: 2;\"`,\n    );\n  });\n});\n"
  },
  {
    "path": "packages/dynamic/src/setElementVars.ts",
    "content": "import {\n  get,\n  walkObject,\n  getVarName,\n  type Contract,\n  type MapLeafNodes,\n} from '@vanilla-extract/private';\n\nfunction setVar(element: HTMLElement, variable: string, value: string) {\n  element.style.setProperty(getVarName(variable), value);\n}\n\nexport function setElementVars(\n  element: HTMLElement,\n  vars: Record<string, string | undefined | null>,\n): void;\nexport function setElementVars<ThemeContract extends Contract>(\n  element: HTMLElement,\n  contract: ThemeContract,\n  tokens: MapLeafNodes<ThemeContract, string>,\n): void;\nexport function setElementVars(\n  element: HTMLElement,\n  varsOrContract: any,\n  tokens?: any,\n): void {\n  if (typeof tokens === 'object') {\n    const contract = varsOrContract;\n\n    walkObject(tokens, (value, path) => {\n      if (value == null) {\n        return;\n      }\n\n      setVar(element, get(contract, path), String(value));\n    });\n  } else {\n    const vars = varsOrContract;\n\n    for (const varName in vars) {\n      const value = vars[varName];\n\n      if (value == null) {\n        continue;\n      }\n\n      setVar(element, varName, vars[varName]);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/dynamic/src/setElementVarts.css.ts",
    "content": "import { createThemeContract } from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  foo: { bar: null },\n  baz: { qux: null },\n});\n"
  },
  {
    "path": "packages/esbuild-plugin/CHANGELOG.md",
    "content": "# @vanilla-extract/esbuild-plugin\n\n## 2.3.22\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.8\n\n## 2.3.21\n\n### Patch Changes\n\n- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704)]:\n  - @vanilla-extract/integration@8.0.7\n\n## 2.3.20\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.6\n\n## 2.3.19\n\n### Patch Changes\n\n- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:\n  - @vanilla-extract/integration@8.0.5\n\n## 2.3.18\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.4\n\n## 2.3.17\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.3\n\n## 2.3.16\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.2\n\n## 2.3.15\n\n### Patch Changes\n\n- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:\n  - @vanilla-extract/integration@8.0.1\n\n## 2.3.14\n\n### Patch Changes\n\n- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:\n  - @vanilla-extract/integration@8.0.0\n\n## 2.3.13\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.12\n\n## 2.3.12\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.11\n\n## 2.3.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.10\n\n## 2.3.10\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:\n  - @vanilla-extract/integration@7.1.9\n\n## 2.3.9\n\n### Patch Changes\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n\n## 2.3.8\n\n### Patch Changes\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n\n## 2.3.7\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.6\n\n## 2.3.6\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n\n## 2.3.5\n\n### Patch Changes\n\n- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:\n  - @vanilla-extract/integration@7.0.0\n\n## 2.3.4\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:\n  - @vanilla-extract/integration@6.4.0\n\n## 2.3.3\n\n### Patch Changes\n\n- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`\n\n- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier\n\n## 2.3.2\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/integration@6.2.5\n\n## 2.3.1\n\n### Patch Changes\n\n- [#1232](https://github.com/vanilla-extract-css/vanilla-extract/pull/1232) [`ca68a90`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca68a9091111cf137071fb43a658952d9aaba71d) Thanks [@mrm007](https://github.com/mrm007)! - Make `esbuild` an optional peer dependency\n\n## 2.3.0\n\n### Minor Changes\n\n- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function\n\n## 2.2.2\n\n### Patch Changes\n\n- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Bump esbuild to v0.17.6\n\n- Updated dependencies [[`45d3b86`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45d3b86960027cdfa81989f8e2036a6768cc1e1d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/integration@6.2.0\n\n## 2.2.1\n\n### Patch Changes\n\n- [#973](https://github.com/vanilla-extract-css/vanilla-extract/pull/973) [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a) Thanks [@cliffordfajardo](https://github.com/cliffordfajardo)! - Upgrade esbuild `^0.11.16` to `^0.16.3`\n\n- Updated dependencies [[`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101), [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a)]:\n  - @vanilla-extract/integration@6.0.2\n\n## 2.2.0\n\n### Minor Changes\n\n- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add automatic debug IDs\n\n  Automatic debug IDs allow your styles and other identifiers (e.g. CSS Vars, keyframes, etc) to have names that more closely reflect your source code when in development. This makes it easier to understand how the CSS output links to your source code.\n\n  ```ts\n  // styles.css.ts\n\n  // redBox ~= 'styles_redBox_asdfgj'\n  const redBox = style({\n    background: 'red'\n  });\n  ```\n\n### Patch Changes\n\n- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:\n  - @vanilla-extract/integration@6.0.0\n\n## 2.1.0\n\n### Minor Changes\n\n- [#668](https://github.com/vanilla-extract-css/vanilla-extract/pull/668) [`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Add esbuild configurations to vite/esbuild/rollup plugins\n\n### Patch Changes\n\n- Updated dependencies [[`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3)]:\n  - @vanilla-extract/integration@5.0.0\n\n## 2.0.5\n\n### Patch Changes\n\n- [#673](https://github.com/vanilla-extract-css/vanilla-extract/pull/673) [`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where `.css.ts` files with the same file path from other packages could have identifier collisions\n\n- Updated dependencies [[`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140)]:\n  - @vanilla-extract/integration@4.0.1\n\n## 2.0.4\n\n### Patch Changes\n\n- [#647](https://github.com/vanilla-extract-css/vanilla-extract/pull/647) [`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow CSS url imports to be resolved\n\n- Updated dependencies [[`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636)]:\n  - @vanilla-extract/integration@4.0.0\n\n## 2.0.3\n\n### Patch Changes\n\n- [#621](https://github.com/vanilla-extract-css/vanilla-extract/pull/621) [`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9) Thanks [@nayaabkhan](https://github.com/nayaabkhan)! - Improve build performance when creating large CSS files\n\n- Updated dependencies [[`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4)]:\n  - @vanilla-extract/integration@3.0.0\n\n## 2.0.2\n\n### Patch Changes\n\n- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12\n\n- Updated dependencies [[`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013)]:\n  - @vanilla-extract/integration@2.0.1\n\n## 2.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69)]:\n  - @vanilla-extract/integration@2.0.0\n\n## 2.0.0\n\n### Major Changes\n\n- [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.\n\n  - `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n  - `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`\n\n  ```js\n  import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';\n\n  vanillaExtractPlugin({ identifiers: 'short' });\n  ```\n\n  BREAKING CHANGE\n\n  Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to \"production\". By default, they will now be formatted according to esbuild's [minify config](https://esbuild.github.io/api/#minify).\n\n### Patch Changes\n\n- Updated dependencies [[`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275)]:\n  - @vanilla-extract/integration@1.2.0\n\n## 1.2.0\n\n### Minor Changes\n\n- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of `composeStyles` to be used in selectors\n\n  When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.\n\n  ```ts\n  import {\n    style,\n    globalStyle,\n    composeStyles\n  } from '@vanilla-extract/css';\n\n  const background = style({ background: 'mintcream' });\n  const padding = style({ padding: 12 });\n\n  export const container = composeStyles(\n    background,\n    padding\n  );\n\n  globalStyle(`${container} *`, {\n    boxSizing: 'border-box'\n  });\n  ```\n\n### Patch Changes\n\n- Updated dependencies [[`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:\n  - @vanilla-extract/integration@1.1.0\n\n## 1.1.0\n\n### Minor Changes\n\n- [#183](https://github.com/vanilla-extract-css/vanilla-extract/pull/183) [`6721228`](https://github.com/vanilla-extract-css/vanilla-extract/commit/672122828f763193c9086706ba969caa6c564761) Thanks [@Brendan-csel](https://github.com/Brendan-csel)! - Add `processCss` plugin option to allow further processing of CSS while bundling.\n\n  **Example for postcss with autoprefixer:**\n\n  ```js\n  const {\n    vanillaExtractPlugin\n  } = require('@vanilla-extract/esbuild-plugin');\n  const postcss = require('postcss');\n  const autoprefixer = require('autoprefixer');\n\n  async function processCss(css) {\n    const result = await postcss([autoprefixer]).process(\n      css,\n      {\n        from: undefined /* suppress source map warning */\n      }\n    );\n\n    return result.css;\n  }\n\n  require('esbuild')\n    .build({\n      entryPoints: ['app.ts'],\n      bundle: true,\n      plugins: [\n        vanillaExtractPlugin({\n          processCss\n        })\n      ],\n      outfile: 'out.js'\n    })\n    .catch(() => process.exit(1));\n  ```\n\n## 1.0.0\n\n### Major Changes\n\n- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1\n\n### Patch Changes\n\n- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:\n  - @vanilla-extract/integration@1.0.0\n\n## 0.2.2\n\n### Patch Changes\n\n- [#134](https://github.com/vanilla-extract-css/vanilla-extract/pull/134) [`b99dd0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b99dd0a2d6ce171b4776aa11d0ab2c7e1559ddae) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Move shared logic to integration package\n\n## 0.2.1\n\n### Patch Changes\n\n- [#68](https://github.com/vanilla-extract-css/vanilla-extract/pull/68) [`0cfd17d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0cfd17d89b3bb6ad4ae4f5bb05dce9015a33840e) Thanks [@jahredhope](https://github.com/jahredhope)! - Fix errors occurring when using TypeScript in .css.ts files\n\n## 0.2.0\n\n### Minor Changes\n\n- [#53](https://github.com/vanilla-extract-css/vanilla-extract/pull/53) [`58e4f8a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/58e4f8aa6a2c56c5f26408539756529705a598b8) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support exporting functions from `.css.ts` files via recipes\n\n### Patch Changes\n\n- Updated dependencies [[`48c4a78`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48c4a7866a8361de712b89b06abb380bf4709656), [`2d98bcc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d98bccb40603585cf9eab70ff0afc52c33f803d)]:\n  - @vanilla-extract/css@0.4.0\n\n## 0.1.2\n\n### Patch Changes\n\n- Updated dependencies [[`156b491`](https://github.com/vanilla-extract-css/vanilla-extract/commit/156b49182367bf233564eae7fd3ea9d3f50fd68a), [`ae9864c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae9864c727c2edd0d415b77f738a3c959c98fca6), [`756d9b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/756d9b0d0305e8b8a63f0ca1ebe635ab320a5f5b)]:\n  - @vanilla-extract/css@0.3.0\n\n## 0.1.1\n\n### Patch Changes\n\n- [#30](https://github.com/vanilla-extract-css/vanilla-extract/pull/30) [`b4591d5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b4591d568796ac7d79a588d0e7ad453dc45532f8) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix hash context information not being applied\n\n  This change makes it so all files with a valid CSS file extension (e.g. `.css.ts`) get hash context information (internally referred to as `filescope`) applied. This fixes some situations where the \"New styles cannot be registered dynamically after initial boot\" error would occur incorrectly.\n\n## 0.1.0\n\n### Minor Changes\n\n- [#20](https://github.com/vanilla-extract-css/vanilla-extract/pull/20) [`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure generated hashes are scoped by package\n\n  vanilla-extract uses file path to ensure unique identifier (e.g. class names, CSS Variables, keyframes, etc) hashes across your application. This information is added to your `*.css.ts` files at build time. The issue with this approach is it meant `*.css.ts` files couldn't be pre-compiled when being published to npm.\n\n  This change adds support for pre-compilation of packages by adding package name information to identifier hashes.\n\n* [#20](https://github.com/vanilla-extract-css/vanilla-extract/pull/20) [`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove `projectRoot` option in favor of `package.json` resolution\n\n### Patch Changes\n\n- Updated dependencies [[`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5), [`c4bedd5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c4bedd571f0c21291b58e050589b4db9465c0460)]:\n  - @vanilla-extract/css@0.2.0\n\n## 0.0.2\n\n### Patch Changes\n\n- [#16](https://github.com/vanilla-extract-css/vanilla-extract/pull/16) [`ebb3edc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ebb3edc5a9048559410e5fbbadf82a9de799bb09) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Trigger rebuild for CSS file dependencies\n"
  },
  {
    "path": "packages/esbuild-plugin/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/esbuild-plugin\",\n  \"version\": \"2.3.22\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-esbuild-plugin.cjs.js\",\n  \"module\": \"dist/vanilla-extract-esbuild-plugin.esm.js\",\n  \"types\": \"dist/vanilla-extract-esbuild-plugin.cjs.d.ts\",\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/esbuild-plugin\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/integration\": \"workspace:^\"\n  },\n  \"peerDependencies\": {\n    \"esbuild\": \">=0.17.6\"\n  },\n  \"peerDependenciesMeta\": {\n    \"esbuild\": {\n      \"optional\": true\n    }\n  },\n  \"devDependencies\": {\n    \"esbuild\": \"~0.27.0\"\n  }\n}\n"
  },
  {
    "path": "packages/esbuild-plugin/src/index.ts",
    "content": "import { dirname, join } from 'path';\n\nimport {\n  cssFileFilter,\n  virtualCssFileFilter,\n  processVanillaFile,\n  getSourceFromVirtualCssFile,\n  compile,\n  vanillaExtractTransformPlugin,\n  type IdentifierOption,\n  type CompileOptions,\n} from '@vanilla-extract/integration';\nimport type { Plugin } from 'esbuild';\n\nconst vanillaCssNamespace = 'vanilla-extract-css-ns';\n\ninterface VanillaExtractPluginOptions {\n  outputCss?: boolean;\n  /**\n   * @deprecated Use `esbuildOptions.external` instead.\n   */\n  externals?: Array<string>;\n  runtime?: boolean;\n  processCss?: (css: string) => Promise<string>;\n  identifiers?: IdentifierOption;\n  esbuildOptions?: CompileOptions['esbuildOptions'];\n}\nexport function vanillaExtractPlugin({\n  outputCss,\n  externals = [],\n  runtime = false,\n  processCss,\n  identifiers,\n  esbuildOptions,\n}: VanillaExtractPluginOptions = {}): Plugin {\n  if (runtime) {\n    // If using runtime CSS then just apply fileScopes and debug IDs to code\n    return vanillaExtractTransformPlugin({ identOption: identifiers });\n  }\n\n  return {\n    name: 'vanilla-extract',\n    setup(build) {\n      build.onResolve({ filter: virtualCssFileFilter }, (args) => {\n        return {\n          path: args.path,\n          namespace: vanillaCssNamespace,\n        };\n      });\n\n      build.onLoad(\n        { filter: /.*/, namespace: vanillaCssNamespace },\n        async ({ path }) => {\n          let { source, fileName } = await getSourceFromVirtualCssFile(path);\n\n          if (typeof processCss === 'function') {\n            source = await processCss(source);\n          }\n\n          const rootDir = build.initialOptions.absWorkingDir ?? process.cwd();\n\n          const resolveDir = dirname(join(rootDir, fileName));\n\n          return {\n            contents: source,\n            loader: 'css',\n            resolveDir,\n          };\n        },\n      );\n\n      build.onLoad({ filter: cssFileFilter }, async ({ path }) => {\n        const combinedEsbuildOptions = { ...esbuildOptions };\n        const identOption =\n          identifiers ?? (build.initialOptions.minify ? 'short' : 'debug');\n\n        // To avoid a breaking change this combines the `external` option from\n        // esbuildOptions with the pre-existing externals option.\n        if (externals) {\n          if (combinedEsbuildOptions.external) {\n            combinedEsbuildOptions.external.push(...externals);\n          } else {\n            combinedEsbuildOptions.external = externals;\n          }\n        }\n\n        const { source, watchFiles } = await compile({\n          filePath: path,\n          cwd: build.initialOptions.absWorkingDir,\n          esbuildOptions: combinedEsbuildOptions,\n          identOption,\n        });\n\n        const contents = await processVanillaFile({\n          source,\n          filePath: path,\n          outputCss,\n          identOption,\n        });\n\n        return {\n          contents,\n          loader: 'js',\n          watchFiles,\n        };\n      });\n    },\n  };\n}\n"
  },
  {
    "path": "packages/esbuild-plugin-next/CHANGELOG.md",
    "content": "# @vanilla-extract/esbuild-plugin-next\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:\n  - @vanilla-extract/integration@7.1.9\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.6\n\n## 0.0.6\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n\n## 0.0.5\n\n### Patch Changes\n\n- [#1309](https://github.com/vanilla-extract-css/vanilla-extract/pull/1309) [`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14) Thanks [@mrm007](https://github.com/mrm007)! - Correctly resolve module paths when using Vite plugins that affect module resolution, such as [`vite-tsconfig-paths`](https://github.com/aleclarson/vite-tsconfig-paths)\n\n- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:\n  - @vanilla-extract/integration@7.0.0\n\n## 0.0.4\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:\n  - @vanilla-extract/integration@6.4.0\n\n## 0.0.3\n\n### Patch Changes\n\n- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`\n\n## 0.0.2\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/integration@6.2.5\n\n## 0.0.1\n\n### Patch Changes\n\n- [#1232](https://github.com/vanilla-extract-css/vanilla-extract/pull/1232) [`ca68a90`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ca68a9091111cf137071fb43a658952d9aaba71d) Thanks [@mrm007](https://github.com/mrm007)! - Make `esbuild` an optional peer dependency\n"
  },
  {
    "path": "packages/esbuild-plugin-next/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"@vanilla-extract/esbuild-plugin-next\",\n  \"version\": \"0.0.10\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-esbuild-plugin-next.cjs.js\",\n  \"module\": \"dist/vanilla-extract-esbuild-plugin-next.esm.js\",\n  \"types\": \"dist/vanilla-extract-esbuild-plugin-next.cjs.d.ts\",\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/esbuild-plugin-next\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/compiler\": \"workspace:^\",\n    \"@vanilla-extract/integration\": \"workspace:^\"\n  },\n  \"peerDependencies\": {\n    \"esbuild\": \">=0.17.6\"\n  },\n  \"peerDependenciesMeta\": {\n    \"esbuild\": {\n      \"optional\": true\n    }\n  },\n  \"devDependencies\": {\n    \"esbuild\": \"~0.27.0\"\n  }\n}\n"
  },
  {
    "path": "packages/esbuild-plugin-next/src/index.ts",
    "content": "import { dirname } from 'path';\n\nimport {\n  type CreateCompilerOptions,\n  createCompiler,\n} from '@vanilla-extract/compiler';\nimport {\n  cssFileFilter,\n  vanillaExtractTransformPlugin,\n  type IdentifierOption,\n} from '@vanilla-extract/integration';\nimport type { Plugin } from 'esbuild';\n\nconst vanillaCssNamespace = 'vanilla-extract-css-ns';\n\ninterface VanillaExtractPluginOptions {\n  outputCss?: boolean;\n  runtime?: boolean;\n  processCss?: (css: string) => Promise<string>;\n  identifiers?: IdentifierOption;\n  compilerVitePlugins?: CreateCompilerOptions['vitePlugins'];\n}\nexport function vanillaExtractPlugin({\n  outputCss = true,\n  runtime = false,\n  processCss,\n  identifiers: identOption,\n  compilerVitePlugins: vitePlugins,\n}: VanillaExtractPluginOptions = {}): Plugin {\n  if (runtime) {\n    // If using runtime CSS then just apply fileScopes and debug IDs to code\n    return vanillaExtractTransformPlugin({ identOption });\n  }\n\n  return {\n    name: 'vanilla-extract',\n    async setup(build) {\n      const root = build.initialOptions.absWorkingDir || process.cwd();\n      const identifiers =\n        identOption || (build.initialOptions.minify ? 'short' : 'debug');\n\n      const compiler = createCompiler({ root, identifiers, vitePlugins });\n\n      build.onDispose(async () => {\n        await compiler.close();\n      });\n\n      build.onResolve({ filter: /\\.vanilla\\.css/ }, (args) => {\n        return {\n          path: args.path,\n          namespace: vanillaCssNamespace,\n        };\n      });\n\n      build.onLoad(\n        { filter: /.*/, namespace: vanillaCssNamespace },\n        async ({ path }) => {\n          const [vanillaModulePath] = path.split('.vanilla.css');\n\n          let { css, filePath } = compiler.getCssForFile(vanillaModulePath);\n\n          if (typeof processCss === 'function') {\n            css = await processCss(css);\n          }\n\n          return {\n            contents: css,\n            loader: 'css',\n            resolveDir: dirname(filePath),\n          };\n        },\n      );\n\n      build.onLoad({ filter: cssFileFilter }, async ({ path }) => {\n        const { source, watchFiles } = await compiler.processVanillaFile(path, {\n          outputCss,\n        });\n\n        return {\n          contents: source,\n          loader: 'js',\n          watchFiles: Array.from(watchFiles),\n        };\n      });\n    },\n  };\n}\n"
  },
  {
    "path": "packages/integration/CHANGELOG.md",
    "content": "# @vanilla-extract/integration\n\n## 8.0.9\n\n### Patch Changes\n\n- [#1585](https://github.com/vanilla-extract-css/vanilla-extract/pull/1585) [`c34e69a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c34e69a918b55e02ce8106a193b10dcfce933437) Thanks [@sashank-gogula-glean](https://github.com/sashank-gogula-glean)! - Fixed a race condition in `processVanillaFile` that could cause missing classnames during CSS serialization\n\n- Updated dependencies [[`9b1bfd0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b1bfd068a61a042ff0276a901edf4e44f6c8cea)]:\n  - @vanilla-extract/css@1.19.1\n\n## 8.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99)]:\n  - @vanilla-extract/css@1.19.0\n\n## 8.0.7\n\n### Patch Changes\n\n- [#1648](https://github.com/vanilla-extract-css/vanilla-extract/pull/1648) [`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704) Thanks [@sallustfire](https://github.com/sallustfire)! - `serializeCss|deserializeCss`: Use `base64url` encoding instead of `base64` to avoid errors in virtual file paths\n\n- Updated dependencies [[`0b2c09e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b2c09e0fec1bee0e996f1920a106daab471178a), [`c6047fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6047fbe3f5e55a45780aa3dffd478a7743b8b3a), [`8b49b35`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b49b354d4364ce6e0db5e8ba16c92ca3e6b9cea)]:\n  - @vanilla-extract/css@1.18.0\n\n## 8.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`11a7c66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/11a7c668683d0c3e324d4337676e807680a895bd)]:\n  - @vanilla-extract/css@1.17.5\n\n## 8.0.5\n\n### Patch Changes\n\n- [#1653](https://github.com/vanilla-extract-css/vanilla-extract/pull/1653) [`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1) Thanks [@askoufis](https://github.com/askoufis)! - Update `esbuild` dependency range to include `^0.26.0` and `^0.27.0`\n\n## 8.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:\n  - @vanilla-extract/babel-plugin-debug-ids@1.2.2\n  - @vanilla-extract/css@1.17.4\n\n## 8.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`f0533be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0533be939e6835ae961e3dd10b764c0c052ee75), [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:\n  - @vanilla-extract/css@1.17.3\n  - @vanilla-extract/babel-plugin-debug-ids@1.2.1\n\n## 8.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8), [`c66be53`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c66be53d600802b2922da1d6034e2a5ff3fbbcae)]:\n  - @vanilla-extract/css@1.17.2\n\n## 8.0.1\n\n### Patch Changes\n\n- [#1545](https://github.com/vanilla-extract-css/vanilla-extract/pull/1545) [`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.25.x`\n\n## 8.0.0\n\n### Major Changes\n\n- [#1536](https://github.com/vanilla-extract-css/vanilla-extract/pull/1536) [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3) Thanks [@askoufis](https://github.com/askoufis)! - Remove `createCompiler` function and `Compiler` and `CreateCompilerOptions` types\n\n  BREAKING CHANGE: These APIs have been moved to the new `@vanilla-extract/compiler` package\n\n### Minor Changes\n\n- [#1536](https://github.com/vanilla-extract-css/vanilla-extract/pull/1536) [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3) Thanks [@askoufis](https://github.com/askoufis)! - Export `serializeVanillaModule` function\n\n### Patch Changes\n\n- [#1530](https://github.com/vanilla-extract-css/vanilla-extract/pull/1530) [`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.24.x`\n\n- [#1535](https://github.com/vanilla-extract-css/vanilla-extract/pull/1535) [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97) Thanks [@askoufis](https://github.com/askoufis)! - Fixes an error that sometimes occurred when loading a page via the astro dev server\n\n- Updated dependencies [[`c432ff3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c432ff33a8aead2c94fa6a4fcc9fcb1d7990427d)]:\n  - @vanilla-extract/css@1.17.1\n\n## 7.1.12\n\n### Patch Changes\n\n- Updated dependencies [[`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b), [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b), [`4abfc0b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4abfc0b47c675f9a7bfdb4c3316b1c62d2b8e558), [`fd673f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd673f658da3b0019d19a0c7d6d9208d1685ff5b)]:\n  - @vanilla-extract/babel-plugin-debug-ids@1.2.0\n  - @vanilla-extract/css@1.17.0\n\n## 7.1.11\n\n### Patch Changes\n\n- Updated dependencies [[`103ce57`](https://github.com/vanilla-extract-css/vanilla-extract/commit/103ce57c98bf632a56fab1d71ae44039a77f5291)]:\n  - @vanilla-extract/css@1.16.1\n\n## 7.1.10\n\n### Patch Changes\n\n- Updated dependencies [[`cd9d8b2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cd9d8b231bbd7a7ac6674d2b28f77cff93e5be9e), [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415), [`7b256d2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b256d2a8ee815911ee96199abe78d6b7246c415)]:\n  - @vanilla-extract/css@1.16.0\n  - @vanilla-extract/babel-plugin-debug-ids@1.1.0\n\n## 7.1.9\n\n### Patch Changes\n\n- [#1431](https://github.com/vanilla-extract-css/vanilla-extract/pull/1431) [`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047) Thanks [@otaviomad](https://github.com/otaviomad)! - Fixes a bug in the `vite-node` compiler resulting in incorrectly ordered class compositions in certain cases\n\n- Updated dependencies [[`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/css@1.15.5\n\n## 7.1.8\n\n### Patch Changes\n\n- [#1461](https://github.com/vanilla-extract-css/vanilla-extract/pull/1461) [`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b) Thanks [@askoufis](https://github.com/askoufis)! - Widen `esbuild` dependency range to include `~0.22.0` and `~0.23.0`\n\n- [#1463](https://github.com/vanilla-extract-css/vanilla-extract/pull/1463) [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a) Thanks [@askoufis](https://github.com/askoufis)! - Export types with `export { type T }` syntax\n\n- Updated dependencies [[`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/css@1.15.4\n\n## 7.1.7\n\n### Patch Changes\n\n- [#1436](https://github.com/vanilla-extract-css/vanilla-extract/pull/1436) [`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e) Thanks [@SimenB](https://github.com/SimenB)! - Extend `esbuild` dependency range to include `~0.20.0` and `~0.21.0`\n\n## 7.1.6\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n\n## 7.1.5\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/babel-plugin-debug-ids@1.0.6\n  - @vanilla-extract/css@1.15.2\n\n## 7.1.4\n\n### Patch Changes\n\n- [#1406](https://github.com/vanilla-extract-css/vanilla-extract/pull/1406) [`5e06ada9309c46b20d318051f80121886da4ff29`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5e06ada9309c46b20d318051f80121886da4ff29) Thanks [@askoufis](https://github.com/askoufis)! - `addFileScope`: Fixes a bug where non-template strings that contained a newline where being mangled\n\n- [#1406](https://github.com/vanilla-extract-css/vanilla-extract/pull/1406) [`5e06ada9309c46b20d318051f80121886da4ff29`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5e06ada9309c46b20d318051f80121886da4ff29) Thanks [@askoufis](https://github.com/askoufis)! - Bump `dedent` dependency to `^1.5.3`\n\n## 7.1.3\n\n### Patch Changes\n\n- [#1388](https://github.com/vanilla-extract-css/vanilla-extract/pull/1388) [`606660618dc5efa6c529f77cebf9d2b8dc379dbd`](https://github.com/vanilla-extract-css/vanilla-extract/commit/606660618dc5efa6c529f77cebf9d2b8dc379dbd) Thanks [@askoufis](https://github.com/askoufis)! - Remove `lodash` dependency\n\n- [#1386](https://github.com/vanilla-extract-css/vanilla-extract/pull/1386) [`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb) Thanks [@askoufis](https://github.com/askoufis)! - Replace `outdent` dependency with `dedent`\n\n- Updated dependencies [[`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/css@1.15.1\n\n## 7.1.2\n\n### Patch Changes\n\n- [#1374](https://github.com/vanilla-extract-css/vanilla-extract/pull/1374) [`c8aefe0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c8aefe0c5fb6d8b8b82dd0f05ae837e7e2f03a9f) Thanks [@askoufis](https://github.com/askoufis)! - Update `@vanilla-extract/css` dependency\n\n- Updated dependencies [[`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed)]:\n  - @vanilla-extract/css@1.14.2\n\n## 7.1.1\n\n### Patch Changes\n\n- [#1319](https://github.com/vanilla-extract-css/vanilla-extract/pull/1319) [`6f7f738`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6f7f7382495582759cececa421ef83142935772b) Thanks [@joeldavuk](https://github.com/joeldavuk)! - Update Babel dependencies to address https://github.com/advisories/GHSA-67hx-6x53-jw92\n\n- Updated dependencies [[`6f7f738`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6f7f7382495582759cececa421ef83142935772b)]:\n  - @vanilla-extract/babel-plugin-debug-ids@1.0.5\n\n## 7.1.0\n\n### Minor Changes\n\n- [#1314](https://github.com/vanilla-extract-css/vanilla-extract/pull/1314) [`e8a6850`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e8a6850ea360ede0ed4385421e41c069008772f2) Thanks [@mrm007](https://github.com/mrm007)! - A Vite config object can be passed to the vite-node compiler via the `viteConfig` option\n\n  `viteResolve` and `vitePlugins` options are deprecated and will be removed in a future version.\n\n## 7.0.0\n\n### Major Changes\n\n- [#1309](https://github.com/vanilla-extract-css/vanilla-extract/pull/1309) [`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14) Thanks [@mrm007](https://github.com/mrm007)! - Use absolute paths internally to make sure Vite resolves modules correctly\n\n  This change only affects integrations that use the vite-node compiler, which is currently the esbuild (next) and Vite plugins\n\n## 6.5.0\n\n### Minor Changes\n\n- [#1304](https://github.com/vanilla-extract-css/vanilla-extract/pull/1304) [`545bf82`](https://github.com/vanilla-extract-css/vanilla-extract/commit/545bf82f127598ac72265164c72e1a1aad558491) Thanks [@fukumasuya](https://github.com/fukumasuya)! - Add a `viteResolve` option to the vite-node compiler\n\n  This allows integrations to provide a Vite `resolve` config to the vite-node compiler, which will be used for resolving imports. These options include [`resolve.alias`], [`resolve.dedupe`], [`resolve.conditions`], [`resolve.mainFields`], [`resolve.extensions`], and others.\n\n  [`resolve.alias`]: https://vitejs.dev/config/shared-options.html#resolve-alias\n  [`resolve.dedupe`]: https://vitejs.dev/config/shared-options.html#resolve-dedupe\n  [`resolve.conditions`]: https://vitejs.dev/config/shared-options.html#resolve-conditions\n  [`resolve.mainFields`]: https://vitejs.dev/config/shared-options.html#resolve-mainfields\n  [`resolve.extensions`]: https://vitejs.dev/config/shared-options.html#resolve-extensions\n\n## 6.4.0\n\n### Minor Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Export a `normalizePath` function that converts path separators to forward slashes\n\n  **Example usage**\n\n  ```ts\n  import { normalizePath } from '@vanilla-extract/integration';\n\n  normalizePath('foo\\\\bar'); // 'foo/bar'\n  normalizePath('foo/bar'); // 'foo/bar'\n  ```\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n## 6.3.0\n\n### Minor Changes\n\n- [#1273](https://github.com/vanilla-extract-css/vanilla-extract/pull/1273) [`959c646`](https://github.com/vanilla-extract-css/vanilla-extract/commit/959c646ad6154ef0f8e357660319c7049e8b0459) Thanks [@lars-berger](https://github.com/lars-berger)! - Allow `conditions` option to be passed through to esbuild\n\n### Patch Changes\n\n- [#1252](https://github.com/vanilla-extract-css/vanilla-extract/pull/1252) [`5bc98a4`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5bc98a4af30a339336ab4ef7c387d3e809586a83) Thanks [@Ethan-PageUp](https://github.com/Ethan-PageUp)! - Unpin esbuild and broaden the version range\n\n- [#1243](https://github.com/vanilla-extract-css/vanilla-extract/pull/1243) [`1566f92`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1566f9238078a3cfefec9ae5023b56aba02875d4) Thanks [@askoufis](https://github.com/askoufis)! - Experimental `vite-node` compiler: Skip transforming CSS for files that won't generate any CSS\n\n## 6.2.5\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Upgrade Vite and vite-node\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/babel-plugin-debug-ids@1.0.4\n\n## 6.2.4\n\n### Patch Changes\n\n- [#1238](https://github.com/vanilla-extract-css/vanilla-extract/pull/1238) [`fd5d9fc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5d9fc389b84d7de92ec86d89305185d6c4cfd4) Thanks [@askoufis](https://github.com/askoufis)! - Disable config file resolution in experimental `vite-node` compiler\n\n## 6.2.3\n\n### Patch Changes\n\n- [#1195](https://github.com/vanilla-extract-css/vanilla-extract/pull/1195) [`c446b5e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c446b5e95ee4e64f7af0da484d2dda81a7f6a522) Thanks [@HelloWorld017](https://github.com/HelloWorld017)! - Ensure userland babel config can not affect integration transforms\n\n- Updated dependencies [[`906d288`](https://github.com/vanilla-extract-css/vanilla-extract/commit/906d28881d2c3cc1f5a49f00b8b697df66a5baa4), [`911c8b7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/911c8b7b95b1164d2ad5fbf555209df9e8b3ad99)]:\n  - @vanilla-extract/css@1.14.0\n\n## 6.2.2\n\n### Patch Changes\n\n- [#1167](https://github.com/vanilla-extract-css/vanilla-extract/pull/1167) [`53fd2a6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/53fd2a6a3387a47745387f792d723deaf37d84a2) Thanks [@askoufis](https://github.com/askoufis)! - Bump `eval` to `0.1.8`\n\n## 6.2.1\n\n### Patch Changes\n\n- [#1036](https://github.com/vanilla-extract-css/vanilla-extract/pull/1036) [`7e876b6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7e876b6f114e700c91734d79579863b83147231e) Thanks [@askoufis](https://github.com/askoufis)! - Sort serialized module exports\n\n  Fixes a Vanilla module serialization bug that sometimes resulted in variables being used before they were declared\n\n## 6.2.0\n\n### Minor Changes\n\n- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `createCompiler` function for creating a compiler instance that can be re-used between builds. This is a low-level function intended for use by bundler plugins and, as such, is currently undocumented. Note that in order to use the new compiler you must also update `@vanilla-extract/css` to v1.10.0.\n\n* [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add support for `onBeginFileScope` adapter lifecycle hook\n\n### Patch Changes\n\n- [#1024](https://github.com/vanilla-extract-css/vanilla-extract/pull/1024) [`45d3b86`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45d3b86960027cdfa81989f8e2036a6768cc1e1d) Thanks [@huw](https://github.com/huw)! - Don’t throw when failing to add debug objects to an empty file\n\n* [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Bump esbuild to v0.17.6\n\n* Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/css@1.10.0\n\n## 6.1.2\n\n### Patch Changes\n\n- [#1031](https://github.com/vanilla-extract-css/vanilla-extract/pull/1031) [`316658f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/316658fc29341286fc14287eeeed44a36545b0c7) Thanks [@mrm007](https://github.com/mrm007)! - Add `.css.cjs` extension to the Vanilla Extract file filter\n\n## 6.1.1\n\n### Patch Changes\n\n- [#996](https://github.com/vanilla-extract-css/vanilla-extract/pull/996) [`bd6ed30`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bd6ed30e0301d77ab21152e6d4a708e8ff491b74) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve Vanilla module serialization by allowing shared variables between exports\n\n- Updated dependencies [[`8a1751c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a1751c8fcbeaa0cfb8d894a8050535372516dd4)]:\n  - @vanilla-extract/babel-plugin-debug-ids@1.0.2\n\n## 6.1.0\n\n### Minor Changes\n\n- [#926](https://github.com/vanilla-extract-css/vanilla-extract/pull/926) [`7074969`](https://github.com/vanilla-extract-css/vanilla-extract/commit/70749697eb281086913ba7a2ec170a375832ed1c) Thanks [@ericmatthys](https://github.com/ericmatthys)! - Allow tsconfig option to be passed through to esbuild\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n\n## 6.0.3\n\n### Patch Changes\n\n- [#970](https://github.com/vanilla-extract-css/vanilla-extract/pull/970) [`16b9a71`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16b9a71e57cd2accf7a58d2bc92dd03cd33813b6) Thanks [@roginfarrer](https://github.com/roginfarrer)! - Updated addFileScope to work with CommonJS files\n\n## 6.0.2\n\n### Patch Changes\n\n- [#956](https://github.com/vanilla-extract-css/vanilla-extract/pull/956) [`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101) Thanks [@mrm007](https://github.com/mrm007)! - Ensure support for new TypeScript language features by bumping the minimum required Babel dependency versions.\n\n* [#973](https://github.com/vanilla-extract-css/vanilla-extract/pull/973) [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a) Thanks [@cliffordfajardo](https://github.com/cliffordfajardo)! - Upgrade esbuild `^0.11.16` to `^0.16.3`\n\n* Updated dependencies [[`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101), [`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/babel-plugin-debug-ids@1.0.1\n  - @vanilla-extract/css@1.9.3\n\n## 6.0.1\n\n### Patch Changes\n\n- [#869](https://github.com/vanilla-extract-css/vanilla-extract/pull/869) [`2d08761`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d08761598668c0e7066837ccb0be7b4d5637701) Thanks [@mrm007](https://github.com/mrm007)! - Use correct async Babel transform method in integration transform\n\n- 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)]:\n  - @vanilla-extract/css@1.9.2\n\n## 6.0.0\n\n### Major Changes\n\n- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - `vanillaExtractFilescopePlugin` has been renamed to `vanillaExtractTransformPlugin`\n\n* [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - `compile` now expects a valid `identOption` parameter\n\n### Minor Changes\n\n- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `transform` and `transformSync` functions\n\n  The transform APIs can be used to append filescopes and automatic debug IDs to `.css.ts` files.\n\n## 5.0.1\n\n### Patch Changes\n\n- [#801](https://github.com/vanilla-extract-css/vanilla-extract/pull/801) [`bb48520`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bb485203f85e01272e44fc26df78581f3b8b4da0) Thanks [@mrm007](https://github.com/mrm007)! - Omit [`Symbol.toStringTag`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) when serializing module exports.\n\n## 5.0.0\n\n### Major Changes\n\n- [#668](https://github.com/vanilla-extract-css/vanilla-extract/pull/668) [`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Add esbuild configurations to vite/esbuild/rollup plugins\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n\n## 4.0.1\n\n### Patch Changes\n\n- [#673](https://github.com/vanilla-extract-css/vanilla-extract/pull/673) [`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where `.css.ts` files with the same file path from other packages could have identifier collisions\n\n## 4.0.0\n\n### Major Changes\n\n- [#647](https://github.com/vanilla-extract-css/vanilla-extract/pull/647) [`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Update `addFileScope` to always update and only use file names\n\n## 3.0.1\n\n### Patch Changes\n\n- [#639](https://github.com/vanilla-extract-css/vanilla-extract/pull/639) [`7b9ddfc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7b9ddfc30dacc66db11253f9d1862e7ba46b88ec) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Fix \"\\_\\_webpack_require\\_\\_ is not defined\" error\n\n## 3.0.0\n\n### Major Changes\n\n- [#623](https://github.com/vanilla-extract-css/vanilla-extract/pull/623) [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - BREAKING CHANGE\n\n  `getSourceFromVirtualCssFile` is now async.\n\n* [#623](https://github.com/vanilla-extract-css/vanilla-extract/pull/623) [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `serializeCss` and `deserializeCss` utilities.\n\n  BREAKING CHANGE\n\n  Remove `base64Source` from `serializeVirtualCssPath`. Use the new `serializeCss` and `deserializeCss` functions if required.\n\n### Patch Changes\n\n- [#621](https://github.com/vanilla-extract-css/vanilla-extract/pull/621) [`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9) Thanks [@nayaabkhan](https://github.com/nayaabkhan)! - Improve build performance when creating large CSS files\n\n## 2.0.2\n\n### Patch Changes\n\n- [#609](https://github.com/vanilla-extract-css/vanilla-extract/pull/609) [`02f2a23`](https://github.com/vanilla-extract-css/vanilla-extract/commit/02f2a236ac0b9ce1feeac4f840eb0759e8ca1b6f) Thanks [@xnuk](https://github.com/xnuk)! - Remove unused `chalk` dep\n\n## 2.0.1\n\n### Patch Changes\n\n- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12\n\n## 2.0.0\n\n### Major Changes\n\n- [#517](https://github.com/vanilla-extract-css/vanilla-extract/pull/517) [`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69) Thanks [@benjervis](https://github.com/benjervis)! - processVanillaFile is now async\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n\n## 1.4.3\n\n### Patch Changes\n\n- [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Export the fileScope functions.\n\n  `stringifyFileScope` and `parseFileScope` are now exported to be used in other packages.\n\n- Updated dependencies [[`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0)]:\n  - @vanilla-extract/css@1.6.2\n\n## 1.4.2\n\n### Patch Changes\n\n- [#393](https://github.com/vanilla-extract-css/vanilla-extract/pull/393) [`2f379f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2f379f118c2a2fe6dc08a1cc15a395dbc0f17ece) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix compilation errors in Vite 2.6\n\n## 1.4.1\n\n### Patch Changes\n\n- [#389](https://github.com/vanilla-extract-css/vanilla-extract/pull/389) [`23d2757`](https://github.com/vanilla-extract-css/vanilla-extract/commit/23d275794d38f01049b824e3e000fb1bb2411717) Thanks [@aulneau](https://github.com/aulneau)! - This update adds `mjs` to the file `*.css.*` regex, enabling better support for ESM packages/files.\n\n## 1.4.0\n\n### Minor Changes\n\n- [#348](https://github.com/vanilla-extract-css/vanilla-extract/pull/348) [`c6cd1f2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6cd1f2eee982474c213f43fc23ee38b7a8c5e42) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `addFunctionSerializer` function\n\n  This also marks `addRecipe` as deprecated.\n\n### Patch Changes\n\n- Updated dependencies [[`c6cd1f2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c6cd1f2eee982474c213f43fc23ee38b7a8c5e42)]:\n  - @vanilla-extract/css@1.5.0\n\n## 1.3.0\n\n### Minor Changes\n\n- [#341](https://github.com/vanilla-extract-css/vanilla-extract/pull/341) [`0b743e7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `addFileScope` API\n\n### Patch Changes\n\n- [#343](https://github.com/vanilla-extract-css/vanilla-extract/pull/343) [`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Cleanup adapter after processing styles\n\n- Updated dependencies [[`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772)]:\n  - @vanilla-extract/css@1.4.1\n\n## 1.2.0\n\n### Minor Changes\n\n- [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support configurable identifier types\n\n### Patch Changes\n\n- Updated dependencies [[`26832f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/26832f162e75b72f83dba0c230295a5dfed683aa), [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275)]:\n  - @vanilla-extract/css@1.3.0\n\n## 1.1.0\n\n### Minor Changes\n\n- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of `composeStyles` to be used in selectors\n\n  When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.\n\n  ```ts\n  import {\n    style,\n    globalStyle,\n    composeStyles\n  } from '@vanilla-extract/css';\n\n  const background = style({ background: 'mintcream' });\n  const padding = style({ padding: 12 });\n\n  export const container = composeStyles(\n    background,\n    padding\n  );\n\n  globalStyle(`${container} *`, {\n    boxSizing: 'border-box'\n  });\n  ```\n\n### Patch Changes\n\n- Updated dependencies [[`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:\n  - @vanilla-extract/css@1.2.0\n\n## 1.0.1\n\n### Patch Changes\n\n- [#176](https://github.com/vanilla-extract-css/vanilla-extract/pull/176) [`cbfe0de`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cbfe0def098dcf820fb710388cdc82b48436bdca) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Continue searching for package.json if one is found with no name\n\n## 1.0.0\n\n### Major Changes\n\n- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1\n\n### Patch Changes\n\n- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:\n  - @vanilla-extract/css@1.0.0\n\n## 0.1.4\n\n### Patch Changes\n\n- [#110](https://github.com/vanilla-extract-css/vanilla-extract/pull/110) [`e41529e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e41529e50efe22e1429e3b60f6df83e299dea6c0) Thanks [@mxmul](https://github.com/mxmul)! - Add `fileScope` to `serializeVirtualCssPath` option\n\n## 0.1.3\n\n### Patch Changes\n\n- [#136](https://github.com/vanilla-extract-css/vanilla-extract/pull/136) [`2247cdc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2247cdc55c04cdaa54cce1f69361da9617179a6b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix serialization of booleans\n\n## 0.1.2\n\n### Patch Changes\n\n- [#133](https://github.com/vanilla-extract-css/vanilla-extract/pull/133) [`a50de75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a50de7505849a317d76713d225514050a38e23e2) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve Windows support\n\n  Normalize all file paths to POSIX format. This fixes incorrect file paths on Windows and ensures consistent hashes across all operating systems.\n\n- Updated dependencies [[`ed76e45`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ed76e450038cb7cbaf12a511fda9e2a3a6d21b96), [`4f92126`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4f92126c92d853f02e73ffadfed424b594e41166)]:\n  - @vanilla-extract/css@0.5.0\n\n## 0.1.1\n\n### Patch Changes\n\n- [#126](https://github.com/vanilla-extract-css/vanilla-extract/pull/126) [`400ece7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/400ece75e1d2b385c2b76a80e8a6872710d3e2f9) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Normalize virtual CSS file paths for Windows\n"
  },
  {
    "path": "packages/integration/README.md",
    "content": "# @vanilla-extract/integration\n\nThis package is not intended for public consumption."
  },
  {
    "path": "packages/integration/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/integration\",\n  \"version\": \"8.0.9\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-integration.cjs.js\",\n  \"types\": \"dist/vanilla-extract-integration.cjs.d.ts\",\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/integration\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@babel/core\": \"^7.23.9\",\n    \"@babel/plugin-syntax-typescript\": \"^7.23.3\",\n    \"@vanilla-extract/babel-plugin-debug-ids\": \"workspace:^\",\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"dedent\": \"^1.5.3\",\n    \"esbuild\": \"npm:esbuild@>=0.17.6 <0.28.0\",\n    \"eval\": \"0.1.8\",\n    \"find-up\": \"^5.0.0\",\n    \"javascript-stringify\": \"^2.0.1\",\n    \"mlly\": \"^1.4.2\"\n  },\n  \"devDependencies\": {\n    \"@types/babel__core\": \"^7.20.5\"\n  }\n}\n"
  },
  {
    "path": "packages/integration/src/addFileScope.test.ts",
    "content": "import { describe, expect, test } from 'vitest';\nimport dedent from 'dedent';\nimport { sep, posix, win32 } from 'path';\n\nimport { addFileScope, normalizePath } from './addFileScope';\n\nconst raw = String.raw;\n\n// remove quotes around the snapshot\nexpect.addSnapshotSerializer({\n  test: (val) => typeof val === 'string',\n  print: (val) => (val as string).trim(),\n});\n\ndescribe('ESM', () => {\n  test('should add missing fileScope', () => {\n    const source = dedent`\n    import {style} from '@vanilla-extract/css';\n\n    export const myStyle = style({});\n    `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n      setFileScope(\"app/app.css.ts\", \"my-package\");\n      import {style} from '@vanilla-extract/css';\n\n      export const myStyle = style({});\n      endFileScope();\n    `);\n  });\n\n  test('should add global adapter setup when \"globalAdapterIdentifier\" is provided', () => {\n    const source = dedent`\n    import {style} from '@vanilla-extract/css';\n\n    export const myStyle = style({});\n    `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n        globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER',\n      }),\n    ).toMatchInlineSnapshot(`\n      import * as __vanilla_css_adapter__ from \"@vanilla-extract/css/adapter\";\n      __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);\n      import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n      setFileScope(\"app/app.css.ts\", \"my-package\");\n      import {style} from '@vanilla-extract/css';\n\n      export const myStyle = style({});\n      endFileScope();\n      __vanilla_css_adapter__.removeAdapter();\n    `);\n  });\n\n  test('should update existing fileScope', () => {\n    const source = dedent`\n    import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n    setFileScope(\"some-weird-file\", \"some-weird-package\");\n    import {style} from '@vanilla-extract/css';\n\n    export const myStyle = style({});\n    endFileScope();\n    `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n      setFileScope(\"app/app.css.ts\", \"my-package\");\n      import {style} from '@vanilla-extract/css';\n\n      export const myStyle = style({});\n      endFileScope();\n    `);\n  });\n\n  test('should update existing fileScope with newlines', () => {\n    const source = dedent`\n      import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n      setFileScope(\n        \"some-weird-file\",\n        \"some-weird-package\"\n      );\n      import {style} from '@vanilla-extract/css';\n\n      export const myStyle = style({});\n      endFileScope();\n      `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n      setFileScope(\"app/app.css.ts\", \"my-package\");\n      import {style} from '@vanilla-extract/css';\n\n      export const myStyle = style({});\n      endFileScope();\n    `);\n  });\n\n  test('should handle namespaced filescope calls', () => {\n    const source = dedent`\n    import * as vanillaFileScope from \"@vanilla-extract/css/fileScope\";\n    vanillaFileScope.setFileScope(\"some-weird-file\");\n    import {style} from '@vanilla-extract/css';\n\n    export const myStyle = style({});\n    vanillaFileScope.endFileScope();\n    `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      import * as vanillaFileScope from \"@vanilla-extract/css/fileScope\";\n      vanillaFileScope.setFileScope(\"app/app.css.ts\", \"my-package\");\n      import {style} from '@vanilla-extract/css';\n\n      export const myStyle = style({});\n      vanillaFileScope.endFileScope();\n    `);\n  });\n\n  test('should preserve non-template strings that contain newline characters', () => {\n    const source = `export const multiLineString = \"\\\\nfoo\\\\n\";`;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n      setFileScope(\"app/app.css.ts\", \"my-package\");\n      export const multiLineString = \"\\\\nfoo\\\\n\";\n      endFileScope();\n    `);\n  });\n});\n\ndescribe('CJS', () => {\n  test('should add missing fileScope', () => {\n    const source = dedent`\n    const _css = require('@vanilla-extract/css');\n\n    var myStyle = _css.style({});\n    exports.myStyle = myStyle;\n    `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n      __vanilla_filescope__.setFileScope(\"app/app.css.ts\", \"my-package\");\n      const _css = require('@vanilla-extract/css');\n\n      var myStyle = _css.style({});\n      exports.myStyle = myStyle;\n      __vanilla_filescope__.endFileScope();\n    `);\n  });\n\n  test('should add global adapter setup when \"globalAdapterIdentifier\" is provided', () => {\n    const source = dedent`\n    const _css = require('@vanilla-extract/css');\n\n    var myStyle = _css.style({});\n    exports.myStyle = myStyle;\n    `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n        globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER',\n      }),\n    ).toMatchInlineSnapshot(`\n      const __vanilla_css_adapter__ = require(\"@vanilla-extract/css/adapter\");\n      __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER);\n      const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n      __vanilla_filescope__.setFileScope(\"app/app.css.ts\", \"my-package\");\n      const _css = require('@vanilla-extract/css');\n\n      var myStyle = _css.style({});\n      exports.myStyle = myStyle;\n      __vanilla_filescope__.endFileScope();\n      __vanilla_css_adapter__.removeAdapter();\n    `);\n  });\n\n  test('should update existing fileScope', () => {\n    const source = dedent`\n    const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n    __vanilla_filescope__.setFileScope(\"some-weird-file\", \"some-weird-package\");\n    const _css = require('@vanilla-extract/css');\n\n    var myStyle = _css.style({});\n    exports.myStyle = myStyle;\n    __vanilla_filescope__.endFileScope();\n    `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n      __vanilla_filescope__.setFileScope(\"app/app.css.ts\", \"my-package\");\n      const _css = require('@vanilla-extract/css');\n\n      var myStyle = _css.style({});\n      exports.myStyle = myStyle;\n      __vanilla_filescope__.endFileScope();\n    `);\n  });\n\n  test('should update existing fileScope with newlines', () => {\n    const source = dedent`\n      const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n      __vanilla_filescope__.setFileScope(\n        \"some-weird-file\",\n        \"some-weird-package\"\n      );\n      const _css = require('@vanilla-extract/css');\n\n      const myStyle = _css.style({});\n      exports.myStyle = myStyle;\n      __vanilla_filescope__.endFileScope();\n      `;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n      __vanilla_filescope__.setFileScope(\"app/app.css.ts\", \"my-package\");\n      const _css = require('@vanilla-extract/css');\n\n      const myStyle = _css.style({});\n      exports.myStyle = myStyle;\n      __vanilla_filescope__.endFileScope();\n    `);\n  });\n\n  test('should preserve non-template strings that contain newline characters', () => {\n    const source = `exports.multiLineString =  \"\\\\nfoo\\\\n\";`;\n\n    expect(\n      addFileScope({\n        source,\n        rootPath: '/the-root',\n        filePath: '/the-root/app/app.css.ts',\n        packageName: 'my-package',\n      }),\n    ).toMatchInlineSnapshot(`\n      const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n      __vanilla_filescope__.setFileScope(\"app/app.css.ts\", \"my-package\");\n      exports.multiLineString =  \"\\\\nfoo\\\\n\";\n      __vanilla_filescope__.endFileScope();\n    `);\n  });\n});\n\ntest('platform-specific relative path', () => {\n  const { rootPath, filePath } = {\n    [posix.sep]: {\n      rootPath: '/the-root',\n      filePath: '/the-root/app/app.css.ts',\n    },\n    [win32.sep]: {\n      rootPath: raw`D:\\the-root`,\n      filePath: raw`D:\\the-root\\app\\app.css.ts`,\n    },\n  }[sep];\n\n  const source = dedent`\n    import { style } from '@vanilla-extract/css';\n\n    export const myStyle = style({});\n  `;\n\n  // The snapshot should be the same for either platform\n  expect(\n    addFileScope({\n      source,\n      rootPath,\n      filePath,\n      packageName: 'my-package',\n    }),\n  ).toMatchInlineSnapshot(`\n    import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n    setFileScope(\"app/app.css.ts\", \"my-package\");\n    import { style } from '@vanilla-extract/css';\n\n    export const myStyle = style({});\n    endFileScope();\n  `);\n});\n\ntest('normalizePath()', () => {\n  expect(normalizePath(raw`foo\\bar`)).toMatchInlineSnapshot(`foo/bar`);\n  expect(normalizePath(raw`foo/bar`)).toMatchInlineSnapshot(`foo/bar`);\n});\n"
  },
  {
    "path": "packages/integration/src/addFileScope.ts",
    "content": "import { posix, relative, win32 } from 'path';\nimport { detectSyntax } from 'mlly';\nimport dedent from 'dedent';\n\n// Inlined from @rollup/pluginutils\n// https://github.com/rollup/plugins/blob/33174f956304ab4aad4bbaba656f627c31679dc5/packages/pluginutils/src/normalizePath.ts#L5-L7\nexport const normalizePath = (filename: string): string =>\n  filename.split(win32.sep).join(posix.sep);\n\ninterface AddFileScopeParams {\n  source: string;\n  filePath: string;\n  rootPath: string;\n  packageName: string;\n  globalAdapterIdentifier?: string;\n}\nexport function addFileScope({\n  source,\n  filePath,\n  rootPath,\n  packageName,\n  globalAdapterIdentifier,\n}: AddFileScopeParams): string {\n  // Encode windows file paths as posix\n  const normalizedPath = normalizePath(relative(rootPath, filePath));\n\n  const { hasESM, isMixed } = detectSyntax(source);\n\n  if (source.includes('@vanilla-extract/css/fileScope')) {\n    source = source.replace(\n      /setFileScope\\(((\\n|.)*?)\\)/,\n      `setFileScope(\"${normalizedPath}\", \"${packageName}\")`,\n    );\n  } else {\n    if (hasESM && !isMixed) {\n      source = dedent(`\n        import { setFileScope, endFileScope } from \"@vanilla-extract/css/fileScope\";\n        setFileScope(\"${normalizedPath}\", \"${packageName}\");\n        ${source}\n        endFileScope();\n      `);\n    } else {\n      source = dedent(`\n        const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n        __vanilla_filescope__.setFileScope(\"${normalizedPath}\", \"${packageName}\");\n        ${source}\n        __vanilla_filescope__.endFileScope();\n      `);\n    }\n  }\n\n  if (globalAdapterIdentifier) {\n    const adapterImport =\n      hasESM && !isMixed\n        ? 'import * as __vanilla_css_adapter__ from \"@vanilla-extract/css/adapter\";'\n        : 'const __vanilla_css_adapter__ = require(\"@vanilla-extract/css/adapter\");';\n\n    source = dedent(`\n      ${adapterImport}\n      __vanilla_css_adapter__.setAdapter(${globalAdapterIdentifier});\n      ${source}\n      __vanilla_css_adapter__.removeAdapter();\n    `);\n  }\n\n  return source;\n}\n"
  },
  {
    "path": "packages/integration/src/compile.ts",
    "content": "import { dirname, join } from 'path';\nimport { promises as fs } from 'fs';\n\nimport {\n  build as esbuild,\n  type Plugin,\n  type BuildOptions as EsbuildOptions,\n} from 'esbuild';\n\nimport type { IdentifierOption } from './types';\nimport { cssFileFilter } from './filters';\nimport { transform } from './transform';\nimport { getPackageInfo } from './packageInfo';\n\ninterface VanillaExtractTransformPluginParams {\n  identOption?: IdentifierOption;\n}\nexport const vanillaExtractTransformPlugin = ({\n  identOption,\n}: VanillaExtractTransformPluginParams): Plugin => ({\n  name: 'vanilla-extract-filescope',\n  setup(build) {\n    const packageInfo = getPackageInfo(build.initialOptions.absWorkingDir);\n\n    build.onLoad({ filter: cssFileFilter }, async ({ path }) => {\n      const originalSource = await fs.readFile(path, 'utf-8');\n\n      const source = await transform({\n        source: originalSource,\n        filePath: path,\n        rootPath: build.initialOptions.absWorkingDir!,\n        packageName: packageInfo.name,\n        identOption:\n          identOption ?? (build.initialOptions.minify ? 'short' : 'debug'),\n      });\n\n      return {\n        contents: source,\n        loader: path.match(/\\.(ts|tsx)$/i) ? 'ts' : undefined,\n        resolveDir: dirname(path),\n      };\n    });\n  },\n});\n\nexport interface CompileOptions {\n  filePath: string;\n  identOption: IdentifierOption;\n  cwd?: string;\n  esbuildOptions?: Pick<\n    EsbuildOptions,\n    'plugins' | 'external' | 'define' | 'loader' | 'tsconfig' | 'conditions'\n  >;\n}\nexport async function compile({\n  filePath,\n  identOption,\n  cwd = process.cwd(),\n  esbuildOptions,\n}: CompileOptions): Promise<{\n  source: string;\n  watchFiles: string[];\n}> {\n  const result = await esbuild({\n    entryPoints: [filePath],\n    metafile: true,\n    bundle: true,\n    external: ['@vanilla-extract', ...(esbuildOptions?.external ?? [])],\n    platform: 'node',\n    write: false,\n    plugins: [\n      vanillaExtractTransformPlugin({ identOption }),\n      ...(esbuildOptions?.plugins ?? []),\n    ],\n    absWorkingDir: cwd,\n    loader: esbuildOptions?.loader,\n    define: esbuildOptions?.define,\n    tsconfig: esbuildOptions?.tsconfig,\n    conditions: esbuildOptions?.conditions,\n  });\n\n  const { outputFiles, metafile } = result;\n\n  if (!outputFiles || outputFiles.length !== 1) {\n    throw new Error('Invalid child compilation');\n  }\n\n  return {\n    source: outputFiles[0].text,\n    watchFiles: Object.keys(metafile?.inputs || {}).map((filePath) =>\n      join(cwd, filePath),\n    ),\n  };\n}\n"
  },
  {
    "path": "packages/integration/src/filters.ts",
    "content": "// Vite adds a \"?used\" to CSS files it detects, this isn't relevant for\n// .css.ts files but it's added anyway so we need to allow for it in the file match\nexport const cssFileFilter: RegExp = /\\.css\\.(js|cjs|mjs|jsx|ts|tsx)(\\?used)?$/;\nexport const virtualCssFileFilter: RegExp = /\\.vanilla\\.css\\?source=.*$/;\n"
  },
  {
    "path": "packages/integration/src/hash.ts",
    "content": "import crypto from 'crypto';\n\nexport const hash = (value: string): string =>\n  crypto.createHash('md5').update(value).digest('hex');\n"
  },
  {
    "path": "packages/integration/src/index.ts",
    "content": "export {\n  processVanillaFile,\n  parseFileScope,\n  stringifyFileScope,\n  serializeVanillaModule,\n} from './processVanillaFile';\nexport { getSourceFromVirtualCssFile } from './virtualFile';\nexport { getPackageInfo, type PackageInfo } from './packageInfo';\nexport {\n  compile,\n  vanillaExtractTransformPlugin,\n  type CompileOptions,\n} from './compile';\nexport { hash } from './hash';\nexport { addFileScope, normalizePath } from './addFileScope';\nexport { serializeCss, deserializeCss } from './serialize';\nexport { transformSync, transform } from './transform';\nexport { cssFileFilter, virtualCssFileFilter } from './filters';\nexport type { IdentifierOption } from './types';\n"
  },
  {
    "path": "packages/integration/src/packageInfo.ts",
    "content": "import path from 'path';\n\nimport findUp from 'find-up';\n\nexport interface PackageInfo {\n  name: string;\n  path: string;\n  dirname: string;\n}\n\nfunction getClosestPackageInfo(directory: string) {\n  const packageJsonPath = findUp.sync('package.json', {\n    cwd: directory,\n  });\n\n  if (packageJsonPath) {\n    const { name } = require(packageJsonPath);\n\n    return {\n      name,\n      path: packageJsonPath,\n      dirname: path.dirname(packageJsonPath),\n    };\n  }\n}\n\nconst packageInfoCache = new Map<string, PackageInfo>();\n\nexport function getPackageInfo(cwd?: string | null): PackageInfo {\n  const resolvedCwd = cwd ?? process.cwd();\n  const cachedValue = packageInfoCache.get(resolvedCwd);\n\n  if (cachedValue) {\n    return cachedValue;\n  }\n\n  let packageInfo = getClosestPackageInfo(resolvedCwd);\n\n  while (packageInfo && !packageInfo.name) {\n    packageInfo = getClosestPackageInfo(\n      path.resolve(packageInfo.dirname, '..'),\n    );\n  }\n\n  if (!packageInfo || !packageInfo.name) {\n    throw new Error(\n      `Couldn't find parent package.json with a name field from '${resolvedCwd}'`,\n    );\n  }\n\n  packageInfoCache.set(resolvedCwd, packageInfo);\n\n  return packageInfo;\n}\n"
  },
  {
    "path": "packages/integration/src/processVanillaFile.test.ts",
    "content": "import { describe, expect, test, vi } from 'vitest';\nimport { addFunctionSerializer } from '../../css/src/functionSerializer';\nimport {\n  processVanillaFile,\n  serializeVanillaModule,\n} from './processVanillaFile';\n\ndescribe('serializeVanillaModule', () => {\n  test('with plain object exports', () => {\n    const value = {\n      string: 'value',\n      boolean: true,\n      number: 42,\n      array: [420],\n      object: { hello: 'world' },\n    };\n\n    expect(serializeVanillaModule([], value, null)).toMatchInlineSnapshot(`\n      \"export var string = 'value';\n      export var boolean = true;\n      export var number = 42;\n      export var array = [420];\n      export var object = {hello:'world'};\"\n    `);\n  });\n\n  // https://rollupjs.org/guide/en/#outputgeneratedcode -- see output.generatedCode.symbols\n  // https://github.com/vitejs/vite/pull/5018\n  // https://github.com/vitejs/vite/blob/757a92f1c7c4fa961ed963edd245df77382dfde6/packages/vite/src/node/build.ts#L466-L469\n  test('with exports generated by Rollup', () => {\n    const value = Object.freeze(\n      Object.defineProperty(\n        {\n          __proto__: null,\n          some: 'export',\n        },\n        Symbol.toStringTag,\n        { value: 'Module' },\n      ),\n    );\n\n    expect(serializeVanillaModule([], value, null)).toMatchInlineSnapshot(\n      `\"export var some = 'export';\"`,\n    );\n  });\n\n  test('with unusedCompositionRegex', () => {\n    const value = {\n      compositionOnly:\n        'features_compositionOnly__1o6ek504 features_mergedStyle__1o6ek500 features_styleWithComposition__1o6ek501',\n      mergedStyle: 'features_mergedStyle__1o6ek500',\n      styleCompositionInSelector:\n        'features_styleCompositionInSelector__1o6ek507 features__1o6ek505 features__1o6ek506',\n      styleVariantsCompositionInSelector: {\n        variant:\n          'features_styleVariantsCompositionInSelector_variant__1o6ek50a features__1o6ek508 features__1o6ek509',\n      },\n      styleVariantsWithComposition: {\n        variant:\n          'features_styleVariantsWithComposition_variant__1o6ek502 features_mergedStyle__1o6ek500',\n      },\n      styleVariantsWithMappedComposition: {\n        variant:\n          'features_styleVariantsWithMappedComposition_variant__1o6ek503 features_mergedStyle__1o6ek500',\n      },\n      styleWithComposition:\n        'features_styleWithComposition__1o6ek501 features_mergedStyle__1o6ek500',\n    };\n\n    const exports = serializeVanillaModule(\n      [],\n      value,\n      /(features_compositionOnly__1o6ek504|features_styleCompositionInSelector__1o6ek507|features_styleVariantsCompositionInSelector_variant__1o6ek50a)\\s/g,\n    );\n    expect(exports).toMatchInlineSnapshot(`\n      \"export var compositionOnly = 'features_mergedStyle__1o6ek500 features_styleWithComposition__1o6ek501';\n      export var mergedStyle = 'features_mergedStyle__1o6ek500';\n      export var styleCompositionInSelector = 'features__1o6ek505 features__1o6ek506';\n      export var styleVariantsCompositionInSelector = {variant:'features__1o6ek508 features__1o6ek509'};\n      export var styleVariantsWithComposition = {variant:'features_styleVariantsWithComposition_variant__1o6ek502 features_mergedStyle__1o6ek500'};\n      export var styleVariantsWithMappedComposition = {variant:'features_styleVariantsWithMappedComposition_variant__1o6ek503 features_mergedStyle__1o6ek500'};\n      export var styleWithComposition = 'features_styleWithComposition__1o6ek501 features_mergedStyle__1o6ek500';\"\n    `);\n  });\n\n  test('should serialize a vanilla module', () => {\n    expect(\n      serializeVanillaModule(\n        ['import \"./styles.css\"'],\n        { default: 'some-style', otherStyles: 'some-style other-style' },\n        null,\n      ),\n    ).toMatchInlineSnapshot(`\n      \"import \"./styles.css\"\n      var __default__ = 'some-style';\n      export default __default__;\n      export var otherStyles = 'some-style other-style';\"\n    `);\n  });\n\n  test('should re-use exports if possible', () => {\n    const a = {\n      style: 'the-style',\n    };\n    const b = {\n      style: 'another-style',\n    };\n    const exports = {\n      a,\n      default: b,\n      c: {\n        a,\n        b,\n      },\n    };\n\n    expect(serializeVanillaModule(['import \"./styles.css\"'], exports, null))\n      .toMatchInlineSnapshot(`\n      \"import \"./styles.css\"\n      export var a = {style:'the-style'};\n      var __default__ = {style:'another-style'};\n      export default __default__;\n      export var c = {a:a,b:__default__};\"\n    `);\n  });\n\n  test('should handle function serialization', () => {\n    const sprinkles = () => {};\n    sprinkles.__function_serializer__ = {\n      importPath: 'my-package',\n      importName: 'myFunction',\n      args: ['arg1', 'arg2'],\n    };\n    const exports = {\n      sprinkles,\n    };\n\n    expect(serializeVanillaModule(['import \"./styles.css\"'], exports, null))\n      .toMatchInlineSnapshot(`\n      \"import \"./styles.css\"\n      import { myFunction as _86bce } from 'my-package';\n      export var sprinkles = _86bce('arg1','arg2');\"\n    `);\n  });\n\n  test('should handle deprecated __recipe__ function serialization', () => {\n    const sprinkles = () => {};\n    // Once support for `__recipe__` is removed, this test can be removed,\n    // and all other tests that use `__function_serializer__` should be updated\n    // to use `addFunctionSerializer`\n    addFunctionSerializer(sprinkles, {\n      importPath: 'my-package',\n      importName: 'myFunction',\n      args: ['arg1', 'arg2'],\n    });\n    const exports = {\n      sprinkles,\n    };\n\n    expect(serializeVanillaModule(['import \"./styles.css\"'], exports, null))\n      .toMatchInlineSnapshot(`\n      \"import \"./styles.css\"\n      import { myFunction as _86bce } from 'my-package';\n      export var sprinkles = _86bce('arg1','arg2');\"\n    `);\n  });\n\n  test('should re-use exports in handle serialized function args', () => {\n    const complexExport = {\n      my: {\n        very: {\n          complex: {\n            arg: true,\n          },\n        },\n      },\n    };\n\n    const otherComplexExport = {\n      other: {\n        complex: [1, 2, 3],\n      },\n    };\n\n    const sprinkles = () => {};\n    sprinkles.__function_serializer__ = {\n      importPath: 'my-package',\n      importName: 'myFunction',\n      args: [complexExport, otherComplexExport],\n    };\n    const exports = {\n      default: complexExport,\n      otherComplexExport,\n      sprinkles,\n    };\n\n    expect(serializeVanillaModule(['import \"./styles.css\"'], exports, null))\n      .toMatchInlineSnapshot(`\n      \"import \"./styles.css\"\n      import { myFunction as _86bce } from 'my-package';\n      var __default__ = {my:{very:{complex:{arg:true}}}};\n      export default __default__;\n      export var otherComplexExport = {other:{complex:[1,2,3]}};\n      export var sprinkles = _86bce(__default__,otherComplexExport);\"\n    `);\n  });\n\n  test('should order exports correctly', () => {\n    const simpleObjectExport = { hello: 'world' };\n\n    const complexExport = {\n      my: {\n        very: {\n          complex: {\n            arg: simpleObjectExport,\n          },\n        },\n      },\n    };\n\n    const otherComplexExport = {\n      other: {\n        complex: [1, 2, 3],\n      },\n    };\n\n    const someOtherExport = [4, 5, 6];\n\n    const reExport = otherComplexExport;\n    const reReExport = reExport;\n\n    const sprinkles = () => {};\n    sprinkles.__function_serializer__ = {\n      importPath: 'my-package',\n      importName: 'myFunction',\n      args: [complexExport, otherComplexExport, someOtherExport, reReExport],\n    };\n    const exports = {\n      sprinkles,\n      complexExport,\n      simpleObjectExport,\n      reReExport,\n      otherComplexExport,\n      default: someOtherExport,\n      reExport,\n    };\n\n    expect(serializeVanillaModule(['import \"./styles.css\"'], exports, null))\n      .toMatchInlineSnapshot(`\n      \"import \"./styles.css\"\n      import { myFunction as _86bce } from 'my-package';\n      export var simpleObjectExport = {hello:'world'};\n      export var complexExport = {my:{very:{complex:{arg:simpleObjectExport}}}};\n      var __default__ = [4,5,6];\n      export default __default__;\n      export var reExport = {other:{complex:[1,2,3]}};\n      export var sprinkles = _86bce(complexExport,reExport,__default__,reExport);\n      export var reReExport = reExport;\n      export var otherComplexExport = reExport;\"\n    `);\n  });\n});\n\ndescribe('processVanillaFile', () => {\n  test('should process vanilla file with correct promise order', async () => {\n    vi.useFakeTimers();\n\n    const serializeVirtualCssPath1 = vi.fn(\n      ({ source }) =>\n        new Promise<string>((resolve) => {\n          setTimeout(() => resolve(source), 1);\n        }),\n    );\n    const serializeVirtualCssPath2 = vi.fn(({ source }) =>\n      Promise.resolve(source),\n    );\n\n    const [result] = await Promise.all([\n      processVanillaFile({\n        source: `\n        const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n        const { style, globalStyle } = require('@vanilla-extract/css'); \n        __vanilla_filescope__.setFileScope(\"dependency.css.ts\", \"test\");\n        exports.x = style({ color: 'blue' });\n        __vanilla_filescope__.endFileScope();\n        __vanilla_filescope__.setFileScope(\"style1.css.ts\", \"test\");\n        exports.y = style([exports.x]);\n        globalStyle('body ' + exports.y, { color: 'red' });\n        __vanilla_filescope__.endFileScope();\n      `,\n        filePath: require.resolve('@fixtures/sprinkles'),\n        serializeVirtualCssPath: serializeVirtualCssPath1,\n      }),\n      processVanillaFile({\n        source: `\n        const __vanilla_filescope__ = require(\"@vanilla-extract/css/fileScope\");\n        __vanilla_filescope__.setFileScope(\"style2.css.ts\", \"test\");\n        __vanilla_filescope__.endFileScope();\n      `,\n        filePath: require.resolve('@fixtures/sprinkles'),\n        serializeVirtualCssPath: serializeVirtualCssPath2,\n      }),\n      vi.runAllTimersAsync(),\n    ]);\n\n    expect(result).toMatchInlineSnapshot(`\n      \".dependency__ma8c4x0 {\n        color: blue;\n      }\n      body .style1__emvcy10 {\n        color: red;\n      }\n      export var x = 'dependency__ma8c4x0';\n      export var y = 'style1__emvcy10 dependency__ma8c4x0';\"\n    `);\n\n    vi.useRealTimers();\n  });\n});\n"
  },
  {
    "path": "packages/integration/src/processVanillaFile.ts",
    "content": "import type { FileScope, Adapter } from '@vanilla-extract/css';\nimport { transformCss } from '@vanilla-extract/css/transformCss';\nimport { removeAdapter, setAdapter } from '@vanilla-extract/css/adapter';\nimport evalCode from 'eval';\nimport { stringify } from 'javascript-stringify';\nimport dedent from 'dedent';\n\nimport { hash } from './hash';\nimport { serializeCss } from './serialize';\nimport type { IdentifierOption } from './types';\n\nconst originalNodeEnv = process.env.NODE_ENV;\n\n// Copied from https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore/blob/51f83bd3db728fd7ee177de1ffc253fdb99c537f/README.md#_isplainobject\nfunction isPlainObject(value: unknown) {\n  if (typeof value !== 'object' || value === null) {\n    return false;\n  }\n\n  if (Object.prototype.toString.call(value) !== '[object Object]') {\n    return false;\n  }\n\n  const prototype = Object.getPrototypeOf(value);\n  if (prototype === null) {\n    return true;\n  }\n\n  const constructor =\n    Object.prototype.hasOwnProperty.call(prototype, 'constructor') &&\n    prototype.constructor;\n\n  return (\n    typeof constructor === 'function' &&\n    constructor instanceof constructor &&\n    Function.prototype.call(constructor) === Function.prototype.call(value)\n  );\n}\n\nexport function stringifyFileScope({\n  packageName,\n  filePath,\n}: FileScope): string {\n  return packageName ? `${filePath}$$$${packageName}` : filePath;\n}\n\nexport function parseFileScope(serialisedFileScope: string): FileScope {\n  const [filePath, packageName] = serialisedFileScope.split('$$$');\n\n  return {\n    filePath,\n    packageName,\n  };\n}\n\ninterface ProcessVanillaFileOptions {\n  source: string;\n  filePath: string;\n  outputCss?: boolean;\n  identOption?: IdentifierOption;\n  serializeVirtualCssPath?: (file: {\n    fileName: string;\n    fileScope: FileScope;\n    source: string;\n  }) => string | Promise<string>;\n}\nexport async function processVanillaFile({\n  source,\n  filePath,\n  outputCss = true,\n  identOption = process.env.NODE_ENV === 'production' ? 'short' : 'debug',\n  serializeVirtualCssPath,\n}: ProcessVanillaFileOptions): Promise<string> {\n  type Css = Parameters<Adapter['appendCss']>[0];\n  type Composition = Parameters<Adapter['registerComposition']>[0];\n\n  const cssByFileScope = new Map<string, Array<Css>>();\n  const localClassNames = new Set<string>();\n  const composedClassLists: Array<Composition> = [];\n  const usedCompositions = new Set<string>();\n\n  const cssAdapter: Adapter = {\n    appendCss: (css, fileScope) => {\n      if (outputCss) {\n        const serialisedFileScope = stringifyFileScope(fileScope);\n        const fileScopeCss = cssByFileScope.get(serialisedFileScope) ?? [];\n\n        fileScopeCss.push(css);\n\n        cssByFileScope.set(serialisedFileScope, fileScopeCss);\n      }\n    },\n    registerClassName: (className) => {\n      localClassNames.add(className);\n    },\n    registerComposition: (composedClassList) => {\n      composedClassLists.push(composedClassList);\n    },\n    markCompositionUsed: (identifier) => {\n      usedCompositions.add(identifier);\n    },\n    onEndFileScope: () => {},\n    getIdentOption: () => identOption,\n  };\n\n  const currentNodeEnv = process.env.NODE_ENV;\n\n  // Vite sometimes modifies NODE_ENV which causes different versions (e.g. dev/prod) of vanilla packages to be loaded\n  // This can cause CSS to be bound to the wrong instance, resulting in no CSS output\n  // To get around this we set the NODE_ENV back to the original value ONLY during eval\n  process.env.NODE_ENV = originalNodeEnv;\n\n  const adapterBoundSource = `\n    const { setAdapter, removeAdapter } = require('@vanilla-extract/css/adapter');\n    setAdapter(__adapter__);\n    ${source}\n    // Backwards compat with older versions of @vanilla-extract/css\n    if (removeAdapter) {\n      removeAdapter();\n    }\n  `;\n\n  const evalResult = evalCode(\n    adapterBoundSource,\n    filePath,\n    { console, process, __adapter__: cssAdapter },\n    true,\n  ) as Record<string, unknown>;\n\n  process.env.NODE_ENV = currentNodeEnv;\n\n  const cssImports = [];\n\n  for (const [serialisedFileScope, fileScopeCss] of cssByFileScope) {\n    const fileScope = parseFileScope(serialisedFileScope);\n    setAdapter(cssAdapter);\n    const css = transformCss({\n      localClassNames: Array.from(localClassNames),\n      composedClassLists,\n      cssObjs: fileScopeCss,\n    }).join('\\n');\n    removeAdapter();\n\n    const fileName = `${fileScope.filePath}.vanilla.css`;\n\n    let virtualCssFilePath: string;\n\n    if (serializeVirtualCssPath) {\n      const serializedResult = serializeVirtualCssPath({\n        fileName,\n        fileScope,\n        source: css,\n      });\n\n      if (typeof serializedResult === 'string') {\n        virtualCssFilePath = serializedResult;\n      } else {\n        virtualCssFilePath = await serializedResult;\n      }\n    } else {\n      const serializedCss = await serializeCss(css);\n\n      virtualCssFilePath = `import '${fileName}?source=${serializedCss}';`;\n    }\n\n    cssImports.push(virtualCssFilePath);\n  }\n\n  const unusedCompositions = composedClassLists\n    .filter(({ identifier }) => !usedCompositions.has(identifier))\n    .map(({ identifier }) => identifier);\n\n  const unusedCompositionRegex =\n    unusedCompositions.length > 0\n      ? RegExp(`(${unusedCompositions.join('|')})\\\\s`, 'g')\n      : null;\n\n  return serializeVanillaModule(cssImports, evalResult, unusedCompositionRegex);\n}\n\nfunction stringifyExports(\n  functionSerializationImports: Set<string>,\n  value: any,\n  unusedCompositionRegex: RegExp | null,\n  key: string,\n  exportLookup: Map<any, string>,\n  exportDependencyGraph: DependencyGraph,\n): any {\n  return stringify(\n    value,\n    (value, _indent, next) => {\n      const valueType = typeof value;\n\n      if (\n        valueType === 'boolean' ||\n        valueType === 'number' ||\n        valueType === 'undefined' ||\n        value === null\n      ) {\n        return next(value);\n      }\n\n      if (Array.isArray(value) || isPlainObject(value)) {\n        const reusedExport = exportLookup.get(value);\n\n        if (reusedExport && reusedExport !== key) {\n          exportDependencyGraph.addDependency(key, reusedExport);\n          return reusedExport;\n        }\n        return next(value);\n      }\n\n      if (Symbol.toStringTag in Object(value)) {\n        const { [Symbol.toStringTag]: _tag, ...valueWithoutTag } = value;\n        return next(valueWithoutTag);\n      }\n\n      if (valueType === 'string') {\n        return next(\n          unusedCompositionRegex\n            ? value.replace(unusedCompositionRegex, '')\n            : value,\n        );\n      }\n\n      if (\n        valueType === 'function' &&\n        (value.__function_serializer__ || value.__recipe__)\n      ) {\n        const { importPath, importName, args } =\n          value.__function_serializer__ || value.__recipe__;\n\n        if (\n          typeof importPath !== 'string' ||\n          typeof importName !== 'string' ||\n          !Array.isArray(args)\n        ) {\n          throw new Error('Invalid function serialization params');\n        }\n\n        try {\n          const hashedImportName = `_${hash(`${importName}${importPath}`).slice(\n            0,\n            5,\n          )}`;\n\n          functionSerializationImports.add(\n            `import { ${importName} as ${hashedImportName} } from '${importPath}';`,\n          );\n\n          return `${hashedImportName}(${args\n            .map((arg) =>\n              stringifyExports(\n                functionSerializationImports,\n                arg,\n                unusedCompositionRegex,\n                key,\n                exportLookup,\n                exportDependencyGraph,\n              ),\n            )\n            .join(',')})`;\n        } catch (err) {\n          console.error(err);\n\n          throw new Error('Invalid function serialization params', {\n            cause: err,\n          });\n        }\n      }\n\n      throw new Error(dedent`\n        Invalid exports.\n\n        You can only export plain objects, arrays, strings, numbers and null/undefined.\n      `);\n    },\n    0,\n    {\n      references: true, // Allow circular references\n      maxDepth: Infinity,\n      maxValues: Infinity,\n    },\n  );\n}\n\nconst defaultExportName = '__default__';\n\nclass DependencyGraph {\n  graph: Map<string, Set<string>>;\n\n  public constructor() {\n    this.graph = new Map();\n  }\n\n  /**\n   * Creates a \"depends on\" relationship between `key` and `dependency`\n   */\n  public addDependency(key: string, dependency: string) {\n    const dependencies = this.graph.get(key);\n\n    if (dependencies) {\n      dependencies.add(dependency);\n    } else {\n      this.graph.set(key, new Set([dependency]));\n    }\n  }\n\n  /**\n   * Whether or not `key` depends on `dependency`\n   */\n  public dependsOn(key: string, dependency: string): boolean {\n    const dependencies = this.graph.get(key);\n\n    if (dependencies) {\n      if (dependencies?.has(dependency)) {\n        return true;\n      }\n\n      for (const [dep] of dependencies.entries()) {\n        if (this.dependsOn(dep, dependency)) {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n}\n\nexport function serializeVanillaModule(\n  cssImports: Array<string>,\n  exports: Record<string, unknown>,\n  unusedCompositionRegex: RegExp | null,\n): string {\n  const functionSerializationImports = new Set<string>();\n  const exportLookup = new Map(\n    Object.entries(exports).map(([key, value]) => [\n      value,\n      key === 'default' ? defaultExportName : key,\n    ]),\n  );\n\n  const exportDependencyGraph = new DependencyGraph();\n\n  const moduleExports = Object.entries(exports).map(([key, value]) => {\n    const serializedExport = stringifyExports(\n      functionSerializationImports,\n      value,\n      unusedCompositionRegex,\n      key === 'default' ? defaultExportName : key,\n      exportLookup,\n      exportDependencyGraph,\n    );\n\n    if (key === 'default') {\n      return [\n        defaultExportName,\n        [\n          `var ${defaultExportName} = ${serializedExport};`,\n          `export default ${defaultExportName};`,\n        ].join('\\n'),\n      ];\n    }\n\n    return [key, `export var ${key} = ${serializedExport};`];\n  });\n\n  const sortedModuleExports = moduleExports\n    .sort(([key1], [key2]) => {\n      if (exportDependencyGraph.dependsOn(key1, key2)) {\n        return 1;\n      }\n\n      if (exportDependencyGraph.dependsOn(key2, key1)) {\n        return -1;\n      }\n\n      return 0;\n    })\n    .map(([, s]) => s);\n\n  const outputCode = [\n    ...cssImports,\n    ...functionSerializationImports,\n    ...sortedModuleExports,\n  ];\n\n  return outputCode.join('\\n');\n}\n"
  },
  {
    "path": "packages/integration/src/serialize.ts",
    "content": "import { gzip, gunzip } from 'zlib';\nimport { promisify } from 'util';\n\nconst zip = promisify(gzip);\nconst unzip = promisify(gunzip);\n\n// The byte threshold for applying compression, below which compressing would out-weigh its value.\nconst compressionThreshold = 1000;\nconst compressionFlag = '#';\n\nexport async function serializeCss(source: string): Promise<string> {\n  if (source.length > compressionThreshold) {\n    const compressedSource = await zip(source);\n\n    return compressionFlag + compressedSource.toString('base64url');\n  }\n\n  return Buffer.from(source, 'utf-8').toString('base64url');\n}\n\nexport async function deserializeCss(source: string): Promise<string> {\n  if (source.indexOf(compressionFlag) > -1) {\n    const decompressedSource = await unzip(\n      Buffer.from(source.replace(compressionFlag, ''), 'base64url'),\n    );\n\n    return decompressedSource.toString('utf-8');\n  }\n\n  return Buffer.from(source, 'base64url').toString('utf-8');\n}\n"
  },
  {
    "path": "packages/integration/src/transform.ts",
    "content": "import * as babel from '@babel/core';\nimport vanillaBabelPlugin from '@vanilla-extract/babel-plugin-debug-ids';\n// @ts-expect-error\nimport typescriptSyntax from '@babel/plugin-syntax-typescript';\n\nimport { addFileScope } from './addFileScope';\nimport type { IdentifierOption } from './types';\n\ninterface TransformParams {\n  source: string;\n  filePath: string;\n  rootPath: string;\n  packageName: string;\n  identOption: IdentifierOption;\n  globalAdapterIdentifier?: string;\n}\nexport const transformSync = ({\n  source,\n  filePath,\n  rootPath,\n  packageName,\n  identOption,\n}: TransformParams): string => {\n  let code = source;\n\n  if (identOption === 'debug') {\n    const result = babel.transformSync(source, {\n      filename: filePath,\n      cwd: rootPath,\n      plugins: [vanillaBabelPlugin, typescriptSyntax],\n      configFile: false,\n      babelrc: false,\n    });\n\n    if (!result || result.code == null) {\n      throw new Error('Error adding debug IDs');\n    }\n\n    code = result.code;\n  }\n\n  return addFileScope({\n    source: code,\n    filePath,\n    rootPath,\n    packageName,\n  });\n};\n\nexport const transform = async ({\n  source,\n  filePath,\n  rootPath,\n  packageName,\n  identOption,\n  globalAdapterIdentifier,\n}: TransformParams): Promise<string> => {\n  let code = source;\n\n  if (identOption === 'debug') {\n    const result = await babel.transformAsync(source, {\n      filename: filePath,\n      cwd: rootPath,\n      plugins: [vanillaBabelPlugin, typescriptSyntax],\n      configFile: false,\n      babelrc: false,\n    });\n\n    if (!result || result.code == null) {\n      throw new Error('Error adding debug IDs');\n    }\n\n    code = result.code;\n  }\n\n  return addFileScope({\n    source: code,\n    filePath,\n    rootPath,\n    packageName,\n    globalAdapterIdentifier,\n  });\n};\n"
  },
  {
    "path": "packages/integration/src/types.ts",
    "content": "import type { Adapter } from '@vanilla-extract/css';\n\nexport type IdentifierOption = ReturnType<Adapter['getIdentOption']>;\n"
  },
  {
    "path": "packages/integration/src/virtualFile.ts",
    "content": "import { deserializeCss } from './serialize';\n\nexport async function getSourceFromVirtualCssFile(id: string): Promise<{\n  fileName: string;\n  source: string;\n}> {\n  const match = id.match(/^(?<fileName>.*)\\?source=(?<source>.*)$/);\n\n  if (!match || !match.groups) {\n    throw new Error('No source in vanilla CSS file');\n  }\n\n  const source = await deserializeCss(match.groups.source);\n\n  return {\n    fileName: match.groups.fileName,\n    source,\n  };\n}\n"
  },
  {
    "path": "packages/jest-transform/CHANGELOG.md",
    "content": "# @vanilla-extract/jest-transform\n\n## 1.1.21\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.8\n\n## 1.1.20\n\n### Patch Changes\n\n- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704)]:\n  - @vanilla-extract/integration@8.0.7\n\n## 1.1.19\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.6\n\n## 1.1.18\n\n### Patch Changes\n\n- [#1653](https://github.com/vanilla-extract-css/vanilla-extract/pull/1653) [`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1) Thanks [@askoufis](https://github.com/askoufis)! - Update `esbuild` dependency range to include `^0.26.0` and `^0.27.0`\n\n- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:\n  - @vanilla-extract/integration@8.0.5\n\n## 1.1.17\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.4\n\n## 1.1.16\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.3\n\n## 1.1.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.2\n\n## 1.1.14\n\n### Patch Changes\n\n- [#1545](https://github.com/vanilla-extract-css/vanilla-extract/pull/1545) [`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.25.x`\n\n- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:\n  - @vanilla-extract/integration@8.0.1\n\n## 1.1.13\n\n### Patch Changes\n\n- [#1530](https://github.com/vanilla-extract-css/vanilla-extract/pull/1530) [`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8) Thanks [@askoufis](https://github.com/askoufis)! - Extend `esbuild` dependency range to include `0.24.x`\n\n- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:\n  - @vanilla-extract/integration@8.0.0\n\n## 1.1.12\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.12\n\n## 1.1.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.11\n\n## 1.1.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.10\n\n## 1.1.9\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:\n  - @vanilla-extract/integration@7.1.9\n\n## 1.1.8\n\n### Patch Changes\n\n- [#1461](https://github.com/vanilla-extract-css/vanilla-extract/pull/1461) [`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b) Thanks [@askoufis](https://github.com/askoufis)! - Widen `esbuild` dependency range to include `~0.22.0` and `~0.23.0`\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n\n## 1.1.7\n\n### Patch Changes\n\n- [#1436](https://github.com/vanilla-extract-css/vanilla-extract/pull/1436) [`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e) Thanks [@SimenB](https://github.com/SimenB)! - Extend `esbuild` dependency range to include `~0.20.0` and `~0.21.0`\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n\n## 1.1.6\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.6\n\n## 1.1.5\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n\n## 1.1.4\n\n### Patch Changes\n\n- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:\n  - @vanilla-extract/integration@7.0.0\n\n## 1.1.3\n\n### Patch Changes\n\n- [#1252](https://github.com/vanilla-extract-css/vanilla-extract/pull/1252) [`5bc98a4`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5bc98a4af30a339336ab4ef7c387d3e809586a83) Thanks [@Ethan-PageUp](https://github.com/Ethan-PageUp)! - Unpin esbuild and broaden the version range\n\n- Updated dependencies [[`959c646`](https://github.com/vanilla-extract-css/vanilla-extract/commit/959c646ad6154ef0f8e357660319c7049e8b0459), [`5bc98a4`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5bc98a4af30a339336ab4ef7c387d3e809586a83), [`1566f92`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1566f9238078a3cfefec9ae5023b56aba02875d4)]:\n  - @vanilla-extract/integration@6.3.0\n\n## 1.1.2\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/integration@6.2.5\n\n## 1.1.1\n\n### Patch Changes\n\n- [#1030](https://github.com/vanilla-extract-css/vanilla-extract/pull/1030) [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Bump esbuild to v0.17.6\n\n- Updated dependencies [[`45d3b86`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45d3b86960027cdfa81989f8e2036a6768cc1e1d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/integration@6.2.0\n\n## 1.1.0\n\n### Minor Changes\n\n- [#982](https://github.com/vanilla-extract-css/vanilla-extract/pull/982) [`a9fd1c3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9fd1c3fd950d33343eb28c6224b7f263a7ad20b) Thanks [@roginfarrer](https://github.com/roginfarrer)! - If a regular CSS file is sent through to the transform, return a module that exports the filename.\n\n## 1.0.2\n\n### Patch Changes\n\n- [#973](https://github.com/vanilla-extract-css/vanilla-extract/pull/973) [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a) Thanks [@cliffordfajardo](https://github.com/cliffordfajardo)! - Upgrade esbuild `^0.11.16` to `^0.16.3`\n\n- Updated dependencies [[`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101), [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a)]:\n  - @vanilla-extract/integration@6.0.2\n\n## 1.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:\n  - @vanilla-extract/integration@6.0.0\n"
  },
  {
    "path": "packages/jest-transform/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/jest-transform\",\n  \"version\": \"1.1.21\",\n  \"description\": \"Jest transformer for vanilla-extract\",\n  \"main\": \"dist/vanilla-extract-jest-transform.cjs.js\",\n  \"module\": \"dist/vanilla-extract-jest-transform.esm.js\",\n  \"types\": \"dist/vanilla-extract-jest-transform.cjs.d.ts\",\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/jest-transform\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/integration\": \"workspace:^\",\n    \"esbuild\": \"npm:esbuild@>=0.17.6 <0.28.0\"\n  },\n  \"devDependencies\": {\n    \"@jest/transform\": \"^29.0.3\"\n  }\n}\n"
  },
  {
    "path": "packages/jest-transform/src/index.ts",
    "content": "import path from 'path';\nimport type { Transformer } from '@jest/transform';\nimport {\n  transformSync,\n  getPackageInfo,\n  cssFileFilter,\n} from '@vanilla-extract/integration';\nimport * as esbuild from 'esbuild';\n\nconst vanillaTransformer: Transformer = {\n  canInstrument: false,\n  process(source, filePath, options) {\n    if (!cssFileFilter.test(filePath)) {\n      // If the file that passes through to the transformer is not a VE file,\n      // then it's likely a vanilla .css file (because Jest can't differentiate\n      // between them)\n      return {\n        code: `module.exports = ${JSON.stringify(path.basename(filePath))};`,\n      };\n    }\n\n    const { name: packageName } = getPackageInfo(options.config.rootDir);\n\n    const code = transformSync({\n      source,\n      filePath,\n      rootPath: options.config.rootDir,\n      packageName: packageName,\n      identOption: 'debug',\n    });\n\n    const result = esbuild.transformSync(code, {\n      format: options.supportsStaticESM ? 'esm' : 'cjs',\n      target: 'es2018',\n      loader: 'ts',\n    });\n\n    return result;\n  },\n};\n\nexport default vanillaTransformer;\n"
  },
  {
    "path": "packages/next-plugin/CHANGELOG.md",
    "content": "# @vanilla-extract/next-plugin\n\n## 2.5.1\n\n### Patch Changes\n\n- [#1692](https://github.com/vanilla-extract-css/vanilla-extract/pull/1692) [`495bc90`](https://github.com/vanilla-extract-css/vanilla-extract/commit/495bc902e19b69aa3ebd52ab94072e8535183708) Thanks [@askoufis](https://github.com/askoufis)! - Update turbopack plugin dep to fix bad release\n\n## 2.5.0\n\n### Minor Changes\n\n- [#1639](https://github.com/vanilla-extract-css/vanilla-extract/pull/1639) [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1) Thanks [@RJWadley](https://github.com/RJWadley)! - Add experimental Turbopack support for Next.js >= 16.0.0\n\n  See [the Next.js docs](https://vanilla-extract.style/documentation/integrations/next/#unstable_turbopack) for more info.\n  Ensure you are on the latest version of `@vanilla-extract/css` before attempting to use Turbopack.\n\n### Patch Changes\n\n- Updated dependencies [[`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99)]:\n  - @vanilla-extract/turbopack-plugin@0.1.0\n  - @vanilla-extract/webpack-plugin@2.3.26\n\n## 2.4.17\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.25\n\n## 2.4.16\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.24\n\n## 2.4.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.23\n\n## 2.4.14\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:\n  - @vanilla-extract/webpack-plugin@2.3.22\n\n## 2.4.13\n\n### Patch Changes\n\n- [#1602](https://github.com/vanilla-extract-css/vanilla-extract/pull/1602) [`7a78ebe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7a78ebeaad015d072664206cdbe59642399b405b) Thanks [@Pnlvfx](https://github.com/Pnlvfx)! - Fix `require is not defined` error in ESM bundles by calling `createRequire`\n\n- Updated dependencies [[`7a78ebe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7a78ebeaad015d072664206cdbe59642399b405b)]:\n  - @vanilla-extract/webpack-plugin@2.3.21\n\n## 2.4.12\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies [[`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:\n  - @vanilla-extract/webpack-plugin@2.3.20\n\n## 2.4.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.19\n\n## 2.4.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.18\n\n## 2.4.9\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.17\n\n## 2.4.8\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.16\n\n## 2.4.7\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.15\n\n## 2.4.6\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.14\n\n## 2.4.5\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.13\n\n## 2.4.4\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.12\n\n## 2.4.3\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.11\n\n## 2.4.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/webpack-plugin@2.3.10\n\n## 2.4.1\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/webpack-plugin@2.3.9\n\n## 2.4.0\n\n### Minor Changes\n\n- [#1365](https://github.com/vanilla-extract-css/vanilla-extract/pull/1365) [`ed67731`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ed67731efe19c319a4ed5015e00b8a19a4116dd1) Thanks [@renrizzolo](https://github.com/renrizzolo)! - Pages router: use next-style-loader in dev, output css in ssr\n\n## 2.3.7\n\n### Patch Changes\n\n- [#1333](https://github.com/vanilla-extract-css/vanilla-extract/pull/1333) [`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d) Thanks [@askoufis](https://github.com/askoufis)! - Use a more accurate regex for detecting [webpack template strings] in paths\n\n  We now use a modified version of the regex from the webpack source code to detect template strings in paths.\n  As long as the path isn't already escaped, we should detect it.\n\n  [webpack template strings]: https://webpack.js.org/configuration/output/#template-strings\n\n- Updated dependencies [[`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d)]:\n  - @vanilla-extract/webpack-plugin@2.3.7\n\n## 2.3.6\n\n### Patch Changes\n\n- [#1247](https://github.com/vanilla-extract-css/vanilla-extract/pull/1247) [`f0c3be9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0c3be99ca437fb1f61ecde58fdf58cccc3256bb) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug that was causing style compilation to fail on paths containing [webpack template strings] such as `[id]` or [Next.js dynamic routes] such as `[slug]`.\n\n  [webpack template strings]: https://webpack.js.org/configuration/output/#template-strings\n  [next.js dynamic routes]: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes\n\n- Updated dependencies [[`f0c3be9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0c3be99ca437fb1f61ecde58fdf58cccc3256bb)]:\n  - @vanilla-extract/webpack-plugin@2.3.5\n\n## 2.3.5\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:\n  - @vanilla-extract/webpack-plugin@2.3.4\n\n## 2.3.4\n\n### Patch Changes\n\n- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`\n\n- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier\n\n- Updated dependencies [[`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1), [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0)]:\n  - @vanilla-extract/webpack-plugin@2.3.3\n\n## 2.3.3\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/webpack-plugin@2.3.2\n\n## 2.3.2\n\n### Patch Changes\n\n- [#1193](https://github.com/vanilla-extract-css/vanilla-extract/pull/1193) [`a22dd4d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a22dd4da82e4338b8f13fdf66827f6e061ff2038) Thanks [@syfxlin](https://github.com/syfxlin)! - Fixes Next.js 13.5.x CSS output on Windows when using React Server Components\n\n## 2.3.1\n\n### Patch Changes\n\n- [#1180](https://github.com/vanilla-extract-css/vanilla-extract/pull/1180) [`89224fe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/89224fe9d68d984f818ec3d4496952e4e919a241) Thanks [@syfxlin](https://github.com/syfxlin)! - Fixes Next.js 13 CSS output on Windows when using React Server Components\n\n- Updated dependencies [[`89224fe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/89224fe9d68d984f818ec3d4496952e4e919a241)]:\n  - @vanilla-extract/webpack-plugin@2.3.1\n\n## 2.3.0\n\n### Minor Changes\n\n- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/webpack-plugin@2.3.0\n\n## 2.2.2\n\n### Patch Changes\n\n- [#1155](https://github.com/vanilla-extract-css/vanilla-extract/pull/1155) [`1cb537b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1cb537b04b5733d5d3a697c6f355c44465c9c468) Thanks [@GeeWizWow](https://github.com/GeeWizWow)! - Fix URL statements not not respecting Next's setup for resolving assets\n\n## 2.2.1\n\n### Patch Changes\n\n- [#1148](https://github.com/vanilla-extract-css/vanilla-extract/pull/1148) [`b279bb5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b279bb5fc4902abb68319f44948e0f66d60125b6) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix error when intializing plugin\n\n## 2.2.0\n\n### Minor Changes\n\n- [#1105](https://github.com/vanilla-extract-css/vanilla-extract/pull/1105) [`9541d79`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9541d79722b9e0488422ee116a31567c0ac192d6) Thanks [@SukkaW](https://github.com/SukkaW)! - Fix #1101. Correctly handle Next.js configuration.\n\n## 2.1.3\n\n### Patch Changes\n\n- [#1099](https://github.com/vanilla-extract-css/vanilla-extract/pull/1099) [`0d1c17a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0d1c17a3ffa0212466370a9c0840774e73793f3a) Thanks [@shuding](https://github.com/shuding)! - Use the resolved Next.js config in `next-plugin`\n\n## 2.1.2\n\n### Patch Changes\n\n- [#1060](https://github.com/vanilla-extract-css/vanilla-extract/pull/1060) [`71f1dc5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/71f1dc50d01fab62087f86d1ed1ee9025913f328) Thanks [@SuttonJack](https://github.com/SuttonJack)! - Prepare next-plugin for Next 13 App Dir support\n\n* [#912](https://github.com/vanilla-extract-css/vanilla-extract/pull/912) [`9cefba8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cefba8aff8321b85f3349ab622fec6e344d8f0a) Thanks [@nix6839](https://github.com/nix6839)! - Add types to Nextjs plugin configuration\n\n## 2.1.1\n\n### Patch Changes\n\n- [#852](https://github.com/vanilla-extract-css/vanilla-extract/pull/852) [`dfc6405`](https://github.com/vanilla-extract-css/vanilla-extract/commit/dfc640593b5c627364c5423c3110b048f51844e4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `Cannot find module *.css.ts.vanilla.css` issue\n\n  Previously, CSS was being output on both the client and server builds. This fix ensure CSS is only output on the client build.\n\n## 2.1.0\n\n### Minor Changes\n\n- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove requirement for `@vanilla-extract/babel-plugin`\n\n  Previously, to get automatic debug IDs you needed to use Babel with the `@vanilla-extract/babel-plugin` in your config. As this is no longer the case, the `@vanilla-extract/babel-plugin` should be removed completely from your project.\n\n### Patch Changes\n\n- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:\n  - @vanilla-extract/webpack-plugin@2.2.0\n\n## 2.0.2\n\n### Patch Changes\n\n- [#645](https://github.com/vanilla-extract-css/vanilla-extract/pull/645) [`5ebca75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5ebca758d18e7d55d0c079c00178cb14e936ac2e) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Bump `@vanilla-extract/integration` dep\n\n- Updated dependencies [[`5ebca75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5ebca758d18e7d55d0c079c00178cb14e936ac2e)]:\n  - @vanilla-extract/webpack-plugin@2.1.7\n\n## 2.0.1\n\n### Patch Changes\n\n- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12\n\n- Updated dependencies [[`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013)]:\n  - @vanilla-extract/webpack-plugin@2.1.5\n\n## 2.0.0\n\n### Major Changes\n\n- [#537](https://github.com/vanilla-extract-css/vanilla-extract/pull/537) [`014f551`](https://github.com/vanilla-extract-css/vanilla-extract/commit/014f551a16a5a42fbe46d2489f4157249d9cab1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Bump minimum version of Next to 12.0.5.\n\n## 1.0.1\n\n### Patch Changes\n\n- [#443](https://github.com/vanilla-extract-css/vanilla-extract/pull/443) [`18363ee`](https://github.com/vanilla-extract-css/vanilla-extract/commit/18363ee319bf498ed97b068414f13f5383c41405) Thanks [@swudged](https://github.com/swudged)! - Support Next.js v12\n"
  },
  {
    "path": "packages/next-plugin/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/next-plugin\",\n  \"version\": \"2.5.1\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-next-plugin.cjs.js\",\n  \"module\": \"dist/vanilla-extract-next-plugin.esm.js\",\n  \"types\": \"dist/vanilla-extract-next-plugin.cjs.d.ts\",\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/next-plugin\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/turbopack-plugin\": \"workspace:^\",\n    \"@vanilla-extract/webpack-plugin\": \"workspace:^\",\n    \"semver\": \"^7.6.3\"\n  },\n  \"peerDependencies\": {\n    \"next\": \">=12.1.7\"\n  },\n  \"devDependencies\": {\n    \"@types/semver\": \"^7.7.1\",\n    \"next\": \"12.3.4\",\n    \"webpack\": \"^5.90.0\"\n  }\n}\n"
  },
  {
    "path": "packages/next-plugin/src/index.ts",
    "content": "// @ts-expect-error\nimport browserslist from 'next/dist/compiled/browserslist';\nimport NextMiniCssExtractPluginDefault from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';\nimport { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin/next';\nimport { findPagesDir } from 'next/dist/lib/find-pages-dir';\nimport { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';\nimport { cssFileResolve } from 'next/dist/build/webpack/config/blocks/css/loaders/file-resolve';\n\nimport type webpack from 'webpack';\nimport type {\n  NextConfig,\n  WebpackConfigContext,\n} from 'next/dist/server/config-shared';\nimport { createRequire } from 'node:module';\nimport * as path from 'node:path';\nimport type { TurboLoaderOptions } from '@vanilla-extract/turbopack-plugin';\nimport semver from 'semver';\n\nconst require = createRequire(import.meta.url);\n\ntype PluginOptions = ConstructorParameters<typeof VanillaExtractPlugin>[0] & {\n  unstable_turbopack?: {\n    glob?: string[];\n    /**\n     * controls whether we attempt to configure turbopack\n     * auto: enable only when Next >= 16.0.0\n     * on: force enable regardless of detected Next version\n     * off: never configure turbopack, webpack only\n     */\n    mode?: 'auto' | 'on' | 'off';\n  };\n};\n\nconst NextMiniCssExtractPlugin = NextMiniCssExtractPluginDefault as any;\n\n// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72\nfunction getSupportedBrowsers(dir: string, isDevelopment: boolean) {\n  try {\n    return browserslist.loadConfig({\n      path: dir,\n      env: isDevelopment ? 'development' : 'production',\n    });\n  } catch {\n    return undefined;\n  }\n}\n\n// Adopt from Next.js' getGlobalCssLoader\n// https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7\nconst getVanillaExtractCssLoaders = (\n  options: WebpackConfigContext,\n  assetPrefix: string,\n  hasAppDir: boolean,\n) => {\n  const loaders: webpack.RuleSetUseItem[] = [];\n\n  // Adopt from Next.js' getClientStyleLoader\n  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3\n  if (!options.isServer) {\n    // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L16\n    // Keep next-style-loader for development mode in `pages/`\n    if (options.dev && !hasAppDir) {\n      loaders.push({\n        loader: 'next-style-loader',\n        options: {\n          insert: function (element: Node) {\n            // By default, style-loader injects CSS into the bottom\n            // of <head>. This causes ordering problems between dev\n            // and prod. To fix this, we render a <noscript> tag as\n            // an anchor for the styles to be placed before. These\n            // styles will be applied _before_ <style jsx global>.\n\n            // These elements should always exist. If they do not,\n            // this code should fail.\n            const anchorElement = document.querySelector(\n              '#__next_css__DO_NOT_USE__',\n            )!;\n            const parentNode = anchorElement.parentNode!; // Normally <head>\n\n            // Each style tag should be placed right before our\n            // anchor. By inserting before and not after, we do not\n            // need to track the last inserted element.\n            parentNode.insertBefore(element, anchorElement);\n          },\n        },\n      });\n    } else {\n      // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L44\n      // next-style-loader will mess up css order in development mode.\n      // Next.js appDir doesn't use next-style-loader either.\n      // So we always use css-loader here, to simplify things and get proper order of output CSS\n      loaders.push({\n        loader: NextMiniCssExtractPlugin.loader,\n        options: {\n          publicPath: `${assetPrefix}/_next/`,\n          esModule: false,\n        },\n      });\n    }\n  }\n\n  const postcss = () =>\n    lazyPostCSS(\n      options.dir,\n      getSupportedBrowsers(options.dir, options.dev),\n      undefined,\n    );\n\n  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L28\n  loaders.push({\n    loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),\n    options: {\n      postcss,\n      importLoaders: 1,\n      modules: false,\n      url: (url: string, resourcePath: string) =>\n        cssFileResolve(\n          url,\n          resourcePath,\n          options.config.experimental?.urlImports,\n        ),\n      import: (url: string, _: any, resourcePath: string) =>\n        cssFileResolve(\n          url,\n          resourcePath,\n          options.config.experimental?.urlImports,\n        ),\n    },\n  });\n\n  // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L29-L38\n  loaders.push({\n    loader:\n      require.resolve('next/dist/build/webpack/loaders/postcss-loader/src'),\n    options: {\n      postcss,\n    },\n  });\n\n  // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L103-L105\n  loaders.push({\n    loader: VanillaExtractPlugin.loader,\n  });\n\n  return loaders;\n};\n\nexport const createVanillaExtractPlugin = (\n  pluginOptions: PluginOptions = {},\n) => {\n  return (nextConfig: NextConfig = {}): NextConfig => {\n    const {\n      unstable_turbopack: turbopackOptions = {},\n      ...webpackPluginOptions\n    } = pluginOptions;\n    const {\n      mode: turbopackMode = 'off',\n      glob: turbopackGlob = ['**/*.css.{js,cjs,mjs,jsx,ts,tsx}'],\n    } = turbopackOptions;\n    // detect Next version and decide whether to configure turbopack\n    const nextVersion = (() => {\n      try {\n        // resolve from the consumer app's cwd, not this package\n        const requireFromCwd = createRequire(\n          path.join(process.cwd(), 'package.json'),\n        );\n        const pkg = requireFromCwd('next/package.json') as { version?: string };\n        return pkg?.version ?? null;\n      } catch {\n        return null;\n      }\n    })();\n    const coerced = nextVersion ? semver.coerce(nextVersion) : null;\n    const supportsTurbopackRules = !!coerced && semver.gte(coerced, '16.0.0');\n    const enableTurbopack =\n      turbopackMode === 'on' ||\n      (turbopackMode === 'auto' && supportsTurbopackRules);\n\n    if (turbopackMode === 'on' && !supportsTurbopackRules) {\n      console.warn(\n        `[@vanilla-extract/next-plugin] Turbopack is configured but does not seem supported. Expected Next.js >= 16.0.0, got ${nextVersion}`,\n      );\n    }\n\n    let turbopack: typeof nextConfig.turbopack;\n    if (enableTurbopack) {\n      turbopack = { ...nextConfig.turbopack };\n\n      if (turbopackGlob.some((glob) => turbopack.rules?.[glob])) {\n        throw new Error(\n          'Vanilla extract could not be applied automatically due to conflicting turbopack rules',\n        );\n      }\n\n      const vanillaExtractRule = {\n        as: '*.js',\n        loaders: [\n          {\n            loader: require.resolve('@vanilla-extract/turbopack-plugin'),\n            options: {\n              nextEnv: nextConfig.env ?? null,\n              outputCss: pluginOptions.outputCss ?? null,\n              identifiers: pluginOptions.identifiers ?? null,\n            } satisfies TurboLoaderOptions,\n          },\n        ],\n      } as const;\n\n      const vanillaExtractCssRule = {\n        as: '*.css',\n        loaders: [require.resolve('@vanilla-extract/turbopack-plugin')],\n      } as const;\n\n      turbopack.rules = {\n        ...turbopack.rules,\n        ...Object.fromEntries(\n          turbopackGlob.map((glob) => [glob, vanillaExtractRule]),\n        ),\n        'vanilla.virtual.css': vanillaExtractCssRule,\n      };\n    }\n\n    const baseConfig: NextConfig = {\n      ...nextConfig,\n      webpack(config: any, options: WebpackConfigContext) {\n        const { dir, dev, config: resolvedNextConfig } = options;\n\n        // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/index.ts#L336\n        // https://github.com/vercel/next.js/blob/1fb4cad2a8329811b5ccde47217b4a6ae739124e/packages/next/build/webpack-config.ts#L626\n        // https://github.com/vercel/next.js/pull/43916\n        // on Next.js 12, findPagesDirResult is a string. on Next.js 13, findPagesDirResult is an object\n        const findPagesDirResult = findPagesDir(\n          dir,\n          resolvedNextConfig.experimental?.appDir ?? false,\n        );\n        // Skip nextConfig check since appDir is stable feature after Next.js 13.4\n        const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);\n\n        const outputCss = true;\n\n        // https://github.com/vercel/next.js/blob/6e5b935fd7a61497f6854a81aec7df3a5dbf61ac/packages/next/src/build/webpack/config/helpers.ts#L12-L21\n        const cssRules = config.module.rules.find(\n          (rule: any) =>\n            Array.isArray(rule.oneOf) &&\n            rule.oneOf.some(\n              ({ test }: any) =>\n                typeof test === 'object' &&\n                typeof test.test === 'function' &&\n                test.test('filename.css'),\n            ),\n        ).oneOf;\n\n        // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/index.ts#L187-L190\n        cssRules.unshift({\n          test: /vanilla\\.virtual\\.css/i,\n          sideEffects: true,\n          use: getVanillaExtractCssLoaders(\n            options,\n            resolvedNextConfig.assetPrefix,\n            hasAppDir,\n          ),\n        });\n\n        // vanilla-extract need to emit the css file on both server and client, both during the\n        // development and production.\n        // However, Next.js only add MiniCssExtractPlugin on pages dir + client build + production mode.\n        //\n        // To simplify the logic at our side, we will add MiniCssExtractPlugin based on\n        // the \"instanceof\" check (We will only add our required MiniCssExtractPlugin if\n        // Next.js hasn't added it yet).\n        // This also prevent multiple MiniCssExtractPlugin being added (which will cause\n        // RealContentHashPlugin to panic)\n        if (\n          !config.plugins.some(\n            (p: any) => p instanceof NextMiniCssExtractPlugin,\n          )\n        ) {\n          // HMR reloads the CSS file when the content changes but does not use\n          // the new file name, which means it can't contain a hash.\n          const filename = dev\n            ? 'static/css/[name].css'\n            : 'static/css/[contenthash].css';\n\n          config.plugins.push(\n            new NextMiniCssExtractPlugin({\n              filename,\n              chunkFilename: filename,\n              // Next.js guarantees that CSS order \"doesn't matter\", due to imposed\n              // restrictions:\n              // 1. Global CSS can only be defined in a single entrypoint (_app)\n              // 2. CSS Modules generate scoped class names by default and cannot\n              //    include Global CSS (:global() selector).\n              //\n              // While not a perfect guarantee (e.g. liberal use of `:global()`\n              // selector), this assumption is required to code-split CSS.\n              //\n              // If this warning were to trigger, it'd be unactionable by the user,\n              // but likely not valid -- so just disable it.\n              ignoreOrder: true,\n            }),\n          );\n        }\n\n        config.plugins.push(\n          new VanillaExtractPlugin({ outputCss, ...webpackPluginOptions }),\n        );\n\n        if (typeof nextConfig.webpack === 'function') {\n          return nextConfig.webpack(config, options);\n        }\n\n        return config;\n      },\n    };\n\n    if (enableTurbopack && turbopack) {\n      return { ...baseConfig, turbopack } as NextConfig;\n    }\n    return baseConfig;\n  };\n};\n"
  },
  {
    "path": "packages/parcel-transformer/CHANGELOG.md",
    "content": "# @vanilla-extract/parcel-transformer\n\n## 1.0.21\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.8\n\n## 1.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704)]:\n  - @vanilla-extract/integration@8.0.7\n\n## 1.0.19\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.6\n\n## 1.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:\n  - @vanilla-extract/integration@8.0.5\n\n## 1.0.17\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.4\n\n## 1.0.16\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.3\n\n## 1.0.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.2\n\n## 1.0.14\n\n### Patch Changes\n\n- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:\n  - @vanilla-extract/integration@8.0.1\n\n## 1.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:\n  - @vanilla-extract/integration@8.0.0\n\n## 1.0.12\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.12\n\n## 1.0.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.11\n\n## 1.0.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.10\n\n## 1.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:\n  - @vanilla-extract/integration@7.1.9\n\n## 1.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n\n## 1.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n\n## 1.0.6\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.6\n\n## 1.0.5\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n\n## 1.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:\n  - @vanilla-extract/integration@7.0.0\n\n## 1.0.3\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:\n  - @vanilla-extract/integration@6.4.0\n\n## 1.0.2\n\n### Patch Changes\n\n- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`\n\n## 1.0.1\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/integration@6.2.5\n"
  },
  {
    "path": "packages/parcel-transformer/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/parcel-transformer\",\n  \"version\": \"1.0.21\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-parcel-transformer.cjs.js\",\n  \"module\": \"dist/vanilla-extract-parcel-transformer.esm.js\",\n  \"types\": \"dist/vanilla-extract-parcel-transformer.cjs.d.ts\",\n  \"files\": [\n    \"/dist\"\n  ],\n  \"engines\": {\n    \"parcel\": \"2.x\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/parcel-transformer\"\n  },\n  \"author\": \"mattcompiles\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@parcel/plugin\": \"^2.15.0\",\n    \"@vanilla-extract/integration\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "packages/parcel-transformer/src/index.ts",
    "content": "import { Transformer } from '@parcel/plugin';\nimport { compile, processVanillaFile } from '@vanilla-extract/integration';\n\nconst vanillaExtractParcelTransformer: Transformer<unknown> = new Transformer({\n  async transform({ asset, options }) {\n    const identOption = options.mode === 'development' ? 'debug' : 'short';\n    const { source, watchFiles } = await compile({\n      filePath: asset.filePath,\n      cwd: options.projectRoot,\n      identOption,\n    });\n\n    for (const watchFile of watchFiles) {\n      asset.invalidateOnFileChange(watchFile);\n    }\n\n    const css: Array<{\n      type: 'css';\n      content: string;\n      uniqueKey: string;\n    }> = [];\n\n    const contents = await processVanillaFile({\n      source,\n      filePath: asset.filePath,\n      outputCss: asset.env.isBrowser(),\n      identOption,\n      serializeVirtualCssPath: ({ fileName, source: cssSource }) => {\n        const uniqueKey = fileName;\n\n        css.push({\n          type: 'css',\n          content: cssSource,\n          uniqueKey,\n        });\n\n        asset.addDependency({\n          specifier: uniqueKey,\n          specifierType: 'esm',\n        });\n\n        // CSS deps are added above so no need to add the import to the file\n        return '';\n      },\n    });\n\n    asset.setCode(contents);\n    asset.type = 'js';\n\n    return [asset, ...css];\n  },\n});\n\nexport default vanillaExtractParcelTransformer;\n"
  },
  {
    "path": "packages/private/CHANGELOG.md",
    "content": "# @vanilla-extract/private\n\n## 1.0.9\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n## 1.0.8\n\n### Patch Changes\n\n- [#1567](https://github.com/vanilla-extract-css/vanilla-extract/pull/1567) [`9d16de8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9d16de85b149b531f2e049e8d93bdb862667ff1f) Thanks [@andjsrk](https://github.com/andjsrk)! - Simplify `CSSVarFunction` type\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n## 1.0.7\n\n### Patch Changes\n\n- [#1557](https://github.com/vanilla-extract-css/vanilla-extract/pull/1557) [`134117d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/134117d32e25d92edc24c8c863d757294d7b5df8) Thanks [@askoufis](https://github.com/askoufis)! - Simplify `CSSVarFunction` type to improve type-checking performance\n\n## 1.0.6\n\n### Patch Changes\n\n- [#1463](https://github.com/vanilla-extract-css/vanilla-extract/pull/1463) [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a) Thanks [@askoufis](https://github.com/askoufis)! - Export types with `export { type T }` syntax\n\n## 1.0.5\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n## 1.0.4\n\n### Patch Changes\n\n- [#1368](https://github.com/vanilla-extract-css/vanilla-extract/pull/1368) [`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed) Thanks [@askoufis](https://github.com/askoufis)! - **walkObject**: Use an empty object to initialize a clone instead of calling the input object's `constructor`\n\n  This allows `walkObject` to be used on module namespace objects:\n\n  ```ts\n  import { walkObject } from '@vanilla-extract/private';\n  import * as ns from './foo';\n\n  // Runtime error in `vite-node`\n  walkObject(ns, myMappingFunction);\n  ```\n\n  The previous implementation did not work with these objects because [they do not have a `constructor` function][es6 spec].\n  `esbuild` seems to have papered over this issue by providing a `constructor` function on these objects, but this seems to not be the case with `vite-node`, hence the need for this fix.\n\n  [es6 spec]: https://262.ecma-international.org/6.0/#sec-module-namespace-objects\n\n## 1.0.3\n\n### Patch Changes\n\n- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)\n\n  This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.\n\n## 1.0.2\n\n### Patch Changes\n\n- [#489](https://github.com/vanilla-extract-css/vanilla-extract/pull/489) [`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix theme contract types in TypeScript 4.5\n\n## 1.0.1\n\n### Patch Changes\n\n- [#235](https://github.com/vanilla-extract-css/vanilla-extract/pull/235) [`1e49dfc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e49dfc4fc21ccb53870e297e5e4664b098cc22e) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `createGlobalTheme` types when accepting an existing contract\n\n## 1.0.0\n\n### Major Changes\n\n- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1\n\n## 0.1.2\n\n### Patch Changes\n\n- [#84](https://github.com/vanilla-extract-css/vanilla-extract/pull/84) [`0bc4e0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0bc4e0a164e9167e0356557f8feee42d7889d4b1) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Validate tokens match corresponding theme contracts\n\n## 0.1.1\n\n### Patch Changes\n\n- [#45](https://github.com/vanilla-extract-css/vanilla-extract/pull/45) [`e154028`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1540281d327fc0883f47255f710de3f9b342c64) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix `createThemeVars` when using null values\n"
  },
  {
    "path": "packages/private/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/private\",\n  \"version\": \"1.0.9\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"sideEffects\": false,\n  \"main\": \"dist/vanilla-extract-private.cjs.js\",\n  \"module\": \"dist/vanilla-extract-private.esm.js\",\n  \"types\": \"dist/vanilla-extract-private.cjs.d.ts\",\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/private\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "packages/private/src/get.ts",
    "content": "export function get(obj: any, path: Array<string>): any {\n  let result = obj;\n\n  for (const key of path) {\n    if (!(key in result)) {\n      throw new Error(`Path ${path.join(' -> ')} does not exist in object`);\n    }\n    result = result[key];\n  }\n\n  return result;\n}\n"
  },
  {
    "path": "packages/private/src/getVarName.ts",
    "content": "export function getVarName(variable: string): string {\n  const matches = variable.match(/^var\\((.*)\\)$/);\n\n  if (matches) {\n    return matches[1];\n  }\n\n  return variable;\n}\n"
  },
  {
    "path": "packages/private/src/index.ts",
    "content": "export type { Contract, MapLeafNodes, CSSVarFunction } from './types';\nexport { getVarName } from './getVarName';\nexport { get } from './get';\nexport { walkObject } from './walkObject';\n"
  },
  {
    "path": "packages/private/src/types.ts",
    "content": "export type CSSVarFunction = `var(--${string})`;\n\nexport type Contract = {\n  [key: string]: CSSVarFunction | null | Contract;\n};\n\ntype Primitive = string | boolean | number | null | undefined;\n\nexport type MapLeafNodes<Obj, LeafType> = {\n  [Prop in keyof Obj]: Obj[Prop] extends Primitive\n    ? LeafType\n    : Obj[Prop] extends Record<string | number, any>\n      ? MapLeafNodes<Obj[Prop], LeafType>\n      : never;\n};\n"
  },
  {
    "path": "packages/private/src/walkObject.ts",
    "content": "import type { MapLeafNodes } from './types';\n\ntype Primitive = string | number | null | undefined;\n\ntype Walkable = {\n  [Key in string | number]: Primitive | Walkable;\n};\n\nexport function walkObject<T extends Walkable, MapTo>(\n  obj: T,\n  fn: (value: Primitive, path: Array<string>) => MapTo,\n  path: Array<string> = [],\n): MapLeafNodes<T, MapTo> {\n  const clone = {} as any;\n\n  for (let key in obj) {\n    const value = obj[key];\n    const currentPath = [...path, key];\n\n    if (\n      typeof value === 'string' ||\n      typeof value === 'number' ||\n      value == null\n    ) {\n      clone[key] = fn(value as Primitive, currentPath);\n    } else if (typeof value === 'object' && !Array.isArray(value)) {\n      clone[key] = walkObject(value as Walkable, fn, currentPath);\n    } else {\n      console.warn(\n        `Skipping invalid key \"${currentPath.join(\n          '.',\n        )}\". Should be a string, number, null or object. Received: \"${\n          Array.isArray(value) ? 'Array' : typeof value\n        }\"`,\n      );\n    }\n  }\n\n  return clone;\n}\n"
  },
  {
    "path": "packages/recipes/CHANGELOG.md",
    "content": "# @vanilla-extract/recipes\n\n## 0.5.7\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n## 0.5.6\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n## 0.5.5\n\n### Patch Changes\n\n- [#1463](https://github.com/vanilla-extract-css/vanilla-extract/pull/1463) [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a) Thanks [@askoufis](https://github.com/askoufis)! - Export types with `export { type T }` syntax\n\n## 0.5.4\n\n### Patch Changes\n\n- [#1443](https://github.com/vanilla-extract-css/vanilla-extract/pull/1443) [`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66) Thanks [@DominikRusso](https://github.com/DominikRusso)! - Enable passing `undefined` variant values to recipe functions when TypeScript's `exactOptionalPropertyTypes` is enabled.\n\n## 0.5.3\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n## 0.5.2\n\n### Patch Changes\n\n- [#1341](https://github.com/vanilla-extract-css/vanilla-extract/pull/1341) [`3f8b653`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3f8b65368b26100919debd4591245380322c2cd7) Thanks [@levrik](https://github.com/levrik)! - Resolve recipe function input type to simplify hover type\n\n## 0.5.1\n\n### Patch Changes\n\n- [#1161](https://github.com/vanilla-extract-css/vanilla-extract/pull/1161) [`d16c22f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d16c22f19d86bf01c1fc4bf4c8914786fb0b9cc9) Thanks [@PrettyCoffee](https://github.com/PrettyCoffee)! - Improve IDE hover of `RecipeVariants` type by explicitly resolving its output\n\n## 0.5.0\n\n### Minor Changes\n\n- [#1104](https://github.com/vanilla-extract-css/vanilla-extract/pull/1104) [`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb) Thanks [@aspirisen](https://github.com/aspirisen)! - Expose recipe's class names to allow their selection\n\n* [#1104](https://github.com/vanilla-extract-css/vanilla-extract/pull/1104) [`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb) Thanks [@aspirisen](https://github.com/aspirisen)! - Always create a base class name for a recipe\n\n## 0.4.0\n\n### Minor Changes\n\n- [#1044](https://github.com/vanilla-extract-css/vanilla-extract/pull/1044) [`3163abc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3163abc75c2e280e96989f732e4e5e60e4941eff) Thanks [@mszczepanczyk](https://github.com/mszczepanczyk)! - Add `variants` function for accessing variant names at runtime\n\n## 0.3.0\n\n### Minor Changes\n\n- [#890](https://github.com/vanilla-extract-css/vanilla-extract/pull/890) [`0906063`](https://github.com/vanilla-extract-css/vanilla-extract/commit/09060639099ec580ac90cac48c3b79f0177ecfcd) Thanks [@otaviomad](https://github.com/otaviomad)! - Add RuntimeFn as an export to recipes index\n\n## 0.2.5\n\n### Patch Changes\n\n- [#704](https://github.com/vanilla-extract-css/vanilla-extract/pull/704) [`64378b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64378b083ed6fb54f073e77b62fefee673602742) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix compound variants not applying when default variants get passed undefined\n\n## 0.2.4\n\n### Patch Changes\n\n- [#626](https://github.com/vanilla-extract-css/vanilla-extract/pull/626) [`d91ddde`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d91dddeb0d57f2322a6e3c1936cde2a2771d7414) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure missing boolean variants don't return 'undefined' in class name\n\n## 0.2.3\n\n### Patch Changes\n\n- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)\n\n  This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.\n\n## 0.2.2\n\n### Patch Changes\n\n- [#508](https://github.com/vanilla-extract-css/vanilla-extract/pull/508) [`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `exports` field to `package.json` so nested package paths can be imported in a Node.js ESM context\n\n## 0.2.1\n\n### Patch Changes\n\n- [#416](https://github.com/vanilla-extract-css/vanilla-extract/pull/416) [`65d0840`](https://github.com/vanilla-extract-css/vanilla-extract/commit/65d08407655579fd9d2bed3fea7df43521f10055) Thanks [@benjervis](https://github.com/benjervis)! - Allow explicit false variants.\n\n  Boolean variants in recipes can now also have a `false` case, which is handled properly by the type system and the build system.\n\n## 0.2.0\n\n### Minor Changes\n\n- [#376](https://github.com/vanilla-extract-css/vanilla-extract/pull/376) [`f8082b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f8082b9b62c57f394bf82cf05296a680c3ef177b) Thanks [@TheMightyPenguin](https://github.com/TheMightyPenguin)! - Add `RecipeVariants` type\n\n  A utility to make use of the recipe’s type interface. This can be useful when typing functions or component props that need to accept recipe values as part of their interface.\n\n  ```ts\n  // button.css.ts\n  import {\n    recipe,\n    RecipeVariants\n  } from '@vanilla-extract/recipes';\n\n  export const button = recipe({\n    variants: {\n      color: {\n        neutral: { background: 'whitesmoke' },\n        brand: { background: 'blueviolet' },\n        accent: { background: 'slateblue' }\n      },\n      size: {\n        small: { padding: 12 },\n        medium: { padding: 16 },\n        large: { padding: 24 }\n      }\n    }\n  });\n\n  // Get the type\n  export type ButtonVariants = RecipeVariants<\n    typeof button\n  >;\n\n  // the above will result in a type equivalent to:\n  export type ButtonVariants = {\n    color?: 'neutral' | 'brand' | 'accent';\n    size?: 'small' | 'medium' | 'large';\n  };\n  ```\n\n## 0.1.1\n\n### Patch Changes\n\n- [#380](https://github.com/vanilla-extract-css/vanilla-extract/pull/380) [`3ae2422`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3ae24220e2187475561e0be54631558076370fa4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add variant group names to debug IDs\n\n* [#380](https://github.com/vanilla-extract-css/vanilla-extract/pull/380) [`3ae2422`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3ae24220e2187475561e0be54631558076370fa4) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Return default variants when selection is `undefined`\n"
  },
  {
    "path": "packages/recipes/createRuntimeFn/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-recipes-createRuntimeFn.cjs.js\",\n  \"module\": \"dist/vanilla-extract-recipes-createRuntimeFn.esm.js\"\n}\n"
  },
  {
    "path": "packages/recipes/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/recipes\",\n  \"version\": \"0.5.7\",\n  \"description\": \"Create multi-variant styles with a type-safe runtime API, heavily inspired by https://stitches.dev\",\n  \"sideEffects\": false,\n  \"main\": \"dist/vanilla-extract-recipes.cjs.js\",\n  \"module\": \"dist/vanilla-extract-recipes.esm.js\",\n  \"types\": \"dist/vanilla-extract-recipes.cjs.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"module\": \"./dist/vanilla-extract-recipes.esm.js\",\n      \"default\": \"./dist/vanilla-extract-recipes.cjs.js\"\n    },\n    \"./createRuntimeFn\": {\n      \"module\": \"./createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js\",\n      \"default\": \"./createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.cjs.js\"\n    }\n  },\n  \"files\": [\n    \"/dist\",\n    \"/createRuntimeFn\"\n  ],\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\",\n      \"createRuntimeFn.ts\"\n    ]\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/recipes\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"peerDependencies\": {\n    \"@vanilla-extract/css\": \"^1.0.0\"\n  },\n  \"devDependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "packages/recipes/src/createRuntimeFn.ts",
    "content": "import type {\n  PatternResult,\n  RecipeClassNames,\n  RuntimeFn,\n  VariantGroups,\n  VariantSelection,\n} from './types';\nimport { mapValues } from './utils';\n\nconst shouldApplyCompound = <Variants extends VariantGroups>(\n  compoundCheck: VariantSelection<Variants>,\n  selections: VariantSelection<Variants>,\n  defaultVariants: VariantSelection<Variants>,\n) => {\n  for (const key of Object.keys(compoundCheck)) {\n    if (compoundCheck[key] !== (selections[key] ?? defaultVariants[key])) {\n      return false;\n    }\n  }\n\n  return true;\n};\n\nexport const createRuntimeFn = <Variants extends VariantGroups>(\n  config: PatternResult<Variants>,\n): RuntimeFn<Variants> => {\n  const runtimeFn: RuntimeFn<Variants> = (options) => {\n    let className = config.defaultClassName;\n\n    const selections: VariantSelection<Variants> = {\n      ...config.defaultVariants,\n      ...options,\n    };\n    for (const variantName in selections) {\n      const variantSelection =\n        selections[variantName] ?? config.defaultVariants[variantName];\n\n      if (variantSelection != null) {\n        let selection = variantSelection;\n\n        if (typeof selection === 'boolean') {\n          // @ts-expect-error\n          selection = selection === true ? 'true' : 'false';\n        }\n\n        const selectionClassName =\n          // @ts-expect-error\n          config.variantClassNames[variantName][selection];\n\n        if (selectionClassName) {\n          className += ' ' + selectionClassName;\n        }\n      }\n    }\n\n    for (const [compoundCheck, compoundClassName] of config.compoundVariants) {\n      if (\n        shouldApplyCompound(compoundCheck, selections, config.defaultVariants)\n      ) {\n        className += ' ' + compoundClassName;\n      }\n    }\n\n    return className;\n  };\n\n  runtimeFn.variants = () => Object.keys(config.variantClassNames);\n\n  runtimeFn.classNames = {\n    get base() {\n      return config.defaultClassName.split(' ')[0];\n    },\n\n    get variants() {\n      return mapValues(config.variantClassNames, (classNames) =>\n        mapValues(classNames, (className) => className.split(' ')[0]),\n      ) as RecipeClassNames<Variants>['variants'];\n    },\n  };\n\n  return runtimeFn;\n};\n"
  },
  {
    "path": "packages/recipes/src/index.ts",
    "content": "import { addRecipe } from '@vanilla-extract/css/recipe';\nimport { style, styleVariants } from '@vanilla-extract/css';\n\nimport { createRuntimeFn } from './createRuntimeFn';\nimport type {\n  PatternOptions,\n  PatternResult,\n  RuntimeFn,\n  VariantGroups,\n  VariantSelection,\n} from './types';\nimport { mapValues } from './utils';\n\nexport type { RecipeVariants, RuntimeFn } from './types';\n\nexport function recipe<Variants extends VariantGroups>(\n  options: PatternOptions<Variants>,\n  debugId?: string,\n): RuntimeFn<Variants> {\n  const {\n    variants = {},\n    defaultVariants = {},\n    compoundVariants = [],\n    base,\n  } = options;\n\n  let defaultClassName;\n\n  if (!base || typeof base === 'string') {\n    const baseClassName = style({});\n    defaultClassName = base ? `${baseClassName} ${base}` : baseClassName;\n  } else {\n    defaultClassName = style(base, debugId);\n  }\n\n  // @ts-expect-error\n  const variantClassNames: PatternResult<Variants>['variantClassNames'] =\n    mapValues(variants, (variantGroup, variantGroupName) =>\n      styleVariants(\n        variantGroup,\n        (styleRule) =>\n          typeof styleRule === 'string' ? [styleRule] : styleRule,\n        debugId ? `${debugId}_${variantGroupName}` : variantGroupName,\n      ),\n    );\n\n  const compounds: Array<[VariantSelection<Variants>, string]> = [];\n\n  for (const { style: theStyle, variants } of compoundVariants) {\n    compounds.push([\n      variants,\n      typeof theStyle === 'string'\n        ? theStyle\n        : style(theStyle, `${debugId}_compound_${compounds.length}`),\n    ]);\n  }\n\n  const config: PatternResult<Variants> = {\n    defaultClassName,\n    variantClassNames,\n    defaultVariants,\n    compoundVariants: compounds,\n  };\n\n  return addRecipe(createRuntimeFn(config), {\n    importPath: '@vanilla-extract/recipes/createRuntimeFn',\n    importName: 'createRuntimeFn',\n    // @ts-expect-error\n    args: [config],\n  });\n}\n"
  },
  {
    "path": "packages/recipes/src/types.ts",
    "content": "import type { ComplexStyleRule } from '@vanilla-extract/css';\n\ntype Resolve<T> = {\n  [Key in keyof T]: T[Key];\n} & {};\n\ntype RecipeStyleRule = ComplexStyleRule | string;\n\nexport type VariantDefinitions = Record<string, RecipeStyleRule>;\n\ntype BooleanMap<T> = T extends 'true' | 'false' ? boolean : T;\n\nexport type VariantGroups = Record<string, VariantDefinitions>;\nexport type VariantSelection<Variants extends VariantGroups> = {\n  [VariantGroup in keyof Variants]?:\n    | BooleanMap<keyof Variants[VariantGroup]>\n    | undefined;\n};\n\nexport type VariantsClassNames<Variants extends VariantGroups> = {\n  [P in keyof Variants]: {\n    [PP in keyof Variants[P]]: string;\n  };\n};\n\nexport type PatternResult<Variants extends VariantGroups> = {\n  defaultClassName: string;\n  variantClassNames: VariantsClassNames<Variants>;\n  defaultVariants: VariantSelection<Variants>;\n  compoundVariants: Array<[VariantSelection<Variants>, string]>;\n};\n\nexport interface CompoundVariant<Variants extends VariantGroups> {\n  variants: VariantSelection<Variants>;\n  style: RecipeStyleRule;\n}\n\nexport type PatternOptions<Variants extends VariantGroups> = {\n  base?: RecipeStyleRule;\n  variants?: Variants;\n  defaultVariants?: VariantSelection<Variants>;\n  compoundVariants?: Array<CompoundVariant<Variants>>;\n};\n\nexport type RecipeClassNames<Variants extends VariantGroups> = {\n  base: string;\n  variants: VariantsClassNames<Variants>;\n};\n\nexport type RuntimeFn<Variants extends VariantGroups> = ((\n  options?: Resolve<VariantSelection<Variants>>,\n) => string) & {\n  variants: () => (keyof Variants)[];\n  classNames: RecipeClassNames<Variants>;\n};\n\nexport type RecipeVariants<RecipeFn extends RuntimeFn<VariantGroups>> = Resolve<\n  Parameters<RecipeFn>[0]\n>;\n"
  },
  {
    "path": "packages/recipes/src/utils.ts",
    "content": "export function mapValues<Input extends Record<string, any>, OutputValue>(\n  input: Input,\n  fn: (value: Input[keyof Input], key: keyof Input) => OutputValue,\n): Record<keyof Input, OutputValue> {\n  const result: any = {};\n\n  for (const key in input) {\n    result[key] = fn(input[key], key);\n  }\n\n  return result;\n}\n"
  },
  {
    "path": "packages/rollup-plugin/CHANGELOG.md",
    "content": "# @vanilla-extract/rollup-plugin\n\n## 1.5.3\n\n### Patch Changes\n\n- [#1699](https://github.com/vanilla-extract-css/vanilla-extract/pull/1699) [`c5780ad`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c5780ad7bfdd298a7a93e42552d8a521213771a8) Thanks [@askoufis](https://github.com/askoufis)! - Fixed a bug where side-effect `require`s would not be stripped when bundling CSS with the `extract` option\n\n- [#1699](https://github.com/vanilla-extract-css/vanilla-extract/pull/1699) [`c5780ad`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c5780ad7bfdd298a7a93e42552d8a521213771a8) Thanks [@askoufis](https://github.com/askoufis)! - Fixed a bug where side-effect imports would not be stripped in `.cjs` or `.mjs` files when bundling CSS with the `extract` option\n\n## 1.5.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.8\n\n## 1.5.1\n\n### Patch Changes\n\n- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704)]:\n  - @vanilla-extract/integration@8.0.7\n\n## 1.5.0\n\n### Minor Changes\n\n- [#1654](https://github.com/vanilla-extract-css/vanilla-extract/pull/1654) [`fbc2c31`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fbc2c3118f1d008a7d016ca2c7bec1c19c077404) Thanks [@askoufis](https://github.com/askoufis)! - Add optional `unstable_injectFilescopes` flag\n\n  The `unstable_injectFilescopes` flag injects filescopes into Vanilla Extract modules instead of generating CSS. This is useful for utility or component libraries that prefer their consumers to process Vanilla Extract files instead of bundling CSS.\n\n  Note that this flag only works with `preserveModules: true`.\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.6\n\n## 1.4.3\n\n### Patch Changes\n\n- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:\n  - @vanilla-extract/integration@8.0.5\n\n## 1.4.2\n\n### Patch Changes\n\n- [#1616](https://github.com/vanilla-extract-css/vanilla-extract/pull/1616) [`e2c439f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e2c439ffa96dce570f2d472d2ca6ee40c69e3ee9) Thanks [@radnan](https://github.com/radnan)! - allow plugin to work in rolldown\n\n## 1.4.1\n\n### Patch Changes\n\n- [#1627](https://github.com/vanilla-extract-css/vanilla-extract/pull/1627) [`2fcf8e8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2fcf8e89a3f09782bf9fbbf6e51c01dd4b1a2017) Thanks [@stipsan](https://github.com/stipsan)! - Include content in CSS sourcemap when bundling with the `extract` option\n\n## 1.4.0\n\n### Minor Changes\n\n- [#1604](https://github.com/vanilla-extract-css/vanilla-extract/pull/1604) [`4a020ba`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4a020ba48941e438fc6bdcfb472da50316db993d) Thanks [@drwpow](https://github.com/drwpow)! - Add \"extract\" option which bundles CSS into one bundle. Removes .css imports.\n\n  **EXAMPLE USAGE**:\n\n  ```ts\n  vanillaExtractPlugin({\n    extract: {\n      name: 'bundle.css',\n      sourcemap: false\n    }\n  });\n  ```\n\n## 1.3.17\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.4\n\n## 1.3.16\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.3\n\n## 1.3.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.2\n\n## 1.3.14\n\n### Patch Changes\n\n- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:\n  - @vanilla-extract/integration@8.0.1\n\n## 1.3.13\n\n### Patch Changes\n\n- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:\n  - @vanilla-extract/integration@8.0.0\n\n## 1.3.12\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.12\n\n## 1.3.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.11\n\n## 1.3.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.10\n\n## 1.3.9\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:\n  - @vanilla-extract/integration@7.1.9\n\n## 1.3.8\n\n### Patch Changes\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n\n## 1.3.7\n\n### Patch Changes\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n\n## 1.3.6\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.6\n\n## 1.3.5\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n\n## 1.3.4\n\n### Patch Changes\n\n- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:\n  - @vanilla-extract/integration@7.0.0\n\n## 1.3.3\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:\n  - @vanilla-extract/integration@6.4.0\n\n## 1.3.2\n\n### Patch Changes\n\n- [#1290](https://github.com/vanilla-extract-css/vanilla-extract/pull/1290) [`5d7140e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5d7140e03f7b10c07ccae754a4a19100467e98ad) Thanks [@smholsen](https://github.com/smholsen)! - Add Rollup v4 to peer dependencies\n\n- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`\n\n- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier\n\n## 1.3.1\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/integration@6.2.5\n\n## 1.3.0\n\n### Minor Changes\n\n- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function\n\n## 1.2.2\n\n### Patch Changes\n\n- [#1084](https://github.com/vanilla-extract-css/vanilla-extract/pull/1084) [`a0fd623`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a0fd6234bfe8294639d039bd25ec7135cc3445aa) Thanks [@graup](https://github.com/graup)! - Fix emitting assets when in watch mode (#1076)\n\n## 1.2.1\n\n### Patch Changes\n\n- [#1047](https://github.com/vanilla-extract-css/vanilla-extract/pull/1047) [`589d89e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/589d89e93e91d94e0d2f7e8cad862faf977f534e) Thanks [@jd-oconnor](https://github.com/jd-oconnor)! - Add rollup v3 as a peer dependency\n\n## 1.2.0\n\n### Minor Changes\n\n- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add automatic debug IDs\n\n  Automatic debug IDs allow your styles and other identifiers (e.g. CSS Vars, keyframes, etc) to have names that more closely reflect your source code when in development. This makes it easier to understand how the CSS output links to your source code.\n\n  ```ts\n  // styles.css.ts\n\n  // redBox ~= 'styles_redBox_asdfgj'\n  const redBox = style({\n    background: 'red'\n  });\n  ```\n\n### Patch Changes\n\n- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:\n  - @vanilla-extract/integration@6.0.0\n\n## 1.1.0\n\n### Minor Changes\n\n- [#668](https://github.com/vanilla-extract-css/vanilla-extract/pull/668) [`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Add esbuild configurations to vite/esbuild/rollup plugins\n\n### Patch Changes\n\n- Updated dependencies [[`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3)]:\n  - @vanilla-extract/integration@5.0.0\n\n## 1.0.4\n\n### Patch Changes\n\n- [#710](https://github.com/vanilla-extract-css/vanilla-extract/pull/710) [`e338442`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3384428ac7110ccf1f47b80817ca8c976b90b3f) Thanks [@riccardoperra](https://github.com/riccardoperra)! - Normalize import path for emitted css files\n\n* [#706](https://github.com/vanilla-extract-css/vanilla-extract/pull/706) [`3fc5040`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3fc50406d5e57bb131eaebab42052cb1370cddff) Thanks [@graup](https://github.com/graup)! - Suppress empty sourcemap warnings\n\n## 1.0.3\n\n### Patch Changes\n\n- [#693](https://github.com/vanilla-extract-css/vanilla-extract/pull/693) [`351388a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/351388ab2f4bfea13d7c2c327b86aabdb1cc2e19) Thanks [@graup](https://github.com/graup)! - Fix emitting assets when in watch mode\n\n## 1.0.2\n\n### Patch Changes\n\n- [#673](https://github.com/vanilla-extract-css/vanilla-extract/pull/673) [`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where `.css.ts` files with the same file path from other packages could have identifier collisions\n\n- Updated dependencies [[`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140)]:\n  - @vanilla-extract/integration@4.0.1\n\n## 1.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636)]:\n  - @vanilla-extract/integration@4.0.0\n"
  },
  {
    "path": "packages/rollup-plugin/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/rollup-plugin\",\n  \"version\": \"1.5.3\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-rollup-plugin.cjs.js\",\n  \"module\": \"dist/vanilla-extract-rollup-plugin.esm.js\",\n  \"types\": \"dist/vanilla-extract-rollup-plugin.cjs.d.ts\",\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/rollup-plugin\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/integration\": \"workspace:^\",\n    \"magic-string\": \"^0.30.17\"\n  },\n  \"devDependencies\": {\n    \"@fixtures/themed\": \"workspace:*\",\n    \"@rollup/plugin-json\": \"^6.1.0\",\n    \"@vanilla-extract/css\": \"workspace:^\",\n    \"esbuild\": \"~0.27.0\",\n    \"rolldown\": \"1.0.0-beta.27\",\n    \"rollup\": \"^4.20.0\",\n    \"rollup-plugin-esbuild\": \"^6.1.1\"\n  },\n  \"peerDependencies\": {\n    \"rollup\": \"^2.0.0 || ^3.0.0 || ^4.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/rollup-plugin/src/index.ts",
    "content": "import type { Plugin } from 'rollup';\nimport {\n  cssFileFilter,\n  processVanillaFile,\n  compile,\n  type IdentifierOption,\n  getSourceFromVirtualCssFile,\n  virtualCssFileFilter,\n  transform,\n  type CompileOptions,\n} from '@vanilla-extract/integration';\nimport { posix } from 'path';\nimport {\n  generateCssBundle,\n  stripSideEffectImportsMatching,\n  tryGetPackageName,\n} from './lib';\n\nconst { relative, normalize, dirname } = posix;\n\nexport interface Options {\n  /**\n   * Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:\n   * - \"short\": 7+ character hash. e.g. hnw5tz3\n   * - \"debug\": human readable prefixes representing the owning filename and a potential rule level debug name. e.g. myfile_mystyle_hnw5tz3\n   * - custom function: takes an object parameter with `hash`, `filePath`, `debugId`, and `packageName`, and returns a customized identifier.\n   * @default \"short\"\n   * @example ({ hash }) => `prefix_${hash}`\n   */\n  identifiers?: IdentifierOption;\n  /**\n   * Current working directory\n   * @default process.cwd()\n   */\n  cwd?: string;\n  /**\n   * Options forwarded to esbuild\n   * @see https://esbuild.github.io/\n   */\n  esbuildOptions?: CompileOptions['esbuildOptions'];\n  /**\n   * Extract .css bundle to a specified filename\n   * @default false\n   */\n  extract?:\n    | {\n        /**\n         * Name of emitted .css file.\n         * @default \"bundle.css\"\n         */\n        name?: string;\n        /**\n         * Generate a .css.map file?\n         * @default false\n         */\n        sourcemap?: boolean;\n      }\n    | false;\n\n  /**\n   * Inject filescopes into Vanilla Extract modules instead of generating CSS.\n   * Useful for utility or component libraries that prefer their consumers to\n   * process Vanilla Extract files instead of bundling CSS.\n   *\n   * Only works with `preserveModules: true`.\n   *\n   * @default false\n   */\n  unstable_injectFilescopes?: boolean;\n}\n\nexport function vanillaExtractPlugin({\n  identifiers,\n  cwd = process.cwd(),\n  esbuildOptions,\n  extract = false,\n  unstable_injectFilescopes = false,\n}: Options = {}): Plugin {\n  const isProduction = process.env.NODE_ENV === 'production';\n\n  let extractedCssIds = new Set<string>(); // only for `extract`\n\n  return {\n    name: 'vanilla-extract',\n\n    buildStart() {\n      extractedCssIds = new Set(); // refresh every build\n    },\n\n    // Transform .css.js to .js\n    async transform(code, id) {\n      if (!cssFileFilter.test(id)) {\n        return null;\n      }\n\n      const identOption = identifiers ?? (isProduction ? 'short' : 'debug');\n      const [filePath] = id.split('?');\n\n      if (unstable_injectFilescopes) {\n        const packageName = await tryGetPackageName(cwd);\n        const transformedCode = await transform({\n          source: code,\n          filePath: id,\n          rootPath: cwd,\n          packageName: packageName ?? '',\n          identOption,\n        });\n\n        return {\n          code: transformedCode,\n          map: { mappings: '' },\n        };\n      }\n\n      const { source, watchFiles } = await compile({\n        filePath,\n        cwd,\n        esbuildOptions,\n        identOption,\n      });\n\n      for (const file of watchFiles) {\n        this.addWatchFile(file);\n      }\n\n      const output = await processVanillaFile({\n        source,\n        filePath,\n        identOption,\n      });\n      return {\n        code: output,\n        map: { mappings: '' },\n      };\n    },\n\n    // Resolve .css to external module\n    async resolveId(id) {\n      if (!virtualCssFileFilter.test(id)) {\n        return null;\n      }\n      const { fileName, source } = await getSourceFromVirtualCssFile(id);\n      return {\n        id: fileName,\n        external: true,\n        meta: {\n          css: source,\n        },\n      };\n    },\n    // Emit .css assets and replace .css import paths with relative paths to emitted css files\n    renderChunk(code, chunkInfo) {\n      const chunkPath = dirname(chunkInfo.fileName);\n      const output = chunkInfo.imports.reduce((codeResult, importPath) => {\n        const moduleInfo = this.getModuleInfo(importPath);\n        if (!moduleInfo?.meta.css || extract) {\n          return codeResult;\n        }\n\n        const assetId = this.emitFile({\n          type: 'asset',\n          name: moduleInfo.id,\n          source: moduleInfo.meta.css,\n        });\n        const assetPath = this.getFileName(assetId);\n        const relativeAssetPath = `./${normalize(\n          relative(chunkPath, assetPath),\n        )}`;\n        return codeResult.replace(importPath, relativeAssetPath);\n      }, code);\n\n      return {\n        code: output,\n        map: null,\n      };\n    },\n\n    // Generate bundle (if extracting)\n    async buildEnd() {\n      if (!extract) {\n        return;\n      }\n      // Note: generateBundle() can’t happen earlier than buildEnd\n      // because the graph hasn’t fully settled until this point.\n      const { bundle, extractedCssIds: extractedIds } = generateCssBundle(this);\n      extractedCssIds = extractedIds;\n      const name = extract.name || 'bundle.css';\n      this.emitFile({\n        type: 'asset',\n        name,\n        originalFileName: name,\n        source: bundle.toString(),\n      });\n      if (extract.sourcemap) {\n        const sourcemapName = `${name}.map`;\n        this.emitFile({\n          type: 'asset',\n          name: sourcemapName,\n          originalFileName: sourcemapName,\n          source: bundle\n            .generateMap({ file: name, includeContent: true })\n            .toString(),\n        });\n      }\n    },\n\n    // Remove side effect imports (if extracting)\n    async generateBundle(_options, bundle) {\n      if (!extract) {\n        return;\n      }\n      await Promise.all(\n        Object.entries(bundle).map(async ([id, chunk]) => {\n          const isJsFile = /\\.(m|c)?js$/.test(id);\n          if (\n            chunk.type === 'chunk' &&\n            isJsFile &&\n            chunk.imports.some((specifier) => extractedCssIds.has(specifier))\n          ) {\n            chunk.code = stripSideEffectImportsMatching(chunk.code, [\n              ...extractedCssIds,\n            ]);\n          }\n        }),\n      );\n    },\n  };\n}\n"
  },
  {
    "path": "packages/rollup-plugin/src/lib.ts",
    "content": "import { cssFileFilter } from '@vanilla-extract/integration';\nimport MagicString, { Bundle as MagicStringBundle } from 'magic-string';\nimport type { ModuleInfo, PluginContext } from 'rollup';\nimport { posix } from 'path';\n\n/** Generate a CSS bundle from Rollup context */\nexport function generateCssBundle(\n  plugin: Pick<PluginContext, 'getModuleIds' | 'getModuleInfo' | 'warn'>,\n): {\n  bundle: MagicStringBundle;\n  extractedCssIds: Set<string>;\n} {\n  const cssBundle = new MagicStringBundle();\n  const extractedCssIds = new Set<string>();\n\n  // 1. identify CSS files to bundle\n  const cssFiles: Record<string, ImportChain> = {};\n  for (const id of plugin.getModuleIds()) {\n    if (cssFileFilter.test(id)) {\n      cssFiles[id] = buildImportChain(id, plugin);\n    }\n  }\n\n  // 2. build bundle from import order\n  for (const id of sortModules(cssFiles)) {\n    const { importedIds } = plugin.getModuleInfo(id) ?? {};\n    for (const importedId of importedIds ?? []) {\n      const resolution = plugin.getModuleInfo(importedId);\n      if (resolution?.meta.css && !extractedCssIds.has(resolution.id)) {\n        extractedCssIds.add(resolution.id);\n        cssBundle.addSource({\n          filename: resolution.id,\n          content: new MagicString(resolution.meta.css),\n        });\n      }\n    }\n  }\n\n  return { bundle: cssBundle, extractedCssIds };\n}\n\n/** [id, order] tuple meant for ordering imports */\nexport type ImportChain = [id: string, order: number][];\n\n/** Trace a file back through its importers, building an ordered list */\nexport function buildImportChain(\n  id: string,\n  plugin: Pick<PluginContext, 'getModuleInfo' | 'warn'>,\n): ImportChain {\n  let mod: ModuleInfo | null = plugin.getModuleInfo(id)!;\n  if (!mod) {\n    return [];\n  }\n  /** [id, order] */\n  const chain: ImportChain = [[id, -1]];\n  // resolve upwards to root entry\n  while (!mod.isEntry) {\n    const { id: currentId, importers } = mod;\n    const lastImporterId = importers.at(-1);\n    if (!lastImporterId) {\n      break;\n    }\n    if (chain.some(([id]) => id === lastImporterId)) {\n      plugin.warn(\n        `Circular import detected. Can’t determine ideal import order of module.\\n${chain\n          .reverse()\n          .join('\\n  → ')}`,\n      );\n      break;\n    }\n    mod = plugin.getModuleInfo(lastImporterId);\n    if (!mod) {\n      break;\n    }\n    // importedIds preserves the import order within each module\n    chain.push([lastImporterId, mod.importedIds.indexOf(currentId)]);\n  }\n  return chain.reverse();\n}\n\n/** Compare import chains to determine a flat ordering for modules */\nexport function sortModules(modules: Record<string, ImportChain>): string[] {\n  const sortedModules = Object.entries(modules);\n\n  // 2. sort CSS by import order\n  sortedModules.sort(([_idA, chainA], [_idB, chainB]) => {\n    const shorterChain = Math.min(chainA.length, chainB.length);\n    for (let i = 0; i < shorterChain; i++) {\n      const [moduleA, orderA] = chainA[i];\n      const [moduleB, orderB] = chainB[i];\n      // on same node, continue to next one\n      if (moduleA === moduleB && orderA === orderB) {\n        continue;\n      }\n      if (orderA !== orderB) {\n        return orderA - orderB;\n      }\n    }\n    return 0;\n  });\n\n  return sortedModules.map(([id]) => id);\n}\n\nconst SIDE_EFFECT_IMPORT_RE =\n  /^\\s*(?:import\\s+['\"]([^'\"]+)['\"]|require\\s*\\(\\s*['\"]([^'\"]+)['\"]\\s*\\))\\s*;?\\s*/gm;\n\n/** Remove specific side effect imports and requires from JS */\nexport const stripSideEffectImportsMatching = (\n  code: string,\n  sources: string[],\n): string =>\n  code.replace(SIDE_EFFECT_IMPORT_RE, (match, importSource, requireSource) =>\n    sources.includes(importSource ?? requireSource) ? '' : match,\n  );\n\nexport async function tryGetPackageName(cwd: string): Promise<string | null> {\n  try {\n    const packageJson = require(posix.join(cwd, 'package.json'));\n\n    return packageJson?.name || null;\n  } catch {\n    return null;\n  }\n}\n"
  },
  {
    "path": "packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`rollup-plugin > Rollup settings > should build with preserveModules 1`] = `\n[\n  [\n    \"assets/src/shared.css.ts.vanilla-G_Gyt4-e.css\",\n    \".shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody, button {\n  line-height: 16px;\n}\",\n  ],\n  [\n    \"assets/src/styles.css.ts.vanilla-BfisGtko.css\",\n    \"@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(--colors-backgroundColor__cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: 'I am content';\n}\nhtml .styles_opacity_1\\\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\",\n  ],\n  [\n    \"assets/src/themes.css.ts.vanilla-s9rcEmBH.css\",\n    \"@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root, .themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\",\n  ],\n  [\n    \"src/index.js\",\n    \"import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';\nimport { vars, altTheme, theme, responsiveTheme } from './themes.css.js';\nimport { container, button, opacity } from './styles.css.js';\nimport { shadow } from './shared.css.js';\nimport testNodes from '../test-nodes.json.js';\n\nconst inlineTheme = assignInlineVars(vars, {\n  colors: {\n    backgroundColor: \"orange\",\n    text: \"black\"\n  },\n  space: {\n    1: \"4px\",\n    2: \"8px\",\n    3: \"12px\"\n  }\n});\nfunction render() {\n  document.body.innerHTML = \\`\n  <div id=\"\\${testNodes.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${testNodes.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${testNodes.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${testNodes.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${testNodes.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${testNodes.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${testNodes.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${testNodes.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${testNodes.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${testNodes.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${testNodes.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n  const dynamicVarsContainer = document.getElementById(\n    testNodes.dynamicVarsContainer\n  );\n  if (!dynamicVarsContainer) {\n    throw new Error(\"Dynamic vars container not found.\");\n  }\n  setElementVars(dynamicVarsContainer, vars, {\n    colors: {\n      backgroundColor: \"transparent\",\n      text: \"papayawhip\"\n    },\n    space: {\n      1: \"5px\",\n      2: \"10px\",\n      3: \"15px\"\n    }\n  });\n  setElementVars(dynamicVarsContainer, {\n    [vars.colors.backgroundColor]: \"darksalmon\"\n  });\n}\nrender();\n\",\n  ],\n  [\n    \"src/shared.css.js\",\n    \"import './../assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';\n\nvar shadow = \"shared_shadow__4dtfen0\";\n\nexport { shadow };\n\",\n  ],\n  [\n    \"src/styles.css.js\",\n    \"import './../assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';\nimport './../assets/src/themes.css.ts.vanilla-s9rcEmBH.css';\nimport './../assets/src/styles.css.ts.vanilla-BfisGtko.css';\n\nvar button = \"styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12\";\nvar container = \"styles_container__jteyb11\";\nvar opacity = { \"1/2\": \"styles_opacity_1/2__jteyb16\", \"1/4\": \"styles_opacity_1/4__jteyb17\" };\n\nexport { button, container, opacity };\n\",\n  ],\n  [\n    \"src/themes.css.js\",\n    \"import './../assets/src/themes.css.ts.vanilla-s9rcEmBH.css';\n\nvar altTheme = \"themes_altTheme__cvta176\";\nvar responsiveTheme = \"themes_responsiveTheme__cvta17e\";\nvar theme = \"themes_theme__cvta170\";\nvar vars = { colors: { backgroundColor: \"var(--colors-backgroundColor__cvta171)\", text: \"var(--colors-text__cvta172)\" }, space: { \"1\": \"var(--space-1__cvta173)\", \"2\": \"var(--space-2__cvta174)\", \"3\": \"var(--space-3__cvta175)\" } };\n\nexport { altTheme, responsiveTheme, theme, vars };\n\",\n  ],\n  [\n    \"test-nodes.json.js\",\n    \"var root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar testNodes = {\n\troot: root,\n\trootContainer: rootContainer,\n\trootButton: rootButton,\n\taltContainer: altContainer,\n\taltButton: altButton,\n\tnestedRootContainer: nestedRootContainer,\n\tnestedRootButton: nestedRootButton,\n\tinlineThemeContainer: inlineThemeContainer,\n\tinlineThemeButton: inlineThemeButton,\n\tdynamicVarsContainer: dynamicVarsContainer,\n\tdynamicVarsButton: dynamicVarsButton,\n\tresponsiveThemeContainer: responsiveThemeContainer,\n\tresponsiveThemeButton: responsiveThemeButton\n};\n\nexport { altButton, altContainer, testNodes as default, dynamicVarsButton, dynamicVarsContainer, inlineThemeButton, inlineThemeContainer, nestedRootButton, nestedRootContainer, responsiveThemeButton, responsiveThemeContainer, root, rootButton, rootContainer };\n\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > Rollup settings > should build with preserveModules and assetFileNames 1`] = `\n[\n  [\n    \"index.js\",\n    \"import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';\nimport { vars, altTheme, theme, responsiveTheme } from './themes.css.js';\nimport { container, button, opacity } from './styles.css.js';\nimport { shadow } from './shared.css.js';\nimport testNodes from './test-nodes.json.js';\n\nconst inlineTheme = assignInlineVars(vars, {\n  colors: {\n    backgroundColor: \"orange\",\n    text: \"black\"\n  },\n  space: {\n    1: \"4px\",\n    2: \"8px\",\n    3: \"12px\"\n  }\n});\nfunction render() {\n  document.body.innerHTML = \\`\n  <div id=\"\\${testNodes.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${testNodes.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${testNodes.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${testNodes.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${testNodes.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${testNodes.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${testNodes.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${testNodes.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${testNodes.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${testNodes.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${testNodes.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n  const dynamicVarsContainer = document.getElementById(\n    testNodes.dynamicVarsContainer\n  );\n  if (!dynamicVarsContainer) {\n    throw new Error(\"Dynamic vars container not found.\");\n  }\n  setElementVars(dynamicVarsContainer, vars, {\n    colors: {\n      backgroundColor: \"transparent\",\n      text: \"papayawhip\"\n    },\n    space: {\n      1: \"5px\",\n      2: \"10px\",\n      3: \"15px\"\n    }\n  });\n  setElementVars(dynamicVarsContainer, {\n    [vars.colors.backgroundColor]: \"darksalmon\"\n  });\n}\nrender();\n\",\n  ],\n  [\n    \"shared.css.js\",\n    \"import './shared.css.ts.vanilla.css';\n\nvar shadow = \"shared_shadow__4dtfen0\";\n\nexport { shadow };\n\",\n  ],\n  [\n    \"shared.css.ts.vanilla.css\",\n    \".shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody, button {\n  line-height: 16px;\n}\",\n  ],\n  [\n    \"styles.css.js\",\n    \"import './shared.css.ts.vanilla.css';\nimport './themes.css.ts.vanilla.css';\nimport './styles.css.ts.vanilla.css';\n\nvar button = \"styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12\";\nvar container = \"styles_container__jteyb11\";\nvar opacity = { \"1/2\": \"styles_opacity_1/2__jteyb16\", \"1/4\": \"styles_opacity_1/4__jteyb17\" };\n\nexport { button, container, opacity };\n\",\n  ],\n  [\n    \"styles.css.ts.vanilla.css\",\n    \"@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(--colors-backgroundColor__cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: 'I am content';\n}\nhtml .styles_opacity_1\\\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\",\n  ],\n  [\n    \"test-nodes.json.js\",\n    \"var root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar testNodes = {\n\troot: root,\n\trootContainer: rootContainer,\n\trootButton: rootButton,\n\taltContainer: altContainer,\n\taltButton: altButton,\n\tnestedRootContainer: nestedRootContainer,\n\tnestedRootButton: nestedRootButton,\n\tinlineThemeContainer: inlineThemeContainer,\n\tinlineThemeButton: inlineThemeButton,\n\tdynamicVarsContainer: dynamicVarsContainer,\n\tdynamicVarsButton: dynamicVarsButton,\n\tresponsiveThemeContainer: responsiveThemeContainer,\n\tresponsiveThemeButton: responsiveThemeButton\n};\n\nexport { altButton, altContainer, testNodes as default, dynamicVarsButton, dynamicVarsContainer, inlineThemeButton, inlineThemeContainer, nestedRootButton, nestedRootContainer, responsiveThemeButton, responsiveThemeContainer, root, rootButton, rootContainer };\n\",\n  ],\n  [\n    \"themes.css.js\",\n    \"import './themes.css.ts.vanilla.css';\n\nvar altTheme = \"themes_altTheme__cvta176\";\nvar responsiveTheme = \"themes_responsiveTheme__cvta17e\";\nvar theme = \"themes_theme__cvta170\";\nvar vars = { colors: { backgroundColor: \"var(--colors-backgroundColor__cvta171)\", text: \"var(--colors-text__cvta172)\" }, space: { \"1\": \"var(--space-1__cvta173)\", \"2\": \"var(--space-2__cvta174)\", \"3\": \"var(--space-3__cvta175)\" } };\n\nexport { altTheme, responsiveTheme, theme, vars };\n\",\n  ],\n  [\n    \"themes.css.ts.vanilla.css\",\n    \"@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root, .themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > Rollup settings > should build with preserveModules and inject filescopes 1`] = `\n[\n  [\n    \"src/index.js\",\n    \"import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';\nimport { vars, altTheme, theme, responsiveTheme } from './themes.css.js';\nimport { container, button, opacity } from './styles.css.js';\nimport { shadow } from './shared.css.js';\nimport testNodes from '../test-nodes.json.js';\n\nconst inlineTheme = assignInlineVars(vars, {\n  colors: {\n    backgroundColor: \"orange\",\n    text: \"black\"\n  },\n  space: {\n    1: \"4px\",\n    2: \"8px\",\n    3: \"12px\"\n  }\n});\nfunction render() {\n  document.body.innerHTML = \\`\n  <div id=\"\\${testNodes.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${testNodes.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${testNodes.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${testNodes.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${testNodes.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${testNodes.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${testNodes.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${testNodes.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${testNodes.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${testNodes.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${testNodes.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n  const dynamicVarsContainer = document.getElementById(\n    testNodes.dynamicVarsContainer\n  );\n  if (!dynamicVarsContainer) {\n    throw new Error(\"Dynamic vars container not found.\");\n  }\n  setElementVars(dynamicVarsContainer, vars, {\n    colors: {\n      backgroundColor: \"transparent\",\n      text: \"papayawhip\"\n    },\n    space: {\n      1: \"5px\",\n      2: \"10px\",\n      3: \"15px\"\n    }\n  });\n  setElementVars(dynamicVarsContainer, {\n    [vars.colors.backgroundColor]: \"darksalmon\"\n  });\n}\nrender();\n\",\n  ],\n  [\n    \"src/shared.css.js\",\n    \"import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';\nimport { style, globalStyle } from '@vanilla-extract/css';\n\nsetFileScope(\"src/shared.css.ts\", \"@fixtures/themed\");\nconst shadow = style({\n  boxShadow: \"0 0 5px red\"\n}, \"shadow\");\nglobalStyle(\"body\", {\n  backgroundColor: \"skyblue\"\n});\nglobalStyle(\"body, button\", {\n  lineHeight: \"16px\"\n});\nendFileScope();\n\nexport { shadow };\n\",\n  ],\n  [\n    \"src/styles.css.js\",\n    \"import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';\nimport { fontFace, globalFontFace, style, fallbackVar, globalStyle, createVar, styleVariants } from '@vanilla-extract/css';\nimport { shadow } from './shared.css.js';\nimport { vars, altTheme, theme } from './themes.css.js';\n\nsetFileScope(\"src/styles.css.ts\", \"@fixtures/themed\");\nconst impact = fontFace({\n  src: 'local(\"Impact\")'\n}, \"impact\");\nglobalFontFace(\"MyGlobalComicSans\", {\n  src: 'local(\"Comic Sans MS\")'\n});\nconst container = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: vars.space[2],\n  padding: vars.space[3],\n  \"@media\": {\n    \"only screen and (min-width: 500px)\": {\n      border: \\`1px solid \\${vars.colors.backgroundColor}\\`\n    }\n  }\n}, \"container\");\nconst iDunno = style([{\n  zIndex: 1\n}, {\n  position: \"relative\"\n}], \"iDunno\");\nconst button = style([{\n  fontFamily: impact,\n  backgroundColor: fallbackVar(vars.colors.backgroundColor, '\"THIS FALLBACK VALUE SHOULD NEVER BE USED\"'),\n  color: vars.colors.text,\n  borderRadius: \"9999px\",\n  \"@media\": {\n    \"only screen and (min-width: 500px)\": {\n      padding: vars.space[1]\n    },\n    \"only screen and (min-width: 1000px)\": {\n      padding: vars.space[2]\n    }\n  },\n  selectors: {\n    [\\`\\${altTheme} \\${theme} \\${container} &\\`]: {\n      fontFamily: \"MyGlobalComicSans\",\n      outline: \"5px solid red\"\n    }\n  }\n}, shadow, iDunno], \"button\");\nglobalStyle(\\`body \\${iDunno}:after\\`, {\n  content: \"'I am content'\"\n});\nconst blankVar1 = createVar({\n  syntax: \"<number>\",\n  inherits: false,\n  initialValue: \"0.5\"\n}, \"blankVar1\");\nconst blankVar2 = createVar(\"blankVar2\");\nconst opacity = styleVariants({\n  \"1/2\": blankVar1,\n  \"1/4\": fallbackVar(blankVar1, blankVar2, \"0.25\")\n}, (value) => ({\n  selectors: {\n    \"html &\": {\n      opacity: value\n    }\n  }\n}), \"opacity\");\nendFileScope();\n\nexport { button, container, opacity };\n\",\n  ],\n  [\n    \"src/themes.css.js\",\n    \"import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';\nimport { style, createGlobalTheme, createTheme, layer, assignVars } from '@vanilla-extract/css';\n\nsetFileScope(\"src/themes.css.ts\", \"@fixtures/themed\");\nconst theme = style({}, \"theme\");\nconst vars = createGlobalTheme(\\`:root, \\${theme}\\`, {\n  colors: {\n    backgroundColor: \"blue\",\n    text: \"white\"\n  },\n  space: {\n    1: \"4px\",\n    2: \"8px\",\n    3: \"12px\"\n  }\n});\nconst altTheme = createTheme(vars, {\n  colors: {\n    backgroundColor: \"green\",\n    text: \"white\"\n  },\n  space: {\n    1: \"8px\",\n    2: \"12px\",\n    3: \"16px\"\n  }\n}, \"altTheme\");\nconst themeLayer = layer(\"themeLayer\");\nconst [altTheme2Class, altTheme2Contract] = createTheme({\n  \"@layer\": themeLayer,\n  colors: {\n    backgroundColor: \"green\",\n    text: \"white\"\n  },\n  space: {\n    1: \"8px\",\n    2: \"12px\",\n    3: \"16px\"\n  }\n}, \"altTheme2Class\");\ncreateGlobalTheme(\":root\", altTheme2Contract, {\n  \"@layer\": \"globalThemeLayer\",\n  colors: {\n    backgroundColor: \"green\",\n    text: \"white\"\n  },\n  space: {\n    1: \"8px\",\n    2: \"12px\",\n    3: \"16px\"\n  }\n});\nconst responsiveTheme = style({\n  vars: assignVars(vars, {\n    colors: {\n      backgroundColor: \"pink\",\n      text: \"purple\"\n    },\n    space: {\n      1: \"6px\",\n      2: \"12px\",\n      3: \"18px\"\n    }\n  }),\n  \"@media\": {\n    \"screen and (min-width: 768px)\": {\n      vars: assignVars(vars.colors, {\n        backgroundColor: \"purple\",\n        text: \"pink\"\n      })\n    }\n  }\n}, \"responsiveTheme\");\nendFileScope();\n\nexport { altTheme, altTheme2Class, altTheme2Contract, responsiveTheme, theme, vars };\n\",\n  ],\n  [\n    \"test-nodes.json.js\",\n    \"var root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar testNodes = {\n\troot: root,\n\trootContainer: rootContainer,\n\trootButton: rootButton,\n\taltContainer: altContainer,\n\taltButton: altButton,\n\tnestedRootContainer: nestedRootContainer,\n\tnestedRootButton: nestedRootButton,\n\tinlineThemeContainer: inlineThemeContainer,\n\tinlineThemeButton: inlineThemeButton,\n\tdynamicVarsContainer: dynamicVarsContainer,\n\tdynamicVarsButton: dynamicVarsButton,\n\tresponsiveThemeContainer: responsiveThemeContainer,\n\tresponsiveThemeButton: responsiveThemeButton\n};\n\nexport { altButton, altContainer, testNodes as default, dynamicVarsButton, dynamicVarsContainer, inlineThemeButton, inlineThemeContainer, nestedRootButton, nestedRootContainer, responsiveThemeButton, responsiveThemeContainer, root, rootButton, rootContainer };\n\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > Rollup settings > should build with sourcemaps 1`] = `\n[\n  [\n    \"assets/src/shared.css.ts.vanilla-G_Gyt4-e.css\",\n    \"\",\n  ],\n  [\n    \"assets/src/styles.css.ts.vanilla-BfisGtko.css\",\n    \"\",\n  ],\n  [\n    \"assets/src/themes.css.ts.vanilla-s9rcEmBH.css\",\n    \"\",\n  ],\n  [\n    \"src/index.js\",\n    \";;;;;;AAiBA,MAAM,WAAA,GAAc,iBAAiB,IAAA,EAAM;AAAA,EACzC,MAAA,EAAQ;AAAA,IACN,eAAA,EAAiB,QAAA;AAAA,IACjB,IAAA,EAAM;AAAA,GACR;AAAA,EACA,KAAA,EAAO;AAAA,IACL,CAAA,EAAG,KAAA;AAAA,IACH,CAAA,EAAG,KAAA;AAAA,IACH,CAAA,EAAG;AAAA;AAEP,CAAC,CAAA;AAED,SAAS,MAAA,GAAS;AAChB,EAAA,QAAA,CAAS,KAAK,SAAA,GAAY;AAAA,WAAA,EACf,SAAA,CAAU,IAAI,CAAA,SAAA,EAAY,MAAM,CAAA;AAAA;AAAA,aAAA,EAE9B,SAAA,CAAU,aAAa,CAAA,SAAA,EAAY,SAAS,CAAA;AAAA,kBAAA,EACvC,SAAA,CAAU,UAAU,CAAA,SAAA,EAAY,MAAM,CAAA;AAAA,kBAAA,EACtC,QAAQ,CAAA;AAAA;AAAA,iBAAA,EAET,SAAA,CAAU,YAAY,CAAA,SAAA,EAAY,SAAS,CAAA;AAAA,sBAAA,EACtC,SAAA,CAAU,SAAS,CAAA,SAAA,EAAY,MAAM,CAAA;AAAA,sBAAA,EACrC,KAAK,CAAA;AAAA;AAAA,qBAAA,EAEN,SAAA,CAAU,mBAAmB,CAAA,SAAA,EAAY,SAAS,CAAA;AAAA,0BAAA,EAC7C,SAAA,CAAU,gBAAgB,CAAA,SAAA,EAAY,MAAM,CAAA;AAAA,wBAAA,EAC9C,WAAW,CAAA;AAAA;AAAA,yBAAA,EAEV,SAAA,CAAU,oBAAoB,CAAA,SAAA,EAAY,SAAS,CAAA;AAAA,8BAAA,EAC9C,SAAA,CAAU,iBAAiB,CAAA,SAAA,EAAY,MAAM,CAAA,CAAA,EAAI,OAAA,CAAQ,KAAK,CAAC,CAAA,6BAAA,EAAgC,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA;AAAA;AAAA,6BAAA,EAG9G,SAAA,CAAU,oBAAoB,CAAA,SAAA,EAAY,SAAS,CAAA;AAAA,kCAAA,EAC9C,SAAA,CAAU,iBAAiB,CAAA,SAAA,EAAY,MAAM,CAAA;AAAA,8BAAA,EACjD,eAAe,CAAA;AAAA;AAAA,yBAAA,EAEpB,SAAA,CAAU,wBAAwB,CAAA,SAAA,EAAY,SAAS,CAAA;AAAA,8BAAA,EAClD,SAAA,CAAU,qBAAqB,CAAA,SAAA,EAAY,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAiB/E,EAAA,MAAM,uBAAuB,QAAA,CAAS,cAAA;AAAA,IACpC,SAAA,CAAU;AAAA,GACZ;AAEA,EAAA,IAAI,CAAC,oBAAA,EAAsB;AACzB,IAAA,MAAM,IAAI,MAAM,mCAAmC,CAAA;AAAA,EACrD;AAEA,EAAA,cAAA,CAAe,sBAAsB,IAAA,EAAM;AAAA,IACzC,MAAA,EAAQ;AAAA,MACN,eAAA,EAAiB,aAAA;AAAA,MACjB,IAAA,EAAM;AAAA,KACR;AAAA,IACA,KAAA,EAAO;AAAA,MACL,CAAA,EAAG,KAAA;AAAA,MACH,CAAA,EAAG,MAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACL,GACD,CAAA;AAED,EAAA,cAAA,CAAe,oBAAA,EAAsB;AAAA,IACnC,CAAC,IAAA,CAAK,MAAA,CAAO,eAAe,GAAG;AAAA,GAChC,CAAA;AACH;AAEA,MAAA,EAAO\",\n  ],\n  [\n    \"src/index.js.map\",\n    \"\",\n  ],\n  [\n    \"src/shared.css.js\",\n    \";;;;;;\",\n  ],\n  [\n    \"src/shared.css.js.map\",\n    \"\",\n  ],\n  [\n    \"src/styles.css.js\",\n    \";;;;;;;;;;\",\n  ],\n  [\n    \"src/styles.css.js.map\",\n    \"\",\n  ],\n  [\n    \"src/themes.css.js\",\n    \";;;;;;;;;\",\n  ],\n  [\n    \"src/themes.css.js.map\",\n    \"\",\n  ],\n  [\n    \"test-nodes.json.js\",\n    \";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;\",\n  ],\n  [\n    \"test-nodes.json.js.map\",\n    \"\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > Rollup settings > should build without preserveModules 1`] = `\n[\n  [\n    \"assets/src/shared.css.ts.vanilla-G_Gyt4-e.css\",\n    \".shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody, button {\n  line-height: 16px;\n}\",\n  ],\n  [\n    \"assets/src/styles.css.ts.vanilla-BfisGtko.css\",\n    \"@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(--colors-backgroundColor__cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: 'I am content';\n}\nhtml .styles_opacity_1\\\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\",\n  ],\n  [\n    \"assets/src/themes.css.ts.vanilla-s9rcEmBH.css\",\n    \"@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root, .themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\",\n  ],\n  [\n    \"index.js\",\n    \"import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';\nimport './assets/src/themes.css.ts.vanilla-s9rcEmBH.css';\nimport './assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';\nimport './assets/src/styles.css.ts.vanilla-BfisGtko.css';\n\nvar altTheme = \"themes_altTheme__cvta176\";\nvar responsiveTheme = \"themes_responsiveTheme__cvta17e\";\nvar theme = \"themes_theme__cvta170\";\nvar vars = { colors: { backgroundColor: \"var(--colors-backgroundColor__cvta171)\", text: \"var(--colors-text__cvta172)\" }, space: { \"1\": \"var(--space-1__cvta173)\", \"2\": \"var(--space-2__cvta174)\", \"3\": \"var(--space-3__cvta175)\" } };\n\nvar button = \"styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12\";\nvar container = \"styles_container__jteyb11\";\nvar opacity = { \"1/2\": \"styles_opacity_1/2__jteyb16\", \"1/4\": \"styles_opacity_1/4__jteyb17\" };\n\nvar shadow = \"shared_shadow__4dtfen0\";\n\nvar root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar testNodes = {\n\troot: root,\n\trootContainer: rootContainer,\n\trootButton: rootButton,\n\taltContainer: altContainer,\n\taltButton: altButton,\n\tnestedRootContainer: nestedRootContainer,\n\tnestedRootButton: nestedRootButton,\n\tinlineThemeContainer: inlineThemeContainer,\n\tinlineThemeButton: inlineThemeButton,\n\tdynamicVarsContainer: dynamicVarsContainer,\n\tdynamicVarsButton: dynamicVarsButton,\n\tresponsiveThemeContainer: responsiveThemeContainer,\n\tresponsiveThemeButton: responsiveThemeButton\n};\n\nconst inlineTheme = assignInlineVars(vars, {\n  colors: {\n    backgroundColor: \"orange\",\n    text: \"black\"\n  },\n  space: {\n    1: \"4px\",\n    2: \"8px\",\n    3: \"12px\"\n  }\n});\nfunction render() {\n  document.body.innerHTML = \\`\n  <div id=\"\\${testNodes.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${testNodes.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${testNodes.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${testNodes.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${testNodes.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${testNodes.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${testNodes.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${testNodes.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${testNodes.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${testNodes.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${testNodes.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${testNodes.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n  const dynamicVarsContainer = document.getElementById(\n    testNodes.dynamicVarsContainer\n  );\n  if (!dynamicVarsContainer) {\n    throw new Error(\"Dynamic vars container not found.\");\n  }\n  setElementVars(dynamicVarsContainer, vars, {\n    colors: {\n      backgroundColor: \"transparent\",\n      text: \"papayawhip\"\n    },\n    space: {\n      1: \"5px\",\n      2: \"10px\",\n      3: \"15px\"\n    }\n  });\n  setElementVars(dynamicVarsContainer, {\n    [vars.colors.backgroundColor]: \"darksalmon\"\n  });\n}\nrender();\n\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > options > extract generates .css bundle 1`] = `\n[\n  [\n    \"app.css\",\n    \"html, body {\n  font-size: 100%;\n  height: 100%;\n  line-height: 1;\n  margin: 0;\n}\n.vars__15dpm870 {\n  --color-black-100: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.050980392156862744);\n  --color-black-200: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.10196078431372549);\n  --color-black-300: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.2);\n  --color-black-400: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.4);\n  --color-black-500: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.6980392156862745);\n  --color-black-600: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8);\n  --color-black-700: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8509803921568627);\n  --color-black-800: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8980392156862745);\n  --color-black-900: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.9490196078431372);\n  --color-black-1000: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744);\n  --color-brand-100: color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902);\n  --color-brand-200: color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255);\n  --color-brand-300: color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627);\n  --color-brand-400: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);\n  --color-brand-500: color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647);\n  --color-brand-600: color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666);\n  --color-brand-700: color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549);\n  --color-brand-800: color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313);\n  --color-brand-900: color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941);\n  --color-brand-1000: color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667);\n  --color-gray-100: color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902);\n  --color-gray-200: color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255);\n  --color-gray-300: color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627);\n  --color-gray-400: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);\n  --color-gray-500: color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647);\n  --color-gray-600: color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666);\n  --color-gray-700: color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549);\n  --color-gray-800: color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313);\n  --color-gray-900: color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941);\n  --color-gray-1000: color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667);\n  --color-green-100: color(srgb 0.9215686274509803 1 0.9333333333333333);\n  --color-green-200: color(srgb 0.8117647058823529 0.9686274509803922 0.8274509803921568);\n  --color-green-300: color(srgb 0.6862745098039216 0.9568627450980393 0.7764705882352941);\n  --color-green-400: color(srgb 0.5215686274509804 0.8784313725490196 0.6392156862745098);\n  --color-green-500: color(srgb 0.0784313725490196 0.6823529411764706 0.3607843137254902);\n  --color-green-600: color(srgb 0 0.6 0.3176470588235294);\n  --color-green-700: color(srgb 0 0.5019607843137255 0.2627450980392157);\n  --color-green-800: color(srgb 0.00784313725490196 0.32941176470588235 0.17647058823529413);\n  --color-green-900: color(srgb 0.00784313725490196 0.25098039215686274 0.13725490196078433);\n  --color-green-1000: color(srgb 0.023529411764705882 0.17647058823529413 0.10588235294117647);\n  --color-pink-100: color(srgb 0.9882352941176471 0.9450980392156862 0.9921568627450981);\n  --color-pink-200: color(srgb 0.9803921568627451 0.8823529411764706 0.9803921568627451);\n  --color-pink-300: color(srgb 0.9607843137254902 0.7529411764705882 0.9372549019607843);\n  --color-pink-400: color(srgb 0.9450980392156862 0.6196078431372549 0.8627450980392157);\n  --color-pink-500: color(srgb 0.9176470588235294 0.24705882352941178 0.7215686274509804);\n  --color-pink-600: color(srgb 0.8431372549019608 0.19607843137254902 0.6588235294117647);\n  --color-pink-700: color(srgb 0.7294117647058823 0.16470588235294117 0.5725490196078431);\n  --color-pink-800: color(srgb 0.5411764705882353 0.13333333333333333 0.43529411764705883);\n  --color-pink-900: color(srgb 0.3411764705882353 0.09411764705882353 0.2901960784313726);\n  --color-pink-1000: color(srgb 0.24705882352941178 0.08235294117647059 0.21176470588235294);\n  --color-red-100: color(srgb 0.996078431372549 0.9137254901960784 0.9058823529411765);\n  --color-red-200: color(srgb 0.9921568627450981 0.8274509803921568 0.8156862745098039);\n  --color-red-300: color(srgb 0.9882352941176471 0.7019607843137254 0.6784313725490196);\n  --color-red-400: color(srgb 0.9568627450980393 0.4666666666666667 0.41568627450980394);\n  --color-red-500: color(srgb 0.9254901960784314 0.13333333333333333 0.12156862745098039);\n  --color-red-600: color(srgb 0.7529411764705882 0.058823529411764705 0.047058823529411764);\n  --color-red-700: color(srgb 0.5647058823529412 0.043137254901960784 0.03529411764705882);\n  --color-red-800: color(srgb 0.4117647058823529 0.03137254901960784 0.027450980392156862);\n  --color-red-900: color(srgb 0.30196078431372547 0.043137254901960784 0.0392156862745098);\n  --color-red-1000: color(srgb 0.18823529411764706 0.023529411764705882 0.011764705882352941);\n  --color-slate-100: color(srgb 0.9529411764705882 0.9529411764705882 0.9529411764705882);\n  --color-slate-200: color(srgb 0.8901960784313725 0.8901960784313725 0.8901960784313725);\n  --color-slate-300: color(srgb 0.803921568627451 0.803921568627451 0.803921568627451);\n  --color-slate-400: color(srgb 0.6980392156862745 0.6980392156862745 0.6980392156862745);\n  --color-slate-500: color(srgb 0.5803921568627451 0.5803921568627451 0.5803921568627451);\n  --color-slate-600: color(srgb 0.4627450980392157 0.4627450980392157 0.4627450980392157);\n  --color-slate-700: color(srgb 0.35294117647058826 0.35294117647058826 0.35294117647058826);\n  --color-slate-800: color(srgb 0.2627450980392157 0.2627450980392157 0.2627450980392157);\n  --color-slate-900: color(srgb 0.18823529411764706 0.18823529411764706 0.18823529411764706);\n  --color-slate-1000: color(srgb 0.1411764705882353 0.1411764705882353 0.1411764705882353);\n  --color-white-100: color(srgb 1 1 1 / 0.050980392156862744);\n  --color-white-200: color(srgb 1 1 1 / 0.10196078431372549);\n  --color-white-300: color(srgb 1 1 1 / 0.2);\n  --color-white-400: color(srgb 1 1 1 / 0.4);\n  --color-white-500: color(srgb 1 1 1 / 0.6980392156862745);\n  --color-white-600: color(srgb 1 1 1 / 0.8);\n  --color-white-700: color(srgb 1 1 1 / 0.8509803921568627);\n  --color-white-800: color(srgb 1 1 1 / 0.8980392156862745);\n  --color-white-900: color(srgb 1 1 1 / 0.9490196078431372);\n  --color-white-1000: color(srgb 1 1 1);\n  --color-yellow-100: color(srgb 1 0.984313725490196 0.9215686274509803);\n  --color-yellow-200: color(srgb 1 0.9450980392156862 0.7607843137254902);\n  --color-yellow-300: color(srgb 1 0.9098039215686274 0.6392156862745098);\n  --color-yellow-400: color(srgb 0.9098039215686274 0.7254901960784313 0.19215686274509805);\n  --color-yellow-500: color(srgb 0.8980392156862745 0.6274509803921569 0);\n  --color-yellow-600: color(srgb 0.7490196078431373 0.41568627450980394 0.00784313725490196);\n  --color-yellow-700: color(srgb 0.592156862745098 0.3176470588235294 0.00784313725490196);\n  --color-yellow-800: color(srgb 0.40784313725490196 0.17647058823529413 0.011764705882352941);\n  --color-yellow-900: color(srgb 0.3215686274509804 0.1450980392156863 0.01568627450980392);\n  --color-yellow-1000: color(srgb 0.25098039215686274 0.10588235294117647 0.00392156862745098);\n  --color-background-brand-default: var(--color-brand-800);\n  --color-background-default-default: var(--color-white-1000);\n  --color-border-default-default: var(--color-gray-300);\n  --color-text-brand-default: var(--color-brand-800);\n  --color-text-default-default: var(--color-gray-900);\n  --size-blur-100: 0.25rem;\n  --size-depth-0: 0;\n  --size-depth-100: 0.25rem;\n  --size-depth-200: 0.5rem;\n  --size-depth-400: 1rem;\n  --size-depth-800: 2rem;\n  --size-depth-1200: 3rem;\n  --size-depth-025: 0.0625rem;\n  --size-depth-negative-025: -0.0625rem;\n  --size-depth-negative-100: -0.25rem;\n  --size-depth-negative-200: -0.5rem;\n  --size-depth-negative-400: -1rem;\n  --size-depth-negative-800: -2rem;\n  --size-depth-negative-1200: -3rem;\n  --size-icon-small: 1.5rem;\n  --size-icon-medium: 2rem;\n  --size-icon-large: 2.5rem;\n  --size-radius-100: 0.25rem;\n  --size-radius-200: 0.5rem;\n  --size-radius-400: 1rem;\n  --size-radius-full: 624.9375rem;\n  --size-space-0: 0;\n  --size-space-100: 0.25rem;\n  --size-space-150: 0.375rem;\n  --size-space-200: 0.5rem;\n  --size-space-300: 0.75rem;\n  --size-space-400: 1rem;\n  --size-space-600: 1.5rem;\n  --size-space-800: 2rem;\n  --size-space-1200: 3rem;\n  --size-space-1600: 4rem;\n  --size-space-2400: 6rem;\n  --size-space-4000: 0;\n  --size-space-050: 0.125rem;\n  --size-space-negative-100: -0.25rem;\n  --size-space-negative-200: -0.5rem;\n  --size-space-negative-300: -0.75rem;\n  --size-space-negative-400: -1rem;\n  --size-space-negative-600: -1.5rem;\n  --size-stroke-border: 0.0625rem;\n  --size-stroke-focus-ring: 0.125rem;\n  --typography-body-small-font-family: var(--typography-family-sans);\n  --typography-body-small-font-size: var(--typography-scale-02);\n  --typography-body-small-font-weight: var(--typography-weight-regular);\n  --typography-body-medium-font-family: var(--typography-family-sans);\n  --typography-body-medium-font-size: var(--typography-scale-03);\n  --typography-body-medium-font-weight: var(--typography-weight-regular);\n  --typography-body-large-font-family: var(--typography-family-sans);\n  --typography-body-large-font-size: var(--typography-scale-04);\n  --typography-body-large-font-weight: var(--typography-weight-regular);\n  --typography-code-small-font-family: var(--typography-family-mono);\n  --typography-code-small-font-size: var(--typography-scale-02);\n  --typography-code-small-font-weight: var(--typography-weight-regular);\n  --typography-code-medium-font-family: var(--typography-family-mono);\n  --typography-code-medium-font-size: var(--typography-scale-03);\n  --typography-code-medium-font-weight: var(--typography-weight-regular);\n  --typography-code-large-font-family: var(--typography-family-mono);\n  --typography-code-large-font-size: var(--typography-scale-04);\n  --typography-code-large-font-weight: var(--typography-weight-regular);\n  --typography-family-mono: \"roboto mono\", monospace;\n  --typography-family-sans: inter, sans-serif;\n  --typography-family-serif: \"noto serif\", serif;\n  --typography-scale-10: 4.5rem;\n  --typography-scale-01: 0.75rem;\n  --typography-scale-02: 0.875rem;\n  --typography-scale-03: 1rem;\n  --typography-scale-04: 1.25rem;\n  --typography-scale-05: 1.5rem;\n  --typography-scale-06: 2rem;\n  --typography-scale-07: 2.5rem;\n  --typography-scale-08: 3rem;\n  --typography-scale-09: 4rem;\n  --typography-weight-thin: 100;\n  --typography-weight-extralight: 200;\n  --typography-weight-light: 300;\n  --typography-weight-regular: 400;\n  --typography-weight-medium: 500;\n  --typography-weight-semibold: 600;\n  --typography-weight-bold: 700;\n  --typography-weight-extrabold: 800;\n  --typography-weight-black: 900;\n}\n.button_btn__s626q60 {\n  background: var(--color-background-brand-default);\n  border-radius: var(--size-radius-200);\n  color: var(--color-text-brand-default);\n  font-family: var(--typography-body-medium-font-family);\n  font-size: var(--typography-body-medium-font-size);\n  font-weight: var(--typography-body-medium-font-weight);\n  padding-block: var(--size-space-200);\n  padding-inline: var(--size-space-300);\n}\n.checkbox_label__8y0ume0 {\n  display: block;\n  font-family: var(--typography-body-medium-font-family);\n  font-size: var(--typography-body-medium-font-size);\n  font-weight: var(--typography-body-medium-font-weight);\n}\n.checkbox_label__8y0ume0::before {\n  content: \"\";\n  background: var(--color-background-brand-default);\n  border-color: var(--color-border-default-default);\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--size-radius-200);\n  margin-right: var(--size-space-300);\n}\n.checkbox_input__8y0ume1 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.radio_label__1uatvdb0 {\n  display: block;\n  font-family: var(--typography-body-medium-font-family);\n  font-size: var(--typography-body-medium-font-size);\n  font-weight: var(--typography-body-medium-font-weight);\n}\n.radio_label__1uatvdb0::before {\n  content: \"\";\n  background: var(--color-background-brand-default);\n  border-color: var(--color-border-default-default);\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--size-radius-full);\n  margin-right: var(--size-space-300);\n}\n.radio_input__1uatvdb1 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.utility_mt100__1vyatv80 {\n  margin-top: var(--size-space-100);\n}\n.utility_mt200__1vyatv81 {\n  margin-top: var(--size-space-200);\n}\n.utility_mt300__1vyatv82 {\n  margin-top: var(--size-space-300);\n}\n.utility_mt400__1vyatv83 {\n  margin-top: var(--size-space-400);\n}\",\n  ],\n  [\n    \"app.js\",\n    \"export { default as Button } from './button/button.js';\nexport { default as Checkbox } from './checkbox/checkbox.js';\nexport { default as Radio } from './radio/radio.js';\n\",\n  ],\n  [\n    \"button/button.css.js\",\n    \"var btn = \"button_btn__s626q60\";\n\nexport { btn };\n\",\n  ],\n  [\n    \"button/button.js\",\n    \"import { jsx } from 'react/jsx-runtime';\nimport clsx from 'clsx';\nimport { btn } from './button.css.js';\n\nfunction Button({\n  className,\n  children,\n  type = \"button\",\n  ...props\n}) {\n  return /* @__PURE__ */ jsx(\"button\", { ...props, type, className: clsx(btn, className), children });\n}\n\nexport { Button as default };\n\",\n  ],\n  [\n    \"checkbox/checkbox.css.js\",\n    \"var input = \"checkbox_input__8y0ume1\";\nvar label = \"checkbox_label__8y0ume0\";\n\nexport { input, label };\n\",\n  ],\n  [\n    \"checkbox/checkbox.js\",\n    \"import { jsxs, Fragment, jsx } from 'react/jsx-runtime';\nimport { useId } from 'react';\nimport clsx from 'clsx';\nimport { input, label } from './checkbox.css.js';\n\nfunction Radio({\n  children,\n  className,\n  id,\n  ...props\n}) {\n  const randomID = useId();\n  return /* @__PURE__ */ jsxs(Fragment, { children: [\n    /* @__PURE__ */ jsx(\n      \"input\",\n      {\n        ...props,\n        className: input,\n        id: id ?? randomID,\n        type: \"checkbox\"\n      }\n    ),\n    /* @__PURE__ */ jsx(\"label\", { className: clsx(label, className), htmlFor: id ?? randomID, children })\n  ] });\n}\n\nexport { Radio as default };\n\",\n  ],\n  [\n    \"radio/radio.css.js\",\n    \"var input = \"radio_input__1uatvdb1\";\nvar label = \"radio_label__1uatvdb0\";\n\nexport { input, label };\n\",\n  ],\n  [\n    \"radio/radio.js\",\n    \"import { jsxs, Fragment, jsx } from 'react/jsx-runtime';\nimport { useId } from 'react';\nimport clsx from 'clsx';\nimport { input, label } from './radio.css.js';\n\nfunction Radio({\n  children,\n  className,\n  id,\n  ...props\n}) {\n  const randomID = useId();\n  return /* @__PURE__ */ jsxs(Fragment, { children: [\n    /* @__PURE__ */ jsx(\n      \"input\",\n      {\n        ...props,\n        className: input,\n        id: id ?? randomID,\n        type: \"radio\"\n      }\n    ),\n    /* @__PURE__ */ jsx(\"label\", { className: clsx(label, className), htmlFor: id ?? randomID, children })\n  ] });\n}\n\nexport { Radio as default };\n\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > should be compatible with rolldown > extract generates .css bundle 1`] = `\n[\n  [\n    \"app.css\",\n    \"html, body {\n  font-size: 100%;\n  height: 100%;\n  line-height: 1;\n  margin: 0;\n}\n.vars__15dpm870 {\n  --color-black-100: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.050980392156862744);\n  --color-black-200: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.10196078431372549);\n  --color-black-300: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.2);\n  --color-black-400: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.4);\n  --color-black-500: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.6980392156862745);\n  --color-black-600: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8);\n  --color-black-700: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8509803921568627);\n  --color-black-800: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.8980392156862745);\n  --color-black-900: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744 / 0.9490196078431372);\n  --color-black-1000: color(srgb 0.047058823529411764 0.047058823529411764 0.050980392156862744);\n  --color-brand-100: color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902);\n  --color-brand-200: color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255);\n  --color-brand-300: color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627);\n  --color-brand-400: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);\n  --color-brand-500: color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647);\n  --color-brand-600: color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666);\n  --color-brand-700: color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549);\n  --color-brand-800: color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313);\n  --color-brand-900: color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941);\n  --color-brand-1000: color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667);\n  --color-gray-100: color(srgb 0.9607843137254902 0.9607843137254902 0.9607843137254902);\n  --color-gray-200: color(srgb 0.9019607843137255 0.9019607843137255 0.9019607843137255);\n  --color-gray-300: color(srgb 0.8509803921568627 0.8509803921568627 0.8509803921568627);\n  --color-gray-400: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);\n  --color-gray-500: color(srgb 0.4588235294117647 0.4588235294117647 0.4588235294117647);\n  --color-gray-600: color(srgb 0.26666666666666666 0.26666666666666666 0.26666666666666666);\n  --color-gray-700: color(srgb 0.2196078431372549 0.2196078431372549 0.2196078431372549);\n  --color-gray-800: color(srgb 0.17254901960784313 0.17254901960784313 0.17254901960784313);\n  --color-gray-900: color(srgb 0.11764705882352941 0.11764705882352941 0.11764705882352941);\n  --color-gray-1000: color(srgb 0.06666666666666667 0.06666666666666667 0.06666666666666667);\n  --color-green-100: color(srgb 0.9215686274509803 1 0.9333333333333333);\n  --color-green-200: color(srgb 0.8117647058823529 0.9686274509803922 0.8274509803921568);\n  --color-green-300: color(srgb 0.6862745098039216 0.9568627450980393 0.7764705882352941);\n  --color-green-400: color(srgb 0.5215686274509804 0.8784313725490196 0.6392156862745098);\n  --color-green-500: color(srgb 0.0784313725490196 0.6823529411764706 0.3607843137254902);\n  --color-green-600: color(srgb 0 0.6 0.3176470588235294);\n  --color-green-700: color(srgb 0 0.5019607843137255 0.2627450980392157);\n  --color-green-800: color(srgb 0.00784313725490196 0.32941176470588235 0.17647058823529413);\n  --color-green-900: color(srgb 0.00784313725490196 0.25098039215686274 0.13725490196078433);\n  --color-green-1000: color(srgb 0.023529411764705882 0.17647058823529413 0.10588235294117647);\n  --color-pink-100: color(srgb 0.9882352941176471 0.9450980392156862 0.9921568627450981);\n  --color-pink-200: color(srgb 0.9803921568627451 0.8823529411764706 0.9803921568627451);\n  --color-pink-300: color(srgb 0.9607843137254902 0.7529411764705882 0.9372549019607843);\n  --color-pink-400: color(srgb 0.9450980392156862 0.6196078431372549 0.8627450980392157);\n  --color-pink-500: color(srgb 0.9176470588235294 0.24705882352941178 0.7215686274509804);\n  --color-pink-600: color(srgb 0.8431372549019608 0.19607843137254902 0.6588235294117647);\n  --color-pink-700: color(srgb 0.7294117647058823 0.16470588235294117 0.5725490196078431);\n  --color-pink-800: color(srgb 0.5411764705882353 0.13333333333333333 0.43529411764705883);\n  --color-pink-900: color(srgb 0.3411764705882353 0.09411764705882353 0.2901960784313726);\n  --color-pink-1000: color(srgb 0.24705882352941178 0.08235294117647059 0.21176470588235294);\n  --color-red-100: color(srgb 0.996078431372549 0.9137254901960784 0.9058823529411765);\n  --color-red-200: color(srgb 0.9921568627450981 0.8274509803921568 0.8156862745098039);\n  --color-red-300: color(srgb 0.9882352941176471 0.7019607843137254 0.6784313725490196);\n  --color-red-400: color(srgb 0.9568627450980393 0.4666666666666667 0.41568627450980394);\n  --color-red-500: color(srgb 0.9254901960784314 0.13333333333333333 0.12156862745098039);\n  --color-red-600: color(srgb 0.7529411764705882 0.058823529411764705 0.047058823529411764);\n  --color-red-700: color(srgb 0.5647058823529412 0.043137254901960784 0.03529411764705882);\n  --color-red-800: color(srgb 0.4117647058823529 0.03137254901960784 0.027450980392156862);\n  --color-red-900: color(srgb 0.30196078431372547 0.043137254901960784 0.0392156862745098);\n  --color-red-1000: color(srgb 0.18823529411764706 0.023529411764705882 0.011764705882352941);\n  --color-slate-100: color(srgb 0.9529411764705882 0.9529411764705882 0.9529411764705882);\n  --color-slate-200: color(srgb 0.8901960784313725 0.8901960784313725 0.8901960784313725);\n  --color-slate-300: color(srgb 0.803921568627451 0.803921568627451 0.803921568627451);\n  --color-slate-400: color(srgb 0.6980392156862745 0.6980392156862745 0.6980392156862745);\n  --color-slate-500: color(srgb 0.5803921568627451 0.5803921568627451 0.5803921568627451);\n  --color-slate-600: color(srgb 0.4627450980392157 0.4627450980392157 0.4627450980392157);\n  --color-slate-700: color(srgb 0.35294117647058826 0.35294117647058826 0.35294117647058826);\n  --color-slate-800: color(srgb 0.2627450980392157 0.2627450980392157 0.2627450980392157);\n  --color-slate-900: color(srgb 0.18823529411764706 0.18823529411764706 0.18823529411764706);\n  --color-slate-1000: color(srgb 0.1411764705882353 0.1411764705882353 0.1411764705882353);\n  --color-white-100: color(srgb 1 1 1 / 0.050980392156862744);\n  --color-white-200: color(srgb 1 1 1 / 0.10196078431372549);\n  --color-white-300: color(srgb 1 1 1 / 0.2);\n  --color-white-400: color(srgb 1 1 1 / 0.4);\n  --color-white-500: color(srgb 1 1 1 / 0.6980392156862745);\n  --color-white-600: color(srgb 1 1 1 / 0.8);\n  --color-white-700: color(srgb 1 1 1 / 0.8509803921568627);\n  --color-white-800: color(srgb 1 1 1 / 0.8980392156862745);\n  --color-white-900: color(srgb 1 1 1 / 0.9490196078431372);\n  --color-white-1000: color(srgb 1 1 1);\n  --color-yellow-100: color(srgb 1 0.984313725490196 0.9215686274509803);\n  --color-yellow-200: color(srgb 1 0.9450980392156862 0.7607843137254902);\n  --color-yellow-300: color(srgb 1 0.9098039215686274 0.6392156862745098);\n  --color-yellow-400: color(srgb 0.9098039215686274 0.7254901960784313 0.19215686274509805);\n  --color-yellow-500: color(srgb 0.8980392156862745 0.6274509803921569 0);\n  --color-yellow-600: color(srgb 0.7490196078431373 0.41568627450980394 0.00784313725490196);\n  --color-yellow-700: color(srgb 0.592156862745098 0.3176470588235294 0.00784313725490196);\n  --color-yellow-800: color(srgb 0.40784313725490196 0.17647058823529413 0.011764705882352941);\n  --color-yellow-900: color(srgb 0.3215686274509804 0.1450980392156863 0.01568627450980392);\n  --color-yellow-1000: color(srgb 0.25098039215686274 0.10588235294117647 0.00392156862745098);\n  --color-background-brand-default: var(--color-brand-800);\n  --color-background-default-default: var(--color-white-1000);\n  --color-border-default-default: var(--color-gray-300);\n  --color-text-brand-default: var(--color-brand-800);\n  --color-text-default-default: var(--color-gray-900);\n  --size-blur-100: 0.25rem;\n  --size-depth-0: 0;\n  --size-depth-100: 0.25rem;\n  --size-depth-200: 0.5rem;\n  --size-depth-400: 1rem;\n  --size-depth-800: 2rem;\n  --size-depth-1200: 3rem;\n  --size-depth-025: 0.0625rem;\n  --size-depth-negative-025: -0.0625rem;\n  --size-depth-negative-100: -0.25rem;\n  --size-depth-negative-200: -0.5rem;\n  --size-depth-negative-400: -1rem;\n  --size-depth-negative-800: -2rem;\n  --size-depth-negative-1200: -3rem;\n  --size-icon-small: 1.5rem;\n  --size-icon-medium: 2rem;\n  --size-icon-large: 2.5rem;\n  --size-radius-100: 0.25rem;\n  --size-radius-200: 0.5rem;\n  --size-radius-400: 1rem;\n  --size-radius-full: 624.9375rem;\n  --size-space-0: 0;\n  --size-space-100: 0.25rem;\n  --size-space-150: 0.375rem;\n  --size-space-200: 0.5rem;\n  --size-space-300: 0.75rem;\n  --size-space-400: 1rem;\n  --size-space-600: 1.5rem;\n  --size-space-800: 2rem;\n  --size-space-1200: 3rem;\n  --size-space-1600: 4rem;\n  --size-space-2400: 6rem;\n  --size-space-4000: 0;\n  --size-space-050: 0.125rem;\n  --size-space-negative-100: -0.25rem;\n  --size-space-negative-200: -0.5rem;\n  --size-space-negative-300: -0.75rem;\n  --size-space-negative-400: -1rem;\n  --size-space-negative-600: -1.5rem;\n  --size-stroke-border: 0.0625rem;\n  --size-stroke-focus-ring: 0.125rem;\n  --typography-body-small-font-family: var(--typography-family-sans);\n  --typography-body-small-font-size: var(--typography-scale-02);\n  --typography-body-small-font-weight: var(--typography-weight-regular);\n  --typography-body-medium-font-family: var(--typography-family-sans);\n  --typography-body-medium-font-size: var(--typography-scale-03);\n  --typography-body-medium-font-weight: var(--typography-weight-regular);\n  --typography-body-large-font-family: var(--typography-family-sans);\n  --typography-body-large-font-size: var(--typography-scale-04);\n  --typography-body-large-font-weight: var(--typography-weight-regular);\n  --typography-code-small-font-family: var(--typography-family-mono);\n  --typography-code-small-font-size: var(--typography-scale-02);\n  --typography-code-small-font-weight: var(--typography-weight-regular);\n  --typography-code-medium-font-family: var(--typography-family-mono);\n  --typography-code-medium-font-size: var(--typography-scale-03);\n  --typography-code-medium-font-weight: var(--typography-weight-regular);\n  --typography-code-large-font-family: var(--typography-family-mono);\n  --typography-code-large-font-size: var(--typography-scale-04);\n  --typography-code-large-font-weight: var(--typography-weight-regular);\n  --typography-family-mono: \"roboto mono\", monospace;\n  --typography-family-sans: inter, sans-serif;\n  --typography-family-serif: \"noto serif\", serif;\n  --typography-scale-10: 4.5rem;\n  --typography-scale-01: 0.75rem;\n  --typography-scale-02: 0.875rem;\n  --typography-scale-03: 1rem;\n  --typography-scale-04: 1.25rem;\n  --typography-scale-05: 1.5rem;\n  --typography-scale-06: 2rem;\n  --typography-scale-07: 2.5rem;\n  --typography-scale-08: 3rem;\n  --typography-scale-09: 4rem;\n  --typography-weight-thin: 100;\n  --typography-weight-extralight: 200;\n  --typography-weight-light: 300;\n  --typography-weight-regular: 400;\n  --typography-weight-medium: 500;\n  --typography-weight-semibold: 600;\n  --typography-weight-bold: 700;\n  --typography-weight-extrabold: 800;\n  --typography-weight-black: 900;\n}\n.button_btn__s626q60 {\n  background: var(--color-background-brand-default);\n  border-radius: var(--size-radius-200);\n  color: var(--color-text-brand-default);\n  font-family: var(--typography-body-medium-font-family);\n  font-size: var(--typography-body-medium-font-size);\n  font-weight: var(--typography-body-medium-font-weight);\n  padding-block: var(--size-space-200);\n  padding-inline: var(--size-space-300);\n}\n.checkbox_label__8y0ume0 {\n  display: block;\n  font-family: var(--typography-body-medium-font-family);\n  font-size: var(--typography-body-medium-font-size);\n  font-weight: var(--typography-body-medium-font-weight);\n}\n.checkbox_label__8y0ume0::before {\n  content: \"\";\n  background: var(--color-background-brand-default);\n  border-color: var(--color-border-default-default);\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--size-radius-200);\n  margin-right: var(--size-space-300);\n}\n.checkbox_input__8y0ume1 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.radio_label__1uatvdb0 {\n  display: block;\n  font-family: var(--typography-body-medium-font-family);\n  font-size: var(--typography-body-medium-font-size);\n  font-weight: var(--typography-body-medium-font-weight);\n}\n.radio_label__1uatvdb0::before {\n  content: \"\";\n  background: var(--color-background-brand-default);\n  border-color: var(--color-border-default-default);\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--size-radius-full);\n  margin-right: var(--size-space-300);\n}\n.radio_input__1uatvdb1 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.utility_mt100__1vyatv80 {\n  margin-top: var(--size-space-100);\n}\n.utility_mt200__1vyatv81 {\n  margin-top: var(--size-space-200);\n}\n.utility_mt300__1vyatv82 {\n  margin-top: var(--size-space-300);\n}\n.utility_mt400__1vyatv83 {\n  margin-top: var(--size-space-400);\n}\",\n  ],\n  [\n    \"app.js\",\n    \"import \"./styles/reset.css.js\";\nimport { Button } from \"./button/button.js\";\nimport { Radio } from \"./checkbox/checkbox.js\";\nimport { Radio as Radio$1 } from \"./radio/radio.js\";\nimport \"./styles/utility.css.js\";\n\nexport { Button, Radio as Checkbox, Radio$1 as Radio };\",\n  ],\n  [\n    \"button/button.css.js\",\n    \"//#region fixtures/react-library-example/src/button/button.css.ts\nvar btn = \"button_btn__s626q60\";\n\n//#endregion\nexport { btn };\",\n  ],\n  [\n    \"button/button.js\",\n    \"import { btn } from \"./button.css.js\";\nimport clsx from \"clsx\";\nimport { jsx } from \"react/jsx-runtime\";\n\n//#region fixtures/react-library-example/src/button/button.tsx\nfunction Button({ className, children, type = \"button\",...props }) {\n\treturn /* @__PURE__ */ jsx(\"button\", {\n\t\t...props,\n\t\ttype,\n\t\tclassName: clsx(btn, className),\n\t\tchildren\n\t});\n}\n\n//#endregion\nexport { Button };\",\n  ],\n  [\n    \"checkbox/checkbox.css.js\",\n    \"//#region fixtures/react-library-example/src/checkbox/checkbox.css.ts\nvar input = \"checkbox_input__8y0ume1\";\nvar label = \"checkbox_label__8y0ume0\";\n\n//#endregion\nexport { input, label };\",\n  ],\n  [\n    \"checkbox/checkbox.js\",\n    \"import { input, label } from \"./checkbox.css.js\";\nimport clsx from \"clsx\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nimport { useId } from \"react\";\n\n//#region fixtures/react-library-example/src/checkbox/checkbox.tsx\nfunction Radio({ children, className, id,...props }) {\n\tconst randomID = useId();\n\treturn /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(\"input\", {\n\t\t...props,\n\t\tclassName: input,\n\t\tid: id ?? randomID,\n\t\ttype: \"checkbox\"\n\t}), /* @__PURE__ */ jsx(\"label\", {\n\t\tclassName: clsx(label, className),\n\t\thtmlFor: id ?? randomID,\n\t\tchildren\n\t})] });\n}\n\n//#endregion\nexport { Radio };\",\n  ],\n  [\n    \"radio/radio.css.js\",\n    \"//#region fixtures/react-library-example/src/radio/radio.css.ts\nvar input = \"radio_input__1uatvdb1\";\nvar label = \"radio_label__1uatvdb0\";\n\n//#endregion\nexport { input, label };\",\n  ],\n  [\n    \"radio/radio.js\",\n    \"import { input, label } from \"./radio.css.js\";\nimport clsx from \"clsx\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nimport { useId } from \"react\";\n\n//#region fixtures/react-library-example/src/radio/radio.tsx\nfunction Radio({ children, className, id,...props }) {\n\tconst randomID = useId();\n\treturn /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(\"input\", {\n\t\t...props,\n\t\tclassName: input,\n\t\tid: id ?? randomID,\n\t\ttype: \"radio\"\n\t}), /* @__PURE__ */ jsx(\"label\", {\n\t\tclassName: clsx(label, className),\n\t\thtmlFor: id ?? randomID,\n\t\tchildren\n\t})] });\n}\n\n//#endregion\nexport { Radio };\",\n  ],\n  [\n    \"styles/reset.css.js\",\n    \"\",\n  ],\n  [\n    \"styles/utility.css.js\",\n    \"\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > should be compatible with rolldown > should build with preserveModules 1`] = `\n[\n  [\n    \"assets/shared.css.ts.vanilla-G_Gyt4-e.css\",\n    \".shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody, button {\n  line-height: 16px;\n}\",\n  ],\n  [\n    \"assets/styles.css.ts.vanilla-BfisGtko.css\",\n    \"@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(--colors-backgroundColor__cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: 'I am content';\n}\nhtml .styles_opacity_1\\\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\",\n  ],\n  [\n    \"assets/themes.css.ts.vanilla-s9rcEmBH.css\",\n    \"@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root, .themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\",\n  ],\n  [\n    \"src/index.js\",\n    \"import { altTheme, responsiveTheme, theme, vars } from \"./themes.css.js\";\nimport { button, container, opacity } from \"./styles.css.js\";\nimport { shadow } from \"./shared.css.js\";\nimport test_nodes_default from \"../test-nodes.js\";\nimport { assignInlineVars, setElementVars } from \"@vanilla-extract/dynamic\";\n\n//#region fixtures/themed/src/index.ts\nconst inlineTheme = assignInlineVars(vars, {\n\tcolors: {\n\t\tbackgroundColor: \"orange\",\n\t\ttext: \"black\"\n\t},\n\tspace: {\n\t\t1: \"4px\",\n\t\t2: \"8px\",\n\t\t3: \"12px\"\n\t}\n});\nfunction render() {\n\tdocument.body.innerHTML = \\`\n  <div id=\"\\${test_nodes_default.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${test_nodes_default.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${test_nodes_default.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${test_nodes_default.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${test_nodes_default.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${test_nodes_default.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${test_nodes_default.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${test_nodes_default.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${test_nodes_default.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${test_nodes_default.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${test_nodes_default.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n\tconst dynamicVarsContainer = document.getElementById(test_nodes_default.dynamicVarsContainer);\n\tif (!dynamicVarsContainer) throw new Error(\"Dynamic vars container not found.\");\n\tsetElementVars(dynamicVarsContainer, vars, {\n\t\tcolors: {\n\t\t\tbackgroundColor: \"transparent\",\n\t\t\ttext: \"papayawhip\"\n\t\t},\n\t\tspace: {\n\t\t\t1: \"5px\",\n\t\t\t2: \"10px\",\n\t\t\t3: \"15px\"\n\t\t}\n\t});\n\tsetElementVars(dynamicVarsContainer, { [vars.colors.backgroundColor]: \"darksalmon\" });\n}\nrender();\n\n//#endregion\",\n  ],\n  [\n    \"src/shared.css.js\",\n    \"import \"./../assets/shared.css.ts.vanilla-G_Gyt4-e.css\";\n\n//#region fixtures/themed/src/shared.css.ts\nvar shadow = \"shared_shadow__4dtfen0\";\n\n//#endregion\nexport { shadow };\",\n  ],\n  [\n    \"src/styles.css.js\",\n    \"import \"./../assets/themes.css.ts.vanilla-s9rcEmBH.css\";\nimport \"./../assets/shared.css.ts.vanilla-G_Gyt4-e.css\";\nimport \"./../assets/styles.css.ts.vanilla-BfisGtko.css\";\n\n//#region fixtures/themed/src/styles.css.ts\nvar button = \"styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12\";\nvar container = \"styles_container__jteyb11\";\nvar opacity = {\n\t\"1/2\": \"styles_opacity_1/2__jteyb16\",\n\t\"1/4\": \"styles_opacity_1/4__jteyb17\"\n};\n\n//#endregion\nexport { button, container, opacity };\",\n  ],\n  [\n    \"src/themes.css.js\",\n    \"import \"./../assets/themes.css.ts.vanilla-s9rcEmBH.css\";\n\n//#region fixtures/themed/src/themes.css.ts\nvar altTheme = \"themes_altTheme__cvta176\";\nvar responsiveTheme = \"themes_responsiveTheme__cvta17e\";\nvar theme = \"themes_theme__cvta170\";\nvar vars = {\n\tcolors: {\n\t\tbackgroundColor: \"var(--colors-backgroundColor__cvta171)\",\n\t\ttext: \"var(--colors-text__cvta172)\"\n\t},\n\tspace: {\n\t\t\"1\": \"var(--space-1__cvta173)\",\n\t\t\"2\": \"var(--space-2__cvta174)\",\n\t\t\"3\": \"var(--space-3__cvta175)\"\n\t}\n};\n\n//#endregion\nexport { altTheme, responsiveTheme, theme, vars };\",\n  ],\n  [\n    \"test-nodes.js\",\n    \"//#region fixtures/themed/test-nodes.json\nvar root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar test_nodes_default = {\n\troot,\n\trootContainer,\n\trootButton,\n\taltContainer,\n\taltButton,\n\tnestedRootContainer,\n\tnestedRootButton,\n\tinlineThemeContainer,\n\tinlineThemeButton,\n\tdynamicVarsContainer,\n\tdynamicVarsButton,\n\tresponsiveThemeContainer,\n\tresponsiveThemeButton\n};\n\n//#endregion\nexport { test_nodes_default as default };\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > should be compatible with rolldown > should build with preserveModules and assetFileNames 1`] = `\n[\n  [\n    \"index.js\",\n    \"import { altTheme, responsiveTheme, theme, vars } from \"./themes.css.js\";\nimport { button, container, opacity } from \"./styles.css.js\";\nimport { shadow } from \"./shared.css.js\";\nimport test_nodes_default from \"./test-nodes.js\";\nimport { assignInlineVars, setElementVars } from \"@vanilla-extract/dynamic\";\n\n//#region fixtures/themed/src/index.ts\nconst inlineTheme = assignInlineVars(vars, {\n\tcolors: {\n\t\tbackgroundColor: \"orange\",\n\t\ttext: \"black\"\n\t},\n\tspace: {\n\t\t1: \"4px\",\n\t\t2: \"8px\",\n\t\t3: \"12px\"\n\t}\n});\nfunction render() {\n\tdocument.body.innerHTML = \\`\n  <div id=\"\\${test_nodes_default.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${test_nodes_default.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${test_nodes_default.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${test_nodes_default.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${test_nodes_default.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${test_nodes_default.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${test_nodes_default.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${test_nodes_default.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${test_nodes_default.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${test_nodes_default.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${test_nodes_default.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n\tconst dynamicVarsContainer = document.getElementById(test_nodes_default.dynamicVarsContainer);\n\tif (!dynamicVarsContainer) throw new Error(\"Dynamic vars container not found.\");\n\tsetElementVars(dynamicVarsContainer, vars, {\n\t\tcolors: {\n\t\t\tbackgroundColor: \"transparent\",\n\t\t\ttext: \"papayawhip\"\n\t\t},\n\t\tspace: {\n\t\t\t1: \"5px\",\n\t\t\t2: \"10px\",\n\t\t\t3: \"15px\"\n\t\t}\n\t});\n\tsetElementVars(dynamicVarsContainer, { [vars.colors.backgroundColor]: \"darksalmon\" });\n}\nrender();\n\n//#endregion\",\n  ],\n  [\n    \"shared.css.js\",\n    \"import \"./shared.css.ts.vanilla.css\";\n\n//#region fixtures/themed/src/shared.css.ts\nvar shadow = \"shared_shadow__4dtfen0\";\n\n//#endregion\nexport { shadow };\",\n  ],\n  [\n    \"shared.css.ts.vanilla.css\",\n    \".shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody, button {\n  line-height: 16px;\n}\",\n  ],\n  [\n    \"styles.css.js\",\n    \"import \"./themes.css.ts.vanilla.css\";\nimport \"./shared.css.ts.vanilla.css\";\nimport \"./styles.css.ts.vanilla.css\";\n\n//#region fixtures/themed/src/styles.css.ts\nvar button = \"styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12\";\nvar container = \"styles_container__jteyb11\";\nvar opacity = {\n\t\"1/2\": \"styles_opacity_1/2__jteyb16\",\n\t\"1/4\": \"styles_opacity_1/4__jteyb17\"\n};\n\n//#endregion\nexport { button, container, opacity };\",\n  ],\n  [\n    \"styles.css.ts.vanilla.css\",\n    \"@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(--colors-backgroundColor__cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: 'I am content';\n}\nhtml .styles_opacity_1\\\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\",\n  ],\n  [\n    \"test-nodes.js\",\n    \"//#region fixtures/themed/test-nodes.json\nvar root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar test_nodes_default = {\n\troot,\n\trootContainer,\n\trootButton,\n\taltContainer,\n\taltButton,\n\tnestedRootContainer,\n\tnestedRootButton,\n\tinlineThemeContainer,\n\tinlineThemeButton,\n\tdynamicVarsContainer,\n\tdynamicVarsButton,\n\tresponsiveThemeContainer,\n\tresponsiveThemeButton\n};\n\n//#endregion\nexport { test_nodes_default as default };\",\n  ],\n  [\n    \"themes.css.js\",\n    \"import \"./themes.css.ts.vanilla.css\";\n\n//#region fixtures/themed/src/themes.css.ts\nvar altTheme = \"themes_altTheme__cvta176\";\nvar responsiveTheme = \"themes_responsiveTheme__cvta17e\";\nvar theme = \"themes_theme__cvta170\";\nvar vars = {\n\tcolors: {\n\t\tbackgroundColor: \"var(--colors-backgroundColor__cvta171)\",\n\t\ttext: \"var(--colors-text__cvta172)\"\n\t},\n\tspace: {\n\t\t\"1\": \"var(--space-1__cvta173)\",\n\t\t\"2\": \"var(--space-2__cvta174)\",\n\t\t\"3\": \"var(--space-3__cvta175)\"\n\t}\n};\n\n//#endregion\nexport { altTheme, responsiveTheme, theme, vars };\",\n  ],\n  [\n    \"themes.css.ts.vanilla.css\",\n    \"@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root, .themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > should be compatible with rolldown > should build with preserveModules and inject filescopes 1`] = `\n[\n  [\n    \"index.js\",\n    \"import { altTheme, responsiveTheme, theme, vars } from \"./themes.css.js\";\nimport { shadow } from \"./shared.css.js\";\nimport { button, container, opacity } from \"./styles.css.js\";\nimport test_nodes_default from \"./test-nodes.js\";\nimport { assignInlineVars, setElementVars } from \"@vanilla-extract/dynamic\";\n\n//#region fixtures/themed/src/index.ts\nconst inlineTheme = assignInlineVars(vars, {\n\tcolors: {\n\t\tbackgroundColor: \"orange\",\n\t\ttext: \"black\"\n\t},\n\tspace: {\n\t\t1: \"4px\",\n\t\t2: \"8px\",\n\t\t3: \"12px\"\n\t}\n});\nfunction render() {\n\tdocument.body.innerHTML = \\`\n  <div id=\"\\${test_nodes_default.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${test_nodes_default.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${test_nodes_default.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${test_nodes_default.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${test_nodes_default.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${test_nodes_default.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${test_nodes_default.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${test_nodes_default.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${test_nodes_default.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${test_nodes_default.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${test_nodes_default.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n\tconst dynamicVarsContainer = document.getElementById(test_nodes_default.dynamicVarsContainer);\n\tif (!dynamicVarsContainer) throw new Error(\"Dynamic vars container not found.\");\n\tsetElementVars(dynamicVarsContainer, vars, {\n\t\tcolors: {\n\t\t\tbackgroundColor: \"transparent\",\n\t\t\ttext: \"papayawhip\"\n\t\t},\n\t\tspace: {\n\t\t\t1: \"5px\",\n\t\t\t2: \"10px\",\n\t\t\t3: \"15px\"\n\t\t}\n\t});\n\tsetElementVars(dynamicVarsContainer, { [vars.colors.backgroundColor]: \"darksalmon\" });\n}\nrender();\n\n//#endregion\",\n  ],\n  [\n    \"shared.css.js\",\n    \"import { endFileScope, setFileScope } from \"@vanilla-extract/css/fileScope\";\nimport { globalStyle, style } from \"@vanilla-extract/css\";\n\n//#region fixtures/themed/src/shared.css.ts\nsetFileScope(\"src/shared.css.ts\", \"@fixtures/themed\");\nconst shadow = style({ boxShadow: \"0 0 5px red\" }, \"shadow\");\nglobalStyle(\"body\", { backgroundColor: \"skyblue\" });\nglobalStyle(\"body, button\", { lineHeight: \"16px\" });\nendFileScope();\n\n//#endregion\nexport { shadow };\",\n  ],\n  [\n    \"styles.css.js\",\n    \"import { altTheme, theme, vars } from \"./themes.css.js\";\nimport { shadow } from \"./shared.css.js\";\nimport { endFileScope, setFileScope } from \"@vanilla-extract/css/fileScope\";\nimport { createVar, fallbackVar, fontFace, globalFontFace, globalStyle, style, styleVariants } from \"@vanilla-extract/css\";\n\n//#region fixtures/themed/src/styles.css.ts\nsetFileScope(\"src/styles.css.ts\", \"@fixtures/themed\");\nconst impact = fontFace({ src: \"local(\\\\\"Impact\\\\\")\" }, \"impact\");\nglobalFontFace(\"MyGlobalComicSans\", { src: \"local(\\\\\"Comic Sans MS\\\\\")\" });\nconst container = style({\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tgap: vars.space[2],\n\tpadding: vars.space[3],\n\t\"@media\": { \"only screen and (min-width: 500px)\": { border: \\`1px solid \\${vars.colors.backgroundColor}\\` } }\n}, \"container\");\nconst iDunno = style([{ zIndex: 1 }, { position: \"relative\" }], \"iDunno\");\nconst button = style([\n\t{\n\t\tfontFamily: impact,\n\t\tbackgroundColor: fallbackVar(vars.colors.backgroundColor, \"\\\\\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\\\\"\"),\n\t\tcolor: vars.colors.text,\n\t\tborderRadius: \"9999px\",\n\t\t\"@media\": {\n\t\t\t\"only screen and (min-width: 500px)\": { padding: vars.space[1] },\n\t\t\t\"only screen and (min-width: 1000px)\": { padding: vars.space[2] }\n\t\t},\n\t\tselectors: { [\\`\\${altTheme} \\${theme} \\${container} &\\`]: {\n\t\t\tfontFamily: \"MyGlobalComicSans\",\n\t\t\toutline: \"5px solid red\"\n\t\t} }\n\t},\n\tshadow,\n\tiDunno\n], \"button\");\nglobalStyle(\\`body \\${iDunno}:after\\`, { content: \"'I am content'\" });\nconst blankVar1 = createVar({\n\tsyntax: \"<number>\",\n\tinherits: false,\n\tinitialValue: \"0.5\"\n}, \"blankVar1\");\nconst blankVar2 = createVar(\"blankVar2\");\nconst opacity = styleVariants({\n\t\"1/2\": blankVar1,\n\t\"1/4\": fallbackVar(blankVar1, blankVar2, \"0.25\")\n}, (value) => ({ selectors: { \"html &\": { opacity: value } } }), \"opacity\");\nendFileScope();\n\n//#endregion\nexport { button, container, opacity };\",\n  ],\n  [\n    \"test-nodes.js\",\n    \"//#region fixtures/themed/test-nodes.json\nvar root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar test_nodes_default = {\n\troot,\n\trootContainer,\n\trootButton,\n\taltContainer,\n\taltButton,\n\tnestedRootContainer,\n\tnestedRootButton,\n\tinlineThemeContainer,\n\tinlineThemeButton,\n\tdynamicVarsContainer,\n\tdynamicVarsButton,\n\tresponsiveThemeContainer,\n\tresponsiveThemeButton\n};\n\n//#endregion\nexport { test_nodes_default as default };\",\n  ],\n  [\n    \"themes.css.js\",\n    \"import { endFileScope, setFileScope } from \"@vanilla-extract/css/fileScope\";\nimport { assignVars, createGlobalTheme, createTheme, layer, style } from \"@vanilla-extract/css\";\n\n//#region fixtures/themed/src/themes.css.ts\nsetFileScope(\"src/themes.css.ts\", \"@fixtures/themed\");\nconst theme = style({}, \"theme\");\nconst vars = createGlobalTheme(\\`:root, \\${theme}\\`, {\n\tcolors: {\n\t\tbackgroundColor: \"blue\",\n\t\ttext: \"white\"\n\t},\n\tspace: {\n\t\t1: \"4px\",\n\t\t2: \"8px\",\n\t\t3: \"12px\"\n\t}\n});\nconst altTheme = createTheme(vars, {\n\tcolors: {\n\t\tbackgroundColor: \"green\",\n\t\ttext: \"white\"\n\t},\n\tspace: {\n\t\t1: \"8px\",\n\t\t2: \"12px\",\n\t\t3: \"16px\"\n\t}\n}, \"altTheme\");\nconst themeLayer = layer(\"themeLayer\");\nconst [altTheme2Class, altTheme2Contract] = createTheme({\n\t\"@layer\": themeLayer,\n\tcolors: {\n\t\tbackgroundColor: \"green\",\n\t\ttext: \"white\"\n\t},\n\tspace: {\n\t\t1: \"8px\",\n\t\t2: \"12px\",\n\t\t3: \"16px\"\n\t}\n}, \"altTheme2Class\");\nconst altTheme3 = createGlobalTheme(\":root\", altTheme2Contract, {\n\t\"@layer\": \"globalThemeLayer\",\n\tcolors: {\n\t\tbackgroundColor: \"green\",\n\t\ttext: \"white\"\n\t},\n\tspace: {\n\t\t1: \"8px\",\n\t\t2: \"12px\",\n\t\t3: \"16px\"\n\t}\n});\nconst responsiveTheme = style({\n\tvars: assignVars(vars, {\n\t\tcolors: {\n\t\t\tbackgroundColor: \"pink\",\n\t\t\ttext: \"purple\"\n\t\t},\n\t\tspace: {\n\t\t\t1: \"6px\",\n\t\t\t2: \"12px\",\n\t\t\t3: \"18px\"\n\t\t}\n\t}),\n\t\"@media\": { \"screen and (min-width: 768px)\": { vars: assignVars(vars.colors, {\n\t\tbackgroundColor: \"purple\",\n\t\ttext: \"pink\"\n\t}) } }\n}, \"responsiveTheme\");\nendFileScope();\n\n//#endregion\nexport { altTheme, responsiveTheme, theme, vars };\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > should be compatible with rolldown > should build with sourcemaps 1`] = `\n[\n  [\n    \"assets/shared.css.ts.vanilla-G_Gyt4-e.css\",\n    \"\",\n  ],\n  [\n    \"assets/styles.css.ts.vanilla-BfisGtko.css\",\n    \"\",\n  ],\n  [\n    \"assets/themes.css.ts.vanilla-s9rcEmBH.css\",\n    \"\",\n  ],\n  [\n    \"src/index.js\",\n    \";;;;;;;AAiBA,MAAM,cAAc,iBAAiB,MAAM;CACzC,QAAQ;EACN,iBAAiB;EACjB,MAAM;CACP;CACD,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;CACJ;AACF,EAAC;AAEF,SAAS,SAAS;AAChB,UAAS,KAAK,YAAY,CAAC;WAClB,EAAEA,mBAAU,KAAK,SAAS,EAAE,OAAO;;aAEjC,EAAEA,mBAAU,cAAc,SAAS,EAAE,UAAU;kBAC1C,EAAEA,mBAAU,WAAW,SAAS,EAAE,OAAO;kBACzC,EAAE,SAAS;;iBAEZ,EAAEA,mBAAU,aAAa,SAAS,EAAE,UAAU;sBACzC,EAAEA,mBAAU,UAAU,SAAS,EAAE,OAAO;sBACxC,EAAE,MAAM;;qBAET,EAAEA,mBAAU,oBAAoB,SAAS,EAAE,UAAU;0BAChD,EAAEA,mBAAU,iBAAiB,SAAS,EAAE,OAAO;wBACjD,EAAE,YAAY;;yBAEb,EAAEA,mBAAU,qBAAqB,SAAS,EAAE,UAAU;8BACjD,EAAEA,mBAAU,kBAAkB,SAAS,EAAE,OAAO,CAAC,EAAE,QAAQ,OAAO,6BAA6B,EAAE,QAAQ,OAAO;;;6BAGjH,EAAEA,mBAAU,qBAAqB,SAAS,EAAE,UAAU;kCACjD,EAAEA,mBAAU,kBAAkB,SAAS,EAAE,OAAO;8BACpD,EAAE,gBAAgB;;yBAEvB,EAAEA,mBAAU,yBAAyB,SAAS,EAAE,UAAU;8BACrD,EAAEA,mBAAU,sBAAsB,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;AAelF,CAAC;CAEC,MAAM,uBAAuB,SAAS,eACpCA,mBAAU,qBACX;AAED,MAAK,qBACH,OAAM,IAAI,MAAM;AAGlB,gBAAe,sBAAsB,MAAM;EACzC,QAAQ;GACN,iBAAiB;GACjB,MAAM;EACP;EACD,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG;EACJ;CACF,EAAC;AAEF,gBAAe,sBAAsB,GAClC,KAAK,OAAO,kBAAkB,aAChC,EAAC;AACH;AAED,QAAQ\",\n  ],\n  [\n    \"src/index.js.map\",\n    \"\",\n  ],\n  [\n    \"src/shared.css.js\",\n    \"\",\n  ],\n  [\n    \"src/shared.css.js.map\",\n    \"\",\n  ],\n  [\n    \"src/styles.css.js\",\n    \"\",\n  ],\n  [\n    \"src/styles.css.js.map\",\n    \"\",\n  ],\n  [\n    \"src/themes.css.js\",\n    \"\",\n  ],\n  [\n    \"src/themes.css.js.map\",\n    \"\",\n  ],\n  [\n    \"test-nodes.js\",\n    \";WACU;oBACS;iBACH;mBACE;gBACH;0BACU;uBACH;2BACI;wBACH;2BACG;wBACH;+BACO;4BACH;yBAb3B;;;;;;;;;;;;;;AAcC\",\n  ],\n  [\n    \"test-nodes.js.map\",\n    \"\",\n  ],\n]\n`;\n\nexports[`rollup-plugin > should be compatible with rolldown > should build without preserveModules 1`] = `\n[\n  [\n    \"assets/shared.css.ts.vanilla-G_Gyt4-e.css\",\n    \".shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody, button {\n  line-height: 16px;\n}\",\n  ],\n  [\n    \"assets/styles.css.ts.vanilla-BfisGtko.css\",\n    \"@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(--colors-backgroundColor__cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176 .themes_theme__cvta170 .styles_container__jteyb11 .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: 'I am content';\n}\nhtml .styles_opacity_1\\\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\",\n  ],\n  [\n    \"assets/themes.css.ts.vanilla-s9rcEmBH.css\",\n    \"@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root, .themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\",\n  ],\n  [\n    \"index.js\",\n    \"import { assignInlineVars, setElementVars } from \"@vanilla-extract/dynamic\";\nimport \"./assets/themes.css.ts.vanilla-s9rcEmBH.css\";\nimport \"./assets/shared.css.ts.vanilla-G_Gyt4-e.css\";\nimport \"./assets/styles.css.ts.vanilla-BfisGtko.css\";\n\n//#region fixtures/themed/src/themes.css.ts\nvar altTheme = \"themes_altTheme__cvta176\";\nvar responsiveTheme = \"themes_responsiveTheme__cvta17e\";\nvar theme = \"themes_theme__cvta170\";\nvar vars = {\n\tcolors: {\n\t\tbackgroundColor: \"var(--colors-backgroundColor__cvta171)\",\n\t\ttext: \"var(--colors-text__cvta172)\"\n\t},\n\tspace: {\n\t\t\"1\": \"var(--space-1__cvta173)\",\n\t\t\"2\": \"var(--space-2__cvta174)\",\n\t\t\"3\": \"var(--space-3__cvta175)\"\n\t}\n};\n\n//#endregion\n//#region fixtures/themed/src/styles.css.ts\nvar button = \"styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12\";\nvar container = \"styles_container__jteyb11\";\nvar opacity = {\n\t\"1/2\": \"styles_opacity_1/2__jteyb16\",\n\t\"1/4\": \"styles_opacity_1/4__jteyb17\"\n};\n\n//#endregion\n//#region fixtures/themed/src/shared.css.ts\nvar shadow = \"shared_shadow__4dtfen0\";\n\n//#endregion\n//#region fixtures/themed/test-nodes.json\nvar root = \"root\";\nvar rootContainer = \"rootContainer\";\nvar rootButton = \"rootButton\";\nvar altContainer = \"altContainer\";\nvar altButton = \"altButton\";\nvar nestedRootContainer = \"nestedRootContainer\";\nvar nestedRootButton = \"nestedRootButton\";\nvar inlineThemeContainer = \"inlineThemeContainer\";\nvar inlineThemeButton = \"inlineThemeButton\";\nvar dynamicVarsContainer = \"dynamicVarsContainer\";\nvar dynamicVarsButton = \"dynamicVarsButton\";\nvar responsiveThemeContainer = \"responsiveThemeContainer\";\nvar responsiveThemeButton = \"responsiveThemeButton\";\nvar test_nodes_default = {\n\troot,\n\trootContainer,\n\trootButton,\n\taltContainer,\n\taltButton,\n\tnestedRootContainer,\n\tnestedRootButton,\n\tinlineThemeContainer,\n\tinlineThemeButton,\n\tdynamicVarsContainer,\n\tdynamicVarsButton,\n\tresponsiveThemeContainer,\n\tresponsiveThemeButton\n};\n\n//#endregion\n//#region fixtures/themed/src/index.ts\nconst inlineTheme = assignInlineVars(vars, {\n\tcolors: {\n\t\tbackgroundColor: \"orange\",\n\t\ttext: \"black\"\n\t},\n\tspace: {\n\t\t1: \"4px\",\n\t\t2: \"8px\",\n\t\t3: \"12px\"\n\t}\n});\nfunction render() {\n\tdocument.body.innerHTML = \\`\n  <div id=\"\\${test_nodes_default.root}\" class=\"\\${shadow}\"> \n    Root theme\n    <div id=\"\\${test_nodes_default.rootContainer}\" class=\"\\${container}\">\n      <button id=\"\\${test_nodes_default.rootButton}\" class=\"\\${button}\">Main theme button</button>\n      <div class=\"\\${altTheme}\"> \n        Alt theme\n        <div id=\"\\${test_nodes_default.altContainer}\" class=\"\\${container}\">\n          <button id=\"\\${test_nodes_default.altButton}\" class=\"\\${button}\">Alt theme button</button>\n          <div class=\"\\${theme}\"> \n            Back to root theme\n            <div id=\"\\${test_nodes_default.nestedRootContainer}\" class=\"\\${container}\">\n              <button id=\"\\${test_nodes_default.nestedRootButton}\" class=\"\\${button}\">Main theme button</button>\n            <div style=\"\\${inlineTheme}\">\n              Inline theme\n                <div id=\"\\${test_nodes_default.inlineThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.inlineThemeButton}\" class=\"\\${button} \\${opacity[\"1/2\"]}\">Inline theme <span class=\"{\\${opacity[\"1/4\"]}}\">button</span></button>\n                  <div>\n                  Dynamic vars\n                    <div id=\"\\${test_nodes_default.dynamicVarsContainer}\" class=\"\\${container}\">\n                      <button id=\"\\${test_nodes_default.dynamicVarsButton}\" class=\"\\${button}\">Dynamic vars button</button>\n                  <div class=\"\\${responsiveTheme}\">\n              Responsive theme\n                <div id=\"\\${test_nodes_default.responsiveThemeContainer}\" class=\"\\${container}\">\n                  <button id=\"\\${test_nodes_default.responsiveThemeButton}\" class=\"\\${button}\">Responsive theme button</button>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\\`;\n\tconst dynamicVarsContainer$1 = document.getElementById(test_nodes_default.dynamicVarsContainer);\n\tif (!dynamicVarsContainer$1) throw new Error(\"Dynamic vars container not found.\");\n\tsetElementVars(dynamicVarsContainer$1, vars, {\n\t\tcolors: {\n\t\t\tbackgroundColor: \"transparent\",\n\t\t\ttext: \"papayawhip\"\n\t\t},\n\t\tspace: {\n\t\t\t1: \"5px\",\n\t\t\t2: \"10px\",\n\t\t\t3: \"15px\"\n\t\t}\n\t});\n\tsetElementVars(dynamicVarsContainer$1, { [vars.colors.backgroundColor]: \"darksalmon\" });\n}\nrender();\n\n//#endregion\",\n  ],\n]\n`;\n"
  },
  {
    "path": "packages/rollup-plugin/test/rollup-plugin.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport {\n  rolldown,\n  type InputOptions as RolldownInputOptions,\n  type OutputOptions as RolldownOutputOptions,\n} from 'rolldown';\nimport {\n  rollup,\n  type InputPluginOption,\n  type OutputAsset,\n  type OutputChunk,\n  type OutputOptions,\n  type RollupOptions,\n} from 'rollup';\nimport esbuild from 'rollup-plugin-esbuild';\nimport json from '@rollup/plugin-json';\nimport path from 'path';\n\nimport {\n  vanillaExtractPlugin,\n  type Options as VanillaExtractPluginOptions,\n} from '..';\nimport { stripSideEffectImportsMatching } from '../src/lib';\n\ninterface BuildOptions extends VanillaExtractPluginOptions {\n  rollup: RollupOptions & { output: OutputOptions };\n}\n\nasync function build({\n  rollup: rollupOptions,\n  ...pluginOptions\n}: BuildOptions) {\n  const bundle = await rollup({\n    input: require.resolve('@fixtures/themed/src/index.ts'),\n    external: ['@vanilla-extract/dynamic'],\n    ...rollupOptions,\n    plugins: [\n      ...((rollupOptions?.plugins as InputPluginOption[]) ?? [\n        vanillaExtractPlugin({\n          cwd: path.dirname(require.resolve('@fixtures/themed/package.json')),\n          ...pluginOptions,\n        }),\n        esbuild(),\n        json(),\n      ]),\n    ],\n  });\n  const { output } = await bundle.generate(rollupOptions.output);\n  output.sort((a, b) => a.fileName.localeCompare(b.fileName));\n  return output;\n}\n\nasync function buildAndMatchSnapshot(options: BuildOptions) {\n  const output = await build(options);\n  expect(\n    output.map((chunkOrAsset) => [\n      chunkOrAsset.fileName,\n      chunkOrAsset.type === 'asset' ? chunkOrAsset.source : chunkOrAsset.code,\n    ]),\n  ).toMatchSnapshot();\n}\n\ndescribe('rollup-plugin', () => {\n  describe('options', () => {\n    it('extract generates .css bundle', async () => {\n      const cwd = path.dirname(\n        require.resolve('@fixtures/react-library-example/package.json'),\n      );\n      const output = await build({\n        cwd,\n        extract: { name: 'app.css', sourcemap: true },\n        rollup: {\n          input: { app: path.join(cwd, 'src/index.ts') },\n          external: ['clsx', 'react', 'react/jsx-runtime', 'react-dom'],\n          output: {\n            assetFileNames: '[name][extname]',\n            format: 'esm',\n            preserveModules: true, // not needed for output, just makes some assertions easier\n          },\n        },\n      });\n\n      // assert essential files were made\n      const bundleAsset = output.find(\n        (file) => file.type === 'asset' && file.fileName === 'app.css',\n      );\n      expect(bundleAsset).toBeTruthy();\n      const sourcemapAsset = output.find(\n        (file) => file.type === 'asset' && file.fileName === 'app.css.map',\n      );\n      expect(sourcemapAsset).toBeTruthy();\n\n      // assert .css imports were removed\n      const jsFiles = output.filter(\n        (file) => file.type === 'chunk' && file.fileName.endsWith('.js'),\n      ) as OutputChunk[];\n      for (const jsFile of jsFiles) {\n        expect(jsFile.code).not.toMatch(/^import .*\\.css['\"]/m);\n      }\n\n      // assert bundle CSS reflects order from @fixtures/react-library-example/index.ts\n      const map = JSON.parse(String((sourcemapAsset as OutputAsset).source));\n      expect(map.sources).toEqual([\n        'src/styles/reset.css.ts.vanilla.css',\n        'src/styles/vars.css.ts.vanilla.css',\n        'src/button/button.css.ts.vanilla.css',\n        'src/checkbox/checkbox.css.ts.vanilla.css',\n        'src/radio/radio.css.ts.vanilla.css',\n        'src/styles/utility.css.ts.vanilla.css', // this always should be last\n      ]);\n\n      // assert Vanilla CSS was stripped out\n      expect(\n        output.filter((file) => file.fileName.includes('.css.ts.vanilla')),\n      ).toHaveLength(0);\n\n      // snapshot output for everything else\n      expect(\n        output\n          .filter((chunkOrAsset) => !chunkOrAsset.fileName.endsWith('.map')) // remove .msps\n          .map((chunkOrAsset) => [\n            chunkOrAsset.fileName,\n            chunkOrAsset.type === 'asset'\n              ? chunkOrAsset.source\n              : chunkOrAsset.code,\n          ]),\n      ).toMatchSnapshot();\n    });\n  });\n\n  describe('Rollup settings', () => {\n    it('should build without preserveModules', async () => {\n      // Bundle all JS outputs together\n      await buildAndMatchSnapshot({\n        rollup: { output: { format: 'esm' } },\n      });\n    });\n\n    it('should build with preserveModules', async () => {\n      // Preserve JS modules\n      await buildAndMatchSnapshot({\n        rollup: {\n          output: {\n            format: 'esm',\n            preserveModules: true,\n          },\n        },\n      });\n    });\n\n    it('should build with preserveModules and inject filescopes', async () => {\n      // Preserve JS modules, don't generate any CSS assets and inject filescopes\n      await buildAndMatchSnapshot({\n        unstable_injectFilescopes: true,\n        rollup: {\n          output: {\n            format: 'esm',\n            preserveModules: true,\n          },\n          external: [\n            '@vanilla-extract/css/fileScope',\n            '@vanilla-extract/css',\n            '@vanilla-extract/dynamic',\n          ],\n        },\n      });\n    });\n\n    it('should build with preserveModules and assetFileNames', async () => {\n      // Preserve JS modules and place assets next to JS files instead of assets directory\n      await buildAndMatchSnapshot({\n        rollup: {\n          output: {\n            format: 'esm',\n            preserveModules: true,\n            preserveModulesRoot: path.dirname(\n              require.resolve('@fixtures/themed/src/index.ts'),\n            ),\n            assetFileNames({ names }) {\n              return names[0]?.replace(/^src\\//, '') ?? '';\n            },\n          },\n        },\n      });\n    });\n\n    it('should build with sourcemaps', async () => {\n      const output = await build({\n        rollup: {\n          output: {\n            format: 'esm',\n            preserveModules: true,\n            sourcemap: true,\n          },\n        },\n      });\n      expect(\n        output.map((chunkOrAsset) => [\n          chunkOrAsset.fileName,\n          chunkOrAsset.type === 'asset' ? '' : chunkOrAsset.map?.mappings,\n        ]),\n      ).toMatchSnapshot();\n    });\n  });\n\n  describe('should be compatible with rolldown', () => {\n    async function build({\n      rollup: rollupOptions,\n      ...pluginOptions\n    }: VanillaExtractPluginOptions & {\n      rollup: RolldownInputOptions & { output: RolldownOutputOptions };\n    }) {\n      const bundle = await rolldown({\n        external: [\n          '@vanilla-extract/dynamic',\n          '@vanilla-extract/css',\n          '@vanilla-extract/css/fileScope',\n        ],\n        input: require.resolve('@fixtures/themed/src/index.ts'),\n        plugins: [\n          vanillaExtractPlugin({\n            cwd: path.dirname(require.resolve('@fixtures/themed/package.json')),\n            ...pluginOptions,\n          }),\n        ],\n        ...rollupOptions,\n      });\n      const { output } = await bundle.generate(rollupOptions.output);\n      output.sort((a, b) => a.fileName.localeCompare(b.fileName));\n      return output;\n    }\n\n    async function buildAndMatchSnapshot(\n      outputOptions: RolldownOutputOptions,\n      { unstable_injectFilescopes }: { unstable_injectFilescopes?: boolean } = {\n        unstable_injectFilescopes: false,\n      },\n    ) {\n      const output = await build({\n        rollup: {\n          output: outputOptions,\n        },\n        unstable_injectFilescopes,\n      });\n      expect(\n        output.map((chunkOrAsset) => [\n          chunkOrAsset.fileName,\n          chunkOrAsset.type === 'asset'\n            ? chunkOrAsset.source\n            : chunkOrAsset.code,\n        ]),\n      ).toMatchSnapshot();\n    }\n\n    it('extract generates .css bundle', async () => {\n      const cwd = path.dirname(\n        require.resolve('@fixtures/react-library-example/package.json'),\n      );\n      const output = await build({\n        cwd,\n        extract: { name: 'app.css', sourcemap: true },\n        rollup: {\n          input: { app: path.join(cwd, 'src/index.ts') },\n          external: ['clsx', 'react', 'react/jsx-runtime', 'react-dom'],\n          output: {\n            assetFileNames: '[name][extname]',\n            format: 'esm',\n            preserveModules: true, // not needed for output, just makes some assertions easier\n          },\n        },\n      });\n\n      // assert essential files were made\n      const bundleAsset = output.find(\n        (file) => file.type === 'asset' && file.fileName === 'app.css',\n      );\n      expect(bundleAsset).toBeTruthy();\n      const sourcemapAsset = output.find(\n        (file) => file.type === 'asset' && file.fileName === 'app.css.map',\n      );\n      expect(sourcemapAsset).toBeTruthy();\n\n      // assert .css imports were removed\n      const jsFiles = output.filter(\n        (file) => file.type === 'chunk' && file.fileName.endsWith('.js'),\n      ) as OutputChunk[];\n      for (const jsFile of jsFiles) {\n        expect(jsFile.code).not.toMatch(/^import .*\\.css['\"]/m);\n      }\n\n      // assert bundle CSS reflects order from @fixtures/react-library-example/index.ts\n      const map = JSON.parse(String((sourcemapAsset as OutputAsset).source));\n      expect(map.sources).toEqual([\n        'src/styles/reset.css.ts.vanilla.css',\n        'src/styles/vars.css.ts.vanilla.css',\n        'src/button/button.css.ts.vanilla.css',\n        'src/checkbox/checkbox.css.ts.vanilla.css',\n        'src/radio/radio.css.ts.vanilla.css',\n        'src/styles/utility.css.ts.vanilla.css', // this always should be last\n      ]);\n\n      // assert Vanilla CSS was stripped out\n      expect(\n        output.filter((file) => file.fileName.includes('.css.ts.vanilla')),\n      ).toHaveLength(0);\n\n      // snapshot output for everything else\n      expect(\n        output\n          .filter((chunkOrAsset) => !chunkOrAsset.fileName.endsWith('.map')) // remove .msps\n          .map((chunkOrAsset) => [\n            chunkOrAsset.fileName,\n            chunkOrAsset.type === 'asset'\n              ? chunkOrAsset.source\n              : chunkOrAsset.code,\n          ]),\n      ).toMatchSnapshot();\n    });\n\n    it('should build without preserveModules', async () => {\n      // Bundle all JS outputs together\n      await buildAndMatchSnapshot({\n        format: 'esm',\n      });\n    });\n\n    it('should build with preserveModules', async () => {\n      // Preserve JS modules\n      await buildAndMatchSnapshot({\n        format: 'esm',\n        preserveModules: true,\n      });\n    });\n\n    it('should build with preserveModules and inject filescopes', async () => {\n      // Preserve JS modules\n      await buildAndMatchSnapshot(\n        {\n          format: 'esm',\n          preserveModules: true,\n          preserveModulesRoot: path.dirname(\n            require.resolve('@fixtures/themed/src/index.ts'),\n          ),\n          assetFileNames({ names }) {\n            return names[0].replace(/^src\\//, '') ?? '';\n          },\n        },\n        {\n          unstable_injectFilescopes: true,\n        },\n      );\n    });\n\n    it('should build with preserveModules and assetFileNames', async () => {\n      // Preserve JS modules and place assets next to JS files instead of assets directory\n      await buildAndMatchSnapshot({\n        format: 'esm',\n        preserveModules: true,\n        preserveModulesRoot: path.dirname(\n          require.resolve('@fixtures/themed/src/index.ts'),\n        ),\n        assetFileNames({ names }) {\n          return names[0].replace(/^src\\//, '') ?? '';\n        },\n      });\n    });\n\n    it('should build with sourcemaps', async () => {\n      const output = await build({\n        rollup: {\n          output: {\n            format: 'esm',\n            preserveModules: true,\n            sourcemap: true,\n          },\n        },\n      });\n      expect(\n        output.map((chunkOrAsset) => [\n          chunkOrAsset.fileName,\n          chunkOrAsset.type === 'asset' ? '' : chunkOrAsset.map?.mappings,\n        ]),\n      ).toMatchSnapshot();\n    });\n  });\n});\n\ndescribe('stripSideEffectImportsMatching', () => {\n  it('strips only specified side effects in ESM', () => {\n    expect(\n      stripSideEffectImportsMatching(\n        `import React from 'react';\nimport 'button.vanilla.css';\nimport './foobar.js';\n\nexport default function Button() {\n  return <button>My Button</button>;\n}`,\n        ['button.vanilla.css', 'checkbox.vanilla.css', 'radio.vanilla.css'],\n      ),\n    ).toBe(\n      `import React from 'react';\nimport './foobar.js';\n\nexport default function Button() {\n  return <button>My Button</button>;\n}`,\n    );\n  });\n\n  it('leaves code alone if no side effects specified', () => {\n    const code = `import React from 'react';\nimport 'button.vanilla.css';\nimport './foobar.js';\n\nexport default function Button() {\n  return <button>My Button</button>;\n}`;\n    expect(stripSideEffectImportsMatching(code, [])).toBe(code);\n  });\n\n  it('strips only specified side effects in CJS', () => {\n    expect(\n      stripSideEffectImportsMatching(\n        `const React = require('react');\nrequire('button.vanilla.css');\nrequire('./foobar.js');\n\nmodule.exports = function Button() {\n  return <button>My Button</button>;\n}`,\n        ['button.vanilla.css', 'checkbox.vanilla.css', 'radio.vanilla.css'],\n      ),\n    ).toBe(\n      `const React = require('react');\nrequire('./foobar.js');\n\nmodule.exports = function Button() {\n  return <button>My Button</button>;\n}`,\n    );\n  });\n});\n"
  },
  {
    "path": "packages/sprinkles/CHANGELOG.md",
    "content": "# @vanilla-extract/sprinkles\n\n## 1.6.5\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n## 1.6.4\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n## 1.6.3\n\n### Patch Changes\n\n- [#1463](https://github.com/vanilla-extract-css/vanilla-extract/pull/1463) [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a) Thanks [@askoufis](https://github.com/askoufis)! - Export types with `export { type T }` syntax\n\n## 1.6.2\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n## 1.6.1\n\n### Patch Changes\n\n- [#1117](https://github.com/vanilla-extract-css/vanilla-extract/pull/1117) [`8a35dff`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a35dff7f8b4f75691b7ba6ecdc98f45d6e8c5f4) Thanks [@gabro](https://github.com/gabro)! - Export `SprinklesProperties` type\n\n## 1.6.0\n\n### Minor Changes\n\n- [#1062](https://github.com/vanilla-extract-css/vanilla-extract/pull/1062) [`d33aa4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d33aa4a2c6422803967bf4ff1131d1a86a35797d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Support assigning properties to layers via `@layer` option on `defineProperties`\n\n  **Example usage:**\n\n  ```ts\n  // sprinkles.css.ts\n  import { defineProperties } from '@vanilla-extract/sprinkles';\n  import { layer } from '@vanilla-extract/css';\n\n  export const sprinklesLayer = layer();\n\n  const properties = defineProperties({\n    '@layer': sprinklesLayer\n    // etc.\n  });\n  ```\n\n## 1.5.2\n\n### Patch Changes\n\n- [#1039](https://github.com/vanilla-extract-css/vanilla-extract/pull/1039) [`4e8377b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e8377bdcfb8ffa237f94da67624458a8ff3b2b5) Thanks [@askoufis](https://github.com/askoufis)! - Fixes types for custom properties passed to `defineProperties`\n\n* [#1034](https://github.com/vanilla-extract-css/vanilla-extract/pull/1034) [`8365959`](https://github.com/vanilla-extract-css/vanilla-extract/commit/836595943eb21f97400986a123788ec46f165139) Thanks [@askoufis](https://github.com/askoufis)! - Allow `undefined` property values at the type level.\n  This change enables better compatibility with projects that set the [`exactOptionalPropertyTypes`][exactoptionalpropertytypes] flag to `true`.\n\n  [exactOptionalPropertyTypes]: https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes\n\n## 1.5.1\n\n### Patch Changes\n\n- [#854](https://github.com/vanilla-extract-css/vanilla-extract/pull/854) [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e) Thanks [@mrm007](https://github.com/mrm007)! - Expose `ResponsiveArray` so `.d.ts` bundling works correctly\n\n* [#854](https://github.com/vanilla-extract-css/vanilla-extract/pull/854) [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e) Thanks [@mrm007](https://github.com/mrm007)! - Bundle TypeScript declaration files (`.d.ts`) when building packages\n\n## 1.5.0\n\n### Minor Changes\n\n- [#812](https://github.com/vanilla-extract-css/vanilla-extract/pull/812) [`009e122`](https://github.com/vanilla-extract-css/vanilla-extract/commit/009e122693b92834125b6ca14b30fee5e626e245) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add support for container query conditions\n\n  **Example usage**\n\n  ```ts\n  import {\n    createContainer,\n    style\n  } from '@vanilla-extract/css';\n  import { defineProperties } from '@vanilla-extract/sprinkles';\n\n  const containerName = createContainer();\n\n  export const container = style({\n    containerName,\n    containerType: 'size'\n  });\n\n  const containerProperties = defineProperties({\n    conditions: {\n      small: {},\n      medium: {\n        '@container': `${containerName} (min-width: 768px)`\n      },\n      large: {\n        '@container': `${containerName} (min-width: 1024px)`\n      }\n    },\n    defaultCondition: 'small'\n    // etc.\n  });\n  ```\n\n## 1.4.1\n\n### Patch Changes\n\n- [#676](https://github.com/vanilla-extract-css/vanilla-extract/pull/676) [`98ab94a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98ab94a99fa7dbee395a7ae6ea4af24c7b1bd7ab) Thanks [@benjervis](https://github.com/benjervis)! - Make the sprinkles runtime more resilient to mutated prototypes.\n\n  Previously the createSprinkles function used a `for ... in` loop on an array, which creates problems when used in an environment that has monkeypatched the Array prototype improperly.\n  By switching to more original style for loops, this should be fixed.\n\n## 1.4.0\n\n### Minor Changes\n\n- [#605](https://github.com/vanilla-extract-css/vanilla-extract/pull/605) [`81a3d98`](https://github.com/vanilla-extract-css/vanilla-extract/commit/81a3d98b3fb36660406a59049e1cd464418b00fc) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Support boolean conditional values, e.g. `{ mobile: false, desktop: true }`\n\n## 1.3.3\n\n### Patch Changes\n\n- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)\n\n  This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.\n\n## 1.3.2\n\n### Patch Changes\n\n- [#508](https://github.com/vanilla-extract-css/vanilla-extract/pull/508) [`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `exports` field to `package.json` so nested package paths can be imported in a Node.js ESM context\n\n## 1.3.1\n\n### Patch Changes\n\n- [#432](https://github.com/vanilla-extract-css/vanilla-extract/pull/432) [`8641738`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8641738e20ec6c94804c49ee767b1a7d27efe8ad) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix handling of zero values in shorthands\n\n## 1.3.0\n\n### Minor Changes\n\n- [#360](https://github.com/vanilla-extract-css/vanilla-extract/pull/360) [`4ceb76e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ceb76efd8063cb833e2f63a708968d054f76dc0) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Clean up public API, deprecating old API names. Also adding sprinkles to the docs site and using `sprinkles` in favour of `atoms` for the canoncial examples.\n\n  API changes include:\n\n  - Rename `createAtomicStyles` to `defineProperties`, `createAtomicStyles` is now deprecated\n  - Rename `createAtomsFn` to `createSprinkles`, `createAtomsFn` is now deprecated\n  - Rename `AtomicStyles` type to `SprinklesProperties`, `AtomicStyles` is now deprecated\n\n  ### Migration Guide\n\n  ```diff\n  -import { createAtomicStyles, createAtomsFn } from '@vanilla-extract/sprinkles';\n  +import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\n\n  -const responsiveProperties = createAtomicStyles({\n  +const responsiveProperties = defineProperties({\n    conditions: {\n      mobile: {},\n      tablet: { '@media': 'screen and (min-width: 768px)' },\n      desktop: { '@media': 'screen and (min-width: 1024px)' }\n    },\n    defaultCondition: 'mobile',\n    properties: {\n      display: ['none', 'block', 'flex'],\n      flexDirection: ['row', 'column'],\n      padding: space\n      // etc.\n    }\n  });\n\n  -export const sprinkles = createAtomsFn(responsiveProperties);\n  +export const sprinkles = createSprinkles(responsiveProperties);\n  ```\n\n## 1.2.0\n\n### Minor Changes\n\n- [#334](https://github.com/vanilla-extract-css/vanilla-extract/pull/334) [`0d8efe2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0d8efe2e782bfc8d02485a19b9e3be4fa5bf7302) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Support multiple default conditions\n\n  If your conditions are mutually exclusive (e.g. light mode and dark mode), you can now provide an array of default conditions. For example, the following configuration would automatically expand `atoms({ background: 'white' })` to the equivalent of `atoms({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n  ```ts\n  import { createAtomicStyles } from '@vanilla-extract/sprinkles';\n\n  const responsiveStyles = createAtomicStyles({\n    conditions: {\n      lightMode: {\n        '@media': '(prefers-color-scheme: light)'\n      },\n      darkMode: { '@media': '(prefers-color-scheme: dark)' }\n    },\n    defaultCondition: ['lightMode', 'darkMode']\n    // etc.\n  });\n  ```\n\n## 1.1.3\n\n### Patch Changes\n\n- [#331](https://github.com/vanilla-extract-css/vanilla-extract/pull/331) [`30f3ba3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/30f3ba3f702b8a9eab8bee3bbfe0e571ccd65bd8) Thanks [@markdalgleish](https://github.com/markdalgleish)! - `createMapValueFn`: Support mapping values to `boolean`, `null` and `undefined`\n\n## 1.1.2\n\n### Patch Changes\n\n- [#326](https://github.com/vanilla-extract-css/vanilla-extract/pull/326) [`2d9b4c3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d9b4c3e711310e55dbefe4b3430a771d95d62fd) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Avoid calling `composeStyles` when using the atoms function at runtime\n\n## 1.1.1\n\n### Patch Changes\n\n- [#307](https://github.com/vanilla-extract-css/vanilla-extract/pull/307) [`a8f181d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8f181daa12ced5958c57bac61370726e751e1e2) Thanks [@rtkaaho](https://github.com/rtkaaho)! - Allow style objects to be passed when no conditions are present\n\n## 1.1.0\n\n### Minor Changes\n\n- [#303](https://github.com/vanilla-extract-css/vanilla-extract/pull/303) [`e67e673`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e67e673c071d3cbd7dafe4fb5667d37395c03a6b) Thanks [@rtkaaho](https://github.com/rtkaaho)! - Support passing style objects as property values.\n\n  For more complicated styles, values can now be entire style objects. This works especially well when combined with CSS Variables.\n\n  ```ts\n  import { createVar } from '@vanilla-extract/css';\n  import { createAtomicStyles } from '@vanilla-extract/sprinkles';\n\n  const alpha = createVar();\n\n  const responsiveStyles = createAtomicStyles({\n    properties: {\n      background: {\n        red: {\n          vars: { [alpha]: '1' },\n          background: `rgba(255, 0, 0, ${alpha})`\n        }\n      },\n      backgroundOpacity: {\n        1: { vars: { [alpha]: '1' } },\n        0.1: { vars: { [alpha]: '0.1' } }\n      }\n      // etc.\n    }\n  });\n  ```\n\n## 1.0.0\n\n### Major Changes\n\n- [#261](https://github.com/vanilla-extract-css/vanilla-extract/pull/261) [`3db8c11`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3db8c115ebf17885113de9eae6f794710c217a9c) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release Sprinkles v1\n\n### Minor Changes\n\n- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of calling `atoms` to be used in selectors\n\n  Sprinkles now uses vanilla-extract’s updated [`composeStyles`](https://github.com/vanilla-extract-css/vanilla-extract#composestyles) function internally, which means that atomic styles can be treated as if they were a single class within vanilla-extract selectors.\n\n  ```ts\n  // styles.css.ts\n  import { globalStyle } from '@vanilla-extract/css';\n  import { atoms } from './sprinkles.css.ts';\n\n  export const container = atoms({\n    padding: 'small'\n  });\n\n  globalStyle(`${container} *`, {\n    boxSizing: 'border-box'\n  });\n  ```\n\n### Patch Changes\n\n- Updated dependencies [[`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:\n  - @vanilla-extract/css@1.2.0\n\n## 0.4.4\n\n### Patch Changes\n\n- [#252](https://github.com/vanilla-extract-css/vanilla-extract/pull/252) [`b9b3451`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b9b3451d9bab49a712fae95c22b2ee9d8af5f2c5) Thanks [@graup](https://github.com/graup)! - Fix `Exported variable 'Box' has or is using name 'ResponsiveArray' from external module` error ([#250](https://github.com/vanilla-extract-css/vanilla-extract/issues/250))\n\n## 0.4.3\n\n### Patch Changes\n\n- [#210](https://github.com/vanilla-extract-css/vanilla-extract/pull/210) [`500eaad`](https://github.com/vanilla-extract-css/vanilla-extract/commit/500eaade897abd800163d2d8db3c679bc3776cf7) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix bug where `responsiveArray` with a length of 4 was considered invalid\n\n## 0.4.2\n\n### Patch Changes\n\n- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:\n  - @vanilla-extract/css@1.0.0\n\n## 0.4.1\n\n### Patch Changes\n\n- [#159](https://github.com/vanilla-extract-css/vanilla-extract/pull/159) [`ef22274`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ef22274cc83955072d4008fd3c79359844e666e9) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Always return `ConditionalValue` type from `normalizeValue` and `mapValue` functions\n\n## 0.4.0\n\n### Minor Changes\n\n- [#157](https://github.com/vanilla-extract-css/vanilla-extract/pull/157) [`ba65efc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ba65efce92c3034d6994c26f0e20eef0f98b94be) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `RequiredConditionalValue` type\n\n### Patch Changes\n\n- [#158](https://github.com/vanilla-extract-css/vanilla-extract/pull/158) [`98907f9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98907f9103078b45f862efc7e04b716061e9de93) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Ensure `normalizeConditionalValue` and `mapConditionalValue` return `RequiredConditionalValue` types when a `RequiredConditionalValue` type is provided\n\n- Updated dependencies [[`f5ab957`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f5ab957b34586886ef428b58de1f2b55b4ab65e0), [`ae532f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae532f5a112c0e89a510fea224b43c6706ce6ac2)]:\n  - @vanilla-extract/css@0.5.2\n\n## 0.3.2\n\n### Patch Changes\n\n- [#150](https://github.com/vanilla-extract-css/vanilla-extract/pull/150) [`e59002a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e59002ae75faeaeaa585b71eafca8ee1ebf85849) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Refactor responsive array type to use Tuple generic\n\n## 0.3.1\n\n### Patch Changes\n\n- [#139](https://github.com/vanilla-extract-css/vanilla-extract/pull/139) [`152a1c7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/152a1c7e3a29cc074f73c37d81428a75705057b9) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ignore undefined values in conditional objects\n\n## 0.3.0\n\n### Minor Changes\n\n- [#132](https://github.com/vanilla-extract-css/vanilla-extract/pull/132) [`4f92126`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4f92126c92d853f02e73ffadfed424b594e41166) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `createMapValueFn` and `createNormalizeValueFn` utilities and `ConditionalValue` type.\n\n### Patch Changes\n\n- Updated dependencies [[`ed76e45`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ed76e450038cb7cbaf12a511fda9e2a3a6d21b96), [`4f92126`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4f92126c92d853f02e73ffadfed424b594e41166)]:\n  - @vanilla-extract/css@0.5.0\n\n## 0.2.2\n\n### Patch Changes\n\n- [#100](https://github.com/vanilla-extract-css/vanilla-extract/pull/100) [`9edf2df`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9edf2dfc2fa05720d267732b88f07e0d53131ef3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow readonly arrays for responsive array properties\n\n## 0.2.1\n\n### Patch Changes\n\n- [#98](https://github.com/vanilla-extract-css/vanilla-extract/pull/98) [`45a6eef`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45a6eeff8548db3841615e38589f57cbd526ea8a) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix some minor type issues\n\n  - Better support passing config to `createAtomicStyles` that was not defined inline\n  - Remove array methods being exposed on properties using number arrays\n\n## 0.2.0\n\n### Minor Changes\n\n- [#81](https://github.com/vanilla-extract-css/vanilla-extract/pull/81) [`717ad60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/717ad60e8f6770246aaaedc1760791bb0e7d19cc) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add static `properties` set to atoms function\n\n  This allows runtime code to detect whether a given property can be handled by the atoms function or not.\n\n  This is useful when building a Box component with atoms available at the top level (e.g. `<Box padding=\"small\">`) since you'll need some way to filter atom props from non-atom props.\n\n## 0.1.2\n\n### Patch Changes\n\n- [#77](https://github.com/vanilla-extract-css/vanilla-extract/pull/77) [`63c01ad`](https://github.com/vanilla-extract-css/vanilla-extract/commit/63c01ada07dd268c8d3cbe62dcf1baa8842216f2) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve runtime errors\n\n  Sprinkles will now validate your `atoms` calls at runtime for a better developer experience. The validation code should be stripped from production bundles via a `process.env.NODE_ENV` check.\n\n  Example Error\n\n  ```bash\n  SprinklesError: \"paddingTop\" has no value \"xlarge\". Possible values are \"small\", \"medium\", \"large\"\n  ```\n\n## 0.1.1\n\n### Patch Changes\n\n- [#63](https://github.com/vanilla-extract-css/vanilla-extract/pull/63) [`2cecc8a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2cecc8af8634b71f217d713c5a9faf989b46e353) Thanks [@fnky](https://github.com/fnky)! - Allow theme vars to be passed to atomic properties\n\n* [#64](https://github.com/vanilla-extract-css/vanilla-extract/pull/64) [`5bee64f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5bee64f50753665b4c02bcc9fd8db115c42b35c9) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Support resolving falsey values for conditional atoms\n\n  Fixes bug where falsey values such as `opacity: 0` would not resolve classes via the conditional object or responsive array syntax.\n\n  ```ts\n  export const atoms = createAtomicStyles({\n    defaultCondition: 'mobile',\n    conditions: {\n      mobile: {},\n      desktop: {\n        '@media': 'screen and (min-width: 786px)'\n      }\n    },\n    responsiveArray: ['mobile', 'desktop'],\n    properties: {\n      opacity: [0, 1]\n    }\n  });\n  ```\n\n- [#59](https://github.com/vanilla-extract-css/vanilla-extract/pull/59) [`e999308`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e99930846ed2305544716942a5703a0b67c2df83) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix types for numbers as values\n\n- Updated dependencies [[`2cecc8a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2cecc8af8634b71f217d713c5a9faf989b46e353)]:\n  - @vanilla-extract/css@0.4.1\n\n## 0.1.0\n\n### Patch Changes\n\n- Updated dependencies [[`48c4a78`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48c4a7866a8361de712b89b06abb380bf4709656), [`2d98bcc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d98bccb40603585cf9eab70ff0afc52c33f803d)]:\n  - @vanilla-extract/css@0.4.0\n"
  },
  {
    "path": "packages/sprinkles/README.md",
    "content": "# 🍨 Sprinkles\n\n**Zero-runtime atomic CSS framework for [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)**\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind](https://tailwindcss.com), [Styled System](https://styled-system.com), etc.\n\n---\n\n**Compose sprinkles statically at build time.**\n\n```ts\n// styles.css.ts\n\nexport const className = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\n**Or compose them dynamically at runtime! 🏃‍♂️**\n\n```ts\n// app.ts\n\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n---\n\n🔥 &nbsp; Zero-runtime CSS-in-TypeScript with all styles generated at build time via [vanilla-extract.](https://vanilla-extract.style)\n\n🛠 &nbsp; Create your own custom set of atomic classes with declarative config.\n\n💪 &nbsp; Type-safe functional API for accessing sprinkles.\n\n🏃‍♂️ &nbsp; Compose sprinkles statically in `.css.ts` files, or dynamically at runtime (<0.5KB Gzip)\n\n🎨 &nbsp; Generate theme-based scales with CSS Variables using [vanilla-extract themes.](https://vanilla-extract.style/documentation/api/create-theme)\n\n✍️ &nbsp; Configure shorthands for common property combinations, e.g. `paddingX` / `paddingY`.\n\n🚦 &nbsp; Conditional sprinkles to target media/feature queries and selectors.\n\n✨ &nbsp; Scope conditions to individual properties.\n\n---\n\n🖥 &nbsp; [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/sprinkles.css.ts)\n\n---\n\n## Setup\n\n> 💡 Before starting, ensure you've set up [vanilla-extract.](https://github.com/vanilla-extract-css/vanilla-extract)\n\nInstall Sprinkles.\n\n```bash\n$ npm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\n\nconst space = {\n  'none': 0,\n  'small': '4px',\n  'medium': '8px',\n  'large': '16px',\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space,\n    // etc.\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems'],\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827',\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors,\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(responsiveProperties, colorProperties);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n**🎉 That's it — you’re ready to go!**\n\n## Usage\n\nYou can now use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row',\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700',\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection = Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({ display: 'flex', flexDirection })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [`style`](https://vanilla-extract.style/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n---\n\n⚛️ &nbsp; Using React? Turn your sprinkles into a `<Box>` component with 🍰 [Dessert Box.](https://github.com/TheMightyPenguin/dessert-box)\n\n---\n\n- [API](#api)\n  - [defineProperties](#defineproperties)\n    - [`properties`](#properties)\n    - [`shorthands`](#shorthands)\n    - [`conditions`](#conditions)\n    - [`defaultCondition`](#defaultcondition)\n    - [`responsiveArray`](#responsivearray)\n  - [createSprinkles](#createsprinkles)\n- [Utilities](#utilities)\n  - [createMapValueFn](#createmapvaluefn)\n  - [createNormalizeValueFn](#createnormalizevaluefn)\n- [Types](#types)\n  - [ConditionalValue](#conditionalvalue)\n  - [RequiredConditionalValue](#requiredconditionalvalue)\n- [Thanks](#thanks)\n- [License](#license)\n\n---\n\n## API\n\n### defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [`createSprinkles`](#createsprinkles) as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [`tailwindcss/colors.`](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)\n\n#### `properties`\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/api/create-theme) to configure themed values.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n#### `shorthands`\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n#### `conditions`\n\nDefine a set of media/feature queries for the provided properties.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\n#### `defaultCondition`\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: { '@media': '(prefers-color-scheme: light)' },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n#### `responsiveArray`\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n\n## Utilities\n\n### createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n### createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object stucture. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'block', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'block', desktop: 'block' }\n```\n\n## Types\n\n### ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles,](#createmapvaluefn) e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n### RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n---\n\n## Thanks\n\n- [Styled System](https://styled-system.com) for inspiring our approach to responsive props.\n- [Tailwind](https://tailwindcss.com) for teaching us to think utility-first.\n- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.\n\n## License\n\nMIT.\n"
  },
  {
    "path": "packages/sprinkles/createRuntimeSprinkles/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-sprinkles-createRuntimeSprinkles.cjs.js\",\n  \"module\": \"dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js\"\n}\n"
  },
  {
    "path": "packages/sprinkles/createUtils/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-sprinkles-createUtils.cjs.js\",\n  \"module\": \"dist/vanilla-extract-sprinkles-createUtils.esm.js\"\n}\n"
  },
  {
    "path": "packages/sprinkles/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/sprinkles\",\n  \"version\": \"1.6.5\",\n  \"description\": \"Zero-runtime atomic CSS framework for vanilla-extract\",\n  \"sideEffects\": false,\n  \"main\": \"dist/vanilla-extract-sprinkles.cjs.js\",\n  \"module\": \"dist/vanilla-extract-sprinkles.esm.js\",\n  \"types\": \"dist/vanilla-extract-sprinkles.cjs.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/vanilla-extract-sprinkles.cjs.d.ts\",\n      \"module\": \"./dist/vanilla-extract-sprinkles.esm.js\",\n      \"default\": \"./dist/vanilla-extract-sprinkles.cjs.js\"\n    },\n    \"./createRuntimeSprinkles\": {\n      \"types\": \"./createRuntimeSprinkles/dist/vanilla-extract-sprinkles.cjs.d.ts\",\n      \"module\": \"./createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js\",\n      \"default\": \"./createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.cjs.js\"\n    },\n    \"./createUtils\": {\n      \"types\": \"./createUtils/dist/vanilla-extract-sprinkles-createUtils.cjs.d.ts\",\n      \"module\": \"./createUtils/dist/vanilla-extract-sprinkles-createUtils.esm.js\",\n      \"default\": \"./createUtils/dist/vanilla-extract-sprinkles-createUtils.cjs.js\"\n    }\n  },\n  \"files\": [\n    \"/dist\",\n    \"/createRuntimeSprinkles\",\n    \"/createUtils\"\n  ],\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\",\n      \"createRuntimeSprinkles.ts\",\n      \"createUtils.ts\"\n    ]\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/sprinkles\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"peerDependencies\": {\n    \"@vanilla-extract/css\": \"^1.0.0\"\n  },\n  \"devDependencies\": {\n    \"@vanilla-extract/css\": \"workspace:^\"\n  }\n}\n"
  },
  {
    "path": "packages/sprinkles/src/createRuntimeSprinkles.ts",
    "content": "import {\n  createSprinkles as internalCreateSprinkles,\n  type SprinklesFn,\n} from './createSprinkles';\nimport type { SprinklesProperties } from './types';\n\nconst composeStyles = (classList: string) => classList;\n\nexport const createSprinkles = <\n  Args extends ReadonlyArray<SprinklesProperties>,\n>(\n  ...args: Args\n): SprinklesFn<Args> => internalCreateSprinkles(composeStyles)(...args);\n\nexport {\n  /** @deprecated - Use `createSprinkles` */\n  createSprinkles as createAtomsFn,\n};\n"
  },
  {
    "path": "packages/sprinkles/src/createSprinkles.ts",
    "content": "import type {\n  ResponsiveArrayByMaxLength,\n  ConditionalPropertyValue,\n  SprinklesProperties,\n  ConditionalWithResponsiveArrayProperty,\n  ConditionalProperty,\n  ShorthandProperty,\n  UnconditionalProperty,\n} from './types';\n\ntype ResponsiveArrayVariant<\n  RA extends { length: number },\n  Values extends string | number | symbol,\n> = ResponsiveArrayByMaxLength<RA['length'], Values | null>;\n\ntype ConditionalStyle<\n  Values extends { [key: string]: ConditionalPropertyValue },\n> =\n  | (Values[keyof Values]['defaultClass'] extends string ? keyof Values : never)\n  | {\n      [Condition in keyof Values[keyof Values]['conditions']]?: keyof Values;\n    }\n  | undefined;\n\ntype ConditionalStyleWithResponsiveArray<\n  Values extends { [key: string]: ConditionalPropertyValue },\n  RA extends { length: number },\n> = ConditionalStyle<Values> | ResponsiveArrayVariant<RA, keyof Values>;\n\ntype ChildSprinkleProps<Sprinkles extends SprinklesProperties['styles']> = {\n  [Prop in keyof Sprinkles]?: Sprinkles[Prop] extends ConditionalWithResponsiveArrayProperty\n    ? ConditionalStyleWithResponsiveArray<\n        Sprinkles[Prop]['values'],\n        Sprinkles[Prop]['responsiveArray']\n      >\n    : Sprinkles[Prop] extends ConditionalProperty\n      ? ConditionalStyle<Sprinkles[Prop]['values']>\n      : Sprinkles[Prop] extends ShorthandProperty\n        ? Sprinkles[Sprinkles[Prop]['mappings'][number]] extends ConditionalWithResponsiveArrayProperty\n          ? ConditionalStyleWithResponsiveArray<\n              Sprinkles[Sprinkles[Prop]['mappings'][number]]['values'],\n              Sprinkles[Sprinkles[Prop]['mappings'][number]]['responsiveArray']\n            >\n          : Sprinkles[Sprinkles[Prop]['mappings'][number]] extends ConditionalProperty\n            ? ConditionalStyle<\n                Sprinkles[Sprinkles[Prop]['mappings'][number]]['values']\n              >\n            : Sprinkles[Sprinkles[Prop]['mappings'][number]] extends UnconditionalProperty\n              ?\n                  | keyof Sprinkles[Sprinkles[Prop]['mappings'][number]]['values']\n                  | undefined\n              : never\n        : Sprinkles[Prop] extends UnconditionalProperty\n          ? keyof Sprinkles[Prop]['values'] | undefined\n          : never;\n};\n\ntype SprinkleProps<Args extends ReadonlyArray<any>> = Args extends [\n  infer L,\n  ...infer R,\n]\n  ? (L extends SprinklesProperties ? ChildSprinkleProps<L['styles']> : never) &\n      SprinkleProps<R>\n  : {};\n\nexport type SprinklesFn<Args extends ReadonlyArray<SprinklesProperties>> = ((\n  props: SprinkleProps<Args>,\n) => string) & { properties: Set<keyof SprinkleProps<Args>> };\n\nexport const createSprinkles =\n  <Args extends ReadonlyArray<SprinklesProperties>>(\n    composeStyles: (classList: string) => string,\n  ) =>\n  (...args: Args): SprinklesFn<Args> => {\n    const sprinklesStyles = Object.assign({}, ...args.map((a) => a.styles));\n    const sprinklesKeys = Object.keys(sprinklesStyles) as Array<\n      keyof SprinkleProps<Args>\n    >;\n    const shorthandNames = sprinklesKeys.filter(\n      (property) => 'mappings' in sprinklesStyles[property],\n    );\n\n    const sprinklesFn = (props: any) => {\n      const classNames = [];\n      const shorthands: any = {};\n      const nonShorthands: any = { ...props };\n      let hasShorthands = false;\n\n      for (const shorthand of shorthandNames) {\n        const value = props[shorthand];\n        if (value != null) {\n          const sprinkle = sprinklesStyles[shorthand];\n          hasShorthands = true;\n          for (const propMapping of sprinkle.mappings) {\n            shorthands[propMapping] = value;\n            if (nonShorthands[propMapping] == null) {\n              delete nonShorthands[propMapping];\n            }\n          }\n        }\n      }\n\n      const finalProps = hasShorthands\n        ? { ...shorthands, ...nonShorthands }\n        : props;\n\n      for (const prop in finalProps) {\n        const propValue = finalProps[prop];\n        const sprinkle = sprinklesStyles[prop];\n        try {\n          if (sprinkle.mappings) {\n            // Skip shorthands\n            continue;\n          }\n\n          if (typeof propValue === 'string' || typeof propValue === 'number') {\n            if (process.env.NODE_ENV !== 'production') {\n              if (!sprinkle.values[propValue].defaultClass) {\n                throw new Error();\n              }\n            }\n            classNames.push(sprinkle.values[propValue].defaultClass);\n          } else if (Array.isArray(propValue)) {\n            for (\n              let responsiveIndex = 0;\n              responsiveIndex < propValue.length;\n              responsiveIndex++\n            ) {\n              const responsiveValue = propValue[responsiveIndex];\n\n              if (responsiveValue != null) {\n                const conditionName = sprinkle.responsiveArray[responsiveIndex];\n\n                if (process.env.NODE_ENV !== 'production') {\n                  if (\n                    !sprinkle.values[responsiveValue].conditions[conditionName]\n                  ) {\n                    throw new Error();\n                  }\n                }\n\n                classNames.push(\n                  sprinkle.values[responsiveValue].conditions[conditionName],\n                );\n              }\n            }\n          } else {\n            for (const conditionName in propValue) {\n              // Conditional style\n              const value = propValue[conditionName];\n\n              if (value != null) {\n                if (process.env.NODE_ENV !== 'production') {\n                  if (!sprinkle.values[value].conditions[conditionName]) {\n                    throw new Error();\n                  }\n                }\n                classNames.push(\n                  sprinkle.values[value].conditions[conditionName],\n                );\n              }\n            }\n          }\n        } catch (e) {\n          if (process.env.NODE_ENV !== 'production') {\n            class SprinklesError extends Error {\n              constructor(message: string) {\n                super(message);\n                this.name = 'SprinklesError';\n              }\n            }\n\n            const invalidPropValue = (\n              prop: string,\n              value: string | number,\n              possibleValues: Array<string | number>,\n            ) => {\n              throw new SprinklesError(\n                `\"${prop}\" has no value ${format(\n                  value,\n                )}. Possible values are ${Object.keys(possibleValues)\n                  .map(format)\n                  .join(', ')}`,\n              );\n            };\n\n            if (!sprinkle) {\n              throw new SprinklesError(`\"${prop}\" is not a valid sprinkle`);\n            }\n\n            if (\n              typeof propValue === 'string' ||\n              typeof propValue === 'number'\n            ) {\n              if (!(propValue in sprinkle.values)) {\n                invalidPropValue(prop, propValue, sprinkle.values);\n              }\n              if (!sprinkle.values[propValue].defaultClass) {\n                throw new SprinklesError(\n                  `\"${prop}\" has no default condition. You must specify which conditions to target explicitly. Possible options are ${Object.keys(\n                    sprinkle.values[propValue].conditions,\n                  )\n                    .map(format)\n                    .join(', ')}`,\n                );\n              }\n            }\n\n            if (typeof propValue === 'object') {\n              if (\n                !(\n                  'conditions' in\n                  sprinkle.values[Object.keys(sprinkle.values)[0]]\n                )\n              ) {\n                throw new SprinklesError(\n                  `\"${prop}\" is not a conditional property`,\n                );\n              }\n\n              if (Array.isArray(propValue)) {\n                if (!('responsiveArray' in sprinkle)) {\n                  throw new SprinklesError(\n                    `\"${prop}\" does not support responsive arrays`,\n                  );\n                }\n\n                const breakpointCount = sprinkle.responsiveArray.length;\n                if (breakpointCount < propValue.length) {\n                  throw new SprinklesError(\n                    `\"${prop}\" only supports up to ${breakpointCount} breakpoints. You passed ${propValue.length}`,\n                  );\n                }\n\n                for (const responsiveValue of propValue) {\n                  if (!sprinkle.values[responsiveValue]) {\n                    invalidPropValue(prop, responsiveValue, sprinkle.values);\n                  }\n                }\n              } else {\n                for (const conditionName in propValue) {\n                  const value = propValue[conditionName];\n\n                  if (value != null) {\n                    if (!sprinkle.values[value]) {\n                      invalidPropValue(prop, value, sprinkle.values);\n                    }\n\n                    if (!sprinkle.values[value].conditions[conditionName]) {\n                      throw new SprinklesError(\n                        `\"${prop}\" has no condition named ${format(\n                          conditionName,\n                        )}. Possible values are ${Object.keys(\n                          sprinkle.values[value].conditions,\n                        )\n                          .map(format)\n                          .join(', ')}`,\n                      );\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          throw e;\n        }\n      }\n\n      return composeStyles(classNames.join(' '));\n    };\n\n    return Object.assign(sprinklesFn, {\n      properties: new Set(sprinklesKeys),\n    });\n  };\n\nfunction format(v: string | number) {\n  return typeof v === 'string' ? `\"${v}\"` : v;\n}\n"
  },
  {
    "path": "packages/sprinkles/src/createUtils.ts",
    "content": "import { addRecipe } from '@vanilla-extract/css/recipe';\nimport type {\n  ResponsiveArrayByMaxLength,\n  RequiredResponsiveArrayByMaxLength,\n} from './types';\n\ntype ExtractValue<\n  Value extends\n    | string\n    | number\n    | boolean\n    | Partial<Record<string, string | number | boolean>>\n    | ResponsiveArrayByMaxLength<number, string | number | boolean | null>,\n> =\n  Value extends ResponsiveArrayByMaxLength<\n    number,\n    string | number | boolean | null\n  >\n    ? NonNullable<Value[number]>\n    : Value extends Partial<Record<string, string | number | boolean>>\n      ? NonNullable<Value[keyof Value]>\n      : Value;\n\ntype Conditions<ConditionName extends string> = {\n  conditions: {\n    defaultCondition: ConditionName | false;\n    conditionNames: Array<ConditionName>;\n    responsiveArray?: Array<ConditionName>;\n  };\n};\n\ntype ExtractDefaultCondition<SprinklesProperties extends Conditions<string>> =\n  SprinklesProperties['conditions']['defaultCondition'];\n\ntype ExtractConditionNames<SprinklesProperties extends Conditions<string>> =\n  SprinklesProperties['conditions']['conditionNames'][number];\n\nexport type ConditionalValue<\n  SprinklesProperties extends Conditions<string>,\n  Value extends string | number | boolean,\n> =\n  | (ExtractDefaultCondition<SprinklesProperties> extends false ? never : Value)\n  | Partial<Record<ExtractConditionNames<SprinklesProperties>, Value>>\n  | (SprinklesProperties['conditions']['responsiveArray'] extends {\n      length: number;\n    }\n      ? ResponsiveArrayByMaxLength<\n          SprinklesProperties['conditions']['responsiveArray']['length'],\n          Value\n        >\n      : never);\n\ntype RequiredConditionalObject<\n  RequiredConditionName extends string,\n  OptionalConditionNames extends string,\n  Value extends string | number | boolean,\n> = Record<RequiredConditionName, Value> &\n  Partial<Record<OptionalConditionNames, Value>>;\n\nexport type RequiredConditionalValue<\n  SprinklesProperties extends Conditions<string>,\n  Value extends string | number | boolean,\n> =\n  ExtractDefaultCondition<SprinklesProperties> extends false\n    ? never\n    :\n        | Value\n        | RequiredConditionalObject<\n            Exclude<ExtractDefaultCondition<SprinklesProperties>, false>,\n            Exclude<\n              ExtractConditionNames<SprinklesProperties>,\n              ExtractDefaultCondition<SprinklesProperties>\n            >,\n            Value\n          >\n        | (SprinklesProperties['conditions']['responsiveArray'] extends {\n            length: number;\n          }\n            ? RequiredResponsiveArrayByMaxLength<\n                SprinklesProperties['conditions']['responsiveArray']['length'],\n                Value\n              >\n            : never);\n\nexport function createNormalizeValueFn<\n  SprinklesProperties extends Conditions<string>,\n>(\n  properties: SprinklesProperties,\n): <Value extends string | number | boolean>(\n  value: ConditionalValue<SprinklesProperties, Value>,\n) => Partial<Record<ExtractConditionNames<SprinklesProperties>, Value>> {\n  const { conditions } = properties;\n\n  if (!conditions) {\n    throw new Error('Styles have no conditions');\n  }\n\n  function normalizeValue(value: any) {\n    if (\n      typeof value === 'string' ||\n      typeof value === 'number' ||\n      typeof value === 'boolean'\n    ) {\n      if (!conditions.defaultCondition) {\n        throw new Error('No default condition');\n      }\n\n      return { [conditions.defaultCondition]: value };\n    }\n\n    if (Array.isArray(value)) {\n      if (!('responsiveArray' in conditions)) {\n        throw new Error('Responsive arrays are not supported');\n      }\n\n      const returnValue: Record<string, string> = {};\n      for (const index in conditions.responsiveArray as Array<string>) {\n        if (value[index] != null) {\n          returnValue[(conditions.responsiveArray as Array<string>)[index]] =\n            value[index];\n        }\n      }\n\n      return returnValue;\n    }\n\n    return value;\n  }\n\n  return addRecipe(normalizeValue, {\n    importPath: '@vanilla-extract/sprinkles/createUtils',\n    importName: 'createNormalizeValueFn',\n    args: [{ conditions: properties.conditions }],\n  });\n}\n\nexport function createMapValueFn<\n  SprinklesProperties extends Conditions<string>,\n>(\n  properties: SprinklesProperties,\n): <\n  OutputValue extends string | number | boolean | null | undefined,\n  Value extends ConditionalValue<\n    SprinklesProperties,\n    string | number | boolean\n  >,\n>(\n  value: Value,\n  fn: (\n    inputValue: ExtractValue<Value>,\n    key: ExtractConditionNames<SprinklesProperties>,\n  ) => OutputValue,\n) => Value extends string | number | boolean\n  ? OutputValue\n  : Partial<Record<ExtractConditionNames<SprinklesProperties>, OutputValue>> {\n  const { conditions } = properties;\n\n  if (!conditions) {\n    throw new Error('Styles have no conditions');\n  }\n\n  const normalizeValue = createNormalizeValueFn(properties);\n\n  function mapValue(value: any, mapFn: any) {\n    if (\n      typeof value === 'string' ||\n      typeof value === 'number' ||\n      typeof value === 'boolean'\n    ) {\n      if (!conditions.defaultCondition) {\n        throw new Error('No default condition');\n      }\n\n      return mapFn(value, conditions.defaultCondition);\n    }\n\n    const normalizedObject = Array.isArray(value)\n      ? normalizeValue(value as any)\n      : value;\n\n    const mappedObject: Record<string, string> = {};\n\n    for (const key in normalizedObject) {\n      if (normalizedObject[key] != null) {\n        mappedObject[key] = mapFn(normalizedObject[key], key);\n      }\n    }\n\n    return mappedObject;\n  }\n\n  return addRecipe(mapValue, {\n    importPath: '@vanilla-extract/sprinkles/createUtils',\n    importName: 'createMapValueFn',\n    args: [{ conditions: properties.conditions }],\n  });\n}\n"
  },
  {
    "path": "packages/sprinkles/src/index.ts",
    "content": "import {\n  style,\n  composeStyles,\n  type CSSProperties,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { addRecipe } from '@vanilla-extract/css/recipe';\nimport { hasFileScope } from '@vanilla-extract/css/fileScope';\n\nimport {\n  type SprinklesFn,\n  createSprinkles as internalCreateSprinkles,\n} from './createSprinkles';\nimport type { SprinklesProperties, ResponsiveArrayConfig } from './types';\n\nexport { createNormalizeValueFn, createMapValueFn } from './createUtils';\nexport type { ConditionalValue, RequiredConditionalValue } from './createUtils';\n\nexport type { ResponsiveArray, SprinklesProperties } from './types';\n\ntype ConditionKey = '@media' | '@supports' | '@container' | 'selector';\ntype Condition = Partial<Record<ConditionKey, string>>;\n\ntype BaseConditions = { [conditionName: string]: Condition };\n\ntype AtomicCSSProperties = {\n  [Property in keyof CSSProperties]?:\n    | Record<string, CSSProperties[Property] | Omit<StyleRule, ConditionKey>>\n    | ReadonlyArray<CSSProperties[Property]>;\n};\n\ntype AtomicCustomProperties = Record<\n  string,\n  Record<string | number, Omit<StyleRule, ConditionKey>>\n>;\n\ntype AtomicProperties = AtomicCSSProperties | AtomicCustomProperties;\n\ntype ShorthandOptions<\n  Properties extends AtomicProperties,\n  Shorthands extends { [shorthandName: string]: Array<keyof Properties> },\n> = {\n  shorthands: Shorthands;\n};\n\ntype UnconditionalAtomicOptions<Properties extends AtomicProperties> = {\n  '@layer'?: string;\n  properties: Properties;\n};\n\ntype ResponsiveArrayOptions<\n  Conditions extends { [conditionName: string]: Condition },\n  ResponsiveLength extends number,\n> = {\n  responsiveArray: ResponsiveArrayConfig<keyof Conditions> & {\n    length: ResponsiveLength;\n  };\n};\n\ntype ConditionalAtomicOptions<\n  Properties extends AtomicProperties,\n  Conditions extends { [conditionName: string]: Condition },\n  DefaultCondition extends keyof Conditions | Array<keyof Conditions> | false,\n> = UnconditionalAtomicOptions<Properties> & {\n  conditions: Conditions;\n  defaultCondition: DefaultCondition;\n};\n\ntype Values<Property, Result> = {\n  [Value in Property extends ReadonlyArray<any>\n    ? Property[number]\n    : Property extends Array<any>\n      ? Property[number]\n      : keyof Property]: Result;\n};\n\ntype UnconditionalAtomicStyles<Properties extends AtomicProperties> = {\n  conditions: never;\n  styles: {\n    [Property in keyof Properties]: {\n      values: Values<Properties[Property], { defaultClass: string }>;\n    };\n  };\n};\n\ntype ConditionalAtomicStyles<\n  Properties extends AtomicProperties,\n  Conditions extends { [conditionName: string]: Condition },\n  DefaultCondition extends keyof Conditions | Array<keyof Conditions> | false,\n> = {\n  conditions: {\n    defaultCondition: DefaultCondition;\n    conditionNames: Array<keyof Conditions>;\n  };\n  styles: {\n    [Property in keyof Properties]: {\n      values: Values<\n        Properties[Property],\n        {\n          defaultClass: DefaultCondition extends false ? undefined : string;\n          conditions: {\n            [Rule in keyof Conditions]: string;\n          };\n        }\n      >;\n    };\n  };\n};\n\ntype ConditionalWithResponsiveArrayAtomicStyles<\n  Properties extends AtomicProperties,\n  Conditions extends { [conditionName: string]: Condition },\n  ResponsiveLength extends number,\n  DefaultCondition extends keyof Conditions | Array<keyof Conditions> | false,\n> = {\n  conditions: {\n    defaultCondition: DefaultCondition;\n    conditionNames: Array<keyof Conditions>;\n    responsiveArray: Array<keyof Conditions> & { length: ResponsiveLength };\n  };\n  styles: {\n    [Property in keyof Properties]: {\n      responsiveArray: Array<keyof Conditions> & { length: ResponsiveLength };\n      values: Values<\n        Properties[Property],\n        {\n          defaultClass: DefaultCondition extends false ? undefined : string;\n          conditions: {\n            [Rule in keyof Conditions]: string;\n          };\n        }\n      >;\n    };\n  };\n};\n\ntype ShorthandAtomicStyles<\n  Shorthands extends {\n    [shorthandName: string]: Array<string | number | symbol>;\n  },\n> = {\n  styles: {\n    [Shorthand in keyof Shorthands]: {\n      mappings: Shorthands[Shorthand];\n    };\n  };\n};\n\n// Conditional + Shorthands + ResponsiveArray\nexport function defineProperties<\n  Properties extends AtomicProperties,\n  ResponsiveLength extends number,\n  Conditions extends BaseConditions,\n  Shorthands extends { [shorthandName: string]: Array<keyof Properties> },\n  DefaultCondition extends keyof Conditions | Array<keyof Conditions> | false,\n>(\n  options: ConditionalAtomicOptions<Properties, Conditions, DefaultCondition> &\n    ShorthandOptions<Properties, Shorthands> &\n    ResponsiveArrayOptions<Conditions, ResponsiveLength>,\n): ConditionalWithResponsiveArrayAtomicStyles<\n  Properties,\n  Conditions,\n  ResponsiveLength,\n  DefaultCondition\n> &\n  ShorthandAtomicStyles<Shorthands>;\n// Conditional + Shorthands\nexport function defineProperties<\n  Properties extends AtomicProperties,\n  Conditions extends BaseConditions,\n  Shorthands extends { [shorthandName: string]: Array<keyof Properties> },\n  DefaultCondition extends keyof Conditions | Array<keyof Conditions> | false,\n>(\n  options: ConditionalAtomicOptions<Properties, Conditions, DefaultCondition> &\n    ShorthandOptions<Properties, Shorthands>,\n): ConditionalAtomicStyles<Properties, Conditions, DefaultCondition> &\n  ShorthandAtomicStyles<Shorthands>;\n// Conditional + ResponsiveArray\nexport function defineProperties<\n  Properties extends AtomicProperties,\n  Conditions extends BaseConditions,\n  ResponsiveLength extends number,\n  DefaultCondition extends keyof Conditions | Array<keyof Conditions> | false,\n>(\n  options: ConditionalAtomicOptions<Properties, Conditions, DefaultCondition> &\n    ResponsiveArrayOptions<Conditions, ResponsiveLength>,\n): ConditionalWithResponsiveArrayAtomicStyles<\n  Properties,\n  Conditions,\n  ResponsiveLength,\n  DefaultCondition\n>;\n// Conditional\nexport function defineProperties<\n  Properties extends AtomicProperties,\n  Conditions extends BaseConditions,\n  DefaultCondition extends keyof Conditions | Array<keyof Conditions> | false,\n>(\n  options: ConditionalAtomicOptions<Properties, Conditions, DefaultCondition>,\n): ConditionalAtomicStyles<Properties, Conditions, DefaultCondition>;\n// Unconditional + Shorthands\nexport function defineProperties<\n  Properties extends AtomicProperties,\n  Shorthands extends { [shorthandName: string]: Array<keyof Properties> },\n>(\n  options: UnconditionalAtomicOptions<Properties> &\n    ShorthandOptions<Properties, Shorthands>,\n): UnconditionalAtomicStyles<Properties> & ShorthandAtomicStyles<Shorthands>;\n// Unconditional\nexport function defineProperties<Properties extends AtomicProperties>(\n  options: UnconditionalAtomicOptions<Properties>,\n): UnconditionalAtomicStyles<Properties>;\nexport function defineProperties(options: any): any {\n  let styles: any =\n    'shorthands' in options\n      ? Object.fromEntries(\n          Object.entries(options.shorthands).map(([prop, mappings]) => [\n            prop,\n            { mappings },\n          ]),\n        )\n      : {};\n\n  for (const key in options.properties) {\n    const property = options.properties[key as keyof typeof options.properties];\n    styles[key] = {\n      values: {},\n    };\n\n    if ('responsiveArray' in options) {\n      styles[key].responsiveArray = options.responsiveArray;\n    }\n\n    const processValue = (\n      valueName: keyof typeof property,\n      value: string | number | StyleRule,\n    ) => {\n      if ('conditions' in options) {\n        styles[key].values[valueName] = {\n          conditions: {},\n        };\n\n        const defaultConditions = options.defaultCondition\n          ? Array.isArray(options.defaultCondition)\n            ? options.defaultCondition\n            : [options.defaultCondition]\n          : [];\n\n        const defaultClasses = [];\n\n        for (const conditionName in options.conditions) {\n          let styleValue: StyleRule =\n            typeof value === 'object' ? value : { [key]: value };\n\n          const condition =\n            options.conditions[\n              conditionName as keyof typeof options.conditions\n            ];\n\n          if (condition['@supports']) {\n            styleValue = {\n              '@supports': {\n                [condition['@supports']]: styleValue,\n              },\n            };\n          }\n\n          if (condition['@container']) {\n            styleValue = {\n              '@container': {\n                [condition['@container']]: styleValue,\n              },\n            };\n          }\n\n          if (condition['@media']) {\n            styleValue = {\n              '@media': {\n                [condition['@media']]: styleValue,\n              },\n            };\n          }\n\n          if (condition.selector) {\n            styleValue = {\n              selectors: {\n                [condition.selector]: styleValue,\n              },\n            };\n          }\n\n          if (options['@layer']) {\n            styleValue = {\n              '@layer': {\n                [options['@layer']]: styleValue,\n              },\n            };\n          }\n\n          const className = style(\n            styleValue,\n            `${key}_${String(valueName)}_${conditionName}`,\n          );\n\n          styles[key].values[valueName].conditions[conditionName] = className;\n\n          if (defaultConditions.indexOf(conditionName) > -1) {\n            defaultClasses.push(className);\n          }\n        }\n\n        if (defaultClasses.length > 0) {\n          styles[key].values[valueName].defaultClass = defaultClasses.join(' ');\n        }\n      } else {\n        let styleValue: StyleRule =\n          typeof value === 'object' ? value : { [key]: value };\n\n        if (options['@layer']) {\n          styleValue = {\n            '@layer': {\n              [options['@layer']]: styleValue,\n            },\n          };\n        }\n\n        styles[key].values[valueName] = {\n          defaultClass: style(styleValue, `${key}_${String(valueName)}`),\n        };\n      }\n    };\n\n    if (Array.isArray(property)) {\n      for (const value of property) {\n        processValue(value, value);\n      }\n    } else {\n      for (const valueName in property) {\n        const value = property[valueName];\n        processValue(valueName, value);\n      }\n    }\n  }\n\n  const conditions =\n    'conditions' in options\n      ? {\n          defaultCondition: options.defaultCondition,\n          conditionNames: Object.keys(options.conditions),\n          responsiveArray: options.responsiveArray,\n        }\n      : undefined;\n\n  return { conditions, styles };\n}\n\nconst mockComposeStyles = (classList: string) => classList;\n\nexport function createSprinkles<\n  Args extends ReadonlyArray<SprinklesProperties>,\n>(...config: Args): SprinklesFn<Args> {\n  // When using Sprinkles with the runtime (e.g. within a jest test)\n  // `style` can be called (only for composition) outside of a fileScope.\n  // Checking we're within a fileScope ensures this doesn't blow up and is\n  // safe as compositions don't make sense at runtime\n  const sprinkles = internalCreateSprinkles(\n    hasFileScope() ? composeStyles : mockComposeStyles,\n  )(...config);\n\n  return addRecipe(sprinkles, {\n    importPath: '@vanilla-extract/sprinkles/createRuntimeSprinkles',\n    importName: 'createSprinkles',\n    args: config,\n  });\n}\n\nexport {\n  /** @deprecated - Use `defineProperties` */\n  defineProperties as createAtomicStyles,\n  /** @deprecated - Use `createSprinkles` */\n  createSprinkles as createAtomsFn,\n};\n"
  },
  {
    "path": "packages/sprinkles/src/types.ts",
    "content": "export interface ResponsiveArray<\n  Length extends number,\n  Value,\n> extends ReadonlyArray<Value> {\n  0: Value;\n  length: Length;\n}\n\nexport interface RequiredResponsiveArray<\n  Length extends number,\n  Value,\n> extends ReadonlyArray<Value> {\n  0: Exclude<Value, null>;\n  length: Length;\n}\n\nexport type ResponsiveArrayConfig<Value> = ResponsiveArray<\n  2 | 3 | 4 | 5 | 6 | 7 | 8,\n  Value\n>;\n\nexport type ResponsiveArrayByMaxLength<MaxLength extends number, Value> = [\n  never,\n  ResponsiveArray<1, Value | null>,\n  ResponsiveArray<1 | 2, Value | null>,\n  ResponsiveArray<1 | 2 | 3, Value | null>,\n  ResponsiveArray<1 | 2 | 3 | 4, Value | null>,\n  ResponsiveArray<1 | 2 | 3 | 4 | 5, Value | null>,\n  ResponsiveArray<1 | 2 | 3 | 4 | 5 | 6, Value | null>,\n  ResponsiveArray<1 | 2 | 3 | 4 | 5 | 6 | 7, Value | null>,\n  ResponsiveArray<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8, Value | null>,\n][MaxLength];\n\nexport type RequiredResponsiveArrayByMaxLength<\n  MaxLength extends number,\n  Value,\n> = [\n  never,\n  RequiredResponsiveArray<1, Value | null>,\n  RequiredResponsiveArray<1 | 2, Value | null>,\n  RequiredResponsiveArray<1 | 2 | 3, Value | null>,\n  RequiredResponsiveArray<1 | 2 | 3 | 4, Value | null>,\n  RequiredResponsiveArray<1 | 2 | 3 | 4 | 5, Value | null>,\n  RequiredResponsiveArray<1 | 2 | 3 | 4 | 5 | 6, Value | null>,\n  RequiredResponsiveArray<1 | 2 | 3 | 4 | 5 | 6 | 7, Value | null>,\n  RequiredResponsiveArray<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8, Value | null>,\n][MaxLength];\n\nexport type ConditionalPropertyValue = {\n  defaultClass: string | undefined;\n  conditions: {\n    [conditionName: string]: string;\n  };\n};\n\nexport type ConditionalWithResponsiveArrayProperty = {\n  responsiveArray: Array<string>;\n  values: {\n    [valueName: string]: ConditionalPropertyValue;\n  };\n};\n\nexport type ConditionalProperty = {\n  values: {\n    [valueName: string]: ConditionalPropertyValue;\n  };\n};\n\nexport type UnconditionalProperty = {\n  values: {\n    [valueName: string]: {\n      defaultClass: string;\n    };\n  };\n};\n\nexport type ShorthandProperty = {\n  mappings: Array<string>;\n};\n\nexport type SprinklesProperties = {\n  styles: {\n    [property: string]:\n      | ConditionalWithResponsiveArrayProperty\n      | ConditionalProperty\n      | ShorthandProperty\n      | UnconditionalProperty;\n  };\n};\n\n/** @deprecated - Use `SprinklesProperties` */\nexport type AtomicStyles = SprinklesProperties;\n"
  },
  {
    "path": "packages/turbopack-plugin/CHANGELOG.md",
    "content": "# @vanilla-extract/turbopack-plugin\n\n## 0.1.2\n\n### Patch Changes\n\n- Updated dependencies [[`b066d1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b066d1c253ee09f2967bfddd7b6762f5dfa2d7d7)]:\n  - @vanilla-extract/compiler@0.6.0\n\n## 0.1.1\n\n### Patch Changes\n\n- Updated dependencies [[`e29f242`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e29f242953fcb46315cebe5b3374a5a1f89d93af)]:\n  - @vanilla-extract/compiler@0.5.0\n\n## 0.1.0\n\n### Minor Changes\n\n- [#1686](https://github.com/vanilla-extract-css/vanilla-extract/pull/1686) [`1a63a60`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1a63a600b7a707f9317ce5f6607998eba4eb9c99) Thanks [@askoufis](https://github.com/askoufis)! - Initial release\n\n### Patch Changes\n\n- Updated dependencies [[`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1), [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1), [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1)]:\n  - @vanilla-extract/compiler@0.4.0\n  - @vanilla-extract/integration@8.0.8\n"
  },
  {
    "path": "packages/turbopack-plugin/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/turbopack-plugin\",\n  \"version\": \"0.1.2\",\n  \"description\": \"Turbopack loader for vanilla-extract\",\n  \"main\": \"dist/vanilla-extract-turbopack-plugin.cjs.js\",\n  \"module\": \"dist/vanilla-extract-turbopack-plugin.esm.js\",\n  \"types\": \"dist/vanilla-extract-turbopack-plugin.cjs.d.ts\",\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/turbopack-plugin\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@swc/core\": \"^1.13.5\",\n    \"@vanilla-extract/compiler\": \"workspace:^\",\n    \"@vanilla-extract/integration\": \"workspace:^\"\n  },\n  \"devDependencies\": {\n    \"next\": \"12.3.4\",\n    \"vite\": \"^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0\"\n  },\n  \"peerDependencies\": {\n    \"next\": \">=12.1.7\"\n  }\n}\n"
  },
  {
    "path": "packages/turbopack-plugin/src/index.test.ts",
    "content": "import { afterEach, describe, expect, it } from 'vitest';\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport { deserializeCss } from '@vanilla-extract/integration';\nimport turbopackVanillaExtractLoader, {\n  type TurboLoaderContext,\n  type TurboLoaderOptions,\n  cleanupSharedCompiler,\n} from './index';\n\nconst testDir = path.join(process.cwd(), 'fixtures/next-16-app-pages-router');\n\n// for CI testing, 10 iterations is fine\n// for local testing, issues can be *very* rare since this is a race condition\n// for most of my testing I used 1000 iterations\nconst iterations = 10;\nconst timeout = iterations * 250;\n\ndescribe('turbopack-plugin stress test', () => {\n  afterEach(() => {\n    cleanupSharedCompiler();\n  });\n\n  it(\n    'should handle rapid entry updates correctly',\n    async () => {\n      const mockContext: TurboLoaderContext<TurboLoaderOptions> = {\n        rootContext: testDir,\n        resourcePath: path.join(testDir, 'style.css.ts'),\n        getOptions: () => ({\n          identifiers: 'short',\n          outputCss: true,\n          nextEnv: {},\n        }),\n        getResolve: () => async (context: string, request: string) => {\n          // Simplified resolver that just returns the request if it's relative,\n          // or null if we can't handle it. For this test, we don't need much.\n          if (request.startsWith('.')) {\n            return path.resolve(context, request);\n          }\n          return request;\n        },\n        fs: {\n          readFile: fs.readFile,\n        },\n      };\n\n      for (let i = 0; i < iterations; i++) {\n        const uniqueId = crypto.randomUUID();\n        const fileContent = `\n          import { style } from '@vanilla-extract/css';\n          \n          export const myStyle = style({\n            content: \"${uniqueId}\"\n          });\n        `;\n\n        fs.writeFileSync(mockContext.resourcePath, fileContent);\n\n        const result = await turbopackVanillaExtractLoader.call(mockContext);\n\n        expect(result).toContain(\n          '@vanilla-extract/css/vanilla.virtual.css?ve-css=',\n        );\n        const match = result.match(\n          /import '@vanilla-extract\\/css\\/vanilla\\.virtual\\.css\\?ve-css=([^']+)';/,\n        );\n        expect(match).toBeTruthy();\n\n        if (match) {\n          const encodedCss = decodeURIComponent(match[1]);\n          const decodedCss = await deserializeCss(encodedCss);\n          expect(decodedCss).toContain(`content: \"${uniqueId}\"`);\n        }\n      }\n\n      fs.rmSync(mockContext.resourcePath);\n    },\n    timeout,\n  );\n\n  it(\n    'should handle rapid dependency updates correctly',\n    async () => {\n      const mockContext: TurboLoaderContext<TurboLoaderOptions> = {\n        rootContext: testDir,\n        resourcePath: path.join(testDir, 'style.css.ts'),\n        getOptions: () => ({\n          identifiers: 'short',\n          outputCss: true,\n          nextEnv: {},\n        }),\n        getResolve: () => async (context: string, request: string) => {\n          // Simplified resolver that just returns the request if it's relative,\n          // or null if we can't handle it. For this test, we don't need much.\n          if (request.startsWith('.')) {\n            return path.resolve(context, request);\n          }\n          return request;\n        },\n        fs: {\n          readFile: fs.readFile,\n        },\n      };\n\n      for (let i = 0; i < iterations; i++) {\n        const uniqueId = crypto.randomUUID();\n        const fileDependency = `\n          export const randomId = \"${uniqueId}\";\n        `;\n        const fileContent = `\n          import { style } from '@vanilla-extract/css';\n          import { randomId } from './dependency.ts';\n          \n          export const myStyle = style({\n            content: randomId\n          });\n        `;\n\n        fs.writeFileSync(path.join(testDir, 'dependency.ts'), fileDependency);\n        if (i === 0)\n          fs.writeFileSync(path.join(testDir, 'style.css.ts'), fileContent);\n\n        const result = await turbopackVanillaExtractLoader.call(mockContext);\n\n        expect(result).toContain(\n          '@vanilla-extract/css/vanilla.virtual.css?ve-css=',\n        );\n        const match = result.match(\n          /import '@vanilla-extract\\/css\\/vanilla\\.virtual\\.css\\?ve-css=([^']+)';/,\n        );\n        expect(match).toBeTruthy();\n\n        if (match) {\n          const encodedCss = decodeURIComponent(match[1]);\n          const decodedCss = await deserializeCss(encodedCss);\n          expect(decodedCss).toContain(`content: \"${uniqueId}\"`);\n        }\n      }\n\n      fs.rmSync(path.join(testDir, 'dependency.ts'));\n      fs.rmSync(mockContext.resourcePath);\n    },\n    timeout,\n  );\n});\n"
  },
  {
    "path": "packages/turbopack-plugin/src/index.ts",
    "content": "import {\n  createCompiler,\n  type Compiler as VeCompiler,\n} from '@vanilla-extract/compiler';\nimport {\n  deserializeCss,\n  serializeCss,\n  type IdentifierOption,\n} from '@vanilla-extract/integration';\nimport * as path from 'node:path';\nimport { createNextFontVePlugin } from './next-font/plugin';\nimport type fs from 'node:fs';\nimport { injectFontImports } from './next-font/inject';\n\nexport type TurboLoaderContext<OptionsType> = {\n  getOptions: {\n    (): OptionsType;\n  };\n  getResolve: (options: unknown) => {\n    (context: string, request: string): Promise<string>;\n  };\n\n  fs: {\n    readFile: typeof fs.readFile;\n  };\n\n  rootContext: string;\n  resourcePath: string;\n  resourceQuery?: string;\n};\n\nexport type TurboLoaderOptions = {\n  identifiers: IdentifierOption | null;\n  outputCss: boolean | null;\n  nextEnv: Record<string, string | undefined> | null;\n};\n\nlet sharedCompiler: VeCompiler | null = null;\n\n/**\n * reset the global state, used in tests to cleanup the compiler\n */\nexport const cleanupSharedCompiler = () => {\n  if (sharedCompiler) {\n    sharedCompiler.close();\n    sharedCompiler = null;\n  }\n};\n\nconst getOrMakeCompiler = async ({\n  identifiers,\n  nextEnv,\n  loaderContext,\n}: {\n  identifiers: IdentifierOption;\n  nextEnv: Record<string, string | undefined> | null;\n  loaderContext: TurboLoaderContext<TurboLoaderOptions>;\n}): Promise<VeCompiler> => {\n  if (sharedCompiler) return sharedCompiler;\n\n  const defineEnv: Record<string, string> = {};\n  for (const [key, value] of Object.entries(nextEnv ?? {})) {\n    defineEnv[`process.env.${key}`] = JSON.stringify(value);\n  }\n\n  sharedCompiler = createCompiler({\n    root: loaderContext.rootContext,\n    identifiers,\n    enableFileWatcher: false,\n    unstable_splitCssPerRule: true,\n    cssImportSpecifier: async (_filePath, css) => {\n      return `@vanilla-extract/css/vanilla.virtual.css?ve-css=${encodeURIComponent(\n        await serializeCss(css),\n      )}`;\n    },\n    viteConfig: {\n      define: defineEnv,\n      plugins: [\n        createNextFontVePlugin(),\n        {\n          // route vite file reads through turbopack's fs to handle dependency tracking automatically\n          name: 'vanilla-extract-turbo-fs',\n          enforce: 'pre',\n          async load(id: string) {\n            return new Promise((resolve, reject) => {\n              // we can reuse this fs instance across all loader calls\n              // turbopack will associate dependencies to the file currently being loaded\n              loaderContext.fs.readFile(id, (error, data) => {\n                if (error) {\n                  reject(error);\n                } else if (typeof data === 'string') {\n                  resolve({ code: data });\n                } else resolve(null);\n              });\n            });\n          },\n        },\n        {\n          name: 'vanilla-extract-next-image',\n          enforce: 'pre',\n          async resolveId(source: string, importer: string | undefined) {\n            if (!importer) return null;\n\n            if (\n              source.endsWith('.png') ||\n              source.endsWith('.svg') ||\n              source.endsWith('.jpg') ||\n              source.endsWith('.jpeg') ||\n              source.endsWith('.gif') ||\n              source.endsWith('.webp') ||\n              source.endsWith('.avif') ||\n              source.endsWith('.ico') ||\n              source.endsWith('.bmp')\n            ) {\n              const sourceImage = path.isAbsolute(source)\n                ? path.join(loaderContext.rootContext, source)\n                : path.join(path.dirname(importer), source);\n\n              // since we'll be using the image in our final css file, we must craft an import path that will resolve to the image file from the css file\n              const referenceFile = require.resolve(\n                '@vanilla-extract/css/vanilla.virtual.css?ve-css=unknown',\n                { paths: [importer] },\n              );\n              const relativeImport = path.relative(\n                path.dirname(referenceFile),\n                sourceImage,\n              );\n\n              // determine the dimensions of the image\n              const imageAsBuffer = new Promise<Buffer>((resolve, reject) => {\n                loaderContext.fs.readFile(sourceImage, (error, data) => {\n                  if (error) reject(error);\n                  resolve(data);\n                });\n              });\n              const { getImageSize } =\n                await import('next/dist/server/image-optimizer.js');\n              const imageSize: { width?: number; height?: number } =\n                // @ts-expect-error - next.js version mismatch loads next 12 types but uses next 16 code\n                await getImageSize(await imageAsBuffer).catch((error) => {\n                  const message = `Process image \"${sourceImage}\" failed: ${error}`;\n                  throw new Error(message);\n                });\n\n              const moduleContent = `export default {\n                src: '${relativeImport}',\n                height: ${imageSize.height},\n                width: ${imageSize.width},\n                blurDataURL: undefined,\n                blurWidth: undefined,\n                blurHeight: undefined,\n              }`;\n\n              return (\n                'data:text/javascript;base64,' +\n                Buffer.from(moduleContent).toString('base64')\n              );\n            }\n\n            return null;\n          },\n        },\n        {\n          // avoid module resolution errors by letting turbopack resolve our modules for us\n          name: 'vanilla-extract-turbo-resolve',\n          // do NOT enforce pre as it breaks builds on some projects (not sure why)\n          async resolveId(source: string, importer: string | undefined) {\n            if (source.startsWith('/')) return null; // turbopack doesn't support server relative imports\n            if (!importer) return null;\n\n            // react is vendored by next, so we need to use the upstream version to avoid errors\n            if (source === 'react' || source === 'react-dom') {\n              return null;\n            }\n\n            const resolver = loaderContext.getResolve({});\n            return resolver(path.dirname(importer), source);\n          },\n        },\n      ],\n    },\n  });\n\n  return sharedCompiler;\n};\n\nexport default async function turbopackVanillaExtractLoader(\n  this: TurboLoaderContext<TurboLoaderOptions>,\n) {\n  // Check if this is a CSS request via query param\n  if (this.resourceQuery?.startsWith('?ve-css=')) {\n    const encodedCss = this.resourceQuery.slice(8);\n    return await deserializeCss(decodeURIComponent(encodedCss));\n  }\n\n  const options = this.getOptions() as TurboLoaderOptions;\n  const identifiers =\n    options.identifiers ??\n    (process.env.NODE_ENV === 'production' ? 'short' : 'debug');\n  const outputCss = options.outputCss ?? true;\n\n  const compiler = await getOrMakeCompiler({\n    identifiers,\n    nextEnv: options.nextEnv,\n    loaderContext: this,\n  });\n\n  // if turbopack invokes the loader quickly, vite can't invalidate the module fast enough\n  // so we disable the internal file watcher and manually invalidate the module instead\n  await compiler.unstable_invalidateAllModules();\n\n  const { source, watchFiles } = await compiler.processVanillaFile(\n    this.resourcePath,\n    { outputCss },\n  );\n\n  return await injectFontImports(source, watchFiles, this);\n}\n"
  },
  {
    "path": "packages/turbopack-plugin/src/next-font/inject.ts",
    "content": "import path from 'node:path';\nimport { promisify } from 'node:util';\nimport type { TurboLoaderContext, TurboLoaderOptions } from '../index';\n\n/**\n * we need to ensure that any next/font/google or next/font/local imports\n * are preserved in the output code, even if they are only used in CSS\n *\n * this is because next needs to see these imports to generate the font files\n */\nexport async function injectFontImports(\n  source: string,\n  watchFiles: Set<string>,\n  loaderContext: TurboLoaderContext<TurboLoaderOptions>,\n): Promise<string> {\n  const readFile = promisify(loaderContext.fs.readFile);\n  const importsToInject: string[] = [];\n\n  await Promise.all(\n    Array.from(watchFiles).map(async (file) => {\n      if (file.includes('node_modules')) return;\n      if (file === loaderContext.resourcePath) return;\n      if (!/\\.(m|c)?(js|ts)x?$/.test(file)) return;\n\n      const content = String(await readFile(file).catch(() => null));\n      if (/from\\s+['\"]next\\/font\\/(google|local)['\"]/.test(content)) {\n        let relativeImport = path.relative(\n          path.dirname(loaderContext.resourcePath),\n          file,\n        );\n\n        if (!relativeImport.startsWith('.'))\n          relativeImport = `./${relativeImport}`;\n\n        importsToInject.push(relativeImport);\n      }\n    }),\n  );\n\n  if (importsToInject.length > 0) {\n    return `${importsToInject\n      .map((importPath) => `import '${importPath}';`)\n      .join('\\n')}\\n${source}`;\n  }\n\n  return source;\n}\n"
  },
  {
    "path": "packages/turbopack-plugin/src/next-font/plugin.ts",
    "content": "import { transformNextFont } from './transform';\nimport type { Plugin } from 'vite';\n\nexport function createNextFontVePlugin(): Plugin {\n  return {\n    name: 've-next-font-stub',\n    enforce: 'pre',\n    async transform(code: string, id: string) {\n      if (!/\\.(m|c)?(js|ts)x?$/.test(id) || !code.includes('next/font')) {\n        return null;\n      }\n\n      return await transformNextFont(code, id);\n    },\n  };\n}\n"
  },
  {
    "path": "packages/turbopack-plugin/src/next-font/transform.ts",
    "content": "import * as swc from '@swc/core';\nimport type { Argument, Expression, VariableDeclarator } from '@swc/core';\n\nexport type NextFontTransformResult = {\n  code: string;\n  map: string | null;\n};\n\nconst THROW_MSG =\n  \"next/font class names are generated by Turbopack and aren't available during vanilla-extract evaluation. Use style.* in VE files, and apply the real font's className/variable in runtime code.\";\n\nconst GENERIC_FAMILIES = new Set([\n  'serif',\n  'sans-serif',\n  'monospace',\n  'cursive',\n  'fantasy',\n  'system-ui',\n  'ui-serif',\n  'ui-sans-serif',\n  'ui-monospace',\n  'ui-rounded',\n  'emoji',\n  'math',\n  'fangsong',\n]);\n\n// --- Helpers ---\n\nfunction formatFontFamily(name: string): string {\n  const clean = name.replace(/['\"]/g, '');\n  return GENERIC_FAMILIES.has(clean.toLowerCase()) ? clean : `'${clean}'`;\n}\n\nfunction getFontFamily(\n  baseName: string,\n  fallbacks: string[] | undefined,\n  isLocal: boolean,\n): string {\n  const parts = [formatFontFamily(baseName)];\n\n  // Local fonts always get a generated fallback. Google fonts get it if no user fallbacks.\n  // Original logic:\n  // Local: [Name, Name Fallback, ...UserFallbacks]\n  // Google: [Name, ...UserFallbacks] OR [Name, Name Fallback]\n  const hasUserFallbacks = fallbacks && fallbacks.length > 0;\n\n  if (isLocal || !hasUserFallbacks) {\n    parts.push(formatFontFamily(`${baseName} Fallback`));\n  }\n\n  if (hasUserFallbacks) {\n    parts.push(...fallbacks);\n  }\n\n  return parts.join(', ');\n}\n\nfunction parseWeight(weight: unknown): number | undefined {\n  if (typeof weight === 'number') return weight;\n  if (typeof weight === 'string' && weight && !weight.includes(' ')) {\n    const n = Number(weight);\n    if (!Number.isNaN(n)) return n;\n  }\n  return undefined;\n}\n\nfunction parseStyle(style: unknown, isGoogle: boolean): string | undefined {\n  if (Array.isArray(style)) return undefined;\n  if (typeof style === 'string' && style && !style.includes(' ')) return style;\n  return isGoogle ? 'normal' : undefined;\n}\n\n// --- AST Utilities ---\n\ntype FontOptions = {\n  src?: unknown;\n  weight?: unknown;\n  style?: unknown;\n  fallback?: string[];\n};\n\n/**\n * Extract simple values from AST nodes (literals, arrays of literals).\n * Returns `undefined` if too complex.\n */\nfunction unwrapValue(node: Expression | undefined): unknown {\n  if (!node) return undefined;\n\n  // Handle basic literals\n  if (node.type === 'StringLiteral' || node.type === 'NumericLiteral') {\n    return node.value;\n  }\n\n  // Handle arrays\n  if (node.type === 'ArrayExpression') {\n    return node.elements\n      .map((el) => unwrapValue(el?.expression))\n      .filter((v) => v !== undefined);\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts the configuration object from the first argument of a call.\n */\nfunction extractFontOptions(args: Argument[]): FontOptions {\n  const options: FontOptions = {};\n  const configNode = args[0]?.expression;\n\n  if (configNode?.type !== 'ObjectExpression') {\n    return options;\n  }\n\n  for (const prop of configNode.properties) {\n    if (prop.type !== 'KeyValueProperty') continue;\n\n    const keyNode = prop.key;\n    if (keyNode.type !== 'Identifier' && keyNode.type !== 'StringLiteral')\n      continue;\n    const key = keyNode.value;\n    const value = unwrapValue(prop.value);\n\n    if (key === 'src') options.src = value;\n    if (key === 'weight') options.weight = value;\n    if (key === 'style') options.style = value;\n    if (key === 'fallback') {\n      if (\n        !Array.isArray(value) ||\n        !value.every((v): v is string => typeof v === 'string')\n      ) {\n        throw new Error(\n          `[vanilla-extract/turbopack-plugin] next/font: 'fallback' must be an array of strings, got: ${JSON.stringify(\n            value,\n          )}`,\n        );\n      }\n      options.fallback = value;\n    }\n  }\n\n  return options;\n}\n\nasync function createStubNode(\n  family: string,\n  weight: number | undefined,\n  style: string | undefined,\n): Promise<Expression> {\n  const styleObj = [\n    `fontFamily: ${JSON.stringify(family)}`,\n    weight !== undefined ? `fontWeight: ${weight}` : null,\n    style !== undefined ? `fontStyle: ${JSON.stringify(style)}` : null,\n  ]\n    .filter(Boolean)\n    .join(', ');\n\n  const stubSource = `({\n      get className() { throw new Error(${JSON.stringify(THROW_MSG)}); },\n      get variable() { throw new Error(${JSON.stringify(THROW_MSG)}); },\n      style: { ${styleObj} }\n    })`;\n\n  // Parse this tiny snippet to get an Expression node\n  const m = await swc.parse(stubSource, { syntax: 'ecmascript' });\n  const stmt = m.body[0];\n  if (stmt?.type !== 'ExpressionStatement') {\n    throw new Error(\n      '[vanilla-extract/turbopack-plugin] Internal error: stub source did not produce an ExpressionStatement',\n    );\n  }\n  return stmt.expression;\n}\n\nasync function processDeclarator(\n  decl: VariableDeclarator,\n  imports: Map<string, { type: 'local' | 'google'; name: string }>,\n): Promise<Expression | undefined> {\n  if (!decl.init || decl.init.type !== 'CallExpression') return;\n\n  const callee = decl.init.callee;\n  if (callee.type !== 'Identifier') return;\n\n  const fontDef = imports.get(callee.value);\n  if (!fontDef) return;\n\n  const args = decl.init.arguments || [];\n  const opts = extractFontOptions(args);\n  const varName = decl.id.type === 'Identifier' ? decl.id.value : 'font';\n\n  const isGoogle = fontDef.type === 'google';\n  const familyName = isGoogle ? fontDef.name : varName;\n\n  const family = getFontFamily(familyName, opts.fallback, !isGoogle);\n  let weight = parseWeight(opts.weight);\n  let style = parseStyle(opts.style, isGoogle);\n\n  // Local fonts only stub weight/style if src is a simple string\n  if (!isGoogle && typeof opts.src !== 'string') {\n    weight = undefined;\n    style = undefined;\n  }\n\n  return createStubNode(family, weight, style);\n}\n\n// --- Main Transform ---\n\nexport async function transformNextFont(\n  code: string,\n  filename: string,\n): Promise<NextFontTransformResult> {\n  // 1. Parse\n  const isTs = /\\.(?:[cm]?ts|tsx)$/.test(filename);\n  const isTsx = filename.endsWith('.tsx');\n  const isJsx = filename.endsWith('.jsx');\n\n  const module = await swc.parse(code, {\n    syntax: isTs ? 'typescript' : 'ecmascript',\n    tsx: isTsx,\n    jsx: isJsx,\n    dynamicImport: true,\n    decorators: false,\n    target: 'esnext',\n    comments: false,\n    script: false,\n  });\n\n  const imports = new Map<string, { type: 'local' | 'google'; name: string }>();\n  let changed = false;\n\n  // 2. Scan imports & filter body\n  const newBody = [];\n\n  for (const item of module.body) {\n    if (item.type === 'ImportDeclaration') {\n      const source = item.source.value;\n      if (source === 'next/font/local') {\n        item.specifiers.forEach((s) => {\n          if (s.type === 'ImportDefaultSpecifier') {\n            imports.set(s.local.value, { type: 'local', name: 'local' });\n          }\n        });\n        changed = true;\n        continue; // Remove import\n      }\n      if (source === 'next/font/google') {\n        item.specifiers.forEach((s) => {\n          if (s.type === 'ImportSpecifier') {\n            const local = s.local.value;\n            const imported = s.imported?.value || local;\n            imports.set(local, {\n              type: 'google',\n              name: imported.replace(/_/g, ' '),\n            });\n          }\n        });\n        changed = true;\n        continue; // Remove import\n      }\n    }\n    newBody.push(item);\n  }\n\n  const usedNextFont = changed;\n  if (!usedNextFont) {\n    return { code, map: null };\n  }\n\n  // 3. Transform Declarations\n  for (const item of newBody) {\n    if (item.type === 'VariableDeclaration') {\n      for (const decl of item.declarations) {\n        const stubNode = await processDeclarator(decl, imports);\n        if (stubNode) decl.init = stubNode;\n      }\n    } else if (\n      item.type === 'ExportDeclaration' &&\n      item.declaration.type === 'VariableDeclaration'\n    ) {\n      for (const decl of item.declaration.declarations) {\n        const stubNode = await processDeclarator(decl, imports);\n        if (stubNode) decl.init = stubNode;\n      }\n    }\n  }\n\n  // 4. Generate Code\n  const { code: outputCode, map } = await swc.print(\n    { ...module, body: newBody },\n    { minify: false, sourceMaps: true },\n  );\n\n  return {\n    code: outputCode,\n    map: map || null,\n  };\n}\n"
  },
  {
    "path": "packages/utils/CHANGELOG.md",
    "content": "# @vanilla-extract/css-utils\n\n## 0.1.6\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n## 0.1.5\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n## 0.1.4\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n## 0.1.3\n\n### Patch Changes\n\n- [#854](https://github.com/vanilla-extract-css/vanilla-extract/pull/854) [`98f8b03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98f8b0387d661b77705d2cd83ab3095434e1223e) Thanks [@mrm007](https://github.com/mrm007)! - Bundle TypeScript declaration files (`.d.ts`) when building packages\n\n## 0.1.2\n\n### Patch Changes\n\n- [#520](https://github.com/vanilla-extract-css/vanilla-extract/pull/520) [`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)\n\n  This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.\n\n## 0.1.1\n\n### Patch Changes\n\n- [#119](https://github.com/vanilla-extract-css/vanilla-extract/pull/119) [`8e67bdd`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8e67bdd4bd5fcb541da354f674365bac13d8373c) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add support for calc nesting\n\n  Previously passing a calc to any of the operator methods was not supported without first being stringified. This is now handled internally.\n\n  E.g.\n\n  ```diff\n  -  calc('10px').add(calc('20px').subtract('4px').toString())\n  +  calc('10px').add(calc('20px').subtract('4px'))\n  ```\n\n## 0.1.0\n\n### Minor Changes\n\n- e83ad50: Initial release\n"
  },
  {
    "path": "packages/utils/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/css-utils\",\n  \"version\": \"0.1.6\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"sideEffects\": false,\n  \"main\": \"dist/vanilla-extract-css-utils.cjs.js\",\n  \"module\": \"dist/vanilla-extract-css-utils.esm.js\",\n  \"types\": \"dist/vanilla-extract-css-utils.cjs.d.ts\",\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/utils\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "packages/utils/src/index.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport { calc } from './';\n\ndescribe('utils', () => {\n  describe('calc', () => {\n    it('standard usage', () => {\n      expect(calc('10px').add('20px').toString()).toMatchInlineSnapshot(\n        `\"calc(10px + 20px)\"`,\n      );\n      expect(calc('10px').add('20px', '30px').toString()).toMatchInlineSnapshot(\n        `\"calc(10px + 20px + 30px)\"`,\n      );\n      expect(calc('20px').subtract('10px').toString()).toMatchInlineSnapshot(\n        `\"calc(20px - 10px)\"`,\n      );\n      expect(\n        calc('20px').subtract('5px', '5px').toString(),\n      ).toMatchInlineSnapshot(`\"calc(20px - 5px - 5px)\"`);\n      expect(calc('10px').multiply(10).toString()).toMatchInlineSnapshot(\n        `\"calc(10px * 10)\"`,\n      );\n      expect(calc('10px').multiply(10, 2).toString()).toMatchInlineSnapshot(\n        `\"calc(10px * 10 * 2)\"`,\n      );\n      expect(calc('10px').divide(10).toString()).toMatchInlineSnapshot(\n        `\"calc(10px / 10)\"`,\n      );\n      expect(calc('10px').divide(10, 2).toString()).toMatchInlineSnapshot(\n        `\"calc(10px / 10 / 2)\"`,\n      );\n      expect(\n        calc('10px').add('20px').multiply(2).toString(),\n      ).toMatchInlineSnapshot(`\"calc((10px + 20px) * 2)\"`);\n      expect(\n        calc('10px').add('20px').divide(2).toString(),\n      ).toMatchInlineSnapshot(`\"calc((10px + 20px) / 2)\"`);\n      expect(\n        calc('20px').subtract('10px').negate().toString(),\n      ).toMatchInlineSnapshot(`\"calc((20px - 10px) * -1)\"`);\n      expect(\n        calc('10px').multiply(100).divide(2).negate().toString(),\n      ).toMatchInlineSnapshot(`\"calc(((10px * 100) / 2) * -1)\"`);\n      expect(\n        calc('10px')\n          .add('50px')\n          .subtract('20px')\n          .multiply(100)\n          .divide(2)\n          .negate()\n          .toString(),\n      ).toMatchInlineSnapshot(\n        `\"calc(((((10px + 50px) - 20px) * 100) / 2) * -1)\"`,\n      );\n    });\n\n    it('bailing early', () => {\n      expect(calc('10px').toString()).toMatchInlineSnapshot(`\"10px\"`);\n    });\n\n    it('string coercion', () => {\n      expect(calc('10px').toString()).toMatchInlineSnapshot(`\"10px\"`);\n      expect(calc('10px').add('20px').toString()).toMatchInlineSnapshot(\n        `\"calc(10px + 20px)\"`,\n      );\n      expect(`${calc('10px').add('20px')}`).toMatchInlineSnapshot(\n        `\"calc(10px + 20px)\"`,\n      );\n      expect(\n        `${calc('10px').add(calc('20px').subtract('4em'))}`,\n      ).toMatchInlineSnapshot(`\"calc(10px + (20px - 4em))\"`);\n      expect(`${calc('10px').add(calc('20px'))}`).toMatchInlineSnapshot(\n        `\"calc(10px + 20px)\"`,\n      );\n    });\n  });\n\n  it('add', () => {\n    expect(calc.add(1, 2)).toMatchInlineSnapshot(`\"calc(1 + 2)\"`);\n    expect(calc.add(1, 2, 3)).toMatchInlineSnapshot(`\"calc(1 + 2 + 3)\"`);\n    expect(calc.add('1', 2, 3 - 4)).toMatchInlineSnapshot(`\"calc(1 + 2 + -1)\"`);\n    expect(calc.add('10px', '2em')).toMatchInlineSnapshot(`\"calc(10px + 2em)\"`);\n    expect(\n      calc.add('10px', '2em', calc.add('2', '6rem')),\n    ).toMatchInlineSnapshot(`\"calc(10px + 2em + (2 + 6rem))\"`);\n    expect(\n      calc.add(\n        calc.multiply(\n          calc.subtract('10px', '2em'),\n          calc.add('2', '6rem'),\n          '4px',\n        ),\n      ),\n    ).toMatchInlineSnapshot(`\"calc(((10px - 2em) * (2 + 6rem) * 4px))\"`);\n  });\n\n  it('subtract', () => {\n    expect(calc.subtract(1, 2)).toMatchInlineSnapshot(`\"calc(1 - 2)\"`);\n    expect(calc.subtract(1, 2, 3)).toMatchInlineSnapshot(`\"calc(1 - 2 - 3)\"`);\n    expect(calc.subtract('1', 2, 3 - 4)).toMatchInlineSnapshot(\n      `\"calc(1 - 2 - -1)\"`,\n    );\n    expect(calc.subtract('10px', '2em')).toMatchInlineSnapshot(\n      `\"calc(10px - 2em)\"`,\n    );\n    expect(\n      calc.subtract('10px', '2em', calc.add('2', '6rem')),\n    ).toMatchInlineSnapshot(`\"calc(10px - 2em - (2 + 6rem))\"`);\n  });\n\n  it('multiply', () => {\n    expect(calc.multiply(1, 2)).toMatchInlineSnapshot(`\"calc(1 * 2)\"`);\n    expect(calc.multiply(1, 2, 3)).toMatchInlineSnapshot(`\"calc(1 * 2 * 3)\"`);\n    expect(calc.multiply('1', 2, 3 - 4)).toMatchInlineSnapshot(\n      `\"calc(1 * 2 * -1)\"`,\n    );\n    expect(calc.multiply('10px', '2em')).toMatchInlineSnapshot(\n      `\"calc(10px * 2em)\"`,\n    );\n    expect(\n      calc.multiply('10px', '2em', calc.add('2', '6rem')),\n    ).toMatchInlineSnapshot(`\"calc(10px * 2em * (2 + 6rem))\"`);\n  });\n\n  it('divide', () => {\n    expect(calc.divide(1, 2)).toMatchInlineSnapshot(`\"calc(1 / 2)\"`);\n    expect(calc.divide(1, 2, 3)).toMatchInlineSnapshot(`\"calc(1 / 2 / 3)\"`);\n    expect(calc.divide('1', 2, 3 - 4)).toMatchInlineSnapshot(\n      `\"calc(1 / 2 / -1)\"`,\n    );\n    expect(calc.divide('10px', '2em')).toMatchInlineSnapshot(\n      `\"calc(10px / 2em)\"`,\n    );\n    expect(\n      calc.divide('10px', '2em', calc.add('2', '6rem')),\n    ).toMatchInlineSnapshot(`\"calc(10px / 2em / (2 + 6rem))\"`);\n  });\n\n  it('negate', () => {\n    expect(calc.negate(2)).toMatchInlineSnapshot(`\"calc(2 * -1)\"`);\n    expect(calc.negate(3 - 4)).toMatchInlineSnapshot(`\"calc(-1 * -1)\"`);\n    expect(calc.negate(calc.add('10px', '2em'))).toMatchInlineSnapshot(\n      `\"calc((10px + 2em) * -1)\"`,\n    );\n  });\n});\n"
  },
  {
    "path": "packages/utils/src/index.ts",
    "content": "type Operator = '+' | '-' | '*' | '/';\ntype Operand = string | number | CalcChain;\n\nconst toExpression = (operator: Operator, ...operands: Array<Operand>) =>\n  operands\n    .map((o) => `${o}`)\n    .join(` ${operator} `)\n    .replace(/calc/g, '');\n\nconst add = (...operands: Array<Operand>) =>\n  `calc(${toExpression('+', ...operands)})`;\n\nconst subtract = (...operands: Array<Operand>) =>\n  `calc(${toExpression('-', ...operands)})`;\n\nconst multiply = (...operands: Array<Operand>) =>\n  `calc(${toExpression('*', ...operands)})`;\n\nconst divide = (...operands: Array<Operand>) =>\n  `calc(${toExpression('/', ...operands)})`;\n\nconst negate = (x: Operand): string => multiply(x, -1);\n\ntype CalcChain = {\n  add: (...operands: Array<Operand>) => CalcChain;\n  subtract: (...operands: Array<Operand>) => CalcChain;\n  multiply: (...operands: Array<Operand>) => CalcChain;\n  divide: (...operands: Array<Operand>) => CalcChain;\n  negate: () => CalcChain;\n  toString: () => string;\n};\n\ninterface Calc {\n  (x: Operand): CalcChain;\n  add: typeof add;\n  subtract: typeof subtract;\n  multiply: typeof multiply;\n  divide: typeof divide;\n  negate: typeof negate;\n}\n\nexport const calc: Calc = Object.assign(\n  (x: Operand): CalcChain => {\n    return {\n      add: (...operands) => calc(add(x, ...operands)),\n      subtract: (...operands) => calc(subtract(x, ...operands)),\n      multiply: (...operands) => calc(multiply(x, ...operands)),\n      divide: (...operands) => calc(divide(x, ...operands)),\n      negate: () => calc(negate(x)),\n      toString: () => x.toString(),\n    };\n  },\n  {\n    add,\n    subtract,\n    multiply,\n    divide,\n    negate,\n  },\n);\n"
  },
  {
    "path": "packages/vite-plugin/CHANGELOG.md",
    "content": "# @vanilla-extract/vite-plugin\n\n## 5.2.1\n\n### Patch Changes\n\n- [#1701](https://github.com/vanilla-extract-css/vanilla-extract/pull/1701) [`b066d1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b066d1c253ee09f2967bfddd7b6762f5dfa2d7d7) Thanks [@askoufis](https://github.com/askoufis)! - Reduce unnecessary HMR invalidations and fix broken HMR in Astro, Nuxt and Qwik\n\n- Updated dependencies [[`b066d1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b066d1c253ee09f2967bfddd7b6762f5dfa2d7d7)]:\n  - @vanilla-extract/compiler@0.6.0\n\n## 5.2.0\n\n### Minor Changes\n\n- [#1687](https://github.com/vanilla-extract-css/vanilla-extract/pull/1687) [`e29f242`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e29f242953fcb46315cebe5b3374a5a1f89d93af) Thanks [@askoufis](https://github.com/askoufis)! - Add support for Vite 8\n\n### Patch Changes\n\n- Updated dependencies [[`e29f242`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e29f242953fcb46315cebe5b3374a5a1f89d93af)]:\n  - @vanilla-extract/compiler@0.5.0\n\n## 5.1.5\n\n### Patch Changes\n\n- Updated dependencies [[`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1), [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1), [`c0e2812`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c0e2812f532f934d52c4728a0a167327420ff6f1)]:\n  - @vanilla-extract/compiler@0.4.0\n  - @vanilla-extract/integration@8.0.8\n\n## 5.1.4\n\n### Patch Changes\n\n- [#1665](https://github.com/vanilla-extract-css/vanilla-extract/pull/1665) [`352fc19`](https://github.com/vanilla-extract-css/vanilla-extract/commit/352fc19169e5f0233f8135842857399ccd46727d) Thanks [@askoufis](https://github.com/askoufis)! - Assets used in CSS generated by the plugin will now respect the [`build.assetsInlineLimit`] Vite configuration option\n\n  [`build.assetsInlineLimit`]: https://vite.dev/config/build-options#build-assetsinlinelimit\n\n- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704), [`352fc19`](https://github.com/vanilla-extract-css/vanilla-extract/commit/352fc19169e5f0233f8135842857399ccd46727d)]:\n  - @vanilla-extract/integration@8.0.7\n  - @vanilla-extract/compiler@0.3.4\n\n## 5.1.3\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/compiler@0.3.3\n  - @vanilla-extract/integration@8.0.6\n\n## 5.1.2\n\n### Patch Changes\n\n- Updated dependencies [[`46ef1db`](https://github.com/vanilla-extract-css/vanilla-extract/commit/46ef1db201ad83d50c4620e331ec53f9affe1d84), [`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:\n  - @vanilla-extract/compiler@0.3.2\n  - @vanilla-extract/integration@8.0.5\n\n## 5.1.1\n\n### Patch Changes\n\n- [#1624](https://github.com/vanilla-extract-css/vanilla-extract/pull/1624) [`50f1234`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50f12348894a9e77a36ec269fcdf2ad159e5211d) Thanks [@BPScott](https://github.com/BPScott)! - Include `^7.0.0` in `vite` dependency range\n\n- Updated dependencies [[`50f1234`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50f12348894a9e77a36ec269fcdf2ad159e5211d)]:\n  - @vanilla-extract/compiler@0.3.1\n\n## 5.1.0\n\n### Minor Changes\n\n- [#1614](https://github.com/vanilla-extract-css/vanilla-extract/pull/1614) [`4e92cce`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e92ccee6d7b0c2ee16163446e5938c7365224b3) Thanks [@askoufis](https://github.com/askoufis)! - Add new `inlineCssInDev` option to `unstable_mode` configuration property\n\n  Setting `unstableMode: 'inlineCssInDev'` will result in all CSS generated by Vanilla Extract being inlined into a `style` element at the top of the document `head`. This feature is useful for preventing [FOUC] (Flash of Unstyled Content) when server-rendering your initial HTML. Without this, calling `ssrLoadModule` on your server entrypoint will not include the CSS in the HTML, leading to a FOUC when the client-side JavaScript takes over.\n\n  Note that CSS will only be inlined in development mode. Production builds are unaffected by this setting.\n\n  **EXAMPLE USAGE**:\n\n  ```ts\n  // vite.config.ts\n  import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\n  export default {\n    plugins: [\n      vanillaExtractPlugin({\n        unstable_mode: 'inlineCssInDev'\n      })\n    ]\n  };\n  ```\n\n  [FOUC]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content\n\n### Patch Changes\n\n- Updated dependencies [[`4e92cce`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e92ccee6d7b0c2ee16163446e5938c7365224b3)]:\n  - @vanilla-extract/compiler@0.3.0\n\n## 5.0.7\n\n### Patch Changes\n\n- [#1617](https://github.com/vanilla-extract-css/vanilla-extract/pull/1617) [`f4bd196`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f4bd196f041eaec5fb7dcd8182cd2a4d1d3d167f) Thanks [@askoufis](https://github.com/askoufis)! - Don't watch files or invalidate VE modules during SSR\n\n  Fixes a bug where a dependent of a Vanilla Extract module could be evaulated multiple times during `ssrLoadModule`, potentially causing bugs with singleton variables such as React context.\n\n## 5.0.6\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies [[`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd)]:\n  - @vanilla-extract/compiler@0.2.3\n  - @vanilla-extract/integration@8.0.4\n\n## 5.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`9bf58ee`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9bf58ee1e9a8371f4ddc245b0a96afcfcf5eac29)]:\n  - @vanilla-extract/compiler@0.2.2\n\n## 5.0.4\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies [[`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e)]:\n  - @vanilla-extract/compiler@0.2.1\n  - @vanilla-extract/integration@8.0.3\n\n## 5.0.3\n\n### Patch Changes\n\n- [#1592](https://github.com/vanilla-extract-css/vanilla-extract/pull/1592) [`35d6b3f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/35d6b3fe5d297dc76f1629a9f54f21d0f97e7c9f) Thanks [@askoufis](https://github.com/askoufis)! - Disable the compiler's file watcher during builds\n\n- Updated dependencies [[`35d6b3f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/35d6b3fe5d297dc76f1629a9f54f21d0f97e7c9f)]:\n  - @vanilla-extract/compiler@0.2.0\n\n## 5.0.2\n\n### Patch Changes\n\n- [#1583](https://github.com/vanilla-extract-css/vanilla-extract/pull/1583) [`6488e28`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6488e28337106582231b418778c884f26e393219) Thanks [@askoufis](https://github.com/askoufis)! - Ignore Vite `base` config\n\n  Fixes a bug where imported asset URLs would be transformed by the compiler when setting the `base` option in Vite, resulting in incorrect resolution and bundling of these assets during the build process.\n\n- Updated dependencies [[`6488e28`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6488e28337106582231b418778c884f26e393219)]:\n  - @vanilla-extract/compiler@0.1.3\n  - @vanilla-extract/integration@8.0.2\n\n## 5.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:\n  - @vanilla-extract/integration@8.0.1\n  - @vanilla-extract/compiler@0.1.2\n\n## 5.0.0\n\n### Major Changes\n\n- [#1537](https://github.com/vanilla-extract-css/vanilla-extract/pull/1537) [`7810b7c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7810b7c8b8344dc2b5618b25d2945ecc3d81b469) Thanks [@askoufis](https://github.com/askoufis)! - Change the plugin name from `\"vanilla-extract\"` to the more [conventional][plugin conventions] `\"vite-plugin-vanilla-extract\"`\n\n  [plugin conventions]: https://vite.dev/guide/api-plugin.html#conventions\n\n- [#1529](https://github.com/vanilla-extract-css/vanilla-extract/pull/1529) [`d5b6e70`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d5b6e70f44a3d4f03e113fe78e0605b358e9c0d7) Thanks [@askoufis](https://github.com/askoufis)! - Update `vite` peer dependency range to `^5.0.0 || ^6.0.0`\n\n  BREAKING CHANGE: Vite 4 is no longer supported. Please upgrade to at least Vite 5.\n\n- [#1537](https://github.com/vanilla-extract-css/vanilla-extract/pull/1537) [`7810b7c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7810b7c8b8344dc2b5618b25d2945ecc3d81b469) Thanks [@askoufis](https://github.com/askoufis)! - BREAKING CHANGE: User-configured vite plugins are no longer forwarded through to the Vanilla Extract compiler by default. This should not affect most consumers.\n\n  Previously, all vite plugins except for a select few incompatible plugins were forwarded through. This resulted in a constant game of whack-a-mole as new plugins were added to the list of incompatible plugins as issues were discovered.\n\n  Framework-specific plugins, as well as plugins that handle assets and build output, tend not to be relevant to Vanilla Extract code, and in some cases cause more harm than good.\n\n  For that reason, in this release only the `vite-tsconfig-paths` plugin is fowarded through by default. This is a relatively common plugin that is know to be compatible with the Vanilla Extract compiler.\n\n  In most cases users should not need to forward any additional plugins through to the Vanilla Extract compiler. However, if such a case arises, a plugin filter function can be provided via the `unstable_pluginFilter` option:\n\n  ```ts\n  // vite.config.ts\n\n  import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n  import { vitePluginFoo } from 'vite-plugin-foo';\n\n  export default defineConfig({\n    plugins: [\n      vitePluginFoo(),\n      vanillaExtractPlugin({\n        // Only forward the `vite-plugin-foo` plugin through to the Vanilla Extract compiler\n        unstable_pluginFilter: ({ name, mode }) =>\n          plugin.name === 'vite-plugin-foo'\n      })\n    ]\n  });\n  ```\n\n  When providing a plugin filter function, the `vite-tsconfig-paths` plugin will no longer be forwarded through by default. If you wish to forward this plugin, you must include it in your filter function.\n\n  **NOTE**: The `unstable_pluginFilter` API is considered unstable and may be changed or removed without notice in a future non-major version.\n\n### Patch Changes\n\n- Updated dependencies [[`d5b6e70`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d5b6e70f44a3d4f03e113fe78e0605b358e9c0d7), [`d5b6e70`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d5b6e70f44a3d4f03e113fe78e0605b358e9c0d7)]:\n  - @vanilla-extract/compiler@0.1.1\n\n## 4.0.20\n\n### Patch Changes\n\n- [#1536](https://github.com/vanilla-extract-css/vanilla-extract/pull/1536) [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3) Thanks [@askoufis](https://github.com/askoufis)! - Consume compiler API from new `@vanilla-extract/compiler` package instead of `@vanilla-extract/integration`\n\n- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:\n  - @vanilla-extract/integration@8.0.0\n  - @vanilla-extract/compiler@0.1.0\n\n## 4.0.19\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.12\n\n## 4.0.18\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.11\n\n## 4.0.17\n\n### Patch Changes\n\n- [#1492](https://github.com/vanilla-extract-css/vanilla-extract/pull/1492) [`1fd348a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1fd348a91036a1370e61de85199ca6f78533ed8e) Thanks [@kube](https://github.com/kube)! - Filter out `react-router` Vite plugin when creating the `vite-node` compiler\n\n## 4.0.16\n\n### Patch Changes\n\n- [#1482](https://github.com/vanilla-extract-css/vanilla-extract/pull/1482) [`30c0305`](https://github.com/vanilla-extract-css/vanilla-extract/commit/30c0305577638ada06393729f8eaaa7a72d69369) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug where Vanilla Extract files with extensions other than `css.ts` were not being invalidated during HMR\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.10\n\n## 4.0.15\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:\n  - @vanilla-extract/integration@7.1.9\n\n## 4.0.14\n\n### Patch Changes\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n\n## 4.0.13\n\n### Patch Changes\n\n- [#1438](https://github.com/vanilla-extract-css/vanilla-extract/pull/1438) [`765b85610207992693a822fb3b1aec995ab48409`](https://github.com/vanilla-extract-css/vanilla-extract/commit/765b85610207992693a822fb3b1aec995ab48409) Thanks [@ArrayKnight](https://github.com/ArrayKnight)! - Fixes a bug where changes to `.css.ts` dependencies of top-level `.css.ts` files would not generate new CSS\n\n## 4.0.12\n\n### Patch Changes\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n\n## 4.0.11\n\n### Patch Changes\n\n- [#1395](https://github.com/vanilla-extract-css/vanilla-extract/pull/1395) [`8d1731b44f8e93153c8087a533e0f9b2ed99767c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8d1731b44f8e93153c8087a533e0f9b2ed99767c) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug that made the plugin incompatible with frameworks that use custom config files\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.6\n\n## 4.0.10\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n\n## 4.0.9\n\n### Patch Changes\n\n- [#1399](https://github.com/vanilla-extract-css/vanilla-extract/pull/1399) [`ce738ba9e9a6b5c72cc7868bed724c816ca3cc4e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ce738ba9e9a6b5c72cc7868bed724c816ca3cc4e) Thanks [@askoufis](https://github.com/askoufis)! - Ensure the compiler instance is re-used between builds\n\n## 4.0.8\n\n### Patch Changes\n\n- [#1397](https://github.com/vanilla-extract-css/vanilla-extract/pull/1397) [`2232ef4aa0b8410ff791626a951a15cc03dfbb09`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2232ef4aa0b8410ff791626a951a15cc03dfbb09) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug that was causing output CSS files to not update during watch mode\n\n- Updated dependencies [[`606660618dc5efa6c529f77cebf9d2b8dc379dbd`](https://github.com/vanilla-extract-css/vanilla-extract/commit/606660618dc5efa6c529f77cebf9d2b8dc379dbd), [`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb)]:\n  - @vanilla-extract/integration@7.1.3\n\n## 4.0.7\n\n### Patch Changes\n\n- [#1369](https://github.com/vanilla-extract-css/vanilla-extract/pull/1369) [`05ef2f0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/05ef2f01bcf7cdf21ac0092ce0b23d8accded58d) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug where an internal Remix plugin would throw an error inside the `vite-node` compiler\n\n- [#1368](https://github.com/vanilla-extract-css/vanilla-extract/pull/1368) [`90f0315`](https://github.com/vanilla-extract-css/vanilla-extract/commit/90f03153bb7c4a8d5b448eab228c46203e9cdaed) Thanks [@askoufis](https://github.com/askoufis)! - Update `@vanilla-extract/integration` dependency\n\n  This fixes a bug where APIs that used the `walkObject` utility (e.g. `createTheme`) would fail when used with module namespace objects inside `vite-node`. This was due to the previous implementation using the input object's `constructor` to initialize a clone, which does not work with module namespace objects because [they do not have a `constructor` function][es6 spec].\n\n  [es6 spec]: https://262.ecma-international.org/6.0/#sec-module-namespace-objects\n\n- Updated dependencies [[`c8aefe0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c8aefe0c5fb6d8b8b82dd0f05ae837e7e2f03a9f)]:\n  - @vanilla-extract/integration@7.1.2\n\n## 4.0.6\n\n### Patch Changes\n\n- [#1346](https://github.com/vanilla-extract-css/vanilla-extract/pull/1346) [`8c2ac42`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8c2ac42479b9646f54c6064b6848485560b15005) Thanks [@askoufis](https://github.com/askoufis)! - Fix `.css.ts` file resolution on Windows\n\n## 4.0.5\n\n### Patch Changes\n\n- [#1353](https://github.com/vanilla-extract-css/vanilla-extract/pull/1353) [`94d5f06`](https://github.com/vanilla-extract-css/vanilla-extract/commit/94d5f0650fcc8ac736a0b6915bc495619c2a1880) Thanks [@himself65](https://github.com/himself65)! - Move `vite-node` compiler creation to a more appropriate plugin hook to ensure correct cleanup of resources\n\n## 4.0.4\n\n### Patch Changes\n\n- [#1314](https://github.com/vanilla-extract-css/vanilla-extract/pull/1314) [`e8a6850`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e8a6850ea360ede0ed4385421e41c069008772f2) Thanks [@mrm007](https://github.com/mrm007)! - Resolve and pass a new copy of the Vite config to the vite-node compiler\n\n  Previously, we were passing the same Vite config object to the vite-node compiler. This was causing compatibility issues with other plugins, such as Vitest and Remix.\n\n- Updated dependencies [[`e8a6850`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e8a6850ea360ede0ed4385421e41c069008772f2)]:\n  - @vanilla-extract/integration@7.1.0\n\n## 4.0.3\n\n### Patch Changes\n\n- [#1309](https://github.com/vanilla-extract-css/vanilla-extract/pull/1309) [`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14) Thanks [@mrm007](https://github.com/mrm007)! - Correctly resolve module paths when using Vite plugins that affect module resolution, such as [`vite-tsconfig-paths`](https://github.com/aleclarson/vite-tsconfig-paths)\n\n- [#1308](https://github.com/vanilla-extract-css/vanilla-extract/pull/1308) [`20e33a5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/20e33a5003cf1ef74beaba60cad6db8882cf5319) Thanks [@mrm007](https://github.com/mrm007)! - Don't pass Remix Vite plugin to the vite-node compiler\n\n  Remix throws an error if it's loaded without a config file, which is what we do when we initialise the vite-node compiler.\n\n- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:\n  - @vanilla-extract/integration@7.0.0\n\n## 4.0.2\n\n### Patch Changes\n\n- [#1304](https://github.com/vanilla-extract-css/vanilla-extract/pull/1304) [`545bf82`](https://github.com/vanilla-extract-css/vanilla-extract/commit/545bf82f127598ac72265164c72e1a1aad558491) Thanks [@fukumasuya](https://github.com/fukumasuya)! - Pass Vite `resolve` config to vite-node compiler\n\n  The plugin passes through the project's Vite `resolve` config to the vite-node compiler, which will be used for resolving imports. These options include [`resolve.alias`], [`resolve.dedupe`], [`resolve.conditions`], [`resolve.mainFields`], [`resolve.extensions`], and others.\n\n  [`resolve.alias`]: https://vitejs.dev/config/shared-options.html#resolve-alias\n  [`resolve.dedupe`]: https://vitejs.dev/config/shared-options.html#resolve-dedupe\n  [`resolve.conditions`]: https://vitejs.dev/config/shared-options.html#resolve-conditions\n  [`resolve.mainFields`]: https://vitejs.dev/config/shared-options.html#resolve-mainfields\n  [`resolve.extensions`]: https://vitejs.dev/config/shared-options.html#resolve-extensions\n\n- Updated dependencies [[`545bf82`](https://github.com/vanilla-extract-css/vanilla-extract/commit/545bf82f127598ac72265164c72e1a1aad558491)]:\n  - @vanilla-extract/integration@6.5.0\n\n## 4.0.1\n\n### Patch Changes\n\n- [#1300](https://github.com/vanilla-extract-css/vanilla-extract/pull/1300) [`d0b84f6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d0b84f6340d34b39414fbead3893a6000f9810fe) Thanks [@mrm007](https://github.com/mrm007)! - Skip loading plugins added by Vitest\n\n- [#1297](https://github.com/vanilla-extract-css/vanilla-extract/pull/1297) [`85e1131`](https://github.com/vanilla-extract-css/vanilla-extract/commit/85e11318f0a8b405041e967bd35aaed7f8abe753) Thanks [@mrm007](https://github.com/mrm007)! - Correctly resolve the user's Vite plugins\n\n## 4.0.0\n\n### Major Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - The Vite plugin now uses a newer, faster, Vite-based compiler by default.\n\n  The new compiler uses [`vite-node`](https://github.com/vitest-dev/vitest/tree/main/packages/vite-node) to parse and extract CSS from `.css.ts` files. This comes with all the benefits of using Vite, faster builds and the ability to use Vite plugins.\n\n  The new compiler has been used in Remix ever since support for Vanilla Extract was introduced.\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - The behaviour previously known as `emitCssInSsr` has been turned on by default. The `emitCssInSsr` option has been removed.\n\n  This means that the CSS emitted by the plugin is now processed by Vite, so the plugin no longer needs to resolve PostCSS plugins and process the CSS output itself.\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - The `esbuildOptions` option has been removed as we are no longer using esbuild internally\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Drop support for Vite < 4\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:\n  - @vanilla-extract/integration@6.4.0\n\n## 3.9.5\n\n### Patch Changes\n\n- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`\n\n- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier\n\n## 3.9.4\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Lazy load Vite to avoid the CJS warning\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/integration@6.2.5\n\n## 3.9.3\n\n### Patch Changes\n\n- [#1250](https://github.com/vanilla-extract-css/vanilla-extract/pull/1250) [`bc349fd`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bc349fd7cb3c50488bb1b169418fbb35b7de5c95) Thanks [@kosmotema](https://github.com/kosmotema)! - Prevent unnecessary module invalidations when using PostCSS\n\n## 3.9.2\n\n### Patch Changes\n\n- [#1239](https://github.com/vanilla-extract-css/vanilla-extract/pull/1239) [`1791df2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1791df27743429593858097ba65927a06b42e254) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Default `emitCssInSsr` to `true` when Remix Vite plugin is present\n\n- [#1240](https://github.com/vanilla-extract-css/vanilla-extract/pull/1240) [`2cad138`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2cad138d9c32f93582c65b52ed9c786210aaf317) Thanks [@mrm007](https://github.com/mrm007)! - Add Vite 5 to peer dependencies\n\n- Updated dependencies [[`fd5d9fc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5d9fc389b84d7de92ec86d89305185d6c4cfd4)]:\n  - @vanilla-extract/integration@6.2.4\n\n## 3.9.1\n\n### Patch Changes\n\n- [#1231](https://github.com/vanilla-extract-css/vanilla-extract/pull/1231) [`cdd5150`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cdd51507fd40eb9efa8c4ad59a7b31615b5d69d6) Thanks [@mrm007](https://github.com/mrm007)! - Bump `postcss-load-config` to enable loading PostCSS configs defined as ES Modules\n\n## 3.9.0\n\n### Minor Changes\n\n- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function\n\n## 3.8.2\n\n### Patch Changes\n\n- [#1093](https://github.com/vanilla-extract-css/vanilla-extract/pull/1093) [`8bed6f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8bed6f5ef36287006db458093e67bef5231e206c) Thanks [@kosmotema](https://github.com/kosmotema)! - Fix HMR in Windows by normalizing paths from `watchFiles`\n\n## 3.8.1\n\n### Patch Changes\n\n- [#1066](https://github.com/vanilla-extract-css/vanilla-extract/pull/1066) [`0d0ea39`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0d0ea3909e7f952f24aafa4c9653853ac5841b8c) Thanks [@askoufis](https://github.com/askoufis)! - Fix stale emitted CSS in SSR mode by invalidating all modules related to a file\n\n## 3.8.0\n\n### Minor Changes\n\n- [#989](https://github.com/vanilla-extract-css/vanilla-extract/pull/989) [`669a61f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/669a61f08cff6be69f8d0be7a270b4d9f151b8f1) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add `emitCssInSsr` option\n\n  Provides the ability to opt in to emitting CSS during SSR.\n\n  ```js\n  // vite.config.js\n\n  import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\n  export default {\n    plugins: [\n      vanillaExtractPlugin({\n        emitCssInSsr: true\n      })\n    ]\n  };\n  ```\n\n## 3.7.1\n\n### Patch Changes\n\n- [#949](https://github.com/vanilla-extract-css/vanilla-extract/pull/949) [`2fc56e8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2fc56e851934ad99de44de012910bca20b74da69) Thanks [@CXZ7720](https://github.com/CXZ7720)! - Adds vite v4 to peer dependencies\n\n* [#952](https://github.com/vanilla-extract-css/vanilla-extract/pull/952) [`a677c46`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a677c46217b7860bf0f3c1ace5d39463ce7b1914) Thanks [@endigma](https://github.com/endigma)! - Whitelist `vite-plugin-svelte` to enable emitting CSS on the server\n\n* Updated dependencies [[`eea3c7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/eea3c7d1595cd881e68cfbb279c641dc2fdd9101), [`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a)]:\n  - @vanilla-extract/integration@6.0.2\n\n## 3.7.0\n\n### Minor Changes\n\n- [#895](https://github.com/vanilla-extract-css/vanilla-extract/pull/895) [`2eb89ae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2eb89aee99f6982b95fb823cea2c3adcb71a5798) Thanks [@wmertens](https://github.com/wmertens)! - Add support for Qwik\n\n### Patch Changes\n\n- Updated dependencies [[`2d08761`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d08761598668c0e7066837ccb0be7b4d5637701)]:\n  - @vanilla-extract/integration@6.0.1\n\n## 3.6.1\n\n### Patch Changes\n\n- [#845](https://github.com/vanilla-extract-css/vanilla-extract/pull/845) [`b6aa8b6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b6aa8b628a8c0a4ac3833b2e27a40aed729845da) Thanks [@tom-sherman](https://github.com/tom-sherman)! - Adds vite v3 to peer dependencies\n\n## 3.6.0\n\n### Minor Changes\n\n- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add automatic debug IDs\n\n  Automatic debug IDs allow your styles and other identifiers (e.g. CSS Vars, keyframes, etc) to have names that more closely reflect your source code when in development. This makes it easier to understand how the CSS output links to your source code.\n\n  ```ts\n  // styles.css.ts\n\n  // redBox ~= 'styles_redBox_asdfgj'\n  const redBox = style({\n    background: 'red'\n  });\n  ```\n\n### Patch Changes\n\n- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:\n  - @vanilla-extract/integration@6.0.0\n\n## 3.5.0\n\n### Minor Changes\n\n- [#825](https://github.com/vanilla-extract-css/vanilla-extract/pull/825) [`ef905c3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ef905c32765232bf2e4a64c3bc193853a3c3ba4d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add experimental support for [SolidStart](https://github.com/solidjs/solid-start)\n\n## 3.4.0\n\n### Minor Changes\n\n- [#796](https://github.com/vanilla-extract-css/vanilla-extract/pull/796) [`ee83020`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ee830206ab493b7bc08bb629eafdae841256a177) Thanks [@mechairoi](https://github.com/mechairoi)! - Add experimental support for [Astro](https://astro.build/)\n\n## 3.3.1\n\n### Patch Changes\n\n- [#781](https://github.com/vanilla-extract-css/vanilla-extract/pull/781) [`4fb9a2c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4fb9a2c544165dbc3bfbc8d0687b7589cd53e391) Thanks [@benjervis](https://github.com/benjervis)! - Adds a check for the existence of import.meta.hot before attempting to add an event listener to inject styles\n\n## 3.3.0\n\n### Minor Changes\n\n- [#751](https://github.com/vanilla-extract-css/vanilla-extract/pull/751) [`8c4f71b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8c4f71bce455e551cdce90840b6d6dbde80ccc5b) Thanks [@frandiox](https://github.com/frandiox)! - Add [experimental support for React Server Components](https://github.com/facebook/react/pull/22952)\n\n### Patch Changes\n\n- [#751](https://github.com/vanilla-extract-css/vanilla-extract/pull/751) [`8c4f71b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8c4f71bce455e551cdce90840b6d6dbde80ccc5b) Thanks [@frandiox](https://github.com/frandiox)! - Fix HMR\n\n## 3.2.1\n\n### Patch Changes\n\n- [#729](https://github.com/vanilla-extract-css/vanilla-extract/pull/729) [`02ea735`](https://github.com/vanilla-extract-css/vanilla-extract/commit/02ea73552d1c1b9b7b9ec44be00d89413e28a97f) Thanks [@danielroe](https://github.com/danielroe)! - Generate CSS and not HMR code if vite server is present in production mode\n\n## 3.2.0\n\n### Minor Changes\n\n- [#668](https://github.com/vanilla-extract-css/vanilla-extract/pull/668) [`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Add esbuild configurations to vite/esbuild/rollup plugins\n\n### Patch Changes\n\n- Updated dependencies [[`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3)]:\n  - @vanilla-extract/integration@5.0.0\n\n## 3.1.7\n\n### Patch Changes\n\n- [#716](https://github.com/vanilla-extract-css/vanilla-extract/pull/716) [`9b6f3ea`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b6f3ea4160c84e48172ea01b922888dbc7f7c81) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix unresolvable imports inside monorepos\n\n* [#707](https://github.com/vanilla-extract-css/vanilla-extract/pull/707) [`162b66f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/162b66fb48262182846ff71a25d541e00257672c) Thanks [@AndrewLeedham](https://github.com/AndrewLeedham)! - Fix styles not updating in dev mode\n\n- [#706](https://github.com/vanilla-extract-css/vanilla-extract/pull/706) [`3fc5040`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3fc50406d5e57bb131eaebab42052cb1370cddff) Thanks [@graup](https://github.com/graup)! - Suppress empty sourcemap warnings\n\n## 3.1.6\n\n### Patch Changes\n\n- [#673](https://github.com/vanilla-extract-css/vanilla-extract/pull/673) [`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where `.css.ts` files with the same file path from other packages could have identifier collisions\n\n- Updated dependencies [[`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140)]:\n  - @vanilla-extract/integration@4.0.1\n\n## 3.1.5\n\n### Patch Changes\n\n- [#647](https://github.com/vanilla-extract-css/vanilla-extract/pull/647) [`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Use more realistic file paths for virtual CSS files\n\n- Updated dependencies [[`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636)]:\n  - @vanilla-extract/integration@4.0.0\n\n## 3.1.4\n\n### Patch Changes\n\n- [#628](https://github.com/vanilla-extract-css/vanilla-extract/pull/628) [`6fa65ad`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6fa65ad60b5e2aed05f1c3ab01f12c6c8f10a730) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix style imports from parent directories\n\n## 3.1.3\n\n### Patch Changes\n\n- Updated dependencies [[`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4)]:\n  - @vanilla-extract/integration@3.0.0\n\n## 3.1.2\n\n### Patch Changes\n\n- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12\n\n- Updated dependencies [[`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013)]:\n  - @vanilla-extract/integration@2.0.1\n\n## 3.1.1\n\n### Patch Changes\n\n- [#530](https://github.com/vanilla-extract-css/vanilla-extract/pull/530) [`0d7f912`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0d7f912e4f20f8aab0f8d00f797b91ae5005de4d) Thanks [@benjervis](https://github.com/benjervis)! - Fix compatibility issues with vite@2.7\n\n  Vite 2.7 introduced some [breaking changes](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#270-2021-12-07) around the way SSR was indicated in plugins.\n  The plugin has been updated to handle both the old and new formats, so it should support both 2.7 forward, as well as previous versions.\n\n## 3.1.0\n\n### Minor Changes\n\n- [#517](https://github.com/vanilla-extract-css/vanilla-extract/pull/517) [`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69) Thanks [@benjervis](https://github.com/benjervis)! - Add postcss processing to the plugin\n\n  Vite supports postcss processing as a built in feature, but that's lost in dev mode with vanilla-extract because there are no actual css files for vite to pick up.\n\n  The vite plugin now manually runs postcss over the generated css in serve mode, if any postcss config was found.\n\n### Patch Changes\n\n- Updated dependencies [[`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69)]:\n  - @vanilla-extract/integration@2.0.0\n\n## 3.0.1\n\n### Patch Changes\n\n- [#470](https://github.com/vanilla-extract-css/vanilla-extract/pull/470) [`a6383e8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a6383e86218a49b5dd9fa471e0776f8cb50c9d7f) Thanks [@Katarina-UBCO](https://github.com/Katarina-UBCO)! - Prefix `.vanilla.js` and `.vanilla.css` virtual modules with `virtual:vanilla-extract:`.\n\n## 3.0.0\n\n### Major Changes\n\n- [#422](https://github.com/vanilla-extract-css/vanilla-extract/pull/422) [`4e5ba05`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e5ba05549bc0baae8d82b9e9da9e69f032a1191) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove the `devStyleRuntime` option\n\n### Patch Changes\n\n- [#422](https://github.com/vanilla-extract-css/vanilla-extract/pull/422) [`4e5ba05`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e5ba05549bc0baae8d82b9e9da9e69f032a1191) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix HMR for pre-existing CSS\n\n  Previously, styles would not hot reload correctly when returning to a previously cached version\n\n## 2.1.3\n\n### Patch Changes\n\n- [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Fix plugin for watch mode.\n\n  The vite plugin previously relied on a one to one matching of resolve to load calls, and would clean up the CSS stored in memory after it was loaded.\n\n  This isn't true in `--watch` mode, as the same file can be loaded on the rebuild without having to be resolved, which the plugin now handles.\n\n* [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Update the \"vanilla-extract\" devStyleRuntime option.\n\n  When using the vanilla browser runtime in vite, it now operates on a new model where a .css.js file is generated, that uses @vanilla-extract/css/injectStyles to add the css to the browser.\n\n  This allows for hot reloading of styles, and makes styles a bit easier to debug at dev time (because they're actually visible).\n\n- [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Handle vite 2.6.\n\n  As of vite 2.6 and greater, `?used` gets appended to css imports, which causes the file imports to be not what we expected.\n\n  This caused mismatching classnames in the vite plugin, and it caused the babel plugin to not add filescopes when it should have.\n\n* [#409](https://github.com/vanilla-extract-css/vanilla-extract/pull/409) [`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0) Thanks [@benjervis](https://github.com/benjervis)! - Automatically optimize deps.\n\n  When using the new vanilla browser runtime, the new `injectStyles` dependency gets injected at runtime, so vite can't discover it ahead of time and pre-bundle it.\n\n  The plugin will now add the dependency to optimizeDeps if the vanilla runtime is being used so that it's optimized up front.\n  It also ensures that some relevant vanilla packages are externalised in SSR mode.\n\n* Updated dependencies [[`a9c5cb7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a9c5cb768ad10bd25dd1a31041733fc96cd467a0)]:\n  - @vanilla-extract/integration@1.4.3\n\n## 2.1.2\n\n### Patch Changes\n\n- [#398](https://github.com/vanilla-extract-css/vanilla-extract/pull/398) [`63f4ed0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/63f4ed0e67419df565f3f447cf27cec612afbb8d) Thanks [@benjervis](https://github.com/benjervis)! - Fixes a bug with vite where \"?used\" is appended to the file path of css files.\n\n  This could cause different class name hashes to be generated between SSR and client builds.\n  This was introduced in vite 2.6.0.\n\n## 2.1.1\n\n### Patch Changes\n\n- [#393](https://github.com/vanilla-extract-css/vanilla-extract/pull/393) [`2f379f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2f379f118c2a2fe6dc08a1cc15a395dbc0f17ece) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix compilation errors in Vite 2.6\n\n- Updated dependencies [[`2f379f1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2f379f118c2a2fe6dc08a1cc15a395dbc0f17ece)]:\n  - @vanilla-extract/integration@1.4.2\n\n## 2.1.0\n\n### Minor Changes\n\n- [#373](https://github.com/vanilla-extract-css/vanilla-extract/pull/373) [`a55d2cf`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a55d2cfd7c4ca9175a2c86557888df90907bfd0f) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `devStyleRuntime` option to allow switching between dev style runtimes\n\n  The built-in Vite dev style runtime (what adds styles to the page when running `vite serve`) doesn't seem to clean up old styles as expected. Passing `devStyleRuntime: 'vanilla-extract'` will instead use vanilla-extract's browser runtime. This pushes all style creation in development to the browser, but may give a better HMR experience.\n\n## 2.0.2\n\n### Patch Changes\n\n- [#341](https://github.com/vanilla-extract-css/vanilla-extract/pull/341) [`0b743e7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Refactor SSR file scoping to use centralised `addFileScope` implementation\n\n- Updated dependencies [[`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772), [`0b743e7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b)]:\n  - @vanilla-extract/integration@1.3.0\n\n## 2.0.1\n\n### Patch Changes\n\n- [#327](https://github.com/vanilla-extract-css/vanilla-extract/pull/327) [`73b55f8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/73b55f8e7e205701abdb1cbb029c3f2f5080b6fd) Thanks [@benjervis](https://github.com/benjervis)! - Fix bug where precompiled .css.ts files (.css.js) were treated differently in SSR mode.\n\n## 2.0.0\n\n### Major Changes\n\n- [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.\n  - `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n  - `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`\n\n  ```js\n  import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\n  vanillaExtractPlugin({ identifiers: 'short' });\n  ```\n\n  BREAKING CHANGE\n\n  Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to \"production\". By default, they will now be formatted according to Vite's [mode config](https://vitejs.dev/config/#mode).\n\n### Patch Changes\n\n- Updated dependencies [[`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275)]:\n  - @vanilla-extract/integration@1.2.0\n\n## 1.2.0\n\n### Minor Changes\n\n- [#311](https://github.com/vanilla-extract-css/vanilla-extract/pull/311) [`416eb9a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/416eb9ae99661597a8443594f4376aacf4d295cc) Thanks [@mattcompiles](https://github.com/mattcompiles)! - In SSR mode, move to runtime evaluation of vanilla-extract files\n\n  This unlocks the potential for CSS extraction on the server.\n\n## 1.1.2\n\n### Patch Changes\n\n- [#290](https://github.com/vanilla-extract-css/vanilla-extract/pull/290) [`adc1d64`](https://github.com/vanilla-extract-css/vanilla-extract/commit/adc1d644635a1197edd36f522f78658a641027d4) Thanks [@ygj6](https://github.com/ygj6)! - Normalize path of generated CSS files\n\n## 1.1.1\n\n### Patch Changes\n\n- [#270](https://github.com/vanilla-extract-css/vanilla-extract/pull/270) [`fe19158`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fe1915808b374a1bbf8f67eca85c0253153e2cb9) Thanks [@yyx990803](https://github.com/yyx990803)! - Fix watching of modules imported by `.css.ts` files\n\n## 1.1.0\n\n### Minor Changes\n\n- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of `composeStyles` to be used in selectors\n\n  When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.\n\n  ```ts\n  import {\n    style,\n    globalStyle,\n    composeStyles\n  } from '@vanilla-extract/css';\n\n  const background = style({ background: 'mintcream' });\n  const padding = style({ padding: 12 });\n\n  export const container = composeStyles(\n    background,\n    padding\n  );\n\n  globalStyle(`${container} *`, {\n    boxSizing: 'border-box'\n  });\n  ```\n\n### Patch Changes\n\n- Updated dependencies [[`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:\n  - @vanilla-extract/integration@1.1.0\n\n## 1.0.0\n\n### Major Changes\n\n- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1\n\n### Patch Changes\n\n- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:\n  - @vanilla-extract/integration@1.0.0\n\n## 0.1.1\n\n### Patch Changes\n\n- [#96](https://github.com/vanilla-extract-css/vanilla-extract/pull/96) [`697a233`](https://github.com/vanilla-extract-css/vanilla-extract/commit/697a2332cdb34886af26224c13f1efb73b6d36b3) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Change vite-plugin to be a named export\n\n  BREAKING CHANGE\n\n  ```diff\n  -import vanillaExtractPlugin from '@vanilla-extract/vite-plugin';\n  +import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\n  // vite.config.js\n  export default {\n    plugins: [vanillaExtractPlugin()]\n  }\n  ```\n"
  },
  {
    "path": "packages/vite-plugin/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/vite-plugin\",\n  \"version\": \"5.2.1\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-vite-plugin.cjs.js\",\n  \"module\": \"dist/vanilla-extract-vite-plugin.esm.js\",\n  \"types\": \"dist/vanilla-extract-vite-plugin.cjs.d.ts\",\n  \"files\": [\n    \"/dist\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/vite-plugin\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@vanilla-extract/compiler\": \"workspace:^\",\n    \"@vanilla-extract/integration\": \"workspace:^\"\n  },\n  \"devDependencies\": {\n    \"vite\": \"^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0\"\n  },\n  \"peerDependencies\": {\n    \"vite\": \"^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/vite-plugin/src/index.ts",
    "content": "import path from 'path';\n\nimport type {\n  Plugin,\n  ResolvedConfig,\n  ConfigEnv,\n  PluginOption,\n  TransformResult,\n  UserConfig,\n  ModuleNode,\n  ViteDevServer,\n} from 'vite';\nimport { type Compiler, createCompiler } from '@vanilla-extract/compiler';\nimport {\n  cssFileFilter,\n  type IdentifierOption,\n  getPackageInfo,\n  transform,\n  normalizePath,\n} from '@vanilla-extract/integration';\n\nconst PLUGIN_NAMESPACE = 'vite-plugin-vanilla-extract';\nconst virtualExtCss = '.vanilla.css';\n\nconst isVirtualId = (id: string) => id.endsWith(virtualExtCss);\nconst fileIdToVirtualId = (id: string) => `${id}${virtualExtCss}`;\nconst virtualIdToFileId = (virtualId: string) =>\n  virtualId.slice(0, -virtualExtCss.length);\n\nconst isPluginObject = (plugin: PluginOption): plugin is Plugin =>\n  typeof plugin === 'object' && plugin !== null && 'name' in plugin;\n\ntype PluginFilter = (filterProps: {\n  /** The name of the plugin */\n  name: string;\n  /**\n   * The `mode` vite is running in.\n   * @see https://vite.dev/guide/env-and-mode.html#modes\n   */\n  mode: string;\n}) => boolean;\n\ninterface Options {\n  identifiers?: IdentifierOption;\n  unstable_pluginFilter?: PluginFilter;\n  unstable_mode?: 'transform' | 'emitCss' | 'inlineCssInDev';\n}\n\n// Plugins that we know are compatible with the `vite-node` compiler\n// and don't need to be filtered out.\nconst COMPATIBLE_PLUGINS = ['vite-tsconfig-paths'];\n\nconst defaultPluginFilter: PluginFilter = ({ name }) =>\n  COMPATIBLE_PLUGINS.includes(name);\n\nconst withUserPluginFilter =\n  ({ mode, pluginFilter }: { mode: string; pluginFilter: PluginFilter }) =>\n  (plugin: Plugin) =>\n    pluginFilter({ name: plugin.name, mode });\n\nexport function vanillaExtractPlugin({\n  identifiers,\n  unstable_pluginFilter: pluginFilter = defaultPluginFilter,\n  unstable_mode = 'emitCss',\n}: Options = {}): Plugin[] {\n  let config: ResolvedConfig;\n  let configEnv: ConfigEnv;\n  let server: ViteDevServer;\n  let packageName: string;\n  let compiler: Compiler | undefined;\n  let isBuild: boolean;\n  const vitePromise = import('vite');\n\n  const transformedModules = new Set<string>();\n\n  const getIdentOption = () =>\n    identifiers ?? (config.mode === 'production' ? 'short' : 'debug');\n  const getAbsoluteId = (filePath: string) => {\n    let resolvedId = filePath;\n\n    if (\n      filePath.startsWith(config.root) ||\n      // In monorepos the absolute path will be outside of config.root, so we check that they have the same root on the file system\n      // Paths from vite are always normalized, so we have to use the posix path separator\n      (path.isAbsolute(filePath) &&\n        filePath.split(path.posix.sep)[1] ===\n          config.root.split(path.posix.sep)[1])\n    ) {\n      resolvedId = filePath;\n    } else {\n      // In SSR mode we can have paths like /app/styles.css.ts\n      resolvedId = path.join(config.root, filePath);\n    }\n\n    return normalizePath(resolvedId);\n  };\n\n  /**\n   * Custom invalidation function that takes a chain of importers to invalidate. If an importer is a\n   * VE module, its virtual CSS is invalidated instead. Otherwise, the module is invalidated\n   * normally.\n   */\n  const invalidateImporterChain = ({\n    importerChain,\n    server,\n    timestamp,\n  }: {\n    importerChain: Set<ModuleNode>;\n    server: ViteDevServer;\n    timestamp: number;\n  }) => {\n    const { moduleGraph } = server;\n\n    const seen = new Set<ModuleNode>();\n\n    for (const mod of importerChain) {\n      if (mod.id && cssFileFilter.test(mod.id)) {\n        const virtualModules = moduleGraph.getModulesByFile(\n          fileIdToVirtualId(mod.id),\n        );\n\n        for (const virtualModule of virtualModules ?? []) {\n          moduleGraph.invalidateModule(virtualModule, seen, timestamp, true);\n        }\n      } else if (mod.id) {\n        // `mod` is from the compiler's internal Vite server, so look up the\n        // corresponding module in the consuming server's graph by ID\n        const serverMod = moduleGraph.getModuleById(mod.id);\n        if (serverMod) {\n          moduleGraph.invalidateModule(serverMod, seen, timestamp, true);\n        }\n      }\n    }\n  };\n\n  return [\n    {\n      name: `${PLUGIN_NAMESPACE}-inline-dev-css`,\n      apply: (_, { command }) =>\n        command === 'serve' && unstable_mode === 'inlineCssInDev',\n      transformIndexHtml: async () => {\n        const allCss = compiler?.getAllCss();\n\n        if (!allCss) {\n          return [];\n        }\n\n        return [\n          {\n            tag: 'style',\n            children: allCss,\n            attrs: {\n              type: 'text/css',\n              'data-vanilla-extract-inline-dev-css': true,\n            },\n            injectTo: 'head-prepend',\n          },\n        ];\n      },\n    },\n    {\n      name: PLUGIN_NAMESPACE,\n      configureServer(_server) {\n        server = _server;\n\n        server.watcher.on('unlink', (file) => {\n          transformedModules.delete(normalizePath(file));\n        });\n      },\n      config(_userConfig, _configEnv) {\n        configEnv = _configEnv;\n        return {\n          ssr: {\n            external: [\n              '@vanilla-extract/css',\n              '@vanilla-extract/css/fileScope',\n              '@vanilla-extract/css/adapter',\n            ],\n          },\n        };\n      },\n      configResolved(_resolvedConfig) {\n        config = _resolvedConfig;\n        isBuild = config.command === 'build' && !config.build.watch;\n        packageName = getPackageInfo(config.root).name;\n      },\n      async buildStart() {\n        // Ensure we re-use the compiler instance between builds, e.g. in watch mode\n        if (unstable_mode !== 'transform' && !compiler) {\n          const { loadConfigFromFile } = await vitePromise;\n\n          let configForViteCompiler: UserConfig | undefined;\n\n          // The user has a vite config file\n          if (config.configFile) {\n            const configFile = await loadConfigFromFile(\n              {\n                command: config.command,\n                mode: config.mode,\n                isSsrBuild: configEnv.isSsrBuild,\n              },\n              config.configFile,\n            );\n\n            configForViteCompiler = configFile?.config;\n          }\n          // The user is using a vite-based framework that has a custom config file\n          else {\n            configForViteCompiler = config.inlineConfig;\n          }\n\n          const viteConfig = {\n            ...configForViteCompiler,\n            plugins: configForViteCompiler?.plugins\n              ?.flat()\n              .filter(isPluginObject)\n              .filter(\n                withUserPluginFilter({ mode: config.mode, pluginFilter }),\n              ),\n          };\n\n          compiler = createCompiler({\n            root: config.root,\n            identifiers: getIdentOption(),\n            cssImportSpecifier: fileIdToVirtualId,\n            viteConfig,\n            enableFileWatcher: !isBuild,\n          });\n        }\n      },\n      buildEnd() {\n        // When using the rollup watcher, we don't want to close the compiler after every build.\n        // Instead, we close it when the watcher is closed via the closeWatcher hook.\n        if (!config.build.watch) {\n          compiler?.close();\n        }\n      },\n      closeWatcher() {\n        return compiler?.close();\n      },\n      async transform(code, id, options) {\n        const [validId] = id.split('?');\n\n        if (!cssFileFilter.test(validId)) {\n          return null;\n        }\n\n        const identOption = getIdentOption();\n        const normalizedId = normalizePath(validId);\n\n        if (unstable_mode === 'transform') {\n          transformedModules.add(normalizedId);\n\n          return transform({\n            source: code,\n            filePath: normalizedId,\n            rootPath: config.root,\n            packageName,\n            identOption,\n          });\n        }\n\n        if (!compiler) {\n          return null;\n        }\n\n        const absoluteId = getAbsoluteId(validId);\n\n        const { source, watchFiles } = await compiler.processVanillaFile(\n          absoluteId,\n          { outputCss: true },\n        );\n\n        transformedModules.add(normalizedId);\n\n        const result: TransformResult = {\n          code: source,\n          map: { mappings: '' },\n        };\n\n        // We don't need to watch files or invalidate modules in build mode or during SSR\n        if (isBuild || options?.ssr) {\n          return result;\n        }\n\n        for (const file of watchFiles) {\n          if (\n            !file.includes('node_modules') &&\n            normalizePath(file) !== absoluteId\n          ) {\n            this.addWatchFile(file);\n          }\n        }\n\n        return result;\n      },\n      // The compiler's module graph is always a subset of the consuming Vite dev server's module\n      // graph, so this early exit will be hit for any modules that aren't related to VE modules.\n      async handleHotUpdate({ file, server, timestamp }) {\n        if (!compiler) {\n          return;\n        }\n\n        const importerChain = await compiler.findImporterTree(\n          normalizePath(file),\n          transformedModules,\n        );\n\n        if (importerChain.size === 0) {\n          return;\n        }\n\n        invalidateImporterChain({\n          importerChain,\n          server,\n          timestamp,\n        });\n      },\n      resolveId(source) {\n        const [validId, query] = source.split('?');\n\n        if (!isVirtualId(validId)) return;\n\n        const absoluteId = getAbsoluteId(validId);\n\n        if (\n          // We should always have CSS for a file here.\n          // The only valid scenario for a missing one is if someone had written\n          // a file in their app using the .vanilla.js/.vanilla.css extension\n          compiler?.getCssForFile(virtualIdToFileId(absoluteId))\n        ) {\n          // Keep the original query string for HMR.\n          return absoluteId + (query ? `?${query}` : '');\n        }\n      },\n      load(id) {\n        const [validId] = id.split('?');\n\n        if (!isVirtualId(validId) || !compiler) return;\n\n        const absoluteId = getAbsoluteId(validId);\n\n        const { css } = compiler.getCssForFile(virtualIdToFileId(absoluteId));\n\n        return css;\n      },\n    },\n  ];\n}\n"
  },
  {
    "path": "packages/webpack-plugin/CHANGELOG.md",
    "content": "# @vanilla-extract/webpack-plugin\n\n## 2.3.26\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.8\n\n## 2.3.25\n\n### Patch Changes\n\n- Updated dependencies [[`a440470`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a440470b9912aab705ae32cd5248ff6479535704)]:\n  - @vanilla-extract/integration@8.0.7\n\n## 2.3.24\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.6\n\n## 2.3.23\n\n### Patch Changes\n\n- Updated dependencies [[`ad5a08b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ad5a08b1a8117ccf7f7778895c193943918124e1)]:\n  - @vanilla-extract/integration@8.0.5\n\n## 2.3.22\n\n### Patch Changes\n\n- [#1610](https://github.com/vanilla-extract-css/vanilla-extract/pull/1610) [`2b0be1b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2b0be1be15dcdc3df3248305fe80e566cce794cd) Thanks [@askoufis](https://github.com/askoufis)! - Revert \"Improve ESM package entrypoints (#1597)\" to fix `Named export not found` error when importing ESM entrypoints\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.4\n\n## 2.3.21\n\n### Patch Changes\n\n- [#1602](https://github.com/vanilla-extract-css/vanilla-extract/pull/1602) [`7a78ebe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7a78ebeaad015d072664206cdbe59642399b405b) Thanks [@Pnlvfx](https://github.com/Pnlvfx)! - Fix `require is not defined` error in ESM bundles by calling `createRequire`\n\n## 2.3.20\n\n### Patch Changes\n\n- [#1597](https://github.com/vanilla-extract-css/vanilla-extract/pull/1597) [`a7fccf8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a7fccf8a2626d610c060e095e0b9fb48a4ca5c9e) Thanks [@drwpow](https://github.com/drwpow)! - Fix ESM import path\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.3\n\n## 2.3.19\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@8.0.2\n\n## 2.3.18\n\n### Patch Changes\n\n- Updated dependencies [[`965fd03`](https://github.com/vanilla-extract-css/vanilla-extract/commit/965fd03ff26dd324ec24734aa7700f1fe89bd483)]:\n  - @vanilla-extract/integration@8.0.1\n\n## 2.3.17\n\n### Patch Changes\n\n- Updated dependencies [[`5f66abb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5f66abbd607e76d491bbb7b9bfe9c64c882a53e8), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3), [`ec0b024`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ec0b024fd19c133c233445f9e860626d104f9d97), [`a8248be`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a8248befac51aa51d771b9b22a46209b1fd1e3b3)]:\n  - @vanilla-extract/integration@8.0.0\n\n## 2.3.16\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.12\n\n## 2.3.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.11\n\n## 2.3.14\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.10\n\n## 2.3.13\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047)]:\n  - @vanilla-extract/integration@7.1.9\n\n## 2.3.12\n\n### Patch Changes\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n\n## 2.3.11\n\n### Patch Changes\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n\n## 2.3.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/integration@7.1.6\n\n## 2.3.9\n\n### Patch Changes\n\n- [#1335](https://github.com/vanilla-extract-css/vanilla-extract/pull/1335) [`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17) Thanks [@askoufis](https://github.com/askoufis)! - Add `types` field to `package.json`\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n\n## 2.3.8\n\n### Patch Changes\n\n- [#1385](https://github.com/vanilla-extract-css/vanilla-extract/pull/1385) [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a) Thanks [@askoufis](https://github.com/askoufis)! - Replace `chalk` dependency with `picocolors`\n\n- Updated dependencies [[`606660618dc5efa6c529f77cebf9d2b8dc379dbd`](https://github.com/vanilla-extract-css/vanilla-extract/commit/606660618dc5efa6c529f77cebf9d2b8dc379dbd), [`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb)]:\n  - @vanilla-extract/integration@7.1.3\n\n## 2.3.7\n\n### Patch Changes\n\n- [#1333](https://github.com/vanilla-extract-css/vanilla-extract/pull/1333) [`6ac9f66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6ac9f667cdfde0050e40cf5eaf8ae03078f5d26d) Thanks [@askoufis](https://github.com/askoufis)! - Use a more accurate regex for detecting [webpack template strings] in paths\n\n  We now use a modified version of the regex from the webpack source code to detect template strings in paths.\n  As long as the path isn't already escaped, we should detect it.\n\n  [webpack template strings]: https://webpack.js.org/configuration/output/#template-strings\n\n## 2.3.6\n\n### Patch Changes\n\n- Updated dependencies [[`fdafb6d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fdafb6dff4d3e4455a1a2f5e48e446e11add2c14)]:\n  - @vanilla-extract/integration@7.0.0\n\n## 2.3.5\n\n### Patch Changes\n\n- [#1247](https://github.com/vanilla-extract-css/vanilla-extract/pull/1247) [`f0c3be9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f0c3be99ca437fb1f61ecde58fdf58cccc3256bb) Thanks [@askoufis](https://github.com/askoufis)! - Fixes a bug that was causing style compilation to fail on paths containing [webpack template strings] such as `[id]` or [Next.js dynamic routes] such as `[slug]`.\n\n  [webpack template strings]: https://webpack.js.org/configuration/output/#template-strings\n  [next.js dynamic routes]: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes\n\n- Updated dependencies [[`545bf82`](https://github.com/vanilla-extract-css/vanilla-extract/commit/545bf82f127598ac72265164c72e1a1aad558491)]:\n  - @vanilla-extract/integration@6.5.0\n\n## 2.3.4\n\n### Patch Changes\n\n- [#1264](https://github.com/vanilla-extract-css/vanilla-extract/pull/1264) [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a) Thanks [@mrm007](https://github.com/mrm007)! - Update dependencies\n\n- Updated dependencies [[`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a), [`e531c41`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531c4170da11ba6446e256b3af04a288841491a)]:\n  - @vanilla-extract/integration@6.4.0\n\n## 2.3.3\n\n### Patch Changes\n\n- [#1291](https://github.com/vanilla-extract-css/vanilla-extract/pull/1291) [`00af971`](https://github.com/vanilla-extract-css/vanilla-extract/commit/00af9715e522d9caf6e90cb138dee13580b8dea1) Thanks [@mrm007](https://github.com/mrm007)! - Update dependency `@vanilla-extract/integration`\n\n- [#1254](https://github.com/vanilla-extract-css/vanilla-extract/pull/1254) [`f373d7f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f373d7f6b59f43236dc713e1b421ef4631f392c0) Thanks [@EvgenNoskov](https://github.com/EvgenNoskov)! - Allow hyphens in class names when using a custom identifier\n\n## 2.3.2\n\n### Patch Changes\n\n- [#1262](https://github.com/vanilla-extract-css/vanilla-extract/pull/1262) [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e) Thanks [@mrm007](https://github.com/mrm007)! - Update Babel config to target Node.js 14\n\n- Updated dependencies [[`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e), [`610c50b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/610c50b0012ece0d06530faab3f5e442a55fc39e)]:\n  - @vanilla-extract/integration@6.2.5\n\n## 2.3.1\n\n### Patch Changes\n\n- [#1180](https://github.com/vanilla-extract-css/vanilla-extract/pull/1180) [`89224fe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/89224fe9d68d984f818ec3d4496952e4e919a241) Thanks [@syfxlin](https://github.com/syfxlin)! - Fixes Next.js 13 CSS output on Windows when using React Server Components\n\n## 2.3.0\n\n### Minor Changes\n\n- [#1160](https://github.com/vanilla-extract-css/vanilla-extract/pull/1160) [`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180) Thanks [@SombreroElGringo](https://github.com/SombreroElGringo)! - Users can now provide a custom identifier hashing function\n\n## 2.2.0\n\n### Minor Changes\n\n- [#827](https://github.com/vanilla-extract-css/vanilla-extract/pull/827) [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove requirement for `@vanilla-extract/babel-plugin`\n\n  Previously, to get automatic debug IDs you needed to use Babel with the `@vanilla-extract/babel-plugin` in your config. As this is no longer the case, the `@vanilla-extract/babel-plugin` should be removed completely from your project.\n\n### Patch Changes\n\n- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:\n  - @vanilla-extract/integration@6.0.0\n\n## 2.1.12\n\n### Patch Changes\n\n- [#783](https://github.com/vanilla-extract-css/vanilla-extract/pull/783) [`21afc23`](https://github.com/vanilla-extract-css/vanilla-extract/commit/21afc23ae552b8071fbe5d7b0c3dce07fc016ee7) Thanks [@benjervis](https://github.com/benjervis)! - Remove the `extracted` entrypoint from the webpack plugin.\n\n## 2.1.11\n\n### Patch Changes\n\n- Updated dependencies [[`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3)]:\n  - @vanilla-extract/integration@5.0.0\n\n## 2.1.10\n\n### Patch Changes\n\n- [#673](https://github.com/vanilla-extract-css/vanilla-extract/pull/673) [`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where `.css.ts` files with the same file path from other packages could have identifier collisions\n\n- Updated dependencies [[`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140)]:\n  - @vanilla-extract/integration@4.0.1\n\n## 2.1.9\n\n### Patch Changes\n\n- [#647](https://github.com/vanilla-extract-css/vanilla-extract/pull/647) [`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Use more realistic file paths for virtual CSS files\n\n- Updated dependencies [[`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636)]:\n  - @vanilla-extract/integration@4.0.0\n\n## 2.1.8\n\n### Patch Changes\n\n- [#634](https://github.com/vanilla-extract-css/vanilla-extract/pull/634) [`69b8460`](https://github.com/vanilla-extract-css/vanilla-extract/commit/69b846015ecada3354ea292e1276e5da560923c6) Thanks [@phil-lgr](https://github.com/phil-lgr)! - Add fileName to the CSS virtual loader params\n\n  This allows users to identify the source file for vanilla-extract css imports\n\n## 2.1.7\n\n### Patch Changes\n\n- [#645](https://github.com/vanilla-extract-css/vanilla-extract/pull/645) [`5ebca75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5ebca758d18e7d55d0c079c00178cb14e936ac2e) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Bump `@vanilla-extract/integration` dep\n\n## 2.1.6\n\n### Patch Changes\n\n- [#621](https://github.com/vanilla-extract-css/vanilla-extract/pull/621) [`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9) Thanks [@nayaabkhan](https://github.com/nayaabkhan)! - Improve build performance when creating large CSS files\n\n- Updated dependencies [[`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4), [`e1550da`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e1550dac59011c8161317f5f0b792a0dd520bbd4)]:\n  - @vanilla-extract/integration@3.0.0\n\n## 2.1.5\n\n### Patch Changes\n\n- [#543](https://github.com/vanilla-extract-css/vanilla-extract/pull/543) [`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure code is compatible with node 12\n\n- Updated dependencies [[`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013)]:\n  - @vanilla-extract/integration@2.0.1\n\n## 2.1.4\n\n### Patch Changes\n\n- Updated dependencies [[`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69)]:\n  - @vanilla-extract/integration@2.0.0\n\n## 2.1.3\n\n### Patch Changes\n\n- [#508](https://github.com/vanilla-extract-css/vanilla-extract/pull/508) [`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `exports` field to `package.json` so nested package paths can be imported in a Node.js ESM context\n\n## 2.1.2\n\n### Patch Changes\n\n- [#492](https://github.com/vanilla-extract-css/vanilla-extract/pull/492) [`f2d2d9e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f2d2d9eea18dcd4ffec694f8056a78d850485592) Thanks [@benjervis](https://github.com/benjervis)! - Fix requiring of webpack loader\n\n  Previously, the webpack plugin would reference itself as a loader by requiring `@vanilla-extract/webpack-plugin/loader`, but this was technically incorrect, and only worked because of the flat node_modules structure that yarn provides.\n\n  When using a package manager like pnpm, which does not have a flat structure, this breaks.\n\n  This change uses relative references internally to ensure that the loader can always be required.\n\n## 2.1.1\n\n### Patch Changes\n\n- [#459](https://github.com/vanilla-extract-css/vanilla-extract/pull/459) [`2719dc0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2719dc0b75172bb43648ddf2a3f2f31f58e42426) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove unused files and dependencies\n\n* [#459](https://github.com/vanilla-extract-css/vanilla-extract/pull/459) [`2719dc0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2719dc0b75172bb43648ddf2a3f2f31f58e42426) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove \"Styles detected outside of '.css.(ts/js)' files\" error\n\n  This error could occasionally cause false positives, and was inconsistent with the rest of the integrations.\n\n## 2.1.0\n\n### Minor Changes\n\n- [#341](https://github.com/vanilla-extract-css/vanilla-extract/pull/341) [`0b743e7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - No longer require Babel to be run on .css.ts files\n\n  Previously, the `@vanilla-extract/webpack-plugin` required the `@vanilla-extract/babel-plugin` to be run over .css.ts files. In order to bring webpack inline with the other integrations, the `@vanilla-extract/webpack-plugin` can now be used without Babel.\n\n  Note: Automatic debug IDs still require the `@vanilla-extract/babel-plugin`.\n\n### Patch Changes\n\n- Updated dependencies [[`50bae14`](https://github.com/vanilla-extract-css/vanilla-extract/commit/50bae14bf38c8a971ad1727cb8e827c86da06772), [`0b743e7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0b743e744447616f8daf0c6b88beff8ffef8d41b)]:\n  - @vanilla-extract/integration@1.3.0\n\n## 2.0.0\n\n### Major Changes\n\n- [#323](https://github.com/vanilla-extract-css/vanilla-extract/pull/323) [`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.\n\n  - `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n  - `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`\n\n  ```js\n  import { vanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';\n\n  vanillaExtractPlugin({ identifiers: 'short' });\n  ```\n\n  BREAKING CHANGE\n\n  Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to \"production\". By default, they will now be formatted according to webpack's [mode config](https://webpack.js.org/configuration/mode/).\n\n### Patch Changes\n\n- Updated dependencies [[`1e7d647`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1e7d6470398a0fbcbdef4118e678150932cd9275)]:\n  - @vanilla-extract/integration@1.2.0\n\n## 1.1.0\n\n### Minor Changes\n\n- [#259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259) [`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Allow the result of `composeStyles` to be used in selectors\n\n  When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors.\n\n  ```ts\n  import {\n    style,\n    globalStyle,\n    composeStyles\n  } from '@vanilla-extract/css';\n\n  const background = style({ background: 'mintcream' });\n  const padding = style({ padding: 12 });\n\n  export const container = composeStyles(\n    background,\n    padding\n  );\n\n  globalStyle(`${container} *`, {\n    boxSizing: 'border-box'\n  });\n  ```\n\n### Patch Changes\n\n- [#260](https://github.com/vanilla-extract-css/vanilla-extract/pull/260) [`c3d9d78`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c3d9d7843cc9cf1d326c8f3ae1d2bd1294cf1b0c) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Remove unused compiler cache\n\n- Updated dependencies [[`b8a6441`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a6441e3400be388a520e3acf94f3bb6519cf0a)]:\n  - @vanilla-extract/integration@1.1.0\n\n## 1.0.3\n\n### Patch Changes\n\n- [#208](https://github.com/vanilla-extract-css/vanilla-extract/pull/208) [`a1c79fc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a1c79fc10c5cf7f30dce0269f9183dfd4f2456e9) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Deprecate redundant `allowRuntime` option\n\n## 1.0.2\n\n### Patch Changes\n\n- [#195](https://github.com/vanilla-extract-css/vanilla-extract/pull/195) [`1099b34`](https://github.com/vanilla-extract-css/vanilla-extract/commit/1099b34437757522799c26bec7471df209ef9b36) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue when @vanilla-extract/webpack-plugin is nested within a separate node_modules folder\n\n## 1.0.1\n\n### Patch Changes\n\n- [#181](https://github.com/vanilla-extract-css/vanilla-extract/pull/181) [`7a63af8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7a63af8212edfb842261db4d1cca88cce8612764) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Fix issue where CSS can be duplicated in some scenarios\n\n## 1.0.0\n\n### Major Changes\n\n- [#171](https://github.com/vanilla-extract-css/vanilla-extract/pull/171) [`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1\n\n### Patch Changes\n\n- Updated dependencies [[`84a8611`](https://github.com/vanilla-extract-css/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869)]:\n  - @vanilla-extract/integration@1.0.0\n\n## 0.3.1\n\n### Patch Changes\n\n- [#134](https://github.com/vanilla-extract-css/vanilla-extract/pull/134) [`b99dd0a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b99dd0a2d6ce171b4776aa11d0ab2c7e1559ddae) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Move shared logic to integration package\n\n## 0.3.0\n\n### Minor Changes\n\n- [#53](https://github.com/vanilla-extract-css/vanilla-extract/pull/53) [`58e4f8a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/58e4f8aa6a2c56c5f26408539756529705a598b8) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Support exporting functions from `.css.ts` files via recipes\n\n### Patch Changes\n\n- Updated dependencies [[`48c4a78`](https://github.com/vanilla-extract-css/vanilla-extract/commit/48c4a7866a8361de712b89b06abb380bf4709656), [`2d98bcc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2d98bccb40603585cf9eab70ff0afc52c33f803d)]:\n  - @vanilla-extract/css@0.4.0\n\n## 0.2.1\n\n### Patch Changes\n\n- Updated dependencies [[`156b491`](https://github.com/vanilla-extract-css/vanilla-extract/commit/156b49182367bf233564eae7fd3ea9d3f50fd68a), [`ae9864c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ae9864c727c2edd0d415b77f738a3c959c98fca6), [`756d9b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/756d9b0d0305e8b8a63f0ca1ebe635ab320a5f5b)]:\n  - @vanilla-extract/css@0.3.0\n\n## 0.2.0\n\n### Minor Changes\n\n- [#20](https://github.com/vanilla-extract-css/vanilla-extract/pull/20) [`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Ensure generated hashes are scoped by package\n\n  vanilla-extract uses file path to ensure unique identifier (e.g. class names, CSS Variables, keyframes, etc) hashes across your application. This information is added to your `*.css.ts` files at build time. The issue with this approach is it meant `*.css.ts` files couldn't be pre-compiled when being published to npm.\n\n  This change adds support for pre-compilation of packages by adding package name information to identifier hashes.\n\n### Patch Changes\n\n- Updated dependencies [[`3311914`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3311914d92406cda5d5bb71ee72075501f868bd5), [`c4bedd5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/c4bedd571f0c21291b58e050589b4db9465c0460)]:\n  - @vanilla-extract/css@0.2.0\n\n## 0.1.0\n\n### Minor Changes\n\n- e83ad50: Initial release\n\n### Patch Changes\n\n- Updated dependencies [e83ad50]\n  - @vanilla-extract/css@0.1.0\n"
  },
  {
    "path": "packages/webpack-plugin/extracted.js",
    "content": "// This is a noop file for extracted CSS source to point to\n// Webpack requires a file to exist on disk for virtual source files\n"
  },
  {
    "path": "packages/webpack-plugin/loader/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-webpack-plugin-loader.cjs.js\",\n  \"module\": \"dist/vanilla-extract-webpack-plugin-loader.esm.js\"\n}\n"
  },
  {
    "path": "packages/webpack-plugin/next/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-webpack-plugin-next.cjs.js\",\n  \"module\": \"dist/vanilla-extract-webpack-plugin-next.esm.js\"\n}\n"
  },
  {
    "path": "packages/webpack-plugin/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/webpack-plugin\",\n  \"version\": \"2.3.26\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript\",\n  \"main\": \"dist/vanilla-extract-webpack-plugin.cjs.js\",\n  \"module\": \"dist/vanilla-extract-webpack-plugin.esm.js\",\n  \"types\": \"dist/vanilla-extract-webpack-plugin.cjs.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/vanilla-extract-webpack-plugin.cjs.d.ts\",\n      \"module\": \"./dist/vanilla-extract-webpack-plugin.esm.js\",\n      \"default\": \"./dist/vanilla-extract-webpack-plugin.cjs.js\"\n    },\n    \"./loader\": {\n      \"types\": \"./loader/dist/vanilla-extract-webpack-plugin-loader.cjs.d.ts\",\n      \"module\": \"./loader/dist/vanilla-extract-webpack-plugin-loader.esm.js\",\n      \"default\": \"./loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js\"\n    },\n    \"./virtualFileLoader\": {\n      \"types\": \"./virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.d.ts\",\n      \"module\": \"./virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.esm.js\",\n      \"default\": \"./virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js\"\n    },\n    \"./next\": {\n      \"types\": \"./next/dist/vanilla-extract-webpack-plugin-next.cjs.d.ts\",\n      \"module\": \"./next/dist/vanilla-extract-webpack-plugin-next.esm.js\",\n      \"default\": \"./next/dist/vanilla-extract-webpack-plugin-next.cjs.js\"\n    },\n    \"./virtualNextFileLoader\": {\n      \"types\": \"./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-virtualNextFileLoader.cjs.d.ts\",\n      \"module\": \"./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-virtualNextFileLoader.esm.js\",\n      \"default\": \"./virtualNextFileLoader/dist/vanilla-extract-webpack-plugin-virtualNextFileLoader.cjs.js\"\n    }\n  },\n  \"preconstruct\": {\n    \"entrypoints\": [\n      \"index.ts\",\n      \"loader.ts\",\n      \"virtualFileLoader.ts\",\n      \"next.ts\",\n      \"virtualNextFileLoader.ts\"\n    ]\n  },\n  \"files\": [\n    \"/dist\",\n    \"/loader\",\n    \"/virtualFileLoader\",\n    \"/next\",\n    \"/virtualNextFileLoader\",\n    \"extracted.js\",\n    \"vanilla.virtual.css\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/vanilla-extract-css/vanilla-extract.git\",\n    \"directory\": \"packages/webpack-plugin\"\n  },\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"peerDependencies\": {\n    \"webpack\": \"^4.30.0 || ^5.20.2\"\n  },\n  \"dependencies\": {\n    \"@vanilla-extract/integration\": \"workspace:^\",\n    \"debug\": \"^4.3.1\",\n    \"loader-utils\": \"^2.0.0\",\n    \"picocolors\": \"^1.0.0\"\n  },\n  \"devDependencies\": {\n    \"@types/debug\": \"^4.1.5\",\n    \"webpack\": \"^5.90.0\"\n  }\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/__snapshots__/compiler.test.ts.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`escapeWebpackTemplateString() > /some/path/[...slug].js pattern 1`] = `\"/some/path/[...slug].js\"`;\n\nexports[`escapeWebpackTemplateString() > /some/path/[[...slug]]/index.js pattern 1`] = `\"/some/path/[[...slug]]/index.js\"`;\n\nexports[`escapeWebpackTemplateString() > /some/path[]/[slug]/[[foo]]/index.js pattern 1`] = `\"/some/path[]/[\\\\slug\\\\]/[[\\\\foo\\\\]]/index.js\"`;\n"
  },
  {
    "path": "packages/webpack-plugin/src/compat.ts",
    "content": "import {\n  Compiler,\n  ExternalsPlugin,\n  Compilation,\n  Module,\n  node,\n  optimize,\n} from 'webpack';\n\nexport interface WebpackCompat {\n  isWebpack5: boolean;\n  getNodeTemplatePlugin: (compiler: Compiler) => typeof node.NodeTemplatePlugin;\n  getNodeTargetPlugin: (compiler: Compiler) => typeof node.NodeTargetPlugin;\n  getLimitChunkCountPlugin: (\n    compiler: Compiler,\n  ) => typeof optimize.LimitChunkCountPlugin;\n  getExternalsPlugin: (compiler: Compiler) => typeof ExternalsPlugin;\n  isModuleUsed: (compilation: Compilation, module: Module) => boolean;\n}\n\nconst webpack4: WebpackCompat = {\n  isWebpack5: false,\n  getNodeTemplatePlugin: () => require('webpack/lib/node/NodeTemplatePlugin'),\n  getNodeTargetPlugin: () => require('webpack/lib/node/NodeTargetPlugin'),\n  getLimitChunkCountPlugin: () =>\n    require('webpack/lib/optimize/LimitChunkCountPlugin'),\n  getExternalsPlugin: () => require('webpack/lib/ExternalsPlugin'),\n  isModuleUsed: (_compilation, module) =>\n    typeof module.used === 'boolean' ? module.used : true,\n};\n\nconst webpack5: WebpackCompat = {\n  isWebpack5: true,\n  getNodeTemplatePlugin: (compiler) => compiler.webpack.node.NodeTemplatePlugin,\n  getNodeTargetPlugin: (compiler) => compiler.webpack.node.NodeTargetPlugin,\n  getLimitChunkCountPlugin: (compiler) =>\n    compiler.webpack.optimize.LimitChunkCountPlugin,\n  getExternalsPlugin: (compiler) => compiler.webpack.ExternalsPlugin,\n  isModuleUsed: (compilation, module) => {\n    const exportsInfo = compilation.moduleGraph.getExportsInfo(module);\n\n    return exportsInfo.isModuleUsed('main');\n  },\n};\n\nexport default (isWebpack5: boolean): WebpackCompat => {\n  if (isWebpack5) {\n    return webpack5;\n  }\n  return webpack4;\n};\n"
  },
  {
    "path": "packages/webpack-plugin/src/compiler.test.ts",
    "content": "import { describe, expect, test } from 'vitest';\nimport { escapeWebpackTemplateString } from './compiler';\n\ndescribe('escapeWebpackTemplateString()', () => {\n  test.each([\n    '/some/path/[...slug].js',\n    '/some/path/[[...slug]]/index.js',\n    '/some/path[]/[slug]/[[foo]]/index.js',\n  ])('%s pattern', (filePath) => {\n    expect(escapeWebpackTemplateString(filePath)).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/webpack-plugin/src/compiler.ts",
    "content": "import type { LoaderContext } from './types';\nimport createCompat from './compat';\n\n// Should be \"ExternalsItem\" but webpack doesn't expose it\ntype Externals = any;\n\ninterface CompilationResult {\n  source: string;\n  fileDependencies: Array<string>;\n  contextDependencies: Array<string>;\n}\n\nconst getCompilerName = (resource: string) =>\n  `vanilla-extract-compiler:${resource}`;\n\nexport class ChildCompiler {\n  externals: Externals | undefined;\n\n  constructor(externals: Externals) {\n    this.externals = externals;\n  }\n\n  isChildCompiler(name: string | undefined): boolean {\n    return (\n      typeof name === 'string' && name.startsWith('vanilla-extract-compiler')\n    );\n  }\n\n  async getCompiledSource(loader: LoaderContext): Promise<{\n    source: string;\n    dependencies: string[];\n  }> {\n    const { source, fileDependencies, contextDependencies } =\n      await compileVanillaSource(loader, this.externals);\n\n    // Set loader dependencies to dependencies of the child compiler\n    fileDependencies.forEach((dep) => {\n      loader.addDependency(dep);\n    });\n    contextDependencies.forEach((dep) => {\n      loader.addContextDependency(dep);\n    });\n\n    return {\n      source,\n      dependencies: fileDependencies,\n    };\n  }\n}\n\nfunction getRootCompilation(loader: LoaderContext) {\n  var compiler = loader._compiler;\n  var compilation = loader._compilation;\n  while (compiler.parentCompilation) {\n    compilation = compiler.parentCompilation;\n    compiler = compilation.compiler;\n  }\n  return compilation;\n}\n\n// Modified version of webpack's regex for detecting template strings.\n// We only want to match un-escaped strings so we can escape them ourselves.\n// https://github.com/webpack/webpack/blob/87660921808566ef3b8796f8df61bd79fc026108/lib/TemplatedPathPlugin.js#L19\nconst templateStringRegexp = /\\[([\\w:]+)\\]/g;\n\nexport const escapeWebpackTemplateString = (s: string): string =>\n  s.replaceAll(templateStringRegexp, '[\\\\$1\\\\]');\n\nfunction compileVanillaSource(\n  loader: LoaderContext,\n  externals: Externals | undefined,\n): Promise<CompilationResult> {\n  return new Promise((resolve, reject) => {\n    const isWebpack5 = Boolean(\n      loader._compiler.webpack && loader._compiler.webpack.version,\n    );\n    const compat = createCompat(isWebpack5);\n\n    // Escape webpack template strings and Next.js dynamic routes in output files so they don't get replaced\n    // Non-standard escape syntax, see https://webpack.js.org/configuration/output/#template-strings\n    // and https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes\n    const outputOptions = {\n      filename: escapeWebpackTemplateString(loader.resourcePath),\n    };\n\n    // Child compiler will compile vanilla-extract files to be evaled during compilation\n    const compilerName = getCompilerName(loader.resourcePath);\n    const childCompiler = getRootCompilation(loader).createChildCompiler(\n      compilerName,\n      outputOptions,\n      [],\n    );\n\n    const NodeTemplatePlugin = compat.getNodeTemplatePlugin(loader._compiler);\n    const NodeTargetPlugin = compat.getNodeTargetPlugin(loader._compiler);\n    const LimitChunkCountPlugin = compat.getLimitChunkCountPlugin(\n      loader._compiler,\n    );\n    const ExternalsPlugin = compat.getExternalsPlugin(loader._compiler);\n\n    new NodeTemplatePlugin().apply(childCompiler);\n    new NodeTargetPlugin().apply(childCompiler);\n\n    if (compat.isWebpack5) {\n      const {\n        EntryOptionPlugin,\n        library: { EnableLibraryPlugin },\n      } = loader._compiler.webpack;\n\n      new EnableLibraryPlugin('commonjs2').apply(childCompiler);\n\n      EntryOptionPlugin.applyEntryOption(childCompiler, loader.context, {\n        child: {\n          library: {\n            type: 'commonjs2',\n          },\n          import: [loader.resourcePath],\n        },\n      });\n    } else {\n      // Webpack 4 code. Remove once support is removed\n      const { LibraryTemplatePlugin, SingleEntryPlugin } = require('webpack');\n\n      new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler);\n      new SingleEntryPlugin(loader.context, loader.resourcePath).apply(\n        childCompiler,\n      );\n    }\n\n    new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler);\n    new ExternalsPlugin('commonjs', [\n      '@vanilla-extract/css',\n      '@vanilla-extract/css/fileScope',\n      externals,\n    ]).apply(childCompiler);\n\n    let source: string;\n\n    if (compat.isWebpack5) {\n      childCompiler.hooks.compilation.tap(compilerName, (compilation) => {\n        compilation.hooks.processAssets.tap(compilerName, () => {\n          source =\n            compilation.assets[loader.resourcePath] &&\n            (compilation.assets[loader.resourcePath].source() as string);\n\n          // Remove all chunk assets\n          compilation.chunks.forEach((chunk) => {\n            chunk.files.forEach((file) => {\n              compilation.deleteAsset(file);\n            });\n          });\n        });\n      });\n    } else {\n      childCompiler.hooks.afterCompile.tap(compilerName, (compilation) => {\n        source =\n          compilation.assets[loader.resourcePath] &&\n          (compilation.assets[loader.resourcePath].source() as string);\n\n        // Remove all chunk assets\n        compilation.chunks.forEach((chunk) => {\n          chunk.files.forEach((file) => {\n            delete compilation.assets[file];\n          });\n        });\n      });\n    }\n\n    try {\n      childCompiler.runAsChild((err, _entries, compilation) => {\n        if (err) {\n          return reject(err);\n        }\n\n        if (!compilation) {\n          return reject(\n            new Error('Missing compilation in child compiler result'),\n          );\n        }\n\n        if (compilation.errors.length > 0) {\n          return reject(compilation.errors[0]);\n        }\n        if (!source) {\n          return reject(new Error(\"Didn't get a result from child compiler\"));\n        }\n\n        resolve({\n          source,\n          fileDependencies: Array.from(compilation.fileDependencies),\n          contextDependencies: Array.from(compilation.contextDependencies),\n        });\n      });\n    } catch (e) {\n      reject(e);\n    }\n  });\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/index.ts",
    "content": "import type { Compiler } from 'webpack';\nimport { AbstractVanillaExtractPlugin } from './plugin';\n\nexport class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {\n  apply(compiler: Compiler): void {\n    this.inject(compiler, 'virtualFileLoader');\n  }\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/loader.ts",
    "content": "import path from 'path';\n// @ts-expect-error\nimport loaderUtils from 'loader-utils';\nimport {\n  getPackageInfo,\n  type IdentifierOption,\n  processVanillaFile,\n  serializeCss,\n  transform,\n} from '@vanilla-extract/integration';\n\nimport type { LoaderContext } from './types';\nimport { debug, formatResourcePath } from './logger';\nimport { ChildCompiler } from './compiler';\nimport { createRequire } from 'node:module';\n\nconst require = createRequire(import.meta.url);\n\nconst virtualFileLoader = require.resolve(\n  path.join(\n    path.dirname(require.resolve('../../package.json')),\n    'virtualFileLoader',\n  ),\n);\n\nconst virtualFileLoaderExtractionFile = path.join(\n  path.dirname(require.resolve('../../package.json')),\n  'extracted.js',\n);\n\nconst virtualNextFileLoaderExtractionFile = path.join(\n  path.dirname(require.resolve('../../package.json')),\n  'vanilla.virtual.css',\n);\n\ninterface LoaderOptions {\n  outputCss: boolean;\n  identifiers?: IdentifierOption;\n}\n\ninterface InternalLoaderOptions extends LoaderOptions {\n  childCompiler: ChildCompiler;\n  virtualLoader: 'virtualFileLoader' | 'virtualNextFileLoader';\n}\n\nconst defaultIdentifierOption = (\n  mode: LoaderContext['mode'],\n  identifiers?: IdentifierOption,\n): IdentifierOption =>\n  identifiers ?? (mode === 'production' ? 'short' : 'debug');\n\nexport default function (this: LoaderContext, source: string): void {\n  const { identifiers } = loaderUtils.getOptions(this) as InternalLoaderOptions;\n\n  const { name } = getPackageInfo(this.rootContext);\n\n  const callback = this.async();\n\n  transform({\n    source,\n    filePath: this.resourcePath,\n    rootPath: this.rootContext,\n    packageName: name,\n    identOption: defaultIdentifierOption(this.mode, identifiers),\n  })\n    .then((code) => {\n      callback(null, code);\n    })\n    .catch((e) => {\n      callback(e);\n    });\n}\n\nexport function pitch(this: LoaderContext): void {\n  const { childCompiler, outputCss, identifiers, virtualLoader } =\n    loaderUtils.getOptions(this) as InternalLoaderOptions;\n\n  const log = debug(\n    `vanilla-extract:loader:${formatResourcePath(this.resourcePath)}`,\n  );\n\n  const compiler = this._compiler;\n\n  const isChildCompiler = childCompiler.isChildCompiler(compiler.name);\n\n  if (isChildCompiler) {\n    log(\n      'Skip vanilla-extract loader as we are already within a child compiler for %s',\n      compiler.options.output.filename,\n    );\n    return;\n  }\n\n  log('Loading file');\n\n  const callback = this.async();\n\n  childCompiler\n    .getCompiledSource(this)\n    .then(async ({ source }) => {\n      const result = await processVanillaFile({\n        source,\n        outputCss,\n        filePath: this.resourcePath,\n        identOption: defaultIdentifierOption(this.mode, identifiers),\n        serializeVirtualCssPath: async ({ fileName, source }) => {\n          const serializedCss = await serializeCss(source);\n\n          if (virtualLoader === 'virtualFileLoader') {\n            const virtualResourceLoader = `${virtualFileLoader}?${JSON.stringify(\n              {\n                fileName,\n                source: serializedCss,\n              },\n            )}`;\n            const request = loaderUtils.stringifyRequest(\n              this,\n              `${fileName}!=!${virtualResourceLoader}!${virtualFileLoaderExtractionFile}`,\n            );\n            return `import ${request}`;\n          } else {\n            // https://github.com/SukkaW/style9-webpack/blob/f51c46bbcd95ea3b988d3559c3b35cc056874366/src/next-appdir/style9-next-loader.ts#L64-L72\n            const request = loaderUtils.stringifyRequest(\n              this,\n              // Next.js RSC CSS extraction will discard any loaders in the request.\n              // So we need to pass virtual css information through resourceQuery.\n              // https://github.com/vercel/next.js/blob/3a9bfe60d228fc2fd8fe65b76d49a0d21df4ecc7/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L425-L429\n              // The compressed serialized CSS of vanilla-extract will add compressionFlag.\n              // Causing the resourceQuery to be abnormally split, so uri encoding is required.\n              // https://github.com/vanilla-extract-css/vanilla-extract/blob/58005eb5e7456cf2b3c04ea7aef29677db37cc3c/packages/integration/src/serialize.ts#L15\n              `${virtualNextFileLoaderExtractionFile}?${encodeURIComponent(\n                JSON.stringify({ fileName, source: serializedCss }),\n              )}`,\n            );\n            return `import ${request}`;\n          }\n        },\n      });\n\n      log('Completed successfully');\n\n      callback(null, result);\n    })\n    .catch((e) => {\n      callback(e);\n    });\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/logger.ts",
    "content": "import createDebug from 'debug';\nimport pc from 'picocolors';\n\nexport const formatResourcePath = (i: string): string =>\n  pc.blue(`\"${i.replace(/.*\\//, '')}\"`);\n\ncreateDebug.formatters.r = (r: string) => formatResourcePath(r);\n\nexport const debug: typeof createDebug = createDebug;\n"
  },
  {
    "path": "packages/webpack-plugin/src/next.ts",
    "content": "import path from 'path';\nimport { AbstractVanillaExtractPlugin } from './plugin';\nimport type { Compiler } from 'webpack';\nimport { createRequire } from 'node:module';\n\nconst require = createRequire(import.meta.url);\n\nconst virtualNextFileLoader = require.resolve(\n  path.join(\n    path.dirname(require.resolve('../../package.json')),\n    'virtualNextFileLoader',\n  ),\n);\n\nexport class VanillaExtractPlugin extends AbstractVanillaExtractPlugin {\n  static loader: string = virtualNextFileLoader;\n\n  apply(compiler: Compiler): void {\n    this.inject(compiler, 'virtualNextFileLoader');\n  }\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/plugin.ts",
    "content": "import {\n  cssFileFilter,\n  type IdentifierOption,\n} from '@vanilla-extract/integration';\nimport type { Compiler, RuleSetRule } from 'webpack';\n\nimport { ChildCompiler } from './compiler';\nimport createCompat, { type WebpackCompat } from './compat';\n\nimport { createRequire } from 'node:module';\n\nconst require = createRequire(import.meta.url);\n\nconst pluginName = 'VanillaExtractPlugin';\n\nfunction markCSSFilesAsSideEffects(compiler: Compiler, compat: WebpackCompat) {\n  compiler.hooks.normalModuleFactory.tap(pluginName, (nmf) => {\n    if (compat.isWebpack5) {\n      nmf.hooks.createModule.tap(\n        pluginName,\n        // @ts-expect-error CreateData is typed as 'object'...\n        (createData: {\n          matchResource?: string;\n          settings: { sideEffects?: boolean };\n        }) => {\n          if (\n            createData.matchResource &&\n            (createData.matchResource.endsWith('.vanilla.css') ||\n              createData.matchResource.endsWith('vanilla.virtual.css'))\n          ) {\n            createData.settings.sideEffects = true;\n          }\n        },\n      );\n    } else {\n      nmf.hooks.afterResolve.tap(\n        pluginName,\n        // @ts-expect-error Can't be typesafe for webpack 4\n        (result: {\n          matchResource?: string;\n          settings: { sideEffects?: boolean };\n        }) => {\n          if (\n            result.matchResource &&\n            (result.matchResource.endsWith('.vanilla.css') ||\n              result.matchResource.endsWith('vanilla.virtual.css'))\n          ) {\n            result.settings.sideEffects = true;\n          }\n        },\n      );\n    }\n  });\n}\n\nexport interface PluginOptions {\n  test?: RuleSetRule['test'];\n  identifiers?: IdentifierOption;\n  outputCss?: boolean;\n  externals?: any;\n  /** @deprecated */\n  allowRuntime?: boolean;\n}\n\nexport abstract class AbstractVanillaExtractPlugin {\n  test: RuleSetRule['test'];\n  outputCss: boolean;\n  allowRuntime: boolean;\n  childCompiler: ChildCompiler;\n  identifiers?: IdentifierOption;\n\n  constructor(options: PluginOptions = {}) {\n    const {\n      test = cssFileFilter,\n      outputCss = true,\n      externals,\n      allowRuntime,\n      identifiers,\n    } = options;\n\n    if (allowRuntime !== undefined) {\n      console.warn('The \"allowRuntime\" option is deprecated.');\n    }\n\n    this.test = test;\n    this.outputCss = outputCss;\n    this.allowRuntime = allowRuntime ?? false;\n    this.childCompiler = new ChildCompiler(externals);\n    this.identifiers = identifiers;\n  }\n\n  protected inject(\n    compiler: Compiler,\n    virtualLoader: 'virtualFileLoader' | 'virtualNextFileLoader',\n  ): void {\n    const compat = createCompat(\n      Boolean(compiler.webpack && compiler.webpack.version),\n    );\n\n    markCSSFilesAsSideEffects(compiler, compat);\n\n    compiler.options.module?.rules.splice(0, 0, {\n      test: this.test,\n      use: [\n        {\n          loader: require.resolve('../loader'),\n          options: {\n            outputCss: this.outputCss,\n            childCompiler: this.childCompiler,\n            identifiers: this.identifiers,\n            virtualLoader: virtualLoader,\n          },\n        },\n      ],\n    });\n  }\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/types.ts",
    "content": "import type { Compilation, Compiler } from 'webpack';\n\nexport interface LoaderContext {\n  addDependency: (filePath: string) => void;\n  addContextDependency: (filePath: string) => void;\n  cacheable: (value: boolean) => void;\n  target: string;\n  resourcePath: string;\n  context: string;\n  rootContext: string;\n  async: () => (err: unknown, result?: string) => void;\n  hot: boolean;\n  loaders: any[];\n  emitError: (error: Error) => void;\n  _compiler: Compiler;\n  _compilation: Compilation;\n  mode: 'production' | 'development' | 'none';\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/virtualFileLoader.ts",
    "content": "import { deserializeCss } from '@vanilla-extract/integration';\n// @ts-expect-error\nimport { getOptions } from 'loader-utils';\n\nexport default function (this: any): void {\n  const { source } = getOptions(this);\n  const callback = this.async();\n\n  deserializeCss(source).then((deserializedCss) => {\n    callback(null, deserializedCss);\n  });\n}\n"
  },
  {
    "path": "packages/webpack-plugin/src/virtualNextFileLoader.ts",
    "content": "import { deserializeCss } from '@vanilla-extract/integration';\n\nexport default function (this: any): void {\n  const callback = this.async();\n  const resourceQuery = this.resourceQuery.slice(1);\n\n  try {\n    const { source } = JSON.parse(decodeURIComponent(resourceQuery));\n    deserializeCss(source)\n      .then((deserializedCss) => {\n        callback(null, deserializedCss);\n      })\n      .catch((e) => {\n        callback(e as Error);\n      });\n  } catch (e) {\n    callback(e as Error);\n  }\n}\n"
  },
  {
    "path": "packages/webpack-plugin/vanilla.virtual.css",
    "content": "/* This is a noop file for extracted CSS source to point to */\n/* Webpack requires a file to exist on disk for virtual source files */\n"
  },
  {
    "path": "packages/webpack-plugin/virtualFileLoader/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js\",\n  \"module\": \"dist/vanilla-extract-webpack-plugin-virtualFileLoader.esm.js\"\n}\n"
  },
  {
    "path": "packages/webpack-plugin/virtualNextFileLoader/package.json",
    "content": "{\n  \"main\": \"dist/vanilla-extract-webpack-plugin-virtualNextFileLoader.cjs.js\",\n  \"module\": \"dist/vanilla-extract-webpack-plugin-virtualNextFileLoader.esm.js\"\n}\n"
  },
  {
    "path": "playwright.config.ts",
    "content": "import { type PlaywrightTestConfig, defineConfig } from '@playwright/test';\nimport { cpus } from 'os';\nimport { NEXT_SERVERS } from './tests/servers';\n\n// Prevent Vite from attempting to clear the screen\nprocess.stdout.isTTY = false;\n\nconst config: PlaywrightTestConfig = defineConfig({\n  fullyParallel: true,\n  testMatch: '**/*.playwright.ts',\n  updateSnapshots: 'none',\n  expect: {\n    toMatchSnapshot: {\n      threshold: 0.2,\n      maxDiffPixelRatio: 0.02,\n    },\n  },\n  webServer: NEXT_SERVERS.map((server) => ({\n    command: server.script + ` --port ${server.port}`,\n    env: { NODE_ENV: server.isProduction ? 'production' : 'development' },\n    url: `http://localhost:${server.port}`,\n    reuseExistingServer: !process.env.CI,\n    name: server.name,\n  })),\n  workers: process.env.CI ? cpus().length : undefined,\n  retries: process.env.CI ? 2 : 0,\n  timeout: 120_000,\n  forbidOnly: !!process.env.CI,\n  snapshotDir: 'tests/e2e/snapshots',\n  // put all snapshots in one directory\n  // https://playwright.dev/docs/api/class-testconfig#test-config-snapshot-path-template\n  snapshotPathTemplate: '{snapshotDir}/{arg}-{projectName}-{platform}{ext}',\n  projects: [\n    {\n      name: 'Desktop - Chromium',\n      grepInvert: /@agnostic/,\n      use: {\n        browserName: 'chromium',\n        channel: 'chrome',\n        viewport: {\n          width: 1200,\n          height: 1080,\n        },\n      },\n    },\n    {\n      name: 'Mobile - Chromium',\n      grepInvert: /@agnostic/,\n      use: {\n        browserName: 'chromium',\n        channel: 'chrome',\n        viewport: {\n          width: 414,\n          height: 896,\n        },\n      },\n    },\n    {\n      // If a test is browser/platform agnostic, add the @agnostic tag to the\n      // test name. We omit the project name here to keep snapshot names tidy.\n      name: '',\n      grep: /@agnostic/,\n      // put css snapshots in test filename subdirectories\n      snapshotPathTemplate: '{testFileDir}/{testFileName}-snapshots/{arg}{ext}',\n      use: {\n        browserName: 'chromium',\n        channel: 'chrome',\n        viewport: {\n          width: 1200,\n          height: 1080,\n        },\n      },\n    },\n  ],\n});\n\nexport default config;\n"
  },
  {
    "path": "pnpm-workspace.yaml",
    "content": "preferWorkspacePackages: true\npackages:\n  - 'packages/*'\n  - 'test-helpers'\n  - 'fixtures/*'\n  - 'fixtures/thirdparty/**'\n  - 'site'\n  - 'examples/*'\n  - 'tests'\n  - 'scripts'\n"
  },
  {
    "path": "prettier.config.js",
    "content": "module.exports = {\n  singleQuote: true,\n  tabWidth: 2,\n  trailingComma: 'all',\n  overrides: [\n    {\n      files: '*.md',\n      options: {\n        printWidth: 60,\n        trailingComma: 'none',\n      },\n    },\n  ],\n};\n"
  },
  {
    "path": "scripts/build-dts.ts",
    "content": "import { existsSync } from 'fs';\nimport fs from 'fs/promises';\nimport path from 'path';\nimport { pathToFileURL } from 'url';\n\nimport { legacy, resolve } from 'resolve.exports';\nimport { rollup } from 'rollup';\nimport dts from 'rollup-plugin-dts';\nimport { nodeExternals } from 'rollup-plugin-node-externals';\n\nfunction resolveEntry<PackageJson>(\n  pkg: PackageJson,\n  entryName?: string,\n): string {\n  const entryPath = entryName\n    ? resolve(pkg, entryName, { browser: false, require: true })\n    : legacy(pkg, { browser: false, fields: ['main'] })!;\n\n  if (!entryPath || entryPath.length === 0) {\n    throw new Error('No entry found. Invalid package.json?');\n  }\n\n  if (Array.isArray(entryPath)) {\n    return entryPath[0];\n  }\n\n  return entryPath;\n}\n\nasync function buildEntry(packageDir: string, entryPath: string) {\n  const dtsEntryPathAbsolute = path\n    .join(packageDir, entryPath)\n    .replace(path.extname(entryPath), '.d.ts');\n  const dtsEntryPath = path.relative(process.cwd(), dtsEntryPathAbsolute);\n  const outDir = path.dirname(dtsEntryPath);\n\n  if (!existsSync(dtsEntryPath)) {\n    console.warn('Skipping', dtsEntryPath, '(Not Found)');\n    return;\n  }\n\n  console.log('Bundling', dtsEntryPath);\n\n  try {\n    const bundle = await rollup({\n      input: dtsEntryPath,\n      plugins: [\n        nodeExternals({\n          packagePath: path.resolve(packageDir, 'package.json'),\n          deps: true,\n          devDeps: false,\n          exclude: ['@vanilla-extract/private'], // always bundle\n          include: ['@jest/transform'], // don't bundle\n        }),\n        dts({\n          compilerOptions: {\n            incremental: false,\n            noEmitOnError: false,\n          },\n          respectExternal: true,\n        }),\n      ],\n    });\n\n    // There is a chance that two `buildEntry`s  will run at the same time\n    // and one will attempt to read while the other is writing. To fix that,\n    // we'll defer the overwrite until all the bundles are ready\n    return async () => {\n      await bundle.write({\n        dir: outDir,\n        entryFileNames: '[name].ts',\n        minifyInternalExports: false,\n      });\n      await bundle.close();\n    };\n  } catch (e: any) {\n    console.error('Error bundling', dtsEntryPath);\n    console.error(e);\n    throw e;\n  }\n}\n\nasync function removePreconstructDeclarations(\n  packageDir: string,\n  entryPath: string,\n) {\n  await fs.rm(path.join(packageDir, entryPath, '../declarations'), {\n    force: true,\n    recursive: true,\n  });\n}\n\nconst entryPaths: [string, string][] = [];\n\nfor await (const packageDir of fs.glob('packages/*')) {\n  const { default: pkg } = await import(\n    // pathToFileURL enables the result of `path.resolve` to work with `import()` on windows\n    pathToFileURL(path.resolve(packageDir, 'package.json')).toString(),\n    {\n      with: { type: 'json' },\n    }\n  );\n\n  if (pkg.exports) {\n    const pkgExports = Object.keys(pkg.exports);\n\n    for (const entryName of pkgExports) {\n      if (entryName.endsWith('package.json')) continue;\n\n      entryPaths.push([packageDir, resolveEntry(pkg, entryName)]);\n    }\n  } else {\n    entryPaths.push([packageDir, resolveEntry(pkg)]);\n  }\n}\n\nawait Promise.all(\n  entryPaths.map(([packageDir, entryPath]) =>\n    buildEntry(packageDir, entryPath),\n  ),\n).then((writes) => writes.map((write) => write?.()));\n\n// Entry points might reference each other so remove old declaration files\n// after we're done with everything\nawait Promise.all(\n  entryPaths.map(([packageDir, entryPath]) =>\n    removePreconstructDeclarations(packageDir, entryPath),\n  ),\n);\n"
  },
  {
    "path": "scripts/copy-next-plugin.ts",
    "content": "import { existsSync } from 'fs';\nimport fs from 'fs/promises';\nimport path from 'path';\n\n// We need to use distinct next plugins for each next fixutre\n// due to different next versions / mini-css-extract-plugin serializer registration\nconst nextPluginDistDir = path.join(\n  import.meta.dirname,\n  '../packages/next-plugin/dist',\n);\n\nif (!existsSync(nextPluginDistDir)) {\n  throw new Error('packages/next-plugin/dist is missing.');\n}\n\nconst nextFixtureDirs = await Array.fromAsync(fs.glob('fixtures/next-*'));\n\nif (nextFixtureDirs.length === 0) {\n  throw new Error('No next fixtures found.');\n}\n\nfor (const dir of nextFixtureDirs) {\n  await fs.cp(nextPluginDistDir, path.join(dir, 'next-plugin', 'dist'), {\n    recursive: true,\n  });\n}\n"
  },
  {
    "path": "scripts/copy-readme-to-packages.ts",
    "content": "import fs from 'fs/promises';\nimport path from 'path';\n\nconst packagesGlob = fs.glob('packages/*', {\n  exclude: ['packages/sprinkles', 'packages/integration', 'packages/compiler'],\n});\n\nconst rootReadmePath = path.join(import.meta.dirname, '../README.md');\n\nfor await (const packageDir of packagesGlob) {\n  await fs.copyFile(rootReadmePath, path.join(packageDir, 'README.md'));\n}\n"
  },
  {
    "path": "scripts/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract/scripts\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"devDependencies\": {\n    \"resolve.exports\": \"^2.0.2\",\n    \"rollup\": \"^4.20.0\",\n    \"rollup-plugin-dts\": \"^6.1.1\",\n    \"rollup-plugin-node-externals\": \"^7.1.3\"\n  }\n}\n"
  },
  {
    "path": "site/.gitignore",
    "content": "docs-manifest.json\n"
  },
  {
    "path": "site/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    [\n      '@babel/preset-env',\n      { bugfixes: true, targets: 'last 2 Chrome versions' },\n    ],\n    '@babel/preset-typescript',\n    ['@babel/preset-react', { runtime: 'automatic' }],\n  ],\n};\n"
  },
  {
    "path": "site/code-block-loader.js",
    "content": "const { compile, transform } = require('@vanilla-extract/integration');\nconst evalCode = require('eval');\n\nconst { transformCss } = require('@vanilla-extract/css/transformCss');\nconst { setAdapter, removeAdapter } = require('@vanilla-extract/css/adapter');\n\nconst getAdapter = () => {\n  const localClassNames = new Set();\n  const composedClassLists = [];\n  let bufferedCSSObjs = [];\n  const cssFiles = {};\n\n  return {\n    adapter: {\n      appendCss: (cssObj) => {\n        bufferedCSSObjs.push(cssObj);\n      },\n      registerClassName: (className) => {\n        localClassNames.add(className);\n      },\n      registerComposition: (composition) => {\n        composedClassLists.push(composition);\n      },\n      markCompositionUsed: () => {},\n      onEndFileScope: (fileScope) => {\n        cssFiles[fileScope.filePath] = transformCss({\n          localClassNames: Array.from(localClassNames),\n          composedClassLists,\n          cssObjs: bufferedCSSObjs,\n        }).join('\\n');\n\n        bufferedCSSObjs = [];\n      },\n      getIdentOption: () => 'debug',\n    },\n    cssFiles,\n  };\n};\n\nfunction extractFilesFromCodeBlock(code) {\n  const fileMatches = code.matchAll(/(?:\\/\\/\\s(?<fileName>[\\w.]+\\.tsx?))/g);\n\n  let lastIndex = code.length - 1;\n\n  return Array.from(fileMatches, (match) => ({\n    ...match.groups,\n    index: match.index,\n  })).reduceRight((acc, curr) => {\n    const result = [\n      {\n        fileName: curr.fileName,\n        contents: code\n          .slice(curr.index + `// ${curr.fileName}`.length, lastIndex)\n          .trim(),\n      },\n      ...acc,\n    ];\n    lastIndex = curr.index;\n\n    return result;\n  }, []);\n}\n\nasync function getCss(entrypointFile, files, rootContext) {\n  // Any relative file is considered virtual\n  const virtualFileFilter = /^\\.\\//;\n  const virtualFileNamespace = 'virtual-file-ns';\n\n  const { source: compiledSource } = await compile({\n    filePath: entrypointFile,\n    cwd: rootContext,\n    esbuildOptions: {\n      plugins: [\n        {\n          name: 'virtual-entrypoint',\n          setup(build) {\n            build.onResolve({ filter: virtualFileFilter }, ({ path }) => {\n              const file = files.find(({ fileName }) =>\n                path.includes(fileName),\n              );\n\n              return {\n                namespace: virtualFileNamespace,\n                path: file.fileName.replace(/\\.css\\.ts$/, ''),\n              };\n            });\n\n            build.onLoad(\n              { filter: /.*/, namespace: virtualFileNamespace },\n              async ({ path }) => {\n                const file = files.find(({ fileName }) =>\n                  fileName.includes(path),\n                );\n\n                if (file) {\n                  const contents = await transform({\n                    source: file.contents,\n                    filePath: file.fileName,\n                    rootPath: rootContext,\n                    packageName: 'vanilla-extract-site',\n                    identOption: 'debug',\n                  });\n\n                  return {\n                    contents,\n                    loader: 'ts',\n                    resolveDir: rootContext,\n                  };\n                }\n              },\n            );\n          },\n        },\n      ],\n    },\n  });\n\n  const { adapter, cssFiles } = getAdapter();\n\n  setAdapter(adapter);\n\n  evalCode(compiledSource, entrypointFile, { console, process }, true);\n\n  removeAdapter(adapter);\n\n  return cssFiles;\n}\n\nasync function loader(source) {\n  this.cacheable(true);\n  const callback = this.async();\n\n  try {\n    const rootContext = this.rootContext;\n\n    const result = source.matchAll(\n      /```(?<language>.+)\\n(?<code>(?:.|\\n)*?)```/g,\n    );\n\n    const codeBlocks = Array.from(result, (match) => ({\n      ...match.groups,\n      startIndex: match.index,\n      endIndex: match.index + match[0].length,\n    }));\n\n    const newSource = [];\n    let currIndex = 0;\n\n    for (const { code, language, startIndex, endIndex } of codeBlocks) {\n      // Check for `tsx compiled` too so we can correctly highlight `tsx` code blocks but still\n      // compile subsequent `.css.ts` files\n      if (language !== 'ts compiled' && language !== 'tsx compiled') {\n        continue;\n      }\n\n      const files = extractFilesFromCodeBlock(code);\n\n      if (files.length === 0) {\n        continue;\n      }\n\n      let cssFiles = {};\n\n      const styleFilesNames = files\n        .filter((f) => f.fileName.endsWith('.css.ts'))\n        .map(({ fileName }) => `./${fileName}`);\n\n      for (const styleFileName of styleFilesNames) {\n        cssFiles = {\n          ...cssFiles,\n          ...(await getCss(styleFileName, files, rootContext)),\n        };\n      }\n\n      newSource.push(source.slice(currIndex, startIndex));\n\n      newSource.push(\n        `<compiledcode code={${JSON.stringify(files)}} css={${JSON.stringify(\n          cssFiles,\n        )}} />`,\n      );\n\n      currIndex = endIndex;\n    }\n\n    newSource.push(source.slice(currIndex));\n\n    return callback(null, newSource.join('\\n'));\n  } catch (e) {\n    console.error(e);\n\n    return callback(e, source);\n  }\n}\n\nmodule.exports = loader;\n"
  },
  {
    "path": "site/contents.mts",
    "content": "export const contents = [\n  {\n    group: 'overview',\n    label: 'Overview',\n    pages: [\n      'getting-started',\n      'styling',\n      'theming',\n      'style-composition',\n      'test-environments',\n    ],\n  },\n  {\n    group: 'api',\n    label: 'API',\n    pages: [\n      'style',\n      'style-variants',\n      'create-var',\n      'fallback-var',\n      'create-theme',\n      'create-theme-contract',\n      'assign-vars',\n      'font-face',\n      'keyframes',\n      'create-container',\n      'layer',\n      'create-view-transition',\n      'add-function-serializer',\n    ],\n  },\n  {\n    group: 'global-api',\n    label: 'Global API',\n    pages: [\n      'global-style',\n      'create-global-theme',\n      'create-global-theme-contract',\n      'global-font-face',\n      'create-global-var',\n      'global-keyframes',\n      'global-layer',\n    ],\n  },\n  {\n    group: 'packages',\n    label: 'Packages',\n    pages: ['sprinkles', 'recipes', 'dynamic', 'css-utils'],\n  },\n  {\n    group: 'integrations',\n    label: 'Integrations',\n    pages: [\n      'astro',\n      'esbuild',\n      'gatsby',\n      'next',\n      'parcel',\n      'remix',\n      'rollup',\n      'vite',\n      'webpack',\n    ],\n  },\n];\n"
  },
  {
    "path": "site/docs/api/add-function-serializer.md",
    "content": "---\ntitle: addFunctionSerializer\nparent: api\n---\n\n# addFunctionSerializer\n\n> ✋&nbsp;&nbsp;This is an advanced feature recommended for library authors only.\n\nTypically, if you try to export a function from one of your stylesheets, you'll get an error that you can only export plain objects, arrays, strings, numbers and `null`/`undefined`.\n\nIf you're wanting to create higher level abstractions like [Sprinkles](/documentation/packages/sprinkles) or [Recipes](/documentation/packages/recipes), this is a big problem!\n\nTo address this limitation, the `addFunctionSerializer` utility allows you to annotate your functions with instructions on how to serialize them.\n\nAs a basic example, let's say we want to create a library called `my-awesome-styled-div` that lets you create a React component that renders a `<div>` with static CSS bound to it, and we want our consumers to use it in their `.css.ts` files like this:\n\n```ts\n// MyComponent.css.ts\n\nimport { styledDiv } from 'my-awesome-styled-div';\n\nexport const MyComponent = styledDiv({\n  background: 'blue',\n  padding: 12\n});\n```\n\nNormally if you tried to do this, since `MyComponent` is a function, it would trigger an error during the build since it can't be serialized.\n\nLuckily `addFunctionSerializer` can help us!\n\nTo understand how we could make this API work, we'll first look at what you might expect the implementation of `styledDiv` to look like.\n\n```tsx\n// index.tsx\n\nimport React from 'react';\nimport { style } from '@vanilla-extract/css';\n\nexport function styledDiv(styles) {\n  const className = style(styles);\n\n  return function Component(\n    props: React.ComponentProps<'div'>\n  ) {\n    return (\n      <div\n        {...props}\n        className={[props.className, className]\n          .filter(Boolean)\n          .join(' ')}\n      />\n    );\n  };\n}\n```\n\nThis is a pretty simple implementation, but it has a couple of major problems that prevent it from working. Firstly, there's no way to convert this function to a string so it can be added to your runtime JavaScript bundle. Secondly, even if it could be serialized somehow, it relies on `@vanilla-extract/css` which can't generate static CSS files at runtime.\n\nTo fix this, we need to start by splitting the runtime code out into its own module and avoid using `@vanilla-extract/css`. In this case we'll create a `runtime.tsx` file. It must be available as a separate entry point from the library so that it can be imported within runtime code, for example:\n\n```tsx\nimport { runtimeStyledDiv } from 'my-awesome-styled-div/runtime';\n```\n\nThe runtime implementation would look like this:\n\n```tsx\n// runtime.tsx\n\nimport React from 'react';\n\nexport function runtimeStyledDiv(className) {\n  return function Component(\n    props: React.ComponentProps<'div'>\n  ) {\n    return (\n      <div\n        {...props}\n        className={[props.className, className]\n          .filter(Boolean)\n          .join(' ')}\n      />\n    );\n  };\n}\n```\n\nTo make this work at runtime, we've had to alter the API a bit. Instead of accepting an object of styles, we now accept the generated class name. That's because this code will run in the end-user's browser where we no longer have the ability to generate static CSS.\n\nWe then need to annotate the generated component within `styledDiv` using `addFunctionSerializer`, providing the path to the runtime module, the name of the imported function, and the arguments that should be passed to it.\n\n> ✋&nbsp;&nbsp;All arguments passed to the runtime function must be serializable!\n\n```ts\n// index.ts\n\nimport { addFunctionSerializer } from '@vanilla-extract/css/functionSerializer';\nimport { style } from '@vanilla-extract/css';\nimport { runtimeStyledDiv } from './runtime';\n\nexport function styledDiv(styles) {\n  const className = style(styles);\n  const args = [className];\n\n  // First we call our runtime function at build time\n  const Component = runtimeStyledDiv(...args);\n\n  // Then we tell vanilla-extract how to serialize the previous\n  // function call by annotating its return value\n  addFunctionSerializer(Component, {\n    importPath: 'my-awesome-styled-div/runtime',\n    importName: 'runtimeStyledDiv',\n    args\n  });\n\n  // Return the result of calling the runtime function\n  return Component;\n}\n```\n\nIt takes a little bit of wiring to get this working, but thankfully our consumers don't need to know about any of this! By making use of `addFunctionSerializer`, we can now break free of the usual constraints around exports and provide much more expressive APIs to our library consumers.\n"
  },
  {
    "path": "site/docs/api/assign-vars.md",
    "content": "---\ntitle: assignVars\nparent: api\n---\n\n# assignVars\n\nAllows you to populate the values of a theme contract and assign them to a style.\n\nWhile similar to [createTheme](/documentation/api/create-theme), this API provides more fine-grained control of how you populate the variables.\n\nFor example, this is useful for creating responsive themes since it can be used within `@media` blocks:\n\n```ts compiled\n// theme.css.ts\n\nimport {\n  createThemeContract,\n  style,\n  assignVars\n} from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  space: {\n    small: null,\n    large: null\n  }\n});\n\nexport const responsiveTheme = style({\n  vars: assignVars(vars, {\n    space: {\n      small: '4px',\n      large: '16px'\n    }\n  }),\n  '@media': {\n    'screen and (min-width: 1024px)': {\n      vars: assignVars(vars, {\n        space: {\n          small: '8px',\n          large: '32px'\n        }\n      })\n    }\n  }\n});\n```\n\n## Partial theme contracts\n\nAs a convenience, the `assignVars` function can also handle populating sections of the theme contract.\n\nFor example, if the theme contract above also included a colour palette, we could choose to only implement the space scale responsively:\n\n```ts compiled\n// styles.css.ts\n\nimport {\n  createThemeContract,\n  style,\n  assignVars\n} from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  color: {\n    brand: null,\n    accent: null\n  },\n  space: {\n    small: null,\n    large: null\n  }\n});\n\nexport const responsiveTheme = style({\n  vars: assignVars(vars, {\n    color: {\n      brand: 'pink',\n      accent: 'aquamarine'\n    },\n    space: {\n      small: '4px',\n      large: '16px'\n    }\n  }),\n  '@media': {\n    'screen and (min-width: 1024px)': {\n      vars: assignVars(vars.space, {\n        small: '8px',\n        large: '32px'\n      })\n    }\n  }\n});\n```\n"
  },
  {
    "path": "site/docs/api/create-container.md",
    "content": "---\ntitle: createContainer\nparent: api\n---\n\n# createContainer\n\nCreates a single scoped container name for use with [CSS Container Queries]. This avoids potential naming collisions with other containers.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support container queries].\n> Vanilla-extract supports the [container query syntax][css container queries] but does not polyfill the feature in unsupported browsers.\n\n```ts compiled\n// sidebar.css.ts\nimport {\n  style,\n  createContainer\n} from '@vanilla-extract/css';\n\nexport const sidebarContainer = createContainer();\n\nexport const sidebar = style({\n  containerName: sidebarContainer,\n  containerType: 'inline-size'\n});\n\n// navigation.css.ts\nimport {\n  style,\n  createContainer\n} from '@vanilla-extract/css';\nimport { sidebarContainer } from './sidebar.css.ts';\n\nexport const navigation = style({\n  '@container': {\n    [`${sidebarContainer} (min-width: 400px)`]: {\n      display: 'flex'\n    }\n  }\n});\n```\n\n[css container queries]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries\n[support container queries]: https://caniuse.com/css-container-queries\n"
  },
  {
    "path": "site/docs/api/create-theme-contract.md",
    "content": "---\ntitle: createThemeContract\nparent: api\n---\n\n# createThemeContract\n\nCreates a contract of locally scoped variable names for themes to implement.\n\nThis is useful if you want to split your themes into different bundles. In this case, your themes would be defined in separate files, but we'll keep this example simple.\n\n> 🎨&nbsp;&nbsp;New to theming in vanilla-extract? Make sure you’ve read the [theming overview](/documentation/theming) first.\n\n```ts compiled\n// themes.css.ts\nimport {\n  createThemeContract,\n  createTheme,\n  style\n} from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\nexport const themeA = createTheme(vars, {\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\nexport const themeB = createTheme(vars, {\n  color: {\n    brand: 'pink'\n  },\n  font: {\n    body: 'comic sans ms'\n  }\n});\n\nexport const brandText = style({\n  color: vars.color.brand,\n  fontFamily: vars.font.body\n});\n```\n"
  },
  {
    "path": "site/docs/api/create-theme.md",
    "content": "---\ntitle: createTheme\nparent: api\n---\n\n# createTheme\n\nCreates a locally scoped theme class and a theme contract which can be consumed within your styles.\n\n> 🎨&nbsp;&nbsp;New to theming in vanilla-extract? Make sure you’ve read the [theming overview](/documentation/theming) first.\n\n```ts compiled\n// theme.css.ts\n\nimport { createTheme, style } from '@vanilla-extract/css';\n\nexport const [themeClass, vars] = createTheme({\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\nexport const brandText = style({\n  color: vars.color.brand,\n  fontFamily: vars.font.body\n});\n```\n\n## Creating theme variants\n\nTheme variants can be created by passing a theme contract as the first argument to `createTheme`.\n\nAll theme values must be provided or it’s a type error.\n\n```ts compiled\n// themes.css.ts\nimport { createTheme, style } from '@vanilla-extract/css';\n\nexport const [themeA, vars] = createTheme({\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\nexport const themeB = createTheme(vars, {\n  color: {\n    brand: 'pink'\n  },\n  font: {\n    body: 'comic sans ms'\n  }\n});\n\nexport const brandText = style({\n  color: vars.color.brand,\n  fontFamily: vars.font.body\n});\n```\n\n## @layer\n\nThemes can be assigned to a layer by name using the `@layer` key at the top-level of the theme definition.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts compiled\n// themes.css.ts\nimport { createTheme, layer } from '@vanilla-extract/css';\n\nexport const themeLayer = layer();\n\nexport const [themeA, vars] = createTheme({\n  '@layer': themeLayer,\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n```\n\n[support layers]: https://caniuse.com/css-cascade-layers\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n"
  },
  {
    "path": "site/docs/api/create-var.md",
    "content": "---\ntitle: createVar\nparent: api\n---\n\n# createVar\n\nCreates a single scoped CSS Variable reference.\n\n```ts compiled\n// accent.css.ts\n\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const accentVar = createVar();\n```\n\nAs you can see, no CSS is generated when you create a variable, it is only a reference that can be set later on.\n\n## Setting the variable\n\nThe variable reference created above can be set using the [“vars” key](/documentation/styling/#css-variables).\n\n```ts compiled\n// accent.css.ts\n\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const accentVar = createVar();\n\nexport const blue = style({\n  vars: {\n    [accentVar]: 'blue'\n  }\n});\n\nexport const pink = style({\n  vars: {\n    [accentVar]: 'pink'\n  }\n});\n```\n\nKeep in mind the value of the variable can be changed in another class or even in a media query. For example, let’s change the value when the user prefers a dark color-scheme:\n\n```ts compiled\n// accent.css.ts\n\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const accentVar = createVar();\n\nexport const blue = style({\n  vars: {\n    [accentVar]: 'blue'\n  },\n  '@media': {\n    '(prefers-color-scheme: dark)': {\n      vars: {\n        [accentVar]: 'lightblue'\n      }\n    }\n  }\n});\n\nexport const pink = style({\n  vars: {\n    [accentVar]: 'pink'\n  },\n  '@media': {\n    '(prefers-color-scheme: dark)': {\n      vars: {\n        [accentVar]: 'lightpink'\n      }\n    }\n  }\n});\n```\n\n## Using the variable\n\nThe variable reference can then be passed as the value for any CSS property.\n\n```ts compiled\n// style.css.ts\n\nimport { createVar, style } from '@vanilla-extract/css';\nimport { accentVar } from './accent.css.ts';\n\nexport const accentText = style({\n  color: accentVar\n});\n\n// accent.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const accentVar = createVar();\n\nexport const blue = style({\n  vars: {\n    [accentVar]: 'blue'\n  }\n});\n\nexport const pink = style({\n  vars: {\n    [accentVar]: 'pink'\n  }\n});\n```\n\n## Assigning variables dynamically\n\nCSS variables can also be assigned dynamically using APIs in [the `@vanilla-extract/dynamic` package](/documentation/packages/dynamic).\n\n## @property rules\n\n[@property] rules can also be created using `createVar`.\nCSS variables with @property rules are used in the same way as regular CSS variables:\n\n```ts compiled\n// accent.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const accentVar = createVar({\n  syntax: '<color>',\n  inherits: false,\n  initialValue: 'blue'\n});\n\nexport const pink = style({\n  vars: {\n    [accentVar]: 'pink'\n  }\n});\n```\n\n[@property]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property\n"
  },
  {
    "path": "site/docs/api/create-view-transition.md",
    "content": "---\ntitle: createViewTransition\nparent: api\n---\n\n# createViewTransition\n\nCreates a single scoped view transition name for use with [CSS View Transitions].\nThis avoids potential naming collisions with other view transitions.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support view transitions].\n> Vanilla-extract supports the [view transition syntax][css view transitions] but does not polyfill the feature in unsupported browsers.\n\n```ts compiled\n// itemPage.css.ts\nimport {\n  style,\n  createViewTransition\n} from '@vanilla-extract/css';\n\nexport const titleViewTransition = createViewTransition();\n\nexport const pageTitle = style({\n  viewTransitionName: titleViewTransition\n});\n\n// navigation.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { titleViewTransition } from './itemPage.css.ts';\n\nexport const navigationLinkTitle = style({\n  viewTransitionName: titleViewTransition\n});\n```\n\n[css view transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#css_additions\n[support view transitions]: https://caniuse.com/view-transitions\n"
  },
  {
    "path": "site/docs/api/fallback-var.md",
    "content": "---\ntitle: fallbackVar\nparent: api\n---\n\n# fallbackVar\n\nProvides fallback values for variables that have been created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc.\n\nAs these APIs produce variable references that contain the CSS var function, e.g. `var(--colorVar__qzfheg0)`, it is necessary to handle the wrapping function when providing a fallback.\n\n```ts compiled\n// style.css.ts\n\nimport {\n  createVar,\n  fallbackVar,\n  style\n} from '@vanilla-extract/css';\n\nexport const colorVar = createVar();\n\nexport const color = style({\n  color: fallbackVar(colorVar, 'blue')\n});\n```\n\n## Multiple fallback values\n\nThe `fallbackVar` function handles falling back across multiple variables by providing multiple parameters.\n\n```ts compiled\n// style.css.ts\n\nimport {\n  createVar,\n  fallbackVar,\n  style\n} from '@vanilla-extract/css';\n\nexport const primaryVar = createVar();\nexport const secondaryVar = createVar();\n\nexport const color = style({\n  color: fallbackVar(primaryVar, secondaryVar, 'blue')\n});\n```\n"
  },
  {
    "path": "site/docs/api/font-face.md",
    "content": "---\ntitle: fontFace\nparent: api\n---\n\n# fontFace\n\nCreates a locally scoped [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family) for the defined [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).\n\n```ts compiled\n// text.css.ts\n\nimport { fontFace, style } from '@vanilla-extract/css';\n\nconst comicSans = fontFace({\n  src: 'local(\"Comic Sans MS\")'\n});\n\nexport const font = style({\n  fontFamily: comicSans\n});\n```\n\n## Multiple Fonts with Single Family\n\nThe `fontFace` function allows you to pass an array of font-face rules that may contain different rules but treat them as if they are from one font family.\n\n```ts compiled\n// text.css.ts\nimport { fontFace, style } from '@vanilla-extract/css';\n\nconst gentium = fontFace([\n  {\n    src: 'local(\"Gentium\")',\n    fontWeight: 'normal'\n  },\n  {\n    src: 'local(\"Gentium Bold\")',\n    fontWeight: 'bold'\n  }\n]);\n\nexport const font = style({\n  fontFamily: gentium\n});\n```\n"
  },
  {
    "path": "site/docs/api/keyframes.md",
    "content": "---\ntitle: keyframes\nparent: api\n---\n\n# keyframes\n\nCreates a locally scoped [animation name](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name) for the defined [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes).\n\n```ts compiled\n// animation.css.ts\n\nimport { keyframes, style } from '@vanilla-extract/css';\n\nconst rotate = keyframes({\n  '0%': { transform: 'rotate(0deg)' },\n  '100%': { transform: 'rotate(360deg)' }\n});\n\nexport const spin = style({\n  animationName: rotate,\n  animationDuration: '3s'\n});\n\n// or interpolate as a shorthand:\nexport const spinAgain = style({\n  animation: `${rotate} 3s`\n});\n```\n\n## Animating CSS variables\n\nCSS variables can be animated by setting their values within the `vars` property of a keyframe step:\n\n```ts compiled\n// animation.css.ts\n\nimport {\n  createVar,\n  fallbackVar,\n  keyframes,\n  style\n} from '@vanilla-extract/css';\n\nconst angle = createVar({\n  syntax: '<angle>',\n  inherits: false,\n  initialValue: '0deg'\n});\n\nconst angleKeyframes = keyframes({\n  '0%': {\n    vars: {\n      [angle]: '0deg'\n    }\n  },\n  '100%': {\n    vars: {\n      [angle]: '360deg'\n    }\n  }\n});\n\nexport const root = style({\n  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,\n  animation: `${angleKeyframes} 7s infinite ease-in-out both`,\n\n  vars: {\n    // This will fallback to 180deg if @property is not supported by the browser\n    [angle]: fallbackVar(angle, '180deg')\n  }\n});\n```\n"
  },
  {
    "path": "site/docs/api/layer.md",
    "content": "---\ntitle: layer\nparent: api\n---\n\n# layer\n\nCreates a single scoped [layer]. This avoids potential naming collisions with other layers.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts compiled\n// layers.css.ts\nimport { layer } from '@vanilla-extract/css';\n\nexport const reset = layer('reset');\nexport const framework = layer('framework');\nexport const app = layer('app');\n```\n\n## Nesting layers\n\nTo facilitate organisation of styles, [layer nesting] is supported by providing a `parent` layer reference via the options object.\nThis will generate the shorthand syntax, i.e. `parent.child`, while also making the relationship between layers explicit.\n\n```ts compiled\n// layers.css.ts\n\nimport { layer } from '@vanilla-extract/css';\n\nexport const reset = layer('reset');\nexport const framework = layer('framework');\nexport const typography = layer(\n  { parent: framework },\n  'typography'\n);\n```\n\n## Assigning styles\n\nStyles can be assigned to a layer by name, using the `@layer` key in the style object.\n\nIn this example, we first import the `layers.css.ts` stylesheet, setting up the order of the layers, then create a style within the `reset` layer.\n\n```ts compiled\n// reset.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { reset } from './layers.css.ts';\n\nexport const noMargin = style({\n  '@layer': {\n    [reset]: {\n      margin: 0\n    }\n  }\n});\n\n// layers.css.ts\nimport { layer } from '@vanilla-extract/css';\n\nexport const reset = layer('reset');\nexport const framework = layer('framework');\nexport const typography = layer(\n  { parent: framework },\n  'typography'\n);\n```\n\n## Layer merging\n\nIn order to generate the smallest possible CSS output, Vanilla Extract will merge styles that are assigned to the same layer within the same file, if it can be done without impacting the precedence of the rules.\n\nNotice in this example, while the `themedHeading` style is created before the the `heading` style, it appears later in the stylesheet. This is due to it being assigned to the `theme` layer — which is declared after the `base` layer.\n\n```ts compiled\n// typography.css.ts\nimport { style, layer } from '@vanilla-extract/css';\n\nconst base = layer();\nconst theme = layer();\n\nconst text = style({\n  '@layer': {\n    [base]: {\n      fontSize: '1rem'\n    }\n  }\n});\nconst themedHeading = style({\n  '@layer': {\n    [theme]: {\n      color: 'rebeccapurple'\n    }\n  }\n});\nconst heading = style({\n  '@layer': {\n    [base]: {\n      fontSize: '2.4rem'\n    }\n  }\n});\n```\n\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[layer nesting]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#nesting_layers\n[support layers]: https://caniuse.com/css-cascade-layers\n"
  },
  {
    "path": "site/docs/api/style-variants.md",
    "content": "---\ntitle: styleVariants\nparent: api\n---\n\n# styleVariants\n\nCreates a collection of named style rules.\n\nThis is useful for mapping component props to styles, for example: `<button className={styles.background[props.variant]}>`\n\n```ts compiled\n// styles.css.ts\nimport { styleVariants } from '@vanilla-extract/css';\n\nexport const background = styleVariants({\n  primary: { background: 'blue' },\n  secondary: { background: 'aqua' }\n});\n\n// app.tsx\nimport { background } from './styles.css.ts';\n\ninterface SectionProps {\n  variant: keyof typeof background;\n}\n\nconst Section = ({ variant }: SectionProps) => (\n  <section className={background[variant]}>...</section>\n);\n```\n\n## Style composition\n\nVariant styles can also be composed into a single rule by providing an array of styles.\n\n> ✨&nbsp;&nbsp;Curious about style composition? Make sure you’ve read the [style composition overview](/documentation/style-composition) first.\n\n```ts compiled\n// styles.css.ts\nimport { style, styleVariants } from '@vanilla-extract/css';\n\nconst base = style({ padding: 12 });\n\nexport const variant = styleVariants({\n  primary: [base, { background: 'blue' }],\n  secondary: [base, { background: 'aqua' }]\n});\n```\n\n## Mapping variants\n\nTo make generating sets of style variants easier, a mapping function can be provided as the second argument.\n\nFor example, we can iterate over the `palette` below, without having to define the style rule explicitly for each entry.\n\n```ts compiled\n// styles.css.ts\n\nimport { style, styleVariants } from '@vanilla-extract/css';\n\nconst base = style({ padding: 12 });\n\nconst palette = {\n  primary: 'blue',\n  secondary: 'aqua'\n};\n\nexport const variant = styleVariants(\n  palette,\n  (paletteColor) => [base, { background: paletteColor }]\n);\n```\n"
  },
  {
    "path": "site/docs/api/style.md",
    "content": "---\ntitle: style\nparent: api\n---\n\n# style\n\nCreates a style rule with a locally scoped class name.\n\n> 🖌&nbsp;&nbsp;New to styling with vanilla-extract? Make sure you’ve read the [styling overview](/documentation/styling) first.\n\nThis class can then be imported directly into your consuming application code, creating a first-class contract between your CSS and JavaScript.\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\nexport const flexContainer = style({\n  display: 'flex'\n});\n\n// app.ts\nimport { flexContainer } from './styles.css.ts';\n\ndocument.write(`\n  <main class=\"${flexContainer}\">\n    ...\n  </main>\n`);\n```\n\nCSS Variables, simple pseudos, selectors and media/feature queries are all supported.\n\n```ts compiled\n// styles.css.ts\n\nimport { style, createVar } from '@vanilla-extract/css';\n\nconst scopedVar = createVar();\n\nexport const className = style({\n  display: 'flex',\n  vars: {\n    [scopedVar]: 'green',\n    '--global-variable': 'purple'\n  },\n  ':hover': {\n    color: 'red'\n  },\n  selectors: {\n    '&:nth-child(2n)': {\n      background: '#fafafa'\n    }\n  },\n  '@media': {\n    'screen and (min-width: 768px)': {\n      padding: 10\n    }\n  },\n  '@supports': {\n    '(display: grid)': {\n      display: 'grid'\n    }\n  }\n});\n```\n\n## Style composition\n\nThe `style` function allows you to pass an array of class names and/or style objects but continue to treat them as if they are a single class name.\n\n> ✨&nbsp;&nbsp;Curious about style composition? Make sure you’ve read the [style composition overview](/documentation/style-composition) first.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst base = style({ padding: 12 });\n\nconst primary = style([base, { background: 'blue' }]);\n```\n\n## Style merging\n\nWhen passing an array of style objects they will be deep merged into a single class. This is useful when creating utilities to help construct consistent styles.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst responsiveStyle = ({ tablet, desktop }) => ({\n  '@media': {\n    'screen and (min-width: 768px)': tablet,\n    'screen and (min-width: 1024px)': desktop\n  }\n});\n\nconst container = style([\n  {\n    display: 'flex',\n    flexDirection: 'column'\n  },\n  responsiveStyle({\n    tablet: { flex: 1, content: 'I will be overridden' },\n    desktop: { flexDirection: 'row' }\n  }),\n  {\n    '@media': {\n      'screen and (min-width: 768px)': {\n        content: 'I win!'\n      }\n    }\n  }\n]);\n```\n"
  },
  {
    "path": "site/docs/global-api/create-global-theme-contract.md",
    "content": "---\ntitle: createGlobalThemeContract\nparent: global-api\n---\n\n# createGlobalThemeContract\n\nCreates a contract of globally scoped variable names for themes to implement.\n\nThis is useful if you want to make your theme contract available to non-JavaScript environments.\n\n> 🎨&nbsp;&nbsp;New to theming in vanilla-extract? Make sure you’ve read the [theming overview](/documentation/theming) first.\n\n```ts compiled\n// themes.css.ts\nimport {\n  createGlobalThemeContract,\n  createGlobalTheme,\n  style\n} from '@vanilla-extract/css';\n\nexport const vars = createGlobalThemeContract({\n  color: {\n    brand: 'color-brand'\n  },\n  font: {\n    body: 'font-body'\n  }\n});\n\ncreateGlobalTheme(':root', vars, {\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\nexport const brandText = style({\n  color: vars.color.brand,\n  fontFamily: vars.font.body\n});\n```\n\n## Formatting the variable names\n\nA map function can be provided as the second argument which has access to the value and the object path.\n\nFor example, you can automatically prefix all variable names:\n\n```ts compiled\n// themes.css.ts\nimport {\n  createGlobalThemeContract,\n  createGlobalTheme\n} from '@vanilla-extract/css';\n\nexport const vars = createGlobalThemeContract(\n  {\n    color: {\n      brand: 'color-brand'\n    },\n    font: {\n      body: 'font-body'\n    }\n  },\n  (value) => `prefix-${value}`\n);\n\ncreateGlobalTheme(':root', vars, {\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n```\n\nOr, automatically generate names from the object path.\n\nFor example, converting to title case:\n\n```ts compiled\n// themes.css.ts\nimport {\n  createGlobalThemeContract,\n  createGlobalTheme\n} from '@vanilla-extract/css';\n\nconst toTitleCase = (s) =>\n  `${s.charAt(0).toUpperCase()}${s.slice(1)}`;\n\nexport const vars = createGlobalThemeContract(\n  {\n    color: {\n      brand: null\n    },\n    font: {\n      body: null\n    }\n  },\n  (_value, path) => `${path.map(toTitleCase).join('')}`\n);\n\ncreateGlobalTheme(':root', vars, {\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n```\n"
  },
  {
    "path": "site/docs/global-api/create-global-theme.md",
    "content": "---\ntitle: createGlobalTheme\nparent: global-api\n---\n\n# createGlobalTheme\n\nCreates a theme attached to a global selector, but with locally scoped variable names.\n\n> 🎨&nbsp;&nbsp;New to theming in vanilla-extract? Make sure you’ve read the [theming overview](/documentation/theming) first.\n\n```ts compiled\n// theme.css.ts\nimport { createGlobalTheme } from '@vanilla-extract/css';\n\nexport const vars = createGlobalTheme(':root', {\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n```\n\nAll theme values must be provided or it’s a type error.\n\nImporting this stylesheet as a side effect to include the styles in your CSS bundle.\n\n```ts\n// app.ts\nimport './theme.css.ts';\n```\n\n## Implementing a Theme Contract\n\nAn existing theme contract can be implemented by passing it as the second argument.\n\n```ts compiled\n// theme.css.ts\nimport {\n  createThemeContract,\n  createGlobalTheme\n} from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\ncreateGlobalTheme(':root', vars, {\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n```\n\n## @layer\n\nGlobal themes can be assigned to a layer by name using the `@layer` key at the top-level of the theme definition.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts compiled\n// theme.css.ts\nimport {\n  createGlobalTheme,\n  layer\n} from '@vanilla-extract/css';\n\nexport const themeLayer = layer();\n\nexport const vars = createGlobalTheme(':root', {\n  '@layer': themeLayer,\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n```\n\n[support layers]: https://caniuse.com/css-cascade-layers\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n"
  },
  {
    "path": "site/docs/global-api/create-global-var.md",
    "content": "---\ntitle: createGlobalVar\nparent: global-api\n---\n\n# createGlobalVar\n\nSimilar to [`createVar`], `createGlobalVar` creates a global CSS variable reference:\n\n```ts compiled\n// vars.css.ts\n\nimport {\n  createGlobalVar,\n  style\n} from '@vanilla-extract/css';\n\nconst opacityVar = createGlobalVar('opacity');\n\nexport const content = style({\n  opacity: opacityVar\n});\n```\n\n[@property] rules can also be created using `createGlobalVar`:\n\n```ts compiled\n// vars.css.ts\n\nimport {\n  createGlobalVar,\n  style\n} from '@vanilla-extract/css';\n\nconst opacityVar = createGlobalVar('opacity', {\n  syntax: '<number>',\n  inherits: false,\n  initialValue: '0.5'\n});\n\nexport const content = style({\n  opacity: opacityVar\n});\n```\n\n[`createVar`]: /documentation/api/create-var\n[@property]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property\n"
  },
  {
    "path": "site/docs/global-api/global-font-face.md",
    "content": "---\ntitle: globalFontFace\nparent: global-api\n---\n\n# globalFontFace\n\nCreates a globally scoped custom font.\n\n```ts compiled\n// text.css.ts\n\nimport {\n  globalFontFace,\n  style\n} from '@vanilla-extract/css';\n\nconst comicSans = 'GlobalComicSans';\n\nglobalFontFace(comicSans, {\n  src: 'local(\"Comic Sans MS\")'\n});\n\nexport const font = style({\n  fontFamily: comicSans\n});\n```\n\n## Multiple Global Fonts with Single Family\n\nThe `globalFontFace` function allows you to pass an array of font-face rules that may contain different rules but treat them as if they are from one font family.\n\n```ts compiled\n// text.css.ts\n\nimport {\n  globalFontFace,\n  style\n} from '@vanilla-extract/css';\n\nconst gentium = 'GlobalGentium';\n\nglobalFontFace(gentium, [\n  {\n    src: 'local(\"Gentium\")',\n    fontWeight: 'normal'\n  },\n  {\n    src: 'local(\"Gentium Bold\")',\n    fontWeight: 'bold'\n  }\n]);\n\nexport const font = style({\n  fontFamily: gentium\n});\n```\n"
  },
  {
    "path": "site/docs/global-api/global-keyframes.md",
    "content": "---\ntitle: globalKeyframes\nparent: global-api\n---\n\n# globalKeyframes\n\nCreates a globally scoped set of keyframes.\n\n```ts compiled\n// animation.css.ts\n\nimport {\n  globalKeyframes,\n  style\n} from '@vanilla-extract/css';\n\nconst rotate = 'globalRotate';\n\nglobalKeyframes(rotate, {\n  '0%': { transform: 'rotate(0deg)' },\n  '100%': { transform: 'rotate(360deg)' }\n});\n\nexport const spin = style({\n  animation: `3s infinite ${rotate}`\n});\n```\n"
  },
  {
    "path": "site/docs/global-api/global-layer.md",
    "content": "---\ntitle: globalLayer\nparent: global-api\n---\n\n# globalLayer\n\nCreates a globally scoped [layer].\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts compiled\n// layers.css.ts\n\nimport { globalLayer } from '@vanilla-extract/css';\n\nglobalLayer('reset');\n```\n\nUseful for orchestrating the order of layers within the stylesheet, for example:\n\n```ts compiled\n// layers.css.ts\n\nimport { globalLayer } from '@vanilla-extract/css';\n\nglobalLayer('reset');\nglobalLayer('framework');\nglobalLayer('app');\n```\n\n## Nesting layers\n\nTo facilitate organisation of styles, [layer nesting] is supported by providing a `parent` layer name via the options object.\nThis will generate the shorthand syntax, i.e. `parent.child`, while also making the relationship between layers explicit.\n\n```ts compiled\n// layers.css.ts\n\nimport { globalLayer } from '@vanilla-extract/css';\n\nglobalLayer('reset');\nglobalLayer('framework');\nglobalLayer({ parent: 'framework' }, 'typography');\n```\n\n## Assigning styles\n\nStyles can be assigned to a layer by name, using the `@layer` key in the style object.\n\nIn this example, we first import the `layers.css.ts` stylesheet, setting up the order of the layers, then create a style within the `reset` layer.\n\n```ts compiled\n// reset.css.ts\n\nimport { style } from '@vanilla-extract/css';\nimport './layers.css.ts';\n\nexport const noMargin = style({\n  '@layer': {\n    reset: {\n      margin: 0\n    }\n  }\n});\n\n// layers.css.ts\n\nimport { globalLayer } from '@vanilla-extract/css';\n\nglobalLayer('reset');\nglobalLayer('framework');\nglobalLayer({ parent: 'framework' }, 'typography');\n```\n\nBest practice would be to expose the layer references from the `layers.css.ts` stylesheet, and use those when creating styles.\n\n```ts compiled\n// reset.css.ts\n\nimport { style } from '@vanilla-extract/css';\nimport { reset } from './layers.css.ts';\n\nexport const noMargin = style({\n  '@layer': {\n    [reset]: {\n      margin: 0\n    }\n  }\n});\n\n// layers.css.ts\n\nimport { globalLayer } from '@vanilla-extract/css';\n\nexport const reset = globalLayer('reset');\nexport const framework = globalLayer('framework');\nexport const typography = globalLayer(\n  { parent: framework },\n  'typography'\n);\n```\n\nThis is particularly useful when using the nested layers feature, as the parent and child names are computed.\n\nIn our example, the name of the typography layer becomes `framework.typography`:\n\n```ts compiled\n// text.css.ts\n\nimport { style } from '@vanilla-extract/css';\nimport { typography } from './layers.css.ts';\n\nexport const standard = style({\n  '@layer': {\n    [typography]: {\n      fontSize: '1rem'\n    }\n  }\n});\n\n// layers.css.ts\n\nimport { globalLayer } from '@vanilla-extract/css';\n\nexport const reset = globalLayer('reset');\nexport const framework = globalLayer('framework');\nexport const typography = globalLayer(\n  { parent: framework },\n  'typography'\n);\n```\n\n## Layer merging\n\nIn order to generate the smallest possible CSS output, Vanilla Extract will merge styles that are assigned to the same layer within the same file, if it can be done without impacting the precedence of the rules.\n\nNotice in this example, while the `themedHeading` style is created before the the `heading` style, it appears later in the stylesheet. This is due to it being assigned to the `theme` layer — which is declared after the `base` layer.\n\n```ts compiled\n// typography.css.ts\nimport { style, globalLayer } from '@vanilla-extract/css';\n\nconst base = globalLayer('base');\nconst theme = globalLayer('theme');\n\nconst text = style({\n  '@layer': {\n    [base]: {\n      fontSize: '1rem'\n    }\n  }\n});\nconst themedHeading = style({\n  '@layer': {\n    [theme]: {\n      color: 'rebeccapurple'\n    }\n  }\n});\nconst heading = style({\n  '@layer': {\n    [base]: {\n      fontSize: '2.4rem'\n    }\n  }\n});\n```\n\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[layer nesting]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#nesting_layers\n[support layers]: https://caniuse.com/css-cascade-layers\n"
  },
  {
    "path": "site/docs/global-api/global-style.md",
    "content": "---\ntitle: globalStyle\nparent: global-api\n---\n\n# globalStyle\n\nCreates styles attached to a global selector.\n\nRequires a selector string as the first parameter, followed by a style object.\n\n```ts compiled\n// app.css.ts\n\nimport { globalStyle } from '@vanilla-extract/css';\n\nglobalStyle('html, body', {\n  margin: 0\n});\n```\n\n> 🧠&nbsp;&nbsp;The global style object cannot use [simple pseudo](/documentation/styling#simple-pseudo-selectors) or [complex selectors](/documentation/styling/#complex-selectors).\n> This avoids unexpected results when merging with the global selector, e.g. `ul li:first-child, a > span`.\n\nGlobal selectors can also contain references to other scoped class names.\n\n```ts compiled\n// app.css.ts\n\nimport { style, globalStyle } from '@vanilla-extract/css';\n\nexport const parentClass = style({});\n\nglobalStyle(`${parentClass} > a`, {\n  color: 'pink'\n});\n```\n"
  },
  {
    "path": "site/docs/integrations/astro.md",
    "content": "---\ntitle: Astro\nparent: integrations\n---\n\n# Astro\n\nIntegrating Vanilla Extract with [Astro](https://astro.build) is done with the help of the [Vite plugin][vite integration].\n\n## Installation\n\n```bash\nnpm install @vanilla-extract/css\nnpm install @vanilla-extract/vite-plugin --save-dev\n```\n\n## Setup\n\nAdd Vanilla Extract Vite plugin to the Astro configuration:\n\n```js\nimport { defineConfig } from 'astro/config';\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\n// https://astro.build/config\nexport default defineConfig({\n  vite: {\n    plugins: [vanillaExtractPlugin()]\n  }\n});\n```\n\nYou'll then be able to use `style` and other APIs in `.css.ts` files.\n\n```ts\n// button.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\nexport const button = style({\n  padding: '0.5rem 1rem',\n  border: 'none',\n  borderRadius: '0.25rem',\n  color: 'white',\n  background: '#333'\n});\n```\n\nAnd now you can reference styles in your Astro component:\n\n```tsx\n//  Button.astro\n\n---\nimport { button } from './button.css'\n---\n\n<button class={button}>Click Me!</button>\n```\n\n## Configuration\n\nSee the [Vite integration page][vite integration] for documentation on the Vite plugin.\n\n[vite integration]: /documentation/integrations/vite\n"
  },
  {
    "path": "site/docs/integrations/esbuild.md",
    "content": "---\ntitle: esbuild\nparent: integrations\n---\n\n# esbuild\n\nA plugin for integrating vanilla-extract with [esbuild](https://esbuild.github.io/).\n\n## Installation\n\n```bash\nnpm install --save-dev @vanilla-extract/esbuild-plugin\n```\n\n## Setup\n\nAdd the plugin to your build script, along with any desired [plugin configuration](#configuration).\n\n```js\n// bundle.js\n\nconst {\n  vanillaExtractPlugin\n} = require('@vanilla-extract/esbuild-plugin');\n\nrequire('esbuild')\n  .build({\n    entryPoints: ['app.ts'],\n    bundle: true,\n    plugins: [vanillaExtractPlugin()],\n    outfile: 'out.js'\n  })\n  .catch(() => process.exit(1));\n```\n\n## Configuration\n\n```js\n// bundle.js\n\nconst {\n  vanillaExtractPlugin\n} = require('@vanilla-extract/esbuild-plugin');\n\nrequire('esbuild').build({\n  plugins: [\n    vanillaExtractPlugin({\n      // configuration\n    })\n  ]\n});\n```\n\nThe plugin accepts the following as optional configuration:\n\n### processCss\n\nAs esbuild currently doesn't have a way to process the CSS generated by vanilla-extract, you can optionally use the `processCss` option.\n\nFor example, to run autoprefixer over the generated CSS.\n\n```js\n// bundle.js\n\nconst {\n  vanillaExtractPlugin\n} = require('@vanilla-extract/esbuild-plugin');\nconst postcss = require('postcss');\nconst autoprefixer = require('autoprefixer');\n\nasync function processCss(css) {\n  const result = await postcss([autoprefixer]).process(\n    css,\n    {\n      from: undefined /* suppress source map warning */\n    }\n  );\n\n  return result.css;\n}\n\nrequire('esbuild')\n  .build({\n    entryPoints: ['app.ts'],\n    bundle: true,\n    plugins: [\n      vanillaExtractPlugin({\n        processCss\n      })\n    ],\n    outfile: 'out.js'\n  })\n  .catch(() => process.exit(1));\n```\n\n### identifiers\n\nDifferent formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:\n\n- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`\n- A custom identifier function takes an object parameter with properties `hash`, `filePath`, `debugId`, and `packageName`, and returns a customized identifier. e.g.\n\n```ts\nvanillaExtractPlugin({\n  identifiers: ({ hash }) => `prefix_${hash}`\n});\n```\n\nEach integration will set a default value based on the configuration options passed to the bundler.\n\n### esbuildOptions\n\nesbuild is used internally to compile `.css.ts` files before evaluating them to extract styles. You can pass additional options here to customize that process.\nAccepts a subset of esbuild build options (`plugins`, `external`, `define`, `loader`, `tsconfig` and `conditions`). See the [build API](https://esbuild.github.io/api/#build-api) documentation.\n"
  },
  {
    "path": "site/docs/integrations/gatsby.md",
    "content": "---\ntitle: Gatsby\nparent: integrations\n---\n\n# Gatsby\n\nA plugin for integrating vanilla-extract with [Gatsby](https://www.gatsbyjs.com).\n\n## Installation\n\n```bash\nnpm install @vanilla-extract/css @vanilla-extract/webpack-plugin gatsby-plugin-vanilla-extract\n```\n\n## Setup\n\nAdd the plugin to your Gatsby configuration.\n\n```js\n// gatsby-config.js\n\nmodule.exports = {\n  plugins: [`gatsby-plugin-vanilla-extract`]\n};\n```\n\n## Configuration\n\nSee [plugin documentation](https://github.com/gatsby-uc/plugins/tree/main/packages/gatsby-plugin-vanilla-extract).\n"
  },
  {
    "path": "site/docs/integrations/next.md",
    "content": "---\ntitle: Next.js\nparent: integrations\n---\n\n# Next.js\n\nA plugin for integrating vanilla-extract with [Next.js](https://nextjs.org).\n\n## Installation\n\n```bash\nnpm install --save-dev @vanilla-extract/next-plugin\n```\n\n## Setup\n\nIf you don't have a `next.config.js` or `next.config.ts` file in the root of your project, create one.\nThen add the plugin to your Next.js config file:\n\n```ts\n// next.config.ts\nimport type { NextConfig } from 'next';\nimport { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';\nconst withVanillaExtract = createVanillaExtractPlugin();\n\nconst nextConfig: NextConfig = {};\n\nexport default withVanillaExtract(nextConfig);\n```\n\nIf required, this plugin can be composed with other plugins.\n\n```ts\n// next.config.ts\nimport type { NextConfig } from 'next';\nimport { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';\nimport createMDX from '@next/mdx';\n\nconst withVanillaExtract = createVanillaExtractPlugin();\n\nconst withMDX = createMDX({\n  extension: /\\.mdx$/\n});\n\nconst nextConfig: NextConfig = {};\n\nexport default withVanillaExtract(withMDX(nextConfig));\n```\n\n## Version Support\n\n- **Next.js >= 16.x**: Both Turbopack and Webpack are supported\n- **Next.js <= 15.x**: Only Webpack is supported\n\n## Configuration\n\nThe plugin accepts the following as optional configuration, passed to `createVanillaExtractPlugin`.\n\n### identifiers\n\nDifferent formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:\n\n- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`\n- A custom identifier function takes an object parameter with properties `hash`, `filePath`, `debugId`, and `packageName`, and returns a customized identifier. e.g.\n\n```ts\n// next.config.ts\nimport { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';\n\nconst withVanillaExtract = createVanillaExtractPlugin({\n  identifiers: ({ hash }) => `prefix_${hash}`\n});\n```\n\nEach integration will set a default value based on the configuration options passed to the bundler.\n\n### unstable_turbopack\n\n> ⚠️&nbsp;&nbsp;Turbopack support is experimental. Its API is unstable and may undergo breaking changes in non-major versions. Additionally, it may not handle all features supported by Next.js.\n\nYou can control Turbopack autoconfiguration using `unstable_turbopack.mode`:\n\n- `off`: (default) never configure Turbopack (i.e. use Webpack)\n- `auto`: enable Turbopack config only when Next >= 16.0.0\n- `on`: force-enable Turbopack config\n\nFor example:\n\n```ts\n// next.config.ts\nimport { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';\n\nconst withVanillaExtract = createVanillaExtractPlugin({\n  unstable_turbopack: { mode: 'auto' }\n});\n\nexport default withVanillaExtract({});\n```\n\nIf you already manage `turbopack.rules` yourself for the same file globs, the plugin may throw to avoid rule conflicts. In that case, set `mode: 'off'` and apply your Turbopack config manually.\n\nBy default Turbopack integration processes `**/*.css.{js,cjs,mjs,jsx,ts,tsx}` files.\nYou can override this with `unstable_turbopack.glob`:\n\n```ts\n// next.config.ts\nimport { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';\n\nconst withVanillaExtract = createVanillaExtractPlugin({\n  unstable_turbopack: {\n    mode: 'auto',\n    glob: ['**/*.css.ts', '**/*.css.tsx']\n  }\n});\n\nexport default withVanillaExtract({});\n```\n\n## Transpiling Vanilla Extract-dependent Libraries\n\nBy default, Next.js does not allow importing of TypeScript files outside of the app root.\n\nIf your application depends on a TypeScript library, whether that be a local package within your app's monorepo, or a dependency inside `node_modules`, and that library styles its components with Vanilla Extract, but does _not_ compile its styles, then that library needs to be added to [`transpilePackages`] in your Next.js config:\n\n```tsx\n// App.tsx\nimport { Button } from '@company/design-system';\n\nexport default function App() {\n  // This is unstyled and/or throws errors about Vanilla Extract being used in runtime\n  return <Button>Hello, World!</Button>;\n}\n```\n\n```ts\n// next.config.ts\nimport type { NextConfig } from 'next';\nimport { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';\nconst withVanillaExtract = createVanillaExtractPlugin();\n\nconst nextConfig: NextConfig = {\n  transpilePackages: ['@company/design-system']\n};\n\n// Next.js Vanilla Extract integration will now compile @company/design-system styles\nexport default withVanillaExtract(nextConfig);\n```\n\n[`transpilePackages`]: https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages\n"
  },
  {
    "path": "site/docs/integrations/parcel.md",
    "content": "---\ntitle: Parcel\nparent: integrations\n---\n\n# Parcel\n\nA Parcel transformer for integrating vanilla-extract with [Parcel](https://parceljs.org/).\n\n## Installation\n\n```bash\nnpm install --save-dev @vanilla-extract/parcel-transformer\n```\n\n## Setup\n\nAdd the transformer to your Parcel configuration.\n\n```json\n// .parcelrc\n{\n  \"transformers\": {\n    \"*.css.ts\": [\"@vanilla-extract/parcel-transformer\"]\n  }\n}\n```\n"
  },
  {
    "path": "site/docs/integrations/remix.md",
    "content": "---\ntitle: Remix\nparent: integrations\n---\n\n# Remix\n\n[Remix](https://remix.run) provides support for Vanilla Extract out of the box. See [Vanilla Extract | Remix](https://remix.run/docs/en/main/styling/vanilla-extract) for details.\n\nRemix's (unstable) Vite compiler works with the [Vite integration]. It's as simple as adding the `@vanilla-extract/vite-plugin` to your Vite config:\n\n```js\nimport { vitePlugin as remix } from '@remix-run/dev';\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [remix(), vanillaExtractPlugin()]\n});\n```\n\nSee [Vite (Unstable) | Remix](https://remix.run/docs/en/main/future/vite#add-vanilla-extract-plugin) for more details.\n\n[vite integration]: /documentation/integrations/vite\n"
  },
  {
    "path": "site/docs/integrations/rollup.md",
    "content": "---\ntitle: Rollup\nparent: integrations\n---\n\n# Rollup\n\nA plugin for integrating vanilla-extract with [Rollup](https://rollupjs.org/).\n\nThis plugin is useful for library development but not suitable for application bundles.\nRollup has no built-in CSS bundling, so this plugin just outputs styles as individual CSS assets.\n\nFor applications we instead recommend to use Vite\n(which itself uses Rollup under the hood but comes with its own CSS bundling).\n\n## Installation\n\n```bash\nnpm install --save-dev @vanilla-extract/rollup-plugin\n```\n\n## Setup\n\nAdd the plugin to your Rollup configuration, along with any desired [plugin configuration](#configuration).\n\n```js\n// rollup.config.js\nimport { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';\n\nexport default {\n  plugins: [vanillaExtractPlugin()]\n};\n```\n\nThis plugin works well with Rollup's `preserveModules`.\n\nRollup by default places assets in an \"assets\" directory.\nYou can configure [asset file names](https://rollupjs.org/guide/en/#outputassetfilenames) if you care about CSS assets being placed right next to the corresponding JS files.\n\n```js\n// rollup.config.js\nimport { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';\n\nexport default {\n  plugins: [vanillaExtractPlugin()],\n  output: {\n    preserveModules: true,\n    assetFileNames({ name }) {\n      return name?.replace(/^src\\//, '') ?? '';\n    }\n  }\n};\n```\n\n## Configuration\n\n```js\n// rollup.config.js\nimport { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';\n\nexport default {\n  plugins: [\n    vanillaExtractPlugin({\n      // configuration\n    })\n  ]\n};\n```\n\nThe plugin accepts the following as optional configuration:\n\n### identifiers\n\nDifferent formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:\n\n- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`\n- A custom identifier function takes an object parameter with properties `hash`, `filePath`, `debugId`, and `packageName`, and returns a customized identifier. e.g.\n\n```ts\nvanillaExtractPlugin({\n  identifiers: ({ hash }) => `prefix_${hash}`\n});\n```\n\nEach integration will set a default value based on the configuration options passed to the bundler.\n\n### untable_injectedFilescopes\n\nInjects filescopes into Vanilla Extract modules instead of generating CSS.\nThis is useful for utility or component libraries that prefer their consumers to process Vanilla Extract files instead of bundling CSS.\n\nNote that this flag only works with `preserveModules: true`.\n\n### esbuildOptions\n\nesbuild is used internally to compile `.css.ts` files before evaluating them to extract styles.\nYou can pass additional options here to customize that process.\nAccepts a subset of esbuild build options (`plugins`, `external`, `define`, `loader`, `tsconfig` and `conditions`).\nSee the [build API](https://esbuild.github.io/api/#build-api) documentation.\n\n### extract\n\nExtract all generated `.css` into one bundle. This also removes side effect `import '*.css'` statements.\n\n```ts\nvanillaExtractPlugin({\n  extract: {\n    name: 'bundle.css',\n    sourcemap: false\n  }\n});\n```\n\n- `name`: Default `'bundle.css'`. Name the bundled CSS. [`output.assetFilenames`](https://rollupjs.org/configuration-options/#output-assetfilenames) can affect this.\n- `sourcemap`: Default `false`. Set to `true` to also output `.css.map` file.\n"
  },
  {
    "path": "site/docs/integrations/vite.md",
    "content": "---\ntitle: Vite\nparent: integrations\n---\n\n# Vite\n\nA plugin for integrating vanilla-extract with [Vite](https://vitejs.dev/).\n\n## Installation\n\n```bash\nnpm install --save-dev @vanilla-extract/vite-plugin\n```\n\n## Setup\n\nAdd the plugin to your Vite configuration, along with any desired [plugin configuration](#configuration).\n\n```js\n// vite.config.js\n\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\nexport default {\n  plugins: [vanillaExtractPlugin()]\n};\n```\n\n## Configuration\n\n```js\n// vite.config.js\n\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\nexport default {\n  plugins: [\n    vanillaExtractPlugin({\n      // configuration\n    })\n  ]\n};\n```\n\nThe plugin accepts the following as optional configuration:\n\n### identifiers\n\nDifferent formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:\n\n- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`\n- A custom identifier function takes an object parameter with properties `hash`, `filePath`, `debugId`, and `packageName`, and returns a customized identifier. e.g.\n\n```ts\nvanillaExtractPlugin({\n  identifiers: ({ hash }) => `prefix_${hash}`\n});\n```\n\nEach integration will set a default value based on the configuration options passed to the bundler.\n"
  },
  {
    "path": "site/docs/integrations/webpack.md",
    "content": "---\ntitle: Webpack\nparent: integrations\n---\n\n# Webpack\n\nA plugin for integrating vanilla-extract with [webpack](https://webpack.js.org).\n\n## Installation\n\n```bash\nnpm install --save-dev @vanilla-extract/webpack-plugin\n```\n\n## Setup\n\nAdd the plugin to your Webpack configuration, along with any desired [plugin configuration](#configuration).\n\n```js\n// webpack.config.js\n\nconst {\n  VanillaExtractPlugin\n} = require('@vanilla-extract/webpack-plugin');\n\nmodule.exports = {\n  plugins: [new VanillaExtractPlugin()]\n};\n```\n\n> You'll need to ensure you're handling CSS files in your webpack config.\n\nFor example:\n\n```js\n// webpack.config.js\n\nconst {\n  VanillaExtractPlugin\n} = require('@vanilla-extract/webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n  plugins: [\n    new VanillaExtractPlugin(),\n    new MiniCssExtractPlugin()\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.vanilla\\.css$/i, // Targets only CSS files generated by vanilla-extract\n        use: [\n          MiniCssExtractPlugin.loader,\n          {\n            loader: require.resolve('css-loader'),\n            options: {\n              url: false // Required as image imports should be handled via JS/TS import statements\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n```\n\nIf you already have `css-loader` configured, make sure to add `exclude: /\\.vanilla\\.css$/i` to that rule's configuration.\n\n## Configuration\n\n```js\n// webpack.config.js\n\nconst {\n  VanillaExtractPlugin\n} = require('@vanilla-extract/webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new VanillaExtractPlugin({\n      // configuration\n    })\n  ]\n};\n```\n\nThe plugin accepts the following as optional configuration:\n\n### identifiers\n\nDifferent formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:\n\n- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`\n- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`\n- A custom identifier function takes an object parameter with properties `hash`, `filePath`, `debugId`, and `packageName`, and returns a customized identifier. e.g.\n\n```ts\nnew VanillaExtractPlugin({\n  identifiers: ({ hash }) => `prefix_${hash}`\n});\n```\n\nEach integration will set a default value based on the configuration options passed to the bundler.\n"
  },
  {
    "path": "site/docs/overview/getting-started.md",
    "content": "---\ntitle: Getting Started\n---\n\n# Getting Started\n\n## Installation\n\n```bash\nnpm install @vanilla-extract/css\n```\n\n## Bundler Integration\n\nVanilla-extract requires that you have set up a bundler and configured it to handle CSS.\nThis allows your styles to be handled the same as any other dependencies in your code, importing and bundling only what is required.\n\nInstall your integration of preference:\n\n- [vite]\n- [esbuild]\n- [webpack]\n- [next]\n- [parcel]\n- [rollup]\n- [gatsby]\n\n## Create a style\n\nA stylesheet can be made by adding a `.css.ts` file into your project.\n\nFor example:\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nexport const container = style({\n  padding: 10\n});\n```\n\nImportantly, this does two things:\n\n1. creates a locally scoped class\n2. exports the generated class name.\n\n## Apply the style\n\nTo apply the style to an element, we need to import it from our stylesheet.\n\nBy importing the style we receive the scoped class name that was generated and we can apply it to the `class` attribute on the element.\n\n```ts compiled\n// app.ts\nimport { container } from './styles.css.ts';\n\ndocument.write(`\n  <section class=\"${container}\">\n    ...\n  </section>\n`);\n\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nexport const container = style({\n  padding: 10\n});\n```\n\nAs a side effect of this import, the CSS is also processed by the selected bundler integration and handled accordingly.\n\n[vite]: /documentation/integrations/vite/\n[esbuild]: /documentation/integrations/esbuild/\n[webpack]: /documentation/integrations/webpack/\n[next]: /documentation/integrations/next/\n[rollup]: /documentation/integrations/rollup/\n[gatsby]: /documentation/integrations/gatsby/\n[parcel]: /documentation/integrations/parcel/\n"
  },
  {
    "path": "site/docs/overview/style-composition.md",
    "content": "---\ntitle: Composition\n---\n\n# Style Composition\n\nStyle composition is a special feature of vanilla-extract that makes it easy to get maximum re-use from your styles.\nIt allows you to pass an array of class names and/or [styles] but continue to treat them as if they are a single class name.\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\nconst base = style({ padding: 12 });\n\nconst primary = style([base, { background: 'blue' }]);\n\nconst secondary = style([base, { background: 'aqua' }]);\n```\n\nLet's look at how this works in practice.\n\nWhen you create a style you receive a class name back in return.\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\n// base = 'styles_base__8uideo0'\nconst base = style({ padding: 12 });\n```\n\nHowever, when using style composition you will receive multiple classes in a single string, separated by a single space character, often referred to as a classlist.\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\n// base = 'styles_base__8uideo0'\nconst base = style({ padding: 12 });\n\n// primary = 'styles_base__8uideo0 styles_primary__8uideo1'\nconst primary = style([base, { background: 'blue' }]);\n```\n\nThis doesn't affect usage when assigning to the class property on DOM elements as they already accept a classlist.\nHowever, what if we want to use our style inside another styles selector?\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\nconst base = style({ padding: 12 });\n\nconst primary = style([base, { background: 'blue' }]);\n\nconst text = style({\n  selectors: {\n    [`${primary} &`]: {\n      color: 'white'\n    }\n  }\n});\n```\n\nWhen selectors are processed internally, the composed classes are removed, only leaving behind a single unique identifier class.\nThis allows you to treat them as if they were a single class within vanilla-extract selectors.\n\nTo ensure that this behaviour works as expected, when multiple pre-existing classes are composed, a new identifier is created and added to the classlist.\n\n```ts compiled\n// styles.css.ts\n\nimport { style, globalStyle } from '@vanilla-extract/css';\n\nconst background = style({ background: 'mintcream' });\nconst padding = style({ padding: 12 });\n\n// container = 'styles_container__8uideo2'\nexport const container = style([background, padding]);\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n[styles]: /documentation/styling/\n"
  },
  {
    "path": "site/docs/overview/styling.md",
    "content": "---\ntitle: Styling\n---\n\n# Styling\n\nAll the styling APIs in Vanilla Extract take a style object as input.\nDescribing styles as a JavaScript object enables much better use of TypeScript through your styling code, as the styles are typed data-structures like the rest of your application code.\nIt also brings type-safety and autocomplete to CSS authoring (via [csstype]).\n\n## CSS Properties\n\nAt the top-level of the style object, CSS properties can be set just like when writing a regular CSS class.\nThe only difference is all properties use `camelCase` rather than `kebab-case`.\n\n```ts compiled\n// app.css.ts\nimport { style, globalStyle } from '@vanilla-extract/css';\n\nexport const myStyle = style({\n  display: 'flex',\n  paddingTop: '3px'\n});\n\nglobalStyle('body', {\n  margin: 0\n});\n```\n\n### Unitless Properties\n\nSome properties accept numbers as values. Excluding [unitless properties], these values are assumed to be a pixel and `px` is automatically appended to the value.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nexport const myStyle = style({\n  // cast to pixels\n  padding: 10,\n  marginTop: 25,\n\n  // unitless properties\n  flexGrow: 1,\n  opacity: 0.5\n});\n```\n\n### Vendor Prefixes\n\nIf you want to target a vendor specific property (e.g. `-webkit-tap-highlight-color`), you can do so using `PascalCase` and removing the beginning `-`.\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\nexport const myStyle = style({\n  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)'\n});\n```\n\n## CSS Variables\n\nIn regular CSS, variables (or CSS custom properties) are able to be set alongside the other properties within the rule.\nIn Vanilla Extract, CSS variables must be nested within the `vars` key — providing more accurate static typing for the other CSS properties.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst myStyle = style({\n  vars: {\n    '--my-global-variable': 'purple'\n  }\n});\n```\n\nThe `vars` key also accepts scoped CSS variables, created via the [createVar] API.\n\n```ts compiled\n// styles.css.ts\nimport { style, createVar } from '@vanilla-extract/css';\n\nconst myVar = createVar();\n\nconst myStyle = style({\n  vars: {\n    [myVar]: 'purple'\n  }\n});\n```\n\n## Media Queries\n\nUnlike in regular CSS, Vanilla Extract lets you embed media queries **within** your style definitions using the `@media` key.\nThis allows you to easily co-locate the responsive rules of a style into a single data-structure.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst myStyle = style({\n  '@media': {\n    'screen and (min-width: 768px)': {\n      padding: 10\n    },\n    '(prefers-reduced-motion)': {\n      transitionProperty: 'color'\n    }\n  }\n});\n```\n\nWhen processing your code into CSS, Vanilla Extract will always render your media queries **at the end of the file**. This means styles inside the `@media` key will always have higher precedence than other styles due to CSS rule order precedence.\n\n> 🧠&nbsp;&nbsp;When it's safe to do so, Vanilla Extract will merge your `@media`, `@supports`, and `@container` condition blocks together to create the smallest possible CSS output.\n\n## Selectors\n\nThere are two methods of specifying selectors for a given style, simple pseudo selectors that can be used alongside all other CSS properties, and the `selectors` option which allows construction of more complex rules.\n\n> 🧠&nbsp;&nbsp;All selectors are not available for `globalStyle`. This API accepts a selector as its first parameter (e.g. `ul li:first-of-type, a > span`), merging selectors may produce unexpected results.\n\n### Simple Pseudo Selectors\n\nSimple pseudo selectors are those that don’t take any parameters and therefore can be easily detected and statically typed. These can be used at the top level alongside the other [CSS properties] and can only contain [CSS Properties] and [CSS Variables].\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst myStyle = style({\n  ':hover': {\n    color: 'pink'\n  },\n  ':first-of-type': {\n    color: 'blue'\n  },\n  '::before': {\n    content: ''\n  }\n});\n```\n\n### Complex Selectors\n\nMore complex rules can be written using the `selectors` key.\n\nTo improve maintainability, each style block can only target a single element. To enforce this, all selectors must target the `&` character which is a reference to the current element.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst link = style({\n  selectors: {\n    '&:hover:not(:active)': {\n      border: '2px solid aquamarine'\n    },\n    'nav li > &': {\n      textDecoration: 'underline'\n    }\n  }\n});\n```\n\nSelectors can also reference other scoped class names.\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\nexport const parent = style({});\n\nexport const child = style({\n  selectors: {\n    [`${parent}:focus &`]: {\n      background: '#fafafa'\n    }\n  }\n});\n```\n\nInvalid selectors are those attempting to target an element other than the current class.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst invalid = style({\n  selectors: {\n    // ❌ ERROR: Targetting `a[href]`\n    '& a[href]': {...},\n\n    // ❌ ERROR: Targetting `.otherClass`\n    '& ~ div > .otherClass': {...}\n  }\n});\n```\n\nIf you want to target another scoped class then it should be defined within the style block of that class instead.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\n// Invalid example:\nexport const child = style({});\nexport const parent = style({\n  selectors: {\n    // ❌ ERROR: Targetting `child` from `parent`\n    [`& ${child}`]: {...}\n  }\n});\n\n// Valid example:\nexport const parent = style({});\nexport const child = style({\n  selectors: {\n    [`${parent} &`]: {...}\n  }\n});\n```\n\nIf you need to globally target child nodes within the current element (e.g. `'& a[href]'`), you should use [globalStyle] instead.\n\n```ts compiled\n// styles.css.ts\nimport { style, globalStyle } from '@vanilla-extract/css';\n\nexport const parent = style({});\n\nglobalStyle(`${parent} a[href]`, {\n  color: 'pink'\n});\n```\n\n### Circular Selectors\n\nIf your selectors are dependent on each other you can use [getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to define them:\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nexport const child = style({\n  background: 'blue',\n  get selectors() {\n    return {\n      [`${parent} &`]: {\n        color: 'red'\n      }\n    };\n  }\n});\n\nexport const parent = style({\n  background: 'yellow',\n  selectors: {\n    [`&:has(${child})`]: {\n      padding: 10\n    }\n  }\n});\n```\n\n## Container Queries\n\nContainer queries work the same as [media queries] and are nested inside the `@container` key.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support container queries]. Vanilla Extract supports the [container query syntax] but does not polyfill the feature in unsupported browsers.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst myStyle = style({\n  '@container': {\n    '(min-width: 768px)': {\n      padding: 10\n    }\n  }\n});\n```\n\nYou can also create scoped containers using [createContainer].\n\n```ts compiled\n// styles.css.ts\nimport {\n  style,\n  createContainer\n} from '@vanilla-extract/css';\n\nconst sidebar = createContainer();\n\nconst myStyle = style({\n  containerName: sidebar,\n  '@container': {\n    [`${sidebar} (min-width: 768px)`]: {\n      padding: 10\n    }\n  }\n});\n```\n\n## Layers\n\nAs with media queries above, Vanilla Extract lets you assign styles to [layers][layer] by using the `@layer` key **within** your style definition.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[support layers]: https://caniuse.com/css-cascade-layers\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst text = style({\n  '@layer': {\n    typography: {\n      fontSize: '1rem'\n    }\n  }\n});\n```\n\nThe `@layer` key also accepts a scoped layer reference, created via the [layer][layer api] API.\n\n```ts compiled\n// styles.css.ts\nimport { style, layer } from '@vanilla-extract/css';\n\nconst typography = layer();\n\nconst text = style({\n  '@layer': {\n    [typography]: {\n      fontSize: '1rem'\n    }\n  }\n});\n```\n\nTo learn more about managing layers, check out the API documentation for [layer][layer api] and [globalLayer][global layer api].\n\n## Supports Queries\n\nSupports queries work the same as [Media queries] and are nested inside the `@supports` key.\n\n```ts compiled\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\n\nconst myStyle = style({\n  '@supports': {\n    '(display: grid)': {\n      display: 'grid'\n    }\n  }\n});\n```\n\n## Fallback Styles\n\nWhen using CSS property values that don't exist in some browsers, you'll often declare the property twice and the older browser will ignore the value it doesn't understand.\nThis isn't possible using JS objects as you can't declare the same key twice.\nSo instead, we use an array to define fallback values.\n\n```ts compiled\n// styles.css.ts\n\nimport { style } from '@vanilla-extract/css';\n\nexport const myStyle = style({\n  // In Firefox and IE the \"overflow: overlay\" will be\n  // ignored and the \"overflow: auto\" will be applied\n  overflow: ['auto', 'overlay']\n});\n```\n\n[csstype]: https://github.com/frenic/csstype\n[unitless properties]: https://github.com/vanilla-extract-css/vanilla-extract/blob/6068246343ceb58a04006f4ce9d9ff7ecc7a6c09/packages/css/src/transformCss.ts#L25\n[createvar]: /documentation/api/create-var/\n[layer api]: /documentation/api/layer/\n[global layer api]: /documentation/global-api/global-layer/\n[createcontainer]: /documentation/api/create-container/\n[css properties]: #css-properties\n[css variables]: #css-variables\n[globalstyle]: /documentation/global-api/global-style\n[media queries]: #media-queries\n[support container queries]: https://caniuse.com/css-container-queries\n[container query syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries\n"
  },
  {
    "path": "site/docs/overview/test-environments.md",
    "content": "---\ntitle: Test Environments\n---\n\n# Test Environments\n\nWhen executing a `.css.ts` file, class name identifiers will be returned as expected, and if running in a browser-like environment, such as [jsdom], then real styles will be injected into the document. However for vanilla-extract styles to work in a test environment, a transform needs to be applied to the code.\n\nCurrently, [Jest] and [Vitest] have official integrations. Please reach out in the [Discord] or [Discussions] for help with other setups.\n\n## Jest\n\nInstall the [Jest] transformer\n\n```bash\nnpm install --save-dev @vanilla-extract/jest-transform\n```\n\nAdd the transform to your Jest configuration.\n\n```json\n// jest.config.js\n{\n  \"transform\": {\n    \"\\\\.css\\\\.ts$\": \"@vanilla-extract/jest-transform\"\n  }\n}\n```\n\n### Remove Style Mocking\n\nIt is very common in Jest setups to have a mock file returned for all `.css` files. This clashes with vanilla-extract as Jest can't differentiate between `.css` and `.css.ts` imports.\n\nFor example:\n\n```json\n// package.json\n{\n  \"jest\": {\n    \"moduleNameMapper\": {\n      // ❌ Breaks .css.ts imports\n      \"\\\\.css$\": \"<rootDir>/styleMock.js\"\n    }\n  }\n}\n```\n\nIdeally, remove this mock from your setup. However, if you need to support both at the same time you'll need a way to target your regular CSS files. Using a folder for all your CSS files, or giving your CSS files a custom extension will work.\n\n```json\n// package.json\n{\n  \"jest\": {\n    \"moduleNameMapper\": {\n      \"my-css-folder/.*\\\\.css$\": \"<rootDir>/styleMock.js\",\n      \"\\\\.legacy\\\\.css$\": \"<rootDir>/styleMock.js\"\n    }\n  }\n}\n```\n\n## Vitest\n\nIf you are already using vanilla-extract with [Vite] then no setup should be required as [Vitest] references your existing vite config file.\n\nIf using [Vitest] in other environments, install the `@vanilla-extract/vite-plugin`:\n\n```bash\nnpm install --save-dev @vanilla-extract/vite-plugin\n```\n\nAdd the plugin to your Vitest configuration.\n\n```ts\n// vitest.config.ts\nimport { defineConfig } from 'vitest/config';\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\n\nexport default defineConfig({\n  plugins: [vanillaExtractPlugin()]\n});\n```\n\n## Disabling Runtime Styles\n\nWhile testing against actual styles is often desirable, it can be a major slowdown in your tests. If your tests don’t require styles to be available, importing `disableRuntimeStyles` will prevent all style creation.\n\n```ts\n// setupTests.ts\nimport '@vanilla-extract/css/disableRuntimeStyles';\n```\n\n[vite]: https://vitejs.dev/\n[vitest]: https://vitest.dev/\n[jsdom]: https://github.com/jsdom/jsdom\n[jest]: https://jestjs.io/\n[discord]: https://discord.gg/6nCfPwwz6w\n[discussions]: https://github.com/vanilla-extract-css/vanilla-extract/discussions\n"
  },
  {
    "path": "site/docs/overview/theming.md",
    "content": "---\ntitle: Theming\n---\n\n# Theming\n\nThemes are often thought of as global, application wide concepts. While vanilla-extract themes are great for that, they can also be used for more focussed, lower level use-cases.\nFor example, a component being rendered in different color schemes.\n\nTheming in vanilla-extract is really just a set of helpers on top of the scoped CSS variable creation provided by [createVar].\n\nTo understand how it works, let's take a look at an example.\n\n```ts compiled\n// theme.css.ts\n\nimport { createTheme } from '@vanilla-extract/css';\n\nexport const [themeClass, vars] = createTheme({\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n```\n\nHere we’ve called [createTheme] with our theme implementation.\nBased on this, vanilla-extract will return two things:\n\n- **A class name:** a container class for the provided theme variables.\n- **A theme contract:** a typed data-structure of CSS variables, matching the shape of the provided theme implementation.\n\nAfter processing this file, the resulting compiled JS will look something like this:\n\n```js\n// theme.js\n// Example result of the compiled JS\nimport './theme.css';\n\nexport const vars = {\n  color: {\n    brand: 'var(--color-brand__l520oi1)'\n  },\n  font: {\n    body: 'var(--font-body__l520oi2)'\n  }\n};\n\nexport const themeClass = 'theme_themeClass__l520oi0';\n```\n\nTo create an alternative version of this theme, call [createTheme] again.\nBut this time pass the existing theme contract (i.e. `vars`), as well as the new values.\n\n```ts compiled\n// theme.css.ts\n\nimport { createTheme } from '@vanilla-extract/css';\n\nexport const [themeClass, vars] = createTheme({\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\nexport const otherThemeClass = createTheme(vars, {\n  color: {\n    brand: 'red'\n  },\n  font: {\n    body: 'helvetica'\n  }\n});\n```\n\nBy passing in an existing theme contract, instead of creating new CSS variables the existing ones are reused, but assigned to new values within a new CSS class.\n\nOn top of this, vanilla-extract knows the type of the existing theme contract and requires you implement it completely and correctly.\n\nAfter processing the updated file, the resulting compiled JS will look something like this:\n\n```js\n// theme.js\n// Example result of the compiled JS\nimport './theme.css';\n\nexport const vars = {\n  color: {\n    brand: 'var(--color-brand__l520oi1)'\n  },\n  font: {\n    body: 'var(--font-body__l520oi2)'\n  }\n};\n\nexport const themeClass = 'theme_themeClass__l520oi0';\n\nexport const otherThemeClass =\n  'theme_otherThemeClass__l520oi3';\n```\n\nAs can be observed, the only addition here is the reference to the new theme class name.\n\n## Code Splitting Themes\n\nWhile [createTheme] makes getting started with a theme really easy, it has some trade-offs.\nIt couples the definition of our theme contract to a specific theme implementation.\nIt also means all your alternative themes must import the original theme to access the theme contract.\nThis causes you to unintentionally import the original theme's CSS as well, making it impossible to CSS code-split your themes.\n\nThis is where [createThemeContract] comes in.\nRemember before when we said themes are comprised of a theme contract and a CSS class implementing the theme?\nWell [createThemeContract] lets us define the contract without generating any CSS!\n\nImplementing the above scenario with [createThemeContract] would look something like the following:\n\n```ts compiled\n// contract.css.ts\nimport { createThemeContract } from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  color: {\n    brand: ''\n  },\n  font: {\n    body: ''\n  }\n});\n```\n\nBased on this contract individual themes can now be created. Each theme will need to populate the contract in its entirety.\n\n```ts compiled\n// blueTheme.css.ts\nimport { createTheme } from '@vanilla-extract/css';\nimport { vars } from './contract.css.ts';\n\nexport const blueThemeClass = createTheme(vars, {\n  color: {\n    brand: 'blue'\n  },\n  font: {\n    body: 'arial'\n  }\n});\n\n// redTheme.css.ts\nimport { createTheme } from '@vanilla-extract/css';\nimport { vars } from './contract.css.ts';\n\nexport const redThemeClass = createTheme(vars, {\n  color: {\n    brand: 'red'\n  },\n  font: {\n    body: 'helvetica'\n  }\n});\n\n// contract.css.ts\nimport { createThemeContract } from '@vanilla-extract/css';\n\nexport const vars = createThemeContract({\n  color: {\n    brand: ''\n  },\n  font: {\n    body: ''\n  }\n});\n```\n\n> 🧠&nbsp;&nbsp;When creating a theme contract, the values of the input are ignored so you can pass an empty string, null, or real values. Whatever makes sense to you.\n\nNow we have two themes implementing the same contract, but importing either one will only import their respective CSS!\n\n## Dynamic Theming\n\nSometimes theme values aren't known until runtime.\nTheme contracts are a perfect fit for this situation as they are just collections of CSS variables.\nThis means they can easily be set as inline styles while still retaining type safety.\n\nWe can use the [assignInlineVars] API from the [tiny] `@vanilla-extract/dynamic` package to apply our theme contract at runtime.\n\n> This example uses React, but [assignInlineVars] will work with any framework or vanilla JS.\n\n```ts compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, themeVars } from './theme.css.ts';\n\ninterface ContainerProps {\n  brandColor: string;\n  fontFamily: string;\n}\nconst Container = ({\n  brandColor,\n  fontFamily\n}: ContainerProps) => (\n  <section\n    className={container}\n    style={assignInlineVars(themeVars, {\n      color: { brand: brandColor },\n      font: { body: fontFamily }\n    })}\n  >\n    ...\n  </section>\n);\n\nconst App = () => (\n  <Container brandColor=\"pink\" fontFamily=\"Arial\">\n    ...\n  </Container>\n);\n\n// theme.css.ts\nimport {\n  createThemeContract,\n  style\n} from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\nexport const container = style({\n  background: themeVars.color.brand,\n  fontFamily: themeVars.font.body\n});\n```\n\nThis pattern opens up a lot of interesting possibilities. Type-safe runtime theming without the need for runtime creation and injection of CSS.\n\n[createtheme]: /documentation/api/create-theme/\n[createthemecontract]: /documentation/api/create-theme/\n[assigninlinevars]: /documentation/packages/dynamic/#assigninlinevars\n[createvar]: /documentation/api/create-var\n[tiny]: https://bundlephobia.com/package/@vanilla-extract/dynamic\n"
  },
  {
    "path": "site/docs/packages/css-utils.md",
    "content": "---\ntitle: CSS Utils\nparent: packages\n---\n\n# CSS Utils\n\nAn optional package providing utility functions that make it easier to work with CSS in TypeScript.\n\n```bash\nnpm install @vanilla-extract/css-utils\n```\n\nThis package is not limited to vanilla-extract—it can be used with any CSS-in-JS library.\n\n## calc\n\nStreamlines the creation of CSS calc expressions.\n\n### Simple expressions\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  height: calc.multiply('var(--grid-unit)', 2)\n};\n```\n\nThe following functions are available.\n\n- `calc.add`\n- `calc.subtract`\n- `calc.multiply`\n- `calc.divide`\n- `calc.negate`\n\n### Chainable expressions\n\nThe `calc` export is also a function, providing a chainable API for complex calc expressions.\n\n> When using expression chains it is necessary to call `toString()` to return the constructed expression as the final value.\n\n```tsx\nimport { calc } from '@vanilla-extract/css-utils';\n\nconst styles = {\n  marginTop: calc('var(--space-large)')\n    .divide(2)\n    .negate()\n    .toString()\n};\n```\n"
  },
  {
    "path": "site/docs/packages/dynamic.md",
    "content": "---\ntitle: Dynamic\nparent: packages\n---\n\n# Dynamic\n\nA tiny ([< 1kB compressed](https://bundlephobia.com/package/@vanilla-extract/dynamic@2.0.2)) runtime for performing dynamic updates to scoped theme variables.\n\n```bash\nnpm install @vanilla-extract/dynamic\n```\n\n## assignInlineVars\n\nAllows variables to be assigned dynamically that have been created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc.\n\nAs these APIs produce variable references that contain the CSS var function, e.g. `var(--brandColor__8uideo0)`, it is necessary to remove the wrapping function when setting its value.\n\nVariables with a value of `null` or `undefined` will be omitted from the resulting inline style.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `assignInlineVars` if a theme contract is not provided\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport {\n  container,\n  brandColor,\n  textColor\n} from './styles.css.ts';\n\n// If `tone` is `undefined`, the following inline style becomes:\n// { '--brandColor__8uideo0': 'pink' }\n\nconst MyComponent = ({ tone }: { tone?: critical }) => (\n  <section\n    className={container}\n    style={assignInlineVars({\n      [brandColor]: 'pink',\n      [textColor]: tone === 'critical' ? 'red' : null\n    })}\n  >\n    ...\n  </section>\n);\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n\nexport const container = style({\n  background: brandColor,\n  color: textColor\n});\n```\n\nEven though this function returns an object of inline styles, it implements the `toString` method, returning a valid `style` attribute value so that it can be used in string templates.\n\n```ts\n// app.ts\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, brandColor } from './styles.css.ts';\n\n// The following inline style becomes:\n// \"--brandColor__8uideo0: pink;\"\n\ndocument.write(`\n  <section\n    class=\"${container}\"\n    style=\"${assignInlineVars({ [brandColor]: 'pink' })}\"\n  >\n    ...\n  </section>\n`);\n```\n\n### Assigning theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be assigned dynamically by passing one as the first argument.\nAll variables must be assigned or it’s a type error.\n\nThis API makes the concept of dynamic theming much simpler.\n\n```tsx compiled\n// app.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { container, themeVars } from './theme.css.ts';\n\ninterface ContainerProps {\n  brandColor: string;\n  fontFamily: string;\n}\nconst Container = ({\n  brandColor,\n  fontFamily\n}: ContainerProps) => (\n  <section\n    className={container}\n    style={assignInlineVars(themeVars, {\n      color: { brand: brandColor },\n      font: { body: fontFamily }\n    })}\n  >\n    ...\n  </section>\n);\n\nconst App = () => (\n  <Container brandColor=\"pink\" fontFamily=\"Arial\">\n    ...\n  </Container>\n);\n\n// theme.css.ts\nimport {\n  createThemeContract,\n  style\n} from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n\nexport const container = style({\n  background: themeVars.color.brand,\n  fontFamily: themeVars.font.body\n});\n```\n\n## setElementVars\n\nAn imperative API, allowing variables created using vanilla-extract APIs, e.g. `createVar`, `createTheme`, etc, to be assigned dynamically on a DOM element.\n\nVariables with a value of `null` or `undefined` will not be assigned a value.\n\n> 🧠&nbsp;&nbsp;`null` and `undefined` values can only be passed to `setElementVars` if a theme contract is not provided\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { brandColor, textColor } from './styles.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, {\n  [brandColor]: 'pink',\n  [textColor]: null\n});\n\n// styles.css.ts\nimport { createVar, style } from '@vanilla-extract/css';\n\nexport const brandColor = createVar();\nexport const textColor = createVar();\n```\n\n### Setting theme contracts dynamically\n\n[Theme contracts](/documentation/theming/) can also be set dynamically by passing one as the second argument.\nAll variables must be assigned or it’s a type error.\n\n```ts compiled\n// app.ts\n\nimport { setElementVars } from '@vanilla-extract/dynamic';\nimport { themeVars } from './theme.css.ts';\n\nconst el = document.getElementById('myElement');\n\nsetElementVars(el, themeVars, {\n  color: { brand: 'pink' },\n  font: { body: 'Arial' }\n});\n\n// theme.css.ts\nimport { createThemeContract } from '@vanilla-extract/css';\n\nexport const themeVars = createThemeContract({\n  color: {\n    brand: null\n  },\n  font: {\n    body: null\n  }\n});\n```\n"
  },
  {
    "path": "site/docs/packages/recipes.md",
    "content": "---\ntitle: Recipes\nparent: packages\n---\n\n# Recipes\n\nCreate multi-variant styles with a type-safe runtime API, heavily inspired by [Stitches](https://stitches.dev).\n\nAs with the rest of vanilla-extract, all styles are generated at build time.\n\n> 💡 Recipes is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations.\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/recipes\n```\n\n## recipe\n\nCreates a multi-variant style function that can be used at runtime or statically in `.css.ts` files.\n\nAccepts an optional set of `base` styles, `variants`, `compoundVariants` and `defaultVariants`.\n\n```ts compiled\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  base: {\n    borderRadius: 6\n  },\n\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    },\n    rounded: {\n      true: { borderRadius: 999 }\n    }\n  },\n\n  // Applied when multiple variants are set at once\n  compoundVariants: [\n    {\n      variants: {\n        color: 'neutral',\n        size: 'large'\n      },\n      style: {\n        background: 'ghostwhite'\n      }\n    }\n  ],\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nWith this recipe configured, you can now use it in your templates.\n\n```ts\n// app.ts\nimport { button } from './button.css.ts';\n\ndocument.write(`\n  <button class=\"${button({\n    color: 'accent',\n    size: 'large',\n    rounded: true\n  })}\">\n    Hello world\n  </button>\n`);\n```\n\nYour recipe configuration can also make use of existing variables, classes and styles.\n\nFor example, you can pass in the result of your [`sprinkles`](/documentation/packages/sprinkles) function directly.\n\n```ts\n// button.css.ts\nimport { recipe } from '@vanilla-extract/recipes';\nimport { reset } from './reset.css.ts';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const button = recipe({\n  base: [reset, sprinkles({ borderRadius: 'round' })],\n\n  variants: {\n    color: {\n      neutral: sprinkles({ background: 'neutral' }),\n      brand: sprinkles({ background: 'brand' }),\n      accent: sprinkles({ background: 'accent' })\n    },\n    size: {\n      small: sprinkles({ padding: 'small' }),\n      medium: sprinkles({ padding: 'medium' }),\n      large: sprinkles({ padding: 'large' })\n    }\n  },\n\n  defaultVariants: {\n    color: 'accent',\n    size: 'medium'\n  }\n});\n```\n\nThe recipes function also exposes an array property `variants` that includes all the variants from your recipe.\n\n```ts\nbutton.variants();\n// -> ['color', 'size']\n```\n\n## Recipe class name selection\n\nRecipes function exposes internal class names in `classNames` property.\nThe property has two predefined props: `base` and `variants`. The `base` prop includes base class name. It is always defined even if you do not have any base styles. The `variants` prop includes class names for each defined variant.\n\n```ts\n// app.css.ts\nconsole.log(button.classNames.base);\n// -> app_button__129pj250\nconsole.log(button.classNames.variants.color.neutral);\n// -> app_button_color_neutral__129pj251\nconsole.log(button.classNames.variants.size.small);\n// -> app_button_size_small__129pj254\n```\n\n## RecipeVariants\n\nA utility to make use of the recipe’s type interface. This can be useful when typing functions or component props that need to accept recipe values as part of their interface.\n\n```ts\n// button.css.ts\nimport {\n  recipe,\n  RecipeVariants\n} from '@vanilla-extract/recipes';\n\nexport const button = recipe({\n  variants: {\n    color: {\n      neutral: { background: 'whitesmoke' },\n      brand: { background: 'blueviolet' },\n      accent: { background: 'slateblue' }\n    },\n    size: {\n      small: { padding: 12 },\n      medium: { padding: 16 },\n      large: { padding: 24 }\n    }\n  }\n});\n\n// Get the type\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\n// the above will result in a type equivalent to:\nexport type ButtonVariants = {\n  color?: 'neutral' | 'brand' | 'accent';\n  size?: 'small' | 'medium' | 'large';\n};\n```\n"
  },
  {
    "path": "site/docs/packages/sprinkles.md",
    "content": "---\ntitle: Sprinkles\nparent: packages\n---\n\n# Sprinkles\n\nA zero-runtime atomic CSS framework for vanilla-extract.\n\nGenerate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.\n\nBasically, it’s like building your own zero-runtime, type-safe version of [Tailwind], [Styled System], etc.\n\n> 💡 Sprinkles is an optional package built on top of vanilla-extract using its [function serialization API.](/documentation/api/add-function-serializer) It doesn't have privileged access to vanilla-extract internals so you're also free to build alternative implementations, e.g. [Rainbow Sprinkles.](https://github.com/wayfair/rainbow-sprinkles)\n\n## Setup\n\n```bash\nnpm install @vanilla-extract/sprinkles\n```\n\nCreate a `sprinkles.css.ts` file, then configure and export your `sprinkles` function.\n\n> 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.\n\n```ts compiled\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'flex', 'block', 'inline'],\n    flexDirection: ['row', 'column'],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end',\n      'space-around',\n      'space-between'\n    ],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space\n    // etc.\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    placeItems: ['justifyContent', 'alignItems']\n  }\n});\n\nconst colors = {\n  'blue-50': '#eff6ff',\n  'blue-100': '#dbeafe',\n  'blue-200': '#bfdbfe',\n  'gray-700': '#374151',\n  'gray-800': '#1f2937',\n  'gray-900': '#111827'\n  // etc.\n};\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    color: colors,\n    background: colors\n    // etc.\n  }\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n\n// It's a good idea to export the Sprinkles type too\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n```\n\n## Usage\n\nYou can use your `sprinkles` function in `.css.ts` files for zero-runtime usage.\n\n```ts\n// styles.css.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  display: 'flex',\n  paddingX: 'small',\n\n  // Conditional sprinkles:\n  flexDirection: {\n    mobile: 'column',\n    desktop: 'row'\n  },\n  background: {\n    lightMode: 'blue-50',\n    darkMode: 'gray-700'\n  }\n});\n```\n\nIf you want, you can even use your `sprinkles` function at runtime! 🏃‍♂️\n\n```tsx\n// app.ts\nimport { sprinkles } from './sprinkles.css.ts';\n\nconst flexDirection =\n  Math.random() > 0.5 ? 'column' : 'row';\n\ndocument.write(`\n  <section class=\"${sprinkles({\n    display: 'flex',\n    flexDirection\n  })}\">\n    ...\n  </section>\n`);\n```\n\n> 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!\n\nWithin `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [style](/documentation/api/style) function.\n\n```ts\n// styles.css.ts\nimport { style } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    padding: 'small'\n  }),\n  {\n    ':hover': {\n      outline: '2px solid currentColor'\n    }\n  }\n]);\n```\n\nSprinkles uses this internally, which means that a class list returned by `sprinkles` can be treated as if it were a single class within vanilla-extract selectors.\n\n```ts\n// styles.css.ts\nimport { globalStyle } from '@vanilla-extract/css';\nimport { sprinkles } from './sprinkles.css.ts';\n\nexport const container = sprinkles({\n  padding: 'small'\n});\n\nglobalStyle(`${container} *`, {\n  boxSizing: 'border-box'\n});\n```\n\n## defineProperties\n\nDefines a collection of utility classes with [properties](#properties), [conditions](#conditions) and [shorthands.](#shorthands)\n\nIf you need to scope different conditions to different properties (e.g. some properties support breakpoints, some support light mode and dark mode, some are unconditional), you can provide as many collections of properties to [createSprinkles](#createsprinkles) as you like.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst space = {\n  none: 0,\n  small: '4px',\n  medium: '8px',\n  large: '16px'\n};\n\nconst colors = {\n  blue50: '#eff6ff',\n  blue100: '#dbeafe',\n  blue200: '#bfdbfe'\n  // etc.\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    padding: space\n    // etc.\n  }\n});\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false,\n  properties: {\n    color: colors,\n    background: colors\n  }\n  // etc.\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  colorProperties\n);\n```\n\n> 💡 If you want a good color palette to work with, you might want to consider importing [tailwindcss/colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).\n\n### properties\n\nDefine which CSS properties and values should be available.\n\nFor simple mappings (i.e. valid CSS values), values can be provided as an array.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    display: ['none', 'block', 'flex'],\n    flexDirection: ['row', 'column'],\n    alignItems: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ],\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end'\n    ]\n    // etc.\n  }\n});\n```\n\nFor semantic mappings (e.g. space scales, color palettes), values can be provided as an object.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: {\n      none: 0,\n      small: 4,\n      medium: 8,\n      large: 16\n    }\n    // etc.\n  }\n});\n```\n\nYou can also use [vanilla-extract themes](/documentation/theming) to configure themed values.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    gap: vars.space\n    // etc.\n  }\n});\n```\n\nFor more complicated scenarios, values can even be entire style objects. This works especially well when combined with CSS Variables.\n\n> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.\n\n```ts\n// sprinkles.css.ts\nimport { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst alpha = createVar();\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    background: {\n      red: {\n        vars: { [alpha]: '1' },\n        background: `rgba(255, 0, 0, ${alpha})`\n      }\n    },\n    backgroundOpacity: {\n      1: { vars: { [alpha]: '1' } },\n      0.1: { vars: { [alpha]: '0.1' } }\n    }\n    // etc.\n  }\n});\n```\n\n### shorthands\n\nMaps custom shorthand properties to multiple underlying CSS properties. This is useful for mapping values like `padding`/`paddingX`/`paddingY` to their underlying longhand values.\n\n> 💡 Shorthands are evaluated in the order that they were defined in your configuration. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { vars } from './vars.css.ts';\n\nconst responsiveProperties = defineProperties({\n  properties: {\n    paddingTop: vars.space,\n    paddingBottom: vars.space,\n    paddingLeft: vars.space,\n    paddingRight: vars.space\n  },\n  shorthands: {\n    padding: [\n      'paddingTop',\n      'paddingBottom',\n      'paddingLeft',\n      'paddingRight'\n    ],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom']\n  }\n});\n```\n\n### conditions\n\nDefine a set of media/feature/container queries for the provided properties.\n\nFor example, properties can be scoped to media queries.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nProperties can also be scoped to selectors.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst properties = defineProperties({\n  conditions: {\n    default: {},\n    hover: { selector: '&:hover' },\n    focus: { selector: '&:focus' }\n  },\n  defaultCondition: 'default'\n  // etc.\n});\n```\n\nProperties can also be scoped to container queries.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support container queries]. Vanilla-extract supports the [container query syntax] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport {\n  createContainer,\n  style\n} from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst containerName = createContainer();\n\nexport const container = style({\n  containerName,\n  containerType: 'size'\n});\n\nconst containerProperties = defineProperties({\n  conditions: {\n    small: {},\n    medium: {\n      '@container': `${containerName} (min-width: 768px)`\n    },\n    large: {\n      '@container': `${containerName} (min-width: 1024px)`\n    }\n  },\n  defaultCondition: 'small'\n  // etc.\n});\n```\n\n### defaultCondition\n\nDefines which condition(s) should be used when a non-conditional value is requested, e.g. `sprinkles({ display: 'flex' })`.\n\nIf you're using mobile-first responsive conditions, this should be your lowest breakpoint.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile'\n  // etc.\n});\n```\n\nIf your conditions are mutually exclusive (e.g. light mode and dark mode), you can provide an array of default conditions. For example, the following configuration would automatically expand `sprinkles({ background: 'white' })` to the equivalent of `sprinkles({ background: { lightMode: 'white', darkMode: 'white' }})`.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: ['lightMode', 'darkMode']\n  // etc.\n});\n```\n\nYou can also set `defaultCondition` to `false`, which forces you to be explicit about which conditions you’re targeting.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    lightMode: {\n      '@media': '(prefers-color-scheme: light)'\n    },\n    darkMode: { '@media': '(prefers-color-scheme: dark)' }\n  },\n  defaultCondition: false\n  // etc.\n});\n```\n\n### responsiveArray\n\nProviding an array of condition names enables the responsive array notation (e.g. `['column', 'row']`) by defining the order of conditions.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    mobile: {},\n    tablet: { '@media': 'screen and (min-width: 768px)' },\n    desktop: { '@media': 'screen and (min-width: 1024px)' }\n  },\n  defaultCondition: 'mobile',\n  responsiveArray: ['mobile', 'tablet', 'desktop']\n  // etc.\n});\n```\n\n### @layer\n\nOptionally defines a layer to assign styles to for a given set of properties.\n\n> 🚧&nbsp;&nbsp;Ensure your target browsers [support layers].\n> Vanilla Extract supports the [layers syntax][layer] but does not polyfill the feature in unsupported browsers.\n\n```ts\n// sprinkles.css.ts\nimport { defineProperties } from '@vanilla-extract/sprinkles';\nimport { layer } from '@vanilla-extract/css';\n\nexport const sprinklesLayer = layer();\n\nconst properties = defineProperties({\n  '@layer': sprinklesLayer\n  // etc.\n});\n```\n\n## createSprinkles\n\nCreates a type-safe function for accessing your [defined properties](#defineProperties). You can provide as many collections of properties as you like.\n\n> 🚧&nbsp;&nbsp;Ensure properties are defined as variables before passing them into `createSprinkles`.\n> Calling `defineProperties` inside a `createSprinkles` call will cause types to be inferred incorrectly, resulting in a type-unsafe sprinkles function.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\nconst unconditionalProperties = defineProperties({\n  /* ... */\n});\nconst colorProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unconditionalProperties,\n  colorProperties\n);\n```\n\nThe sprinkles function also exposes a static `properties` key that lets you check whether a given property can be handled by the function.\n\n```ts\nsprinkles.properties.has('paddingX');\n// -> boolean\n```\n\n> 💡 This is useful when building a Box component with sprinkles available at the top level (e.g. `<Box padding=\"small\">`) since you’ll need some way to filter sprinkle props from non-sprinkle props.\n\n## createMapValueFn\n\nCreates a function for mapping over conditional values.\n\n> 💡 This is useful for converting high-level prop values to low-level sprinkles, e.g. converting left/right to flex-start/end.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\nYou can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const mapResponsiveValue = createMapValueFn(\n  responsiveProperties\n);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { mapResponsiveValue } from './sprinkles.css.ts';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  stretch: 'stretch'\n} as const;\n\nmapResponsiveValue(\n  'left',\n  (value) => alignToFlexAlign[value]\n);\n// -> 'flex-start'\n\nmapResponsiveValue(\n  {\n    mobile: 'center',\n    desktop: 'left'\n  } as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n\nmapResponsiveValue(\n  ['center', null, 'left'] as const,\n  (value) => alignToFlexAlign[value]\n);\n// -> { mobile: 'center', desktop: 'flex-start' }\n```\n\n> 💡 You can generate a custom conditional value type with the [ConditionalValue](#conditionalvalue) type.\n\n## createNormalizeValueFn\n\nCreates a function for normalizing conditional values into a consistent object structure. Any primitive values or responsive arrays will be converted to conditional objects.\n\nThis function should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated function whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  createSprinkles,\n  createNormalizeValueFn\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties\n);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n```\n\nYou can then import the generated function in your app code.\n\n```ts\n// app.ts\nimport { normalizeResponsiveValue } from './sprinkles.css.ts';\n\nnormalizeResponsiveValue('block');\n// -> { mobile: 'block' }\n\nnormalizeResponsiveValue(['none', null, 'block']);\n// -> { mobile: 'none', desktop: 'block' }\n\nnormalizeResponsiveValue({\n  mobile: 'none',\n  desktop: 'block'\n});\n// -> { mobile: 'none', desktop: 'block' }\n```\n\n## ConditionalValue\n\nCreates a custom conditional value type.\n\n> 💡 This is useful for typing high-level prop values that are [mapped to low-level sprinkles](#createmapvaluefn), e.g. supporting left/right prop values that map to flex-start/end.\n\nThis type should be created and exported from your `sprinkles.css.ts` file using the conditions from your defined properties.\n\n> 💡 You can name the generated type whatever you like, typically based on the name of your conditions.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  ConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  /* ... */\n});\n\nexport type ResponsiveValue<Value extends string | number> =\n  ConditionalValue<typeof responsiveProperties, Value>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { ResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = ResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n```\n\n## RequiredConditionalValue\n\nSame as [ConditionalValue](#conditionalvalue) except the default condition is required. For example, if your default condition was `'mobile'`, then a conditional value of `{ desktop: '...' }` would be a type error.\n\n```ts\n// sprinkles.css.ts\nimport {\n  defineProperties,\n  RequiredConditionalValue\n} from '@vanilla-extract/sprinkles';\n\nconst responsiveProperties = defineProperties({\n  defaultCondition: 'mobile'\n  // etc.\n});\n\nexport type RequiredResponsiveValue<\n  Value extends string | number\n> = RequiredConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n```\n\nYou can then import the generated type in your app code.\n\n```ts\n// app.ts\nimport { RequiredResponsiveValue } from './sprinkles.css.ts';\n\ntype ResponsiveAlign = RequiredResponsiveValue<\n  'left' | 'center' | 'right'\n>;\n\nconst a: ResponsiveAlign = 'left';\nconst b: ResponsiveAlign = {\n  mobile: 'center',\n  desktop: 'left'\n};\nconst c: ResponsiveAlign = ['center', null, 'left'];\n\n// Type errors:\nconst d: ResponsiveAlign = [null, 'center'];\nconst e: ResponsiveAlign = { desktop: 'center' };\n```\n\n[tailwind]: https://tailwindcss.com\n[styled system]: https://github.com/styled-system/styled-system\n[support container queries]: https://caniuse.com/css-container-queries\n[container query syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries\n[layer]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer\n[support layers]: https://caniuse.com/css-cascade-layers\n"
  },
  {
    "path": "site/documentIndexer.mts",
    "content": "import matter from 'gray-matter';\nimport GithubSlugger from 'github-slugger';\n\ntype Heading = {\n  raw: string;\n  level: number;\n  name: string;\n  breadcrumbs?: string[];\n};\n\nconst getBreadcrumbs = (\n  headings: Heading[],\n  index: number,\n  level = Infinity,\n  defaultValue: string[] = [],\n): string[] => {\n  const target = headings[index];\n  const newValue =\n    target.level < level ? [target.name, ...defaultValue] : defaultValue;\n\n  return target.level === 1 || index === 0\n    ? newValue\n    : getBreadcrumbs(headings, index - 1, target.level, newValue);\n};\n\nexport const parseContents = (rawContent: any) => {\n  const slugger = new GithubSlugger();\n\n  const { content, data } = matter(rawContent);\n  const headingsMatch = content.match(/#{1,}( [ -\\w().]*)/g);\n\n  if (!headingsMatch) {\n    throw new Error('No headings found in the document. Something went wrong.');\n  }\n\n  const headings = headingsMatch.map((heading) => {\n    const split = heading.split('#');\n\n    return {\n      raw: heading,\n      level: split.length - 1,\n      name: split[split.length - 1].trim(),\n    };\n  });\n\n  const breadcrumbs = headings.map((heading, index) => ({\n    ...heading,\n    breadcrumbs: getBreadcrumbs(headings, index),\n  }));\n\n  const sections = breadcrumbs.map((heading) => {\n    return {\n      ...heading,\n      page: data.title,\n      hash: slugger.slug(heading.name),\n    };\n  });\n\n  return {\n    sections,\n    parent: data.parent,\n  };\n};\n"
  },
  {
    "path": "site/legacy-routes.json",
    "content": "[\n  { \"from\": \"/documentation/styling-api\", \"to\": \"/documentation/styling/\" },\n  {\n    \"from\": \"/documentation/sprinkles-api/\",\n    \"to\": \"/documentation/packages/sprinkles/\"\n  },\n  {\n    \"from\": \"/documentation/recipes-api/\",\n    \"to\": \"/documentation/packages/recipes/\"\n  },\n  {\n    \"from\": \"/documentation/dynamic-api/\",\n    \"to\": \"/documentation/packages/dynamic/\"\n  },\n  {\n    \"from\": \"/documentation/utility-functions/\",\n    \"to\": \"/documentation/packages/css-utils/\"\n  },\n  {\n    \"from\": \"/documentation/setup/\",\n    \"to\": \"/documentation/getting-started/#bundler-integration\"\n  }\n]\n"
  },
  {
    "path": "site/makeDocsManifest.mts",
    "content": "import { resolve, join } from 'path';\nimport { readFile, writeFile } from 'fs/promises';\nimport { parseContents } from './documentIndexer.mts';\nimport { contents } from './contents.mts';\n\nconst manifest: {\n  groups: string[];\n  pages: {\n    group: string;\n    label: string;\n    fileName: string;\n    route: string;\n    sections: {\n      raw: string;\n      level: number;\n      name: string;\n      breadcrumbs?: string[];\n    }[];\n  }[];\n} = { groups: [], pages: [] };\n\nfor (const { group, label, pages } of contents) {\n  manifest.groups.push(label);\n\n  for (const page of pages) {\n    console.log('Loading', page);\n\n    const fileName = join(group, `${page}.md`);\n    const fileContents = await readFile(\n      join(import.meta.dirname, './docs', fileName),\n    );\n\n    const { sections, parent } = parseContents(fileContents);\n\n    const route = parent\n      ? `/documentation/${parent}/${page}/`\n      : `/documentation/${page}/`;\n\n    manifest.pages.push({\n      group,\n      label,\n      fileName,\n      route,\n      sections,\n    });\n  }\n}\n\nawait writeFile(\n  resolve(import.meta.dirname, 'docs-manifest.json'),\n  JSON.stringify(manifest, null, 2),\n);\n"
  },
  {
    "path": "site/package.json",
    "content": "{\n  \"name\": \"site\",\n  \"version\": \"0.0.1\",\n  \"private\": true,\n  \"scripts\": {\n    \"generate:docs-manifest\": \"node ./makeDocsManifest.mts\",\n    \"prestart\": \"pnpm run generate:docs-manifest\",\n    \"start\": \"webpack serve\",\n    \"prebuild\": \"pnpm run generate:docs-manifest\",\n    \"build\": \"NODE_ENV=production webpack\",\n    \"deploy:prod\": \"netlify deploy --site vanilla-extract-css --dir dist --prod\",\n    \"deploy:branch\": \"netlify deploy --site vanilla-extract-css --dir dist --alias $GITHUB_REF_NAME\"\n  },\n  \"dependencies\": {\n    \"@capsizecss/vanilla-extract\": \"^2.0.4\",\n    \"@docsearch/css\": \"3.3.3\",\n    \"@docsearch/react\": \"3.3.3\",\n    \"@mdx-js/react\": \"^1.6.22\",\n    \"clsx\": \"^2.1.1\",\n    \"dedent\": \"^1.5.3\",\n    \"lodash\": \"^4.17.21\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-head\": \"^3.4.2\",\n    \"react-router-dom\": \"^6.22.0\",\n    \"react-router-hash-link\": \"^2.4.3\",\n    \"react-syntax-highlighter\": \"^16.1.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.23.9\",\n    \"@babel/preset-env\": \"^7.23.9\",\n    \"@babel/preset-react\": \"^7.23.3\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"@types/lodash\": \"^4.14.168\",\n    \"@types/mdx-js__react\": \"^1.5.8\",\n    \"@types/react\": \"^18.2.55\",\n    \"@types/react-dom\": \"^18.2.19\",\n    \"@types/react-router-hash-link\": \"^2.4.9\",\n    \"@types/webpack-bundle-analyzer\": \"^4.7.0\",\n    \"@vanilla-extract/css\": \"workspace:*\",\n    \"@vanilla-extract/css-utils\": \"workspace:*\",\n    \"@vanilla-extract/dynamic\": \"workspace:*\",\n    \"@vanilla-extract/integration\": \"workspace:*\",\n    \"@vanilla-extract/recipes\": \"workspace:*\",\n    \"@vanilla-extract/sprinkles\": \"workspace:*\",\n    \"@vanilla-extract/webpack-plugin\": \"workspace:*\",\n    \"babel-loader\": \"^10.0.0\",\n    \"copy-webpack-plugin\": \"^13.0.1\",\n    \"css-loader\": \"^7.1.2\",\n    \"csstype\": \"^3.2.3\",\n    \"eval\": \"0.1.8\",\n    \"github-slugger\": \"^2.0.0\",\n    \"gray-matter\": \"^4.0.2\",\n    \"html-render-webpack-plugin\": \"^3.0.2\",\n    \"mdx-loader\": \"^3.0.2\",\n    \"mini-css-extract-plugin\": \"^2.9.4\",\n    \"netlify-cli\": \"^11.8.3\",\n    \"null-loader\": \"^4.0.1\",\n    \"tailwindcss\": \"^4.1.18\",\n    \"webpack\": \"^5.90.0\",\n    \"webpack-bundle-analyzer\": \"^5.1.0\",\n    \"webpack-cli\": \"^6.0.1\",\n    \"webpack-dev-server\": \"^5.2.2\",\n    \"webpack-node-externals\": \"^3.0.0\"\n  }\n}\n"
  },
  {
    "path": "site/src/App.css.ts",
    "content": "import { globalStyle } from '@vanilla-extract/css';\nimport { darkMode } from './system/styles/sprinkles.css';\nimport { vars } from './themes.css';\n\nglobalStyle('html, body', {\n  margin: 0,\n  padding: 0,\n});\n\nglobalStyle(`.${darkMode}`, {\n  background: vars.palette.black,\n  color: vars.palette.zinc50,\n  colorScheme: 'dark',\n});\n\nglobalStyle('html', {\n  background: vars.palette.white,\n  color: vars.palette.gray900,\n});\n"
  },
  {
    "path": "site/src/App.tsx",
    "content": "import { Navigate, Route, Routes } from 'react-router-dom';\nimport { Title, Meta } from 'react-head';\nimport { HomePage } from './HomePage/HomePage';\nimport { DocsPage } from './DocsPage/DocsPage';\nimport { ColorModeProvider } from './ColorModeToggle/ColorModeToggle';\nimport legacyRoutes from '../legacy-routes.json';\nimport './App.css';\n\nconst pageTitle = 'vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.';\nconst description = 'Zero-runtime Stylesheets-in-TypeScript.';\n\nexport default () => {\n  return (\n    <ColorModeProvider>\n      <Title>{pageTitle}</Title>\n      <Meta property=\"og:title\" content={pageTitle} />\n      <Meta name=\"twitter:title\" content={pageTitle} />\n      <Meta name=\"description\" content={description} />\n      <Meta property=\"og:description\" content={description} />\n      <Meta name=\"twitter:description\" content={description} />\n\n      <Routes>\n        <Route path=\"/\" element={<HomePage />} />\n\n        {legacyRoutes.map((route) => (\n          <Route\n            key={route.from}\n            path={route.from}\n            element={<Navigate to={route.to} replace />}\n          />\n        ))}\n\n        <Route path=\"/*\" element={<DocsPage />} />\n      </Routes>\n    </ColorModeProvider>\n  );\n};\n"
  },
  {
    "path": "site/src/Blockquote/Blockquote.css.ts",
    "content": "import { globalStyle, style } from '@vanilla-extract/css';\nimport { darkMode } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\n\nexport const root = style({\n  '::before': {\n    content: '\"\"',\n    position: 'absolute',\n    background: vars.palette.pink100,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    zIndex: -1,\n    transform: 'skewX(-2deg) skewY(-0.75deg)',\n  },\n  selectors: {\n    [`.${darkMode} &::before`]: {\n      background: vars.palette.slate900,\n    },\n  },\n});\n\nglobalStyle(`${root} code`, {\n  background: vars.palette.pink200,\n  color: 'inherit',\n});\n\nglobalStyle(`.${darkMode} ${root} code`, {\n  background: vars.palette.slate800,\n  color: 'inherit',\n});\n"
  },
  {
    "path": "site/src/Blockquote/Blockquote.tsx",
    "content": "import type { ReactNode } from 'react';\nimport { Box } from '../system';\nimport * as styles from './Blockquote.css';\n\nexport default (props: { children: ReactNode }) => {\n  return (\n    <Box\n      paddingX={{ mobile: 'large', tablet: 'xlarge' }}\n      paddingY=\"xxlarge\"\n      position=\"relative\"\n      className={styles.root}\n    >\n      {props.children}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/Chevron/Chevron.css.ts",
    "content": "import { style, styleVariants } from '@vanilla-extract/css';\n\nexport const root = style({\n  transition: 'transform .15s ease',\n  position: 'relative',\n  top: '1px',\n});\n\nexport const direction = styleVariants({\n  down: {},\n  up: { transform: 'rotate(180deg)' },\n  left: { transform: 'rotate(90deg)' },\n  right: { transform: 'rotate(270deg)' },\n});\n"
  },
  {
    "path": "site/src/Chevron/Chevron.tsx",
    "content": "import clsx from 'clsx';\nimport * as styles from './Chevron.css';\n\nexport interface ChevronProps {\n  direction: 'up' | 'down' | 'left' | 'right';\n}\n\nexport const Chevron = ({ direction = 'down' }: ChevronProps) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 1024 1024\"\n    fill=\"currentColor\"\n    className={clsx(styles.root, styles.direction[direction])}\n  >\n    <path d=\"M945 266l78 67-510 524-510-524 75-69 435 451 432-449z\" />\n  </svg>\n);\n"
  },
  {
    "path": "site/src/Code/CompiledCode.css.ts",
    "content": "import {\n  createVar,\n  fallbackVar,\n  style,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { calc } from '@vanilla-extract/css-utils';\nimport { darkMode, sprinkles } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\n\nexport const darkModeBg = createVar();\nexport const lightModeBg = createVar();\n\nexport const root = style([\n  sprinkles({ position: 'relative', zIndex: 0 }),\n  {\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      background: fallbackVar(lightModeBg, vars.palette.blue50),\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      zIndex: -1,\n      transform: 'skewX(-1deg) skewY(0.75deg)',\n    },\n    selectors: {\n      [`.${darkMode} &::before`]: {\n        background: fallbackVar(darkModeBg, vars.palette.zinc900),\n      },\n    },\n  },\n]);\n\nconst backgroundColor = createVar();\nexport const fileNameFocus = style({\n  vars: {\n    [backgroundColor]: vars.palette.gray900,\n  },\n  outline: 'none',\n  ':focus-visible': {\n    boxShadow: `0 0 0 6px ${backgroundColor}, 0px 0px 0px 8px ${vars.palette.blue300}`,\n  },\n  selectors: {\n    [`.${darkMode} &:focus-visible`]: {\n      vars: {\n        [backgroundColor]: vars.palette.zinc900,\n      },\n    },\n  },\n});\n\nexport const fileIndicatorInactive = style({\n  transform: 'skew(-15deg)',\n  filter: 'saturate(0)',\n  opacity: 0.2,\n});\nexport const fileIndicatorActive = style({\n  transform: 'skew(15deg)',\n});\nexport const fileName = style({\n  color: vars.palette.blue800,\n  selectors: {\n    [`.${darkMode} &`]: {\n      color: vars.palette.white,\n    },\n  },\n});\nexport const fileNameInactive = style({\n  opacity: 0.7,\n});\n\nexport const boldLayoutShiftFix = style({\n  '::after': {\n    content: ['attr(data-text)', 'attr(data-text) / \"\"'],\n    fontWeight: vars.weight.strong,\n    fontSize: vars.text.small.mobile.fontSize,\n    lineHeight: vars.text.small.mobile.lineHeight,\n    fontFamily: vars.fonts.body,\n    opacity: 0,\n    visibility: 'hidden',\n    overflow: 'hidden',\n    userSelect: 'none',\n  },\n  '@media': {\n    speech: {\n      '::after': {\n        display: 'none',\n      },\n    },\n  },\n});\n\nconst sideBySideBreakpoint = 1000;\n\nconst sideBySideStyles = (styles: StyleRule): StyleRule => ({\n  '@media': {\n    [`screen and (min-width: ${sideBySideBreakpoint}px)`]: styles,\n  },\n});\n\nconst belowSideBySideStyles = (styles: StyleRule): StyleRule => ({\n  '@media': {\n    [`screen and (max-width: ${sideBySideBreakpoint - 1}px)`]: styles,\n  },\n});\n\nexport const showCssOnMobile = style({});\n\nexport const maxHeight = style({\n  maxHeight: 'min(65vh, 800px)',\n  overflow: 'auto',\n});\n\nexport const sourceContainer = style([\n  maxHeight,\n  {\n    transformOrigin: '0 50%',\n  },\n  sideBySideStyles({\n    width: 'auto',\n    flexShrink: 1,\n  }),\n  {\n    selectors: {\n      [`${showCssOnMobile} &`]: belowSideBySideStyles({\n        transform: `scale(.9)`,\n        opacity: 0,\n      }),\n    },\n  },\n]);\n\nexport const outputContainer = style([\n  {\n    position: 'relative',\n    '::before': {\n      content: '\"\"',\n      position: 'absolute',\n      background: vars.palette.blue100,\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      zIndex: -1,\n      transform: 'skewX(.75deg) skewY(1.5deg)',\n    },\n    selectors: {\n      [`.${darkMode} &::before`]: {\n        background: vars.palette.black,\n      },\n    },\n  },\n  sideBySideStyles({\n    width: '45%',\n    flexGrow: 0,\n    marginTop: calc(vars.spacing.medium).negate().toString(),\n    marginBottom: calc(vars.spacing.large).negate().toString(),\n    marginLeft: vars.spacing.large,\n  }),\n  belowSideBySideStyles({\n    transform: 'scale(1.1) translateX(-82%)',\n    flexGrow: 1,\n    opacity: 0,\n    pointerEvents: 'none',\n  }),\n  {\n    selectors: {\n      [`${showCssOnMobile} &`]: belowSideBySideStyles({\n        transform: 'scale(1) translateX(-100%)',\n        opacity: 1,\n        pointerEvents: 'auto',\n      }),\n    },\n  },\n]);\n\nexport const buttonContainer = style(\n  sideBySideStyles({\n    display: 'none',\n  }),\n);\n\nexport const button = style({\n  userSelect: 'none',\n  outline: 'none',\n  ':active': {\n    transform: 'scale(.95) translateZ(0)',\n    transformOrigin: '50% 50%',\n  },\n  ':focus-visible': {\n    boxShadow: `0px 0px 0px 4px ${vars.palette.blue400}`,\n  },\n});\n"
  },
  {
    "path": "site/src/Code/CompiledCode.tsx",
    "content": "import { useState } from 'react';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Box, Stack } from '../system';\nimport Text from '../Typography/Text';\nimport SyntaxHighlighter from './SyntaxHighlighter';\n\nimport * as styles from './CompiledCode.css';\nimport { vars } from '../themes.css';\n\ninterface File {\n  contents: string;\n  fileName?: string;\n  language?: string;\n  tokenized?: boolean;\n}\n\nexport interface CompiledCodeProps {\n  code: Array<File>;\n  css?: Record<string, string>;\n  background?: {\n    lightMode?: keyof typeof vars.palette;\n    darkMode?: keyof typeof vars.palette;\n  };\n}\n\nexport const CompiledCode = ({ code, css, background }: CompiledCodeProps) => {\n  const [activeFileName, setActiveFileName] = useState(code[0].fileName);\n  const [showCss, setShowCss] = useState(false);\n  const showOutputPanel = css && activeFileName?.endsWith('.css.ts');\n\n  const activeFile = code.filter(\n    ({ fileName }) => fileName === activeFileName,\n  )[0];\n\n  return (\n    <Box\n      padding={{\n        mobile: 'large',\n        tablet: 'xlarge',\n      }}\n      paddingY=\"xlarge\"\n      paddingBottom={css ? 'xxlarge' : undefined}\n      className={styles.root}\n      style={\n        background\n          ? assignInlineVars({\n              [styles.darkModeBg]: vars.palette[background.darkMode!],\n              [styles.lightModeBg]: vars.palette[background.lightMode!],\n            })\n          : undefined\n      }\n    >\n      <Stack space={code.length > 1 ? 'xlarge' : 'large'}>\n        {activeFile.fileName ? (\n          <Box display=\"flex\" alignItems=\"center\">\n            {code.map(({ fileName }) => {\n              const isActiveFile = fileName === activeFileName;\n\n              return (\n                <Box\n                  key={fileName}\n                  component={code.length > 1 ? 'button' : 'span'}\n                  cursor={code.length > 1 ? 'pointer' : undefined}\n                  marginRight=\"large\"\n                  marginTop=\"-medium\"\n                  className={styles.fileNameFocus}\n                  borderRadius=\"small\"\n                  onClick={\n                    code.length > 1\n                      ? () => {\n                          setActiveFileName(fileName);\n                          setShowCss(false);\n                        }\n                      : undefined\n                  }\n                >\n                  <Box position=\"relative\" display=\"flex\" alignItems=\"center\">\n                    <Box\n                      component=\"span\"\n                      position=\"absolute\"\n                      background={{\n                        lightMode: 'green300',\n                        darkMode: 'green400',\n                      }}\n                      borderRadius=\"full\"\n                      paddingLeft=\"xsmall\"\n                      paddingTop=\"large\"\n                      marginLeft=\"xsmall\"\n                      transition=\"slow\"\n                      className={\n                        isActiveFile\n                          ? styles.fileIndicatorActive\n                          : styles.fileIndicatorInactive\n                      }\n                    />\n                    <Box\n                      component=\"span\"\n                      paddingLeft=\"large\"\n                      position=\"relative\"\n                      className={styles.boldLayoutShiftFix}\n                      data-text={fileName}\n                    >\n                      <Box position=\"absolute\" left={0} paddingLeft=\"large\">\n                        <Text\n                          key={fileName}\n                          size=\"small\"\n                          weight={isActiveFile ? 'strong' : undefined}\n                          baseline={false}\n                        >\n                          <Box\n                            component=\"span\"\n                            className={[\n                              styles.fileName,\n                              !isActiveFile\n                                ? styles.fileNameInactive\n                                : undefined,\n                            ]}\n                          >\n                            {fileName}\n                          </Box>\n                        </Text>\n                      </Box>\n                    </Box>\n                  </Box>\n                </Box>\n              );\n            })}\n          </Box>\n        ) : null}\n        <Box padding=\"large\" margin=\"-large\" overflow=\"hidden\">\n          <Box\n            display=\"flex\"\n            className={showCss ? styles.showCssOnMobile : undefined}\n          >\n            <Box\n              width=\"full\"\n              flexGrow={1}\n              flexShrink={0}\n              minWidth={0}\n              transition=\"slow\"\n              className={styles.sourceContainer}\n            >\n              <SyntaxHighlighter\n                language={activeFile.language || 'tsx'}\n                tokenized={activeFile.tokenized}\n              >\n                {activeFile.contents}\n              </SyntaxHighlighter>\n            </Box>\n            {showOutputPanel ? (\n              <Box\n                id=\"outputContainer\"\n                width=\"full\"\n                flexShrink={0}\n                minWidth={0}\n                padding=\"large\"\n                transition=\"slow\"\n                className={styles.outputContainer}\n              >\n                <Stack space=\"large\">\n                  <Text weight=\"strong\" size=\"small\" color=\"secondary\">\n                    CSS\n                  </Text>\n\n                  {activeFileName && css[activeFileName] ? (\n                    <Box className={styles.maxHeight}>\n                      <SyntaxHighlighter language=\"css\">\n                        {css[activeFileName]}\n                      </SyntaxHighlighter>\n                    </Box>\n                  ) : (\n                    <Text size=\"small\" type=\"code\">\n                      No CSS created\n                    </Text>\n                  )}\n                </Stack>\n              </Box>\n            ) : null}\n          </Box>\n        </Box>\n      </Stack>\n\n      {showOutputPanel ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"flex-end\"\n          paddingTop={{ mobile: 'medium' }}\n          className={styles.buttonContainer}\n        >\n          <Box\n            component=\"button\"\n            background=\"zinc600\"\n            borderRadius=\"medium\"\n            padding=\"medium\"\n            cursor=\"pointer\"\n            className={styles.button}\n            onClick={() => setShowCss(!showCss)}\n            position=\"relative\"\n            transition=\"fast\"\n            aria-expanded={showCss}\n            aria-controls=\"outputContainer\"\n          >\n            <Box\n              component=\"span\"\n              display=\"block\"\n              background=\"pink600\"\n              position=\"absolute\"\n              inset={0}\n              pointerEvents=\"none\"\n              borderRadius=\"medium\"\n              opacity={showCss ? 0 : undefined}\n              transition=\"slow\"\n            />\n            <Box component=\"span\" position=\"relative\">\n              <Text size=\"small\" color=\"code\" weight=\"strong\">\n                {showCss ? 'Close' : 'Show Output'}\n              </Text>\n            </Box>\n          </Box>\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/Code/ErrorHighlighter.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../themes.css';\n\nexport const errorUnderline = style({\n  textDecorationStyle: 'dashed',\n  textDecorationColor: vars.palette.red,\n  textDecorationThickness: '3px',\n  textDecorationLine: 'underline',\n  textDecorationSkipInk: 'none',\n  textUnderlineOffset: '2px',\n});\n"
  },
  {
    "path": "site/src/Code/ErrorHighlighter.tsx",
    "content": "import { useRef, useEffect, type ReactNode } from 'react';\nimport * as styles from './ErrorHighlighter.css';\n\nexport interface CodeProps {\n  children: ReactNode;\n  tokens: Array<string>;\n}\n\nexport const ErrorHighlighter = ({ tokens, children }: CodeProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (rootRef.current === null || tokens.length === 0) {\n      return;\n    }\n\n    const spans = rootRef.current.querySelectorAll('code span');\n\n    if (!spans) {\n      return;\n    }\n\n    const errorNodes: Array<Element> = [];\n    for (const span of Array.from(spans)) {\n      if (span.innerHTML && tokens.includes(span.innerHTML.trim())) {\n        span.classList.add(styles.errorUnderline);\n        errorNodes.push(span);\n      }\n    }\n\n    return () => {\n      errorNodes.forEach((errorNode) => {\n        errorNode.classList.remove(styles.errorUnderline);\n      });\n    };\n  }, [rootRef.current, tokens]);\n\n  return <div ref={rootRef}>{children}</div>;\n};\n"
  },
  {
    "path": "site/src/Code/SyntaxHighlighter.css.ts",
    "content": "import {\n  style,\n  globalStyle,\n  createThemeContract,\n  assignVars,\n} from '@vanilla-extract/css';\nimport { darkMode } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\n\nconst themeVars = createThemeContract({\n  base: null,\n  subtle: null,\n  blue: null,\n  green: null,\n  pink: null,\n});\n\nconst lightVars = assignVars(themeVars, {\n  base: vars.palette.blue800,\n  subtle: vars.palette.gray400,\n  blue: vars.palette.blue600,\n  green: vars.palette.green600,\n  pink: vars.palette.pink600,\n});\n\nconst darkVars = assignVars(themeVars, {\n  base: vars.palette.white,\n  subtle: vars.palette.zinc400,\n  blue: vars.palette.blue300,\n  green: vars.palette.green300,\n  pink: vars.palette.pink400,\n});\n\nexport const root = style([\n  {\n    overflowX: 'auto',\n    selectors: {\n      [`:not(.${darkMode}) &`]: {\n        vars: lightVars,\n      },\n      [`.${darkMode} &`]: {\n        vars: darkVars,\n      },\n    },\n  },\n]);\n\nconst scopeSelectors = (tokens: Array<string>) =>\n  tokens.map((t) => `${root} ${t}`).join(', ');\n\nglobalStyle(scopeSelectors(['pre', 'code']), {\n  fontFamily: vars.fonts.code,\n  padding: 0,\n  margin: 0,\n});\nglobalStyle(scopeSelectors(['code', '.attr-name', '.tag', '.property']), {\n  color: themeVars.base,\n});\nglobalStyle(scopeSelectors(['.comment', '.punctuation', '.operator']), {\n  color: themeVars.subtle,\n});\nglobalStyle(scopeSelectors(['.language-css', '.string']), {\n  color: themeVars.green,\n});\nglobalStyle(\n  scopeSelectors([\n    '.language-css .function',\n    '.language-bash .function',\n    '.selector',\n    '.number',\n    '.keyword',\n  ]),\n  {\n    color: themeVars.blue,\n  },\n);\nglobalStyle(scopeSelectors(['.function', '.unit']), {\n  color: themeVars.pink,\n});\n"
  },
  {
    "path": "site/src/Code/SyntaxHighlighter.tsx",
    "content": "// @ts-expect-error\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter/dist/esm/index';\n// @ts-expect-error\nimport tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';\n// @ts-expect-error\nimport ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';\nSyntaxHighlighter.registerLanguage('tsx', tsx);\nSyntaxHighlighter.registerLanguage('ts', ts);\n\nimport { Box } from '../system';\nimport Text from '../Typography/Text';\nimport * as styles from './SyntaxHighlighter.css';\n\nexport interface CodeProps {\n  language: string;\n  children: string;\n  tokenized?: boolean;\n}\n\nexport default ({ language, children, tokenized }: CodeProps) => {\n  return (\n    <Box className={styles.root}>\n      <Text size=\"code\" component=\"div\" baseline={false}>\n        {tokenized ? (\n          <code\n            className={`language-${language}`}\n            data-language={language}\n            dangerouslySetInnerHTML={{ __html: children }}\n          />\n        ) : (\n          <SyntaxHighlighter\n            language={language}\n            style={{ [`pre[class*=\"language-\"]`]: {} }}\n          >\n            {children}\n          </SyntaxHighlighter>\n        )}\n      </Text>\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/ColorModeToggle/ColorModeToggle.css.ts",
    "content": "import { assignVars, createThemeContract, style } from '@vanilla-extract/css';\nimport { darkMode } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\n\nconst themeVars = createThemeContract({\n  toggleBrightness: null,\n  toggleContent: null,\n  focusRingColor: null,\n});\n\nconst lightVars = assignVars(themeVars, {\n  toggleBrightness: '0',\n  toggleContent: '\"☀️\"',\n  focusRingColor: vars.palette.pink400,\n});\n\nconst darkVars = assignVars(themeVars, {\n  toggleBrightness: '10',\n  toggleContent: '\"🌙\"',\n  focusRingColor: vars.palette.pink500,\n});\n\nexport const root = style({\n  outline: 'none',\n  fontSize: 24,\n  height: 42,\n  width: 42,\n  vars: lightVars,\n  ':focus-visible': {\n    boxShadow: `0px 0px 0px 3px ${themeVars.focusRingColor}`,\n  },\n  '::before': {\n    content: themeVars.toggleContent,\n    filter: `contrast(0) brightness(${themeVars.toggleBrightness})`,\n  },\n  selectors: {\n    [`.${darkMode} &`]: {\n      vars: darkVars,\n    },\n  },\n});\n"
  },
  {
    "path": "site/src/ColorModeToggle/ColorModeToggle.tsx",
    "content": "import {\n  useEffect,\n  useState,\n  createContext,\n  useContext,\n  type ReactNode,\n} from 'react';\nimport { Box } from '../system';\nimport * as styles from './ColorModeToggle.css';\n\ntype ColorMode = 'dark' | 'light';\nexport const themeKey = 'vanilla-theme-pref';\n\ninterface ColorModeContextValues {\n  colorMode: ColorMode | null;\n  setColorMode: (colorMode: ColorMode) => void;\n}\n\nexport const ColorModeContext = createContext<ColorModeContextValues>({\n  colorMode: null,\n  setColorMode: () => {},\n});\n\nexport function ColorModeProvider({ children }: { children: ReactNode }) {\n  const [colorMode, setColorMode] = useState<ColorMode | null>(null);\n\n  useEffect(() => {\n    setColorMode(\n      document.documentElement.classList.contains('dark') ? 'dark' : 'light',\n    );\n  }, []);\n\n  const setter = (c: ColorMode) => {\n    setColorMode(c);\n\n    document.documentElement.classList.remove('light', 'dark');\n    document.documentElement.classList.add(c);\n\n    try {\n      localStorage.setItem(themeKey, c);\n    } catch {}\n  };\n\n  return (\n    <ColorModeContext.Provider\n      value={{\n        colorMode,\n        setColorMode: setter,\n      }}\n    >\n      {children}\n    </ColorModeContext.Provider>\n  );\n}\n\nexport const ColorModeToggle = () => {\n  const { colorMode, setColorMode } = useContext(ColorModeContext);\n\n  return (\n    <Box\n      component=\"button\"\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      borderRadius=\"full\"\n      cursor=\"pointer\"\n      className={styles.root}\n      title=\"Toggle color mode\"\n      onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}\n    />\n  );\n};\n"
  },
  {
    "path": "site/src/Divider/Divider.css.ts",
    "content": "import { calc } from '@vanilla-extract/css-utils';\nimport { style } from '@vanilla-extract/css';\nimport { vars } from '../themes.css';\n\nexport const root = style({\n  height: `${calc(vars.grid).multiply(2)}`,\n  width: 120,\n});\n"
  },
  {
    "path": "site/src/Divider/Divider.tsx",
    "content": "import { Box } from '../system';\nimport * as styles from './Divider.css';\n\nexport default () => {\n  return (\n    <Box\n      component=\"hr\"\n      background={{ lightMode: 'pink400', darkMode: 'pink500' }}\n      borderRadius=\"full\"\n      className={styles.root}\n    />\n  );\n};\n"
  },
  {
    "path": "site/src/DocsPage/DocsPage.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { calc } from '@vanilla-extract/css-utils';\nimport { vars } from '../themes.css';\nimport { responsiveStyle } from '../themeUtils';\n\nexport const headerHeight = '145px';\nconst sidebarWidth = '300px';\n\nexport const bodyLock = style({\n  overflow: 'hidden!important',\n});\n\nexport const homeLink = style({\n  textDecoration: 'none',\n  ':focus-visible': {\n    outline: 'none',\n    filter: `drop-shadow(2px 4px 1px ${vars.palette.pink400})`,\n  },\n});\n\nexport const header = style({\n  height: headerHeight,\n});\n\nexport const headerBg = style(\n  responsiveStyle({\n    mobile: {\n      width: '100%',\n      clipPath: 'polygon(0 0, 100% 0, 100% 20%, 0 100%)',\n    },\n    desktop: {\n      width: '100vw',\n      clipPath: 'polygon(0 0, 45% 0, 45% 0, 0 100%)',\n      opacity: 0.9,\n      backdropFilter: 'blur(4px)',\n    },\n  }),\n);\n\nexport const container = style(\n  responsiveStyle({\n    desktop: {\n      paddingTop: `${calc(headerHeight).add(vars.spacing.medium)}`,\n    },\n  }),\n);\n\nexport const sidebar = style(\n  responsiveStyle({\n    mobile: {\n      width: `clamp(300px, 40vw, 400px)`,\n      transition: 'transform .15s ease, opacity .15s ease',\n      top: 0,\n      bottom: 0,\n      overflow: 'auto',\n    },\n    desktop: {\n      width: sidebarWidth,\n      top: `${calc(headerHeight).add(vars.spacing.large)}`,\n    },\n  }),\n);\n\nexport const showOnWideScreens = style({\n  '@media': {\n    [`screen and (max-width: 1500px)`]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const active = style({});\n\nexport const activeIndicator = style({\n  transition: 'transform .3s ease, opacity .3s ease',\n  transform: 'skew(15deg)',\n  selectors: {\n    [`&:not(${active})`]: {\n      transform: 'translateX(-80%)',\n    },\n  },\n});\n\nexport const activeIndicatorRight = style({\n  transform: 'skew(-15deg)',\n});\n\nexport const primaryNavOpen = style({});\n\nexport const primaryNav = style({\n  ':before': {\n    content: '\"\"',\n    position: 'absolute',\n    zIndex: -1,\n    left: '-30px',\n    top: 0,\n    bottom: 0,\n    width: '50px',\n    background: 'inherit',\n    clipPath: 'polygon(100% 0, 100% 100%, 0 100%, 60% 0)',\n  },\n  ...responsiveStyle({\n    mobile: {\n      width: `clamp(300px, 40vw, 400px)`,\n      transition: 'transform .15s ease, opacity .15s ease',\n      top: 0,\n      bottom: 0,\n      right: 0,\n    },\n    desktop: {\n      right: 'initial',\n      background: 'initial!important',\n    },\n  }),\n  selectors: {\n    [`:not(${primaryNavOpen})&`]: {\n      '@media': {\n        'screen and (max-width: 1199px)': {\n          transform: 'translateX(12px)',\n        },\n      },\n    },\n  },\n});\n\nexport const scrollContainer = style({\n  overflow: 'auto',\n  height: '100%',\n});\n\nexport const main = style([\n  responsiveStyle({\n    desktop: {\n      marginLeft: sidebarWidth,\n    },\n  }),\n  {\n    '@media': {\n      [`screen and (min-width: 1500px)`]: {\n        marginRight: sidebarWidth,\n      },\n    },\n  },\n]);\n\nexport const backdrop = style({\n  transition: 'opacity 0.1s ease',\n  backdropFilter: 'blur(4px)',\n});\n\nexport const backdrop_isVisible = style({\n  opacity: 0.8,\n});\n"
  },
  {
    "path": "site/src/DocsPage/DocsPage.tsx",
    "content": "import { useState, useEffect } from 'react';\nimport {\n  Link as ReactRouterLink,\n  Route,\n  Routes,\n  useLocation,\n} from 'react-router-dom';\nimport { MDXProvider } from '@mdx-js/react';\nimport { Title, Meta } from 'react-head';\nimport clsx from 'clsx';\nimport { useActiveHash, useHeadingRouteUpdates } from '../useHeadingRoute';\nimport SiblingDoc from './SiblingDoc/SiblingDoc';\nimport mdxComponents from '../mdx-components';\nimport { Fab } from '../Fab/Fab';\nimport { Box, ContentBlock, Stack } from '../system';\nimport { groups, pages } from '../docs-store';\nimport Logo from '../Logo/Logo';\nimport { ColorModeToggle } from '../ColorModeToggle/ColorModeToggle';\nimport * as styles from './DocsPage.css';\nimport Link from '../Typography/Link';\nimport Text from '../Typography/Text';\n\nimport mapKeys from 'lodash/mapKeys';\nimport { SearchInput } from '../SearchInput/SearchInput';\n\ninterface DocsRouteProps {\n  component: (props: any) => JSX.Element;\n  prevDoc?: {\n    title: string;\n    route: string;\n  };\n  nextDoc?: {\n    title: string;\n    route: string;\n  };\n  hashes: Array<string>;\n}\n\nconst DocsRoute = ({\n  component: Component,\n  prevDoc,\n  nextDoc,\n  hashes,\n}: DocsRouteProps) => {\n  useHeadingRouteUpdates(hashes);\n\n  return (\n    <div>\n      <Component />\n      <ContentBlock size=\"large\">\n        {prevDoc && (\n          <div style={{ float: 'left' }}>\n            <SiblingDoc subtitle=\"Previous\" direction=\"left\" {...prevDoc} />\n          </div>\n        )}\n        {nextDoc && (\n          <div style={{ float: 'right' }}>\n            <SiblingDoc subtitle=\"Next\" direction=\"right\" {...nextDoc} />\n          </div>\n        )}\n      </ContentBlock>\n    </div>\n  );\n};\n\nconst Header = () => (\n  <Box\n    component=\"header\"\n    display=\"flex\"\n    justifyContent=\"space-between\"\n    paddingTop=\"large\"\n    paddingX={{ mobile: 'large', desktop: 'none' }}\n    position={{ mobile: 'relative', desktop: 'fixed' }}\n    zIndex={1}\n    className={styles.header}\n  >\n    <Box\n      position=\"absolute\"\n      top={0}\n      left={0}\n      right={0}\n      bottom={0}\n      zIndex={-1}\n      background={{ lightMode: 'teal100', darkMode: 'zinc900' }}\n      className={styles.headerBg}\n    />\n    <ReactRouterLink\n      to=\"/\"\n      className={styles.homeLink}\n      title=\"Back to home\"\n      onClick={() => window.scrollTo(0, 0)}\n    >\n      <Box\n        paddingLeft={{ mobile: 'none', tablet: 'xsmall', desktop: 'large' }}\n        paddingTop={{ mobile: 'xsmall', tablet: 'small', desktop: 'medium' }}\n      >\n        <Box paddingLeft={{ tablet: 'xsmall', desktop: 'medium' }}>\n          <Logo height={68} />\n        </Box>\n      </Box>\n    </ReactRouterLink>\n  </Box>\n);\n\nconst MenuBackdrop = ({\n  open,\n  onClick,\n}: {\n  open: boolean;\n  onClick: () => void;\n}) => (\n  <Box\n    position=\"fixed\"\n    top={0}\n    bottom={0}\n    left={0}\n    right={0}\n    zIndex={1}\n    display={{ desktop: 'none' }}\n    background={{ lightMode: 'teal100', darkMode: 'black' }}\n    opacity={open ? undefined : 0}\n    pointerEvents={open ? { desktop: 'none' } : 'none'}\n    className={clsx(\n      styles.backdrop,\n      open ? styles.backdrop_isVisible : undefined,\n    )}\n    onClick={onClick}\n  />\n);\n\nconst PrimaryNav = ({\n  open,\n  pathname,\n  onClick,\n}: {\n  open: boolean;\n  pathname: string;\n  onClick: () => void;\n}) => {\n  const selectAndScrollToTop = () => {\n    window.scrollTo(0, 0);\n    onClick();\n  };\n\n  return (\n    <Box\n      component=\"aside\"\n      padding={{ mobile: 'xlarge', desktop: 'large' }}\n      paddingY=\"xlarge\"\n      position=\"fixed\"\n      background={{\n        lightMode: 'white',\n        darkMode: 'zinc900',\n      }}\n      zIndex={1}\n      pointerEvents={open ? undefined : { mobile: 'none', desktop: 'auto' }}\n      opacity={open ? undefined : { mobile: 0, desktop: 1 }}\n      className={clsx(\n        styles.sidebar,\n        styles.primaryNav,\n        open ? styles.primaryNavOpen : undefined,\n      )}\n    >\n      <Box display={{ desktop: 'none' }} paddingBottom=\"xxlarge\">\n        <ColorModeToggle />\n      </Box>\n      <Stack space=\"xlarge\">\n        {groups.map((label) => {\n          const groupPages = pages.filter((page) => label === page.label);\n\n          return (\n            <Stack key={label} space=\"medium\">\n              <Box paddingLeft=\"small\">\n                <Text size=\"xsmall\" weight=\"strong\">\n                  <span style={{ textTransform: 'uppercase', opacity: 0.7 }}>\n                    {label}\n                  </span>\n                </Text>\n              </Box>\n\n              <>\n                {groupPages.map(({ route, title }) => {\n                  const active = route === `${pathname}/`;\n                  return (\n                    <Link\n                      key={route}\n                      to={route}\n                      onClick={selectAndScrollToTop}\n                      weight={active ? 'strong' : undefined}\n                      highlightOnFocus={false}\n                      underline=\"never\"\n                      size=\"small\"\n                    >\n                      <Box\n                        component=\"span\"\n                        display=\"flex\"\n                        alignItems=\"center\"\n                        paddingY=\"xsmall\"\n                      >\n                        <Box\n                          component=\"span\"\n                          background={{\n                            lightMode: 'blue300',\n                            darkMode: 'blue400',\n                          }}\n                          borderRadius=\"full\"\n                          paddingLeft=\"xsmall\"\n                          paddingTop=\"xlarge\"\n                          marginLeft=\"xsmall\"\n                          opacity={active ? undefined : 0}\n                          className={clsx(\n                            styles.activeIndicator,\n                            active ? styles.active : '',\n                          )}\n                        />\n                        <Box component=\"span\" paddingLeft=\"large\">\n                          {title}\n                        </Box>\n                      </Box>\n                    </Link>\n                  );\n                })}\n              </>\n            </Stack>\n          );\n        })}\n        <Stack space=\"medium\">\n          <Box paddingLeft=\"small\">\n            <Text size=\"xsmall\" weight=\"strong\">\n              <span style={{ textTransform: 'uppercase', opacity: 0.7 }}>\n                Community\n              </span>\n            </Text>\n          </Box>\n          <>\n            <Link\n              to=\"https://github.com/vanilla-extract-css/vanilla-extract\"\n              highlightOnFocus={false}\n              underline=\"never\"\n              size=\"small\"\n            >\n              <Box\n                component=\"span\"\n                display=\"flex\"\n                alignItems=\"center\"\n                paddingY=\"xsmall\"\n                paddingLeft=\"large\"\n              >\n                <Box\n                  component=\"span\"\n                  display=\"block\"\n                  paddingLeft=\"xsmall\"\n                  marginLeft=\"xsmall\"\n                >\n                  GitHub\n                </Box>\n              </Box>\n            </Link>\n\n            <Link\n              to=\"https://github.com/vanilla-extract-css/vanilla-extract/discussions\"\n              highlightOnFocus={false}\n              underline=\"never\"\n              size=\"small\"\n            >\n              <Box\n                component=\"span\"\n                display=\"flex\"\n                alignItems=\"center\"\n                paddingY=\"xsmall\"\n                paddingLeft=\"large\"\n              >\n                <Box\n                  component=\"span\"\n                  display=\"block\"\n                  paddingLeft=\"xsmall\"\n                  marginLeft=\"xsmall\"\n                >\n                  Discussions\n                </Box>\n              </Box>\n            </Link>\n\n            <Link\n              to=\"https://discord.gg/6nCfPwwz6w\"\n              highlightOnFocus={false}\n              underline=\"never\"\n              size=\"small\"\n            >\n              <Box\n                component=\"span\"\n                display=\"flex\"\n                alignItems=\"center\"\n                paddingY=\"xsmall\"\n                paddingLeft=\"large\"\n              >\n                <Box\n                  component=\"span\"\n                  display=\"block\"\n                  paddingLeft=\"xsmall\"\n                  marginLeft=\"xsmall\"\n                >\n                  Discord\n                </Box>\n              </Box>\n            </Link>\n          </>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n\nconst headingForRoute = mapKeys(pages, (d) => {\n  return d.route.endsWith('/')\n    ? d.route.slice(0, d.route.lastIndexOf('/'))\n    : d.route;\n});\n\nconst SecondaryNav = ({\n  pathname,\n  onClick,\n}: {\n  pathname: string;\n  onClick: () => void;\n}) => {\n  const activeHash = useActiveHash();\n  const { sections, route } = headingForRoute[pathname];\n\n  return sections.length > 2 ? (\n    <Box\n      component=\"aside\"\n      padding=\"large\"\n      position=\"fixed\"\n      right={0}\n      className={[styles.sidebar, styles.showOnWideScreens]}\n    >\n      <Stack space=\"small\">\n        {sections\n          .filter(({ level }) => level === 2 || level === 3)\n          .map(({ hash, name, level }, index) => {\n            const active = activeHash ? hash === activeHash : index === 0;\n            const l2 = level === 2;\n\n            return (\n              <Link\n                key={name}\n                to={`${route}${hash ? `#${hash}` : ''}`}\n                color={!active ? 'secondary' : undefined}\n                highlightOnFocus={false}\n                underline=\"never\"\n                size=\"small\"\n                onClick={onClick}\n              >\n                <Box component=\"span\" display=\"flex\" alignItems=\"center\">\n                  <Box\n                    component=\"span\"\n                    background={{\n                      lightMode: l2 ? 'pink300' : 'blue300',\n                      darkMode: l2 ? 'pink400' : 'blue400',\n                    }}\n                    borderRadius=\"full\"\n                    paddingLeft=\"xsmall\"\n                    paddingTop={l2 ? 'xlarge' : 'large'}\n                    marginLeft={l2 ? 'xsmall' : 'xlarge'}\n                    opacity={active ? undefined : 0}\n                    className={clsx(\n                      styles.activeIndicator,\n                      !l2 ? styles.activeIndicatorRight : '',\n                      active ? styles.active : '',\n                    )}\n                  />\n                  <Box component=\"span\" paddingLeft={l2 ? 'large' : 'medium'}>\n                    {name}\n                  </Box>\n                </Box>\n              </Link>\n            );\n          })}\n      </Stack>\n    </Box>\n  ) : null;\n};\n\nexport const DocsPage = () => {\n  const location = useLocation();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const toggleMenu = () => setMenuOpen((open) => !open);\n  const closeMenu = () => setMenuOpen(false);\n  const normalisedPath = location.pathname.endsWith('/')\n    ? location.pathname.slice(0, location.pathname.lastIndexOf('/'))\n    : location.pathname;\n\n  useEffect(() => {\n    if (menuOpen) {\n      document.body.classList.add(styles.bodyLock);\n\n      return () => {\n        document.body.classList.remove(styles.bodyLock);\n      };\n    }\n  }, [menuOpen]);\n\n  return (\n    <>\n      <Header />\n\n      <MenuBackdrop open={menuOpen} onClick={closeMenu} />\n\n      <PrimaryNav\n        open={menuOpen}\n        onClick={closeMenu}\n        pathname={normalisedPath}\n      />\n\n      <SecondaryNav onClick={closeMenu} pathname={normalisedPath} />\n\n      <Box zIndex={1} position=\"fixed\" top={0} right={0} padding=\"large\">\n        <Box display={{ mobile: 'none', desktop: 'flex' }} alignItems=\"center\">\n          <Box paddingRight=\"medium\">\n            <SearchInput />\n          </Box>\n          <ColorModeToggle />\n        </Box>\n        <Box\n          display={{ mobile: 'flex', desktop: 'none' }}\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n        >\n          <Box display={menuOpen ? 'none' : undefined} paddingRight=\"medium\">\n            <SearchInput />\n          </Box>\n          <Fab open={menuOpen} onClick={toggleMenu} />\n        </Box>\n      </Box>\n\n      <Box className={styles.container} zIndex={-1}>\n        <Box\n          component=\"main\"\n          paddingRight=\"large\"\n          paddingLeft={{ mobile: 'large', desktop: 'xxlarge' }}\n          paddingTop={{ mobile: 'xxlarge', desktop: 'xlarge' }}\n          className={styles.main}\n        >\n          <ContentBlock\n            size={{ mobile: 'standard', tablet: 'xlarge', desktop: 'xxlarge' }}\n          >\n            <Box paddingBottom=\"xxxlarge\">\n              <MDXProvider components={mdxComponents}>\n                <Routes>\n                  {pages.map(({ route, Component, title, sections }, index) => {\n                    const prevDoc = pages[index - 1];\n                    const nextDoc = pages[index + 1];\n                    const pageTitle = `${\n                      title ? `${title} — ` : ''\n                    }vanilla-extract`.trim();\n                    const hashes = sections\n                      .filter(({ level }) => level === 2 || level === 3)\n                      .map(({ hash }) => hash);\n\n                    return (\n                      <Route\n                        key={route}\n                        path={route}\n                        element={\n                          <>\n                            <Title>{pageTitle}</Title>\n                            <Meta property=\"og:title\" content={pageTitle} />\n                            <Meta name=\"twitter:title\" content={pageTitle} />\n                            <DocsRoute\n                              nextDoc={nextDoc}\n                              prevDoc={prevDoc}\n                              hashes={hashes}\n                              component={Component}\n                            />\n                          </>\n                        }\n                      />\n                    );\n                  })}\n                </Routes>\n              </MDXProvider>\n            </Box>\n          </ContentBlock>\n        </Box>\n      </Box>\n    </>\n  );\n};\n"
  },
  {
    "path": "site/src/DocsPage/SiblingDoc/SiblingDoc.tsx",
    "content": "import Link from '../../Typography/Link';\nimport Text from '../../Typography/Text';\nimport { Chevron } from '../../Chevron/Chevron';\nimport { Box } from '../../system';\n\nexport interface SiblingDocProps {\n  title: string;\n  route: string;\n  direction: 'left' | 'right';\n  subtitle?: string;\n}\nexport default ({ title, route, subtitle, direction }: SiblingDocProps) => (\n  <Box\n    display=\"flex\"\n    alignItems=\"center\"\n    justifyContent=\"center\"\n    paddingTop=\"xxlarge\"\n    paddingBottom=\"xxxlarge\"\n  >\n    <Link to={route}>\n      {direction === 'left' ? <Chevron direction=\"left\" /> : null}\n      <Box\n        component=\"span\"\n        display=\"inline-block\"\n        marginLeft={direction === 'left' ? 'small' : undefined}\n        marginRight={direction === 'right' ? 'small' : undefined}\n      >\n        <Text component=\"span\" color=\"secondary\" size=\"small\" align={direction}>\n          {subtitle}\n        </Text>\n        {title}\n      </Box>\n      {direction === 'right' ? <Chevron direction=\"right\" /> : null}\n    </Link>\n  </Box>\n);\n"
  },
  {
    "path": "site/src/Fab/Fab.css.ts",
    "content": "import { style, createVar, fallbackVar } from '@vanilla-extract/css';\nimport { darkMode } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\n\nexport const focusColorVar = createVar();\n\nconst fabSize = 44;\nexport const fab = style({\n  outline: 'none',\n  height: fabSize,\n  width: fabSize,\n  zIndex: 3,\n  boxShadow: `0px 0px 0px 3px ${fallbackVar(focusColorVar, 'transparent')}`,\n  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n  ':focus-visible': {\n    vars: {\n      [focusColorVar]: vars.palette.pink300,\n    },\n  },\n  selectors: {\n    [`.${darkMode} &:focus-visible`]: {\n      vars: {\n        [focusColorVar]: vars.palette.pink600,\n      },\n    },\n  },\n});\n\nexport const shadow = style({\n  boxShadow: '0 4px 8px rgba(14, 14, 33, 0.2)',\n});\n\nexport const isOpen = style({});\n\nconst barHeight = 3;\nconst barSpace = 4;\nconst barPosition = {\n  1: fabSize / 2 - Math.floor(barHeight / 2) - barHeight - barSpace,\n  2: fabSize / 2 - Math.floor(barHeight / 2),\n  3: fabSize / 2 - Math.floor(barHeight / 2) + barHeight + barSpace,\n};\nexport const bar = style({\n  left: 12,\n  right: 12,\n  height: 3,\n  transition: 'transform .1s ease, opacity .1s ease',\n  selectors: {\n    '&:nth-child(1)': {\n      top: barPosition['1'],\n    },\n    [`${isOpen} &:nth-child(1)`]: {\n      transform: `translateY(${\n        barPosition['2'] - barPosition['1']\n      }px) rotate(45deg)`,\n    },\n    '&:nth-child(2)': {\n      top: barPosition['2'],\n      left: 18,\n    },\n    [`${isOpen} &:nth-child(2)`]: {\n      opacity: 0,\n    },\n    '&:nth-child(3)': {\n      top: barPosition['3'],\n    },\n    [`${isOpen} &:nth-child(3)`]: {\n      transform: `translateY(${\n        barPosition['2'] - barPosition['3']\n      }px) rotate(-45deg)`,\n    },\n  },\n});\n"
  },
  {
    "path": "site/src/Fab/Fab.tsx",
    "content": "import clsx from 'clsx';\nimport { Box } from '../system';\nimport * as styles from './Fab.css';\n\nexport const Fab = ({\n  open,\n  onClick,\n}: {\n  open: boolean;\n  onClick: () => void;\n}) => {\n  return (\n    <Box\n      component=\"button\"\n      position=\"relative\"\n      background={{ lightMode: 'white', darkMode: 'zinc300' }}\n      borderRadius=\"full\"\n      zIndex={0}\n      cursor=\"pointer\"\n      onClick={onClick}\n      className={clsx(styles.fab, open ? styles.isOpen : null)}\n    >\n      <Box\n        position=\"absolute\"\n        background={{ lightMode: 'gray900', darkMode: 'zinc800' }}\n        className={styles.bar}\n      />\n      <Box\n        position=\"absolute\"\n        background={{ lightMode: 'gray900', darkMode: 'zinc800' }}\n        className={styles.bar}\n      />\n      <Box\n        position=\"absolute\"\n        background={{ lightMode: 'gray900', darkMode: 'zinc800' }}\n        className={styles.bar}\n      />\n      <Box\n        position=\"absolute\"\n        top={0}\n        bottom={0}\n        left={0}\n        right={0}\n        zIndex={-1}\n        borderRadius=\"full\"\n        opacity={open ? 0 : undefined}\n        className={styles.shadow}\n      />\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/GitHubStars/GitHubStars.tsx",
    "content": "import { useEffect, useState } from 'react';\nimport { Box } from '../system';\nimport Text from '../Typography/Text';\n\nconst Star = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    fill=\"currentColor\"\n    width={16}\n    height={16}\n  >\n    <path d=\"M23 9c-.1-.4-.4-.6-.8-.7l-6.4-.9-2.9-5.8c-.3-.7-1.5-.7-1.8 0L8.2 7.3l-6.3 1c-.4 0-.7.3-.9.7-.1.4 0 .8.3 1l4.6 4.5-1.1 6.4c-.1.4.1.8.4 1 .2 0 .4.1.6.1.2 0 .3 0 .5-.1l5.7-3 5.7 3c.3.2.7.1 1.1-.1.3-.2.5-.6.4-1l-1.1-6.4 4.6-4.5c.3-.2.4-.6.3-.9zm-6.7 4.4c-.2.2-.3.6-.3.9l.8 4.9-4.4-2.3c-.3-.2-.6-.2-.9 0l-4.4 2.3.9-4.9c0-.3-.1-.7-.3-.9L4.1 10 9 9.3c.3 0 .6-.3.8-.5L12 4.3l2.2 4.4c.1.3.4.5.8.5l4.9.7-3.6 3.5z\" />\n  </svg>\n);\n\nexport const GitHubStars = () => {\n  const [stars, setStars] = useState<string | null>(null);\n\n  useEffect(() => {\n    (async () => {\n      const res = await fetch(\n        `https://api.github.com/repos/vanilla-extract-css/vanilla-extract`,\n      );\n      const { stargazers_count: count } = await res.json();\n\n      if (typeof count === 'number') {\n        setStars(\n          Math.abs(count) > 999\n            ? `${(Math.sign(count) * (Math.abs(count) / 1000)).toFixed(1)}k`\n            : `${Math.sign(count) * Math.abs(count)}`,\n        );\n      }\n    })();\n  }, []);\n\n  return (\n    <>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        focusable=\"false\"\n        fill=\"currentColor\"\n      >\n        <path\n          d=\"M12.006 2a10 10 0 00-3.16 19.489c.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.341-3.369-1.341a2.648 2.648 0 00-1.11-1.463c-.908-.62.068-.608.068-.608a2.1 2.1 0 011.532 1.03 2.13 2.13 0 002.91.831 2.137 2.137 0 01.635-1.336c-2.22-.253-4.555-1.11-4.555-4.943a3.865 3.865 0 011.03-2.683 3.597 3.597 0 01.098-2.647s.84-.269 2.75 1.026a9.478 9.478 0 015.007 0c1.909-1.294 2.747-1.026 2.747-1.026a3.592 3.592 0 01.1 2.647 3.859 3.859 0 011.027 2.683c0 3.842-2.338 4.687-4.566 4.935a2.387 2.387 0 01.68 1.852c0 1.336-.013 2.415-.013 2.743 0 .267.18.578.688.48A10.001 10.001 0 0012.006 2z\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <Box\n        component=\"span\"\n        paddingLeft=\"small\"\n        style={{ minWidth: 60 }}\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"flex-end\"\n      >\n        {stars ? (\n          <Box component=\"span\" display=\"flex\" alignItems=\"center\">\n            <Star />{' '}\n            <Box\n              component=\"span\"\n              paddingLeft=\"xsmall\"\n              style={{ fontSize: '.8em' }}\n            >\n              {stars}\n            </Box>\n          </Box>\n        ) : (\n          <Text size=\"small\" color=\"strong\">\n            GitHub\n          </Text>\n        )}\n      </Box>\n    </>\n  );\n};\n"
  },
  {
    "path": "site/src/HomePage/HomePage.css.ts",
    "content": "import { createVar, style } from '@vanilla-extract/css';\nimport { vars } from '../themes.css';\nimport { responsiveStyle } from '../themeUtils';\n\n// Used for overridding search box background\nexport const homePage = style({});\n\nexport const shadowColorVar = createVar();\n\nexport const featureKeyLine = style([\n  {\n    transform: 'skew(15deg)',\n  },\n  responsiveStyle({\n    mobile: { height: vars.text.standard.mobile.lineHeight },\n    desktop: { height: vars.text.standard.desktop.lineHeight },\n  }),\n]);\n\nexport const skewedContainer = style({\n  ':after': {\n    content: '\"\"',\n    position: 'absolute',\n    zIndex: -1,\n    left: 0,\n    right: 0,\n    height: '170px',\n    background: 'inherit',\n    clipPath: 'polygon(0 0,100% 0,100% 60%,0 100%)',\n  },\n});\n\nexport const skewedContainerSecondary = style({\n  ':before': {\n    content: '\"\"',\n    position: 'absolute',\n    zIndex: -1,\n    left: 0,\n    right: 0,\n    height: '100px',\n    top: '-60px',\n    background: 'inherit',\n    clipPath: 'polygon(0 0, 100% 60%, 100% 100%, 0 100%)',\n  },\n  ':after': {\n    content: '\"\"',\n    position: 'absolute',\n    zIndex: -1,\n    left: 0,\n    right: 0,\n    height: '100px',\n    bottom: '-70px',\n    background: 'inherit',\n    clipPath: 'polygon(0 0, 100% 0, 100% 50%, 0 100%)',\n  },\n});\n\nexport const footerLayout = style([\n  {\n    '@media': {\n      [`screen and (min-width: 480px)`]: {\n        flexBasis: '50%',\n      },\n    },\n  },\n  responsiveStyle({\n    mobile: { flexBasis: '100%' },\n    tablet: { flexBasis: '33%' },\n    desktop: { flexBasis: '25%' },\n  }),\n]);\n"
  },
  {
    "path": "site/src/HomePage/HomePage.tsx",
    "content": "import { type ReactNode } from 'react';\nimport dedent from 'dedent';\nimport { Box, Stack, ContentBlock, Columns, ButtonLink } from '../system';\nimport { Heading } from '../Typography/Heading';\nimport { Chevron } from '../Chevron/Chevron';\nimport Link from '../Typography/Link';\nimport Text from '../Typography/Text';\nimport Logo from '../Logo/Logo';\nimport { Tweet } from '../Tweet/Tweet';\nimport { groups, pages } from '../docs-store';\nimport { ColorModeToggle } from '../ColorModeToggle/ColorModeToggle';\nimport { GitHubStars } from '../GitHubStars/GitHubStars';\nimport { CompiledCode } from '../Code/CompiledCode';\nimport { ErrorHighlighter } from '../Code/ErrorHighlighter';\nimport * as styles from './HomePage.css';\nimport { SearchInput } from '../SearchInput/SearchInput';\n\nconst InstallPrompt = () => {\n  return (\n    <Box\n      component=\"code\"\n      position=\"relative\"\n      display=\"flex\"\n      alignItems=\"center\"\n      borderRadius=\"small\"\n      padding=\"large\"\n      background={{\n        lightMode: 'teal200muted',\n        darkMode: 'zinc800',\n      }}\n    >\n      <Box display={{ mobile: 'none', tablet: 'block' }}>\n        <Text type=\"code\" size=\"small\" color=\"secondary\">\n          $\n        </Text>\n      </Box>\n      <Text type=\"code\" size=\"small\">\n        <Box component=\"span\" paddingX={{ mobile: 'none', tablet: 'medium' }}>\n          npm install{' '}\n          <span style={{ whiteSpace: 'nowrap' }}>@vanilla-extract/css</span>\n        </Box>\n      </Text>\n    </Box>\n  );\n};\n\nexport const HomePage = () => {\n  return (\n    <Box className={styles.homePage}>\n      {/* <Box\n        margin=\"large\"\n        paddingY=\"xxxlarge\"\n        display=\"flex\"\n        flexDirection=\"column\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        style={{ height: 600, width: 1200, gap: 70 }}\n        background={{ lightMode: 'teal200', darkMode: 'zinc700' }}\n      >\n        <Box style={{ marginTop: '-45px' }}>\n          <Logo height={280} />\n        </Box>\n        <Stack space=\"large\" align=\"center\">\n          <Heading level=\"1\" branded>\n            <Box\n              component=\"span\"\n              color={{ lightMode: 'black' }}\n              style={{ fontSize: '2em' }}\n            >\n              vanilla-extract\n            </Box>\n          </Heading>\n          <Box paddingTop=\"medium\" />\n          <Heading level=\"2\">\n            <Box\n              component=\"span\"\n              color={{ lightMode: 'black' }}\n              style={{ fontSize: '1.1em' }}\n            >\n              Zero-runtime Stylesheets in TypeScript.\n            </Box>\n          </Heading>\n        </Stack>\n      </Box> */}\n\n      <Box\n        paddingTop={{ mobile: 'large', tablet: 'xxlarge' }}\n        paddingBottom=\"xxxlarge\"\n        marginBottom=\"xxxlarge\"\n        background={{ lightMode: 'teal100', darkMode: 'zinc900' }}\n        className={styles.skewedContainer}\n      >\n        <ContentBlock\n          size={{ mobile: 'standard', desktop: 'xxlarge' }}\n          withGutters\n        >\n          <Box position=\"relative\">\n            <Box\n              display=\"flex\"\n              justifyContent=\"flex-end\"\n              alignItems=\"center\"\n              paddingBottom={{\n                mobile: 'large',\n                tablet: 'none',\n                desktop: 'xxlarge',\n              }}\n            >\n              <Box paddingRight=\"xsmall\">\n                <SearchInput />\n              </Box>\n              <ColorModeToggle />\n            </Box>\n            <Box>\n              <Columns space=\"none\" collapseOnTablet alignY=\"center\">\n                <Box\n                  marginTop={{ desktop: '-xxxlarge' }}\n                  paddingBottom={{ mobile: 'xxlarge', desktop: 'none' }}\n                >\n                  <Stack\n                    space=\"xxlarge\"\n                    align={{ mobile: 'center', desktop: 'left' }}\n                  >\n                    <Box\n                      display=\"flex\"\n                      justifyContent={{\n                        mobile: 'center',\n                        desktop: 'flex-start',\n                      }}\n                    >\n                      <Logo height={100} />\n                    </Box>\n                    <Heading\n                      level=\"1\"\n                      branded\n                      align={{ mobile: 'center', desktop: 'left' }}\n                    >\n                      Zero-runtime\n                      <br />\n                      Stylesheets in\n                      <br />\n                      TypeScript.\n                    </Heading>\n                    <Box\n                      display=\"flex\"\n                      justifyContent={{\n                        mobile: 'center',\n                        desktop: 'flex-start',\n                      }}\n                    >\n                      <Box style={{ maxWidth: 480 }}>\n                        <Text align={{ mobile: 'center', desktop: 'left' }}>\n                          <Box color={{ darkMode: 'zinc300' }}>\n                            Use TypeScript as your preprocessor. Write\n                            type&#8209;safe, locally scoped classes, variables\n                            and themes, then generate static\n                            CSS&nbsp;files&nbsp;at&nbsp;build&nbsp;time.\n                          </Box>\n                        </Text>\n                      </Box>\n                    </Box>\n                    <InstallPrompt />\n                    <Box\n                      display=\"flex\"\n                      alignItems=\"center\"\n                      justifyContent={{\n                        mobile: 'center',\n                        desktop: 'flex-start',\n                      }}\n                    >\n                      <Box paddingRight={{ mobile: 'small', tablet: 'xlarge' }}>\n                        <ButtonLink\n                          to=\"/documentation/getting-started\"\n                          icon={\n                            <Box display={{ mobile: 'none', desktop: 'block' }}>\n                              <Chevron direction=\"right\" />\n                            </Box>\n                          }\n                        >\n                          Get started\n                        </ButtonLink>\n                      </Box>\n                      <ButtonLink\n                        to=\"https://github.com/vanilla-extract-css/vanilla-extract\"\n                        variant=\"transparent\"\n                      >\n                        <GitHubStars />\n                      </ButtonLink>\n                    </Box>\n                  </Stack>\n                </Box>\n                <ErrorHighlighter tokens={['brandd', 'large']}>\n                  <CompiledCode\n                    background={{ lightMode: 'teal50', darkMode: 'black' }}\n                    code={[\n                      {\n                        fileName: 'styles.css.ts',\n                        contents: dedent /*ts*/ `\n                        import { createTheme, style } from '@vanilla-extract/css';\n\n                        export const [themeClass, vars] = createTheme({\n                          color: {\n                            brand: 'blue',\n                            white: '#fff'\n                          },\n                          space: {\n                            small: '4px',\n                            medium: '8px',\n                          }\n                        });\n\n                        export const hero = style({\n                          backgroundColor: vars.color.brandd,\n                          color: vars.color.white,\n                          padding: vars.space.large\n                        });`,\n                      },\n                    ]}\n                  />\n                </ErrorHighlighter>\n              </Columns>\n            </Box>\n          </Box>\n        </ContentBlock>\n      </Box>\n\n      <Stack space=\"xxxlarge\">\n        <ContentBlock\n          withGutters\n          size={{ mobile: 'standard', desktop: 'xxlarge' }}\n        >\n          <Box\n            paddingY=\"xxxlarge\"\n            paddingX={{ mobile: 'medium', tablet: 'none' }}\n          >\n            <Columns space=\"xxlarge\" collapseOnTablet>\n              <Columns space=\"xxlarge\" collapseOnMobile>\n                <Feature title=\"Type-safe static CSS\">\n                  All styles generated at build time — just like{' '}\n                  <Link\n                    to=\"https://sass-lang.com\"\n                    size=\"small\"\n                    underline=\"always\"\n                    inline\n                  >\n                    Sass\n                  </Link>\n                  ,{' '}\n                  <Link\n                    to=\"https://lesscss.org\"\n                    size=\"small\"\n                    underline=\"always\"\n                    inline\n                  >\n                    LESS\n                  </Link>\n                  , etc, but with the power of TypeScript.\n                </Feature>\n\n                <Feature title=\"First-class theming\">\n                  Create a single global theme or create multiple themes, all\n                  with type-safe token contracts.\n                </Feature>\n              </Columns>\n              <Columns space=\"xxlarge\" collapseOnMobile>\n                <Feature title=\"Framework agnostic\">\n                  Official integrations are provided for webpack, esbuild, Vite\n                  and Next.js.\n                </Feature>\n\n                <Feature title=\"Built for extension\">\n                  Use libraries like{' '}\n                  <Link\n                    to=\"/documentation/packages/sprinkles\"\n                    size=\"small\"\n                    underline=\"always\"\n                    inline\n                  >\n                    Sprinkles\n                  </Link>\n                  ,{' '}\n                  <Link\n                    to=\"/documentation/packages/recipes\"\n                    size=\"small\"\n                    underline=\"always\"\n                    inline\n                  >\n                    Recipes\n                  </Link>{' '}\n                  and{' '}\n                  <Link\n                    to=\"https://github.com/TheMightyPenguin/dessert-box\"\n                    size=\"small\"\n                    underline=\"always\"\n                    inline\n                  >\n                    Dessert&nbsp;Box\n                  </Link>{' '}\n                  — or create your own!\n                </Feature>\n              </Columns>\n            </Columns>\n          </Box>\n        </ContentBlock>\n\n        <Box\n          position=\"relative\"\n          paddingY=\"xxxlarge\"\n          background={{ lightMode: 'blue100', darkMode: 'zinc900' }}\n          className={styles.skewedContainerSecondary}\n        >\n          <ContentBlock withGutters size=\"standard\">\n            <Stack space=\"xxlarge\">\n              <Heading level=\"3\" align=\"center\">\n                <Box color={{ lightMode: 'blue900', darkMode: 'zinc50' }}>\n                  Leverage the full power of CSS&nbsp;&amp;&nbsp;TypeScript\n                </Box>\n              </Heading>\n              <Box paddingX=\"large\">\n                <Text align=\"center\" color=\"neutral\">\n                  <Box color={{ lightMode: 'blue800', darkMode: 'zinc400' }}>\n                    Write maintainable CSS at scale without sacrificing platform\n                    features. Variables, selectors, pseudo&#8209;classes,\n                    media/feature/container queries, keyframes, font&#8209;face\n                    and global styles are all supported.\n                  </Box>\n                </Text>\n              </Box>\n\n              <CompiledCode\n                background={{ lightMode: 'blue50', darkMode: 'black' }}\n                code={[\n                  {\n                    fileName: 'styles.css.ts',\n                    contents: dedent /*css*/ `\n                      import { style } from '@vanilla-extract/css';\n\n                      export const className = style({\n                        display: 'flex',\n                        flexDirection: 'column',\n                        selectors: {\n                          '&:nth-child(2n)': {\n                            background: 'aliceblue'\n                          }\n                        },\n                        '@media': {\n                          'screen and (min-width: 768px)': {\n                            flexDirection: 'row'\n                          }\n                        }\n                      });\n                    `,\n                  },\n                ]}\n              />\n            </Stack>\n          </ContentBlock>\n        </Box>\n\n        <Stack space=\"xxxlarge\">\n          <Box paddingTop=\"xxxlarge\">\n            <ContentBlock\n              withGutters\n              size={{ mobile: 'standard', desktop: 'xxlarge' }}\n            >\n              <Columns space=\"xlarge\" collapseOnTablet alignY=\"center\">\n                <Stack space=\"xxlarge\">\n                  <Heading level=\"3\" align=\"center\">\n                    Type-safe theming\n                  </Heading>\n                  <Text align=\"center\" color=\"secondary\">\n                    Define themes with deeply nested token contracts, then let\n                    TypeScript do the heavy lifting. Never mess up a variable\n                    again.\n                  </Text>\n                </Stack>\n\n                <ErrorHighlighter tokens={['brandd']}>\n                  <CompiledCode\n                    code={[\n                      {\n                        fileName: 'styles.css.ts',\n                        contents: dedent /*ts*/ `\n                          import { createTheme, style } from '@vanilla-extract/css';\n\n                          export const [themeClass, vars] = createTheme({\n                            color: {\n                              brand: 'aquamarine',\n                              accent: 'honeydew',\n                            },\n                          });\n\n                          export const brandedSection = style({\n                            backgroundColor: vars.color.brandd,\n                          });\n                        `,\n                      },\n                    ]}\n                  />\n                </ErrorHighlighter>\n              </Columns>\n            </ContentBlock>\n          </Box>\n\n          <ContentBlock\n            withGutters\n            size={{ mobile: 'standard', desktop: 'xxlarge' }}\n          >\n            <Columns space=\"xxlarge\" collapseOnTablet alignY=\"center\" reverseX>\n              <Stack space=\"xxlarge\">\n                <Heading level=\"3\" align=\"center\">\n                  Variables, the way they were&nbsp;intended\n                </Heading>\n                <Text align=\"center\" color=\"secondary\">\n                  Define and consume variables without abstraction. All of your\n                  favourite CSS variable patterns can be translated to\n                  vanilla-extract.\n                </Text>\n              </Stack>\n              <CompiledCode\n                code={[\n                  {\n                    fileName: 'styles.css.ts',\n                    contents: dedent /*ts*/ `\n                      import { style, createVar } from '@vanilla-extract/css';\n\n                      const shadowColor = createVar();\n\n                      export const shadow = style({\n                        boxShadow: ${'`0 0 10px ${shadowColor}`'},\n                        selectors: {\n                          '.light &': {\n                            vars: { [shadowColor]: 'black' }\n                          },\n                          '.dark &': {\n                            vars: { [shadowColor]: 'white' }\n                          },\n                        },\n                      });\n                    `,\n                  },\n                ]}\n              />\n            </Columns>\n          </ContentBlock>\n\n          <ContentBlock\n            withGutters\n            size={{ mobile: 'standard', desktop: 'xxlarge' }}\n          >\n            <Columns space=\"xlarge\" collapseOnTablet alignY=\"center\">\n              <Stack space=\"xxlarge\">\n                <Heading level=\"3\" align=\"center\">\n                  Organise your styles with&nbsp;ease\n                </Heading>\n                <Text align=\"center\" color=\"secondary\">\n                  Group style variants into separate collections, then look them\n                  up by name. No awkward naming conventions required.\n                </Text>\n              </Stack>\n              <CompiledCode\n                code={[\n                  {\n                    fileName: 'styles.css.ts',\n                    contents: dedent /*ts*/ `\n                      import { styleVariants } from '@vanilla-extract/css';\n\n                      export const background = styleVariants({\n                        primary: { background: 'navy' },\n                        secondary: { background: 'blue' },\n                        tertiary: { background: 'aqua' },\n                      });\n\n                      export const color = styleVariants({\n                        neutral: { color: 'black' },\n                        secondary: { color: 'gray' },\n                        link: { color: 'blue' },\n                      });\n                    `,\n                  },\n                ]}\n              />\n            </Columns>\n          </ContentBlock>\n\n          <ContentBlock\n            withGutters\n            size={{ mobile: 'standard', desktop: 'xxlarge' }}\n          >\n            <Columns space=\"xxlarge\" collapseOnTablet alignY=\"center\" reverseX>\n              <Stack space=\"xxlarge\">\n                <Heading level=\"3\" align=\"center\">\n                  Generate real&nbsp;stylesheets\n                </Heading>\n                <Text align=\"center\" color=\"secondary\">\n                  Best-in-class developer experience without the runtime cost.\n                  Don’t ship a dynamic CSS engine to your users — ship regular\n                  CSS.\n                </Text>\n              </Stack>\n              <CompiledCode\n                code={[\n                  {\n                    fileName: 'output.css',\n                    language: 'css',\n                    contents: dedent /*css*/ `\n                      :root {\n                        --space-none__ya5b7b0: 0;\n                        --space-small__ya5b7b1: 4px;\n                        --space-medium__ya5b7b2: 8px;\n                        --space-large__ya5b7b3: 12px;\n                      }\n\n                      .Hero_container__1ldw6lo0 {\n                        padding: var(--space-medium__ya5b7b2);\n                      }\n                    `,\n                  },\n                ]}\n              />\n            </Columns>\n          </ContentBlock>\n        </Stack>\n\n        <Box paddingY=\"xxxlarge\">\n          <Box\n            position=\"relative\"\n            paddingY=\"xxxlarge\"\n            background={{ lightMode: 'blue100', darkMode: 'zinc900' }}\n            className={styles.skewedContainerSecondary}\n          >\n            <ContentBlock size=\"xxlarge\" withGutters>\n              <Stack space=\"xxlarge\" align=\"center\">\n                <Columns space=\"xxlarge\" collapseOnMobile alignY=\"center\">\n                  <Tweet\n                    handle=\"@jeresig\"\n                    name=\"John Resig\"\n                    avatar=\"https://pbs.twimg.com/profile_images/1090714620275245056/HS9xcEDk_200x200.jpg\"\n                    url=\"https://twitter.com/jeresig/status/1375609805373575175\"\n                  >\n                    vanilla-extract is super exciting - it’s scratching an itch\n                    that we have at @khanacademy, as we look to move off of\n                    Aphrodite to something that has better perf characteristics.\n                    We were thinking CSS Modules but this is even more ideal!\n                  </Tweet>\n                  <Tweet\n                    handle=\"@okonetchnikov\"\n                    name=\"Andrey Okonetchnikov\"\n                    avatar=\"https://pbs.twimg.com/profile_images/1327698924698804226/io9KdHy__200x200.jpg\"\n                    url=\"https://twitter.com/okonetchnikov/status/1389450586257514505\"\n                  >\n                    I really don’t want to rework my whole workshop but this is\n                    looking so good I almost have to 😅🤔\n                  </Tweet>\n                </Columns>\n                <Columns space=\"xxlarge\" collapseOnMobile alignY=\"center\">\n                  <Tweet\n                    handle=\"@lorvsso\"\n                    name=\"Jack Lo Russo\"\n                    avatar=\"https://pbs.twimg.com/profile_images/1479290361268695041/QMcVReSQ_200x200.jpg\"\n                    url=\"https://twitter.com/lorvsso/status/1375592486182084613\"\n                  >\n                    I love this ✨ The first time I made a decision at work\n                    about CSS architecture, years ago now, CSS Modules was what\n                    I ended up recommending and implementing. This is CSS\n                    Modules for the new decade ❤️😍\n                  </Tweet>\n                  <Tweet\n                    handle=\"@kossnocorp\"\n                    name=\"Sasha Koss\"\n                    avatar=\"https://pbs.twimg.com/profile_images/979030533719064576/rD33B86M_200x200.jpg\"\n                    url=\"https://twitter.com/kossnocorp/status/1390214753352658946\"\n                  >\n                    vanilla-extract is the first CSS-in-JS library that excites\n                    me and convinces me to ditch CSS modules in favor of it.\n                    TypeScript support is superb 👌\n                    <br />\n                    <br />\n                    Looking forward to rewriting my design system using it!\n                  </Tweet>\n                </Columns>\n              </Stack>\n            </ContentBlock>\n          </Box>\n        </Box>\n\n        <ContentBlock withGutters>\n          <Box paddingBottom=\"xlarge\">\n            <Text color=\"secondary\" type=\"code\" size=\"small\" align=\"center\">\n              Like the monospace font in our code&nbsp;blocks?\n              <br />\n              Check out{' '}\n              <Link\n                to=\"https://monolisa.dev/\"\n                size=\"small\"\n                inline\n                baseline={false}\n                type=\"code\"\n              >\n                monolisa.dev\n              </Link>\n            </Text>\n          </Box>\n        </ContentBlock>\n\n        <ContentBlock size=\"xxlarge\" withGutters>\n          <Box component=\"footer\" paddingBottom=\"xxxlarge\">\n            <Stack space=\"xxxlarge\" align=\"center\">\n              <Logo height={60} />\n              <Box display=\"flex\" flexWrap=\"wrap\">\n                {groups.map((label) => {\n                  const groupPages = pages.filter(\n                    (page) => label === page.label,\n                  );\n\n                  return (\n                    <Box\n                      key={label}\n                      flexGrow={0}\n                      flexShrink={0}\n                      paddingX=\"xlarge\"\n                      paddingBottom=\"xxlarge\"\n                      className={styles.footerLayout}\n                    >\n                      <Stack space=\"large\">\n                        <Text size=\"small\" component=\"h4\">\n                          {label}\n                        </Text>\n                        {groupPages.map(({ route, title }) => (\n                          <Link\n                            to={route}\n                            key={title}\n                            size=\"xsmall\"\n                            color=\"secondary\"\n                            baseline\n                          >\n                            {title}\n                          </Link>\n                        ))}\n                      </Stack>\n                    </Box>\n                  );\n                })}\n                <Box\n                  flexGrow={0}\n                  flexShrink={0}\n                  paddingX=\"xlarge\"\n                  paddingBottom=\"xxlarge\"\n                  className={styles.footerLayout}\n                >\n                  <Stack space=\"large\">\n                    <Text size=\"small\" component=\"h4\">\n                      Community\n                    </Text>\n                    <Link\n                      to=\"https://github.com/vanilla-extract-css/vanilla-extract\"\n                      size=\"xsmall\"\n                      color=\"secondary\"\n                      baseline\n                    >\n                      GitHub\n                    </Link>\n                    <Link\n                      to=\"https://github.com/vanilla-extract-css/vanilla-extract/discussions\"\n                      size=\"xsmall\"\n                      color=\"secondary\"\n                      baseline\n                    >\n                      Discussions\n                    </Link>\n                    <Link\n                      to=\"https://discord.gg/6nCfPwwz6w\"\n                      size=\"xsmall\"\n                      color=\"secondary\"\n                      baseline\n                    >\n                      Discord\n                    </Link>\n                  </Stack>\n                </Box>\n                <Box\n                  flexGrow={0}\n                  flexShrink={0}\n                  paddingX=\"xlarge\"\n                  paddingBottom=\"xxlarge\"\n                  className={styles.footerLayout}\n                >\n                  <Stack space=\"large\">\n                    <Text size=\"small\" component=\"h4\">\n                      Related work\n                    </Text>\n                    <Link\n                      to=\"https://seek-oss.github.io/braid-design-system/\"\n                      size=\"xsmall\"\n                      color=\"secondary\"\n                      baseline\n                    >\n                      <span style={{ whiteSpace: 'nowrap' }}>\n                        Braid Design System\n                      </span>\n                    </Link>\n                    <Link\n                      to=\"https://seek-oss.github.io/capsize/\"\n                      size=\"xsmall\"\n                      color=\"secondary\"\n                      baseline\n                    >\n                      Capsize\n                    </Link>\n                    <Link\n                      to=\"https://github.com/seek-oss/playroom\"\n                      size=\"xsmall\"\n                      color=\"secondary\"\n                      baseline\n                    >\n                      Playroom\n                    </Link>\n                    <Link\n                      to=\"https://seek-oss.github.io/treat/\"\n                      size=\"xsmall\"\n                      color=\"secondary\"\n                      baseline\n                    >\n                      Treat\n                    </Link>\n                  </Stack>\n                </Box>\n              </Box>\n            </Stack>\n          </Box>\n        </ContentBlock>\n      </Stack>\n    </Box>\n  );\n};\n\nconst Feature = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}) => (\n  <ContentBlock size=\"xsmall\">\n    <Box position=\"relative\" paddingLeft=\"xlarge\">\n      <Box\n        position=\"absolute\"\n        top={0}\n        left={0}\n        className={styles.featureKeyLine}\n        background={{ lightMode: 'pink300', darkMode: 'pink600' }}\n        paddingLeft=\"xsmall\"\n        marginTop={{ mobile: '-small', tablet: '-medium', desktop: '-medium' }}\n        borderRadius=\"medium\"\n      />\n      <Stack space=\"xlarge\">\n        <Heading level=\"4\" component=\"h2\">\n          {title}\n        </Heading>\n        <Text size=\"small\" color=\"secondary\">\n          {children}\n        </Text>\n      </Stack>\n    </Box>\n  </ContentBlock>\n);\n"
  },
  {
    "path": "site/src/InlineCode/InlineCode.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { darkMode } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\n\nexport const code = style({\n  fontFamily: vars.fonts.code,\n  wordWrap: 'break-word',\n  '::before': {\n    content: '\"\"',\n    position: 'absolute',\n    background: vars.palette.pink100,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    zIndex: -1,\n    margin: '2px 0',\n    clipPath: 'polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%)',\n    transform: 'skewY(-0.25deg)',\n  },\n  selectors: {\n    [`.${darkMode} &::before`]: {\n      background: vars.palette.zinc800,\n    },\n    [`a > &`]: {\n      textDecoration: 'underline 0.05em',\n    },\n    ['a:hover > &']: {\n      color: 'currentcolor',\n    },\n    ['a:focus > &']: {\n      outline: 'none',\n      color: 'currentcolor',\n    },\n  },\n});\n"
  },
  {
    "path": "site/src/InlineCode/InlineCode.tsx",
    "content": "import type { ReactNode } from 'react';\nimport { Box } from '../system';\nimport * as styles from './InlineCode.css';\n\nexport interface InlineCodeProps {\n  children: ReactNode;\n  inline?: boolean;\n}\nexport default ({ children }: InlineCodeProps) => {\n  return (\n    <Box\n      component=\"code\"\n      color={{ lightMode: 'pink700', darkMode: 'zinc200' }}\n      display=\"inline-block\"\n      position=\"relative\"\n      paddingX=\"small\"\n      marginX=\"xsmall\"\n      marginY=\"-medium\"\n      className={styles.code}\n    >\n      {children}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/Logo/Logo.tsx",
    "content": "import { Box } from '../system';\n\nexport default ({ height = '100%' }: { height?: string | number }) => (\n  <Box display=\"flex\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      height={height}\n      preserveAspectRatio=\"xMidYMid meet\"\n      viewBox=\"10 0 108 128\"\n    >\n      <path\n        d=\"M109.94 69.11c-.23.11-.46.25-.69.39c-.01-1.46-.78-2.17-1.32-2.94c-2.6-3.72-7.62-2.31-9.1 1.11c-.2.47 3.06 4.72 2.92 5.18c-2.16.97-4.24 3.2-4.66 5.15c.43-2.01-1.07-2.95-3.34-2.2s-4.42 2.91-4.73 4.91c.32-2-1.3-3.09-3.62-2.53s-4.39 2.55-4.6 4.54c.21-1.99-1.53-3.24-3.87-2.89s-4.34 2.17-4.44 4.15c.09-1.99-1.75-3.4-4.11-3.27s-4.27 1.77-4.25 3.76c-.02-1.98-1.96-3.58-4.32-3.66s-4.18 1.37-4.05 3.36c-.13-1.99-2.17-3.76-4.51-4.06c-2.35-.3-4.06.98-3.82 2.97c-.24-1.99-2.36-3.94-4.68-4.45s-3.92.61-3.57 2.61c-.35-1.99-2.54-4.11-4.83-4.82c-2.29-.7-3.77.27-3.3 2.27c-.46-2-5.51-10.45-6.06-11.7c-1.48-3.42-4.33-4.5-6.77-2.28c-1 .91-1.62 2.56-1.11 4.99c-1.59-.44-2.38.33-1.8 2.02c3.17 9.26 6.3 18.68 8.9 28.15c1.11 4.05 2.26 9.3 5.52 12.32c2.34 2.16 5.26 3.66 8.07 4.87c8.39 3.6 17.7 4.7 26.37 4.76c9.28.06 21.08-2.18 29.29-6.85c3.11-1.76 6.07-3.81 7.46-7.26c2.29-5.72 3.95-11.72 5.7-17.46c1.99-6.52 3.49-13.44 6.07-19.53c.64-2-.58-2.69-2.75-1.61z\"\n        fill=\"#48A2AD\"\n      />\n      <radialGradient\n        id=\"IconifyId-178a58e6776-62d0d4-24\"\n        cx=\"63.667\"\n        cy=\"67.667\"\n        r=\"26.685\"\n        gradientTransform=\"matrix(0 1 -1.5658 0 169.62 4)\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#BE5D23\" offset=\"0\" />\n        <stop stopColor=\"#B65B25\" offset=\".158\" />\n        <stop stopColor=\"#9F552A\" offset=\".407\" />\n        <stop stopColor=\"#7A4C33\" offset=\".715\" />\n        <stop stopColor=\"#52423C\" offset=\".999\" />\n      </radialGradient>\n      <ellipse\n        cx=\"63.86\"\n        cy=\"77.31\"\n        rx=\"45.01\"\n        ry=\"18.09\"\n        fill=\"url(#IconifyId-178a58e6776-62d0d4-24)\"\n      />\n      <linearGradient\n        id=\"IconifyId-178a58e6776-62d0d4-25\"\n        x1=\"22.114\"\n        x2=\"102.08\"\n        y1=\"61.979\"\n        y2=\"61.979\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#FF85AE\" offset=\"0\" />\n        <stop stopColor=\"#FF7DA9\" offset=\".317\" />\n        <stop stopColor=\"#FF669A\" offset=\".816\" />\n        <stop stopColor=\"#FF5C93\" offset=\"1\" />\n      </linearGradient>\n      <path\n        d=\"M102.08 51.48c-.84-.85-1.87-1.65-3.1-2.35c0 0-28.68 9.33-48.64 8.32s-17.02-3.19-27.16 3.27c0 0-2.77 3.96.61 6.37c4.42 3.15 10 5.75 16.12 7.73c.74-.54 1.48-.88 2.11-.88c19.03-6.61 56.05 1.77 60.06-22.46z\"\n        fill=\"url(#IconifyId-178a58e6776-62d0d4-25)\"\n      />\n      <path\n        d=\"M102.08 51.48c-4.01 24.23-41.03 15.85-60.05 22.46c-.63 0-1.37.33-2.11.88c15.35 4.96 34.13 5.97 46.67 1.8c15.75-5.22 22.86-17.67 15.49-25.14z\"\n        fill=\"#EB5E8E\"\n      />\n      <linearGradient\n        id=\"IconifyId-178a58e6776-62d0d4-26\"\n        x1=\"21.117\"\n        x2=\"99.384\"\n        y1=\"47.691\"\n        y2=\"47.691\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#FFB0CB\" offset=\".003\" />\n        <stop stopColor=\"#F383A9\" offset=\".792\" />\n        <stop stopColor=\"#F0769F\" offset=\"1\" />\n      </linearGradient>\n      <path\n        d=\"M93.95 33.63s5.43 3.22 5.43 11.55s-6.93 19.13-37.68 16.04c-30.48-3.07-38.35-.47-38.35-.47s-9.34-12.68 10.18-12.61c17.47.06 43.45 2.12 49.57-1.76c9.11-5.8 9.45-5.96 10.85-12.75z\"\n        fill=\"url(#IconifyId-178a58e6776-62d0d4-26)\"\n      />\n      <path\n        d=\"M58.45 27.44c9.46-5.91 8.95-14.5 4.44-21.81c-.49.28-.78.87-.53 1.48c.99 2.38 1.87 5.74.27 8c-2.71 3.82-7.73 4.79-15.94 9.37C38.86 28.84 35.85 33 35.3 38.22c-.05.49.23.96.69 1.19c.88.44 2.56 1.16 5.1 1.82c2.76-6.83 11.07-10.65 17.36-13.79z\"\n        fill=\"#F77CA5\"\n      />\n      <linearGradient\n        id=\"IconifyId-178a58e6776-62d0d4-27\"\n        x1=\"55.086\"\n        x2=\"87.012\"\n        y1=\"24.14\"\n        y2=\"24.14\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#F697B7\" offset=\"0\" />\n        <stop stopColor=\"#F78FB2\" offset=\".335\" />\n        <stop stopColor=\"#F878A3\" offset=\".862\" />\n        <stop stopColor=\"#F9719F\" offset=\"1\" />\n      </linearGradient>\n      <path\n        d=\"M79.09 16.45c-4.23-4.56-9.23-8.28-15.02-10.88c-.42-.19-.85-.13-1.19.06c4.51 7.3 5.02 15.89-4.44 21.81c-6.28 3.14-14.59 6.96-17.36 13.79c2.76.72 6.54 1.37 11.46 1.52c12.06.36 28.31-.3 31.07-5.03c2.77-4.72.46-15.9-4.52-21.27z\"\n        fill=\"url(#IconifyId-178a58e6776-62d0d4-27)\"\n      />\n      <path\n        d=\"M93.1 32c.23-.58.4-1.18.52-1.78c-3.24-4.96-10.82-6.48-10.82-6.48c8.22 17.5-34.56 13.69-46.68 14.41c-5.16.31-8.12 2.58-9.83 5.1c2.53-1.32 5.49-2.05 8.46-3.04C53.89 35.65 84.89 54.8 93.1 32z\"\n        fill=\"#F79EBC\"\n      />\n      <linearGradient\n        id=\"IconifyId-178a58e6776-62d0d4-28\"\n        x1=\"23.961\"\n        x2=\"95.222\"\n        y1=\"40.522\"\n        y2=\"40.522\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#F78FB2\" offset=\"0\" />\n        <stop stopColor=\"#F887AD\" offset=\".272\" />\n        <stop stopColor=\"#FC709F\" offset=\".703\" />\n        <stop stopColor=\"#FF5C93\" offset=\"1\" />\n      </linearGradient>\n      <path\n        d=\"M94.82 32.96a8.561 8.561 0 0 0-1.2-2.74c-.12.61-.29 1.2-.52 1.78c-8.21 22.8-39.21 3.65-58.36 8.21c-2.96.99-5.93 1.71-8.46 3.04c-2.31 3.39-2.32 7.21-2.32 7.21c12.47-3.78 21.67.02 45.64.37c23.97.33 26.94-10.71 25.22-17.87z\"\n        fill=\"url(#IconifyId-178a58e6776-62d0d4-28)\"\n      />\n      <linearGradient\n        id=\"IconifyId-178a58e6776-62d0d4-29\"\n        x1=\"64\"\n        x2=\"64\"\n        y1=\"83\"\n        y2=\"119.62\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#4FE8FF\" offset=\"0\" />\n        <stop stopColor=\"#4BDDF3\" offset=\".497\" />\n        <stop stopColor=\"#45CEE3\" offset=\"1\" />\n      </linearGradient>\n      <path\n        d=\"M109.96 76.04c-2.19 1.02-4.48 3.36-5.05 5.31c.58-1.95-.77-2.78-3.01-1.95c-2.25.83-4.49 2.98-4.96 4.89c.47-1.91-1.01-2.86-3.3-2.22s-4.48 2.61-4.83 4.49c.36-1.88-1.24-2.96-3.56-2.51s-4.44 2.25-4.68 4.11c.25-1.86-1.47-3.08-3.81-2.82c-2.35.26-4.38 1.9-4.51 3.74c.13-1.84-1.68-3.21-4.04-3.14s-4.3 1.55-4.32 3.39c.02-1.84-1.89-3.36-4.25-3.48c-2.35-.12-4.2 1.21-4.1 3.06c-.09-1.85-2.09-3.52-4.44-3.83c-2.34-.31-4.08.88-3.87 2.74c-.21-1.86-2.28-3.71-4.6-4.2s-3.93.55-3.62 2.44c-.32-1.89-2.46-3.9-4.74-4.59s-3.77.24-3.34 2.16c-.43-1.92-2.63-4.12-4.86-4.99s-3.59-.07-3.05 1.89c-.54-1.96-2.78-4.35-4.95-5.41s-3.39-.37-2.75 1.64c2.58 6.06 4.09 12.85 6.08 19.13c1.76 5.53 3.42 11.26 5.72 16.59c1.39 3.22 4.33 4.92 7.47 6.34c8.99 4.05 19.49 5.1 29.23 5.19c8.8.09 17.92-.68 26.31-3.47c2.82-.94 5.74-2.11 8.08-3.98c3.27-2.61 4.42-7.6 5.54-11.46c2.67-9.24 5.82-18.25 8.92-27.35c.68-2.02-.52-2.73-2.71-1.71z\"\n        fill=\"url(#IconifyId-178a58e6776-62d0d4-29)\"\n      />\n      <circle cx=\"36.75\" cy=\"49.25\" r=\"2\" fill=\"#B8EB96\" />\n      <circle cx=\"49.75\" cy=\"56.5\" r=\"2\" fill=\"#EBD3DB\" />\n      <circle cx=\"37.25\" cy=\"64\" r=\"2\" fill=\"#EB5E8E\" />\n      <circle cx=\"52\" cy=\"34.5\" r=\"2\" fill=\"#3DC2EB\" />\n      <circle cx=\"62.75\" cy=\"48.25\" r=\"2\" fill=\"#FFA600\" />\n      <circle cx=\"95.5\" cy=\"63.25\" r=\"2\" fill=\"#79EB2D\" />\n      <circle cx=\"71\" cy=\"27.25\" r=\"2\" fill=\"#FFF000\" />\n      <circle cx=\"81.5\" cy=\"50.5\" r=\"2\" fill=\"#8052FF\" />\n      <circle cx=\"86.5\" cy=\"35.5\" r=\"2\" fill=\"#5EEBB3\" />\n      <circle cx=\"72.25\" cy=\"65.75\" r=\"2\" fill=\"#A45EEB\" />\n      <g\n        fill=\"none\"\n        stroke=\"#49A5B0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"10\"\n        strokeWidth=\"3\"\n      >\n        <path opacity=\".56\" d=\"M28.5 85.5l6 25.75\" />\n        <path opacity=\".56\" d=\"M99.5 85.58l-6 25.92\" />\n      </g>\n      <g\n        fill=\"none\"\n        stroke=\"#49A5B0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"10\"\n        strokeWidth=\"3\"\n      >\n        <path opacity=\".56\" d=\"M40.96 89.58l3.5 25.5\" />\n        <path opacity=\".56\" d=\"M87.04 88.67l-3.5 25.5\" />\n      </g>\n      <g\n        fill=\"none\"\n        stroke=\"#49A5B0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"10\"\n        strokeWidth=\"3\"\n      >\n        <path opacity=\".56\" d=\"M51.83 91l2.34 26.17\" />\n        <path opacity=\".56\" d=\"M76.17 90.08l-2.34 26.17\" />\n      </g>\n      <path\n        fill=\"none\"\n        opacity=\".56\"\n        stroke=\"#49A5B0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"10\"\n        strokeWidth=\"3\"\n        d=\"M64.17 92.67l.33 25.16\"\n      />\n      <path\n        d=\"M66.35 10.09c3.86 2.2 7.4 5.01 10.54 8.41c1.38 1.49 2.65 3.74 3.55 6.34c.33.96 1.13 1.68 2.11 1.92c1.04.26 6.35 1.72 8.56 5.1c.38.59.64 1.18.79 1.8c.09.39.17.82.23 1.26c.09.7.43 1.35.95 1.83c1.23 1.13 3.3 3.73 3.31 8.43c0 1.1-.15 2.16-.45 3.16c-.31 1.07-.02 2.22.78 2.99c.39.38.86.64 1.37.77c.7.45 1.33.95 1.86 1.5c3.13 3.17 2.12 6.83.72 9.35c-.55.98-.5 2.19.13 3.12c.56.84 1.5 1.33 2.49 1.33c.11 0 .23-.01.35-.02c.08-.01.17-.01.25-.01c.64 0 1.16.3 1.59.91c.12.17.24.33.37.5c.41.54.41.58.42.76c.01 1.08.61 2.08 1.56 2.6c.31.17.64.28.98.33c-.26.73-.53 1.5-.8 2.31c-.35 1.05-.09 2.21.68 3.01c.19.2.4.37.63.51l-.68 1.99c-2.66 7.8-5.42 15.86-7.77 23.97c-.11.36-.21.74-.32 1.12c-.94 3.31-2 7.07-4.21 8.83c-2.07 1.65-4.78 2.68-7.15 3.47c-6.73 2.24-14.59 3.32-24.03 3.32c-.43 0-.87 0-1.3-.01c-11.93-.12-20.84-1.69-28.03-4.93c-2.89-1.3-5.01-2.62-5.95-4.79c-1.85-4.27-3.3-8.92-4.71-13.43c-.3-.96-.6-1.93-.91-2.88c-.65-2.04-1.26-4.2-1.86-6.28c-1.14-4-2.31-8.12-3.88-12.03c.09-.09.17-.19.24-.3c.56-.78.7-1.79.39-2.7l-.39-1.14c-.03-.08-.05-.16-.08-.24c.18-.11.35-.24.5-.38a3.03 3.03 0 0 0 .88-2.81c-.24-1.14-.08-1.9.2-2.15c.3-.27.53-.37.64-.37c.01 0 .05 0 .11.03a2.982 2.982 0 0 0 2.75-.26c.82-.53 1.33-1.42 1.37-2.4c.02-.45.23-.95.39-1.26c.36-.4.61-.89.72-1.43c.16-.8-.01-1.64-.49-2.31c-.81-1.16-1.9-3.41-1.57-4.9c.09-.42.32-.97 1.3-1.53c.86-.49 1.42-1.37 1.5-2.36c.07-.89.39-3.18 1.78-5.22c1.45-2.13 3.76-3.38 6.85-3.71a2.987 2.987 0 0 0 2.67-2.72v-.06c.37-3.25 1.86-6.88 9.86-11.34c2.78-1.55 5.18-2.67 7.3-3.66c4.14-1.93 7.41-3.46 9.63-6.59c1.28-1.79 1.7-4.08 1.28-6.75M63.54 5.45c-.24 0-.46.07-.66.18c-.49.28-.78.87-.53 1.48c.99 2.38 1.87 5.74.27 8c-2.71 3.82-7.73 4.79-15.94 9.37C38.86 28.84 35.85 33 35.3 38.22v.02c-4.65.49-7.4 2.63-9.02 5.01c-1.78 2.62-2.19 5.49-2.29 6.66c-5.7 3.27-1.23 9.99-.7 10.75c-.04.02-.07.05-.11.07c0 0-.99 1.42-1.06 3.08c-.4-.16-.81-.24-1.23-.24c-.89 0-1.8.37-2.66 1.16c-1 .91-1.62 2.56-1.11 4.99c-.3-.08-.56-.12-.8-.12c-1.04 0-1.47.76-1 2.14c.33.96.65 1.93.98 2.89c-1 .01-1.43.75-1 2.12c2.58 6.06 4.09 12.85 6.08 19.13c1.76 5.53 3.42 11.26 5.72 16.59c1.39 3.22 4.33 4.92 7.47 6.34c8.99 4.05 19.49 5.1 29.23 5.19c.44 0 .89.01 1.33.01c8.38 0 17.01-.83 24.98-3.47c2.82-.94 5.74-2.11 8.08-3.98c3.27-2.61 4.42-7.6 5.54-11.46c2.67-9.24 5.82-18.25 8.92-27.35c.47-1.38.03-2.15-1.01-2.15c-.24 0-.51.04-.81.12c.56-1.7 1.16-3.36 1.84-4.97c.44-1.38.01-2.14-1-2.14c-.47 0-1.06.16-1.74.5c-.23.11-.46.25-.69.39c-.01-1.46-.78-2.17-1.32-2.94c-1.08-1.54-2.57-2.19-4.05-2.19c-.2 0-.4.01-.6.03c2.53-4.55 2.35-9.31-1.2-12.91c-.84-.85-1.87-1.65-3.1-2.35l-.17.05c.4-1.36.57-2.71.57-4.01c0-5.86-2.69-9.18-4.28-10.64c-.07-.54-.16-1.07-.29-1.58a8.561 8.561 0 0 0-1.2-2.74c-2.76-4.22-8.65-5.95-10.34-6.37c-.99-2.83-2.41-5.48-4.18-7.39c-4.23-4.56-9.23-8.28-15.02-10.88c-.16-.09-.34-.13-.52-.13z\"\n        fill=\"#424242\"\n        opacity=\".2\"\n      />\n    </svg>\n  </Box>\n);\n"
  },
  {
    "path": "site/src/SearchInput/SearchInput.css.ts",
    "content": "import { createVar, globalStyle } from '@vanilla-extract/css';\nimport { homePage } from '../HomePage/HomePage.css';\nimport { darkMode as darkModeClass } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\nimport { responsiveStyle } from '../themeUtils';\n\nconst searchInputMinSize = 44;\nconst darkMode = `html.${darkModeClass}`;\nconst lightMode = `html:not(.${darkModeClass})`;\nconst focusRingColor = createVar();\nconst formBackgroundColor = createVar();\nconst iconSize = createVar();\nconst hitSourceColor = createVar();\nconst hitIndicatorColor = createVar();\nconst hitIndicatorAngle = createVar();\n\nglobalStyle('.DocSearch', {\n  fontFamily: vars.fonts.body,\n  minHeight: searchInputMinSize,\n  minWidth: searchInputMinSize,\n  ...responsiveStyle({\n    mobile: {\n      vars: {\n        '--docsearch-spacing': vars.spacing.large,\n      },\n    },\n    tablet: {\n      vars: {\n        '--docsearch-spacing': vars.spacing.xlarge,\n      },\n    },\n  }),\n});\n\n/**\n * DocSearch Vars\n */\nglobalStyle(`${lightMode} .DocSearch`, {\n  vars: {\n    '--docsearch-text-color': vars.palette.gray900,\n    '--docsearch-searchbox-focus-background': vars.palette.blue50,\n    '--docsearch-searchbox-background': vars.palette.blue50,\n    '--docsearch-searchbox-shadow': `none`,\n    '--docsearch-key-gradient': vars.palette.teal100,\n    '--docsearch-key-shadow': 'none',\n    '--docsearch-muted-color': vars.palette.gray700,\n    '--docsearch-container-background': vars.palette.teal100,\n    '--docsearch-modal-background': vars.palette.white,\n    '--docsearch-modal-shadow': `none`,\n    '--docsearch-footer-background': 'none',\n    '--docsearch-footer-shadow': `none`,\n    '--docsearch-highlight-color': vars.palette.pink500,\n    '--docsearch-hit-shadow': 'none',\n    '--docsearch-logo-color': vars.palette.black,\n    '--docsearch-hit-active-color': vars.palette.black,\n    '--docsearch-hit-color': vars.palette.gray500,\n    [hitSourceColor]: vars.palette.green500,\n    [focusRingColor]: vars.palette.pink400,\n    [formBackgroundColor]: vars.palette.blue50,\n    [hitIndicatorColor]: vars.palette.blue300,\n  },\n});\n\nglobalStyle(`${lightMode} ${homePage} .DocSearch`, {\n  vars: {\n    '--docsearch-searchbox-focus-background': vars.palette.teal200muted,\n    '--docsearch-searchbox-background': vars.palette.teal200muted,\n  },\n});\n\nglobalStyle(`${darkMode} .DocSearch`, {\n  vars: {\n    '--docsearch-text-color': vars.palette.zinc50,\n    '--docsearch-searchbox-focus-background': vars.palette.zinc800,\n    '--docsearch-searchbox-background': vars.palette.zinc800,\n    '--docsearch-searchbox-shadow': `none`,\n    '--docsearch-key-gradient': vars.palette.zinc900,\n    '--docsearch-key-shadow': 'none',\n    '--docsearch-muted-color': vars.palette.zinc400,\n    '--docsearch-container-background': vars.palette.black,\n    '--docsearch-modal-background': vars.palette.zinc900,\n    '--docsearch-modal-shadow': `none`,\n    '--docsearch-footer-background': 'none',\n    '--docsearch-footer-shadow': `none`,\n    '--docsearch-highlight-color': vars.palette.pink400,\n    '--docsearch-hit-background': 'none',\n    '--docsearch-hit-shadow': 'none',\n    '--docsearch-logo-color': vars.palette.white,\n    '--docsearch-hit-active-color': vars.palette.white,\n    '--docsearch-hit-color': vars.palette.zinc400,\n    [hitSourceColor]: vars.palette.green300,\n    [focusRingColor]: vars.palette.pink500,\n    [formBackgroundColor]: vars.palette.zinc800,\n    [hitIndicatorColor]: vars.palette.blue400,\n  },\n});\n\n/**\n * DocSearch Button\n */\nglobalStyle(\n  `.DocSearch-Button`,\n  responsiveStyle({\n    mobile: {\n      margin: 0,\n      padding: 0,\n      display: 'flex',\n      justifyContent: 'center',\n      background: 'none',\n    },\n    tablet: {\n      paddingLeft: vars.spacing.large,\n      paddingRight: vars.spacing.medium,\n      borderRadius: vars.border.radius.small,\n      background: 'var(--docsearch-searchbox-background)',\n    },\n  }),\n);\n\nglobalStyle(\n  '.DocSearch-Button:hover, .DocSearch-Button:focus',\n  responsiveStyle({\n    mobile: {\n      background: 'none',\n    },\n    tablet: {\n      background: 'var(--docsearch-searchbox-background)',\n    },\n  }),\n);\n\nglobalStyle('.DocSearch-Button:focus-visible', {\n  boxShadow: `0px 0px 0px 3px ${focusRingColor}`,\n});\n\nglobalStyle('.DocSearch-Button .DocSearch-Button-Keys', {\n  justifyContent: 'flex-end',\n});\n\nglobalStyle('.DocSearch-Button .DocSearch-Button-Key', {\n  vars: {\n    '--docsearch-key-gradient': 'none',\n  },\n  padding: 0,\n  margin: 0,\n  width: 'auto',\n  fontFamily: vars.fonts.body,\n});\n\nglobalStyle(`.DocSearch-Button-Placeholder`, {\n  paddingLeft: vars.spacing.medium,\n  paddingRight: vars.spacing.medium,\n});\n\n/**\n * DocSearch Search Icon\n */\nglobalStyle('.DocSearch-Search-Icon', {\n  strokeWidth: 2,\n  color: 'var(--docsearch-text-color)',\n  height: iconSize,\n  width: iconSize,\n  ...responsiveStyle({\n    mobile: {\n      vars: {\n        [iconSize]: '24px',\n      },\n    },\n    tablet: {\n      vars: {\n        [iconSize]: '18px',\n      },\n    },\n  }),\n});\n\n/**\n * DocSearch Container (holds the modal)\n */\nglobalStyle(`.DocSearch-Container`, {\n  background: 'none',\n});\n\nglobalStyle(`.DocSearch-Container::before`, {\n  content: '',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  zIndex: -1,\n  pointerEvents: 'none',\n  background: 'var(--docsearch-container-background)',\n  backdropFilter: 'blur(4px)',\n  opacity: 0.9,\n});\n\n/**\n * DocSearch Modal\n */\nglobalStyle(`.DocSearch-Modal`, {\n  background: 'none',\n});\n\nglobalStyle(`.DocSearch-Modal::before`, {\n  content: '',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  zIndex: -1,\n  pointerEvents: 'none',\n  background: 'var(--docsearch-modal-background)',\n  ...responsiveStyle({\n    tablet: {\n      clipPath: 'polygon(1% 1%, 98% 0, 100% 100%, 0 98%)',\n      bottom: 'var(--docsearch-footer-height)',\n    },\n  }),\n});\n\n/**\n * DocSearch Form (input field container)\n */\nglobalStyle('.DocSearch-Form', {\n  vars: {\n    '--docsearch-searchbox-focus-background': formBackgroundColor,\n  },\n  ...responsiveStyle({\n    mobile: {\n      paddingLeft: vars.spacing.medium,\n      paddingRight: vars.spacing.medium,\n    },\n    tablet: {\n      paddingLeft: vars.spacing.large,\n      paddingRight: vars.spacing.large,\n    },\n  }),\n});\n\n/**\n * DocSearch Input\n */\nglobalStyle(`.DocSearch-Input`, {\n  paddingLeft: vars.spacing.large,\n});\n\n/**\n * DocSearch Cancel (close button on mobile)\n */\nglobalStyle(`.DocSearch-Cancel`, {\n  color: 'var(--docsearch-text-color)',\n});\n\n/**\n * DocSearch Hit Source (section heading)\n */\nglobalStyle(`.DocSearch-Hit-source`, {\n  color: hitSourceColor,\n});\n\n/**\n * DocSearch Hit Item\n */\nglobalStyle(`.DocSearch-Hit > a`, {\n  padding: `${vars.spacing.medium} ${vars.spacing.medium}`,\n});\n\nglobalStyle(`.DocSearch-Hit[aria-selected=true] > a`, {\n  background: 'none',\n});\n\n/**\n * DocSearch Hit Item Indicator\n */\nglobalStyle(`.DocSearch-Hit a::before`, {\n  backgroundColor: hitIndicatorColor,\n  content: '\"\"',\n  width: vars.spacing.xsmall,\n  position: 'absolute',\n  left: '-8px',\n  top: '24px',\n  bottom: '24px',\n  borderRadius: vars.border.radius.small,\n  transform: `skew(${hitIndicatorAngle})`,\n  transition: 'transform .15s ease',\n});\n\nglobalStyle(`.DocSearch-Hit[aria-selected=false] a::before`, {\n  opacity: 0,\n});\n\nglobalStyle(\n  [\n    `.DocSearch-Hit[aria-selected=true] a::before`,\n    `.DocSearch-Hit:nth-child(2n) a::before`,\n  ].join(', '),\n  {\n    vars: {\n      [hitIndicatorAngle]: '-8deg',\n    },\n  },\n);\n\nglobalStyle(\n  [\n    `.DocSearch-Hit a::before`,\n    `.DocSearch-Hit[aria-selected=true]:nth-child(2n) a::before`,\n  ].join(', '),\n  {\n    vars: {\n      [hitIndicatorAngle]: '8deg',\n    },\n  },\n);\n\n/**\n * DocSearch Hit Mark (Match highlight color)\n */\nglobalStyle(`.DocSearch-Hit[aria-selected=true] mark`, {\n  vars: {\n    '--docsearch-hit-active-color': 'var(--docsearch-highlight-color)',\n  },\n});\n\n/**\n * DocSearch Hit Mark (Match highlight color)\n */\nglobalStyle(`.DocSearch-Logo svg *`, {\n  fill: 'var(--docsearch-muted-color)',\n});\n"
  },
  {
    "path": "site/src/SearchInput/SearchInput.tsx",
    "content": "import { DocSearch } from '@docsearch/react';\nimport '@docsearch/css';\nimport type { ComponentProps } from 'react';\n\nimport './SearchInput.css';\n\ntype DocSearchProps = ComponentProps<typeof DocSearch>;\n\n// Make search item URLs relative so the local site doesn't take you back to prod\nconst transformSearchResultItems: DocSearchProps['transformItems'] = (items) =>\n  items.map((item) => {\n    const url = new URL(item.url);\n\n    return {\n      ...item,\n      url: `${url.pathname}${url.hash}`,\n    };\n  });\n\nconst getMissingResultsUrl: DocSearchProps['getMissingResultsUrl'] = ({\n  query,\n}) =>\n  `https://github.com/vanilla-extract-css/vanilla-extract/issues/new?assignees=&labels=pending+triage&template=bug_report.yml&bug-description=Search query \\`${encodeURIComponent(\n    query,\n  )}\\` should return search results.`;\n\nexport const SearchInput = () => (\n  <DocSearch\n    appId=\"ABPL1AJSFN\"\n    apiKey=\"d0d2252fbd30f7cb523a50c5a7780078\"\n    indexName=\"vanilla-extract\"\n    transformItems={transformSearchResultItems}\n    getMissingResultsUrl={getMissingResultsUrl}\n    placeholder=\"Search\"\n  />\n);\n"
  },
  {
    "path": "site/src/Tweet/Tweet.css.ts",
    "content": "import { createVar, style } from '@vanilla-extract/css';\nimport { darkMode } from '../system/styles/sprinkles.css';\nimport { vars } from '../themes.css';\n\nexport const tweetLink = style({\n  ':hover': {\n    textDecoration: 'none',\n  },\n  ':focus': {\n    outline: 'none',\n  },\n});\n\nexport const shadowColorVar = createVar();\n\nexport const tweet = style({\n  maxWidth: 440,\n  boxShadow: `0 0 30px -10px ${shadowColorVar}`,\n  vars: {\n    [shadowColorVar]: vars.palette.blue300,\n  },\n  selectors: {\n    [`.${darkMode} &`]: {\n      vars: {\n        [shadowColorVar]: vars.palette.zinc900,\n      },\n    },\n    [`${tweetLink}:focus &`]: {\n      vars: {\n        [shadowColorVar]: vars.palette.pink400,\n      },\n    },\n    [`.${darkMode} ${tweetLink}:focus &`]: {\n      vars: {\n        [shadowColorVar]: vars.palette.pink400,\n      },\n    },\n  },\n});\n\nexport const avatar = style({\n  backgroundRepeat: 'no-repeat',\n  backgroundPosition: 'center center',\n  backgroundSize: 'cover',\n  height: 60,\n  width: 60,\n  overflow: 'hidden',\n  clipPath: 'polygon(3% 2%, 100% 0, 94% 94%, 0 100%)',\n});\n"
  },
  {
    "path": "site/src/Tweet/Tweet.tsx",
    "content": "import type { ReactNode } from 'react';\nimport { Box, Stack } from '../system';\nimport Link from '../Typography/Link';\nimport Text from '../Typography/Text';\nimport * as styles from './Tweet.css';\n\ninterface TweetProps {\n  handle: string;\n  name: string;\n  avatar: string;\n  url: string;\n  children: ReactNode;\n}\n\nexport const Tweet = ({ handle, name, avatar, url, children }: TweetProps) => (\n  <Link to={url} className={styles.tweetLink}>\n    <Box\n      padding=\"xlarge\"\n      background={{ lightMode: 'white', darkMode: 'black' }}\n      className={styles.tweet}\n    >\n      <Stack space=\"xlarge\">\n        <Box display=\"flex\" alignItems=\"center\" style={{ gap: 10 }}>\n          <Box\n            // borderRadius=\"full\"\n            className={styles.avatar}\n            background={{ lightMode: 'gray100', darkMode: 'black' }}\n            style={{\n              backgroundImage: `url(${avatar})`,\n              backgroundSize: 'cover',\n            }}\n          />\n          <Stack space=\"medium\">\n            <Text weight=\"strong\" size=\"small\">\n              {name}\n            </Text>\n            <Text color=\"secondary\" size=\"small\">\n              {handle}\n            </Text>\n          </Stack>\n        </Box>\n        <Text size=\"small\">{children}</Text>\n      </Stack>\n    </Box>\n  </Link>\n);\n"
  },
  {
    "path": "site/src/Typography/Heading.tsx",
    "content": "import type { ElementType, ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport * as styles from './typography.css';\nimport { Box } from '../system';\nimport { sprinkles, type Sprinkles } from '../system/styles/sprinkles.css';\n\nexport type HeadingLevel = keyof typeof styles.heading;\n\nconst getHeadingComponent = (level: HeadingLevel) => {\n  if (level === '1') {\n    return 'h1';\n  }\n  if (level === '2') {\n    return 'h2';\n  }\n  if (level === '3') {\n    return 'h3';\n  }\n  if (level === '4') {\n    return 'h4';\n  }\n\n  throw new Error('No valid heading level');\n};\n\nexport interface HeadingProps {\n  children: ReactNode;\n  level: HeadingLevel;\n  align?: Sprinkles['textAlign'];\n  branded?: boolean;\n  component?: ElementType;\n}\n\nexport const useHeadingStyles = (\n  level: HeadingLevel,\n  branded?: boolean,\n  align?: Sprinkles['textAlign'],\n) =>\n  clsx(\n    branded ? styles.font.brand : styles.font.heading,\n    sprinkles({\n      textAlign: align,\n      color: { lightMode: 'gray900', darkMode: 'zinc100' },\n    }),\n    styles.heading[level].trimmed,\n  );\n\nexport const Heading = ({\n  level,\n  component,\n  branded = false,\n  align,\n  children,\n}: HeadingProps) => {\n  return (\n    <Box\n      component={component || getHeadingComponent(level)}\n      className={useHeadingStyles(level, branded, align)}\n    >\n      {children}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/Typography/Link.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../themes.css';\n\nexport const underlineOnHover = style({\n  selectors: {\n    ['&:not(:hover)']: {\n      textDecoration: 'none',\n    },\n  },\n});\n\nexport const underlineNever = style({\n  textDecoration: 'none',\n  ':hover': {\n    textDecoration: 'none',\n  },\n});\n\nexport const highlightOnHover = style({\n  ':hover': {\n    color: vars.palette.pink500,\n  },\n  ':focus': {\n    outline: 'none',\n    color: vars.palette.pink500,\n  },\n});\n"
  },
  {
    "path": "site/src/Typography/Link.tsx",
    "content": "import { Link, type LinkProps } from 'react-router-dom';\nimport { HashLink } from 'react-router-hash-link';\nimport clsx from 'clsx';\nimport { type TextProps, useTextStyles } from './Text';\nimport * as styles from './Link.css';\nimport { sprinkles } from '../system/styles/sprinkles.css';\n\ninterface Props extends LinkProps {\n  baseline?: boolean;\n  size?: 'standard' | 'small' | 'xsmall';\n  underline?: 'always' | 'hover' | 'never';\n  variant?: 'link' | 'button';\n  weight?: TextProps['weight'];\n  color?: TextProps['color'];\n  type?: TextProps['type'];\n  inline?: boolean;\n  highlightOnFocus?: boolean;\n}\nexport default ({\n  to,\n  baseline = false,\n  size = 'standard',\n  color = 'link',\n  weight = 'regular',\n  underline = 'hover',\n  type = 'body',\n  highlightOnFocus = true,\n  inline = false,\n  className,\n  ...restProps\n}: Props) => {\n  const classNames = clsx(\n    inline ? undefined : sprinkles({ display: 'block' }),\n    underline === 'hover' ? styles.underlineOnHover : undefined,\n    underline === 'never' ? styles.underlineNever : undefined,\n    highlightOnFocus ? styles.highlightOnHover : undefined,\n    useTextStyles({ size, type, color, weight, baseline }),\n    className,\n  );\n\n  if (typeof to === 'string' && to.startsWith('http')) {\n    return <a href={to} {...restProps} className={classNames} />;\n  }\n\n  if (typeof to === 'string' && to.indexOf('#') > -1) {\n    return <HashLink to={to} {...restProps} className={classNames} />;\n  }\n\n  return (\n    <Link\n      onClick={() => window.scrollTo(0, 0)}\n      to={to}\n      {...restProps}\n      className={classNames}\n    />\n  );\n};\n"
  },
  {
    "path": "site/src/Typography/Text.tsx",
    "content": "import type { ReactNode, ElementType } from 'react';\nimport clsx from 'clsx';\nimport { Box } from '../system';\nimport * as styles from './typography.css';\nimport { sprinkles, type Sprinkles } from '../system/styles/sprinkles.css';\n\nconst colorMap = {\n  neutral: { lightMode: 'gray700', darkMode: 'zinc100' },\n  strong: { lightMode: 'gray900', darkMode: 'zinc100' },\n  code: { lightMode: 'white' },\n  link: { lightMode: 'gray700', darkMode: 'zinc100' },\n  secondary: { lightMode: 'gray500', darkMode: 'zinc400' },\n  highlight: { lightMode: 'pink500' },\n} as const;\n\ninterface TextStyleProps {\n  size?: keyof typeof styles.text;\n  color?: keyof typeof colorMap;\n  weight?: keyof typeof styles.weight;\n  align?: Sprinkles['textAlign'];\n  baseline?: boolean;\n  type?: Exclude<keyof typeof styles.font, 'brand' | 'heading'>;\n}\n\nexport interface TextProps extends TextStyleProps {\n  component?: ElementType;\n  children: ReactNode;\n}\n\nexport const useTextStyles = ({\n  size = 'standard',\n  color = 'neutral',\n  weight = 'regular',\n  type = 'body',\n  align,\n  baseline = true,\n}: TextStyleProps) =>\n  clsx(\n    styles.font[type],\n    baseline ? styles.text[size].trimmed : styles.text[size].untrimmed,\n    sprinkles({ color: colorMap[color], textAlign: align }),\n    styles.weight[weight],\n  );\n\nexport default ({\n  component = 'span',\n  size,\n  color,\n  weight,\n  align,\n  baseline = true,\n  type,\n  children,\n}: TextProps) => {\n  return (\n    <Box\n      component={component}\n      display=\"block\"\n      className={useTextStyles({ size, color, weight, type, align, baseline })}\n    >\n      {children}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/Typography/typography.css.ts",
    "content": "import { style, styleVariants } from '@vanilla-extract/css';\nimport { createTextStyle } from '@capsizecss/vanilla-extract';\nimport { vars } from '../themes.css';\nimport { mapToProperty, responsiveStyle, queries } from '../themeUtils';\n\nconst makeTypographyRules = (textDefinition: typeof vars.text.standard) => {\n  const { fontSize: mobileFontSize, lineHeight: mobileLineHeight } =\n    textDefinition.mobile;\n\n  const { fontSize: tabletFontSize, lineHeight: tabletLineHeight } =\n    textDefinition.tablet;\n\n  const { fontSize: desktopFontSize, lineHeight: desktopLineHeight } =\n    textDefinition.tablet;\n\n  return {\n    untrimmed: style(\n      responsiveStyle({\n        mobile: {\n          fontSize: mobileFontSize,\n          lineHeight: mobileLineHeight,\n        },\n        tablet: {\n          fontSize: tabletFontSize,\n          lineHeight: tabletLineHeight,\n        },\n        desktop: {\n          fontSize: desktopFontSize,\n          lineHeight: desktopLineHeight,\n        },\n      }),\n    ),\n    trimmed: createTextStyle(textDefinition.mobile, {\n      '@media': {\n        [queries.tablet]: textDefinition.tablet,\n        [queries.desktop]: textDefinition.desktop,\n      },\n    }),\n  };\n};\n\nexport const font = styleVariants(vars.fonts, mapToProperty('fontFamily'));\nexport const weight = styleVariants(vars.weight, mapToProperty('fontWeight'));\n\nexport const text = {\n  standard: makeTypographyRules(vars.text.standard),\n  small: makeTypographyRules(vars.text.small),\n  xsmall: makeTypographyRules(vars.text.xsmall),\n  code: makeTypographyRules(vars.text.code),\n};\n\nexport const heading = {\n  '1': makeTypographyRules(vars.heading.h1),\n  '2': makeTypographyRules(vars.heading.h2),\n  '3': makeTypographyRules(vars.heading.h3),\n  '4': makeTypographyRules(vars.heading.h4),\n};\n"
  },
  {
    "path": "site/src/assets/site.webmanifest",
    "content": "{\n  \"name\": \"Vanilla Extract\",\n  \"short_name\": \"vanilla-extract\",\n  \"description\": \"Zero-runtime Stylesheets-in-TypeScript.\",\n  \"start_url\": \"/\",\n  \"background_color\": \"transparent\",\n  \"theme_color\": \"#fff\",\n  \"display\": \"standalone\",\n  \"icons\": [\n    {\n      \"src\": \"/android-chrome-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\"\n    },\n    {\n      \"src\": \"/android-chrome-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image/png\"\n    }\n  ]\n}\n"
  },
  {
    "path": "site/src/client.tsx",
    "content": "import ReactDOM from 'react-dom/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport { HeadProvider } from 'react-head';\nimport App from './App';\n\nReactDOM.hydrateRoot(\n  document.getElementById('app')!,\n  <BrowserRouter>\n    <HeadProvider>\n      <App />\n    </HeadProvider>\n  </BrowserRouter>,\n);\n"
  },
  {
    "path": "site/src/docs-store.ts",
    "content": "import docsManifest from '../docs-manifest.json';\n\nexport const groups = docsManifest.groups;\n\nexport const pages = docsManifest.pages.map(\n  ({ group, label, fileName, route, sections }) => {\n    const { frontMatter, default: component } = require(`../docs/${fileName}`);\n\n    return {\n      group,\n      label,\n      Component: component as (props: any) => JSX.Element,\n      title: frontMatter.title as string,\n      route,\n      sections,\n    };\n  },\n);\n"
  },
  {
    "path": "site/src/index.d.ts",
    "content": "declare module '*.md' {\n  let MDXComponent: (props: any) => JSX.Element;\n  export default MDXComponent;\n}\n\ndeclare module '*.png' {\n  let ImageSrc: string;\n  export default ImageSrc;\n}\n"
  },
  {
    "path": "site/src/mdx-components.css.ts",
    "content": "import { calc } from '@vanilla-extract/css-utils';\nimport { style } from '@vanilla-extract/css';\nimport { headerHeight } from './DocsPage/DocsPage.css';\nimport { vars } from './themes.css';\n\nexport const headingScrollTop = style({\n  scrollMarginTop: calc.add(headerHeight, vars.spacing.xxlarge),\n});\n"
  },
  {
    "path": "site/src/mdx-components.tsx",
    "content": "import {\n  type ReactNode,\n  type ComponentProps,\n  type AllHTMLAttributes,\n  type ElementType,\n  createElement,\n  Children,\n} from 'react';\nimport { MDXProvider } from '@mdx-js/react';\nimport Text, { useTextStyles } from './Typography/Text';\nimport { Box } from './system';\nimport InlineCode from './InlineCode/InlineCode';\nimport Link from './Typography/Link';\nimport Blockquote from './Blockquote/Blockquote';\nimport { type HeadingLevel, useHeadingStyles } from './Typography/Heading';\nimport Divider from './Divider/Divider';\nimport { CompiledCode, type CompiledCodeProps } from './Code/CompiledCode';\nimport { type BoxProps } from './system/Box/Box';\nimport { sprinkles } from './system/styles/sprinkles.css';\nimport { vars } from './themes.css';\nimport * as styles from './mdx-components.css';\n\nconst Block = ({\n  component,\n  children,\n  maxWidth = 'large',\n  style,\n  ...restProps\n}: Omit<BoxProps, 'paddingBottom'>) => (\n  <Box\n    component={component}\n    paddingBottom=\"xxlarge\"\n    {...restProps}\n    maxWidth={maxWidth}\n    style={{\n      margin: '0 auto',\n      ...style,\n    }}\n  >\n    {children}\n  </Box>\n);\n\nconst RemoveNestedParagraphs = (props: { children: ReactNode }) => (\n  <MDXProvider\n    {...props}\n    components={{\n      p: ({ children }) => <Text>{children}</Text>,\n    }}\n  />\n);\n\nconst A = ({\n  href,\n  color: _color,\n  type: _type,\n  ...restProps\n}: JSX.IntrinsicElements['a']) => {\n  let isInlineCodeLink = false;\n\n  if (\n    restProps.children &&\n    Children.count(restProps.children) === 1 &&\n    typeof restProps.children === 'object'\n  ) {\n    const child = Children.only(restProps.children);\n    if (child && typeof child === 'object' && 'props' in child) {\n      isInlineCodeLink =\n        child.props.parentName === 'a' &&\n        child.props.originalType === 'inlineCode';\n    }\n  }\n\n  return href ? (\n    <Link\n      to={href}\n      {...restProps}\n      inline\n      underline=\"always\"\n      highlightOnFocus={!isInlineCodeLink}\n      className={\n        isInlineCodeLink\n          ? sprinkles({ color: { lightMode: 'pink700', darkMode: 'zinc200' } })\n          : undefined\n      }\n    />\n  ) : (\n    <a {...restProps} />\n  );\n};\n\ninterface HeadingProps extends AllHTMLAttributes<HTMLHeadingElement> {\n  component: ElementType;\n  level: HeadingLevel;\n  href?: string;\n}\nconst Heading = ({ level, component, children, href }: HeadingProps) => {\n  const headingElement = createElement(\n    Box,\n    {\n      component: component,\n      className: useHeadingStyles(level),\n    },\n    children,\n  );\n\n  return href ? (\n    <Box\n      component=\"a\"\n      href={`#${href}`}\n      display=\"block\"\n      style={{\n        textDecoration: 'none',\n      }}\n    >\n      {headingElement}\n    </Box>\n  ) : (\n    headingElement\n  );\n};\n\nexport default {\n  hr: () => (\n    <Block>\n      <Divider />\n    </Block>\n  ),\n  p: ({ children }) => (\n    <Block component=\"p\">\n      <Text>{children}</Text>\n    </Block>\n  ),\n  h1: ({ id, ...props }) => (\n    <Block component=\"h1\" id={id} className={styles.headingScrollTop}>\n      <Heading component=\"span\" {...props} href={id} level=\"1\" />\n    </Block>\n  ),\n  h2: ({ id, ...props }) => (\n    <Block component=\"h2\" id={id} className={styles.headingScrollTop}>\n      <Box\n        position=\"relative\"\n        component=\"span\"\n        display=\"block\"\n        marginTop=\"xxlarge\"\n        paddingLeft=\"large\"\n      >\n        <Box\n          component=\"span\"\n          display=\"block\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          paddingLeft=\"xsmall\"\n          marginTop=\"-small\"\n          borderRadius=\"medium\"\n          background={{ lightMode: 'pink400', darkMode: 'pink500' }}\n          style={{\n            height: 36,\n            transform: 'skew(-15deg)',\n          }}\n        />\n        <Heading component=\"span\" {...props} href={id} level=\"3\" />\n      </Box>\n    </Block>\n  ),\n  h3: ({ id, ...props }) => (\n    <Block component=\"h3\" id={id} className={styles.headingScrollTop}>\n      <Box\n        position=\"relative\"\n        component=\"span\"\n        display=\"block\"\n        marginTop=\"xlarge\"\n        paddingLeft=\"large\"\n      >\n        <Box\n          component=\"span\"\n          display=\"block\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          paddingLeft=\"xsmall\"\n          marginTop=\"-xsmall\"\n          borderRadius=\"medium\"\n          background={{ lightMode: 'blue400', darkMode: 'blue500' }}\n          style={{\n            height: 28,\n            transform: 'skew(15deg)',\n          }}\n        />\n        <Heading component=\"span\" {...props} href={id} level=\"3\" />\n      </Box>\n    </Block>\n  ),\n  pre: ({ children }) => (\n    <Block maxWidth=\"xlarge\" component=\"pre\">\n      {children}\n    </Block>\n  ),\n  compiledcode: (props: CompiledCodeProps) => (\n    <Block maxWidth=\"xlarge\">\n      <Box paddingY=\"large\">\n        <CompiledCode {...props} />\n      </Box>\n    </Block>\n  ),\n  code: (props) => {\n    // These props are added by SyntaxHighlighter\n    const { dangerouslySetInnerHTML, ['data-language']: language } =\n      props as typeof props & {\n        'data-language'?: string;\n        dangerouslySetInnerHTML: { __html: string };\n      };\n    let resolvedTitle = '';\n    let resolvedChildren = dangerouslySetInnerHTML.__html;\n    const matches = resolvedChildren.match(\n      /^(?<node><span class=\".*\">(?:\\/[/*])(?:\\s)?(?<title>[^*/]*)(?:\\*\\/)?<\\/span>)/,\n    );\n\n    if (matches && matches.groups) {\n      resolvedTitle = matches.groups.title;\n      resolvedChildren = resolvedChildren\n        .replace(`${matches.groups.node}`, '')\n        .trim();\n    }\n\n    return (\n      <CompiledCode\n        code={[\n          {\n            fileName: resolvedTitle,\n            contents: resolvedChildren,\n            language,\n            tokenized: true,\n          },\n        ]}\n      />\n    );\n  },\n  inlineCode: InlineCode,\n  th: (props) => (\n    <Text component=\"th\" weight=\"strong\">\n      {props.children}\n    </Text>\n  ),\n  td: (props) => <Text component=\"td\">{props.children}</Text>,\n  a: A,\n  blockquote: ({ children }) => (\n    <Block component=\"blockquote\">\n      <RemoveNestedParagraphs>\n        <Blockquote>{children}</Blockquote>\n      </RemoveNestedParagraphs>\n    </Block>\n  ),\n  ul: (props) => (\n    <Block\n      component=\"ul\"\n      className={useTextStyles({ baseline: false })}\n      style={{\n        listStyle: 'disc',\n        paddingLeft: '2em',\n        paddingRight: '1em',\n        margin: `calc(${vars.spacing.xlarge} * -1) auto 0`,\n      }}\n    >\n      {props.children}\n    </Block>\n  ),\n  ol: (props) => (\n    <Block\n      component=\"ol\"\n      className={useTextStyles({ baseline: false })}\n      style={{\n        listStyle: 'decimal',\n        paddingLeft: '2em',\n        paddingRight: '1em',\n        margin: `calc(${vars.spacing.xlarge} * -1) auto 0`,\n      }}\n    >\n      {props.children}\n    </Block>\n  ),\n} satisfies ComponentProps<typeof MDXProvider>['components'];\n"
  },
  {
    "path": "site/src/render.tsx",
    "content": "import { Fragment } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { StaticRouter } from 'react-router-dom/server';\nimport { HeadProvider } from 'react-head';\nimport App from './App';\nimport type { StatsCompilation } from 'webpack';\nimport { darkMode, lightMode } from './system/styles/sprinkles.css';\nimport { themeKey } from './ColorModeToggle/ColorModeToggle';\n\ntype HeadTags = React.ReactElement<unknown>[];\n\nconst render = (route: string, headTags: HeadTags) =>\n  renderToString(\n    <StaticRouter location={route}>\n      <HeadProvider headTags={headTags}>\n        <App />\n      </HeadProvider>\n    </StaticRouter>,\n  );\n\nconst prodUrl = 'https://vanilla-extract.style';\nconst devUrl = 'http://localhost:8080';\nconst fullyQualifiedUrl = (path: string) =>\n  `${process.env.CI ? prodUrl : devUrl}${path}`;\n\ninterface RenderParams {\n  route: string;\n  publicPath: string;\n  entrypoints: NonNullable<StatsCompilation['entrypoints']>;\n}\nexport default ({ route, publicPath, entrypoints }: RenderParams) => {\n  const assetPath = (filename: string) => `${publicPath}${filename}`;\n  const assets = entrypoints.main.assets;\n\n  if (!assets) {\n    throw new Error('No assets!');\n  }\n\n  const cssAssets = assets.filter((asset) => asset.name.endsWith('.css'));\n  const jsAssets = assets.filter((asset) => asset.name.endsWith('.js'));\n\n  const headTags: HeadTags = [];\n  const html = render(route, headTags);\n\n  const favicon = (size?: number) =>\n    `<link rel=\"icon\" type=\"image/png\" ${\n      size ? `sizes=\"${size}x${size}\" ` : ''\n    }href=\"${assetPath(`favicon${size ? `-${size}x${size}.png` : '.ico'}`)}\">`;\n\n  const shareImageUrl = fullyQualifiedUrl(assetPath('og-image.png'));\n\n  return `\n  <!DOCTYPE html>\n  <html lang=\"en\">\n    <head>\n      <script>\n      ((d)=>{try{var p=localStorage.getItem('${themeKey}');if(p==d||(p!='${lightMode}'&&matchMedia('(prefers-color-scheme:dark)').matches)) document.documentElement.classList.add(d)}catch(e){}})('${darkMode}')\n      </script>\n      <link href=\"https://fonts.googleapis.com/css?family=Shrikhand&display=swap\" rel=\"stylesheet\">\n      <link href=\"https://fonts.googleapis.com/css?family=DM+Sans&display=swap\" rel=\"stylesheet\">\n      <link href=\"https://www.monolisa.dev/api/fonts/initial\" rel=\"stylesheet\">\n      ${cssAssets\n        .map(({ name }) => `<link rel=\"stylesheet\" href=\"${assetPath(name)}\">`)\n        .join('\\n')}\n      ${jsAssets\n        .map(\n          ({ name }) =>\n            `<link rel=\"preload\" as=\"script\" href=\"${assetPath(name)}\">`,\n        )\n        .join('\\n')}\n      ${renderToString(<Fragment>{headTags}</Fragment>)}\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      <meta name=\"theme-color\" content=\"#fff\"/>\n      <link rel=\"manifest\" href=\"${assetPath('site.webmanifest')}\"/>\n      <link rel=\"apple-touch-icon\" href=\"${assetPath('apple-touch-icon.png')}\"/>\n      <link rel=\"canonical\" href=\"${fullyQualifiedUrl(route || '/')}\" />\n      ${favicon(16)}\n      ${favicon(32)}\n      ${favicon()}\n      <meta property=\"og:image\" content=\"${shareImageUrl}\" />\n      <meta property=\"og:image:width\" content=\"1200\">\n      <meta property=\"og:image:height\" content=\"600\">\n      <meta property=\"og:type\" content=\"website\">\n      <meta property=\"og:site_name\" content=\"vanilla-extract\">\n      <meta name=\"twitter:card\" content=\"summary_large_image\">\n      <meta name=\"twitter:image\" content=\"${shareImageUrl}\" />\n    </head>\n    <body>\n        <div id=\"app\">${html}</div>\n        ${jsAssets\n          .map(({ name }) => `<script async src=\"${assetPath(name)}\"></script>`)\n          .join('\\n')}\n    </body>\n  </html>`;\n};\n"
  },
  {
    "path": "site/src/system/Box/Box.tsx",
    "content": "import { createElement, type AllHTMLAttributes, type ElementType } from 'react';\nimport clsx from 'clsx';\nimport * as resetStyles from '../styles/reset.css';\nimport { sprinkles, type Sprinkles } from '../styles/sprinkles.css';\n\nexport interface BoxProps\n  extends\n    Omit<\n      AllHTMLAttributes<HTMLElement>,\n      | 'className'\n      | 'content'\n      | 'height'\n      | 'translate'\n      | 'color'\n      | 'width'\n      | 'cursor'\n    >,\n    Sprinkles {\n  component?: ElementType;\n  className?: Parameters<typeof clsx>[0];\n}\n\nexport const Box = ({\n  component = 'div',\n  className,\n  padding,\n  paddingX,\n  paddingY,\n  paddingTop,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  margin,\n  marginX,\n  marginY,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  display,\n  alignItems,\n  justifyContent,\n  flexDirection,\n  flexWrap,\n  flexGrow,\n  flexShrink,\n  borderRadius,\n  position,\n  top,\n  bottom,\n  left,\n  right,\n  inset,\n  background,\n  color,\n  width,\n  zIndex,\n  opacity,\n  pointerEvents,\n  cursor,\n  textAlign,\n  maxWidth,\n  minWidth,\n  transition,\n  overflow,\n  ...restProps\n}: BoxProps) => {\n  const atomClasses = clsx(\n    resetStyles.base,\n    resetStyles.element[component as keyof typeof resetStyles.element],\n    sprinkles({\n      padding,\n      paddingX,\n      paddingY,\n      paddingTop,\n      paddingBottom,\n      paddingLeft,\n      paddingRight,\n      margin,\n      marginX,\n      marginY,\n      marginTop,\n      marginBottom,\n      marginLeft,\n      marginRight,\n      display,\n      alignItems,\n      justifyContent,\n      flexDirection,\n      flexWrap,\n      flexGrow,\n      flexShrink,\n      borderRadius,\n      position,\n      top,\n      bottom,\n      left,\n      right,\n      inset,\n      background,\n      color,\n      width,\n      zIndex,\n      opacity,\n      pointerEvents,\n      cursor,\n      textAlign,\n      maxWidth,\n      minWidth,\n      transition,\n      overflow,\n    }),\n    className,\n  );\n\n  return createElement(component, { className: atomClasses, ...restProps });\n};\n"
  },
  {
    "path": "site/src/system/ButtonLink/ButtonLink.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { vars } from '../../themes.css';\nimport { darkMode } from '../styles/sprinkles.css';\n\nexport const button = style({\n  textDecoration: 'none',\n  fontSize: vars.text.standard.mobile.fontSize,\n  fontFamily: vars.fonts.body,\n  transition: 'transform .15s ease',\n  ':active': {\n    transform: 'scale(.98) translateZ(0)',\n  },\n  ':focus': {\n    outline: 'none',\n  },\n});\n\nexport const solid = style({\n  boxShadow: `0px 0px 12px 0px rgba(0,0,0,0.2)`,\n  ':focus-visible': {\n    boxShadow: `0px 0px 0px 5px ${vars.palette.pink400}`,\n  },\n  selectors: {\n    [`.${darkMode} &:focus-visible`]: {\n      boxShadow: `0px 0px 0px 5px ${vars.palette.pink500}`,\n    },\n  },\n});\n\nexport const transparent = style({\n  boxShadow: `0 0 0 2px inset currentColor`,\n  ':hover': { background: 'rgba(255,255,255,.5)' },\n  ':focus-visible': {\n    boxShadow: `0px 0px 0px 5px ${vars.palette.pink400},0 0 0 2px inset currentColor`,\n  },\n  selectors: {\n    [`.${darkMode} &:hover`]: { background: 'rgba(255,255,255,.1)' },\n    [`.${darkMode} &:focus-visible`]: {\n      boxShadow: `0px 0px 0px 5px ${vars.palette.pink500},0 0 0 2px inset currentColor`,\n    },\n  },\n});\n"
  },
  {
    "path": "site/src/system/ButtonLink/ButtonLink.tsx",
    "content": "import type { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Link, type NavLinkProps } from 'react-router-dom';\nimport { HashLink } from 'react-router-hash-link';\nimport { Box } from '..';\nimport * as styles from './ButtonLink.css';\nimport { sprinkles } from '../styles/sprinkles.css';\n\ninterface ButtonLinkProps extends NavLinkProps {\n  variant?: 'solid' | 'transparent';\n  icon?: ReactNode;\n  children: ReactNode;\n}\nexport const ButtonLink = ({\n  to,\n  variant = 'solid',\n  icon,\n  children,\n}: ButtonLinkProps) => {\n  const classNames = clsx(\n    sprinkles({\n      display: 'flex',\n      alignItems: 'center',\n      paddingY: {\n        mobile: 'medium',\n        tablet: 'large',\n      },\n      paddingX: {\n        mobile: 'large',\n        tablet: 'xlarge',\n      },\n      borderRadius: 'large',\n      ...(variant === 'solid'\n        ? {\n            background: { lightMode: 'gray900', darkMode: 'zinc100' },\n            color: { lightMode: 'gray50', darkMode: 'zinc900' },\n          }\n        : {}),\n      ...(variant === 'transparent'\n        ? { color: { lightMode: 'gray900', darkMode: 'zinc100' } }\n        : {}),\n    }),\n    styles.button,\n    variant === 'solid' ? styles.solid : undefined,\n    variant === 'transparent' ? styles.transparent : undefined,\n  );\n  if (typeof to === 'string' && to.startsWith('http')) {\n    return (\n      <a href={to} className={classNames}>\n        {children}\n        {icon ? (\n          <Box display=\"inline\" paddingLeft=\"small\">\n            {icon}\n          </Box>\n        ) : undefined}\n      </a>\n    );\n  }\n\n  if (typeof to === 'string' && to.indexOf('#') > -1) {\n    return (\n      <HashLink to={to} className={classNames}>\n        {children}\n        {icon ? (\n          <Box display=\"inline\" paddingLeft=\"small\">\n            {icon}\n          </Box>\n        ) : undefined}\n      </HashLink>\n    );\n  }\n\n  return (\n    <Link onClick={() => window.scrollTo(0, 0)} to={to} className={classNames}>\n      {children}\n      {icon ? (\n        <Box display=\"inline\" paddingLeft=\"xsmall\">\n          {icon}\n        </Box>\n      ) : undefined}\n    </Link>\n  );\n};\n"
  },
  {
    "path": "site/src/system/Columns/Columns.tsx",
    "content": "import { Children, type ReactNode } from 'react';\nimport { Box } from '../Box/Box';\nimport {\n  mapResponsiveValue,\n  type ResponsiveValue,\n  type Space,\n} from '../styles/sprinkles.css';\n\ninterface Props {\n  children: ReactNode;\n  space: Space;\n  alignY?: ResponsiveValue<'top' | 'center' | 'bottom'>;\n  reverseX?: boolean;\n  collapseOnMobile?: boolean;\n  collapseOnTablet?: boolean;\n}\n\nconst alignYToFlexAlign = {\n  top: 'flex-start',\n  bottom: 'flex-end',\n  center: 'center',\n} as const;\n\nconst negate = (space: Space) =>\n  space === 'none' ? ('none' as const) : (`-${space}` as const);\n\nexport const Columns = ({\n  children,\n  space,\n  collapseOnMobile = false,\n  collapseOnTablet = false,\n  reverseX = false,\n  alignY = 'top',\n}: Props) => {\n  const columns = Children.toArray(children);\n  const row = reverseX ? 'row-reverse' : 'row';\n\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection={\n        collapseOnMobile || collapseOnTablet\n          ? {\n              mobile: 'column',\n              tablet: collapseOnTablet ? 'column' : row,\n              desktop: row,\n            }\n          : undefined\n      }\n      alignItems={\n        alignY\n          ? mapResponsiveValue(alignY, (value) => alignYToFlexAlign[value])\n          : undefined\n      }\n      marginLeft={\n        collapseOnMobile || collapseOnTablet\n          ? ({\n              mobile: 'none',\n              tablet: collapseOnTablet ? 'none' : negate(space),\n              desktop: negate(space),\n            } as const)\n          : negate(space)\n      }\n      marginTop={\n        collapseOnMobile || collapseOnTablet\n          ? {\n              mobile: negate(space),\n              tablet: collapseOnTablet ? negate(space) : 'none',\n              desktop: 'none',\n            }\n          : undefined\n      }\n    >\n      {columns.map((c, i) => (\n        <Box\n          paddingLeft={\n            collapseOnMobile || collapseOnTablet\n              ? {\n                  mobile: 'none',\n                  tablet: collapseOnTablet ? 'none' : space,\n                  desktop: space,\n                }\n              : space\n          }\n          paddingTop={\n            collapseOnMobile || collapseOnTablet\n              ? {\n                  mobile: space,\n                  tablet: collapseOnTablet ? space : 'none',\n                  desktop: 'none',\n                }\n              : undefined\n          }\n          style={{ width: '100%', minWidth: 0 }}\n          key={i}\n        >\n          {c}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/system/ContentBlock/ContentBlock.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const root = style({\n  margin: '0 auto',\n});\n"
  },
  {
    "path": "site/src/system/ContentBlock/ContentBlock.tsx",
    "content": "import type { ReactNode } from 'react';\nimport { Box } from '../';\nimport * as styles from './ContentBlock.css';\nimport type { BoxProps } from '../Box/Box';\n\nexport const ContentBlock = ({\n  children,\n  withGutters = false,\n  size = 'standard',\n}: {\n  children: ReactNode;\n  withGutters?: boolean;\n  size?: BoxProps['maxWidth'];\n}) => {\n  return (\n    <Box\n      maxWidth={size}\n      className={styles.root}\n      paddingX={\n        withGutters\n          ? { mobile: 'large', tablet: 'xlarge', desktop: 'xxlarge' }\n          : undefined\n      }\n    >\n      {children}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/system/Stack/Stack.tsx",
    "content": "import { Children, type ReactNode } from 'react';\nimport { Box } from '../';\nimport type { BoxProps } from '../Box/Box';\nimport {\n  mapResponsiveValue,\n  type ResponsiveValue,\n} from '../styles/sprinkles.css';\n\nconst alignToFlexAlign = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n} as const;\n\nexport const Stack = ({\n  children,\n  space,\n  align,\n}: {\n  children: ReactNode;\n  space: BoxProps['paddingBottom'];\n  align?: ResponsiveValue<'left' | 'center' | 'right'>;\n}) => {\n  const stackItems = Children.toArray(children);\n  const alignItems = align\n    ? mapResponsiveValue(align, (value) => alignToFlexAlign[value])\n    : undefined;\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" alignItems={alignItems}>\n      {stackItems.map((item, index) => (\n        <Box\n          key={index}\n          paddingBottom={index !== stackItems.length - 1 ? space : undefined}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n"
  },
  {
    "path": "site/src/system/index.ts",
    "content": "export { Box } from './Box/Box';\nexport { ButtonLink } from './ButtonLink/ButtonLink';\nexport { ContentBlock } from './ContentBlock/ContentBlock';\nexport { Columns } from './Columns/Columns';\nexport { Stack } from './Stack/Stack';\n"
  },
  {
    "path": "site/src/system/styles/reset.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const base = style({\n  margin: 0,\n  padding: 0,\n  border: 0,\n  minWidth: 0,\n  boxSizing: 'border-box',\n  fontSize: '100%',\n  font: 'inherit',\n  verticalAlign: 'baseline',\n});\n\nexport const button = style({\n  background: 0,\n  border: 0,\n  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n});\n\n// HTML5 display-role reset for older browsers\nconst block = style({\n  display: 'block',\n});\n\nconst body = style({\n  lineHeight: 1,\n});\n\nconst list = style({\n  listStyle: 'none',\n});\n\nconst quote = style({\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n});\n\nconst table = style({\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n});\n\n// Custom reset rules\nconst mark = style({\n  backgroundColor: 'transparent',\n  color: 'inherit',\n});\n\nconst select = style({\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n});\n\nexport const element = {\n  article: block,\n  aside: block,\n  button,\n  details: block,\n  figcaption: block,\n  figure: block,\n  footer: block,\n  header: block,\n  hgroup: block,\n  menu: block,\n  nav: block,\n  section: block,\n  textarea: block,\n  ul: list,\n  ol: list,\n  blockquote: quote,\n  q: quote,\n  body,\n  table,\n  mark,\n  select,\n};\n"
  },
  {
    "path": "site/src/system/styles/sprinkles.css.ts",
    "content": "import mapValues from 'lodash/mapValues';\nimport {\n  defineProperties,\n  createSprinkles,\n  createMapValueFn,\n  createNormalizeValueFn,\n  type ConditionalValue,\n} from '@vanilla-extract/sprinkles';\nimport { calc } from '@vanilla-extract/css-utils';\nimport { breakpoints } from '../../themeUtils';\nimport { vars } from '../../themes.css';\n\nconst space = vars.spacing;\nexport type Space = keyof typeof space;\n\nconst negativeSpace = {\n  ['-xsmall']: `${calc(space.xsmall).negate()}`,\n  ['-small']: `${calc(space.small).negate()}`,\n  ['-medium']: `${calc(space.medium).negate()}`,\n  ['-large']: `${calc(space.large).negate()}`,\n  ['-xlarge']: `${calc(space.xlarge).negate()}`,\n  ['-xxlarge']: `${calc(space.xxlarge).negate()}`,\n  ['-xxxlarge']: `${calc(space.xxxlarge).negate()}`,\n};\n\nconst margins = {\n  ...space,\n  ...negativeSpace,\n};\n\nconst responsiveProperties = defineProperties({\n  conditions: mapValues(breakpoints, (bp) =>\n    bp === 0 ? {} : { '@media': `screen and (min-width: ${bp}px)` },\n  ),\n  defaultCondition: 'mobile',\n  properties: {\n    position: ['absolute', 'relative', 'fixed'],\n    display: ['none', 'block', 'inline', 'inline-block', 'flex'],\n    alignItems: ['flex-start', 'center', 'flex-end'],\n    justifyContent: ['flex-start', 'center', 'flex-end', 'space-between'],\n    flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],\n    paddingTop: space,\n    paddingBottom: space,\n    paddingLeft: space,\n    paddingRight: space,\n    marginTop: margins,\n    marginBottom: margins,\n    marginLeft: margins,\n    marginRight: margins,\n    pointerEvents: ['none', 'auto'],\n    overflow: ['hidden'],\n    opacity: [0, 1],\n    textAlign: ['left', 'center', 'right'],\n    minWidth: [0],\n    maxWidth: vars.contentWidth,\n    transition: {\n      slow: 'transform .3s ease, opacity .3s ease',\n      fast: 'transform .15s ease, opacity .15s ease',\n    },\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],\n    marginX: ['marginLeft', 'marginRight'],\n    marginY: ['marginTop', 'marginBottom'],\n  },\n});\n\nexport const mapResponsiveValue = createMapValueFn(responsiveProperties);\nexport const normalizeResponsiveValue =\n  createNormalizeValueFn(responsiveProperties);\n\nexport type ResponsiveValue<Value extends string | number> = ConditionalValue<\n  typeof responsiveProperties,\n  Value\n>;\n\nexport const lightMode = 'light';\nexport const darkMode = 'dark';\n\nconst colorProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { selector: `.${darkMode} &` },\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    background: vars.palette,\n    color: vars.palette,\n  },\n});\n\nconst unresponsiveProperties = defineProperties({\n  properties: {\n    flexWrap: ['wrap', 'nowrap'],\n    top: [0],\n    bottom: [0],\n    left: [0],\n    right: [0],\n    flexShrink: [0],\n    flexGrow: [0, 1],\n    zIndex: [-1, 0, 1],\n    width: { full: '100%' },\n    borderRadius: vars.border.radius,\n    cursor: ['pointer'],\n  },\n  shorthands: {\n    inset: ['top', 'bottom', 'left', 'right'],\n  },\n});\n\nexport const sprinkles = createSprinkles(\n  responsiveProperties,\n  unresponsiveProperties,\n  colorProperties,\n);\n\nexport type Sprinkles = Parameters<typeof sprinkles>[0];\n"
  },
  {
    "path": "site/src/themeUtils.ts",
    "content": "import omit from 'lodash/omit';\nimport isEqual from 'lodash/isEqual';\nimport type { StyleRule } from '@vanilla-extract/css';\nimport type { Properties } from 'csstype';\nimport mapValues from 'lodash/mapValues';\n\nexport const breakpoints = {\n  mobile: 0,\n  tablet: 769, // aligning breakpoint with the SearchInput, which uses a `max-width: 768px`. Ref: https://github.com/algolia/docsearch/blob/d81016b110aa0818231b6e4b7b96d2007d345b05/packages/docsearch-css/src/button.css#L66\n  desktop: 1200,\n};\n\nexport type Breakpoint = keyof typeof breakpoints;\ntype CSSProps = Omit<StyleRule, '@media' | '@supports'>;\n\nexport const queries = mapValues(\n  omit(breakpoints, 'mobile'),\n  (bp) => `screen and (min-width: ${bp}px)`,\n);\n\nconst makeMediaQuery =\n  (breakpoint: keyof typeof queries) => (styles: CSSProps) =>\n    !styles || Object.keys(styles).length === 0\n      ? {}\n      : {\n          [queries[breakpoint]]: styles,\n        };\n\nconst mediaQuery = {\n  tablet: makeMediaQuery('tablet'),\n  desktop: makeMediaQuery('desktop'),\n};\n\ninterface ResponsiveStyle {\n  mobile?: CSSProps;\n  tablet?: CSSProps;\n  desktop?: CSSProps;\n}\n\nexport const responsiveStyle = ({\n  mobile,\n  tablet,\n  desktop,\n}: ResponsiveStyle): StyleRule => {\n  const mobileStyles = omit(mobile, '@media');\n\n  const tabletStyles = !tablet || isEqual(tablet, mobileStyles) ? null : tablet;\n\n  const stylesBelowDesktop = tabletStyles || mobileStyles;\n  const desktopStyles =\n    !desktop || isEqual(desktop, stylesBelowDesktop) ? null : desktop;\n\n  const hasMediaQueries = tabletStyles || desktopStyles;\n\n  return {\n    ...mobileStyles,\n    ...(hasMediaQueries\n      ? {\n          '@media': {\n            ...(tabletStyles ? mediaQuery.tablet(tabletStyles) : {}),\n            ...(desktopStyles ? mediaQuery.desktop(desktopStyles) : {}),\n          },\n        }\n      : {}),\n  };\n};\n\nexport const mapToProperty =\n  <Property extends keyof Properties<string | number>>(\n    property: Property,\n    breakpoint?: Breakpoint,\n  ) =>\n  (value: string | number) => {\n    const styleRule = { [property]: value };\n\n    return breakpoint\n      ? responsiveStyle({ [breakpoint]: styleRule })\n      : styleRule;\n  };\n"
  },
  {
    "path": "site/src/themes.css.ts",
    "content": "import { createGlobalTheme } from '@vanilla-extract/css';\nimport colors from 'tailwindcss/colors';\nimport { precomputeValues } from '@capsizecss/vanilla-extract';\n\nimport type { Breakpoint } from './themeUtils';\n\nconst grid = 4;\nconst px = (value: string | number) => `${value}px`;\n\nconst fontMetrics = {\n  brand: {\n    capHeight: 669,\n    ascent: 1026,\n    descent: -432,\n    lineGap: 0,\n    unitsPerEm: 1000,\n  },\n  heading: {\n    capHeight: 700,\n    ascent: 992,\n    descent: -310,\n    lineGap: 0,\n    unitsPerEm: 1000,\n  },\n  body: {\n    capHeight: 1443,\n    ascent: 1950,\n    descent: -494,\n    lineGap: 0,\n    unitsPerEm: 2048,\n  },\n  code: {\n    capHeight: 700,\n    ascent: 1060,\n    descent: -320,\n    lineGap: 0,\n    unitsPerEm: 1000,\n  },\n};\n\nconst tailwindPalette = {\n  white: '#fff',\n  black: '#0e0e10',\n\n  red: colors.red['500'],\n  yellow: colors.yellow['300'],\n  green50: colors.emerald['50'],\n  green200: colors.emerald['200'],\n  green300: colors.emerald['300'],\n  green400: colors.emerald['400'],\n  green500: colors.emerald['500'],\n  green600: colors.emerald['600'],\n\n  gray50: colors.gray['50'],\n  gray100: colors.gray['100'],\n  gray200: colors.gray['200'],\n  gray300: colors.gray['300'],\n  gray400: colors.gray['400'],\n  gray500: colors.gray['500'],\n  gray600: colors.gray['600'],\n  gray700: colors.gray['700'],\n  gray800: colors.gray['800'],\n  gray900: colors.gray['900'],\n\n  zinc50: colors.zinc['50'],\n  zinc100: colors.zinc['100'],\n  zinc200: colors.zinc['200'],\n  zinc300: colors.zinc['300'],\n  zinc400: colors.zinc['400'],\n  zinc500: colors.zinc['500'],\n  zinc600: colors.zinc['600'],\n  zinc700: colors.zinc['700'],\n  zinc800: colors.zinc['800'],\n  zinc900: colors.zinc['900'],\n\n  slate800: colors.slate['800'],\n  slate900: colors.slate['900'],\n\n  teal50: colors.teal['50'],\n  teal100: colors.teal['100'],\n  teal200: colors.teal['200'],\n  teal200muted: '#b6eee3',\n  teal300: colors.teal['300'],\n  teal400: colors.teal['400'],\n  teal500: colors.teal['500'],\n  teal600: colors.teal['600'],\n  teal700: colors.teal['700'],\n  teal800: colors.teal['800'],\n  teal900: colors.teal['900'],\n\n  blue50: colors.sky['50'],\n  blue100: colors.sky['100'],\n  blue200: colors.sky['200'],\n  blue300: colors.sky['300'],\n  blue400: colors.sky['400'],\n  blue500: colors.sky['500'],\n  blue600: colors.sky['600'],\n  blue700: colors.sky['700'],\n  blue800: colors.sky['800'],\n  blue900: colors.sky['900'],\n\n  pink50: colors.fuchsia['50'],\n  pink100: colors.fuchsia['100'],\n  pink200: colors.fuchsia['200'],\n  pink300: colors.fuchsia['300'],\n  pink400: colors.fuchsia['400'],\n  pink500: colors.fuchsia['500'],\n  pink600: colors.fuchsia['600'],\n  pink700: colors.fuchsia['700'],\n  pink800: colors.fuchsia['800'],\n  pink900: colors.fuchsia['900'],\n};\n\nconst calculateTypographyStyles = (\n  definition: Record<Breakpoint, { fontSize: number; rows: number }>,\n  type: keyof typeof fontMetrics,\n) => {\n  const mobile = precomputeValues({\n    fontSize: definition.mobile.fontSize,\n    leading: definition.mobile.rows * grid,\n    fontMetrics: fontMetrics[type],\n  });\n\n  const tablet = precomputeValues({\n    fontSize: definition.tablet.fontSize,\n    leading: definition.tablet.rows * grid,\n    fontMetrics: fontMetrics[type],\n  });\n\n  const desktop = precomputeValues({\n    fontSize: definition.desktop.fontSize,\n    leading: definition.desktop.rows * grid,\n    fontMetrics: fontMetrics[type],\n  });\n\n  return {\n    mobile: {\n      fontSize: mobile.fontSize,\n      lineHeight: mobile.lineHeight,\n      capHeightTrim: mobile.capHeightTrim,\n      baselineTrim: mobile.baselineTrim,\n    },\n    tablet: {\n      fontSize: tablet.fontSize,\n      lineHeight: tablet.lineHeight,\n      capHeightTrim: tablet.capHeightTrim,\n      baselineTrim: tablet.baselineTrim,\n    },\n    desktop: {\n      fontSize: desktop.fontSize,\n      lineHeight: desktop.lineHeight,\n      capHeightTrim: desktop.capHeightTrim,\n      baselineTrim: desktop.baselineTrim,\n    },\n  };\n};\n\nexport const vars = createGlobalTheme(':root', {\n  fonts: {\n    brand: 'Shrikhand, \"Helvetica Neue\", HelveticaNeue, Helvetica, sans-serif',\n    heading:\n      '\"DM Sans\", \"Helvetica Neue\", HelveticaNeue, Helvetica, sans-serif',\n    body: '-apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", HelveticaNeue, Helvetica, Arial, sans-serif',\n    code: 'ml, \"Roboto Mono\", Menlo, monospace',\n  },\n  grid: px(grid),\n  spacing: {\n    none: '0',\n    xsmall: px(1 * grid),\n    small: px(2 * grid),\n    medium: px(3 * grid),\n    large: px(5 * grid),\n    xlarge: px(8 * grid),\n    xxlarge: px(12 * grid),\n    xxxlarge: px(24 * grid),\n  },\n  contentWidth: {\n    xsmall: px(480),\n    small: px(600),\n    standard: px(740),\n    large: px(960),\n    xlarge: px(1120),\n    xxlarge: px(1350),\n  },\n  heading: {\n    h1: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 36,\n          rows: 12,\n        },\n        tablet: {\n          fontSize: 52,\n          rows: 15,\n        },\n        desktop: {\n          fontSize: 52,\n          rows: 15,\n        },\n      },\n      'heading',\n    ),\n    h2: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 28,\n          rows: 10,\n        },\n        tablet: {\n          fontSize: 38,\n          rows: 12,\n        },\n        desktop: {\n          fontSize: 38,\n          rows: 12,\n        },\n      },\n      'heading',\n    ),\n    h3: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 24,\n          rows: 8,\n        },\n        tablet: {\n          fontSize: 30,\n          rows: 10,\n        },\n        desktop: {\n          fontSize: 30,\n          rows: 10,\n        },\n      },\n      'heading',\n    ),\n    h4: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 22,\n          rows: 8,\n        },\n        tablet: {\n          fontSize: 22,\n          rows: 9,\n        },\n        desktop: {\n          fontSize: 22,\n          rows: 9,\n        },\n      },\n      'heading',\n    ),\n  },\n  text: {\n    standard: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 18,\n          rows: 9,\n        },\n        tablet: {\n          fontSize: 20,\n          rows: 10,\n        },\n        desktop: {\n          fontSize: 20,\n          rows: 10,\n        },\n      },\n      'body',\n    ),\n    code: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 13,\n          rows: 6,\n        },\n        tablet: {\n          fontSize: 14,\n          rows: 7,\n        },\n        desktop: {\n          fontSize: 14,\n          rows: 7,\n        },\n      },\n      'body',\n    ),\n    small: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 16,\n          rows: 8,\n        },\n        tablet: {\n          fontSize: 16,\n          rows: 8,\n        },\n        desktop: {\n          fontSize: 16,\n          rows: 8,\n        },\n      },\n      'body',\n    ),\n    xsmall: calculateTypographyStyles(\n      {\n        mobile: {\n          fontSize: 15,\n          rows: 7,\n        },\n        tablet: {\n          fontSize: 15,\n          rows: 7,\n        },\n        desktop: {\n          fontSize: 15,\n          rows: 7,\n        },\n      },\n      'body',\n    ),\n  },\n  weight: {\n    regular: '400',\n    strong: '700',\n  },\n  palette: tailwindPalette,\n  border: {\n    width: {\n      standard: px(1 * grid),\n      large: px(2 * grid),\n    },\n    radius: {\n      small: px(2 * grid),\n      medium: px(4 * grid),\n      large: px(7 * grid),\n      full: '9999px',\n    },\n  },\n});\n"
  },
  {
    "path": "site/src/useHeadingRoute.ts",
    "content": "import { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport throttle from 'lodash/throttle';\n\nlet activeHash: string | null = null;\nconst listeners = new Set<(activeHash: string | null) => void>();\n\nconst updateActiveRoute = (hash: string) => {\n  if (hash != activeHash) {\n    activeHash = hash;\n\n    listeners.forEach((listener) => {\n      listener(activeHash);\n    });\n  }\n};\n\nexport const useActiveHash = () => {\n  const [hash, setHash] = useState(activeHash);\n\n  useEffect(() => {\n    listeners.add(setHash);\n\n    setHash(activeHash);\n\n    return () => {\n      listeners.delete(setHash);\n    };\n  }, []);\n\n  return hash;\n};\n\nexport const useHeadingRouteUpdates = (headingHashes: Array<string>) => {\n  const location = useLocation();\n\n  updateActiveRoute(location.hash.substring(1));\n\n  useEffect(() => {\n    const onScroll = throttle(\n      () => {\n        const offset = window.scrollY + window.innerHeight;\n        const height = document.documentElement.offsetHeight;\n\n        if (offset >= height) {\n          return updateActiveRoute(headingHashes[headingHashes.length - 1]);\n        }\n\n        const results = headingHashes\n          .map((hash) => {\n            if (hash) {\n              const headingElement = document.querySelector(`#${hash}`);\n\n              if (headingElement) {\n                return {\n                  pos:\n                    headingElement.getBoundingClientRect().top -\n                    window.innerHeight / 2,\n                  hash,\n                };\n              }\n            }\n\n            return {\n              pos: 1,\n              hash,\n            };\n          })\n          .filter(({ pos }) => pos < 0)\n          .sort(({ pos: posA }, { pos: posB }) => posB - posA);\n\n        if (results[0]) {\n          updateActiveRoute(results[0].hash);\n        }\n      },\n      50,\n      { leading: false },\n    );\n\n    window.addEventListener('scroll', onScroll);\n\n    return () => {\n      window.removeEventListener('scroll', onScroll);\n    };\n  }, headingHashes);\n};\n"
  },
  {
    "path": "site/webpack.config.js",
    "content": "const { join } = require('path');\nconst { HtmlRenderPlugin } = require('html-render-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst CopyPlugin = require('copy-webpack-plugin');\nconst { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');\nconst nodeExternals = require('webpack-node-externals');\nconst { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\nconst { pages } = require('./docs-manifest.json');\nconst legacyRoutes = require('./legacy-routes.json');\nconst targetDirectory = join(__dirname, 'dist');\n\nconst isProduction = process.env.NODE_ENV === 'production';\n\nconst htmlRenderPlugin = new HtmlRenderPlugin({\n  routes: ['', ...pages, ...legacyRoutes.map(({ from }) => from)],\n  renderConcurrency: 'parallel',\n  renderDirectory: targetDirectory,\n  mapStatsToParams: ({ webpackStats }) => {\n    const { publicPath, entrypoints } = webpackStats.toJson();\n\n    return {\n      publicPath,\n      entrypoints,\n    };\n  },\n  extraGlobals: {\n    Buffer,\n  },\n});\n\nconst publicPath = '/';\nconst mode = isProduction ? 'production' : 'development';\n\nmodule.exports = [\n  {\n    name: 'client',\n    output: {\n      filename: 'client.js',\n      path: targetDirectory,\n      publicPath: '/',\n    },\n    entry: require.resolve('./src/client.tsx'),\n    devServer: {\n      open: false,\n    },\n    mode,\n    resolve: {\n      extensions: ['.ts', '.tsx', '.js', '.json'],\n    },\n    module: {\n      rules: [\n        {\n          test: /\\.(ts|tsx|js|mdx?)$/,\n          use: [\n            {\n              loader: 'babel-loader',\n              options: {\n                babelrc: true,\n                cacheDirectory: true,\n              },\n            },\n          ],\n        },\n        {\n          test: /\\.css$/i,\n          use: [MiniCssExtractPlugin.loader, 'css-loader'],\n        },\n        {\n          test: /\\.mdx?$/,\n          use: ['mdx-loader', './code-block-loader'],\n        },\n        {\n          test: /\\.(png?)$/,\n          type: 'asset/resource',\n        },\n      ],\n    },\n    plugins: [\n      new VanillaExtractPlugin({\n        test: /\\.css\\.ts$/,\n        outputCss: true,\n      }),\n      new MiniCssExtractPlugin(),\n      htmlRenderPlugin.statsCollectorPlugin,\n      new CopyPlugin({\n        patterns: [{ from: join(__dirname, 'src/assets') }],\n      }),\n      ...(process.env.CI !== 'true' && isProduction\n        ? [\n            new BundleAnalyzerPlugin({\n              analyzerMode: 'static',\n              openAnalyzer: false,\n            }),\n          ]\n        : []),\n    ],\n    stats: 'errors-warnings',\n  },\n  {\n    name: 'render',\n    target: 'node',\n    externals: [\n      nodeExternals({\n        allowlist: [/^react-syntax-highlighter\\/dist\\/esm/, /^@docsearch\\/css/],\n      }),\n    ],\n    output: {\n      filename: 'render.js',\n      path: targetDirectory,\n      libraryExport: 'default',\n      library: 'static',\n      libraryTarget: 'umd2',\n      publicPath,\n    },\n    entry: require.resolve('./src/render.tsx'),\n    mode,\n    resolve: {\n      extensions: ['.ts', '.tsx', '.js', '.json'],\n    },\n    module: {\n      rules: [\n        {\n          test: /\\.(ts|tsx|js|mdx?)$/,\n          use: [\n            {\n              loader: 'babel-loader',\n              options: {\n                babelrc: true,\n                cacheDirectory: true,\n              },\n            },\n          ],\n        },\n        {\n          test: /\\.css$/i,\n          use: ['null-loader'],\n        },\n        {\n          test: /\\.mdx?$/,\n          use: ['mdx-loader', './code-block-loader'],\n        },\n        {\n          test: /\\.(png?)$/,\n          type: 'asset/resource',\n        },\n      ],\n    },\n    plugins: [\n      new VanillaExtractPlugin({\n        test: /\\.css\\.ts$/,\n        outputCss: false,\n      }),\n      htmlRenderPlugin.rendererPlugin,\n    ],\n    stats: 'errors-warnings',\n  },\n];\n"
  },
  {
    "path": "test-helpers/CHANGELOG.md",
    "content": "# @vanilla-extract-private/test-helpers\n\n## 0.0.55\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/esbuild-plugin@2.3.10\n  - @vanilla-extract/esbuild-plugin-next@0.0.10\n  - @vanilla-extract/parcel-transformer@1.0.9\n  - @vanilla-extract/vite-plugin@4.0.15\n  - @vanilla-extract/webpack-plugin@2.3.13\n  - @fixtures/features@0.0.31\n  - @fixtures/layers@0.0.14\n  - @fixtures/low-level@0.0.31\n  - @fixtures/next-app-router@0.0.7\n  - @fixtures/next-pages-router@0.0.7\n  - @fixtures/recipes@0.0.36\n  - @fixtures/sprinkles@0.0.36\n  - @fixtures/template-string-paths@0.0.8\n  - @fixtures/themed@0.0.31\n  - @fixtures/thirdparty@0.0.9\n  - @fixtures/unused-modules@1.0.31\n\n## 0.0.54\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/esbuild-plugin@2.3.9\n  - @vanilla-extract/esbuild-plugin-next@0.0.9\n  - @vanilla-extract/parcel-transformer@1.0.8\n  - @vanilla-extract/vite-plugin@4.0.14\n  - @vanilla-extract/webpack-plugin@2.3.12\n  - @fixtures/features@0.0.30\n  - @fixtures/layers@0.0.13\n  - @fixtures/low-level@0.0.30\n  - @fixtures/next-app-router@0.0.6\n  - @fixtures/next-pages-router@0.0.6\n  - @fixtures/recipes@0.0.35\n  - @fixtures/sprinkles@0.0.35\n  - @fixtures/template-string-paths@0.0.7\n  - @fixtures/themed@0.0.30\n  - @fixtures/thirdparty@0.0.8\n  - @fixtures/unused-modules@1.0.30\n\n## 0.0.53\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/next-app-router@0.0.5\n  - @fixtures/next-pages-router@0.0.5\n  - @fixtures/recipes@0.0.34\n\n## 0.0.52\n\n### Patch Changes\n\n- Updated dependencies [[`765b85610207992693a822fb3b1aec995ab48409`](https://github.com/vanilla-extract-css/vanilla-extract/commit/765b85610207992693a822fb3b1aec995ab48409)]:\n  - @vanilla-extract/vite-plugin@4.0.13\n\n## 0.0.51\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract/esbuild-plugin@2.3.8\n  - @vanilla-extract/esbuild-plugin-next@0.0.8\n  - @vanilla-extract/parcel-transformer@1.0.7\n  - @vanilla-extract/vite-plugin@4.0.12\n  - @vanilla-extract/webpack-plugin@2.3.11\n  - @fixtures/next-app-router@0.0.4\n  - @fixtures/next-pages-router@0.0.4\n\n## 0.0.50\n\n### Patch Changes\n\n- Updated dependencies [[`8d1731b44f8e93153c8087a533e0f9b2ed99767c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8d1731b44f8e93153c8087a533e0f9b2ed99767c)]:\n  - @vanilla-extract/vite-plugin@4.0.11\n  - @fixtures/features@0.0.29\n  - @fixtures/layers@0.0.12\n  - @fixtures/low-level@0.0.29\n  - @fixtures/next-app-router@0.0.4\n  - @fixtures/next-pages-router@0.0.4\n  - @fixtures/recipes@0.0.33\n  - @fixtures/sprinkles@0.0.34\n  - @fixtures/template-string-paths@0.0.6\n  - @fixtures/themed@0.0.29\n  - @fixtures/thirdparty@0.0.7\n  - @fixtures/unused-modules@1.0.29\n  - @vanilla-extract/esbuild-plugin@2.3.7\n  - @vanilla-extract/esbuild-plugin-next@0.0.7\n  - @vanilla-extract/parcel-transformer@1.0.6\n  - @vanilla-extract/webpack-plugin@2.3.10\n\n## 0.0.49\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/esbuild-plugin-next@0.0.6\n  - @vanilla-extract/parcel-transformer@1.0.5\n  - @vanilla-extract/esbuild-plugin@2.3.6\n  - @vanilla-extract/webpack-plugin@2.3.9\n  - @vanilla-extract/vite-plugin@4.0.10\n  - @fixtures/next-app-router@0.0.3\n  - @fixtures/next-pages-router@0.0.3\n  - @fixtures/sprinkles@0.0.33\n  - @fixtures/features@0.0.28\n  - @fixtures/themed@0.0.28\n  - @fixtures/recipes@0.0.32\n  - @fixtures/layers@0.0.11\n  - @fixtures/low-level@0.0.28\n  - @fixtures/template-string-paths@0.0.5\n  - @fixtures/thirdparty@0.0.6\n  - @fixtures/unused-modules@1.0.28\n\n## 0.0.48\n\n### Patch Changes\n\n- Updated dependencies [[`ce738ba9e9a6b5c72cc7868bed724c816ca3cc4e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ce738ba9e9a6b5c72cc7868bed724c816ca3cc4e)]:\n  - @vanilla-extract/vite-plugin@4.0.9\n\n## 0.0.47\n\n### Patch Changes\n\n- Updated dependencies [[`2232ef4aa0b8410ff791626a951a15cc03dfbb09`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2232ef4aa0b8410ff791626a951a15cc03dfbb09), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/vite-plugin@4.0.8\n  - @vanilla-extract/webpack-plugin@2.3.8\n  - @fixtures/features@0.0.27\n  - @fixtures/layers@0.0.10\n  - @fixtures/low-level@0.0.27\n  - @fixtures/next-app-router@0.0.2\n  - @fixtures/next-pages-router@0.0.2\n  - @fixtures/recipes@0.0.31\n  - @fixtures/sprinkles@0.0.32\n  - @fixtures/template-string-paths@0.0.4\n  - @fixtures/themed@0.0.27\n  - @fixtures/thirdparty@0.0.5\n  - @fixtures/unused-modules@1.0.27\n\n## 0.0.46\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.26\n  - @fixtures/layers@0.0.9\n  - @fixtures/low-level@0.0.26\n  - @fixtures/next-app-router@0.0.1\n  - @fixtures/next-pages-router@0.0.1\n  - @fixtures/recipes@0.0.30\n  - @fixtures/sprinkles@0.0.31\n  - @fixtures/template-string-paths@0.0.3\n  - @fixtures/themed@0.0.26\n  - @fixtures/thirdparty@0.0.4\n  - @fixtures/unused-modules@1.0.26\n\n## 0.0.45\n\n### Patch Changes\n\n- Updated dependencies [[`89224fe`](https://github.com/vanilla-extract-css/vanilla-extract/commit/89224fe9d68d984f818ec3d4496952e4e919a241)]:\n  - @vanilla-extract/webpack-plugin@2.3.1\n\n## 0.0.44\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/webpack-plugin@2.3.0\n  - @vanilla-extract/esbuild-plugin@2.3.0\n  - @vanilla-extract/vite-plugin@3.9.0\n  - @fixtures/features@0.0.22\n  - @fixtures/layers@0.0.5\n  - @fixtures/low-level@0.0.22\n  - @fixtures/recipes@0.0.25\n  - @fixtures/sprinkles@0.0.27\n  - @fixtures/themed@0.0.22\n  - @fixtures/unused-modules@1.0.22\n\n## 0.0.43\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/recipes@0.0.24\n\n## 0.0.42\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.21\n  - @fixtures/layers@0.0.4\n  - @fixtures/low-level@0.0.21\n  - @fixtures/recipes@0.0.23\n  - @fixtures/sprinkles@0.0.26\n  - @fixtures/themed@0.0.21\n  - @fixtures/unused-modules@1.0.21\n\n## 0.0.41\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.20\n  - @fixtures/layers@0.0.3\n  - @fixtures/low-level@0.0.20\n  - @fixtures/recipes@0.0.22\n  - @fixtures/sprinkles@0.0.25\n  - @fixtures/themed@0.0.20\n  - @fixtures/unused-modules@1.0.20\n\n## 0.0.40\n\n### Patch Changes\n\n- Updated dependencies [[`8bed6f5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8bed6f5ef36287006db458093e67bef5231e206c)]:\n  - @vanilla-extract/vite-plugin@3.8.2\n\n## 0.0.39\n\n### Patch Changes\n\n- Updated dependencies [[`0d0ea39`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0d0ea3909e7f952f24aafa4c9653853ac5841b8c)]:\n  - @vanilla-extract/vite-plugin@3.8.1\n\n## 0.0.38\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/sprinkles@0.0.24\n\n## 0.0.37\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.19\n  - @fixtures/layers@0.0.2\n  - @fixtures/low-level@0.0.19\n  - @fixtures/recipes@0.0.21\n  - @fixtures/sprinkles@0.0.23\n  - @fixtures/themed@0.0.19\n  - @fixtures/unused-modules@1.0.19\n\n## 0.0.36\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/recipes@0.0.20\n  - @fixtures/sprinkles@0.0.22\n\n## 0.0.35\n\n### Patch Changes\n\n- Updated dependencies [[`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/esbuild-plugin@2.2.2\n  - @fixtures/features@0.0.18\n  - @fixtures/low-level@0.0.18\n  - @fixtures/recipes@0.0.19\n  - @fixtures/sprinkles@0.0.21\n  - @fixtures/themed@0.0.18\n  - @fixtures/unused-modules@1.0.18\n\n## 0.0.34\n\n### Patch Changes\n\n- Updated dependencies [[`669a61f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/669a61f08cff6be69f8d0be7a270b4d9f151b8f1)]:\n  - @vanilla-extract/vite-plugin@3.8.0\n  - @fixtures/features@0.0.17\n  - @fixtures/low-level@0.0.17\n  - @fixtures/recipes@0.0.18\n  - @fixtures/sprinkles@0.0.20\n  - @fixtures/themed@0.0.17\n  - @fixtures/unused-modules@1.0.17\n\n## 0.0.33\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.16\n  - @fixtures/low-level@0.0.16\n  - @fixtures/recipes@0.0.17\n  - @fixtures/sprinkles@0.0.19\n  - @fixtures/themed@0.0.16\n  - @fixtures/unused-modules@1.0.16\n\n## 0.0.32\n\n### Patch Changes\n\n- Updated dependencies [[`cc60aa8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/cc60aa81bbb51e5b6bd3d0241ad68f3deb3b1b9a), [`2fc56e8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2fc56e851934ad99de44de012910bca20b74da69), [`a677c46`](https://github.com/vanilla-extract-css/vanilla-extract/commit/a677c46217b7860bf0f3c1ace5d39463ce7b1914)]:\n  - @vanilla-extract/esbuild-plugin@2.2.1\n  - @vanilla-extract/vite-plugin@3.7.1\n  - @fixtures/features@0.0.15\n  - @fixtures/low-level@0.0.15\n  - @fixtures/recipes@0.0.16\n  - @fixtures/sprinkles@0.0.18\n  - @fixtures/themed@0.0.15\n  - @fixtures/unused-modules@1.0.15\n\n## 0.0.31\n\n### Patch Changes\n\n- Updated dependencies [[`2eb89ae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2eb89aee99f6982b95fb823cea2c3adcb71a5798)]:\n  - @vanilla-extract/vite-plugin@3.7.0\n  - @fixtures/features@0.0.14\n  - @fixtures/low-level@0.0.14\n  - @fixtures/recipes@0.0.15\n  - @fixtures/sprinkles@0.0.17\n  - @fixtures/themed@0.0.14\n  - @fixtures/unused-modules@1.0.14\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies [[`b6aa8b6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b6aa8b628a8c0a4ac3833b2e27a40aed729845da)]:\n  - @vanilla-extract/vite-plugin@3.6.1\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0), [`9cfb9a1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9cfb9a196fb84bd9d7984c1370488fd68e7ea1d0)]:\n  - @vanilla-extract/esbuild-plugin@2.2.0\n  - @vanilla-extract/vite-plugin@3.6.0\n  - @vanilla-extract/webpack-plugin@2.2.0\n  - @fixtures/features@0.0.13\n  - @fixtures/low-level@0.0.13\n  - @fixtures/recipes@0.0.14\n  - @fixtures/sprinkles@0.0.16\n  - @fixtures/themed@0.0.13\n  - @fixtures/unused-modules@1.0.13\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies [[`ef905c3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ef905c32765232bf2e4a64c3bc193853a3c3ba4d)]:\n  - @vanilla-extract/vite-plugin@3.5.0\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies [[`ee83020`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ee830206ab493b7bc08bb629eafdae841256a177)]:\n  - @vanilla-extract/vite-plugin@3.4.0\n\n## 0.0.26\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/sprinkles@0.0.15\n\n## 0.0.25\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.12\n  - @fixtures/low-level@0.0.12\n  - @fixtures/recipes@0.0.13\n  - @fixtures/sprinkles@0.0.14\n  - @fixtures/themed@0.0.12\n  - @fixtures/unused-modules@1.0.12\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/babel-plugin@1.2.0\n  - @fixtures/features@0.0.11\n  - @fixtures/low-level@0.0.11\n  - @fixtures/recipes@0.0.12\n  - @fixtures/sprinkles@0.0.13\n  - @fixtures/themed@0.0.11\n  - @fixtures/unused-modules@1.0.11\n\n## 0.0.23\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.10\n  - @fixtures/low-level@0.0.10\n  - @fixtures/recipes@0.0.11\n  - @fixtures/sprinkles@0.0.12\n  - @fixtures/themed@0.0.10\n  - @fixtures/unused-modules@1.0.10\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`4fb9a2c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4fb9a2c544165dbc3bfbc8d0687b7589cd53e391), [`21afc23`](https://github.com/vanilla-extract-css/vanilla-extract/commit/21afc23ae552b8071fbe5d7b0c3dce07fc016ee7)]:\n  - @vanilla-extract/vite-plugin@3.3.1\n  - @vanilla-extract/webpack-plugin@2.1.12\n  - @fixtures/features@0.0.9\n  - @fixtures/low-level@0.0.9\n  - @fixtures/recipes@0.0.10\n  - @fixtures/sprinkles@0.0.11\n  - @fixtures/themed@0.0.9\n  - @fixtures/unused-modules@1.0.9\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies [[`8c4f71b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8c4f71bce455e551cdce90840b6d6dbde80ccc5b), [`8c4f71b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8c4f71bce455e551cdce90840b6d6dbde80ccc5b)]:\n  - @vanilla-extract/vite-plugin@3.3.0\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies [[`02ea735`](https://github.com/vanilla-extract-css/vanilla-extract/commit/02ea73552d1c1b9b7b9ec44be00d89413e28a97f)]:\n  - @vanilla-extract/vite-plugin@3.2.1\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`e373b51`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e373b51bfa8401e0746596adafbda350c9fad4c3)]:\n  - @vanilla-extract/esbuild-plugin@2.1.0\n  - @vanilla-extract/vite-plugin@3.2.0\n  - @vanilla-extract/babel-plugin@1.1.7\n  - @vanilla-extract/webpack-plugin@2.1.11\n  - @fixtures/features@0.0.8\n  - @fixtures/low-level@0.0.8\n  - @fixtures/recipes@0.0.9\n  - @fixtures/sprinkles@0.0.10\n  - @fixtures/themed@0.0.8\n  - @fixtures/unused-modules@1.0.8\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies [[`9b6f3ea`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9b6f3ea4160c84e48172ea01b922888dbc7f7c81), [`162b66f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/162b66fb48262182846ff71a25d541e00257672c), [`3fc5040`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3fc50406d5e57bb131eaebab42052cb1370cddff)]:\n  - @vanilla-extract/vite-plugin@3.1.7\n\n## 0.0.17\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.7\n  - @fixtures/low-level@0.0.7\n  - @fixtures/recipes@0.0.8\n  - @fixtures/sprinkles@0.0.9\n  - @fixtures/themed@0.0.7\n  - @fixtures/unused-modules@1.0.7\n\n## 0.0.16\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/sprinkles@0.0.8\n\n## 0.0.15\n\n### Patch Changes\n\n- Updated dependencies [[`f6d5337`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f6d5337ae7b955add2bb4a27ffafe1ff55b1a140)]:\n  - @vanilla-extract/vite-plugin@3.1.6\n  - @vanilla-extract/webpack-plugin@2.1.10\n  - @vanilla-extract/esbuild-plugin@2.0.5\n\n## 0.0.14\n\n### Patch Changes\n\n- Updated dependencies [[`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636), [`3c9b7d9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3c9b7d9f2f7cba8635e7459c36585109b6616636)]:\n  - @vanilla-extract/esbuild-plugin@2.0.4\n  - @vanilla-extract/webpack-plugin@2.1.9\n  - @vanilla-extract/vite-plugin@3.1.5\n  - @vanilla-extract/babel-plugin@1.1.6\n\n## 0.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`69b8460`](https://github.com/vanilla-extract-css/vanilla-extract/commit/69b846015ecada3354ea292e1276e5da560923c6)]:\n  - @vanilla-extract/webpack-plugin@2.1.8\n  - @fixtures/features@0.0.6\n  - @fixtures/low-level@0.0.6\n  - @fixtures/recipes@0.0.7\n  - @fixtures/sprinkles@0.0.7\n  - @fixtures/themed@0.0.6\n  - @fixtures/unused-modules@1.0.6\n\n## 0.0.12\n\n### Patch Changes\n\n- Updated dependencies [[`5ebca75`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5ebca758d18e7d55d0c079c00178cb14e936ac2e)]:\n  - @vanilla-extract/webpack-plugin@2.1.7\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies [[`6fa65ad`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6fa65ad60b5e2aed05f1c3ab01f12c6c8f10a730)]:\n  - @vanilla-extract/vite-plugin@3.1.4\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/recipes@0.0.6\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies [[`bec1cd8`](https://github.com/vanilla-extract-css/vanilla-extract/commit/bec1cd88d78071a995edc76a5c626f361fafcda9)]:\n  - @vanilla-extract/esbuild-plugin@2.0.3\n  - @vanilla-extract/webpack-plugin@2.1.6\n  - @vanilla-extract/babel-plugin@1.1.5\n  - @vanilla-extract/vite-plugin@3.1.3\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/sprinkles@0.0.6\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies [[`2c7abb1`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2c7abb1f981fc030decf01e460e2478ff84c4013)]:\n  - @vanilla-extract/babel-plugin@1.1.4\n  - @vanilla-extract/esbuild-plugin@2.0.2\n  - @vanilla-extract/vite-plugin@3.1.2\n  - @vanilla-extract/webpack-plugin@2.1.5\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies [[`0d7f912`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0d7f912e4f20f8aab0f8d00f797b91ae5005de4d)]:\n  - @vanilla-extract/vite-plugin@3.1.1\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`64791f3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64791f39c7090eeb301796b15218f51d43532e69)]:\n  - @vanilla-extract/vite-plugin@3.1.0\n  - @vanilla-extract/babel-plugin@1.1.3\n  - @vanilla-extract/esbuild-plugin@2.0.1\n  - @vanilla-extract/webpack-plugin@2.1.4\n  - @fixtures/features@0.0.5\n  - @fixtures/low-level@0.0.5\n  - @fixtures/recipes@0.0.5\n  - @fixtures/sprinkles@0.0.5\n  - @fixtures/themed@0.0.5\n  - @fixtures/unused-modules@1.0.5\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.4\n  - @fixtures/low-level@0.0.4\n  - @fixtures/recipes@0.0.4\n  - @fixtures/sprinkles@0.0.4\n  - @fixtures/themed@0.0.4\n  - @fixtures/unused-modules@1.0.4\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/webpack-plugin@2.1.3\n  - @fixtures/features@0.0.3\n  - @fixtures/low-level@0.0.3\n  - @fixtures/recipes@0.0.3\n  - @fixtures/sprinkles@0.0.3\n  - @fixtures/themed@0.0.3\n  - @fixtures/unused-modules@1.0.3\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @fixtures/features@0.0.2\n  - @fixtures/low-level@0.0.2\n  - @fixtures/recipes@0.0.2\n  - @fixtures/sprinkles@0.0.2\n  - @fixtures/themed@0.0.2\n  - @fixtures/unused-modules@1.0.2\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`f2d2d9e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/f2d2d9eea18dcd4ffec694f8056a78d850485592)]:\n  - @vanilla-extract/webpack-plugin@2.1.2\n  - @fixtures/features@0.0.1\n  - @fixtures/low-level@0.0.1\n  - @fixtures/recipes@0.0.1\n  - @fixtures/sprinkles@0.0.1\n  - @fixtures/themed@0.0.1\n  - @fixtures/unused-modules@1.0.1\n"
  },
  {
    "path": "test-helpers/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract-private/test-helpers\",\n  \"private\": true,\n  \"version\": \"0.0.55\",\n  \"main\": \"src/index.ts\",\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@babel/core\": \"^7.23.9\",\n    \"@fixtures/features\": \"workspace:*\",\n    \"@fixtures/layers\": \"workspace:*\",\n    \"@fixtures/low-level\": \"workspace:*\",\n    \"@fixtures/next-12-pages-router\": \"workspace:*\",\n    \"@fixtures/next-13-app-router\": \"workspace:*\",\n    \"@fixtures/next-16-app-pages-router\": \"workspace:*\",\n    \"@fixtures/recipes\": \"workspace:*\",\n    \"@fixtures/sprinkles\": \"workspace:*\",\n    \"@fixtures/template-string-paths\": \"workspace:*\",\n    \"@fixtures/themed\": \"workspace:*\",\n    \"@fixtures/thirdparty\": \"workspace:*\",\n    \"@fixtures/unused-modules\": \"workspace:*\",\n    \"@parcel/config-default\": \"^2.15.0\",\n    \"@parcel/core\": \"^2.15.0\",\n    \"@types/mini-css-extract-plugin\": \"^1.2.2\",\n    \"@types/webpack-dev-server\": \"^3.11.1\",\n    \"@vanilla-extract/esbuild-plugin\": \"workspace:*\",\n    \"@vanilla-extract/esbuild-plugin-next\": \"workspace:*\",\n    \"@vanilla-extract/parcel-transformer\": \"workspace:*\",\n    \"@vanilla-extract/vite-plugin\": \"workspace:*\",\n    \"@vanilla-extract/webpack-plugin\": \"workspace:*\",\n    \"babel-loader\": \"^10.0.0\",\n    \"css-loader\": \"^7.1.2\",\n    \"cssnano\": \"^5.1.15\",\n    \"cssnano-preset-lite\": \"^2.1.3\",\n    \"esbuild\": \"~0.27.0\",\n    \"html-webpack-plugin\": \"^5.3.1\",\n    \"mini-css-extract-plugin\": \"^2.9.4\",\n    \"minimist\": \"^1.2.5\",\n    \"portfinder\": \"^1.0.28\",\n    \"postcss\": \"^8.4.32\",\n    \"prettier\": \"^3.8.1\",\n    \"serve-handler\": \"^6.1.3\",\n    \"style-loader\": \"^2.0.0\",\n    \"vite\": \"^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0\",\n    \"vite-plugin-inspect\": \"^11.3.0\",\n    \"webpack\": \"^5.90.0\",\n    \"webpack-dev-server\": \"^5.2.2\",\n    \"webpack-merge\": \"^6.0.1\"\n  },\n  \"devDependencies\": {\n    \"@types/minimist\": \"^1\",\n    \"@types/serve-handler\": \"^6\"\n  }\n}\n"
  },
  {
    "path": "test-helpers/src/getStylesheet.ts",
    "content": "import postcss from 'postcss';\nimport prettier from 'prettier';\nimport litePreset from 'cssnano-preset-lite';\nimport cssnano from 'cssnano';\n\nexport const stylesheetName = 'main.css';\n\nexport async function getStylesheet(\n  url: string,\n  stylesheetName = 'main.css',\n): Promise<string> {\n  const response = await fetch(new URL(stylesheetName, url));\n  // Just remove comments and normalize whitespace\n  // https://cssnano.co/docs/what-are-optimisations/#what-optimisations-do-you-support%3F\n  const { css } = await postcss([cssnano({ preset: litePreset() })]).process(\n    await response.text(),\n    {\n      from: undefined,\n    },\n  );\n\n  return prettier.format(css, { parser: 'css' });\n}\n"
  },
  {
    "path": "test-helpers/src/index.ts",
    "content": "export * from './startFixture';\nexport * from './startFixture/next';\nexport * from './getStylesheet';\n\nexport const getTestNodes = (fixture: string) =>\n  require(`@fixtures/${fixture}/test-nodes.json`);\n"
  },
  {
    "path": "test-helpers/src/startFixture/esbuild.ts",
    "content": "import path from 'path';\nimport { existsSync, promises as fs } from 'fs';\n\nimport { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';\nimport { vanillaExtractPlugin as vanillaExtractPluginNext } from '@vanilla-extract/esbuild-plugin-next';\nimport * as esbuild from 'esbuild';\n\nimport type { TestServer } from './types';\n\nexport interface EsbuildFixtureOptions {\n  type: 'esbuild' | 'esbuild-runtime' | 'esbuild-next' | 'esbuild-next-runtime';\n  mode?: 'development' | 'production';\n  port: number;\n}\n\nexport const startEsbuildFixture = async (\n  fixtureName: string,\n  { type, mode = 'development', port = 3000 }: EsbuildFixtureOptions,\n): Promise<TestServer> => {\n  const plugin = type.includes('next')\n    ? vanillaExtractPluginNext\n    : vanillaExtractPlugin;\n  const entry = require.resolve(`@fixtures/${fixtureName}/src/index.ts`);\n  const absWorkingDir = path.dirname(\n    require.resolve(`@fixtures/${fixtureName}/package.json`),\n  );\n  const outdir = path.join(absWorkingDir, 'dist', type, fixtureName);\n\n  if (existsSync(outdir)) {\n    await fs.rm(outdir, { recursive: true });\n  }\n\n  await fs.mkdir(outdir, { recursive: true });\n\n  const ctx = await esbuild.context({\n    entryPoints: [entry],\n    metafile: true,\n    platform: 'browser',\n    bundle: true,\n    minify: false,\n    logLevel: 'error',\n    plugins: [\n      plugin({\n        identifiers: mode === 'production' ? 'short' : 'debug',\n        runtime: type.includes('runtime'),\n      }),\n    ],\n    absWorkingDir,\n    outdir,\n  });\n\n  await ctx.watch();\n\n  const server = await ctx.serve({ servedir: outdir, port });\n\n  const esbuildLiveReloadScript = `\n    <script type=\"module\">\n      new EventSource('/esbuild').addEventListener('change', () =>\n      location.reload(),\n      );\n    </script>`;\n\n  await fs.writeFile(\n    path.join(outdir, 'index.html'),\n    `<!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n      <meta charset=\"utf-8\">\n      <title>esbuild - ${fixtureName}</title>\n      <link rel=\"stylesheet\" type=\"text/css\" href=\"index.css\" />\n      ${mode !== 'production' ? esbuildLiveReloadScript : ''}\n      </head>\n    <body>\n      <script src=\"index.js\"></script>\n    </body>\n    </html>\n  `,\n  );\n\n  return {\n    type: 'esbuild',\n    url: `http://${server.hosts[0]}:${port}`,\n    stylesheet: 'index.css',\n    close: () => {\n      ctx.dispose();\n\n      return Promise.resolve();\n    },\n  };\n};\n"
  },
  {
    "path": "test-helpers/src/startFixture/index.ts",
    "content": "import portfinder from 'portfinder';\n\nimport { startWebpackFixture, type WebpackFixtureOptions } from './webpack';\nimport { startEsbuildFixture, type EsbuildFixtureOptions } from './esbuild';\nimport { startViteFixture, type ViteFixtureOptions } from './vite';\nimport { startParcelFixture, type ParcelFixtureOptions } from './parcel';\nimport { type NextFixtureOptions, startNextFixture } from './next';\n\nimport type { TestServer } from './types';\n\nexport * from './types';\n\ntype SharedOptions = {\n  basePort: number;\n};\n\ntype FixtureOptions = SharedOptions &\n  Omit<\n    | EsbuildFixtureOptions\n    | WebpackFixtureOptions\n    | ViteFixtureOptions\n    | ParcelFixtureOptions\n    | NextFixtureOptions,\n    'port'\n  >;\nexport async function startFixture(\n  fixtureName: string,\n  { type, basePort, ...options }: FixtureOptions,\n): Promise<TestServer> {\n  const port = await portfinder.getPortPromise({ port: basePort });\n\n  console.log(\n    [\n      `Starting ${fixtureName} fixture`,\n      ...Object.entries({\n        type,\n        port,\n        ...options,\n      }).map(([key, value]) => `- ${key}: ${value}`),\n    ].join('\\n'),\n  );\n\n  if (\n    type === 'esbuild' ||\n    type === 'esbuild-runtime' ||\n    type === 'esbuild-next' ||\n    type === 'esbuild-next-runtime'\n  ) {\n    return startEsbuildFixture(fixtureName, {\n      type,\n      port,\n      mode: options.mode,\n    });\n  }\n\n  if (type === 'vite') {\n    return startViteFixture(fixtureName, {\n      type,\n      port,\n      mode: options.mode,\n    });\n  }\n\n  if (type === 'parcel') {\n    return startParcelFixture(fixtureName, {\n      type,\n      port,\n      mode: options.mode,\n    });\n  }\n\n  if (\n    type === 'next-12-pages-router' ||\n    type === 'next-13-app-router' ||\n    type === 'next-16-app-pages-router'\n  ) {\n    return startNextFixture({\n      type,\n      port,\n      mode: options.mode,\n    });\n  }\n\n  return startWebpackFixture(fixtureName, { type, ...options, port });\n}\n"
  },
  {
    "path": "test-helpers/src/startFixture/next.ts",
    "content": "import type {\n  NextServer,\n  NextServerOptions,\n} from '@fixtures/next-12-pages-router/node_modules/next/dist/server/next';\nimport { existsSync } from 'fs';\nimport { Server as _Server, createServer } from 'http';\nimport path from 'path';\n\nimport type { TestServer } from './types';\nimport { serveAssets } from './vite';\n\ntype Server = _Server & {\n  __app?: NextServer;\n};\n\nconst DIST_DIR = 'dist';\n\n// these are the fixtures that are currently\n// configured as routes in the @fixtures/next-* apps\nexport const nextFixtures = ['sprinkles', 'recipes', 'features'] as const;\n\nexport interface NextFixtureOptions {\n  type:\n    | 'next-13-app-router'\n    | 'next-12-pages-router'\n    | 'next-16-app-pages-router';\n  mode?: 'development' | 'production';\n  port: number;\n}\n\nconst startNextServer = async (app: NextServer) => {\n  await app.prepare();\n  const handler = app.getRequestHandler();\n  const server = createServer(handler) as Server;\n  server['__app'] = app;\n\n  server.listen(app.port, () => {\n    console.log(`> Next ready on http://${app.hostname}:${app.port}`);\n  });\n\n  return server;\n};\n\nconst stopNextApp = async (server: Server) => {\n  if (server['__app']) {\n    await server['__app'].close();\n  }\n\n  await new Promise<void>((resolve) => {\n    server.close(() => {\n      resolve();\n    });\n  });\n};\n\nconst startNextApp = async (\n  options: NextServerOptions,\n  type: NextFixtureOptions['type'],\n) => {\n  const { dir, dev } = options;\n\n  const nextServer = await import(\n    path.join(dir!, 'node_modules', 'next', 'dist', 'server', 'next')\n  );\n\n  if (!dev) {\n    const buildId = existsSync(path.join(dir!, DIST_DIR, 'BUILD_ID'));\n\n    if (!buildId) {\n      throw new Error(`No production build found for ${type} in ${dir}/${DIST_DIR}\n      Please run pnpm test:build-next from the root.`);\n    }\n  }\n\n  const app = nextServer.default(options) as NextServer;\n\n  const server = await startNextServer(app);\n  return server;\n};\n\nconst getNextDir = (type: NextFixtureOptions['type']) =>\n  path.dirname(require.resolve(`@fixtures/${type}/package.json`));\n\nexport const startNextFixture = async ({\n  type,\n  mode = 'development',\n  port = 3000,\n}: NextFixtureOptions): Promise<TestServer> => {\n  const dev = mode !== 'production';\n  const hostname = 'localhost';\n  const url = `http://${hostname}:${port}`;\n\n  const nextDir = getNextDir(type);\n\n  // using export mode for production build in next 13\n  // due to issues with the distDir config not being set\n  // properly.\n  if (!dev && type === 'next-13-app-router') {\n    // Use vite to server the static build.\n    const closeServer = await serveAssets({\n      port,\n      dir: path.join(nextDir, DIST_DIR),\n    });\n    return {\n      type,\n      url,\n      close: closeServer,\n    };\n  }\n\n  process.env.NODE_ENV = mode;\n\n  const nextConfig = await import(path.join(nextDir, 'next.config.js'));\n\n  const options: NextServerOptions = {\n    dir: nextDir,\n    dev,\n    port,\n    hostname,\n    quiet: true,\n    conf: {\n      // we need to differentiate prod and dev folders\n      // so they don't overwrite eachother when running tests\n      ...nextConfig.default,\n      distDir: dev ? '.next' : DIST_DIR,\n    },\n  };\n\n  const server = await startNextApp(options, type);\n\n  return {\n    type,\n    url,\n    close: async () => await stopNextApp(server),\n  };\n};\n"
  },
  {
    "path": "test-helpers/src/startFixture/parcel-config.json",
    "content": "{\n  \"extends\": \"@parcel/config-default\",\n  \"transformers\": {\n    \"*.css.ts\": [\"@vanilla-extract/parcel-transformer\"]\n  }\n}\n"
  },
  {
    "path": "test-helpers/src/startFixture/parcel.ts",
    "content": "import path from 'path';\n\nimport { Parcel } from '@parcel/core';\n\nimport type { TestServer } from './types';\n\nexport interface ParcelFixtureOptions {\n  type: 'parcel';\n  mode?: 'development' | 'production';\n  port: number;\n}\nexport const startParcelFixture = async (\n  fixtureName: string,\n  { mode = 'development', port = 3000 }: ParcelFixtureOptions,\n): Promise<TestServer> => {\n  const entry = require.resolve(`@fixtures/${fixtureName}/index.html`);\n  const absWorkingDir = path.dirname(\n    require.resolve(`@fixtures/${fixtureName}/package.json`),\n  );\n  const distDir = path.join(absWorkingDir, 'dist');\n\n  const bundler = new Parcel({\n    entries: entry,\n    mode,\n    config: require.resolve('./parcel-config.json'),\n    serveOptions: {\n      port,\n    },\n    defaultTargetOptions: {\n      distDir,\n      shouldOptimize: false,\n    },\n    shouldDisableCache: true,\n    logLevel: 'verbose',\n  });\n\n  // Not sure how to remove the `async` here\n  // oxlint-disable-next-line no-async-promise-executor\n  return new Promise(async (resolve, reject) => {\n    const subscription = await bundler.watch((err, buildEvent) => {\n      if (err) {\n        console.error(err);\n        return reject(err);\n      }\n\n      if (buildEvent?.type === 'buildFailure') {\n        console.error('Build event diagnostics:', buildEvent.diagnostics);\n        return reject(buildEvent.diagnostics[0]);\n      }\n\n      if (buildEvent?.type === 'buildSuccess') {\n        const cssBundle = buildEvent.bundleGraph\n          .getBundles()\n          .find((bundle) => bundle.type === 'css');\n\n        const stylesheet = cssBundle?.filePath.substring(distDir.length + 1);\n\n        resolve({\n          type: 'parcel',\n          url: `http://localhost:${port}`,\n          stylesheet,\n          close: async () => {\n            await subscription.unsubscribe();\n          },\n        });\n      }\n    });\n  });\n};\n"
  },
  {
    "path": "test-helpers/src/startFixture/types.ts",
    "content": "import type { EsbuildFixtureOptions } from './esbuild';\nimport type { NextFixtureOptions } from './next';\nimport type { ParcelFixtureOptions } from './parcel';\nimport type { ViteFixtureOptions } from './vite';\nimport type { WebpackFixtureOptions } from './webpack';\n\ntype BuildType =\n  | WebpackFixtureOptions['type']\n  | EsbuildFixtureOptions['type']\n  | ViteFixtureOptions['type']\n  | ParcelFixtureOptions['type']\n  | NextFixtureOptions['type'];\n\nexport interface TestServer {\n  type: BuildType;\n  url: string;\n  close: () => Promise<void>;\n  stylesheet?: string;\n}\n"
  },
  {
    "path": "test-helpers/src/startFixture/vite.ts",
    "content": "import path from 'path';\nimport http from 'http';\n\nimport type { InlineConfig } from 'vite';\nimport handler from 'serve-handler';\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\nimport inspect from 'vite-plugin-inspect';\n\nimport type { TestServer } from './types';\n\nexport const serveAssets = ({ port, dir }: { port: number; dir: string }) =>\n  new Promise<() => Promise<void>>((resolve) => {\n    const server = http.createServer((request, response) => {\n      return handler(request, response, {\n        public: dir,\n      });\n    });\n\n    server.listen(port, () => {\n      resolve(\n        () =>\n          new Promise<void>((closeRes) => {\n            server.close(() => closeRes());\n          }),\n      );\n    });\n  });\n\nexport interface ViteFixtureOptions {\n  type: 'vite';\n  mode?: 'development' | 'production';\n  port: number;\n}\nexport const startViteFixture = async (\n  fixtureName: string,\n  { mode = 'development', port = 3000 }: ViteFixtureOptions,\n): Promise<TestServer> => {\n  const root = path.dirname(\n    require.resolve(`@fixtures/${fixtureName}/package.json`),\n  );\n\n  const config: InlineConfig = {\n    configFile: false,\n    root,\n    logLevel: 'error',\n    plugins: [vanillaExtractPlugin(), mode === 'development' && inspect()],\n    server: {\n      port,\n      strictPort: true,\n    },\n    build: {\n      cssCodeSplit: false,\n      minify: false,\n    },\n  };\n\n  const { createServer, build } = await import('vite');\n\n  if (mode === 'development') {\n    const server = await createServer(config);\n\n    await server.listen();\n\n    return {\n      type: 'vite',\n      url: `http://localhost:${port}`,\n      close: () => {\n        return server.close();\n      },\n    };\n  }\n\n  const result = await build(config);\n  const closeServer = await serveAssets({ port, dir: path.join(root, 'dist') });\n\n  if (!('output' in result)) {\n    throw new Error('Unexpected build output');\n  }\n\n  const { fileName: stylesheet } =\n    result.output.find((asset) => asset.name?.endsWith('.css')) || {};\n\n  return {\n    type: 'vite',\n    url: `http://localhost:${port}`,\n    stylesheet,\n    close: closeServer,\n  };\n};\n"
  },
  {
    "path": "test-helpers/src/startFixture/webpack.ts",
    "content": "import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';\nimport WDS from 'webpack-dev-server';\nimport webpack, { type Configuration } from 'webpack';\nimport webpackMerge from 'webpack-merge';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport MiniCssExtractPlugin from 'mini-css-extract-plugin';\n\nimport { stylesheetName } from '../getStylesheet';\nimport type { TestServer } from './types';\n\nexport const getTestNodes = (fixture: string) =>\n  require(`@fixtures/${fixture}/test-nodes.json`);\n\nconst defaultWebpackConfig: Configuration = {\n  resolve: {\n    extensions: ['.js', '.json', '.ts', '.tsx'],\n  },\n  devtool: 'source-map',\n  optimization: {\n    minimize: false,\n  },\n  output: {\n    // For less noisy CSS snapshots\n    // https://webpack.js.org/configuration/output/#outputpathinfo\n    pathinfo: false,\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new MiniCssExtractPlugin({\n      filename: stylesheetName,\n    }),\n  ],\n};\n\nexport interface WebpackFixtureOptions {\n  type: 'browser' | 'mini-css-extract' | 'style-loader';\n  hot?: boolean;\n  mode?: 'development' | 'production';\n  port: number;\n  logLevel?: Configuration['stats'];\n}\nexport const startWebpackFixture = (\n  fixtureName: string,\n  {\n    type = 'mini-css-extract',\n    hot = false,\n    mode = 'development',\n    port,\n    logLevel = 'errors-only',\n  }: WebpackFixtureOptions,\n): Promise<TestServer> =>\n  new Promise((resolve) => {\n    const fixtureEntry = require.resolve(\n      `@fixtures/${fixtureName}/src/index.ts`,\n    );\n    const config = webpackMerge<Configuration>(defaultWebpackConfig, {\n      entry: fixtureEntry,\n      infrastructureLogging: {\n        level: 'none',\n      },\n      mode,\n      module: {\n        rules: [\n          {\n            test: /\\.vanilla\\.css$/i,\n            use: [\n              type === 'mini-css-extract'\n                ? MiniCssExtractPlugin.loader\n                : require.resolve('style-loader'),\n              {\n                loader: require.resolve('css-loader'),\n                options: {\n                  url: false,\n                },\n              },\n            ],\n          },\n          {\n            test: /\\.(js|ts|tsx)$/,\n            exclude: [/node_modules/],\n            use: [\n              {\n                loader: require.resolve('babel-loader'),\n                options: {\n                  babelrc: false,\n                  presets: [\n                    [\n                      require.resolve('@babel/preset-env'),\n                      { bugfixes: true, targets: 'last 2 Chrome versions' },\n                    ],\n                    require.resolve('@babel/preset-typescript'),\n                    [\n                      require.resolve('@babel/preset-react'),\n                      { runtime: 'automatic' },\n                    ],\n                  ],\n                },\n              },\n            ],\n          },\n        ],\n      },\n      plugins: type !== 'browser' ? [new VanillaExtractPlugin()] : undefined,\n    });\n    const compiler = webpack(config);\n\n    const server = new WDS(\n      {\n        hot,\n        onListening: () => {\n          resolve({\n            url: `http://localhost:${port}`,\n            close: () =>\n              new Promise<void>((resolveClose) =>\n                server.stopCallback(() => {\n                  compiler.close(() => resolveClose());\n                }),\n              ),\n            type,\n            stylesheet: 'main.css',\n          });\n        },\n        port,\n        devMiddleware: {\n          stats: logLevel,\n        },\n      },\n      compiler,\n    );\n\n    server.startCallback((err) => {\n      console.log('Started webpack-dev-server');\n\n      if (err) {\n        throw err;\n      }\n    });\n  });\n"
  },
  {
    "path": "test-helpers/src/startFixtureCLI.ts",
    "content": "import parseArgs from 'minimist';\nimport { startFixture } from './startFixture';\n\nconst {\n  _: [fixtureName],\n  type,\n  hot,\n  mode,\n} = parseArgs(process.argv.slice(2));\n\nstartFixture(fixtureName, { type, hot, mode } as any).then((server) => {\n  // eslint-disable-next-line no-console\n  console.log('Fixture running on', server.url);\n});\n"
  },
  {
    "path": "tests/CHANGELOG.md",
    "content": "# @vanilla-extract-private/tests\n\n## 0.0.58\n\n### Patch Changes\n\n- Updated dependencies [[`96dd466127374b21ad7e48e5dd168a03a96af047`](https://github.com/vanilla-extract-css/vanilla-extract/commit/96dd466127374b21ad7e48e5dd168a03a96af047), [`6432199fa0717f424fb3f45fbe36410b03b01c1c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6432199fa0717f424fb3f45fbe36410b03b01c1c)]:\n  - @vanilla-extract/integration@7.1.9\n  - @vanilla-extract/css@1.15.5\n  - @vanilla-extract/dynamic@2.1.2\n  - @vanilla-extract/recipes@0.5.5\n  - @vanilla-extract/sprinkles@1.6.3\n  - @vanilla-extract-private/test-helpers@0.0.55\n\n## 0.0.57\n\n### Patch Changes\n\n- Updated dependencies [[`6668e9e069276b0fd9ccd9668403b4eeb840a11b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/6668e9e069276b0fd9ccd9668403b4eeb840a11b), [`61878f5fb21a33190ef242551c639e216ba4748a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/61878f5fb21a33190ef242551c639e216ba4748a)]:\n  - @vanilla-extract/integration@7.1.8\n  - @vanilla-extract/css@1.15.4\n  - @vanilla-extract/private@1.0.6\n  - @vanilla-extract/recipes@0.5.5\n  - @vanilla-extract/sprinkles@1.6.3\n  - @vanilla-extract/dynamic@2.1.2\n  - @vanilla-extract-private/test-helpers@0.0.54\n\n## 0.0.56\n\n### Patch Changes\n\n- Updated dependencies [[`2a7acc989fba707220186f2d0b824bc4cc37ad66`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2a7acc989fba707220186f2d0b824bc4cc37ad66)]:\n  - @vanilla-extract/recipes@0.5.4\n  - @vanilla-extract-private/test-helpers@0.0.53\n\n## 0.0.55\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.52\n\n## 0.0.54\n\n### Patch Changes\n\n- Updated dependencies [[`124c31c2d9fee24d937c4626cec524d527d4e55e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/124c31c2d9fee24d937c4626cec524d527d4e55e)]:\n  - @vanilla-extract/integration@7.1.7\n  - @vanilla-extract-private/test-helpers@0.0.51\n\n## 0.0.53\n\n### Patch Changes\n\n- Updated dependencies [[`b86f3f59c86420e12593996a14f8cdb5db2f7c25`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b86f3f59c86420e12593996a14f8cdb5db2f7c25), [`99e974b2ae56e1e851b376988216b7bd30813813`](https://github.com/vanilla-extract-css/vanilla-extract/commit/99e974b2ae56e1e851b376988216b7bd30813813)]:\n  - @vanilla-extract/css@1.15.3\n  - @vanilla-extract/dynamic@2.1.1\n  - @vanilla-extract/integration@7.1.6\n  - @vanilla-extract/recipes@0.5.3\n  - @vanilla-extract/sprinkles@1.6.2\n  - @vanilla-extract-private/test-helpers@0.0.50\n\n## 0.0.52\n\n### Patch Changes\n\n- Updated dependencies [[`b8a99e4980710a34692034d5da43e584edbc3d17`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b8a99e4980710a34692034d5da43e584edbc3d17)]:\n  - @vanilla-extract/integration@7.1.5\n  - @vanilla-extract/sprinkles@1.6.2\n  - @vanilla-extract/dynamic@2.1.1\n  - @vanilla-extract/private@1.0.5\n  - @vanilla-extract/recipes@0.5.3\n  - @vanilla-extract/css@1.15.2\n  - @vanilla-extract-private/test-helpers@0.0.49\n\n## 0.0.51\n\n### Patch Changes\n\n- Updated dependencies [[`5e06ada9309c46b20d318051f80121886da4ff29`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5e06ada9309c46b20d318051f80121886da4ff29), [`5e06ada9309c46b20d318051f80121886da4ff29`](https://github.com/vanilla-extract-css/vanilla-extract/commit/5e06ada9309c46b20d318051f80121886da4ff29)]:\n  - @vanilla-extract/integration@7.1.4\n\n## 0.0.50\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.48\n\n## 0.0.49\n\n### Patch Changes\n\n- Updated dependencies [[`606660618dc5efa6c529f77cebf9d2b8dc379dbd`](https://github.com/vanilla-extract-css/vanilla-extract/commit/606660618dc5efa6c529f77cebf9d2b8dc379dbd), [`e58cf9013c6f6cdfacb2a7936b3354e71138e9fb`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e58cf9013c6f6cdfacb2a7936b3354e71138e9fb), [`3df9b4ebc5ad7e03e5c908c10216447b7089132a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3df9b4ebc5ad7e03e5c908c10216447b7089132a)]:\n  - @vanilla-extract/integration@7.1.3\n  - @vanilla-extract/css@1.15.1\n  - @vanilla-extract/dynamic@2.1.0\n  - @vanilla-extract-private/test-helpers@0.0.47\n\n## 0.0.48\n\n### Patch Changes\n\n- Updated dependencies [[`df9fe3ee3fc0057bc14a2333a405f8229f80c214`](https://github.com/vanilla-extract-css/vanilla-extract/commit/df9fe3ee3fc0057bc14a2333a405f8229f80c214)]:\n  - @vanilla-extract/css@1.15.0\n  - @vanilla-extract/dynamic@2.1.0\n  - @vanilla-extract-private/test-helpers@0.0.46\n\n## 0.0.47\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.45\n\n## 0.0.46\n\n### Patch Changes\n\n- Updated dependencies [[`53fd2a6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/53fd2a6a3387a47745387f792d723deaf37d84a2)]:\n  - @vanilla-extract/integration@6.2.2\n\n## 0.0.45\n\n### Patch Changes\n\n- Updated dependencies [[`e391bae`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e391baec32463c60503f631ace578a71952f8180)]:\n  - @vanilla-extract/css@1.13.0\n  - @vanilla-extract-private/test-helpers@0.0.44\n\n## 0.0.44\n\n### Patch Changes\n\n- Updated dependencies [[`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb), [`fd5fac5`](https://github.com/vanilla-extract-css/vanilla-extract/commit/fd5fac56573c65f3cd9326cfaa1d2835a7212bcb)]:\n  - @vanilla-extract/recipes@0.5.0\n  - @vanilla-extract-private/test-helpers@0.0.43\n\n## 0.0.43\n\n### Patch Changes\n\n- Updated dependencies [[`001be83`](https://github.com/vanilla-extract-css/vanilla-extract/commit/001be8338a869f41acf19091707a2e097fd80de3), [`8a35dff`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8a35dff7f8b4f75691b7ba6ecdc98f45d6e8c5f4)]:\n  - @vanilla-extract/css@1.12.0\n  - @vanilla-extract/sprinkles@1.6.1\n  - @vanilla-extract-private/test-helpers@0.0.42\n\n## 0.0.42\n\n### Patch Changes\n\n- Updated dependencies [[`8b1c965`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8b1c9651112edd9fa294e8ffbb8c873c6ab18cc7)]:\n  - @vanilla-extract/css@1.11.1\n  - @vanilla-extract-private/test-helpers@0.0.41\n\n## 0.0.41\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.40\n\n## 0.0.40\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.39\n\n## 0.0.39\n\n### Patch Changes\n\n- Updated dependencies [[`d33aa4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d33aa4a2c6422803967bf4ff1131d1a86a35797d)]:\n  - @vanilla-extract/sprinkles@1.6.0\n  - @vanilla-extract-private/test-helpers@0.0.38\n\n## 0.0.38\n\n### Patch Changes\n\n- Updated dependencies [[`ece5fc3`](https://github.com/vanilla-extract-css/vanilla-extract/commit/ece5fc3130020aa2fdde5b0075b17695bb082b01)]:\n  - @vanilla-extract/css@1.11.0\n  - @vanilla-extract-private/test-helpers@0.0.37\n\n## 0.0.37\n\n### Patch Changes\n\n- Updated dependencies [[`3163abc`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3163abc75c2e280e96989f732e4e5e60e4941eff), [`4e8377b`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4e8377bdcfb8ffa237f94da67624458a8ff3b2b5), [`8365959`](https://github.com/vanilla-extract-css/vanilla-extract/commit/836595943eb21f97400986a123788ec46f165139)]:\n  - @vanilla-extract/recipes@0.4.0\n  - @vanilla-extract/sprinkles@1.5.2\n  - @vanilla-extract-private/test-helpers@0.0.36\n\n## 0.0.36\n\n### Patch Changes\n\n- Updated dependencies [[`7e876b6`](https://github.com/vanilla-extract-css/vanilla-extract/commit/7e876b6f114e700c91734d79579863b83147231e)]:\n  - @vanilla-extract/integration@6.2.1\n\n## 0.0.35\n\n### Patch Changes\n\n- Updated dependencies [[`45d3b86`](https://github.com/vanilla-extract-css/vanilla-extract/commit/45d3b86960027cdfa81989f8e2036a6768cc1e1d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d), [`49ff399`](https://github.com/vanilla-extract-css/vanilla-extract/commit/49ff399bf5bf23236b5574f37b4b79058678041d)]:\n  - @vanilla-extract/integration@6.2.0\n  - @vanilla-extract/css@1.10.0\n  - @vanilla-extract-private/test-helpers@0.0.35\n\n## 0.0.34\n\n### Patch Changes\n\n- Updated dependencies [[`3b724b9`](https://github.com/vanilla-extract-css/vanilla-extract/commit/3b724b973a79d85cd4b5ab3e34fe312610c5b2da)]:\n  - @vanilla-extract/css@1.9.5\n  - @vanilla-extract-private/test-helpers@0.0.34\n\n## 0.0.33\n\n### Patch Changes\n\n- Updated dependencies [[`d02684e`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d02684e1bf0e8b4f51ab2a273233ada9df57ebc9)]:\n  - @vanilla-extract/css@1.9.4\n  - @vanilla-extract-private/test-helpers@0.0.33\n\n## 0.0.32\n\n### Patch Changes\n\n- Updated dependencies [[`4ecdcd7`](https://github.com/vanilla-extract-css/vanilla-extract/commit/4ecdcd727302a51d2428031e96bd48011d387c8b)]:\n  - @vanilla-extract/css@1.9.3\n  - @vanilla-extract-private/test-helpers@0.0.32\n\n## 0.0.31\n\n### Patch Changes\n\n- 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), [`0906063`](https://github.com/vanilla-extract-css/vanilla-extract/commit/09060639099ec580ac90cac48c3b79f0177ecfcd)]:\n  - @vanilla-extract/css@1.9.2\n  - @vanilla-extract/sprinkles@1.5.1\n  - @vanilla-extract/dynamic@2.0.3\n  - @vanilla-extract/recipes@0.3.0\n  - @vanilla-extract-private/test-helpers@0.0.31\n\n## 0.0.30\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.30\n\n## 0.0.29\n\n### Patch Changes\n\n- Updated dependencies [[`9191d5a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/9191d5adcdd4d129affdf5482659120e03a3d003), [`b53558a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b53558a3872987282b23d62b0063e4d789a379f9)]:\n  - @vanilla-extract/css@1.9.1\n  - @vanilla-extract-private/test-helpers@0.0.29\n\n## 0.0.28\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.28\n\n## 0.0.27\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.27\n\n## 0.0.26\n\n### Patch Changes\n\n- Updated dependencies [[`009e122`](https://github.com/vanilla-extract-css/vanilla-extract/commit/009e122693b92834125b6ca14b30fee5e626e245)]:\n  - @vanilla-extract/sprinkles@1.5.0\n  - @vanilla-extract-private/test-helpers@0.0.26\n\n## 0.0.25\n\n### Patch Changes\n\n- 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)]:\n  - @vanilla-extract/css@1.9.0\n  - @vanilla-extract-private/test-helpers@0.0.25\n\n## 0.0.24\n\n### Patch Changes\n\n- Updated dependencies [[`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba), [`b0b3662`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b0b36626de328a8dcc5c0301d50099fbe77a5cba)]:\n  - @vanilla-extract/css@1.8.0\n  - @vanilla-extract-private/test-helpers@0.0.24\n\n## 0.0.23\n\n### Patch Changes\n\n- Updated dependencies [[`412962f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/412962fff737a6f7c80f26d347076c31cbd5905b)]:\n  - @vanilla-extract/css@1.7.4\n  - @vanilla-extract-private/test-helpers@0.0.23\n\n## 0.0.22\n\n### Patch Changes\n\n- Updated dependencies [[`2e9d21c`](https://github.com/vanilla-extract-css/vanilla-extract/commit/2e9d21c718ba57daa83c5ee323871ffa6ced5d47)]:\n  - @vanilla-extract/css@1.7.3\n  - @vanilla-extract-private/test-helpers@0.0.22\n\n## 0.0.21\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.21\n\n## 0.0.20\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.20\n\n## 0.0.19\n\n### Patch Changes\n\n- Updated dependencies [[`8467fc2`](https://github.com/vanilla-extract-css/vanilla-extract/commit/8467fc28707372f30d8b6239580244c06859a605)]:\n  - @vanilla-extract/css@1.7.2\n  - @vanilla-extract-private/test-helpers@0.0.19\n\n## 0.0.18\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.18\n\n## 0.0.17\n\n### Patch Changes\n\n- Updated dependencies [[`e531251`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e531251689b8795eebd316ae8385f1ecc5b9b8a0), [`64378b0`](https://github.com/vanilla-extract-css/vanilla-extract/commit/64378b083ed6fb54f073e77b62fefee673602742)]:\n  - @vanilla-extract/css@1.7.1\n  - @vanilla-extract/recipes@0.2.5\n  - @vanilla-extract-private/test-helpers@0.0.17\n\n## 0.0.16\n\n### Patch Changes\n\n- Updated dependencies [[`98ab94a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/98ab94a99fa7dbee395a7ae6ea4af24c7b1bd7ab)]:\n  - @vanilla-extract/sprinkles@1.4.1\n  - @vanilla-extract-private/test-helpers@0.0.16\n\n## 0.0.15\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.15\n\n## 0.0.14\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.14\n\n## 0.0.13\n\n### Patch Changes\n\n- Updated dependencies [[`32f309f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/32f309faad90e927efc7a277d4208480c8b5122c)]:\n  - @vanilla-extract/css@1.7.0\n  - @vanilla-extract-private/test-helpers@0.0.13\n\n## 0.0.12\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.12\n\n## 0.0.11\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.11\n\n## 0.0.10\n\n### Patch Changes\n\n- Updated dependencies [[`d91ddde`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d91dddeb0d57f2322a6e3c1936cde2a2771d7414)]:\n  - @vanilla-extract/recipes@0.2.4\n  - @vanilla-extract-private/test-helpers@0.0.10\n\n## 0.0.9\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.9\n\n## 0.0.8\n\n### Patch Changes\n\n- Updated dependencies [[`81a3d98`](https://github.com/vanilla-extract-css/vanilla-extract/commit/81a3d98b3fb36660406a59049e1cd464418b00fc)]:\n  - @vanilla-extract/sprinkles@1.4.0\n  - @vanilla-extract-private/test-helpers@0.0.8\n\n## 0.0.7\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.7\n\n## 0.0.6\n\n### Patch Changes\n\n- Updated dependencies []:\n  - @vanilla-extract-private/test-helpers@0.0.6\n\n## 0.0.5\n\n### Patch Changes\n\n- Updated dependencies [[`b294764`](https://github.com/vanilla-extract-css/vanilla-extract/commit/b294764b7f3401cec88760894ff19c60ca1d4d1d)]:\n  - @vanilla-extract/css@1.6.8\n  - @vanilla-extract/dynamic@2.0.2\n  - @vanilla-extract/recipes@0.2.3\n  - @vanilla-extract/sprinkles@1.3.3\n  - @vanilla-extract-private/test-helpers@0.0.5\n\n## 0.0.4\n\n### Patch Changes\n\n- Updated dependencies [[`e3dfd4a`](https://github.com/vanilla-extract-css/vanilla-extract/commit/e3dfd4a54a66ebb3a3cacc0fcc94d2689f97bb40)]:\n  - @vanilla-extract/css@1.6.7\n  - @vanilla-extract-private/test-helpers@0.0.4\n\n## 0.0.3\n\n### Patch Changes\n\n- Updated dependencies [[`d15e783`](https://github.com/vanilla-extract-css/vanilla-extract/commit/d15e783c960144e3b3ca74128cb2d04fbbc16df1)]:\n  - @vanilla-extract/css@1.6.6\n  - @vanilla-extract/dynamic@2.0.1\n  - @vanilla-extract/recipes@0.2.2\n  - @vanilla-extract/sprinkles@1.3.2\n  - @vanilla-extract-private/test-helpers@0.0.3\n\n## 0.0.2\n\n### Patch Changes\n\n- Updated dependencies [[`16c960f`](https://github.com/vanilla-extract-css/vanilla-extract/commit/16c960f32a011580eb6c4d0a45479fc28729e762)]:\n  - @vanilla-extract/css@1.6.5\n  - @vanilla-extract-private/test-helpers@0.0.2\n\n## 0.0.1\n\n### Patch Changes\n\n- Updated dependencies [[`0c1ec7d`](https://github.com/vanilla-extract-css/vanilla-extract/commit/0c1ec7d5bfa5c4e66b4655c4f417f2751af7b3e3)]:\n  - @vanilla-extract/css@1.6.4\n  - @vanilla-extract-private/test-helpers@0.0.1\n"
  },
  {
    "path": "tests/compiler/compiler.test.ts",
    "content": "import path from 'path';\nimport { afterAll, describe, expect, test } from 'vitest';\nimport { createCompiler } from '@vanilla-extract/compiler';\nimport { normalizePath } from '@vanilla-extract/integration';\nimport tsconfigPaths from 'vite-tsconfig-paths';\n\nexpect.addSnapshotSerializer({\n  test: (val) => typeof val === 'string',\n  print: (val) =>\n    (val as string).replaceAll(normalizePath(__dirname), '{{__dirname}}'),\n});\n\nfunction getLocalFiles(files: Set<string>) {\n  const posixDirname = normalizePath(__dirname);\n\n  return [...files]\n    .map(normalizePath)\n    .filter((file) => file.startsWith(posixDirname));\n}\n\ndescribe('compiler', () => {\n  const compilers = {\n    default: createCompiler({\n      root: __dirname,\n    }),\n    cssImportSpecifier: createCompiler({\n      root: __dirname,\n      cssImportSpecifier: (filePath) => filePath + '.custom-extension.css',\n    }),\n    shortIdentifiers: createCompiler({\n      root: __dirname,\n      identifiers: 'short',\n    }),\n    viteResolve: createCompiler({\n      root: __dirname,\n      viteResolve: {\n        alias: {\n          '@util': path.resolve(__dirname, 'fixtures/vite-config/util'),\n        },\n      },\n    }),\n    vitePlugins: createCompiler({\n      root: __dirname,\n      vitePlugins: [\n        {\n          name: 'test-plugin',\n          resolveId(id) {\n            if (id === '~/vars') {\n              return '\\0resolved-vars';\n            }\n          },\n          load: (id) => {\n            if (id === '\\0resolved-vars') {\n              return `export const color = \"green\"`;\n            }\n          },\n        },\n      ],\n    }),\n    tsconfigPaths: createCompiler({\n      root: __dirname,\n      vitePlugins: [tsconfigPaths()],\n    }),\n    basePath: createCompiler({\n      root: __dirname,\n      viteConfig: {\n        base: '/assets/',\n      },\n    }),\n    getAllCss: createCompiler({\n      root: __dirname,\n    }),\n    assetsInlineLimit: createCompiler({\n      root: __dirname,\n      viteConfig: {\n        build: {\n          assetsInlineLimit: 512,\n        },\n      },\n    }),\n    assetsNoInlineLimit: createCompiler({\n      root: __dirname,\n      viteConfig: {\n        build: {\n          assetsInlineLimit: 0,\n        },\n      },\n    }),\n    importerTree: createCompiler({\n      root: __dirname,\n    }),\n  } as const;\n\n  afterAll(async () => {\n    await Promise.allSettled(\n      Object.values(compilers).map((compiler) => compiler.close()),\n    );\n  });\n\n  test('absolute paths', async () => {\n    const compiler = compilers.default;\n\n    const cssPath = path.join(\n      __dirname,\n      'fixtures/class-composition/styles.css.ts',\n    );\n    const sharedCssPath = path.join(\n      __dirname,\n      'fixtures/class-composition/shared.css.ts',\n    );\n\n    const output = await compiler.processVanillaFile(cssPath);\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/shared.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/class-composition/styles.css.ts.vanilla.css';\n      export var className = 'styles_className__q7x3ow0 shared_shared__16bmd920';\n    `);\n\n    const localWatchFiles = getLocalFiles(output.watchFiles);\n    expect(localWatchFiles).toMatchInlineSnapshot(`\n      [\n        {{__dirname}}/fixtures/class-composition/shared.css.ts,\n        {{__dirname}}/fixtures/class-composition/styles.css.ts,\n      ]\n    `);\n\n    {\n      const { css, filePath } = compiler.getCssForFile(cssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .styles_className__q7x3ow0 {\n          color: red;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/styles.css.ts`,\n      );\n    }\n\n    {\n      const { css, filePath } = compiler.getCssForFile(sharedCssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .shared_shared__16bmd920 {\n          background: blue;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/shared.css.ts`,\n      );\n    }\n  });\n\n  test('root relative paths', async () => {\n    const compiler = compilers.default;\n\n    const cssPath = 'fixtures/class-composition/styles.css.ts';\n    const sharedCssPath = 'fixtures/class-composition/shared.css.ts';\n\n    const output = await compiler.processVanillaFile(cssPath);\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/shared.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/class-composition/styles.css.ts.vanilla.css';\n      export var className = 'styles_className__q7x3ow0 shared_shared__16bmd920';\n    `);\n\n    const localWatchFiles = getLocalFiles(output.watchFiles);\n    expect(localWatchFiles).toMatchInlineSnapshot(`\n      [\n        {{__dirname}}/fixtures/class-composition/shared.css.ts,\n        {{__dirname}}/fixtures/class-composition/styles.css.ts,\n      ]\n    `);\n\n    {\n      const { css, filePath } = compiler.getCssForFile(cssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .styles_className__q7x3ow0 {\n          color: red;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/styles.css.ts`,\n      );\n    }\n\n    {\n      const { css, filePath } = compiler.getCssForFile(sharedCssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .shared_shared__16bmd920 {\n          background: blue;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/shared.css.ts`,\n      );\n    }\n  });\n\n  test('root relative paths starting with dot', async () => {\n    const compiler = compilers.default;\n\n    const cssPath = './fixtures/class-composition/styles.css.ts';\n    const sharedCssPath = './fixtures/class-composition/shared.css.ts';\n\n    const output = await compiler.processVanillaFile(cssPath);\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/shared.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/class-composition/styles.css.ts.vanilla.css';\n      export var className = 'styles_className__q7x3ow0 shared_shared__16bmd920';\n    `);\n\n    const localWatchFiles = getLocalFiles(output.watchFiles);\n    expect(localWatchFiles).toMatchInlineSnapshot(`\n      [\n        {{__dirname}}/fixtures/class-composition/shared.css.ts,\n        {{__dirname}}/fixtures/class-composition/styles.css.ts,\n      ]\n    `);\n\n    {\n      const { css, filePath } = compiler.getCssForFile(cssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .styles_className__q7x3ow0 {\n          color: red;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/styles.css.ts`,\n      );\n    }\n\n    {\n      const { css, filePath } = compiler.getCssForFile(sharedCssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .shared_shared__16bmd920 {\n          background: blue;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/shared.css.ts`,\n      );\n    }\n  });\n\n  test('throws on getCssForFile when file does not exist', async () => {\n    const compiler = compilers.default;\n    let error: Error;\n\n    try {\n      compiler.getCssForFile('does-not-exist.css.ts');\n    } catch (_error) {\n      error = _error as Error;\n    }\n\n    expect(\n      // We know `error.message` is defined here\n      normalizePath(error!.message),\n    ).toMatchInlineSnapshot(\n      `No CSS for file: {{__dirname}}/does-not-exist.css.ts`,\n    );\n  });\n\n  test('short identifiers', async () => {\n    const compiler = compilers.shortIdentifiers;\n\n    const cssPath = path.join(\n      __dirname,\n      'fixtures/class-composition/styles.css.ts',\n    );\n    const output = await compiler.processVanillaFile(cssPath);\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/shared.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/class-composition/styles.css.ts.vanilla.css';\n      export var className = 'q7x3ow0 _16bmd920';\n    `);\n    const { css } = compiler.getCssForFile(cssPath);\n    expect(css).toMatchInlineSnapshot(`\n      .q7x3ow0 {\n        color: red;\n      }\n    `);\n  });\n\n  test('custom cssImportSpecifier', async () => {\n    const compiler = compilers.cssImportSpecifier;\n\n    const cssPath = path.join(\n      __dirname,\n      'fixtures/class-composition/styles.css.ts',\n    );\n    const output = await compiler.processVanillaFile(cssPath);\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/shared.css.ts.custom-extension.css';\n      import '{{__dirname}}/fixtures/class-composition/styles.css.ts.custom-extension.css';\n      export var className = 'styles_className__q7x3ow0 shared_shared__16bmd920';\n    `);\n  });\n\n  test('should replace class compositions correctly', async () => {\n    const compiler = compilers.default;\n\n    const baseCssPath = './fixtures/class-composition/base.css.ts';\n    const buttonCssPath = './fixtures/class-composition/button.css.ts';\n    const stepperCssPath = './fixtures/class-composition/stepper.css.ts';\n\n    const baseOutput = await compiler.processVanillaFile(baseCssPath);\n    expect(baseOutput.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/base.css.ts.vanilla.css';\n      export var fontFamilyBase = 'base_fontFamilyBase__1xukjx0';\n      export var base = 'base_base__1xukjx1 base_fontFamilyBase__1xukjx0';\n    `);\n\n    const buttonOutput = await compiler.processVanillaFile(buttonCssPath);\n    expect(buttonOutput.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/base.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/class-composition/button.css.ts.vanilla.css';\n      export var button = 'button_button__59rihu0 base_base__1xukjx1 base_fontFamilyBase__1xukjx0';\n    `);\n\n    const stepperOutput = await compiler.processVanillaFile(stepperCssPath);\n    expect(stepperOutput.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/class-composition/base.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/class-composition/button.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/class-composition/stepper.css.ts.vanilla.css';\n      export var stepperContainer = 'stepper_stepperContainer__p034sj0 base_base__1xukjx1 base_fontFamilyBase__1xukjx0';\n      export var stepperButton = 'stepper_stepperButton__p034sj1';\n    `);\n\n    {\n      const { css, filePath } = compiler.getCssForFile(baseCssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .base_fontFamilyBase__1xukjx0 {\n          font-family: Arial, sans-serif;\n        }\n        .base_base__1xukjx1 {\n          background: blue;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/base.css.ts`,\n      );\n    }\n\n    {\n      const { css, filePath } = compiler.getCssForFile(buttonCssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .button_button__59rihu0 {\n          color: red;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/button.css.ts`,\n      );\n    }\n\n    {\n      const { css, filePath } = compiler.getCssForFile(stepperCssPath);\n      expect(css).toMatchInlineSnapshot(`\n        .stepper_stepperContainer__p034sj0 {\n          font-size: 32px;\n        }\n        .stepper_stepperContainer__p034sj0 .button_button__59rihu0.stepper_stepperButton__p034sj1 {\n          border: 1px solid black;\n        }\n      `);\n      expect(normalizePath(filePath)).toMatchInlineSnapshot(\n        `{{__dirname}}/fixtures/class-composition/stepper.css.ts`,\n      );\n    }\n  });\n\n  test('does not remove unused composition classes', async () => {\n    const compiler = compilers.default;\n\n    const cssPathA = './fixtures/unused-compositions/styles_a.css.ts';\n    const cssPathB = './fixtures/unused-compositions/styles_b.css.ts';\n    const sharedCssPath = './fixtures/unused-compositions/shared.css.ts';\n\n    // Process the file multiple times with different args to test caching\n    await compiler.processVanillaFile(cssPathA, { outputCss: false });\n    const outputA = await compiler.processVanillaFile(cssPathA);\n\n    // The `root` className string should be a composition of multiple classes:\n    expect(outputA.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/unused-compositions/shared.css.ts.vanilla.css';\n      export var root = 'styles_a_root__mh4uy80 shared_shared__5i7sy00';\n    `);\n\n    // Process the file multiple times with different args to test caching\n    await compiler.processVanillaFile(cssPathB, { outputCss: false });\n    const outputB = await compiler.processVanillaFile(cssPathB);\n\n    // The `root` className string should be a composition of multiple classes:\n    expect(outputB.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/unused-compositions/shared.css.ts.vanilla.css';\n      export var root = 'styles_b_root__1k6843p0 shared_shared__5i7sy00';\n    `);\n\n    const { css } = compiler.getCssForFile(sharedCssPath);\n    expect(css).toMatchInlineSnapshot(`\n      .shared_shared__5i7sy00 {\n        padding: 20px;\n        background: peachpuff;\n      }\n    `);\n  });\n\n  test('getter selector', async () => {\n    const compiler = compilers.default;\n\n    const cssPath = path.join(__dirname, 'fixtures/selectors/getter.css.ts');\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/selectors/getter.css.ts.vanilla.css';\n      export var child = 'getter_child__ux95kn0';\n      export var parent = 'getter_parent__ux95kn1';\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .getter_child__ux95kn0 {\n        background: blue;\n      }\n      .getter_parent__ux95kn1 .getter_child__ux95kn0 {\n        color: red;\n      }\n      .getter_parent__ux95kn1 {\n        background: yellow;\n      }\n      .getter_parent__ux95kn1:has(.getter_child__ux95kn0) {\n        padding: 10px;\n      }\n    `);\n  });\n\n  test('recipes class names', async () => {\n    const compiler = compilers.default;\n\n    const cssPath = path.join(\n      __dirname,\n      'fixtures/recipes/recipeClassNames.css.ts',\n    );\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/recipes/recipeClassNames.css.ts.vanilla.css';\n      import { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\n      export var recipeWithReferences = _7a468({defaultClassName:'recipeClassNames_recipeWithReferences__129pj258',variantClassNames:{first:{true:'recipeClassNames_recipeWithReferences_first_true__129pj259'}},defaultVariants:{},compoundVariants:[]});\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .recipeClassNames_basic_rounded_true__129pj257 {\n        border-radius: 999px;\n      }\n      .recipeClassNames_recipeWithReferences__129pj258 {\n        color: red;\n      }\n      .recipeClassNames__129pj250 .recipeClassNames_recipeWithReferences__129pj258 {\n        color: blue;\n      }\n      .recipeClassNames_basic_spaceWithDefault_large__129pj252 .recipeClassNames_recipeWithReferences__129pj258 {\n        color: yellow;\n      }\n      .recipeClassNames_basic_spaceWithoutDefault_small__129pj253 .recipeClassNames_recipeWithReferences__129pj258 {\n        color: green;\n      }\n      .recipeClassNames_basic_color_red__129pj255 .recipeClassNames_recipeWithReferences_first_true__129pj259 {\n        color: black;\n      }\n      .recipeClassNames_basic_spaceWithDefault_large__129pj252.recipeClassNames_basic_rounded_true__129pj257 .recipeClassNames_recipeWithReferences_first_true__129pj259 {\n        color: white;\n      }\n    `);\n  });\n\n  test('Vite resolve', async () => {\n    const compiler = compilers.viteResolve;\n\n    const cssPath = path.join(__dirname, 'fixtures/vite-config/alias.css.ts');\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/vite-config/util/vars.css.ts.vanilla.css';\n      import '{{__dirname}}/fixtures/vite-config/alias.css.ts.vanilla.css';\n      export var root = 'alias_root__ez4dr20';\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .alias_root__ez4dr20 {\n        --border__13z1r1g0: 1px solid black;\n        border: var(--border__13z1r1g0);\n      }\n    `);\n  });\n\n  test('Vite plugins', async () => {\n    const compiler = compilers.vitePlugins;\n\n    const cssPath = path.join(__dirname, 'fixtures/vite-config/plugin.css.ts');\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/vite-config/plugin.css.ts.vanilla.css';\n      export var root = 'plugin_root__1e902gk0';\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .plugin_root__1e902gk0 {\n        color: green;\n      }\n    `);\n  });\n\n  test('vite-tsconfig-paths', async () => {\n    const compiler = compilers.tsconfigPaths;\n\n    const cssPath = path.join(\n      __dirname,\n      'fixtures/tsconfig-paths/src/main.css.ts',\n    );\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/tsconfig-paths/src/main.css.ts.vanilla.css';\n      export var box = 'main_box__1tm7bbb0';\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .main_box__1tm7bbb0 {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n      }\n    `);\n  });\n\n  test('base path should be ignored', async () => {\n    const compiler = compilers.basePath;\n\n    const cssPath = path.join(__dirname, 'fixtures/vite-config/image.css.ts');\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/vite-config/image.css.ts.vanilla.css';\n      export var imageStyle1 = 'image_imageStyle1__1lseqzh0';\n      export var imageStyle2 = 'image_imageStyle2__1lseqzh1';\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .image_imageStyle1__1lseqzh0 {\n        background-image: url('/fixtures/vite-config/test.jpg');\n      }\n      .image_imageStyle2__1lseqzh1 {\n        background-image: url('/fixtures/vite-config/test.jpg');\n      }\n    `);\n  });\n\n  test('getAllCss should return all CSS that has been processed', async () => {\n    const compiler = compilers.getAllCss;\n\n    const buttonCssPath = './fixtures/class-composition/button.css.ts';\n    await compiler.processVanillaFile(buttonCssPath);\n    const stepperCssPath = './fixtures/class-composition/stepper.css.ts';\n    await compiler.processVanillaFile(stepperCssPath);\n\n    expect(compiler.getAllCss()).toMatchInlineSnapshot(`\n      .base_fontFamilyBase__1xukjx0 {\n        font-family: Arial, sans-serif;\n      }\n      .base_base__1xukjx1 {\n        background: blue;\n      }\n      .button_button__59rihu0 {\n        color: red;\n      }\n      .stepper_stepperContainer__p034sj0 {\n        font-size: 32px;\n      }\n      .stepper_stepperContainer__p034sj0 .button_button__59rihu0.stepper_stepperButton__p034sj1 {\n        border: 1px solid black;\n      }\n    `);\n  });\n\n  test('setting build.assetsInlineLimit = 0 should disable inlining', async () => {\n    const compiler = compilers.assetsNoInlineLimit;\n\n    const cssPath = path.join(\n      __dirname,\n      'fixtures/assets-inline-limit/styles.css.ts',\n    );\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/assets-inline-limit/styles.css.ts.vanilla.css';\n      export var square = 'styles_square__upl4cj0';\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .styles_square__upl4cj0 {\n        width: 100px;\n        height: 100px;\n        background-image: url(\"/fixtures/assets-inline-limit/square.svg\");\n        background-size: cover;\n      }\n    `);\n  });\n\n  test('setting build.assetsInlineLimit = 512 should inline assets appropriately', async () => {\n    const compiler = compilers.assetsInlineLimit;\n\n    const cssPath = path.join(\n      __dirname,\n      'fixtures/assets-inline-limit/styles.css.ts',\n    );\n    const output = await compiler.processVanillaFile(cssPath);\n    const { css } = compiler.getCssForFile(cssPath);\n\n    expect(output.source).toMatchInlineSnapshot(`\n      import '{{__dirname}}/fixtures/assets-inline-limit/styles.css.ts.vanilla.css';\n      export var square = 'styles_square__upl4cj0';\n    `);\n\n    expect(css).toMatchInlineSnapshot(`\n      .styles_square__upl4cj0 {\n        width: 100px;\n        height: 100px;\n        background-image: url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='14'%20height='14'%20fill='%23000000'/%3e%3c/svg%3e\");\n        background-size: cover;\n      }\n    `);\n  });\n\n  test('should generate correct importer trees', async () => {\n    const compiler = compilers.importerTree;\n\n    const stylesPath = path.join(\n      __dirname,\n      'fixtures/importer-tree/styles.css.ts',\n    );\n    const moreStylesPath = path.join(\n      __dirname,\n      'fixtures/importer-tree/moreStyles.css.ts',\n    );\n    const evenMoreStylesPath = path.join(\n      __dirname,\n      'fixtures/importer-tree/evenMoreStyles.css.ts',\n    );\n\n    await Promise.all([\n      compiler.processVanillaFile(stylesPath),\n      compiler.processVanillaFile(moreStylesPath),\n      compiler.processVanillaFile(evenMoreStylesPath),\n    ]);\n\n    const transformedVeModules = new Set([\n      path.resolve(__dirname, stylesPath),\n      path.resolve(__dirname, evenMoreStylesPath),\n    ]);\n\n    {\n      const importerTree = await compiler.findImporterTree(\n        path.resolve(stylesPath),\n        transformedVeModules,\n      );\n\n      const res = Array.from(importerTree).map((importer) => importer.id);\n\n      expect(res).toMatchInlineSnapshot(`\n        [\n          {{__dirname}}/fixtures/importer-tree/styles.css.ts,\n        ]\n      `);\n    }\n\n    {\n      const importerTree = await compiler.findImporterTree(\n        path.resolve(moreStylesPath),\n        transformedVeModules,\n      );\n\n      const res = Array.from(importerTree).map((importer) => importer.id);\n\n      expect(res).toMatchInlineSnapshot(`\n        [\n          {{__dirname}}/fixtures/importer-tree/moreStyles.css.ts,\n        ]\n      `);\n    }\n\n    {\n      const importerTree = await compiler.findImporterTree(\n        path.resolve(path.join(__dirname, 'fixtures/importer-tree/tokens.ts')),\n        transformedVeModules,\n      );\n\n      const res = Array.from(importerTree).map((importer) => importer.id);\n\n      expect(res).toMatchInlineSnapshot(`\n        [\n          {{__dirname}}/fixtures/importer-tree/tokens.ts,\n          {{__dirname}}/fixtures/importer-tree/styles.css.ts,\n        ]\n      `);\n    }\n\n    {\n      const importerTree = await compiler.findImporterTree(\n        path.resolve(\n          path.join(__dirname, 'fixtures/importer-tree/otherTokens.ts'),\n        ),\n        transformedVeModules,\n      );\n\n      const res = Array.from(importerTree).map((importer) => importer.id);\n\n      expect(res).toMatchInlineSnapshot(`\n        [\n          {{__dirname}}/fixtures/importer-tree/otherTokens.ts,\n          {{__dirname}}/fixtures/importer-tree/tokens.ts,\n          {{__dirname}}/fixtures/importer-tree/styles.css.ts,\n          {{__dirname}}/fixtures/importer-tree/moreStyles.css.ts,\n        ]\n      `);\n    }\n\n    {\n      const importerTree = await compiler.findImporterTree(\n        path.resolve(\n          path.join(__dirname, 'fixtures/importer-tree/moreStyles2.css.ts'),\n        ),\n        transformedVeModules,\n      );\n\n      const res = Array.from(importerTree).map((importer) => importer.id);\n\n      expect(res).toMatchInlineSnapshot(`\n        [\n          {{__dirname}}/fixtures/importer-tree/moreStyles2.css.ts,\n          {{__dirname}}/fixtures/importer-tree/reExporter.ts,\n          {{__dirname}}/fixtures/importer-tree/evenMoreStyles.css.ts,\n        ]\n      `);\n    }\n  });\n\n  test('should stop traversal at all VE module boundaries when all are transformed', async () => {\n    const compiler = compilers.importerTree;\n\n    const stylesPath = path.join(\n      __dirname,\n      'fixtures/importer-tree/styles.css.ts',\n    );\n    const moreStylesPath = path.join(\n      __dirname,\n      'fixtures/importer-tree/moreStyles.css.ts',\n    );\n    const evenMoreStylesPath = path.join(\n      __dirname,\n      'fixtures/importer-tree/evenMoreStyles.css.ts',\n    );\n\n    await Promise.all([\n      compiler.processVanillaFile(stylesPath),\n      compiler.processVanillaFile(moreStylesPath),\n      compiler.processVanillaFile(evenMoreStylesPath),\n    ]);\n\n    // All VE modules are in the transformed set (realistic scenario)\n    const allTransformed = new Set([\n      path.resolve(__dirname, stylesPath),\n      path.resolve(__dirname, moreStylesPath),\n      path.resolve(__dirname, evenMoreStylesPath),\n    ]);\n\n    {\n      // otherTokens is imported by both tokens.ts (via styles.css.ts) and moreStyles.css.ts\n      // With all VE modules transformed, traversal should stop at both boundaries\n      const importerTree = await compiler.findImporterTree(\n        path.resolve(\n          path.join(__dirname, 'fixtures/importer-tree/otherTokens.ts'),\n        ),\n        allTransformed,\n      );\n\n      const res = Array.from(importerTree).map((importer) => importer.id);\n\n      expect(res).toMatchInlineSnapshot(`\n        [\n          {{__dirname}}/fixtures/importer-tree/otherTokens.ts,\n          {{__dirname}}/fixtures/importer-tree/tokens.ts,\n          {{__dirname}}/fixtures/importer-tree/styles.css.ts,\n          {{__dirname}}/fixtures/importer-tree/moreStyles.css.ts,\n        ]\n      `);\n    }\n\n    {\n      // tokens.ts is only imported by styles.css.ts – should stop there\n      const importerTree = await compiler.findImporterTree(\n        path.resolve(path.join(__dirname, 'fixtures/importer-tree/tokens.ts')),\n        allTransformed,\n      );\n\n      const res = Array.from(importerTree).map((importer) => importer.id);\n\n      expect(res).toMatchInlineSnapshot(`\n        [\n          {{__dirname}}/fixtures/importer-tree/tokens.ts,\n          {{__dirname}}/fixtures/importer-tree/styles.css.ts,\n        ]\n      `);\n    }\n  });\n\n  test('should return empty set for files not in the compiler module graph', async () => {\n    const compiler = compilers.importerTree;\n\n    const importerTree = await compiler.findImporterTree(\n      path.resolve(path.join(__dirname, 'fixtures/importer-tree/unknown.ts')),\n      new Set(),\n    );\n\n    expect(importerTree.size).toBe(0);\n  });\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/assets-inline-limit/assets.d.ts",
    "content": "declare module '*.svg' {\n  let ImageSrc: string;\n  export default ImageSrc;\n}\n"
  },
  {
    "path": "tests/compiler/fixtures/assets-inline-limit/styles.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport asset from './square.svg';\n\nexport const square = style({\n  width: '100px',\n  height: '100px',\n  backgroundImage: `url(\"${asset}\")`,\n  backgroundSize: 'cover',\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/class-composition/base.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const fontFamilyBase = style({\n  fontFamily: 'Arial, sans-serif',\n});\n\nexport const base = style([fontFamilyBase, { background: 'blue' }]);\n"
  },
  {
    "path": "tests/compiler/fixtures/class-composition/button.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { base } from './base.css';\n\nexport const button = style([\n  base,\n  {\n    color: 'red',\n  },\n]);\n"
  },
  {
    "path": "tests/compiler/fixtures/class-composition/shared.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const shared = style({ background: 'blue' });\n"
  },
  {
    "path": "tests/compiler/fixtures/class-composition/stepper.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { base } from './base.css';\nimport { button } from './button.css';\n\nexport const stepperContainer = style([\n  base,\n  {\n    fontSize: '32px',\n  },\n]);\n\nexport const stepperButton = style({\n  selectors: {\n    [`${stepperContainer} ${button}&`]: {\n      border: '1px solid black',\n    },\n  },\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/class-composition/styles.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { shared } from './shared.css';\n\nexport const className = style([shared, { color: 'red' }]);\n"
  },
  {
    "path": "tests/compiler/fixtures/importer-tree/evenMoreStyles.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { reExportedStyle } from './reExporter';\n\nexport const container = style([reExportedStyle, {}]);\n"
  },
  {
    "path": "tests/compiler/fixtures/importer-tree/moreStyles.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { otherTokens } from './otherTokens';\n\nexport const bar = style({ borderColor: otherTokens.color.secondary });\n"
  },
  {
    "path": "tests/compiler/fixtures/importer-tree/moreStyles2.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const baz = style({});\n"
  },
  {
    "path": "tests/compiler/fixtures/importer-tree/otherTokens.ts",
    "content": "export const otherTokens = {\n  color: {\n    secondary: 'blue',\n  },\n};\n"
  },
  {
    "path": "tests/compiler/fixtures/importer-tree/reExporter.ts",
    "content": "export { baz as reExportedStyle } from './moreStyles2.css';\n"
  },
  {
    "path": "tests/compiler/fixtures/importer-tree/styles.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { tokens } from './tokens';\n\nexport const foo = style({ color: tokens.color.primary });\n"
  },
  {
    "path": "tests/compiler/fixtures/importer-tree/tokens.ts",
    "content": "import { otherTokens } from './otherTokens';\nexport const tokens = {\n  color: {\n    primary: 'red',\n    ...otherTokens.color,\n  },\n};\n"
  },
  {
    "path": "tests/compiler/fixtures/recipes/recipeClassNames.css.ts",
    "content": "import { recipe } from '@vanilla-extract/recipes';\n\nconst basic = recipe({\n  variants: {\n    spaceWithDefault: {\n      small: {},\n      large: {},\n    },\n    spaceWithoutDefault: {\n      small: {},\n      large: {},\n    },\n    color: {\n      red: {},\n      blue: {},\n    },\n    rounded: {\n      true: { borderRadius: 999 },\n    },\n  },\n});\n\nexport const recipeWithReferences = recipe({\n  base: {\n    color: 'red',\n    selectors: {\n      [`.${basic.classNames.base} &`]: {\n        color: 'blue',\n      },\n      [`.${basic.classNames.variants.spaceWithDefault.large} &`]: {\n        color: 'yellow',\n      },\n      [`.${basic.classNames.variants.spaceWithoutDefault.small} &`]: {\n        color: 'green',\n      },\n    },\n  },\n  variants: {\n    first: {\n      true: {\n        selectors: {\n          [`.${basic.classNames.variants.color.red} &`]: {\n            color: 'black',\n          },\n          [`.${basic.classNames.variants.spaceWithDefault.large}.${basic.classNames.variants.rounded.true} &`]:\n            {\n              color: 'white',\n            },\n        },\n      },\n    },\n  },\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/selectors/getter.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const child = style({\n  background: 'blue',\n  get selectors() {\n    return {\n      [`${parent} &`]: {\n        color: 'red',\n      },\n    };\n  },\n});\n\nexport const parent = style({\n  background: 'yellow',\n  selectors: {\n    [`&:has(${child})`]: {\n      padding: 10,\n    },\n  },\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/tsconfig-paths/src/main.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const box = style({\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/tsconfig-paths/src/main.tsx",
    "content": "import { box } from 'main.css';\n\ndocument.getElementById('root')!.innerHTML = `\n  <div class=\"${box}\">hello world</div>\n`;\n"
  },
  {
    "path": "tests/compiler/fixtures/tsconfig-paths/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"isolatedModules\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"baseUrl\": \"./src\"\n  }\n}\n"
  },
  {
    "path": "tests/compiler/fixtures/unused-compositions/shared.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n\nexport const shared = style({\n  padding: '20px',\n  background: 'peachpuff',\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/unused-compositions/styles_a.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { shared } from './shared.css';\n\nexport const root = style([shared]);\n"
  },
  {
    "path": "tests/compiler/fixtures/unused-compositions/styles_b.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\nimport { shared } from './shared.css';\n\nexport const root = style([shared]);\n"
  },
  {
    "path": "tests/compiler/fixtures/vite-config/alias.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n// @ts-expect-error aliased path\nimport { border } from '@util/vars.css';\n\nexport const root = style({\n  vars: {\n    [border]: '1px solid black',\n  },\n  border,\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/vite-config/image.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n// @ts-expect-error No type definition for image assets\nimport testImage from './test.jpg';\n\nexport const imageStyle1 = style({\n  backgroundImage: `url('${testImage}')`,\n});\n\nexport const imageStyle2 = style({\n  backgroundImage: `url('/fixtures/vite-config/test.jpg')`,\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/vite-config/plugin.css.ts",
    "content": "import { style } from '@vanilla-extract/css';\n// @ts-expect-error virtual module\nimport { color } from '~/vars';\n\nexport const root = style({\n  color,\n});\n"
  },
  {
    "path": "tests/compiler/fixtures/vite-config/util/vars.css.ts",
    "content": "import { createVar } from '@vanilla-extract/css';\n\nexport const border = createVar();\n"
  },
  {
    "path": "tests/e2e/css-deduplication.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport { readFileSync } from 'fs';\nimport { globSync } from 'node:fs';\nimport path from 'path';\n\nimport test from './fixture';\n\nconst fixtureDir = path.resolve(\n  __dirname,\n  '../../fixtures/next-16-app-pages-router',\n);\n\ntest.describe('CSS deduplication @agnostic', () => {\n  const buildTypes = [\n    { name: 'webpack', distDir: 'dist/webpack' },\n    { name: 'turbopack', distDir: 'dist/turbo' },\n  ];\n\n  buildTypes.forEach(({ name, distDir: distDirName }) => {\n    test(`shared globalStyle should only appear once in ${name} production build`, async () => {\n      const distDir = path.join(fixtureDir, distDirName);\n\n      const cssFiles = globSync('**/*.css', { cwd: distDir });\n      expect(cssFiles.length).toBeGreaterThan(0);\n\n      let totalOccurrences = 0;\n      const cssPattern = /body\\s*\\{\\s*background-color:\\s*#0cdbcd;?\\s*\\}/g;\n\n      for (const cssFile of cssFiles) {\n        const content = readFileSync(path.join(distDir, cssFile), 'utf-8');\n        const matches = content.match(cssPattern);\n        if (matches) {\n          totalOccurrences += matches.length;\n        }\n      }\n\n      expect(totalOccurrences).toBe(1);\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { all as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`features - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('features', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot('features.png');\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`features-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-esbuild--development.css",
    "content": ".features_mergedStyle__1o6ek500 {\n  height: 50px;\n}\n.features_mergedStyle__1o6ek500:after {\n  content: \"Below 700px\";\n  display: block;\n}\n.features_styleWithComposition__1o6ek501 {\n  background-color: powderblue;\n}\n.features_styleWithComposition__1o6ek501:hover {\n  background-color: slategray;\n}\n.features_styleWithNestedComposition__1o6ek502 {\n  background-color: powderblue;\n}\n.features_styleWithNestedComposition__1o6ek502:hover {\n  background-color: slategray;\n}\n.features_styleVariantsWithComposition_variant__1o6ek503 {\n  background-color: powderblue;\n}\n.features_styleVariantsWithComposition_variant__1o6ek503:hover {\n  background-color: slategray;\n}\n.features_styleVariantsWithMappedComposition_variant__1o6ek504 {\n  background-color: powderblue;\n}\n.features_styleVariantsWithMappedComposition_variant__1o6ek504:hover {\n  background-color: slategray;\n}\n.features_styleCompositionInSelector__1o6ek506 {\n  color: white;\n}\n.features_styleCompositionInSelector__1o6ek507 {\n  background-color: black;\n}\nbody .features_styleCompositionInSelector__1o6ek508 {\n  font-size: 24px;\n}\n.features_styleVariantsCompositionInSelector_variant__1o6ek509 {\n  color: white;\n}\n.features_styleVariantsCompositionInSelector_variant__1o6ek50a {\n  background-color: black;\n}\nbody .features_styleVariantsCompositionInSelector_variant__1o6ek50b {\n  font-size: 24px;\n}\n.features_styleWithStartingStyle__1o6ek50c {\n  background-color: black;\n}\n@media screen and (min-width: 700px) {\n  .features_mergedStyle__1o6ek500 {\n    color: plum;\n  }\n  .features_mergedStyle__1o6ek500:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  .features_styleWithStartingStyle__1o6ek50c {\n    background-color: white;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-esbuild--production.css",
    "content": "._1o6ek500 {\n  height: 50px;\n}\n._1o6ek500:after {\n  content: \"Below 700px\";\n  display: block;\n}\n._1o6ek501 {\n  background-color: powderblue;\n}\n._1o6ek501:hover {\n  background-color: slategray;\n}\n._1o6ek502 {\n  background-color: powderblue;\n}\n._1o6ek502:hover {\n  background-color: slategray;\n}\n._1o6ek503 {\n  background-color: powderblue;\n}\n._1o6ek503:hover {\n  background-color: slategray;\n}\n._1o6ek504 {\n  background-color: powderblue;\n}\n._1o6ek504:hover {\n  background-color: slategray;\n}\n._1o6ek506 {\n  color: white;\n}\n._1o6ek507 {\n  background-color: black;\n}\nbody ._1o6ek508 {\n  font-size: 24px;\n}\n._1o6ek509 {\n  color: white;\n}\n._1o6ek50a {\n  background-color: black;\n}\nbody ._1o6ek50b {\n  font-size: 24px;\n}\n._1o6ek50c {\n  background-color: black;\n}\n@media screen and (min-width: 700px) {\n  ._1o6ek500 {\n    color: plum;\n  }\n  ._1o6ek500:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  ._1o6ek50c {\n    background-color: white;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--development.css",
    "content": ".features_mergedStyle__1o6ek500 {\n  height: 50px;\n}\n.features_mergedStyle__1o6ek500:after {\n  content: \"Below 700px\";\n  display: block;\n}\n.features_styleWithComposition__1o6ek501 {\n  background-color: powderblue;\n}\n.features_styleWithComposition__1o6ek501:hover {\n  background-color: slategray;\n}\n.features_styleWithNestedComposition__1o6ek502 {\n  background-color: powderblue;\n}\n.features_styleWithNestedComposition__1o6ek502:hover {\n  background-color: slategray;\n}\n.features_styleVariantsWithComposition_variant__1o6ek503 {\n  background-color: powderblue;\n}\n.features_styleVariantsWithComposition_variant__1o6ek503:hover {\n  background-color: slategray;\n}\n.features_styleVariantsWithMappedComposition_variant__1o6ek504 {\n  background-color: powderblue;\n}\n.features_styleVariantsWithMappedComposition_variant__1o6ek504:hover {\n  background-color: slategray;\n}\n.features_styleCompositionInSelector__1o6ek506 {\n  color: white;\n}\n.features_styleCompositionInSelector__1o6ek507 {\n  background-color: black;\n}\nbody .features_styleCompositionInSelector__1o6ek508 {\n  font-size: 24px;\n}\n.features_styleVariantsCompositionInSelector_variant__1o6ek509 {\n  color: white;\n}\n.features_styleVariantsCompositionInSelector_variant__1o6ek50a {\n  background-color: black;\n}\nbody .features_styleVariantsCompositionInSelector_variant__1o6ek50b {\n  font-size: 24px;\n}\n.features_styleWithStartingStyle__1o6ek50c {\n  background-color: black;\n}\n@media screen and (min-width: 700px) {\n  .features_mergedStyle__1o6ek500 {\n    color: plum;\n  }\n  .features_mergedStyle__1o6ek500:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  .features_styleWithStartingStyle__1o6ek50c {\n    background-color: white;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--production.css",
    "content": "._1o6ek500 {\n  height: 50px;\n}\n._1o6ek500:after {\n  content: \"Below 700px\";\n  display: block;\n}\n._1o6ek501 {\n  background-color: powderblue;\n}\n._1o6ek501:hover {\n  background-color: slategray;\n}\n._1o6ek502 {\n  background-color: powderblue;\n}\n._1o6ek502:hover {\n  background-color: slategray;\n}\n._1o6ek503 {\n  background-color: powderblue;\n}\n._1o6ek503:hover {\n  background-color: slategray;\n}\n._1o6ek504 {\n  background-color: powderblue;\n}\n._1o6ek504:hover {\n  background-color: slategray;\n}\n._1o6ek506 {\n  color: white;\n}\n._1o6ek507 {\n  background-color: black;\n}\nbody ._1o6ek508 {\n  font-size: 24px;\n}\n._1o6ek509 {\n  color: white;\n}\n._1o6ek50a {\n  background-color: black;\n}\nbody ._1o6ek50b {\n  font-size: 24px;\n}\n._1o6ek50c {\n  background-color: black;\n}\n@media screen and (min-width: 700px) {\n  ._1o6ek500 {\n    color: plum;\n  }\n  ._1o6ek500:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  ._1o6ek50c {\n    background-color: white;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--development.css",
    "content": ".features_mergedStyle__87f2ru0 {\n  height: 50px;\n}\n.features_mergedStyle__87f2ru0:after {\n  content: \"Below 700px\";\n  display: block;\n}\n.features_styleWithComposition__87f2ru1 {\n  background-color: powderblue;\n}\n.features_styleWithComposition__87f2ru1:hover {\n  background-color: slategray;\n}\n.features_styleWithNestedComposition__87f2ru2 {\n  background-color: powderblue;\n}\n.features_styleWithNestedComposition__87f2ru2:hover {\n  background-color: slategray;\n}\n.features_styleVariantsWithComposition_variant__87f2ru3 {\n  background-color: powderblue;\n}\n.features_styleVariantsWithComposition_variant__87f2ru3:hover {\n  background-color: slategray;\n}\n.features_styleVariantsWithMappedComposition_variant__87f2ru4 {\n  background-color: powderblue;\n}\n.features_styleVariantsWithMappedComposition_variant__87f2ru4:hover {\n  background-color: slategray;\n}\n.features_styleCompositionInSelector__87f2ru6 {\n  color: white;\n}\n.features_styleCompositionInSelector__87f2ru7 {\n  background-color: black;\n}\nbody .features_styleCompositionInSelector__87f2ru8 {\n  font-size: 24px;\n}\n.features_styleVariantsCompositionInSelector_variant__87f2ru9 {\n  color: white;\n}\n.features_styleVariantsCompositionInSelector_variant__87f2rua {\n  background-color: black;\n}\nbody .features_styleVariantsCompositionInSelector_variant__87f2rub {\n  font-size: 24px;\n}\n.features_styleWithStartingStyle__87f2ruc {\n  background-color: black;\n}\n@media screen and (min-width: 700px) {\n  .features_mergedStyle__87f2ru0 {\n    color: plum;\n  }\n  .features_mergedStyle__87f2ru0:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  .features_styleWithStartingStyle__87f2ruc {\n    background-color: white;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--production.css",
    "content": "._87f2ru0 {\n  height: 50px;\n}\n._87f2ru0:after {\n  content: \"Below 700px\";\n  display: block;\n}\n._87f2ru1 {\n  background-color: powderblue;\n}\n._87f2ru1:hover {\n  background-color: slategray;\n}\n._87f2ru2 {\n  background-color: powderblue;\n}\n._87f2ru2:hover {\n  background-color: slategray;\n}\n._87f2ru3 {\n  background-color: powderblue;\n}\n._87f2ru3:hover {\n  background-color: slategray;\n}\n._87f2ru4 {\n  background-color: powderblue;\n}\n._87f2ru4:hover {\n  background-color: slategray;\n}\n._87f2ru6 {\n  color: white;\n}\n._87f2ru7 {\n  background-color: black;\n}\nbody ._87f2ru8 {\n  font-size: 24px;\n}\n._87f2ru9 {\n  color: white;\n}\n._87f2rua {\n  background-color: black;\n}\nbody ._87f2rub {\n  font-size: 24px;\n}\n._87f2ruc {\n  background-color: black;\n}\n@media screen and (min-width: 700px) {\n  ._87f2ru0 {\n    color: plum;\n  }\n  ._87f2ru0:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  ._87f2ruc {\n    background-color: white;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-parcel--development.css",
    "content": ".features_mergedStyle__87f2ru0 {\n  height: 50px;\n}\n.features_mergedStyle__87f2ru0:after {\n  content: \"Below 700px\";\n  display: block;\n}\n.features_styleWithComposition__87f2ru1 {\n  background-color: #b0e0e6;\n}\n.features_styleWithComposition__87f2ru1:hover {\n  background-color: #708090;\n}\n.features_styleWithNestedComposition__87f2ru2 {\n  background-color: #b0e0e6;\n}\n.features_styleWithNestedComposition__87f2ru2:hover {\n  background-color: #708090;\n}\n.features_styleVariantsWithComposition_variant__87f2ru3 {\n  background-color: #b0e0e6;\n}\n.features_styleVariantsWithComposition_variant__87f2ru3:hover {\n  background-color: #708090;\n}\n.features_styleVariantsWithMappedComposition_variant__87f2ru4 {\n  background-color: #b0e0e6;\n}\n.features_styleVariantsWithMappedComposition_variant__87f2ru4:hover {\n  background-color: #708090;\n}\n.features_styleCompositionInSelector__87f2ru6 {\n  color: #fff;\n}\n.features_styleCompositionInSelector__87f2ru7 {\n  background-color: #000;\n}\nbody .features_styleCompositionInSelector__87f2ru8 {\n  font-size: 24px;\n}\n.features_styleVariantsCompositionInSelector_variant__87f2ru9 {\n  color: #fff;\n}\n.features_styleVariantsCompositionInSelector_variant__87f2rua {\n  background-color: #000;\n}\nbody .features_styleVariantsCompositionInSelector_variant__87f2rub {\n  font-size: 24px;\n}\n.features_styleWithStartingStyle__87f2ruc {\n  background-color: #000;\n}\n@media screen and (width >= 700px) {\n  .features_mergedStyle__87f2ru0 {\n    color: plum;\n  }\n  .features_mergedStyle__87f2ru0:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  .features_styleWithStartingStyle__87f2ruc {\n    background-color: #fff;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-parcel--production.css",
    "content": "._87f2ru0 {\n  height: 50px;\n}\n._87f2ru0:after {\n  content: \"Below 700px\";\n  display: block;\n}\n._87f2ru1 {\n  background-color: #b0e0e6;\n}\n._87f2ru1:hover {\n  background-color: #708090;\n}\n._87f2ru2 {\n  background-color: #b0e0e6;\n}\n._87f2ru2:hover {\n  background-color: #708090;\n}\n._87f2ru3 {\n  background-color: #b0e0e6;\n}\n._87f2ru3:hover {\n  background-color: #708090;\n}\n._87f2ru4 {\n  background-color: #b0e0e6;\n}\n._87f2ru4:hover {\n  background-color: #708090;\n}\n._87f2ru6 {\n  color: #fff;\n}\n._87f2ru7 {\n  background-color: #000;\n}\nbody ._87f2ru8 {\n  font-size: 24px;\n}\n._87f2ru9 {\n  color: #fff;\n}\n._87f2rua {\n  background-color: #000;\n}\nbody ._87f2rub {\n  font-size: 24px;\n}\n._87f2ruc {\n  background-color: #000;\n}\n@media screen and (width >= 700px) {\n  ._87f2ru0 {\n    color: plum;\n  }\n  ._87f2ru0:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  ._87f2ruc {\n    background-color: #fff;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/features.playwright.ts-snapshots/features-vite--production.css",
    "content": "._1o6ek500 {\n  height: 50px;\n}\n._1o6ek500:after {\n  content: \"Below 700px\";\n  display: block;\n}\n._1o6ek501 {\n  background-color: powderblue;\n}\n._1o6ek501:hover {\n  background-color: slategray;\n}\n._1o6ek502 {\n  background-color: powderblue;\n}\n._1o6ek502:hover {\n  background-color: slategray;\n}\n._1o6ek503 {\n  background-color: powderblue;\n}\n._1o6ek503:hover {\n  background-color: slategray;\n}\n._1o6ek504 {\n  background-color: powderblue;\n}\n._1o6ek504:hover {\n  background-color: slategray;\n}\n._1o6ek506 {\n  color: white;\n}\n._1o6ek507 {\n  background-color: black;\n}\nbody ._1o6ek508 {\n  font-size: 24px;\n}\n._1o6ek509 {\n  color: white;\n}\n._1o6ek50a {\n  background-color: black;\n}\nbody ._1o6ek50b {\n  font-size: 24px;\n}\n._1o6ek50c {\n  background-color: black;\n}\n@media screen and (min-width: 700px) {\n  ._1o6ek500 {\n    color: plum;\n  }\n  ._1o6ek500:after {\n    content: \"Above 700px\";\n  }\n}\n@starting-style {\n  ._1o6ek50c {\n    background-color: white;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/fixture.ts",
    "content": "import { test as base } from '@playwright/test';\n\ntype TestFixtures = {\n  port: number;\n};\n\nlet testCounter = 0;\n\nconst test = base.extend<TestFixtures>({\n  // Playwright has to have a destructure as the first arg for some reason\n  // oxlint-disable-next-line no-empty-pattern\n  port: async ({}, use, workerInfo) => {\n    const portRange = 100 * workerInfo.workerIndex;\n    await use(9000 + portRange + testCounter++);\n  },\n});\n\nexport default test;\n"
  },
  {
    "path": "tests/e2e/fixtures-next-unified.playwright.ts",
    "content": "import { expect, test } from '@playwright/test';\nimport { NEXT_SERVERS } from '../servers';\n\nconst limited = [\n  { route: '/features', index: '/' },\n  { route: '/recipes', index: '/' },\n  { route: '/sprinkles', index: '/' },\n];\n\nconst full = [\n  { route: '/features', index: '/' },\n  { route: '/recipes', index: '/' },\n  { route: '/sprinkles', index: '/' },\n  { route: '/pages-router/features', index: '/pages-router' },\n  { route: '/pages-router/recipes', index: '/pages-router' },\n  { route: '/pages-router/sprinkles', index: '/pages-router' },\n  { route: '/creepster', index: '/' },\n  { route: '/duplication-test', index: '/' },\n  { route: '/function-serializer', index: '/' },\n  { route: '/next-font', index: '/' },\n  { route: '/next-image', index: '/' },\n];\n\nconst getTasks = (type: 'full' | 'limited') => {\n  if (type === 'full') return full;\n  return limited;\n};\n\nNEXT_SERVERS.map((server) => {\n  test.describe(server.name, () => {\n    const tasks = getTasks(server.suite);\n\n    for (const { route, index: indexUrl } of tasks) {\n      const snapshotPrefix =\n        // font names are different between webpack and turbopack\n        route.includes('next-font') && server.name.includes('Webpack')\n          ? 'next-font-webpack'\n          : route.split('/').at(-1);\n\n      // FIXME: webpack fails the creepster test!\n      if (server.name.includes('Webpack') && route.includes('creepster')) {\n        continue;\n      }\n\n      // Test SSR\n      test(`${route} - SSR`, async ({ page }) => {\n        const targetUrl = `http://localhost:${server.port}${route}`;\n        await page.goto(targetUrl, { waitUntil: 'networkidle' });\n\n        expect(await page.screenshot()).toMatchSnapshot(\n          `${snapshotPrefix}.png`,\n        );\n      });\n\n      // FIXME: webpack dev in next 16 fails CSR tests!\n      if (\n        server.name.includes('Webpack') &&\n        server.name.includes('Next 16') &&\n        route.includes('pages-router')\n      ) {\n        continue;\n      }\n      // FIXME: turbopack build in next 16 fails CSR tests!\n      if (\n        server.name.includes('Turbopack') &&\n        server.name.includes('Next 16') &&\n        route.includes('pages-router')\n      ) {\n        continue;\n      }\n\n      // Test CSR\n      test(`${route} - CSR`, async ({ page }) => {\n        await page.goto(`http://localhost:${server.port}${indexUrl}`);\n\n        const linkLocator = page.locator(`a[href=\"${route}\"]`).first();\n        await linkLocator.click();\n\n        // Prevent triggering a css hover on the new page\n        await page.mouse.move(0, 0);\n\n        await page.waitForURL(`http://localhost:${server.port}${route}`);\n        await page.waitForLoadState('networkidle');\n\n        expect(await page.screenshot()).toMatchSnapshot(\n          `${snapshotPrefix}.png`,\n        );\n      });\n    }\n  });\n});\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { all as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`layers - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('layers', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot('layers.png');\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`layers-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-esbuild--development.css",
    "content": "@layer lib;\n@layer lib.styles_base__1sqkzjx0;\n@media screen and (min-width: 600px) {\n  @layer typography;\n}\n@layer lib.styles_utilities__1sqkzjx2;\n@layer typography;\n@layer lib.styles_base__1sqkzjx0 {\n  a {\n    font-weight: 800;\n    color: red;\n  }\n  .styles_link__1sqkzjx1 {\n    color: blue;\n  }\n}\n@media screen and (min-width: 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n@layer lib.styles_utilities__1sqkzjx2 {\n  .styles_pink__1sqkzjx3 {\n    color: hotpink;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-esbuild--production.css",
    "content": "@layer lib;\n@layer lib._1sqkzjx0;\n@media screen and (min-width: 600px) {\n  @layer typography;\n}\n@layer lib._1sqkzjx2;\n@layer typography;\n@layer lib._1sqkzjx0 {\n  a {\n    font-weight: 800;\n    color: red;\n  }\n  ._1sqkzjx1 {\n    color: blue;\n  }\n}\n@media screen and (min-width: 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n@layer lib._1sqkzjx2 {\n  ._1sqkzjx3 {\n    color: hotpink;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-esbuild-next--development.css",
    "content": "@layer lib;\n@layer lib.styles_base__1sqkzjx0;\n@media screen and (min-width: 600px) {\n  @layer typography;\n}\n@layer lib.styles_utilities__1sqkzjx2;\n@layer typography;\n@layer lib.styles_base__1sqkzjx0 {\n  a {\n    font-weight: 800;\n    color: red;\n  }\n  .styles_link__1sqkzjx1 {\n    color: blue;\n  }\n}\n@media screen and (min-width: 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n@layer lib.styles_utilities__1sqkzjx2 {\n  .styles_pink__1sqkzjx3 {\n    color: hotpink;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-esbuild-next--production.css",
    "content": "@layer lib;\n@layer lib._1sqkzjx0;\n@media screen and (min-width: 600px) {\n  @layer typography;\n}\n@layer lib._1sqkzjx2;\n@layer typography;\n@layer lib._1sqkzjx0 {\n  a {\n    font-weight: 800;\n    color: red;\n  }\n  ._1sqkzjx1 {\n    color: blue;\n  }\n}\n@media screen and (min-width: 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n@layer lib._1sqkzjx2 {\n  ._1sqkzjx3 {\n    color: hotpink;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-mini-css-extract--development.css",
    "content": "@layer lib;\n@layer lib.styles_base__18onbx40;\n@media screen and (min-width: 600px) {\n  @layer typography;\n}\n@layer lib.styles_utilities__18onbx42;\n@layer typography;\n@layer lib.styles_base__18onbx40 {\n  a {\n    font-weight: 800;\n    color: red;\n  }\n  .styles_link__18onbx41 {\n    color: blue;\n  }\n}\n@media screen and (min-width: 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n@layer lib.styles_utilities__18onbx42 {\n  .styles_pink__18onbx43 {\n    color: hotpink;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-mini-css-extract--production.css",
    "content": "@layer lib;\n@layer lib._18onbx40;\n@media screen and (min-width: 600px) {\n  @layer typography;\n}\n@layer lib._18onbx42;\n@layer typography;\n@layer lib._18onbx40 {\n  a {\n    font-weight: 800;\n    color: red;\n  }\n  ._18onbx41 {\n    color: blue;\n  }\n}\n@media screen and (min-width: 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n@layer lib._18onbx42 {\n  ._18onbx43 {\n    color: hotpink;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-parcel--development.css",
    "content": "@layer lib;\n@layer lib.styles_base__18onbx40 {\n  a {\n    color: red;\n    font-weight: 800;\n  }\n  .styles_link__18onbx41 {\n    color: #00f;\n  }\n}\n@media screen and (width >= 600px) {\n  @layer typography;\n}\n@layer lib.styles_utilities__18onbx42 {\n  .styles_pink__18onbx43 {\n    color: #ff69b4;\n  }\n}\n@layer typography;\n@media screen and (width >= 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-parcel--production.css",
    "content": "@layer lib;\n@layer lib._18onbx40 {\n  a {\n    color: red;\n    font-weight: 800;\n  }\n  ._18onbx41 {\n    color: #00f;\n  }\n}\n@media screen and (width >= 600px) {\n  @layer typography;\n}\n@layer lib._18onbx42 {\n  ._18onbx43 {\n    color: #ff69b4;\n  }\n}\n@layer typography;\n@media screen and (width >= 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/layers.playwright.ts-snapshots/layers-vite--production.css",
    "content": "@layer lib;\n@layer lib._1sqkzjx0;\n@media screen and (min-width: 600px) {\n  @layer typography;\n}\n@layer lib._1sqkzjx2;\n@layer typography;\n@layer lib._1sqkzjx0 {\n  a {\n    font-weight: 800;\n    color: red;\n  }\n  ._1sqkzjx1 {\n    color: blue;\n  }\n}\n@media screen and (min-width: 600px) {\n  @layer typography {\n    a {\n      color: green;\n      font-size: 1.5rem;\n    }\n  }\n}\n@layer lib._1sqkzjx2 {\n  ._1sqkzjx3 {\n    color: hotpink;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { all as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`low-level - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('low-level', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot('low-level.png');\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`low-level-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-esbuild--development.css",
    "content": ".styles_container__1amv5mo2 {\n  container-type: size;\n  container-name: styles_my-container__1amv5mo1;\n  width: 500px;\n}\n.styles_block__1amv5mo3 {\n  --color__1amv5mo0: blue;\n  background-color: var(--color__1amv5mo0);\n  padding: 20px;\n}\n@media screen and (min-width: 200px) {\n  @container styles_my-container__1amv5mo1 (min-width: 400px) {\n    .styles_block__1amv5mo3 {\n      color: white;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-esbuild--production.css",
    "content": "._1amv5mo2 {\n  container-type: size;\n  container-name: _1amv5mo1;\n  width: 500px;\n}\n._1amv5mo3 {\n  --_1amv5mo0: blue;\n  background-color: var(--_1amv5mo0);\n  padding: 20px;\n}\n@media screen and (min-width: 200px) {\n  @container _1amv5mo1 (min-width: 400px) {\n    ._1amv5mo3 {\n      color: white;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-esbuild-next--development.css",
    "content": ".styles_container__1amv5mo2 {\n  container-type: size;\n  container-name: styles_my-container__1amv5mo1;\n  width: 500px;\n}\n.styles_block__1amv5mo3 {\n  --color__1amv5mo0: blue;\n  background-color: var(--color__1amv5mo0);\n  padding: 20px;\n}\n@media screen and (min-width: 200px) {\n  @container styles_my-container__1amv5mo1 (min-width: 400px) {\n    .styles_block__1amv5mo3 {\n      color: white;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-esbuild-next--production.css",
    "content": "._1amv5mo2 {\n  container-type: size;\n  container-name: _1amv5mo1;\n  width: 500px;\n}\n._1amv5mo3 {\n  --_1amv5mo0: blue;\n  background-color: var(--_1amv5mo0);\n  padding: 20px;\n}\n@media screen and (min-width: 200px) {\n  @container _1amv5mo1 (min-width: 400px) {\n    ._1amv5mo3 {\n      color: white;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-mini-css-extract--development.css",
    "content": ".styles_container__cj5d032 {\n  container-type: size;\n  container-name: styles_my-container__cj5d031;\n  width: 500px;\n}\n.styles_block__cj5d033 {\n  --color__cj5d030: blue;\n  background-color: var(--color__cj5d030);\n  padding: 20px;\n}\n@media screen and (min-width: 200px) {\n  @container styles_my-container__cj5d031 (min-width: 400px) {\n    .styles_block__cj5d033 {\n      color: white;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-mini-css-extract--production.css",
    "content": ".cj5d032 {\n  container-type: size;\n  container-name: cj5d031;\n  width: 500px;\n}\n.cj5d033 {\n  --cj5d030: blue;\n  background-color: var(--cj5d030);\n  padding: 20px;\n}\n@media screen and (min-width: 200px) {\n  @container cj5d031 (min-width: 400px) {\n    .cj5d033 {\n      color: white;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--development.css",
    "content": ".styles_container__cj5d032 {\n  width: 500px;\n  container: styles_my-container__cj5d031/size;\n}\n.styles_block__cj5d033 {\n  --color__cj5d030: blue;\n  background-color: var(--color__cj5d030);\n  padding: 20px;\n}\n@media screen and (width >= 200px) {\n  @container styles_my-container__cj5d031 (width >= 400px) {\n    .styles_block__cj5d033 {\n      color: #fff;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--production.css",
    "content": ".cj5d032 {\n  width: 500px;\n  container: cj5d031/size;\n}\n.cj5d033 {\n  --cj5d030: blue;\n  background-color: var(--cj5d030);\n  padding: 20px;\n}\n@media screen and (width >= 200px) {\n  @container cj5d031 (width >= 400px) {\n    .cj5d033 {\n      color: #fff;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/low-level.playwright.ts-snapshots/low-level-vite--production.css",
    "content": "._1amv5mo2 {\n  container-type: size;\n  container-name: _1amv5mo1;\n  width: 500px;\n}\n._1amv5mo3 {\n  --_1amv5mo0: blue;\n  background-color: var(--_1amv5mo0);\n  padding: 20px;\n}\n@media screen and (min-width: 200px) {\n  @container _1amv5mo1 (min-width: 400px) {\n    ._1amv5mo3 {\n      color: white;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { all as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`recipes - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('recipes', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot('recipes.png');\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`recipes-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-esbuild--development.css",
    "content": ".styles_calm__103pmpm2 {\n  --bg__103pmpm0: powderblue;\n  --fg__103pmpm1: white;\n}\n.styles_angry__103pmpm3 {\n  --bg__103pmpm0: crimson;\n  --fg__103pmpm1: black;\n}\n.styles_reset__103pmpm4 {\n  border: 0;\n}\n.styles_button__103pmpm5 {\n  border-radius: 6px;\n  background: var(--bg__103pmpm0);\n  color: var(--fg__103pmpm1);\n  transition: all 0.2s ease;\n}\n.styles_button__103pmpm5:hover {\n  transform: translateY(-3px);\n}\n.styles_button_size_small__103pmpm6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n.styles_button_size_standard__103pmpm7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n.styles_button_tone_angry__103pmpm9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n.styles_button_bold_true__103pmpma {\n  font-weight: bold;\n}\n.styles_stack__103pmpmc {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.styles_stack_space_medium__103pmpmd {\n  gap: 20px;\n}\n@media only screen and (min-width: 600px) {\n  .styles_button_compound_0__103pmpmb {\n    border: 2px green solid;\n  }\n  .styles_stack_space_medium__103pmpmd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-esbuild--production.css",
    "content": "._103pmpm2 {\n  --_103pmpm0: powderblue;\n  --_103pmpm1: white;\n}\n._103pmpm3 {\n  --_103pmpm0: crimson;\n  --_103pmpm1: black;\n}\n._103pmpm4 {\n  border: 0;\n}\n._103pmpm5 {\n  border-radius: 6px;\n  background: var(--_103pmpm0);\n  color: var(--_103pmpm1);\n  transition: all 0.2s ease;\n}\n._103pmpm5:hover {\n  transform: translateY(-3px);\n}\n._103pmpm6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n._103pmpm7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n._103pmpm9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n._103pmpma {\n  font-weight: bold;\n}\n._103pmpmc {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n._103pmpmd {\n  gap: 20px;\n}\n@media only screen and (min-width: 600px) {\n  ._103pmpmb {\n    border: 2px green solid;\n  }\n  ._103pmpmd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-esbuild-next--development.css",
    "content": ".styles_calm__103pmpm2 {\n  --bg__103pmpm0: powderblue;\n  --fg__103pmpm1: white;\n}\n.styles_angry__103pmpm3 {\n  --bg__103pmpm0: crimson;\n  --fg__103pmpm1: black;\n}\n.styles_reset__103pmpm4 {\n  border: 0;\n}\n.styles_button__103pmpm5 {\n  border-radius: 6px;\n  background: var(--bg__103pmpm0);\n  color: var(--fg__103pmpm1);\n  transition: all 0.2s ease;\n}\n.styles_button__103pmpm5:hover {\n  transform: translateY(-3px);\n}\n.styles_button_size_small__103pmpm6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n.styles_button_size_standard__103pmpm7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n.styles_button_tone_angry__103pmpm9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n.styles_button_bold_true__103pmpma {\n  font-weight: bold;\n}\n.styles_stack__103pmpmc {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.styles_stack_space_medium__103pmpmd {\n  gap: 20px;\n}\n@media only screen and (min-width: 600px) {\n  .styles_button_compound_0__103pmpmb {\n    border: 2px green solid;\n  }\n  .styles_stack_space_medium__103pmpmd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-esbuild-next--production.css",
    "content": "._103pmpm2 {\n  --_103pmpm0: powderblue;\n  --_103pmpm1: white;\n}\n._103pmpm3 {\n  --_103pmpm0: crimson;\n  --_103pmpm1: black;\n}\n._103pmpm4 {\n  border: 0;\n}\n._103pmpm5 {\n  border-radius: 6px;\n  background: var(--_103pmpm0);\n  color: var(--_103pmpm1);\n  transition: all 0.2s ease;\n}\n._103pmpm5:hover {\n  transform: translateY(-3px);\n}\n._103pmpm6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n._103pmpm7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n._103pmpm9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n._103pmpma {\n  font-weight: bold;\n}\n._103pmpmc {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n._103pmpmd {\n  gap: 20px;\n}\n@media only screen and (min-width: 600px) {\n  ._103pmpmb {\n    border: 2px green solid;\n  }\n  ._103pmpmd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-mini-css-extract--development.css",
    "content": ".styles_calm__spi1fr2 {\n  --bg__spi1fr0: powderblue;\n  --fg__spi1fr1: white;\n}\n.styles_angry__spi1fr3 {\n  --bg__spi1fr0: crimson;\n  --fg__spi1fr1: black;\n}\n.styles_reset__spi1fr4 {\n  border: 0;\n}\n.styles_button__spi1fr5 {\n  border-radius: 6px;\n  background: var(--bg__spi1fr0);\n  color: var(--fg__spi1fr1);\n  transition: all 0.2s ease;\n}\n.styles_button__spi1fr5:hover {\n  transform: translateY(-3px);\n}\n.styles_button_size_small__spi1fr6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n.styles_button_size_standard__spi1fr7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n.styles_button_tone_angry__spi1fr9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n.styles_button_bold_true__spi1fra {\n  font-weight: bold;\n}\n.styles_stack__spi1frc {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.styles_stack_space_medium__spi1frd {\n  gap: 20px;\n}\n@media only screen and (min-width: 600px) {\n  .styles_button_compound_0__spi1frb {\n    border: 2px green solid;\n  }\n  .styles_stack_space_medium__spi1frd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-mini-css-extract--production.css",
    "content": ".spi1fr2 {\n  --spi1fr0: powderblue;\n  --spi1fr1: white;\n}\n.spi1fr3 {\n  --spi1fr0: crimson;\n  --spi1fr1: black;\n}\n.spi1fr4 {\n  border: 0;\n}\n.spi1fr5 {\n  border-radius: 6px;\n  background: var(--spi1fr0);\n  color: var(--spi1fr1);\n  transition: all 0.2s ease;\n}\n.spi1fr5:hover {\n  transform: translateY(-3px);\n}\n.spi1fr6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n.spi1fr7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n.spi1fr9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n.spi1fra {\n  font-weight: bold;\n}\n.spi1frc {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.spi1frd {\n  gap: 20px;\n}\n@media only screen and (min-width: 600px) {\n  .spi1frb {\n    border: 2px green solid;\n  }\n  .spi1frd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--development.css",
    "content": ".styles_calm__spi1fr2 {\n  --bg__spi1fr0: powderblue;\n  --fg__spi1fr1: white;\n}\n.styles_angry__spi1fr3 {\n  --bg__spi1fr0: crimson;\n  --fg__spi1fr1: black;\n}\n.styles_reset__spi1fr4 {\n  border: 0;\n}\n.styles_button__spi1fr5 {\n  background: var(--bg__spi1fr0);\n  color: var(--fg__spi1fr1);\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.styles_button__spi1fr5:hover {\n  transform: translateY(-3px);\n}\n.styles_button_size_small__spi1fr6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n.styles_button_size_standard__spi1fr7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n.styles_button_tone_angry__spi1fr9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n.styles_button_bold_true__spi1fra {\n  font-weight: bold;\n}\n.styles_stack__spi1frc {\n  flex-direction: column;\n  align-items: flex-start;\n  display: flex;\n}\n.styles_stack_space_medium__spi1frd {\n  gap: 20px;\n}\n@media only screen and (width >= 600px) {\n  .styles_button_compound_0__spi1frb {\n    border: 2px solid green;\n  }\n  .styles_stack_space_medium__spi1frd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--production.css",
    "content": ".spi1fr2 {\n  --spi1fr0: powderblue;\n  --spi1fr1: white;\n}\n.spi1fr3 {\n  --spi1fr0: crimson;\n  --spi1fr1: black;\n}\n.spi1fr4 {\n  border: 0;\n}\n.spi1fr5 {\n  background: var(--spi1fr0);\n  color: var(--spi1fr1);\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.spi1fr5:hover {\n  transform: translateY(-3px);\n}\n.spi1fr6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n.spi1fr7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n.spi1fr9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n.spi1fra {\n  font-weight: bold;\n}\n.spi1frc {\n  flex-direction: column;\n  align-items: flex-start;\n  display: flex;\n}\n.spi1frd {\n  gap: 20px;\n}\n@media only screen and (width >= 600px) {\n  .spi1frb {\n    border: 2px solid green;\n  }\n  .spi1frd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/recipes.playwright.ts-snapshots/recipes-vite--production.css",
    "content": "._103pmpm2 {\n  --_103pmpm0: powderblue;\n  --_103pmpm1: white;\n}\n._103pmpm3 {\n  --_103pmpm0: crimson;\n  --_103pmpm1: black;\n}\n._103pmpm4 {\n  border: 0;\n}\n._103pmpm5 {\n  border-radius: 6px;\n  background: var(--_103pmpm0);\n  color: var(--_103pmpm1);\n  transition: all 0.2s ease;\n}\n._103pmpm5:hover {\n  transform: translateY(-3px);\n}\n._103pmpm6 {\n  font-size: 16px;\n  line-height: 24px;\n}\n._103pmpm7 {\n  font-size: 24px;\n  line-height: 40px;\n}\n._103pmpm9:hover {\n  box-shadow: 0 10px 6px -6px #777;\n}\n._103pmpma {\n  font-weight: bold;\n}\n._103pmpmc {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n._103pmpmd {\n  gap: 20px;\n}\n@media only screen and (min-width: 600px) {\n  ._103pmpmb {\n    border: 2px green solid;\n  }\n  ._103pmpmd {\n    gap: 30px;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { all as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`sprinkles - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('sprinkles', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot('sprinkles.png');\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`sprinkles-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-esbuild--development.css",
    "content": "@layer responsive-layer-name;\n@layer unconditional-layer-name;\n.styles_container__1j5zl923 {\n  container-name: styles_containerName__1j5zl922;\n  container-type: size;\n}\n.styles_display_flex_mobile__1j5zl924 {\n  display: flex;\n}\n.styles_display_none_mobile__1j5zl928 {\n  display: none;\n}\n.styles_display_block_mobile__1j5zl92c {\n  display: block;\n}\n.styles_paddingTop_small_mobile__1j5zl92g {\n  padding-top: 10px;\n}\n.styles_paddingTop_medium_mobile__1j5zl92k {\n  padding-top: 20px;\n}\n.styles_color_red__1j5zl9218 {\n  --textAlpha__1j5zl921: 1;\n  color: rgba(255, 0, 0, var(--textAlpha__1j5zl921));\n}\nbody {\n  margin: 0;\n}\nbody .styles__1j5zl921c {\n  background: red;\n}\n@media screen and (min-width: 768px) {\n  @container styles_containerName__1j5zl922 (min-width: 768px) {\n    .styles_display_flex_tablet__1j5zl925 {\n      display: flex;\n    }\n    .styles_display_none_tablet__1j5zl929 {\n      display: none;\n    }\n    .styles_display_block_tablet__1j5zl92d {\n      display: block;\n    }\n    .styles_paddingTop_small_tablet__1j5zl92h {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_tablet__1j5zl92l {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (min-width: 1024px) {\n  @container styles_containerName__1j5zl922 (min-width: 1024px) {\n    .styles_display_flex_desktop__1j5zl926 {\n      display: flex;\n    }\n    .styles_display_none_desktop__1j5zl92a {\n      display: none;\n    }\n    .styles_display_block_desktop__1j5zl92e {\n      display: block;\n    }\n    .styles_paddingTop_small_desktop__1j5zl92i {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_desktop__1j5zl92m {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] .styles_display_flex_darkDesktop__1j5zl927 {\n      display: flex;\n    }\n    [data-dark-mode] .styles_display_none_darkDesktop__1j5zl92b {\n      display: none;\n    }\n    [data-dark-mode] .styles_display_block_darkDesktop__1j5zl92f {\n      display: block;\n    }\n    [data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92j {\n      padding-top: 10px;\n    }\n    [data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92n {\n      padding-top: 20px;\n    }\n  }\n}\n@layer responsive-layer-name {\n  .styles_background_red_mobile__1j5zl92o {\n    --alpha__1j5zl920: 1;\n    background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n  }\n  .styles_backgroundOpacity_1_mobile__1j5zl92s {\n    --alpha__1j5zl920: 1;\n  }\n  .styles_backgroundOpacity_0\\.1_mobile__1j5zl92w {\n    --alpha__1j5zl920: 0.1;\n  }\n  .styles_backgroundOpacity_0\\.2_mobile__1j5zl9210 {\n    --alpha__1j5zl920: 0.2;\n  }\n  .styles_backgroundOpacity_0\\.3_mobile__1j5zl9214 {\n    --alpha__1j5zl920: 0.3;\n  }\n  @media screen and (min-width: 768px) {\n    @container styles_containerName__1j5zl922 (min-width: 768px) {\n      .styles_background_red_tablet__1j5zl92p {\n        --alpha__1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n      }\n      .styles_backgroundOpacity_1_tablet__1j5zl92t {\n        --alpha__1j5zl920: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_tablet__1j5zl92x {\n        --alpha__1j5zl920: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_tablet__1j5zl9211 {\n        --alpha__1j5zl920: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_tablet__1j5zl9215 {\n        --alpha__1j5zl920: 0.3;\n      }\n    }\n  }\n  @media screen and (min-width: 1024px) {\n    @container styles_containerName__1j5zl922 (min-width: 1024px) {\n      .styles_background_red_desktop__1j5zl92q {\n        --alpha__1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n      }\n      .styles_backgroundOpacity_1_desktop__1j5zl92u {\n        --alpha__1j5zl920: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_desktop__1j5zl92y {\n        --alpha__1j5zl920: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_desktop__1j5zl9212 {\n        --alpha__1j5zl920: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_desktop__1j5zl9216 {\n        --alpha__1j5zl920: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] .styles_background_red_darkDesktop__1j5zl92r {\n        --alpha__1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n      }\n      [data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92v {\n        --alpha__1j5zl920: 1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.1_darkDesktop__1j5zl92z {\n        --alpha__1j5zl920: 0.1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.2_darkDesktop__1j5zl9213 {\n        --alpha__1j5zl920: 0.2;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.3_darkDesktop__1j5zl9217 {\n        --alpha__1j5zl920: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  .styles_textOpacity_1__1j5zl9219 {\n    --textAlpha__1j5zl921: 1;\n  }\n  .styles_textOpacity_0\\.8__1j5zl921a {\n    --textAlpha__1j5zl921: 0.8;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-esbuild--production.css",
    "content": "@layer responsive-layer-name;\n@layer unconditional-layer-name;\n._1j5zl923 {\n  container-name: _1j5zl922;\n  container-type: size;\n}\n._1j5zl924 {\n  display: flex;\n}\n._1j5zl928 {\n  display: none;\n}\n._1j5zl92c {\n  display: block;\n}\n._1j5zl92g {\n  padding-top: 10px;\n}\n._1j5zl92k {\n  padding-top: 20px;\n}\n._1j5zl9218 {\n  --_1j5zl921: 1;\n  color: rgba(255, 0, 0, var(--_1j5zl921));\n}\nbody {\n  margin: 0;\n}\nbody ._1j5zl921c {\n  background: red;\n}\n@media screen and (min-width: 768px) {\n  @container _1j5zl922 (min-width: 768px) {\n    ._1j5zl925 {\n      display: flex;\n    }\n    ._1j5zl929 {\n      display: none;\n    }\n    ._1j5zl92d {\n      display: block;\n    }\n    ._1j5zl92h {\n      padding-top: 10px;\n    }\n    ._1j5zl92l {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (min-width: 1024px) {\n  @container _1j5zl922 (min-width: 1024px) {\n    ._1j5zl926 {\n      display: flex;\n    }\n    ._1j5zl92a {\n      display: none;\n    }\n    ._1j5zl92e {\n      display: block;\n    }\n    ._1j5zl92i {\n      padding-top: 10px;\n    }\n    ._1j5zl92m {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] ._1j5zl927 {\n      display: flex;\n    }\n    [data-dark-mode] ._1j5zl92b {\n      display: none;\n    }\n    [data-dark-mode] ._1j5zl92f {\n      display: block;\n    }\n    [data-dark-mode] ._1j5zl92j {\n      padding-top: 10px;\n    }\n    [data-dark-mode] ._1j5zl92n {\n      padding-top: 20px;\n    }\n  }\n}\n@layer responsive-layer-name {\n  ._1j5zl92o {\n    --_1j5zl920: 1;\n    background: rgba(255, 0, 0, var(--_1j5zl920));\n  }\n  ._1j5zl92s {\n    --_1j5zl920: 1;\n  }\n  ._1j5zl92w {\n    --_1j5zl920: 0.1;\n  }\n  ._1j5zl9210 {\n    --_1j5zl920: 0.2;\n  }\n  ._1j5zl9214 {\n    --_1j5zl920: 0.3;\n  }\n  @media screen and (min-width: 768px) {\n    @container _1j5zl922 (min-width: 768px) {\n      ._1j5zl92p {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      ._1j5zl92t {\n        --_1j5zl920: 1;\n      }\n      ._1j5zl92x {\n        --_1j5zl920: 0.1;\n      }\n      ._1j5zl9211 {\n        --_1j5zl920: 0.2;\n      }\n      ._1j5zl9215 {\n        --_1j5zl920: 0.3;\n      }\n    }\n  }\n  @media screen and (min-width: 1024px) {\n    @container _1j5zl922 (min-width: 1024px) {\n      ._1j5zl92q {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      ._1j5zl92u {\n        --_1j5zl920: 1;\n      }\n      ._1j5zl92y {\n        --_1j5zl920: 0.1;\n      }\n      ._1j5zl9212 {\n        --_1j5zl920: 0.2;\n      }\n      ._1j5zl9216 {\n        --_1j5zl920: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] ._1j5zl92r {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      [data-dark-mode] ._1j5zl92v {\n        --_1j5zl920: 1;\n      }\n      [data-dark-mode] ._1j5zl92z {\n        --_1j5zl920: 0.1;\n      }\n      [data-dark-mode] ._1j5zl9213 {\n        --_1j5zl920: 0.2;\n      }\n      [data-dark-mode] ._1j5zl9217 {\n        --_1j5zl920: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  ._1j5zl9219 {\n    --_1j5zl921: 1;\n  }\n  ._1j5zl921a {\n    --_1j5zl921: 0.8;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-esbuild-next--development.css",
    "content": "@layer responsive-layer-name;\n@layer unconditional-layer-name;\n.styles_container__1j5zl923 {\n  container-name: styles_containerName__1j5zl922;\n  container-type: size;\n}\n.styles_display_flex_mobile__1j5zl924 {\n  display: flex;\n}\n.styles_display_none_mobile__1j5zl928 {\n  display: none;\n}\n.styles_display_block_mobile__1j5zl92c {\n  display: block;\n}\n.styles_paddingTop_small_mobile__1j5zl92g {\n  padding-top: 10px;\n}\n.styles_paddingTop_medium_mobile__1j5zl92k {\n  padding-top: 20px;\n}\n.styles_color_red__1j5zl9218 {\n  --textAlpha__1j5zl921: 1;\n  color: rgba(255, 0, 0, var(--textAlpha__1j5zl921));\n}\nbody {\n  margin: 0;\n}\nbody .styles__1j5zl921c {\n  background: red;\n}\n@media screen and (min-width: 768px) {\n  @container styles_containerName__1j5zl922 (min-width: 768px) {\n    .styles_display_flex_tablet__1j5zl925 {\n      display: flex;\n    }\n    .styles_display_none_tablet__1j5zl929 {\n      display: none;\n    }\n    .styles_display_block_tablet__1j5zl92d {\n      display: block;\n    }\n    .styles_paddingTop_small_tablet__1j5zl92h {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_tablet__1j5zl92l {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (min-width: 1024px) {\n  @container styles_containerName__1j5zl922 (min-width: 1024px) {\n    .styles_display_flex_desktop__1j5zl926 {\n      display: flex;\n    }\n    .styles_display_none_desktop__1j5zl92a {\n      display: none;\n    }\n    .styles_display_block_desktop__1j5zl92e {\n      display: block;\n    }\n    .styles_paddingTop_small_desktop__1j5zl92i {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_desktop__1j5zl92m {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] .styles_display_flex_darkDesktop__1j5zl927 {\n      display: flex;\n    }\n    [data-dark-mode] .styles_display_none_darkDesktop__1j5zl92b {\n      display: none;\n    }\n    [data-dark-mode] .styles_display_block_darkDesktop__1j5zl92f {\n      display: block;\n    }\n    [data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92j {\n      padding-top: 10px;\n    }\n    [data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92n {\n      padding-top: 20px;\n    }\n  }\n}\n@layer responsive-layer-name {\n  .styles_background_red_mobile__1j5zl92o {\n    --alpha__1j5zl920: 1;\n    background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n  }\n  .styles_backgroundOpacity_1_mobile__1j5zl92s {\n    --alpha__1j5zl920: 1;\n  }\n  .styles_backgroundOpacity_0\\.1_mobile__1j5zl92w {\n    --alpha__1j5zl920: 0.1;\n  }\n  .styles_backgroundOpacity_0\\.2_mobile__1j5zl9210 {\n    --alpha__1j5zl920: 0.2;\n  }\n  .styles_backgroundOpacity_0\\.3_mobile__1j5zl9214 {\n    --alpha__1j5zl920: 0.3;\n  }\n  @media screen and (min-width: 768px) {\n    @container styles_containerName__1j5zl922 (min-width: 768px) {\n      .styles_background_red_tablet__1j5zl92p {\n        --alpha__1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n      }\n      .styles_backgroundOpacity_1_tablet__1j5zl92t {\n        --alpha__1j5zl920: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_tablet__1j5zl92x {\n        --alpha__1j5zl920: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_tablet__1j5zl9211 {\n        --alpha__1j5zl920: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_tablet__1j5zl9215 {\n        --alpha__1j5zl920: 0.3;\n      }\n    }\n  }\n  @media screen and (min-width: 1024px) {\n    @container styles_containerName__1j5zl922 (min-width: 1024px) {\n      .styles_background_red_desktop__1j5zl92q {\n        --alpha__1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n      }\n      .styles_backgroundOpacity_1_desktop__1j5zl92u {\n        --alpha__1j5zl920: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_desktop__1j5zl92y {\n        --alpha__1j5zl920: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_desktop__1j5zl9212 {\n        --alpha__1j5zl920: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_desktop__1j5zl9216 {\n        --alpha__1j5zl920: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] .styles_background_red_darkDesktop__1j5zl92r {\n        --alpha__1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--alpha__1j5zl920));\n      }\n      [data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92v {\n        --alpha__1j5zl920: 1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.1_darkDesktop__1j5zl92z {\n        --alpha__1j5zl920: 0.1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.2_darkDesktop__1j5zl9213 {\n        --alpha__1j5zl920: 0.2;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.3_darkDesktop__1j5zl9217 {\n        --alpha__1j5zl920: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  .styles_textOpacity_1__1j5zl9219 {\n    --textAlpha__1j5zl921: 1;\n  }\n  .styles_textOpacity_0\\.8__1j5zl921a {\n    --textAlpha__1j5zl921: 0.8;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-esbuild-next--production.css",
    "content": "@layer responsive-layer-name;\n@layer unconditional-layer-name;\n._1j5zl923 {\n  container-name: _1j5zl922;\n  container-type: size;\n}\n._1j5zl924 {\n  display: flex;\n}\n._1j5zl928 {\n  display: none;\n}\n._1j5zl92c {\n  display: block;\n}\n._1j5zl92g {\n  padding-top: 10px;\n}\n._1j5zl92k {\n  padding-top: 20px;\n}\n._1j5zl9218 {\n  --_1j5zl921: 1;\n  color: rgba(255, 0, 0, var(--_1j5zl921));\n}\nbody {\n  margin: 0;\n}\nbody ._1j5zl921c {\n  background: red;\n}\n@media screen and (min-width: 768px) {\n  @container _1j5zl922 (min-width: 768px) {\n    ._1j5zl925 {\n      display: flex;\n    }\n    ._1j5zl929 {\n      display: none;\n    }\n    ._1j5zl92d {\n      display: block;\n    }\n    ._1j5zl92h {\n      padding-top: 10px;\n    }\n    ._1j5zl92l {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (min-width: 1024px) {\n  @container _1j5zl922 (min-width: 1024px) {\n    ._1j5zl926 {\n      display: flex;\n    }\n    ._1j5zl92a {\n      display: none;\n    }\n    ._1j5zl92e {\n      display: block;\n    }\n    ._1j5zl92i {\n      padding-top: 10px;\n    }\n    ._1j5zl92m {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] ._1j5zl927 {\n      display: flex;\n    }\n    [data-dark-mode] ._1j5zl92b {\n      display: none;\n    }\n    [data-dark-mode] ._1j5zl92f {\n      display: block;\n    }\n    [data-dark-mode] ._1j5zl92j {\n      padding-top: 10px;\n    }\n    [data-dark-mode] ._1j5zl92n {\n      padding-top: 20px;\n    }\n  }\n}\n@layer responsive-layer-name {\n  ._1j5zl92o {\n    --_1j5zl920: 1;\n    background: rgba(255, 0, 0, var(--_1j5zl920));\n  }\n  ._1j5zl92s {\n    --_1j5zl920: 1;\n  }\n  ._1j5zl92w {\n    --_1j5zl920: 0.1;\n  }\n  ._1j5zl9210 {\n    --_1j5zl920: 0.2;\n  }\n  ._1j5zl9214 {\n    --_1j5zl920: 0.3;\n  }\n  @media screen and (min-width: 768px) {\n    @container _1j5zl922 (min-width: 768px) {\n      ._1j5zl92p {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      ._1j5zl92t {\n        --_1j5zl920: 1;\n      }\n      ._1j5zl92x {\n        --_1j5zl920: 0.1;\n      }\n      ._1j5zl9211 {\n        --_1j5zl920: 0.2;\n      }\n      ._1j5zl9215 {\n        --_1j5zl920: 0.3;\n      }\n    }\n  }\n  @media screen and (min-width: 1024px) {\n    @container _1j5zl922 (min-width: 1024px) {\n      ._1j5zl92q {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      ._1j5zl92u {\n        --_1j5zl920: 1;\n      }\n      ._1j5zl92y {\n        --_1j5zl920: 0.1;\n      }\n      ._1j5zl9212 {\n        --_1j5zl920: 0.2;\n      }\n      ._1j5zl9216 {\n        --_1j5zl920: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] ._1j5zl92r {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      [data-dark-mode] ._1j5zl92v {\n        --_1j5zl920: 1;\n      }\n      [data-dark-mode] ._1j5zl92z {\n        --_1j5zl920: 0.1;\n      }\n      [data-dark-mode] ._1j5zl9213 {\n        --_1j5zl920: 0.2;\n      }\n      [data-dark-mode] ._1j5zl9217 {\n        --_1j5zl920: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  ._1j5zl9219 {\n    --_1j5zl921: 1;\n  }\n  ._1j5zl921a {\n    --_1j5zl921: 0.8;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-mini-css-extract--development.css",
    "content": "@layer responsive-layer-name;\n@layer unconditional-layer-name;\n.styles_container__3nw5tz3 {\n  container-name: styles_containerName__3nw5tz2;\n  container-type: size;\n}\n.styles_display_flex_mobile__3nw5tz4 {\n  display: flex;\n}\n.styles_display_none_mobile__3nw5tz8 {\n  display: none;\n}\n.styles_display_block_mobile__3nw5tzc {\n  display: block;\n}\n.styles_paddingTop_small_mobile__3nw5tzg {\n  padding-top: 10px;\n}\n.styles_paddingTop_medium_mobile__3nw5tzk {\n  padding-top: 20px;\n}\n.styles_color_red__3nw5tz18 {\n  --textAlpha__3nw5tz1: 1;\n  color: rgba(255, 0, 0, var(--textAlpha__3nw5tz1));\n}\nbody {\n  margin: 0;\n}\nbody .styles__3nw5tz1c {\n  background: red;\n}\n@media screen and (min-width: 768px) {\n  @container styles_containerName__3nw5tz2 (min-width: 768px) {\n    .styles_display_flex_tablet__3nw5tz5 {\n      display: flex;\n    }\n    .styles_display_none_tablet__3nw5tz9 {\n      display: none;\n    }\n    .styles_display_block_tablet__3nw5tzd {\n      display: block;\n    }\n    .styles_paddingTop_small_tablet__3nw5tzh {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_tablet__3nw5tzl {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (min-width: 1024px) {\n  @container styles_containerName__3nw5tz2 (min-width: 1024px) {\n    .styles_display_flex_desktop__3nw5tz6 {\n      display: flex;\n    }\n    .styles_display_none_desktop__3nw5tza {\n      display: none;\n    }\n    .styles_display_block_desktop__3nw5tze {\n      display: block;\n    }\n    .styles_paddingTop_small_desktop__3nw5tzi {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_desktop__3nw5tzm {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] .styles_display_flex_darkDesktop__3nw5tz7 {\n      display: flex;\n    }\n    [data-dark-mode] .styles_display_none_darkDesktop__3nw5tzb {\n      display: none;\n    }\n    [data-dark-mode] .styles_display_block_darkDesktop__3nw5tzf {\n      display: block;\n    }\n    [data-dark-mode] .styles_paddingTop_small_darkDesktop__3nw5tzj {\n      padding-top: 10px;\n    }\n    [data-dark-mode] .styles_paddingTop_medium_darkDesktop__3nw5tzn {\n      padding-top: 20px;\n    }\n  }\n}\n@layer responsive-layer-name {\n  .styles_background_red_mobile__3nw5tzo {\n    --alpha__3nw5tz0: 1;\n    background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n  }\n  .styles_backgroundOpacity_1_mobile__3nw5tzs {\n    --alpha__3nw5tz0: 1;\n  }\n  .styles_backgroundOpacity_0\\.1_mobile__3nw5tzw {\n    --alpha__3nw5tz0: 0.1;\n  }\n  .styles_backgroundOpacity_0\\.2_mobile__3nw5tz10 {\n    --alpha__3nw5tz0: 0.2;\n  }\n  .styles_backgroundOpacity_0\\.3_mobile__3nw5tz14 {\n    --alpha__3nw5tz0: 0.3;\n  }\n  @media screen and (min-width: 768px) {\n    @container styles_containerName__3nw5tz2 (min-width: 768px) {\n      .styles_background_red_tablet__3nw5tzp {\n        --alpha__3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n      }\n      .styles_backgroundOpacity_1_tablet__3nw5tzt {\n        --alpha__3nw5tz0: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_tablet__3nw5tzx {\n        --alpha__3nw5tz0: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_tablet__3nw5tz11 {\n        --alpha__3nw5tz0: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_tablet__3nw5tz15 {\n        --alpha__3nw5tz0: 0.3;\n      }\n    }\n  }\n  @media screen and (min-width: 1024px) {\n    @container styles_containerName__3nw5tz2 (min-width: 1024px) {\n      .styles_background_red_desktop__3nw5tzq {\n        --alpha__3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n      }\n      .styles_backgroundOpacity_1_desktop__3nw5tzu {\n        --alpha__3nw5tz0: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_desktop__3nw5tzy {\n        --alpha__3nw5tz0: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_desktop__3nw5tz12 {\n        --alpha__3nw5tz0: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_desktop__3nw5tz16 {\n        --alpha__3nw5tz0: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] .styles_background_red_darkDesktop__3nw5tzr {\n        --alpha__3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n      }\n      [data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__3nw5tzv {\n        --alpha__3nw5tz0: 1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.1_darkDesktop__3nw5tzz {\n        --alpha__3nw5tz0: 0.1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.2_darkDesktop__3nw5tz13 {\n        --alpha__3nw5tz0: 0.2;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.3_darkDesktop__3nw5tz17 {\n        --alpha__3nw5tz0: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  .styles_textOpacity_1__3nw5tz19 {\n    --textAlpha__3nw5tz1: 1;\n  }\n  .styles_textOpacity_0\\.8__3nw5tz1a {\n    --textAlpha__3nw5tz1: 0.8;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-mini-css-extract--production.css",
    "content": "@layer responsive-layer-name;\n@layer unconditional-layer-name;\n._3nw5tz3 {\n  container-name: _3nw5tz2;\n  container-type: size;\n}\n._3nw5tz4 {\n  display: flex;\n}\n._3nw5tz8 {\n  display: none;\n}\n._3nw5tzc {\n  display: block;\n}\n._3nw5tzg {\n  padding-top: 10px;\n}\n._3nw5tzk {\n  padding-top: 20px;\n}\n._3nw5tz18 {\n  --_3nw5tz1: 1;\n  color: rgba(255, 0, 0, var(--_3nw5tz1));\n}\nbody {\n  margin: 0;\n}\nbody ._3nw5tz1c {\n  background: red;\n}\n@media screen and (min-width: 768px) {\n  @container _3nw5tz2 (min-width: 768px) {\n    ._3nw5tz5 {\n      display: flex;\n    }\n    ._3nw5tz9 {\n      display: none;\n    }\n    ._3nw5tzd {\n      display: block;\n    }\n    ._3nw5tzh {\n      padding-top: 10px;\n    }\n    ._3nw5tzl {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (min-width: 1024px) {\n  @container _3nw5tz2 (min-width: 1024px) {\n    ._3nw5tz6 {\n      display: flex;\n    }\n    ._3nw5tza {\n      display: none;\n    }\n    ._3nw5tze {\n      display: block;\n    }\n    ._3nw5tzi {\n      padding-top: 10px;\n    }\n    ._3nw5tzm {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] ._3nw5tz7 {\n      display: flex;\n    }\n    [data-dark-mode] ._3nw5tzb {\n      display: none;\n    }\n    [data-dark-mode] ._3nw5tzf {\n      display: block;\n    }\n    [data-dark-mode] ._3nw5tzj {\n      padding-top: 10px;\n    }\n    [data-dark-mode] ._3nw5tzn {\n      padding-top: 20px;\n    }\n  }\n}\n@layer responsive-layer-name {\n  ._3nw5tzo {\n    --_3nw5tz0: 1;\n    background: rgba(255, 0, 0, var(--_3nw5tz0));\n  }\n  ._3nw5tzs {\n    --_3nw5tz0: 1;\n  }\n  ._3nw5tzw {\n    --_3nw5tz0: 0.1;\n  }\n  ._3nw5tz10 {\n    --_3nw5tz0: 0.2;\n  }\n  ._3nw5tz14 {\n    --_3nw5tz0: 0.3;\n  }\n  @media screen and (min-width: 768px) {\n    @container _3nw5tz2 (min-width: 768px) {\n      ._3nw5tzp {\n        --_3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--_3nw5tz0));\n      }\n      ._3nw5tzt {\n        --_3nw5tz0: 1;\n      }\n      ._3nw5tzx {\n        --_3nw5tz0: 0.1;\n      }\n      ._3nw5tz11 {\n        --_3nw5tz0: 0.2;\n      }\n      ._3nw5tz15 {\n        --_3nw5tz0: 0.3;\n      }\n    }\n  }\n  @media screen and (min-width: 1024px) {\n    @container _3nw5tz2 (min-width: 1024px) {\n      ._3nw5tzq {\n        --_3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--_3nw5tz0));\n      }\n      ._3nw5tzu {\n        --_3nw5tz0: 1;\n      }\n      ._3nw5tzy {\n        --_3nw5tz0: 0.1;\n      }\n      ._3nw5tz12 {\n        --_3nw5tz0: 0.2;\n      }\n      ._3nw5tz16 {\n        --_3nw5tz0: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] ._3nw5tzr {\n        --_3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--_3nw5tz0));\n      }\n      [data-dark-mode] ._3nw5tzv {\n        --_3nw5tz0: 1;\n      }\n      [data-dark-mode] ._3nw5tzz {\n        --_3nw5tz0: 0.1;\n      }\n      [data-dark-mode] ._3nw5tz13 {\n        --_3nw5tz0: 0.2;\n      }\n      [data-dark-mode] ._3nw5tz17 {\n        --_3nw5tz0: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  ._3nw5tz19 {\n    --_3nw5tz1: 1;\n  }\n  ._3nw5tz1a {\n    --_3nw5tz1: 0.8;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--development.css",
    "content": "@layer responsive-layer-name {\n  .styles_background_red_mobile__3nw5tzo {\n    --alpha__3nw5tz0: 1;\n    background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n  }\n  .styles_backgroundOpacity_1_mobile__3nw5tzs {\n    --alpha__3nw5tz0: 1;\n  }\n  .styles_backgroundOpacity_0\\.1_mobile__3nw5tzw {\n    --alpha__3nw5tz0: 0.1;\n  }\n  .styles_backgroundOpacity_0\\.2_mobile__3nw5tz10 {\n    --alpha__3nw5tz0: 0.2;\n  }\n  .styles_backgroundOpacity_0\\.3_mobile__3nw5tz14 {\n    --alpha__3nw5tz0: 0.3;\n  }\n  @media screen and (width >= 768px) {\n    @container styles_containerName__3nw5tz2 (width >= 768px) {\n      .styles_background_red_tablet__3nw5tzp {\n        --alpha__3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n      }\n      .styles_backgroundOpacity_1_tablet__3nw5tzt {\n        --alpha__3nw5tz0: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_tablet__3nw5tzx {\n        --alpha__3nw5tz0: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_tablet__3nw5tz11 {\n        --alpha__3nw5tz0: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_tablet__3nw5tz15 {\n        --alpha__3nw5tz0: 0.3;\n      }\n    }\n  }\n  @media screen and (width >= 1024px) {\n    @container styles_containerName__3nw5tz2 (width >= 1024px) {\n      .styles_background_red_desktop__3nw5tzq {\n        --alpha__3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n      }\n      .styles_backgroundOpacity_1_desktop__3nw5tzu {\n        --alpha__3nw5tz0: 1;\n      }\n      .styles_backgroundOpacity_0\\.1_desktop__3nw5tzy {\n        --alpha__3nw5tz0: 0.1;\n      }\n      .styles_backgroundOpacity_0\\.2_desktop__3nw5tz12 {\n        --alpha__3nw5tz0: 0.2;\n      }\n      .styles_backgroundOpacity_0\\.3_desktop__3nw5tz16 {\n        --alpha__3nw5tz0: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] .styles_background_red_darkDesktop__3nw5tzr {\n        --alpha__3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--alpha__3nw5tz0));\n      }\n      [data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__3nw5tzv {\n        --alpha__3nw5tz0: 1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.1_darkDesktop__3nw5tzz {\n        --alpha__3nw5tz0: 0.1;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.2_darkDesktop__3nw5tz13 {\n        --alpha__3nw5tz0: 0.2;\n      }\n      [data-dark-mode] .styles_backgroundOpacity_0\\.3_darkDesktop__3nw5tz17 {\n        --alpha__3nw5tz0: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  .styles_textOpacity_1__3nw5tz19 {\n    --textAlpha__3nw5tz1: 1;\n  }\n  .styles_textOpacity_0\\.8__3nw5tz1a {\n    --textAlpha__3nw5tz1: 0.8;\n  }\n}\n.styles_container__3nw5tz3 {\n  container: styles_containerName__3nw5tz2/size;\n}\n.styles_display_flex_mobile__3nw5tz4 {\n  display: flex;\n}\n.styles_display_none_mobile__3nw5tz8 {\n  display: none;\n}\n.styles_display_block_mobile__3nw5tzc {\n  display: block;\n}\n.styles_paddingTop_small_mobile__3nw5tzg {\n  padding-top: 10px;\n}\n.styles_paddingTop_medium_mobile__3nw5tzk {\n  padding-top: 20px;\n}\n.styles_color_red__3nw5tz18 {\n  --textAlpha__3nw5tz1: 1;\n  color: rgba(255, 0, 0, var(--textAlpha__3nw5tz1));\n}\nbody {\n  margin: 0;\n}\nbody .styles__3nw5tz1c {\n  background: red;\n}\n@media screen and (width >= 768px) {\n  @container styles_containerName__3nw5tz2 (width >= 768px) {\n    .styles_display_flex_tablet__3nw5tz5 {\n      display: flex;\n    }\n    .styles_display_none_tablet__3nw5tz9 {\n      display: none;\n    }\n    .styles_display_block_tablet__3nw5tzd {\n      display: block;\n    }\n    .styles_paddingTop_small_tablet__3nw5tzh {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_tablet__3nw5tzl {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (width >= 1024px) {\n  @container styles_containerName__3nw5tz2 (width >= 1024px) {\n    .styles_display_flex_desktop__3nw5tz6 {\n      display: flex;\n    }\n    .styles_display_none_desktop__3nw5tza {\n      display: none;\n    }\n    .styles_display_block_desktop__3nw5tze {\n      display: block;\n    }\n    .styles_paddingTop_small_desktop__3nw5tzi {\n      padding-top: 10px;\n    }\n    .styles_paddingTop_medium_desktop__3nw5tzm {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] .styles_display_flex_darkDesktop__3nw5tz7 {\n      display: flex;\n    }\n    [data-dark-mode] .styles_display_none_darkDesktop__3nw5tzb {\n      display: none;\n    }\n    [data-dark-mode] .styles_display_block_darkDesktop__3nw5tzf {\n      display: block;\n    }\n    [data-dark-mode] .styles_paddingTop_small_darkDesktop__3nw5tzj {\n      padding-top: 10px;\n    }\n    [data-dark-mode] .styles_paddingTop_medium_darkDesktop__3nw5tzn {\n      padding-top: 20px;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--production.css",
    "content": "@layer responsive-layer-name {\n  ._3nw5tzo {\n    --_3nw5tz0: 1;\n    background: rgba(255, 0, 0, var(--_3nw5tz0));\n  }\n  ._3nw5tzs {\n    --_3nw5tz0: 1;\n  }\n  ._3nw5tzw {\n    --_3nw5tz0: 0.1;\n  }\n  ._3nw5tz10 {\n    --_3nw5tz0: 0.2;\n  }\n  ._3nw5tz14 {\n    --_3nw5tz0: 0.3;\n  }\n  @media screen and (width >= 768px) {\n    @container _3nw5tz2 (width >= 768px) {\n      ._3nw5tzp {\n        --_3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--_3nw5tz0));\n      }\n      ._3nw5tzt {\n        --_3nw5tz0: 1;\n      }\n      ._3nw5tzx {\n        --_3nw5tz0: 0.1;\n      }\n      ._3nw5tz11 {\n        --_3nw5tz0: 0.2;\n      }\n      ._3nw5tz15 {\n        --_3nw5tz0: 0.3;\n      }\n    }\n  }\n  @media screen and (width >= 1024px) {\n    @container _3nw5tz2 (width >= 1024px) {\n      ._3nw5tzq {\n        --_3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--_3nw5tz0));\n      }\n      ._3nw5tzu {\n        --_3nw5tz0: 1;\n      }\n      ._3nw5tzy {\n        --_3nw5tz0: 0.1;\n      }\n      ._3nw5tz12 {\n        --_3nw5tz0: 0.2;\n      }\n      ._3nw5tz16 {\n        --_3nw5tz0: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] ._3nw5tzr {\n        --_3nw5tz0: 1;\n        background: rgba(255, 0, 0, var(--_3nw5tz0));\n      }\n      [data-dark-mode] ._3nw5tzv {\n        --_3nw5tz0: 1;\n      }\n      [data-dark-mode] ._3nw5tzz {\n        --_3nw5tz0: 0.1;\n      }\n      [data-dark-mode] ._3nw5tz13 {\n        --_3nw5tz0: 0.2;\n      }\n      [data-dark-mode] ._3nw5tz17 {\n        --_3nw5tz0: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  ._3nw5tz19 {\n    --_3nw5tz1: 1;\n  }\n  ._3nw5tz1a {\n    --_3nw5tz1: 0.8;\n  }\n}\n._3nw5tz3 {\n  container: _3nw5tz2/size;\n}\n._3nw5tz4 {\n  display: flex;\n}\n._3nw5tz8 {\n  display: none;\n}\n._3nw5tzc {\n  display: block;\n}\n._3nw5tzg {\n  padding-top: 10px;\n}\n._3nw5tzk {\n  padding-top: 20px;\n}\n._3nw5tz18 {\n  --_3nw5tz1: 1;\n  color: rgba(255, 0, 0, var(--_3nw5tz1));\n}\nbody {\n  margin: 0;\n}\nbody ._3nw5tz1c {\n  background: red;\n}\n@media screen and (width >= 768px) {\n  @container _3nw5tz2 (width >= 768px) {\n    ._3nw5tz5 {\n      display: flex;\n    }\n    ._3nw5tz9 {\n      display: none;\n    }\n    ._3nw5tzd {\n      display: block;\n    }\n    ._3nw5tzh {\n      padding-top: 10px;\n    }\n    ._3nw5tzl {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (width >= 1024px) {\n  @container _3nw5tz2 (width >= 1024px) {\n    ._3nw5tz6 {\n      display: flex;\n    }\n    ._3nw5tza {\n      display: none;\n    }\n    ._3nw5tze {\n      display: block;\n    }\n    ._3nw5tzi {\n      padding-top: 10px;\n    }\n    ._3nw5tzm {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] ._3nw5tz7 {\n      display: flex;\n    }\n    [data-dark-mode] ._3nw5tzb {\n      display: none;\n    }\n    [data-dark-mode] ._3nw5tzf {\n      display: block;\n    }\n    [data-dark-mode] ._3nw5tzj {\n      padding-top: 10px;\n    }\n    [data-dark-mode] ._3nw5tzn {\n      padding-top: 20px;\n    }\n  }\n}\n"
  },
  {
    "path": "tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-vite--production.css",
    "content": "@layer responsive-layer-name;\n@layer unconditional-layer-name;\n._1j5zl923 {\n  container-name: _1j5zl922;\n  container-type: size;\n}\n._1j5zl924 {\n  display: flex;\n}\n._1j5zl928 {\n  display: none;\n}\n._1j5zl92c {\n  display: block;\n}\n._1j5zl92g {\n  padding-top: 10px;\n}\n._1j5zl92k {\n  padding-top: 20px;\n}\n._1j5zl9218 {\n  --_1j5zl921: 1;\n  color: rgba(255, 0, 0, var(--_1j5zl921));\n}\nbody {\n  margin: 0;\n}\nbody ._1j5zl921c {\n  background: red;\n}\n@media screen and (min-width: 768px) {\n  @container _1j5zl922 (min-width: 768px) {\n    ._1j5zl925 {\n      display: flex;\n    }\n    ._1j5zl929 {\n      display: none;\n    }\n    ._1j5zl92d {\n      display: block;\n    }\n    ._1j5zl92h {\n      padding-top: 10px;\n    }\n    ._1j5zl92l {\n      padding-top: 20px;\n    }\n  }\n}\n@media screen and (min-width: 1024px) {\n  @container _1j5zl922 (min-width: 1024px) {\n    ._1j5zl926 {\n      display: flex;\n    }\n    ._1j5zl92a {\n      display: none;\n    }\n    ._1j5zl92e {\n      display: block;\n    }\n    ._1j5zl92i {\n      padding-top: 10px;\n    }\n    ._1j5zl92m {\n      padding-top: 20px;\n    }\n  }\n  @supports not (display: grid) {\n    [data-dark-mode] ._1j5zl927 {\n      display: flex;\n    }\n    [data-dark-mode] ._1j5zl92b {\n      display: none;\n    }\n    [data-dark-mode] ._1j5zl92f {\n      display: block;\n    }\n    [data-dark-mode] ._1j5zl92j {\n      padding-top: 10px;\n    }\n    [data-dark-mode] ._1j5zl92n {\n      padding-top: 20px;\n    }\n  }\n}\n@layer responsive-layer-name {\n  ._1j5zl92o {\n    --_1j5zl920: 1;\n    background: rgba(255, 0, 0, var(--_1j5zl920));\n  }\n  ._1j5zl92s {\n    --_1j5zl920: 1;\n  }\n  ._1j5zl92w {\n    --_1j5zl920: 0.1;\n  }\n  ._1j5zl9210 {\n    --_1j5zl920: 0.2;\n  }\n  ._1j5zl9214 {\n    --_1j5zl920: 0.3;\n  }\n  @media screen and (min-width: 768px) {\n    @container _1j5zl922 (min-width: 768px) {\n      ._1j5zl92p {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      ._1j5zl92t {\n        --_1j5zl920: 1;\n      }\n      ._1j5zl92x {\n        --_1j5zl920: 0.1;\n      }\n      ._1j5zl9211 {\n        --_1j5zl920: 0.2;\n      }\n      ._1j5zl9215 {\n        --_1j5zl920: 0.3;\n      }\n    }\n  }\n  @media screen and (min-width: 1024px) {\n    @container _1j5zl922 (min-width: 1024px) {\n      ._1j5zl92q {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      ._1j5zl92u {\n        --_1j5zl920: 1;\n      }\n      ._1j5zl92y {\n        --_1j5zl920: 0.1;\n      }\n      ._1j5zl9212 {\n        --_1j5zl920: 0.2;\n      }\n      ._1j5zl9216 {\n        --_1j5zl920: 0.3;\n      }\n    }\n    @supports not (display: grid) {\n      [data-dark-mode] ._1j5zl92r {\n        --_1j5zl920: 1;\n        background: rgba(255, 0, 0, var(--_1j5zl920));\n      }\n      [data-dark-mode] ._1j5zl92v {\n        --_1j5zl920: 1;\n      }\n      [data-dark-mode] ._1j5zl92z {\n        --_1j5zl920: 0.1;\n      }\n      [data-dark-mode] ._1j5zl9213 {\n        --_1j5zl920: 0.2;\n      }\n      [data-dark-mode] ._1j5zl9217 {\n        --_1j5zl920: 0.3;\n      }\n    }\n  }\n}\n@layer unconditional-layer-name {\n  ._1j5zl9219 {\n    --_1j5zl921: 1;\n  }\n  ._1j5zl921a {\n    --_1j5zl921: 0.8;\n  }\n}\n"
  },
  {
    "path": "tests/e2e/template-string-paths.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { webpack as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`template-string-paths - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('template-string-paths', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot(\n        'template-string-paths.png',\n      );\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`template-string-paths-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--development.css",
    "content": ".\\[\\]_emptySquareBrackets__13abg9g0 {\n  color: blue;\n}\n.\\[id\\]_singleSquareBracketsId__1d2wsrw0 {\n  color: tomato;\n}\n.\\[\\[id\\]\\]_doubleSquareBracketId__1aosxxv0 {\n  color: darkkhaki;\n}\n.\\[\\.\\.\\.slug\\]_catchAllSegment__169etlp0 {\n  color: lime;\n}\n.\\[\\[\\.\\.\\.slug\\]\\]_optionalCatchAllSegment__1kvknas0 {\n  color: orchid;\n}\n.\\[blog-id\\]_withHyphen__1e83mlh0 {\n  color: indigo;\n}\n"
  },
  {
    "path": "tests/e2e/template-string-paths.playwright.ts-snapshots/template-string-paths-mini-css-extract--production.css",
    "content": "._13abg9g0 {\n  color: blue;\n}\n._1d2wsrw0 {\n  color: tomato;\n}\n._1aosxxv0 {\n  color: darkkhaki;\n}\n._169etlp0 {\n  color: lime;\n}\n._1kvknas0 {\n  color: orchid;\n}\n._1e83mlh0 {\n  color: indigo;\n}\n"
  },
  {
    "path": "tests/e2e/testCases.ts",
    "content": "export const webpack = [\n  { type: 'mini-css-extract', mode: 'development', snapshotCss: true },\n  { type: 'mini-css-extract', mode: 'production', snapshotCss: true },\n  { type: 'style-loader', mode: 'development', snapshotCss: false },\n] as const;\n\nexport const all = [\n  ...webpack,\n  { type: 'esbuild', mode: 'development', snapshotCss: true },\n  { type: 'esbuild', mode: 'production', snapshotCss: true },\n  { type: 'esbuild-runtime', mode: 'development', snapshotCss: false },\n  { type: 'esbuild-runtime', mode: 'production', snapshotCss: false },\n  { type: 'esbuild-next', mode: 'development', snapshotCss: true },\n  { type: 'esbuild-next', mode: 'production', snapshotCss: true },\n  { type: 'esbuild-next-runtime', mode: 'development', snapshotCss: false },\n  { type: 'esbuild-next-runtime', mode: 'production', snapshotCss: false },\n  { type: 'vite', mode: 'development', snapshotCss: false },\n  { type: 'vite', mode: 'production', snapshotCss: true },\n  { type: 'parcel', mode: 'development', snapshotCss: true },\n  { type: 'parcel', mode: 'production', snapshotCss: true },\n] as const;\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { all as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`themed - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('themed', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot('themed.png');\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`themed-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css",
    "content": "@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root,\n.themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\n.shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(\n    --colors-backgroundColor__cvta171,\n    \"THIS FALLBACK VALUE SHOULD NEVER BE USED\"\n  );\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176\n  .themes_theme__cvta170\n  .styles_container__jteyb11\n  .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: \"I am content\";\n}\nhtml .styles_opacity_1\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css",
    "content": "@layer cvta177;\n@layer globalThemeLayer;\n:root,\n.cvta170 {\n  --cvta171: blue;\n  --cvta172: white;\n  --cvta173: 4px;\n  --cvta174: 8px;\n  --cvta175: 12px;\n}\n.cvta176 {\n  --cvta171: green;\n  --cvta172: white;\n  --cvta173: 8px;\n  --cvta174: 12px;\n  --cvta175: 16px;\n}\n.cvta17e {\n  --cvta171: pink;\n  --cvta172: purple;\n  --cvta173: 6px;\n  --cvta174: 12px;\n  --cvta175: 18px;\n}\n@layer cvta177 {\n  .cvta178 {\n    --cvta179: green;\n    --cvta17a: white;\n    --cvta17b: 8px;\n    --cvta17c: 12px;\n    --cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --cvta179: green;\n    --cvta17a: white;\n    --cvta17b: 8px;\n    --cvta17c: 12px;\n    --cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .cvta17e {\n    --cvta171: purple;\n    --cvta172: pink;\n  }\n}\n._4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n@font-face {\n  src: local(\"Impact\");\n  font-family: \"jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cvta174);\n  padding: var(--cvta175);\n}\n.jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.jteyb13 {\n  font-family: \"jteyb10\";\n  background-color: var(--cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--cvta172);\n  border-radius: 9999px;\n}\n.cvta176 .cvta170 .jteyb11 .jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .jteyb12:after {\n  content: \"I am content\";\n}\nhtml .jteyb16 {\n  opacity: var(--jteyb14);\n}\nhtml .jteyb17 {\n  opacity: var(--jteyb14, var(--jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .jteyb11 {\n    border: 1px solid var(--cvta171);\n  }\n  .jteyb13 {\n    padding: var(--cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .jteyb13 {\n    padding: var(--cvta174);\n  }\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css",
    "content": "@layer themes_themeLayer__cvta177;\n@layer globalThemeLayer;\n:root,\n.themes_theme__cvta170 {\n  --colors-backgroundColor__cvta171: blue;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 4px;\n  --space-2__cvta174: 8px;\n  --space-3__cvta175: 12px;\n}\n.themes_altTheme__cvta176 {\n  --colors-backgroundColor__cvta171: green;\n  --colors-text__cvta172: white;\n  --space-1__cvta173: 8px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 16px;\n}\n.themes_responsiveTheme__cvta17e {\n  --colors-backgroundColor__cvta171: pink;\n  --colors-text__cvta172: purple;\n  --space-1__cvta173: 6px;\n  --space-2__cvta174: 12px;\n  --space-3__cvta175: 18px;\n}\n@layer themes_themeLayer__cvta177 {\n  .themes_altTheme2Class__cvta178 {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cvta179: green;\n    --colors-text__cvta17a: white;\n    --space-1__cvta17b: 8px;\n    --space-2__cvta17c: 12px;\n    --space-3__cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cvta17e {\n    --colors-backgroundColor__cvta171: purple;\n    --colors-text__cvta172: pink;\n  }\n}\n.shared_shadow__4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cvta174);\n  padding: var(--space-3__cvta175);\n}\n.styles_iDunno__jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__jteyb13 {\n  font-family: \"styles_impact__jteyb10\";\n  background-color: var(\n    --colors-backgroundColor__cvta171,\n    \"THIS FALLBACK VALUE SHOULD NEVER BE USED\"\n  );\n  color: var(--colors-text__cvta172);\n  border-radius: 9999px;\n}\n.themes_altTheme__cvta176\n  .themes_theme__cvta170\n  .styles_container__jteyb11\n  .styles_button__jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__jteyb12:after {\n  content: \"I am content\";\n}\nhtml .styles_opacity_1\\/2__jteyb16 {\n  opacity: var(--blankVar1__jteyb14);\n}\nhtml .styles_opacity_1\\/4__jteyb17 {\n  opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__jteyb11 {\n    border: 1px solid var(--colors-backgroundColor__cvta171);\n  }\n  .styles_button__jteyb13 {\n    padding: var(--space-1__cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__jteyb13 {\n    padding: var(--space-2__cvta174);\n  }\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css",
    "content": "@layer cvta177;\n@layer globalThemeLayer;\n:root,\n.cvta170 {\n  --cvta171: blue;\n  --cvta172: white;\n  --cvta173: 4px;\n  --cvta174: 8px;\n  --cvta175: 12px;\n}\n.cvta176 {\n  --cvta171: green;\n  --cvta172: white;\n  --cvta173: 8px;\n  --cvta174: 12px;\n  --cvta175: 16px;\n}\n.cvta17e {\n  --cvta171: pink;\n  --cvta172: purple;\n  --cvta173: 6px;\n  --cvta174: 12px;\n  --cvta175: 18px;\n}\n@layer cvta177 {\n  .cvta178 {\n    --cvta179: green;\n    --cvta17a: white;\n    --cvta17b: 8px;\n    --cvta17c: 12px;\n    --cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --cvta179: green;\n    --cvta17a: white;\n    --cvta17b: 8px;\n    --cvta17c: 12px;\n    --cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .cvta17e {\n    --cvta171: purple;\n    --cvta172: pink;\n  }\n}\n._4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n@font-face {\n  src: local(\"Impact\");\n  font-family: \"jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cvta174);\n  padding: var(--cvta175);\n}\n.jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.jteyb13 {\n  font-family: \"jteyb10\";\n  background-color: var(--cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--cvta172);\n  border-radius: 9999px;\n}\n.cvta176 .cvta170 .jteyb11 .jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .jteyb12:after {\n  content: \"I am content\";\n}\nhtml .jteyb16 {\n  opacity: var(--jteyb14);\n}\nhtml .jteyb17 {\n  opacity: var(--jteyb14, var(--jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .jteyb11 {\n    border: 1px solid var(--cvta171);\n  }\n  .jteyb13 {\n    padding: var(--cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .jteyb13 {\n    padding: var(--cvta174);\n  }\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css",
    "content": "@layer themes_themeLayer__cdwe0v7;\n@layer globalThemeLayer;\n:root,\n.themes_theme__cdwe0v0 {\n  --colors-backgroundColor__cdwe0v1: blue;\n  --colors-text__cdwe0v2: white;\n  --space-1__cdwe0v3: 4px;\n  --space-2__cdwe0v4: 8px;\n  --space-3__cdwe0v5: 12px;\n}\n.themes_altTheme__cdwe0v6 {\n  --colors-backgroundColor__cdwe0v1: green;\n  --colors-text__cdwe0v2: white;\n  --space-1__cdwe0v3: 8px;\n  --space-2__cdwe0v4: 12px;\n  --space-3__cdwe0v5: 16px;\n}\n.themes_responsiveTheme__cdwe0ve {\n  --colors-backgroundColor__cdwe0v1: pink;\n  --colors-text__cdwe0v2: purple;\n  --space-1__cdwe0v3: 6px;\n  --space-2__cdwe0v4: 12px;\n  --space-3__cdwe0v5: 18px;\n}\n@layer themes_themeLayer__cdwe0v7 {\n  .themes_altTheme2Class__cdwe0v8 {\n    --colors-backgroundColor__cdwe0v9: green;\n    --colors-text__cdwe0va: white;\n    --space-1__cdwe0vb: 8px;\n    --space-2__cdwe0vc: 12px;\n    --space-3__cdwe0vd: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cdwe0v9: green;\n    --colors-text__cdwe0va: white;\n    --space-1__cdwe0vb: 8px;\n    --space-2__cdwe0vc: 12px;\n    --space-3__cdwe0vd: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .themes_responsiveTheme__cdwe0ve {\n    --colors-backgroundColor__cdwe0v1: purple;\n    --colors-text__cdwe0v2: pink;\n  }\n}\n.shared_shadow__5iqv0q0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n@font-face {\n  src: local(\"Impact\");\n  font-family: \"styles_impact__blj6yb0\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__blj6yb4 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__blj6yb1 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2__cdwe0v4);\n  padding: var(--space-3__cdwe0v5);\n}\n.styles_iDunno__blj6yb2 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__blj6yb3 {\n  font-family: \"styles_impact__blj6yb0\";\n  background-color: var(\n    --colors-backgroundColor__cdwe0v1,\n    \"THIS FALLBACK VALUE SHOULD NEVER BE USED\"\n  );\n  color: var(--colors-text__cdwe0v2);\n  border-radius: 9999px;\n}\n.themes_altTheme__cdwe0v6\n  .themes_theme__cdwe0v0\n  .styles_container__blj6yb1\n  .styles_button__blj6yb3 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .styles_iDunno__blj6yb2:after {\n  content: \"I am content\";\n}\nhtml .styles_opacity_1\\/2__blj6yb6 {\n  opacity: var(--blankVar1__blj6yb4);\n}\nhtml .styles_opacity_1\\/4__blj6yb7 {\n  opacity: var(--blankVar1__blj6yb4, var(--blankVar2__blj6yb5, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .styles_container__blj6yb1 {\n    border: 1px solid var(--colors-backgroundColor__cdwe0v1);\n  }\n  .styles_button__blj6yb3 {\n    padding: var(--space-1__cdwe0v3);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .styles_button__blj6yb3 {\n    padding: var(--space-2__cdwe0v4);\n  }\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css",
    "content": "@layer cdwe0v7;\n@layer globalThemeLayer;\n:root,\n.cdwe0v0 {\n  --cdwe0v1: blue;\n  --cdwe0v2: white;\n  --cdwe0v3: 4px;\n  --cdwe0v4: 8px;\n  --cdwe0v5: 12px;\n}\n.cdwe0v6 {\n  --cdwe0v1: green;\n  --cdwe0v2: white;\n  --cdwe0v3: 8px;\n  --cdwe0v4: 12px;\n  --cdwe0v5: 16px;\n}\n.cdwe0ve {\n  --cdwe0v1: pink;\n  --cdwe0v2: purple;\n  --cdwe0v3: 6px;\n  --cdwe0v4: 12px;\n  --cdwe0v5: 18px;\n}\n@layer cdwe0v7 {\n  .cdwe0v8 {\n    --cdwe0v9: green;\n    --cdwe0va: white;\n    --cdwe0vb: 8px;\n    --cdwe0vc: 12px;\n    --cdwe0vd: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --cdwe0v9: green;\n    --cdwe0va: white;\n    --cdwe0vb: 8px;\n    --cdwe0vc: 12px;\n    --cdwe0vd: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .cdwe0ve {\n    --cdwe0v1: purple;\n    --cdwe0v2: pink;\n  }\n}\n._5iqv0q0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n@font-face {\n  src: local(\"Impact\");\n  font-family: \"blj6yb0\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --blj6yb4 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.blj6yb1 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cdwe0v4);\n  padding: var(--cdwe0v5);\n}\n.blj6yb2 {\n  z-index: 1;\n  position: relative;\n}\n.blj6yb3 {\n  font-family: \"blj6yb0\";\n  background-color: var(--cdwe0v1, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--cdwe0v2);\n  border-radius: 9999px;\n}\n.cdwe0v6 .cdwe0v0 .blj6yb1 .blj6yb3 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .blj6yb2:after {\n  content: \"I am content\";\n}\nhtml .blj6yb6 {\n  opacity: var(--blj6yb4);\n}\nhtml .blj6yb7 {\n  opacity: var(--blj6yb4, var(--blj6yb5, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .blj6yb1 {\n    border: 1px solid var(--cdwe0v1);\n  }\n  .blj6yb3 {\n    padding: var(--cdwe0v3);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .blj6yb3 {\n    padding: var(--cdwe0v4);\n  }\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css",
    "content": "@layer themes_themeLayer__cdwe0v7 {\n  .themes_altTheme2Class__cdwe0v8 {\n    --colors-backgroundColor__cdwe0v9: green;\n    --colors-text__cdwe0va: white;\n    --space-1__cdwe0vb: 8px;\n    --space-2__cdwe0vc: 12px;\n    --space-3__cdwe0vd: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --colors-backgroundColor__cdwe0v9: green;\n    --colors-text__cdwe0va: white;\n    --space-1__cdwe0vb: 8px;\n    --space-2__cdwe0vc: 12px;\n    --space-3__cdwe0vd: 16px;\n  }\n}\n@media screen and (width >= 768px) {\n  .themes_responsiveTheme__cdwe0ve {\n    --colors-backgroundColor__cdwe0v1: purple;\n    --colors-text__cdwe0v2: pink;\n  }\n}\n:root,\n.themes_theme__cdwe0v0 {\n  --colors-backgroundColor__cdwe0v1: blue;\n  --colors-text__cdwe0v2: white;\n  --space-1__cdwe0v3: 4px;\n  --space-2__cdwe0v4: 8px;\n  --space-3__cdwe0v5: 12px;\n}\n.themes_altTheme__cdwe0v6 {\n  --colors-backgroundColor__cdwe0v1: green;\n  --colors-text__cdwe0v2: white;\n  --space-1__cdwe0v3: 8px;\n  --space-2__cdwe0v4: 12px;\n  --space-3__cdwe0v5: 16px;\n}\n.themes_responsiveTheme__cdwe0ve {\n  --colors-backgroundColor__cdwe0v1: pink;\n  --colors-text__cdwe0v2: purple;\n  --space-1__cdwe0v3: 6px;\n  --space-2__cdwe0v4: 12px;\n  --space-3__cdwe0v5: 18px;\n}\n@media screen and (width >= 768px) {\n  .themes_responsiveTheme__cdwe0ve {\n    --colors-backgroundColor__cdwe0v1: purple;\n    --colors-text__cdwe0v2: pink;\n  }\n}\n@font-face {\n  src: local(Impact);\n  font-family: styles_impact__blj6yb0;\n}\n@font-face {\n  src: local(Comic Sans MS);\n  font-family: MyGlobalComicSans;\n}\n@property --blankVar1__blj6yb4 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.styles_container__blj6yb1 {\n  gap: var(--space-2__cdwe0v4);\n  padding: var(--space-3__cdwe0v5);\n  flex-direction: column;\n  display: flex;\n}\n.styles_iDunno__blj6yb2 {\n  z-index: 1;\n  position: relative;\n}\n.styles_button__blj6yb3 {\n  background-color: var(\n    --colors-backgroundColor__cdwe0v1,\n    \"THIS FALLBACK VALUE SHOULD NEVER BE USED\"\n  );\n  color: var(--colors-text__cdwe0v2);\n  border-radius: 9999px;\n  font-family: styles_impact__blj6yb0;\n}\n.themes_altTheme__cdwe0v6\n  .themes_theme__cdwe0v0\n  .styles_container__blj6yb1\n  .styles_button__blj6yb3 {\n  outline: 5px solid red;\n  font-family: MyGlobalComicSans;\n}\nbody .styles_iDunno__blj6yb2:after {\n  content: \"I am content\";\n}\nhtml .styles_opacity_1\\/2__blj6yb6 {\n  opacity: var(--blankVar1__blj6yb4);\n}\nhtml .styles_opacity_1\\/4__blj6yb7 {\n  opacity: var(--blankVar1__blj6yb4, var(--blankVar2__blj6yb5, 0.25));\n}\n@media only screen and (width >= 500px) {\n  .styles_container__blj6yb1 {\n    border: 1px solid var(--colors-backgroundColor__cdwe0v1);\n  }\n  .styles_button__blj6yb3 {\n    padding: var(--space-1__cdwe0v3);\n  }\n}\n@media only screen and (width >= 1000px) {\n  .styles_button__blj6yb3 {\n    padding: var(--space-2__cdwe0v4);\n  }\n}\n.shared_shadow__5iqv0q0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: #87ceeb;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css",
    "content": "@layer cdwe0v7 {\n  .cdwe0v8 {\n    --cdwe0v9: green;\n    --cdwe0va: white;\n    --cdwe0vb: 8px;\n    --cdwe0vc: 12px;\n    --cdwe0vd: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --cdwe0v9: green;\n    --cdwe0va: white;\n    --cdwe0vb: 8px;\n    --cdwe0vc: 12px;\n    --cdwe0vd: 16px;\n  }\n}\n@media screen and (width >= 768px) {\n  .cdwe0ve {\n    --cdwe0v1: purple;\n    --cdwe0v2: pink;\n  }\n}\n:root,\n.cdwe0v0 {\n  --cdwe0v1: blue;\n  --cdwe0v2: white;\n  --cdwe0v3: 4px;\n  --cdwe0v4: 8px;\n  --cdwe0v5: 12px;\n}\n.cdwe0v6 {\n  --cdwe0v1: green;\n  --cdwe0v2: white;\n  --cdwe0v3: 8px;\n  --cdwe0v4: 12px;\n  --cdwe0v5: 16px;\n}\n.cdwe0ve {\n  --cdwe0v1: pink;\n  --cdwe0v2: purple;\n  --cdwe0v3: 6px;\n  --cdwe0v4: 12px;\n  --cdwe0v5: 18px;\n}\n@media screen and (width >= 768px) {\n  .cdwe0ve {\n    --cdwe0v1: purple;\n    --cdwe0v2: pink;\n  }\n}\n@font-face {\n  src: local(Impact);\n  font-family: blj6yb0;\n}\n@font-face {\n  src: local(Comic Sans MS);\n  font-family: MyGlobalComicSans;\n}\n@property --blj6yb4 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.blj6yb1 {\n  gap: var(--cdwe0v4);\n  padding: var(--cdwe0v5);\n  flex-direction: column;\n  display: flex;\n}\n.blj6yb2 {\n  z-index: 1;\n  position: relative;\n}\n.blj6yb3 {\n  background-color: var(--cdwe0v1, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--cdwe0v2);\n  border-radius: 9999px;\n  font-family: blj6yb0;\n}\n.cdwe0v6 .cdwe0v0 .blj6yb1 .blj6yb3 {\n  outline: 5px solid red;\n  font-family: MyGlobalComicSans;\n}\nbody .blj6yb2:after {\n  content: \"I am content\";\n}\nhtml .blj6yb6 {\n  opacity: var(--blj6yb4);\n}\nhtml .blj6yb7 {\n  opacity: var(--blj6yb4, var(--blj6yb5, 0.25));\n}\n@media only screen and (width >= 500px) {\n  .blj6yb1 {\n    border: 1px solid var(--cdwe0v1);\n  }\n  .blj6yb3 {\n    padding: var(--cdwe0v3);\n  }\n}\n@media only screen and (width >= 1000px) {\n  .blj6yb3 {\n    padding: var(--cdwe0v4);\n  }\n}\n._5iqv0q0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: #87ceeb;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n"
  },
  {
    "path": "tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css",
    "content": "@layer cvta177;\n@layer globalThemeLayer;\n:root,\n.cvta170 {\n  --cvta171: blue;\n  --cvta172: white;\n  --cvta173: 4px;\n  --cvta174: 8px;\n  --cvta175: 12px;\n}\n.cvta176 {\n  --cvta171: green;\n  --cvta172: white;\n  --cvta173: 8px;\n  --cvta174: 12px;\n  --cvta175: 16px;\n}\n.cvta17e {\n  --cvta171: pink;\n  --cvta172: purple;\n  --cvta173: 6px;\n  --cvta174: 12px;\n  --cvta175: 18px;\n}\n@layer cvta177 {\n  .cvta178 {\n    --cvta179: green;\n    --cvta17a: white;\n    --cvta17b: 8px;\n    --cvta17c: 12px;\n    --cvta17d: 16px;\n  }\n}\n@layer globalThemeLayer {\n  :root {\n    --cvta179: green;\n    --cvta17a: white;\n    --cvta17b: 8px;\n    --cvta17c: 12px;\n    --cvta17d: 16px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .cvta17e {\n    --cvta171: purple;\n    --cvta172: pink;\n  }\n}\n._4dtfen0 {\n  box-shadow: 0 0 5px red;\n}\nbody {\n  background-color: skyblue;\n}\nbody,\nbutton {\n  line-height: 16px;\n}\n@font-face {\n  src: local(\"Impact\");\n  font-family: \"jteyb10\";\n}\n@font-face {\n  src: local(\"Comic Sans MS\");\n  font-family: MyGlobalComicSans;\n}\n@property --jteyb14 {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.5;\n}\n.jteyb11 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cvta174);\n  padding: var(--cvta175);\n}\n.jteyb12 {\n  z-index: 1;\n  position: relative;\n}\n.jteyb13 {\n  font-family: \"jteyb10\";\n  background-color: var(--cvta171, \"THIS FALLBACK VALUE SHOULD NEVER BE USED\");\n  color: var(--cvta172);\n  border-radius: 9999px;\n}\n.cvta176 .cvta170 .jteyb11 .jteyb13 {\n  font-family: MyGlobalComicSans;\n  outline: 5px solid red;\n}\nbody .jteyb12:after {\n  content: \"I am content\";\n}\nhtml .jteyb16 {\n  opacity: var(--jteyb14);\n}\nhtml .jteyb17 {\n  opacity: var(--jteyb14, var(--jteyb15, 0.25));\n}\n@media only screen and (min-width: 500px) {\n  .jteyb11 {\n    border: 1px solid var(--cvta171);\n  }\n  .jteyb13 {\n    padding: var(--cvta173);\n  }\n}\n@media only screen and (min-width: 1000px) {\n  .jteyb13 {\n    padding: var(--cvta174);\n  }\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts",
    "content": "import { expect } from '@playwright/test';\nimport {\n  getStylesheet,\n  startFixture,\n  type TestServer,\n} from '@vanilla-extract-private/test-helpers';\n\nimport test from './fixture';\nimport { all as testCases } from './testCases';\n\ntestCases.forEach(({ type, mode, snapshotCss = true }) => {\n  test.describe(`thirdparty - ${type} (${mode})`, () => {\n    let server: TestServer;\n\n    test.beforeAll(async ({ port }) => {\n      server = await startFixture('thirdparty', {\n        type,\n        mode,\n        basePort: port,\n      });\n    });\n\n    test('screenshot', async ({ page }) => {\n      await page.goto(server.url);\n\n      expect(await page.screenshot()).toMatchSnapshot('thirdparty.png');\n    });\n\n    if (snapshotCss) {\n      test('CSS @agnostic', async () => {\n        expect(\n          await getStylesheet(server.url, server.stylesheet),\n        ).toMatchSnapshot(`thirdparty-${type}--${mode}.css`);\n      });\n    }\n\n    test.afterAll(async () => {\n      await server.close();\n    });\n  });\n});\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-esbuild--development.css",
    "content": ".styles_depBlock__vg1esd1 {\n  --depColor__vg1esd0: green;\n  background-color: var(--depColor__vg1esd0);\n}\n.styles_depdepBlock__7q0fkw1 {\n  --depdepColor__7q0fkw0: blue;\n  background-color: var(--depdepColor__7q0fkw0);\n}\n.styles_block__1vrxmse1 {\n  --color__1vrxmse0: red;\n  background-color: var(--color__1vrxmse0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-esbuild--production.css",
    "content": ".vg1esd1 {\n  --vg1esd0: green;\n  background-color: var(--vg1esd0);\n}\n._7q0fkw1 {\n  --_7q0fkw0: blue;\n  background-color: var(--_7q0fkw0);\n}\n._1vrxmse1 {\n  --_1vrxmse0: red;\n  background-color: var(--_1vrxmse0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-esbuild-next--development.css",
    "content": ".styles_depBlock__vg1esd1 {\n  --depColor__vg1esd0: green;\n  background-color: var(--depColor__vg1esd0);\n}\n.styles_depdepBlock__7q0fkw1 {\n  --depdepColor__7q0fkw0: blue;\n  background-color: var(--depdepColor__7q0fkw0);\n}\n.styles_block__1vrxmse1 {\n  --color__1vrxmse0: red;\n  background-color: var(--color__1vrxmse0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-esbuild-next--production.css",
    "content": ".vg1esd1 {\n  --vg1esd0: green;\n  background-color: var(--vg1esd0);\n}\n._7q0fkw1 {\n  --_7q0fkw0: blue;\n  background-color: var(--_7q0fkw0);\n}\n._1vrxmse1 {\n  --_1vrxmse0: red;\n  background-color: var(--_1vrxmse0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-mini-css-extract--development.css",
    "content": ".styles_depBlock__1diaba71 {\n  --depColor__1diaba70: green;\n  background-color: var(--depColor__1diaba70);\n}\n.styles_depdepBlock__rn5a421 {\n  --depdepColor__rn5a420: blue;\n  background-color: var(--depdepColor__rn5a420);\n}\n.styles_block__19mmd6u1 {\n  --color__19mmd6u0: red;\n  background-color: var(--color__19mmd6u0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-mini-css-extract--production.css",
    "content": "._1diaba71 {\n  --_1diaba70: green;\n  background-color: var(--_1diaba70);\n}\n.rn5a421 {\n  --rn5a420: blue;\n  background-color: var(--rn5a420);\n}\n._19mmd6u1 {\n  --_19mmd6u0: red;\n  background-color: var(--_19mmd6u0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-parcel--development.css",
    "content": ".styles_depBlock__1diaba71 {\n  --depColor__1diaba70: green;\n  background-color: var(--depColor__1diaba70);\n}\n.styles_depdepBlock__rn5a421 {\n  --depdepColor__rn5a420: blue;\n  background-color: var(--depdepColor__rn5a420);\n}\n.styles_block__19mmd6u1 {\n  --color__19mmd6u0: red;\n  background-color: var(--color__19mmd6u0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-parcel--production.css",
    "content": "._1diaba71 {\n  --_1diaba70: green;\n  background-color: var(--_1diaba70);\n}\n.rn5a421 {\n  --rn5a420: blue;\n  background-color: var(--rn5a420);\n}\n._19mmd6u1 {\n  --_19mmd6u0: red;\n  background-color: var(--_19mmd6u0);\n}\n"
  },
  {
    "path": "tests/e2e/thirdparty.playwright.ts-snapshots/thirdparty-vite--production.css",
    "content": ".vg1esd1 {\n  --vg1esd0: green;\n  background-color: var(--vg1esd0);\n}\n._7q0fkw1 {\n  --_7q0fkw0: blue;\n  background-color: var(--_7q0fkw0);\n}\n._1vrxmse1 {\n  --_1vrxmse0: red;\n  background-color: var(--_1vrxmse0);\n}\n"
  },
  {
    "path": "tests/jsdom/jsdom.css.ts",
    "content": "import { style, createTheme, createGlobalTheme } from '@vanilla-extract/css';\n\nexport const vars = createGlobalTheme(':root', {\n  space: `10px`,\n});\n\nexport const twentyTheme = createTheme(vars, {\n  space: `20px`,\n});\n\nexport const hide = style({ display: 'none' });\n\nexport const blackBg = style({ backgroundColor: '#000' });\n\nexport const padding = style({ paddingTop: vars.space });\n"
  },
  {
    "path": "tests/jsdom/jsdom.test.ts",
    "content": "/**\n * @vitest-environment jsdom\n */\nimport '@testing-library/jest-dom/vitest';\nimport { describe, expect, it } from 'vitest';\nimport { screen } from '@testing-library/dom';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\n\nimport { hide, padding, twentyTheme, blackBg, vars } from './jsdom.css.ts';\n\ndescribe('jest-dom', () => {\n  it('should attach css to nodes', () => {\n    document.body.innerHTML = `\n      <div data-testid=\"hidden\" class=\"${hide}\">Hidden Example</div>\n      <div data-testid=\"blackBg\" class=\"${blackBg}\">Hidden Example</div>\n    `;\n\n    expect(screen.queryByTestId('hidden')).not.toBeVisible();\n    expect(screen.queryByTestId('blackBg')).toHaveStyle({\n      backgroundColor: 'rgb(0, 0, 0)',\n    });\n  });\n\n  // CSS vars seem to be broken in jsdom/cssom/cssstyle (whichever one is relevant here)\n  // As far as I can tell the issue is not on our end\n  it.skip('should support css variables', () => {\n    document.body.innerHTML = `\n      <div data-testid=\"10\" class=\"${padding}\">10 padding top</div>\n      <div data-testid=\"20\" class=\"${twentyTheme} ${padding}\">20 padding top</div>\n      <div data-testid=\"30\" style=\"${assignInlineVars(vars, {\n        space: '30px',\n      })}\" class=\"${padding}\">20 padding top</div>\n    `;\n\n    expect(screen.queryByTestId('10')).toHaveStyle({ paddingTop: '10px' });\n    expect(screen.queryByTestId('20')).toHaveStyle({ paddingTop: '20px' });\n    expect(screen.queryByTestId('30')).toHaveStyle({ paddingTop: '30px' });\n  });\n});\n"
  },
  {
    "path": "tests/package.json",
    "content": "{\n  \"name\": \"@vanilla-extract-private/tests\",\n  \"private\": true,\n  \"version\": \"0.0.58\",\n  \"author\": \"SEEK\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@testing-library/dom\": \"^10.0.0\",\n    \"@testing-library/jest-dom\": \"^6.4.2\",\n    \"@vanilla-extract-private/test-helpers\": \"workspace:*\",\n    \"@vanilla-extract/compiler\": \"workspace:*\",\n    \"@vanilla-extract/css\": \"workspace:*\",\n    \"@vanilla-extract/dynamic\": \"workspace:*\",\n    \"@vanilla-extract/integration\": \"workspace:*\",\n    \"@vanilla-extract/private\": \"workspace:*\",\n    \"@vanilla-extract/recipes\": \"workspace:*\",\n    \"@vanilla-extract/sprinkles\": \"workspace:*\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n  }\n}\n"
  },
  {
    "path": "tests/recipes/recipes-type-tests.ts",
    "content": "/*\n    This file is for validating types, it is not designed to be executed\n*/\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nconst noop = (..._args: Array<any>) => {};\n\ntype AssertIsString<S> = S extends string ? true : never;\n\n// oxlint-disable-next-line no-unused-expressions\n() => {\n  const textRecipes = recipe({\n    variants: {\n      size: {\n        small: { fontSize: '12px' },\n        medium: { fontSize: '16px' },\n        large: { fontSize: '24px' },\n      },\n    },\n  });\n\n  type TextVariants = RecipeVariants<typeof textRecipes>;\n\n  const invalidVariantValue: TextVariants = {\n    // @ts-expect-error Type '\"extraLarge\"' is not assignable to type '\"small\" | \"large\" | \"medium\" | undefined'.\n    size: 'extraLarge',\n  };\n\n  const invalidVariantName: TextVariants = {\n    // @ts-expect-error Property 'color' does not exist in type\n    color: 'brand',\n  };\n\n  const validTextVariant: TextVariants = {\n    size: 'large',\n  };\n\n  const recipeStyles = textRecipes({ size: 'small' });\n  const recipeShouldReturnString: AssertIsString<typeof recipeStyles> = true;\n\n  const variants: ReturnType<typeof textRecipes.variants> = ['size'];\n  // @ts-expect-error Type '\"foo\"' is not assignable to type '\"size\"'.\n  const invalidVariants: ReturnType<typeof textRecipes.variants> = ['foo'];\n\n  noop(invalidVariantValue);\n  noop(invalidVariantName);\n  noop(validTextVariant);\n  noop(variants);\n  noop(invalidVariants);\n  noop(recipeShouldReturnString);\n};\n"
  },
  {
    "path": "tests/recipes/recipes.css.ts",
    "content": "import { recipe } from '@vanilla-extract/recipes';\n\nexport const basic = recipe({\n  base: {},\n\n  variants: {\n    spaceWithDefault: {\n      small: {},\n      large: {},\n    },\n    spaceWithoutDefault: {\n      small: {},\n      large: {},\n    },\n    color: {\n      red: {},\n      blue: {},\n    },\n    rounded: {\n      true: { borderRadius: 999 },\n    },\n  },\n\n  defaultVariants: {\n    spaceWithDefault: 'small',\n  },\n\n  compoundVariants: [\n    {\n      variants: { color: 'red', spaceWithDefault: 'small' },\n      style: {},\n    },\n  ],\n});\n\nexport const empty = recipe({});\n\nexport const definedStringBase = recipe({\n  base: 'definedStringBase',\n  variants: {\n    variant: {\n      simple: 'simple-one',\n    },\n  },\n});\n\nexport const definedStringBaseArray = recipe({\n  base: ['definedStringBaseInArray_1', 'definedStringBaseInArray_2'],\n  variants: {\n    variant: {\n      simple: ['simple-one', 'simple-two'],\n    },\n  },\n});\n"
  },
  {
    "path": "tests/recipes/recipes.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport {\n  basic,\n  empty,\n  definedStringBase,\n  definedStringBaseArray,\n} from './recipes.css';\n\ndescribe('recipes', () => {\n  it('should return default variants for no options', () => {\n    expect(basic()).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1\"`,\n    );\n  });\n\n  it('should return default variants for empty options', () => {\n    expect(basic({})).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1\"`,\n    );\n  });\n\n  it('should return default variants for undefined options', () => {\n    expect(basic({ spaceWithDefault: undefined })).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1\"`,\n    );\n  });\n\n  it('should return requested variants', () => {\n    expect(\n      basic({\n        spaceWithDefault: 'large',\n        spaceWithoutDefault: 'small',\n        color: 'blue',\n      }),\n    ).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_large__niwegb2 recipes_basic_spaceWithoutDefault_small__niwegb3 recipes_basic_color_blue__niwegb6\"`,\n    );\n  });\n\n  it('should return requested compound variants', () => {\n    expect(\n      basic({ spaceWithDefault: 'small', color: 'red' }),\n    ).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_color_red__niwegb5 recipes_basic_compound_0__niwegb8\"`,\n    );\n  });\n\n  it('should return compound variants via defaultVariants', () => {\n    expect(basic({ color: 'red' })).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_color_red__niwegb5 recipes_basic_compound_0__niwegb8\"`,\n    );\n  });\n\n  it('should return compound variants via defaultVariants, even when undefined is passed', () => {\n    expect(\n      basic({ color: 'red', spaceWithDefault: undefined }),\n    ).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_color_red__niwegb5 recipes_basic_compound_0__niwegb8\"`,\n    );\n  });\n\n  it('should return boolean variants', () => {\n    expect(basic({ rounded: true })).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1 recipes_basic_rounded_true__niwegb7\"`,\n    );\n  });\n\n  it('should ignore missing boolean variants', () => {\n    expect(basic({ rounded: false })).toMatchInlineSnapshot(\n      `\"recipes_basic__niwegb0 recipes_basic_spaceWithDefault_small__niwegb1\"`,\n    );\n  });\n\n  it('should expose a function returning list of variants', () => {\n    expect(basic.variants()).toMatchInlineSnapshot(`\n      [\n        \"spaceWithDefault\",\n        \"spaceWithoutDefault\",\n        \"color\",\n        \"rounded\",\n      ]\n    `);\n  });\n\n  it('should have base class name even when \"base\" prop is not defined', () => {\n    expect(empty()).toMatchInlineSnapshot(`\"recipes__niwegb9\"`);\n    expect(empty.classNames.base).toMatchInlineSnapshot(`\"recipes__niwegb9\"`);\n    expect(empty()).toStrictEqual(empty.classNames.base);\n  });\n\n  it('should include generated base class name for provided string classes', () => {\n    expect(definedStringBase()).toMatchInlineSnapshot(\n      `\"recipes__niwegba definedStringBase\"`,\n    );\n    expect(definedStringBase.classNames.base).toMatchInlineSnapshot(\n      `\"recipes__niwegba\"`,\n    );\n\n    expect(definedStringBase({ variant: 'simple' })).toMatchInlineSnapshot(\n      `\"recipes__niwegba definedStringBase recipes_definedStringBase_variant_simple__niwegbb simple-one\"`,\n    );\n    expect(\n      definedStringBase.classNames.variants.variant.simple,\n    ).toMatchInlineSnapshot(\n      `\"recipes_definedStringBase_variant_simple__niwegbb\"`,\n    );\n  });\n\n  it('should include generated base class name for provided array string classes', () => {\n    expect(definedStringBaseArray()).toMatchInlineSnapshot(\n      `\"recipes_definedStringBaseArray__niwegbc definedStringBaseInArray_1 definedStringBaseInArray_2\"`,\n    );\n    expect(definedStringBaseArray.classNames.base).toMatchInlineSnapshot(\n      `\"recipes_definedStringBaseArray__niwegbc\"`,\n    );\n\n    expect(definedStringBaseArray({ variant: 'simple' })).toMatchInlineSnapshot(\n      `\"recipes_definedStringBaseArray__niwegbc definedStringBaseInArray_1 definedStringBaseInArray_2 recipes_definedStringBaseArray_variant_simple__niwegbd simple-one simple-two\"`,\n    );\n    expect(\n      definedStringBaseArray.classNames.variants.variant.simple,\n    ).toMatchInlineSnapshot(\n      `\"recipes_definedStringBaseArray_variant_simple__niwegbd\"`,\n    );\n  });\n\n  it('should expose variants class names', () => {\n    expect([\n      basic.classNames.base,\n      basic.classNames.variants.spaceWithDefault.large,\n      basic.classNames.variants.spaceWithDefault.small,\n      basic.classNames.variants.spaceWithoutDefault.large,\n      basic.classNames.variants.spaceWithoutDefault.small,\n      basic.classNames.variants.color.blue,\n      basic.classNames.variants.color.red,\n      basic.classNames.variants.rounded.true,\n    ]).toMatchInlineSnapshot(`\n      [\n        \"recipes_basic__niwegb0\",\n        \"recipes_basic_spaceWithDefault_large__niwegb2\",\n        \"recipes_basic_spaceWithDefault_small__niwegb1\",\n        \"recipes_basic_spaceWithoutDefault_large__niwegb4\",\n        \"recipes_basic_spaceWithoutDefault_small__niwegb3\",\n        \"recipes_basic_color_blue__niwegb6\",\n        \"recipes_basic_color_red__niwegb5\",\n        \"recipes_basic_rounded_true__niwegb7\",\n      ]\n    `);\n  });\n});\n"
  },
  {
    "path": "tests/servers.ts",
    "content": "interface ServerDefinition {\n  name: string;\n  isProduction: boolean;\n  script: string;\n  port: number;\n  suite: 'full' | 'limited';\n}\n\nexport const NEXT_SERVERS: ServerDefinition[] = [\n  {\n    name: 'Next 12 Dev Server',\n    isProduction: false,\n    script: 'pnpm --filter=next-12-pages-router dev',\n    port: 3001,\n    suite: 'limited',\n  },\n  {\n    name: 'Next 12 Build',\n    isProduction: true,\n    script: 'pnpm --filter=next-12-pages-router start',\n    port: 3002,\n    suite: 'limited',\n  },\n  {\n    name: 'Next 13 Dev Server',\n    isProduction: false,\n    script: 'pnpm --filter=next-13-app-router dev',\n    port: 3003,\n    suite: 'limited',\n  },\n  {\n    name: 'Next 13 Build',\n    isProduction: true,\n    script: 'pnpm --filter=next-13-app-router start',\n    port: 3004,\n    suite: 'limited',\n  },\n  {\n    name: 'Next 16 Dev Server (Webpack)',\n    isProduction: false,\n    script: 'pnpm --filter=next-16-app-pages-router dev-webpack',\n    port: 3005,\n    suite: 'full',\n  },\n  {\n    name: 'Next 16 Build (Webpack)',\n    isProduction: true,\n    script: 'pnpm --filter=next-16-app-pages-router start-webpack',\n    port: 3006,\n    suite: 'full',\n  },\n  {\n    name: 'Next 16 Dev Server (Turbopack)',\n    isProduction: false,\n    script: 'pnpm --filter=next-16-app-pages-router dev-turbo',\n    port: 3007,\n    suite: 'full',\n  },\n  {\n    name: 'Next 16 Build (Turbopack)',\n    isProduction: true,\n    script: 'pnpm --filter=next-16-app-pages-router start-turbo',\n    port: 3008,\n    suite: 'full',\n  },\n];\n"
  },
  {
    "path": "tests/sprinkles/index.css.ts",
    "content": "import { createVar } from '@vanilla-extract/css';\nimport { defineProperties } from '@vanilla-extract/sprinkles';\n\nconst spacing = {\n  small: '4px',\n  medium: '8px',\n  large: '16px',\n};\n\nexport const basicProperties = defineProperties({\n  properties: {\n    color: {\n      'gray-500': '#6B7280',\n      'red-500': '#EF4444',\n      'green-300': '#6EE7B7',\n    },\n    top: [0],\n    paddingLeft: spacing,\n    paddingRight: spacing,\n  },\n});\n\nexport const propertiesWithShorthands = defineProperties({\n  properties: {\n    color: {\n      'gray-500': '#6B7280',\n      'red-500': '#EF4444',\n      'green-300': '#6EE7B7',\n    },\n    paddingLeft: spacing,\n    paddingRight: spacing,\n  },\n  shorthands: {\n    paddingX: ['paddingLeft', 'paddingRight'],\n    anotherPaddingX: ['paddingLeft', 'paddingRight'],\n  },\n});\n\nexport const conditionalProperties = defineProperties({\n  defaultCondition: 'mobile',\n  conditions: {\n    mobile: {},\n    tablet: {},\n    desktop: {\n      '@media': 'screen and (min-width: 786px)',\n    },\n  },\n  responsiveArray: ['mobile', 'tablet', 'desktop'],\n  properties: {\n    display: ['block', 'none', 'flex'],\n    paddingTop: spacing,\n    paddingBottom: spacing,\n    opacity: [0, 1] as const,\n  },\n  shorthands: {\n    paddingY: ['paddingBottom', 'paddingTop'],\n  },\n});\n\nexport const conditionalPropertiesWithMultipleDefaultConditions =\n  defineProperties({\n    defaultCondition: ['lightMode', 'darkMode'],\n    conditions: {\n      lightMode: { '@media': '(prefers-color-scheme: light)' },\n      darkMode: { '@media': '(prefers-color-scheme: dark)' },\n    },\n    properties: {\n      background: ['red', 'green', 'blue'],\n    },\n  });\n\nexport const conditionalPropertiesWithoutDefaultCondition = defineProperties({\n  defaultCondition: false,\n  conditions: {\n    active: {\n      selector: '&:active',\n    },\n  },\n  properties: {\n    transform: {\n      shrink: 'scale(0.8)',\n    },\n  },\n});\n\nexport const conditionalPropertiesWithoutResponsiveArray = defineProperties({\n  defaultCondition: 'mobile',\n  conditions: {\n    mobile: {},\n    tablet: {},\n    desktop: {\n      '@media': 'screen and (min-width: 786px)',\n    },\n  },\n  properties: {\n    marginTop: spacing,\n  },\n  shorthands: {\n    marginY: ['marginTop'],\n  },\n});\n\nexport const propertiesWithPaddingShorthands = defineProperties({\n  properties: {\n    paddingLeft: spacing,\n    paddingRight: spacing,\n    paddingTop: spacing,\n    paddingBottom: spacing,\n    fontWeight: [createVar()],\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n  },\n});\n\nexport const shorthandsWithZeroValues = defineProperties({\n  properties: {\n    marginTop: {\n      0: '0rem',\n      1: '0.5rem',\n    },\n  },\n  shorthands: {\n    mt: ['marginTop'],\n  },\n});\n"
  },
  {
    "path": "tests/sprinkles/sprinkles-type-tests.ts",
    "content": "/*\n    This file is for validating types, it is not designed to be executed\n*/\nimport {\n  defineProperties,\n  createMapValueFn,\n  createNormalizeValueFn,\n  type ConditionalValue,\n  type RequiredConditionalValue,\n} from '@vanilla-extract/sprinkles';\nimport { createSprinkles } from '@vanilla-extract/sprinkles';\n\nimport {\n  propertiesWithShorthands,\n  conditionalProperties,\n  conditionalPropertiesWithoutDefaultCondition,\n  conditionalPropertiesWithoutResponsiveArray,\n} from './index.css';\n\nconst noop = (..._args: Array<any>) => {};\n\n// oxlint-disable-next-line no-unused-expressions\n() => {\n  const sprinkles = createSprinkles(\n    propertiesWithShorthands,\n    conditionalProperties,\n    conditionalPropertiesWithoutDefaultCondition,\n    conditionalPropertiesWithoutResponsiveArray,\n  );\n\n  sprinkles({\n    // @ts-expect-error Invalid value\n    paddingTop: 'mediumm',\n  });\n\n  sprinkles({\n    paddingTop: {\n      // @ts-expect-error Invalid condition name\n      mobie: 'medium',\n    },\n  });\n\n  sprinkles({\n    // @ts-expect-error No responsive array defintion\n    paddingLeft: ['medium'],\n  });\n\n  sprinkles({\n    // @ts-expect-error Invalid responsive array value\n    paddingTop: ['medium', 'smalll'],\n  });\n\n  sprinkles({\n    // @ts-expect-error Shorthand with invalid value\n    paddingY: 'mediumm',\n  });\n\n  sprinkles({\n    // @ts-expect-error Shorthand with invalid conditional value\n    paddingTop: {\n      mobile: 'mediumm',\n    },\n  });\n\n  sprinkles({\n    paddingY: {\n      // @ts-expect-error Shorthand with invalid condition name\n      mobie: 'medium',\n    },\n  });\n\n  sprinkles({\n    // @ts-expect-error Shorthand with invalid conditional value\n    paddingY: {\n      mobile: 'mediumm',\n    },\n  });\n\n  sprinkles({\n    paddingY: {\n      // @ts-expect-error Shorthand with invalid condition name\n      mobie: 'medium',\n    },\n  });\n\n  sprinkles({\n    // @ts-expect-error Shorthand with invalid responsive array value\n    paddingY: ['medium', 'smalll'],\n  });\n\n  // Valid value - Accept readonly arrays\n  sprinkles({\n    paddingY: ['medium', 'small'] as const,\n  });\n\n  // Valid value\n  sprinkles({\n    transform: {\n      active: 'shrink',\n    },\n  });\n\n  sprinkles({\n    // @ts-expect-error No default class allowed\n    transform: 'shrink',\n  });\n\n  // Valid value - shorthand conditional without responsive array\n  sprinkles({\n    marginY: { mobile: 'medium' },\n  });\n\n  // @ts-expect-error - Property defined with numbers should not allow array methods\n  sprinkles({ opacity: 'forEach' });\n\n  const atomicProperties = {\n    properties: {\n      flexDirection: ['row', 'column'],\n    },\n  } as const;\n\n  // Valid value - config defined outside the defineProperties function\n  defineProperties(atomicProperties);\n\n  const mapValue = createMapValueFn(conditionalProperties);\n  const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n  // @ts-expect-error - Too many responsive array options\n  normalizeValue(['one', 'two', 'three', 'four']);\n\n  normalizeValue({\n    // @ts-expect-error - Incorrect conditional keys\n    mobille: '',\n  });\n\n  function testGenericNormalizeValue<Key extends string | number | boolean>(\n    value: ResponsiveValue<Key>,\n  ): Key | undefined {\n    const normalizedValue = normalizeValue(value);\n    // Should return the Key type for each condition when normalizing\n    return normalizedValue.mobile;\n  }\n  testGenericNormalizeValue('');\n\n  // @ts-expect-error - Strings shouldn't map to objects\n  // oxlint-disable-next-line no-unused-expressions\n  mapValue(alignProp, () => 'baz').mobile;\n\n  // @ts-expect-error - Numbers shouldn't map to objects\n  // oxlint-disable-next-line no-unused-expressions\n  mapValue(3, () => 4).mobile;\n\n  const mapValueWithoutDefaultCondition = createMapValueFn(\n    conditionalPropertiesWithoutDefaultCondition,\n  );\n  const normalizeValueWithoutDefaultCondition = createNormalizeValueFn(\n    conditionalPropertiesWithoutDefaultCondition,\n  );\n\n  // @ts-expect-error - Should force conditional value as no default condition\n  normalizeValueWithoutDefaultCondition('test');\n\n  // @ts-expect-error - Should force conditional value as no default condition\n  mapValueWithoutDefaultCondition('test');\n\n  type ResponsiveValue<Value extends string | number | boolean> =\n    ConditionalValue<typeof conditionalProperties, Value>;\n\n  let responsiveValue: ResponsiveValue<'row' | 'column' | boolean>;\n\n  // Valid values\n  responsiveValue = 'row';\n  responsiveValue = 'column';\n  responsiveValue = [null];\n  responsiveValue = ['row', 'column'];\n  responsiveValue = ['row', null, 'column'];\n  responsiveValue = true;\n  responsiveValue = false;\n  responsiveValue = [false];\n  responsiveValue = [false, null, true];\n  responsiveValue = {};\n  responsiveValue = { mobile: 'row' };\n  responsiveValue = { tablet: 'column' };\n  responsiveValue = { desktop: 'column' };\n  responsiveValue = { mobile: true };\n  responsiveValue = { mobile: false };\n  responsiveValue = {\n    mobile: 'row',\n    tablet: 'column',\n  };\n  responsiveValue = {\n    mobile: true,\n    tablet: false,\n  };\n  responsiveValue = {\n    mobile: 'row',\n    tablet: 'column',\n    desktop: 'row',\n  };\n  responsiveValue = {\n    mobile: false,\n    tablet: true,\n    desktop: false,\n  };\n\n  // Invalid values\n  // @ts-expect-error\n  responsiveValue = 'NOPE';\n  // @ts-expect-error\n  responsiveValue = 123;\n  // @ts-expect-error\n  responsiveValue = null;\n  // @ts-expect-error\n  responsiveValue = [];\n  // @ts-expect-error\n  responsiveValue = ['NOPE'];\n  // @ts-expect-error\n  responsiveValue = [123];\n  // @ts-expect-error\n  responsiveValue = ['row', 'row', 'row', 'your', 'boat'];\n  // @ts-expect-error\n  responsiveValue = { mobile: 'nope' };\n  // @ts-expect-error\n  responsiveValue = { mobile: 123 };\n  // @ts-expect-error\n  responsiveValue = { mobile: null };\n  // @ts-expect-error\n  responsiveValue = { NOPE: 123 };\n\n  noop(responsiveValue);\n\n  let requiredValue: RequiredConditionalValue<\n    typeof conditionalProperties,\n    'row' | 'column' | boolean\n  >;\n\n  // Valid values\n  requiredValue = 'row';\n  requiredValue = { mobile: 'row' };\n  requiredValue = { mobile: 'row', desktop: 'column' };\n  requiredValue = true;\n  requiredValue = { mobile: false };\n  requiredValue = { mobile: false, desktop: true };\n  requiredValue = ['row'];\n  requiredValue = ['row', null, 'column'];\n  requiredValue = [false];\n  requiredValue = [false, null, true];\n\n  // @ts-expect-error\n  requiredValue = [];\n  // @ts-expect-error\n  requiredValue = [null];\n  // @ts-expect-error\n  requiredValue = [null, 'column'];\n  // @ts-expect-error\n  requiredValue = [null, null, 'column'];\n  // @ts-expect-error\n  requiredValue = [null, null, true];\n  // @ts-expect-error\n  requiredValue = {};\n  // @ts-expect-error\n  requiredValue = { desktop: 'column' };\n  // @ts-expect-error\n  requiredValue = { desktop: true };\n\n  noop(requiredValue);\n\n  // Ensure type is 'never' when default condition is missing\n  type InvalidRequiredResponsiveValue<Value extends string | number> =\n    RequiredConditionalValue<\n      typeof conditionalPropertiesWithoutDefaultCondition,\n      Value\n    >;\n\n  // @ts-expect-error\n  const invalidRequiredValue: InvalidRequiredResponsiveValue<'row' | 'column'> =\n    ['row'];\n\n  noop(invalidRequiredValue);\n};\n"
  },
  {
    "path": "tests/sprinkles/sprinkles.test.ts",
    "content": "import { describe, expect, it } from 'vitest';\nimport {\n  createMapValueFn,\n  createNormalizeValueFn,\n  createSprinkles,\n} from '@vanilla-extract/sprinkles';\n\nimport {\n  basicProperties,\n  propertiesWithPaddingShorthands,\n  propertiesWithShorthands,\n  conditionalProperties,\n  conditionalPropertiesWithMultipleDefaultConditions,\n  conditionalPropertiesWithoutDefaultCondition,\n  conditionalPropertiesWithoutResponsiveArray,\n  shorthandsWithZeroValues,\n} from './index.css';\n\ndescribe('sprinkles', () => {\n  describe('createSprinkles', () => {\n    it('should handle unconditional properties', () => {\n      const sprinkles = createSprinkles(basicProperties);\n\n      expect(sprinkles({ top: 0, color: 'green-300' })).toMatchInlineSnapshot(\n        `\"sprinkles_top_0__1kw4bre3 sprinkles_color_green-300__1kw4bre2\"`,\n      );\n    });\n\n    it('should handle default classes on conditional properties', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(sprinkles({ display: 'block' })).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej\"`,\n      );\n    });\n\n    it('should ignore undefined property values', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(\n        sprinkles({\n          display: 'block',\n          paddingTop: undefined,\n        }),\n      ).toMatchInlineSnapshot(`\"sprinkles_display_block_mobile__1kw4brej\"`);\n    });\n\n    it('should handle falsey values on conditional properties', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(\n        sprinkles({ display: 'block', opacity: { mobile: 0, desktop: 1 } }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej sprinkles_opacity_0_mobile__1kw4bre1a sprinkles_opacity_1_desktop__1kw4bre1f\"`,\n      );\n    });\n\n    it('should handle falsey values from responsive array on conditional properties', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(\n        sprinkles({ display: 'block', opacity: [0, 1] }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej sprinkles_opacity_0_mobile__1kw4bre1a sprinkles_opacity_1_tablet__1kw4bre1e\"`,\n      );\n    });\n\n    it('should handle conditional properties with different variants', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(\n        sprinkles({\n          display: {\n            mobile: 'block',\n            desktop: 'flex',\n          },\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej sprinkles_display_flex_desktop__1kw4brer\"`,\n      );\n    });\n\n    it('should handle a mix of unconditional and conditional properties', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(\n        sprinkles({\n          display: {\n            mobile: 'block',\n            desktop: 'flex',\n          },\n          color: 'gray-500',\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej sprinkles_display_flex_desktop__1kw4brer sprinkles_color_gray-500__1kw4brea\"`,\n      );\n    });\n\n    it('should ignore undefined conditional values', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(\n        sprinkles({\n          paddingTop: {\n            mobile: 'medium',\n            tablet: undefined,\n            desktop: 'large',\n          },\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingTop_medium_mobile__1kw4brev sprinkles_paddingTop_large_desktop__1kw4bre10\"`,\n      );\n    });\n\n    it('should handle responsive arrays', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(\n        sprinkles({\n          display: ['block', 'flex', 'block'],\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej sprinkles_display_flex_tablet__1kw4breq sprinkles_display_block_desktop__1kw4brel\"`,\n      );\n    });\n\n    it('should handle responsive arrays with null values', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(\n        sprinkles({\n          display: ['block', null, 'flex'],\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej sprinkles_display_flex_desktop__1kw4brer\"`,\n      );\n    });\n\n    it('should handle responsive arrays that end early', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(\n        sprinkles({\n          display: ['block', 'flex'],\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_display_block_mobile__1kw4brej sprinkles_display_flex_tablet__1kw4breq\"`,\n      );\n    });\n\n    it('should handle shorthand properties with a default condition', () => {\n      const sprinkles = createSprinkles(propertiesWithShorthands);\n\n      expect(\n        sprinkles({\n          paddingX: 'large',\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingLeft_large__1kw4bref sprinkles_paddingRight_large__1kw4brei\"`,\n      );\n    });\n\n    it('should handle shorthand properties with a conditional value', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(\n        sprinkles({\n          paddingY: {\n            mobile: 'medium',\n            tablet: 'large',\n          },\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingBottom_medium_mobile__1kw4bre14 sprinkles_paddingBottom_large_tablet__1kw4bre18 sprinkles_paddingTop_medium_mobile__1kw4brev sprinkles_paddingTop_large_tablet__1kw4brez\"`,\n      );\n    });\n\n    it('should handle shorthand properties with a responsive array', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(\n        sprinkles({\n          paddingY: ['small', 'medium', 'large'],\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingBottom_small_mobile__1kw4bre11 sprinkles_paddingBottom_medium_tablet__1kw4bre15 sprinkles_paddingBottom_large_desktop__1kw4bre19 sprinkles_paddingTop_small_mobile__1kw4bres sprinkles_paddingTop_medium_tablet__1kw4brew sprinkles_paddingTop_large_desktop__1kw4bre10\"`,\n      );\n    });\n\n    it('should merge shorthand styles with non-shorthands', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(\n        sprinkles({\n          paddingX: 'small',\n          paddingY: {\n            mobile: 'medium',\n            desktop: 'large',\n          },\n          paddingTop: 'small',\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingLeft_small__1kw4bred sprinkles_paddingRight_small__1kw4breg sprinkles_paddingBottom_medium_mobile__1kw4bre14 sprinkles_paddingBottom_large_desktop__1kw4bre19 sprinkles_paddingTop_small_mobile__1kw4bres\"`,\n      );\n    });\n\n    it('should ignore undefined longhand values when resolving shorthands', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(\n        sprinkles({\n          paddingY: 'small',\n          paddingTop: undefined,\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingBottom_small_mobile__1kw4bre11 sprinkles_paddingTop_small_mobile__1kw4bres\"`,\n      );\n    });\n\n    it('should ignore undefined shorthand values when resolving shorthands', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(\n        sprinkles({\n          paddingX: 'small',\n          anotherPaddingX: undefined,\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingLeft_small__1kw4bred sprinkles_paddingRight_small__1kw4breg\"`,\n      );\n    });\n\n    it('should preserve config order of shorthands', () => {\n      const sprinkles = createSprinkles(propertiesWithPaddingShorthands);\n\n      expect(\n        sprinkles({\n          paddingTop: 'small',\n          paddingX: 'small',\n          paddingY: 'medium',\n          padding: 'large',\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingTop_small__1kw4bre23 sprinkles_paddingBottom_medium__1kw4bre27 sprinkles_paddingLeft_small__1kw4bre1x sprinkles_paddingRight_small__1kw4bre20\"`,\n      );\n    });\n\n    it('should handle shorthands with zero values', () => {\n      const sprinkles = createSprinkles(shorthandsWithZeroValues);\n\n      expect(\n        sprinkles({\n          mt: 0,\n        }),\n      ).toMatchInlineSnapshot(`\"sprinkles_marginTop_0__1kw4bre2a\"`);\n    });\n\n    it('should preserve config order of shorthands', () => {\n      const sprinkles = createSprinkles(propertiesWithPaddingShorthands);\n\n      expect(\n        sprinkles({\n          paddingX: 'small',\n          padding: 'large',\n        }),\n      ).toMatchInlineSnapshot(\n        `\"sprinkles_paddingTop_large__1kw4bre25 sprinkles_paddingBottom_large__1kw4bre28 sprinkles_paddingLeft_small__1kw4bre1x sprinkles_paddingRight_small__1kw4bre20\"`,\n      );\n    });\n\n    it('should provide a static set of properties on the sprinkles function', () => {\n      const sprinkles = createSprinkles(\n        propertiesWithShorthands,\n        conditionalProperties,\n      );\n\n      expect(sprinkles.properties).toMatchInlineSnapshot(`\n        Set {\n          \"paddingX\",\n          \"anotherPaddingX\",\n          \"color\",\n          \"paddingLeft\",\n          \"paddingRight\",\n          \"paddingY\",\n          \"display\",\n          \"paddingTop\",\n          \"paddingBottom\",\n          \"opacity\",\n        }\n      `);\n    });\n  });\n\n  describe('errors', () => {\n    it('should handle invalid properties', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          paddingLefty: 'small',\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"paddingLefty\" is not a valid sprinkle]`,\n      );\n    });\n\n    it('should handle invalid property values', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          paddingLeft: 'xsmall',\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"paddingLeft\" is not a valid sprinkle]`,\n      );\n    });\n\n    it('should handle conditional objects to unconditional values', () => {\n      const sprinkles = createSprinkles(basicProperties);\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          color: {\n            mobile: 'red',\n          },\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"color\" is not a conditional property]`,\n      );\n    });\n\n    it('should handle missing responsive arrays definitions', () => {\n      const sprinkles = createSprinkles(\n        conditionalPropertiesWithoutResponsiveArray,\n      );\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          marginTop: ['small'],\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"marginTop\" does not support responsive arrays]`,\n      );\n    });\n\n    it('should handle invalid responsive arrays values', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          paddingTop: ['xsmall'],\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"paddingTop\" has no value \"xsmall\". Possible values are \"small\", \"medium\", \"large\"]`,\n      );\n    });\n\n    it('should handle responsive arrays with too many values', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          paddingTop: ['small', 'medium', 'large', 'small'],\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"paddingTop\" only supports up to 3 breakpoints. You passed 4]`,\n      );\n    });\n\n    it('should handle invalid conditional property values', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          paddingTop: {\n            mobile: 'xlarge',\n          },\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"paddingTop\" has no value \"xlarge\". Possible values are \"small\", \"medium\", \"large\"]`,\n      );\n    });\n\n    it('should handle properties with no default condition', () => {\n      const sprinkles = createSprinkles(\n        conditionalPropertiesWithoutDefaultCondition,\n      );\n\n      expect(() =>\n        sprinkles({\n          // @ts-expect-error\n          transform: 'shrink',\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"transform\" has no default condition. You must specify which conditions to target explicitly. Possible options are \"active\"]`,\n      );\n    });\n\n    it('should handle invalid conditions', () => {\n      const sprinkles = createSprinkles(conditionalProperties);\n\n      expect(() =>\n        sprinkles({\n          paddingTop: {\n            // @ts-expect-error\n            ultraWide: 'large',\n          },\n        }),\n      ).toThrowErrorMatchingInlineSnapshot(\n        `[SprinklesError: \"paddingTop\" has no condition named \"ultraWide\". Possible values are \"mobile\", \"tablet\", \"desktop\"]`,\n      );\n    });\n  });\n\n  describe('createNormalizeValueFn', () => {\n    it('should handle unresponsive values', () => {\n      const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n      expect(normalizeValue('foobar')).toMatchInlineSnapshot(`\n        {\n          \"mobile\": \"foobar\",\n        }\n      `);\n    });\n\n    it('should handle unresponsive booleans', () => {\n      const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n      expect(normalizeValue(false)).toMatchInlineSnapshot(`\n        {\n          \"mobile\": false,\n        }\n      `);\n    });\n\n    it('should handle responsive arrays', () => {\n      const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n      expect(normalizeValue([false, true])).toMatchInlineSnapshot(`\n        {\n          \"mobile\": false,\n          \"tablet\": true,\n        }\n      `);\n    });\n\n    it('should handle responsive arrays', () => {\n      const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n      expect(normalizeValue(['one', 'two', 'three'])).toMatchInlineSnapshot(`\n        {\n          \"desktop\": \"three\",\n          \"mobile\": \"one\",\n          \"tablet\": \"two\",\n        }\n      `);\n    });\n\n    it('should handle responsive arrays with nulls', () => {\n      const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n      expect(normalizeValue(['mobile', null, true])).toMatchInlineSnapshot(`\n        {\n          \"desktop\": true,\n          \"mobile\": \"mobile\",\n        }\n      `);\n    });\n\n    it('should handle conditional objects', () => {\n      const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n      expect(normalizeValue({ mobile: 'one', desktop: 'three' }))\n        .toMatchInlineSnapshot(`\n        {\n          \"desktop\": \"three\",\n          \"mobile\": \"one\",\n        }\n      `);\n    });\n\n    it('should handle conditional objects with undefined', () => {\n      const normalizeValue = createNormalizeValueFn(conditionalProperties);\n\n      expect(\n        normalizeValue({ mobile: 'one', tablet: undefined, desktop: 'three' }),\n      ).toMatchInlineSnapshot(`\n        {\n          \"desktop\": \"three\",\n          \"mobile\": \"one\",\n          \"tablet\": undefined,\n        }\n      `);\n    });\n  });\n\n  describe('createMapValueFn', () => {\n    it('should handle strings', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        'foobar',\n        (value, key) => `${value}_${key}` as const,\n      );\n\n      expect(value).toMatchInlineSnapshot(`\"foobar_mobile\"`);\n    });\n\n    it('should handle numbers', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(123, (value, key) => `${value}_${key}` as const);\n\n      expect(value).toMatchInlineSnapshot(`\"123_mobile\"`);\n    });\n\n    it('should handle booleans', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(123, () => false);\n\n      expect(value).toBe(false);\n    });\n\n    it('should handle conditional booleans', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        { mobile: 1, tablet: 2, desktop: 3 },\n        (value) => value === 2,\n      );\n\n      expect(value).toStrictEqual({\n        mobile: false,\n        tablet: true,\n        desktop: false,\n      });\n    });\n\n    it('should handle nulls', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(123, () => null);\n\n      expect(value).toBe(null);\n    });\n\n    it('should handle conditional nulls', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        { mobile: 1, tablet: false, desktop: 3 },\n        (value) => value || null,\n      );\n\n      expect(value).toStrictEqual({ mobile: 1, tablet: null, desktop: 3 });\n    });\n\n    it('should handle undefined', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(true, () => undefined);\n\n      expect(value).toBe(undefined);\n    });\n\n    it('should handle conditional undefined', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        { mobile: 1, tablet: false, desktop: 3 },\n        (value) => value || undefined,\n      );\n\n      expect(value).toStrictEqual({ mobile: 1, tablet: undefined, desktop: 3 });\n    });\n\n    it('should handle responsive arrays', () => {\n      const map = createMapValueFn(conditionalProperties);\n      const value = map(['one'], (value, key) => `${value}_${key}` as const);\n\n      expect(value).toMatchInlineSnapshot(`\n        {\n          \"mobile\": \"one_mobile\",\n        }\n      `);\n    });\n\n    it('should handle responsive arrays', () => {\n      const map = createMapValueFn(conditionalProperties);\n      const value = map(\n        ['one', 'two'],\n        (value, key) => `${value}_${key}` as const,\n      );\n\n      expect(value).toMatchInlineSnapshot(`\n        {\n          \"mobile\": \"one_mobile\",\n          \"tablet\": \"two_tablet\",\n        }\n      `);\n    });\n\n    it('should handle responsive arrays', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        [false, true, false],\n        (value, key) => `${value}_${key}` as const,\n      );\n\n      expect(value).toMatchInlineSnapshot(`\n        {\n          \"desktop\": \"false_desktop\",\n          \"mobile\": \"false_mobile\",\n          \"tablet\": \"true_tablet\",\n        }\n      `);\n    });\n\n    it('should handle responsive arrays with nulls', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        ['one', null, 'three'] as const,\n        (value, key) => `${value}_${key}` as const,\n      );\n\n      expect(value).toMatchInlineSnapshot(`\n        {\n          \"desktop\": \"three_desktop\",\n          \"mobile\": \"one_mobile\",\n        }\n      `);\n    });\n\n    it('should handle responsive arrays with only nulls', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        [null, null, null] as const,\n        (value, key) => `${value}_${key}` as const,\n      );\n\n      expect(value).toMatchInlineSnapshot(`{}`);\n    });\n\n    it('should handle conditional objects', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        { mobile: 'one', desktop: 'three' } as const,\n        (value, key) => `${value}_${key}` as const,\n      );\n\n      expect(value).toMatchInlineSnapshot(`\n        {\n          \"desktop\": \"three_desktop\",\n          \"mobile\": \"one_mobile\",\n        }\n      `);\n    });\n\n    it('should handle conditional objects with undefined', () => {\n      const mapValue = createMapValueFn(conditionalProperties);\n      const value = mapValue(\n        { mobile: 'one', tablet: undefined, desktop: 'three' } as const,\n        (value, key) => `${value}_${key}` as const,\n      );\n\n      expect(value).toMatchInlineSnapshot(`\n        {\n          \"desktop\": \"three_desktop\",\n          \"mobile\": \"one_mobile\",\n        }\n      `);\n    });\n  });\n\n  it('should create atomic styles', () => {\n    expect(propertiesWithShorthands).toMatchInlineSnapshot(`\n      {\n        \"conditions\": undefined,\n        \"styles\": {\n          \"anotherPaddingX\": {\n            \"mappings\": [\n              \"paddingLeft\",\n              \"paddingRight\",\n            ],\n          },\n          \"color\": {\n            \"values\": {\n              \"gray-500\": {\n                \"defaultClass\": \"sprinkles_color_gray-500__1kw4brea\",\n              },\n              \"green-300\": {\n                \"defaultClass\": \"sprinkles_color_green-300__1kw4brec\",\n              },\n              \"red-500\": {\n                \"defaultClass\": \"sprinkles_color_red-500__1kw4breb\",\n              },\n            },\n          },\n          \"paddingLeft\": {\n            \"values\": {\n              \"large\": {\n                \"defaultClass\": \"sprinkles_paddingLeft_large__1kw4bref\",\n              },\n              \"medium\": {\n                \"defaultClass\": \"sprinkles_paddingLeft_medium__1kw4bree\",\n              },\n              \"small\": {\n                \"defaultClass\": \"sprinkles_paddingLeft_small__1kw4bred\",\n              },\n            },\n          },\n          \"paddingRight\": {\n            \"values\": {\n              \"large\": {\n                \"defaultClass\": \"sprinkles_paddingRight_large__1kw4brei\",\n              },\n              \"medium\": {\n                \"defaultClass\": \"sprinkles_paddingRight_medium__1kw4breh\",\n              },\n              \"small\": {\n                \"defaultClass\": \"sprinkles_paddingRight_small__1kw4breg\",\n              },\n            },\n          },\n          \"paddingX\": {\n            \"mappings\": [\n              \"paddingLeft\",\n              \"paddingRight\",\n            ],\n          },\n        },\n      }\n    `);\n  });\n\n  it('should create conditional atomic styles', () => {\n    expect(conditionalProperties).toMatchInlineSnapshot(`\n      {\n        \"conditions\": {\n          \"conditionNames\": [\n            \"mobile\",\n            \"tablet\",\n            \"desktop\",\n          ],\n          \"defaultCondition\": \"mobile\",\n          \"responsiveArray\": [\n            \"mobile\",\n            \"tablet\",\n            \"desktop\",\n          ],\n        },\n        \"styles\": {\n          \"display\": {\n            \"responsiveArray\": [\n              \"mobile\",\n              \"tablet\",\n              \"desktop\",\n            ],\n            \"values\": {\n              \"block\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_display_block_desktop__1kw4brel\",\n                  \"mobile\": \"sprinkles_display_block_mobile__1kw4brej\",\n                  \"tablet\": \"sprinkles_display_block_tablet__1kw4brek\",\n                },\n                \"defaultClass\": \"sprinkles_display_block_mobile__1kw4brej\",\n              },\n              \"flex\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_display_flex_desktop__1kw4brer\",\n                  \"mobile\": \"sprinkles_display_flex_mobile__1kw4brep\",\n                  \"tablet\": \"sprinkles_display_flex_tablet__1kw4breq\",\n                },\n                \"defaultClass\": \"sprinkles_display_flex_mobile__1kw4brep\",\n              },\n              \"none\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_display_none_desktop__1kw4breo\",\n                  \"mobile\": \"sprinkles_display_none_mobile__1kw4brem\",\n                  \"tablet\": \"sprinkles_display_none_tablet__1kw4bren\",\n                },\n                \"defaultClass\": \"sprinkles_display_none_mobile__1kw4brem\",\n              },\n            },\n          },\n          \"opacity\": {\n            \"responsiveArray\": [\n              \"mobile\",\n              \"tablet\",\n              \"desktop\",\n            ],\n            \"values\": {\n              \"0\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_opacity_0_desktop__1kw4bre1c\",\n                  \"mobile\": \"sprinkles_opacity_0_mobile__1kw4bre1a\",\n                  \"tablet\": \"sprinkles_opacity_0_tablet__1kw4bre1b\",\n                },\n                \"defaultClass\": \"sprinkles_opacity_0_mobile__1kw4bre1a\",\n              },\n              \"1\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_opacity_1_desktop__1kw4bre1f\",\n                  \"mobile\": \"sprinkles_opacity_1_mobile__1kw4bre1d\",\n                  \"tablet\": \"sprinkles_opacity_1_tablet__1kw4bre1e\",\n                },\n                \"defaultClass\": \"sprinkles_opacity_1_mobile__1kw4bre1d\",\n              },\n            },\n          },\n          \"paddingBottom\": {\n            \"responsiveArray\": [\n              \"mobile\",\n              \"tablet\",\n              \"desktop\",\n            ],\n            \"values\": {\n              \"large\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_paddingBottom_large_desktop__1kw4bre19\",\n                  \"mobile\": \"sprinkles_paddingBottom_large_mobile__1kw4bre17\",\n                  \"tablet\": \"sprinkles_paddingBottom_large_tablet__1kw4bre18\",\n                },\n                \"defaultClass\": \"sprinkles_paddingBottom_large_mobile__1kw4bre17\",\n              },\n              \"medium\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_paddingBottom_medium_desktop__1kw4bre16\",\n                  \"mobile\": \"sprinkles_paddingBottom_medium_mobile__1kw4bre14\",\n                  \"tablet\": \"sprinkles_paddingBottom_medium_tablet__1kw4bre15\",\n                },\n                \"defaultClass\": \"sprinkles_paddingBottom_medium_mobile__1kw4bre14\",\n              },\n              \"small\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_paddingBottom_small_desktop__1kw4bre13\",\n                  \"mobile\": \"sprinkles_paddingBottom_small_mobile__1kw4bre11\",\n                  \"tablet\": \"sprinkles_paddingBottom_small_tablet__1kw4bre12\",\n                },\n                \"defaultClass\": \"sprinkles_paddingBottom_small_mobile__1kw4bre11\",\n              },\n            },\n          },\n          \"paddingTop\": {\n            \"responsiveArray\": [\n              \"mobile\",\n              \"tablet\",\n              \"desktop\",\n            ],\n            \"values\": {\n              \"large\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_paddingTop_large_desktop__1kw4bre10\",\n                  \"mobile\": \"sprinkles_paddingTop_large_mobile__1kw4brey\",\n                  \"tablet\": \"sprinkles_paddingTop_large_tablet__1kw4brez\",\n                },\n                \"defaultClass\": \"sprinkles_paddingTop_large_mobile__1kw4brey\",\n              },\n              \"medium\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_paddingTop_medium_desktop__1kw4brex\",\n                  \"mobile\": \"sprinkles_paddingTop_medium_mobile__1kw4brev\",\n                  \"tablet\": \"sprinkles_paddingTop_medium_tablet__1kw4brew\",\n                },\n                \"defaultClass\": \"sprinkles_paddingTop_medium_mobile__1kw4brev\",\n              },\n              \"small\": {\n                \"conditions\": {\n                  \"desktop\": \"sprinkles_paddingTop_small_desktop__1kw4breu\",\n                  \"mobile\": \"sprinkles_paddingTop_small_mobile__1kw4bres\",\n                  \"tablet\": \"sprinkles_paddingTop_small_tablet__1kw4bret\",\n                },\n                \"defaultClass\": \"sprinkles_paddingTop_small_mobile__1kw4bres\",\n              },\n            },\n          },\n          \"paddingY\": {\n            \"mappings\": [\n              \"paddingBottom\",\n              \"paddingTop\",\n            ],\n          },\n        },\n      }\n    `);\n  });\n\n  it('should create conditional properties with multiple default condition classes in \"defaultClass\"', () => {\n    expect(conditionalPropertiesWithMultipleDefaultConditions)\n      .toMatchInlineSnapshot(`\n      {\n        \"conditions\": {\n          \"conditionNames\": [\n            \"lightMode\",\n            \"darkMode\",\n          ],\n          \"defaultCondition\": [\n            \"lightMode\",\n            \"darkMode\",\n          ],\n          \"responsiveArray\": undefined,\n        },\n        \"styles\": {\n          \"background\": {\n            \"values\": {\n              \"blue\": {\n                \"conditions\": {\n                  \"darkMode\": \"sprinkles_background_blue_darkMode__1kw4bre1l\",\n                  \"lightMode\": \"sprinkles_background_blue_lightMode__1kw4bre1k\",\n                },\n                \"defaultClass\": \"sprinkles_background_blue_lightMode__1kw4bre1k sprinkles_background_blue_darkMode__1kw4bre1l\",\n              },\n              \"green\": {\n                \"conditions\": {\n                  \"darkMode\": \"sprinkles_background_green_darkMode__1kw4bre1j\",\n                  \"lightMode\": \"sprinkles_background_green_lightMode__1kw4bre1i\",\n                },\n                \"defaultClass\": \"sprinkles_background_green_lightMode__1kw4bre1i sprinkles_background_green_darkMode__1kw4bre1j\",\n              },\n              \"red\": {\n                \"conditions\": {\n                  \"darkMode\": \"sprinkles_background_red_darkMode__1kw4bre1h\",\n                  \"lightMode\": \"sprinkles_background_red_lightMode__1kw4bre1g\",\n                },\n                \"defaultClass\": \"sprinkles_background_red_lightMode__1kw4bre1g sprinkles_background_red_darkMode__1kw4bre1h\",\n              },\n            },\n          },\n        },\n      }\n    `);\n  });\n});\n"
  },
  {
    "path": "tests/types/type-tests.ts",
    "content": "import {\n  createTheme,\n  createThemeContract,\n  createGlobalTheme,\n} from '@vanilla-extract/css';\n\nconst vars = createThemeContract({\n  shouldSupportNull: null,\n  shouldSupportNestedNull: {\n    nested: null,\n  },\n  shouldSupportString: '',\n  shouldSupportNestedString: {\n    nested: '',\n  },\n});\n\ncreateGlobalTheme(':root', vars, {\n  shouldSupportNull: 'some-value',\n  shouldSupportNestedNull: { nested: 'some-value' },\n  shouldSupportString: 'some-value',\n  shouldSupportNestedString: { nested: 'some-value' },\n});\n\ncreateTheme(vars, {\n  shouldSupportNull: 'some-value',\n  shouldSupportNestedNull: { nested: 'some-value' },\n  shouldSupportString: 'some-value',\n  shouldSupportNestedString: { nested: 'some-value' },\n});\n"
  },
  {
    "path": "tests/walkObject/tokens.ts",
    "content": "export const space = { small: '8px', large: '16px' };\n"
  },
  {
    "path": "tests/walkObject/walkObject.test.ts",
    "content": "import { describe, expect, test } from 'vitest';\nimport { walkObject } from '@vanilla-extract/private';\nimport * as tokens from './tokens';\n\ndescribe('walkObject', () => {\n  test('walkObject', () => {\n    const obj = {\n      a: {\n        b: {\n          c: 1,\n        },\n        d: 2,\n      },\n      e: 3,\n    };\n\n    const result = walkObject(obj, (value) => String(value));\n\n    expect(result).toMatchInlineSnapshot(`\n      {\n        \"a\": {\n          \"b\": {\n            \"c\": \"1\",\n          },\n          \"d\": \"2\",\n        },\n        \"e\": \"3\",\n      }\n    `);\n  });\n\n  test('walkObject module namespace object', () => {\n    const result = walkObject(tokens, (value) => `foo${value}`);\n\n    expect(result).toMatchInlineSnapshot(`\n      {\n        \"space\": {\n          \"large\": \"foo16px\",\n          \"small\": \"foo8px\",\n        },\n      }\n    `);\n  });\n});\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"module\": \"Preserve\", // Vanilla Extract is bundled with preconstruct (effectively Rollup)\n    \"lib\": [\"ES2023\", \"ESNext.Array\", \"dom\", \"dom.iterable\"], // ES2023 aligns with Node 22, and we need DOM APIs for fixtures and the docs site\n    \"noEmit\": true,\n    \"noImplicitAny\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"moduleResolution\": \"bundler\", // Again, bundling handles module resolution\n    \"jsx\": \"react-jsx\",\n    \"allowJs\": true,\n    \"allowImportingTsExtensions\": true,\n    \"incremental\": true,\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"moduleDetection\": \"force\",\n    \"isolatedModules\": true,\n    \"verbatimModuleSyntax\": true\n  },\n  \"exclude\": [\n    \"node_modules\",\n    \"**/dist/**\",\n    \"tests/compiler/fixtures/tsconfig-paths/**\"\n  ],\n  \"include\": [\n    \"./vitest.setup.ts\",\n    \"packages/**/*\",\n    \"examples/*/app/**/*\",\n    \"examples/*/src/**/*\",\n    \"fixtures/*/src/**/*\",\n    \"test-helpers/**/*\",\n    \"site/**/*\",\n    \"tests/**/*\",\n    \"scripts/*\"\n  ]\n}\n"
  },
  {
    "path": "vitest.config.ts",
    "content": "import { defineConfig } from 'vitest/config';\nimport { vanillaExtractPlugin } from './packages/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    vanillaExtractPlugin({\n      unstable_mode: 'transform',\n    }),\n  ],\n});\n"
  }
]