[
  {
    "path": ".eslintignore",
    "content": "test/fixtures\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE.md",
    "content": "<!--\n\nBefore you open a new issue please take a look at our [**Frequent Asked Questions**](https://github.com/vercel/styled-jsx#faq) and [**open issues**](https://github.com/vercel/styled-jsx/issues). Or if you're using styled-jsx with Next.js but found issue there, please fill an issue to [**Next.js**](https://github.com/vercel/next.js/issues) instead.\n\nRemember, often time asking in chat or looking at the FAQ/issues can be \\*faster than waiting for us to reply to a new issue\\*\\*.\n\nIf you are here to report a bug or request a feature please remove this introductory section and fill out the information below!\n\n-->\n\n#### Do you want to request a _feature_ or report a _bug_?\n\n#### What is the current behavior?\n\n#### If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar\n\n#### What is the expected behavior?\n\n#### Environment (include versions)\n\n- Version of styled-jsx (or next.js if it's being used):\n- Browser:\n- OS:\n\n#### Did this work in previous versions?\n"
  },
  {
    "path": ".github/workflows/main.yml",
    "content": "name: CI\n\non:\n  push:\n    branches:\n      - main\n      - alpha\n      - beta\n    tags:\n      - '!*'\n  pull_request:\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Begin CI...\n        uses: actions/checkout@v4\n\n      - name: Use Node 20\n        uses: actions/setup-node@v4\n        with:\n          node-version: 20.x\n\n      - name: Install dependencies\n        run: yarn install --frozen-lockfile\n        env:\n          CI: true\n\n      - name: Build\n        run: yarn build\n        env:\n          CI: true\n\n      - name: Lint\n        run: yarn lint\n        env:\n          CI: true\n\n      - name: Test\n        run: yarn test\n        env:\n          CI: true\n\n      - name: Test types\n        run: yarn test-types\n        env:\n          CI: true\n\n      - name: Release\n        if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/alpha' || github.ref == 'refs/heads/beta')\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}\n        run: yarn semantic-release\n"
  },
  {
    "path": ".github/workflows/prs.yml",
    "content": "name: 'Lint PR'\non:\n  pull_request_target:\n    types:\n      - opened\n      - edited\n      - synchronize\n\njobs:\n  main:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: amannn/action-semantic-pull-request@v2.1.0\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n"
  },
  {
    "path": ".gitignore",
    "content": "# dependencies\nnode_modules\n\n# build output\ndist\nout\n\n# logs\nnpm-debug.log\n"
  },
  {
    "path": ".npmrc",
    "content": "package-lock=false\nsave-exact = true\n"
  },
  {
    "path": ".prettierrc.json",
    "content": "{ \"singleQuote\": true, \"semi\": false }\n"
  },
  {
    "path": "CODEOWNERS",
    "content": "# optionally request a review from @rauchg, @nkzawa, @leo manually\n*       @huozhi\n*       @ijjk\n"
  },
  {
    "path": "Changelog.md",
    "content": "# Changelog\n\n## [5.0.0]\n\n### Features\n\n- Introduce contextual styles (#744)\n- Opt-in react 18 insertion effect hook when available (#753)\n- Fallback to module level registry in browser (#768)\n\n### Improvements\n\n- Make JSXStyle return a noop if the registry context is not provided (#749)\n- Fix typings of `nonce` property\n- Pre-compile dependencies to reduce install size/time (#770)\n\n### BREAKING CHANGES\n\n#### APIs\n\n- `styled-jsx/server` import path is deprecated\n- `flush` and `flushToHTML` from `styled-jsx/server` APIs are deprecated\n- New component `<StyledRegistry>` is introduced\n- New APIs `useStyleRegistry` and `createStyleRegistry` are introduced\n\n#### Usage\n\nIf you're only using styled-jsx purely client side, nothing will effect you.\nIf you're using styled-jsx inside Next.js without customization, Next.js will automatically handle the changes for you.\n\nIf you have your own customization with styled-jsx in Next.js, for example you have a custom `_document`:\nBy default, doing this will let Next.js collect styles and pass them down.\n\n```jsx\nclass Document extends React.Component {\n  static async getInitialProps(ctx) {\n    return await ctx.defaultGetInitialProps(ctx)\n  }\n}\n```\n\nOr for instance you're passing `nonce` property in `getInitialProps` of `_document`, this will let you configure it:\n\n```diff\nclass Document extends React.Component {\n  static async getInitialProps(ctx) {\n-    return await ctx.defaultGetInitialProps(ctx)\n+    return await ctx.defaultGetInitialProps(ctx, { nonce })\n  }\n}\n```\n\nIf you're building the SSR solution yourself with other frameworks, please checkout the **Server-Side Rendering** section in readme.\n\n## [4.0.1]\n\n- Mark `@babel/core` as optional peer dependency\n\n## [4.0.0]\n\n- Use react hooks to manage styles injection (#720)\n\n### BREAKING CHANGES\n\n- Drop support for react versions < 16.8.0\n\n### Improvements\n\n- Drop babel 6 support (#730)\n- Auto publish alpha/beta versions\n\n## [3.4.x]\n\n### Improvements\n\n- Typing support\n- Inject unique \\_JSXStyle identifier\n- Hide webpack loader warnings\n- Refactor the import helpers\n"
  },
  {
    "path": "babel-test.js",
    "content": "/* eslint-ignore */\nmodule.exports = require('./dist/babel').test()\n"
  },
  {
    "path": "babel.js",
    "content": "module.exports = require('./dist/babel').default\n"
  },
  {
    "path": "css.d.ts",
    "content": "// Definitions by: @types/styled-jsx <https://www.npmjs.com/package/@types/styled-jsx>\n\ndeclare module 'styled-jsx/css' {\n  import type { JSX } from \"react\";\n\n  function css(chunks: TemplateStringsArray, ...args: any[]): JSX.Element\n  namespace css {\n    export function global(\n      chunks: TemplateStringsArray,\n      ...args: any[]\n    ): JSX.Element\n    export function resolve(\n      chunks: TemplateStringsArray,\n      ...args: any[]\n    ): { className: string; styles: JSX.Element }\n  }\n  export = css\n}\n"
  },
  {
    "path": "css.js",
    "content": "function notTranspiledError(name) {\n  throw new Error(\n    'styled-jsx/css: if you are getting this error it means that your `' +\n      name +\n      '` tagged template literals were not transpiled.'\n  )\n}\n\nfunction css() {\n  notTranspiledError('css')\n}\n\ncss.global = function() {\n  notTranspiledError('global')\n}\n\ncss.resolve = function() {\n  notTranspiledError('resolve')\n}\n\nmodule.exports = css\nmodule.exports.global = css.global\nmodule.exports.resolve = css.resolve\n"
  },
  {
    "path": "global.d.ts",
    "content": "import React from 'react'\n\ndeclare module 'react' {\n  interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {\n    jsx?: boolean\n    global?: boolean\n  }\n}\n"
  },
  {
    "path": "index.d.ts",
    "content": "/// <reference types=\"./css\" />\n/// <reference types=\"./macro\" />\n/// <reference types=\"./style\" />\n/// <reference types=\"./global\" />\n\ndeclare module 'styled-jsx' {\n  import type { JSX } from \"react\";\n\n  export type StyledJsxStyleRegistry = {\n    styles(options?: { nonce?: string }): JSX.Element[]\n    flush(): void\n    add(props: any): void\n    remove(props: any): void\n  }\n  export function useStyleRegistry(): StyledJsxStyleRegistry\n  export function StyleRegistry({\n    children,\n    registry\n  }: {\n    children: JSX.Element | import('react').ReactNode\n    registry?: StyledJsxStyleRegistry\n  }): JSX.Element\n  export function createStyleRegistry(): StyledJsxStyleRegistry\n}\n"
  },
  {
    "path": "index.js",
    "content": "module.exports = require('./dist/index')\n"
  },
  {
    "path": "lib/style-transform.js",
    "content": "/* eslint-ignore */\nmodule.exports = require('../dist/lib/style-transform')\n"
  },
  {
    "path": "lib/stylesheet.js",
    "content": "module.exports = require('../dist/lib/stylesheet')\n"
  },
  {
    "path": "license.md",
    "content": "MIT License\n\nCopyright (c) 2016-present Vercel, Inc.\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.\n"
  },
  {
    "path": "macro.d.ts",
    "content": "declare module 'styled-jsx/macro' {\n  import type { JSX } from \"react\";\n\n  namespace macro {\n    function resolve(\n      chunks: TemplateStringsArray,\n      ...args: any[]\n    ): {\n      className: string\n      styles: JSX.Element\n    }\n  }\n\n  export = macro\n}\n"
  },
  {
    "path": "macro.js",
    "content": "module.exports = require('./dist/babel').macro()\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"styled-jsx\",\n  \"version\": \"0.0.0-development\",\n  \"license\": \"MIT\",\n  \"repository\": \"vercel/styled-jsx\",\n  \"description\": \"Full CSS support for JSX without compromises\",\n  \"files\": [\n    \"dist\",\n    \"lib\",\n    \"global.d.ts\",\n    \"index.d.ts\",\n    \"index.js\",\n    \"babel.js\",\n    \"babel-test.js\",\n    \"style.js\",\n    \"style.d.ts\",\n    \"macro.js\",\n    \"macro.d.ts\",\n    \"css.js\",\n    \"css.d.ts\",\n    \"webpack.js\",\n    \"license.md\"\n  ],\n  \"typings\": \"./index.d.ts\",\n  \"scripts\": {\n    \"build-babel\": \"bunchee src/babel.js -f cjs -e babel-plugin-macros --runtime node -o dist/babel/index.js\",\n    \"build\": \"rm -rf dist && rm -rf out && yarn build-webpack && yarn build-index && yarn build-babel\",\n    \"build-webpack\": \"bunchee src/webpack.js -f cjs --runtime node -o dist/webpack/index.js\",\n    \"build-index\": \"bunchee src/index.js -f cjs --runtime node -o dist/index/index.js\",\n    \"test\": \"ava\",\n    \"test-types\": \"tsc --project tsconfig.json --noEmit\",\n    \"lint\": \"eslint ./src\",\n    \"format\": \"prettier --write \\\"./{src,test}/**/*.{js,css}\\\"\",\n    \"prepublishOnly\": \"yarn build && yarn test && yarn lint --quiet\"\n  },\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"pretty-quick --staged\"\n    }\n  },\n  \"ava\": {\n    \"require\": [\n      \"@babel/register\"\n    ]\n  },\n  \"eslintConfig\": {\n    \"env\": {\n      \"node\": true,\n      \"browser\": true,\n      \"es6\": true\n    },\n    \"extends\": [\n      \"eslint:recommended\",\n      \"prettier\"\n    ],\n    \"parserOptions\": {\n      \"ecmaVersion\": 11,\n      \"sourceType\": \"module\"\n    },\n    \"rules\": {\n      \"no-empty\": 0,\n      \"capitalized-comments\": 0,\n      \"valid-jsdoc\": 0,\n      \"prefer-destructuring\": 0,\n      \"padding-line-between-statements\": 0\n    }\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"7.18.10\",\n    \"@babel/core\": \"7.12.3\",\n    \"@babel/plugin-proposal-object-rest-spread\": \"7.12.1\",\n    \"@babel/plugin-syntax-jsx\": \"7.14.5\",\n    \"@babel/plugin-transform-arrow-functions\": \"7.12.1\",\n    \"@babel/plugin-transform-modules-commonjs\": \"7.12.1\",\n    \"@babel/plugin-transform-runtime\": \"7.12.1\",\n    \"@babel/preset-env\": \"7.12.1\",\n    \"@babel/preset-react\": \"7.12.5\",\n    \"@babel/register\": \"7.12.1\",\n    \"@babel/runtime\": \"7.12.5\",\n    \"@babel/types\": \"7.15.0\",\n    \"@types/react\": \"18.3.3\",\n    \"ava\": \"4.3.1\",\n    \"babel-plugin-macros\": \"2.8.0\",\n    \"bunchee\": \"2.1.5\",\n    \"convert-source-map\": \"1.7.0\",\n    \"eslint\": \"7.32.0\",\n    \"eslint-config-prettier\": \"4.0.0\",\n    \"husky\": \"4.3.0\",\n    \"loader-utils\": \"1.4.2\",\n    \"prettier\": \"1.16.4\",\n    \"pretty-quick\": \"3.1.0\",\n    \"react\": \"17.0.1\",\n    \"react-dom\": \"17.0.1\",\n    \"semantic-release\": \"17.2.2\",\n    \"source-map\": \"0.7.3\",\n    \"string-hash\": \"1.1.3\",\n    \"stylis\": \"3.5.4\",\n    \"stylis-rule-sheet\": \"0.0.10\",\n    \"typescript\": \"~5.0.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@babel/core\": {\n      \"optional\": true\n    },\n    \"babel-plugin-macros\": {\n      \"optional\": true\n    }\n  },\n  \"release\": {\n    \"branches\": [\n      \"main\",\n      \"alpha\",\n      \"beta\"\n    ]\n  },\n  \"engines\": {\n    \"node\": \">= 12.0.0\"\n  },\n  \"keywords\": [\n    \"babel-plugin-macros\",\n    \"vercel\",\n    \"zeit\",\n    \"css-in-js\",\n    \"css\"\n  ],\n  \"dependencies\": {\n    \"client-only\": \"0.0.1\"\n  },\n  \"packageManager\": \"yarn@1.22.22\"\n}\n"
  },
  {
    "path": "readme.md",
    "content": "# styled-jsx\n\n[![build status](https://github.com/vercel/styled-jsx/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/vercel/styled-jsx/actions?query=branch%3Amain)\n\nFull, scoped and component-friendly CSS support for JSX (rendered on the server or the client).\n\nCode and docs are for v3 which we highly recommend you to try. Looking for styled-jsx v2? Switch to the [v2 branch](https://github.com/vercel/styled-jsx/tree/v2).\n\n- [Getting started](#getting-started)\n- [Configuration options](#configuration-options)\n  - [`optimizeForSpeed`](#optimizeforspeed)\n  - [`sourceMaps`](#sourcemaps)\n  - [`styleModule`](#stylemodule)\n  - [`vendorPrefixes`](#vendorprefixes)\n- [Features](#features)\n- [How It Works](#how-it-works)\n  - [Why It Works Like This](#why-it-works-like-this)\n- [Targeting The Root](#targeting-the-root)\n- [Global styles](#global-styles)\n  - [One-off global selectors](#one-off-global-selectors)\n- [Dynamic styles](#dynamic-styles)\n  - [Via interpolated dynamic props](#via-interpolated-dynamic-props)\n  - [Via `className` toggling](#via-classname-toggling)\n  - [Via inline `style`](#via-inline-style)\n- [Constants](#constants)\n- [Server-Side Rendering](#server-side-rendering)\n- [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)\n  - [External styles](#external-styles)\n  - [Styles outside of components](#styles-outside-of-components)\n  - [The `resolve` tag](#the-resolve-tag)\n  - [Styles in regular CSS files](#styles-in-regular-css-files)\n- [CSS Preprocessing via Plugins](#css-preprocessing-via-plugins)\n  - [Plugin options](#plugin-options)\n  - [Example plugins](#example-plugins)\n- [Rendering in tests](#rendering-in-tests)\n- [FAQ](#faq)\n  - [Warning: unknown `jsx` prop on &lt;style&gt; tag](#warning-unknown-jsx-prop-on-style-tag)\n  - [Can I return an array of components when using React 16?](#can-i-return-an-array-of-components-when-using-react-16)\n  - [Styling third parties / child components from the parent](#styling-third-parties--child-components-from-the-parent)\n  - [Some styles are missing in production](https://github.com/vercel/styled-jsx/issues/319#issuecomment-349239326)\n  - [Build a component library with styled-jsx](#build-a-component-library-with-styled-jsx)\n- [Syntax Highlighting](#syntax-highlighting)\n- [ESLint](#eslint)\n- [TypeScript](#typescript)\n- [Credits](#credits)\n\n## Getting started\n\nFirstly, install the package:\n\n```bash\nnpm install --save styled-jsx\n```\n\nNext, add `styled-jsx/babel` to `plugins` in your babel configuration:\n\n```json\n{\n  \"plugins\": [\"styled-jsx/babel\"]\n}\n```\n\nNow add `<style jsx>` to your code and fill it with CSS:\n\n```jsx\nexport default () => (\n  <div>\n    <p>only this paragraph will get the style :)</p>\n\n    {/* you can include <Component />s here that include\n         other <p>s that don't get unexpected styles! */}\n\n    <style jsx>{`\n      p {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n```\n\n## Configuration options\n\nThe following are optional settings for the babel plugin.\n\n#### `optimizeForSpeed`\n\nBlazing fast and optimized CSS rules injection system based on the CSSOM APIs.\n\n```json\n{\n  \"plugins\": [[\"styled-jsx/babel\", { \"optimizeForSpeed\": true }]]\n}\n```\n\nWhen in production\\* this mode is automatically enabled.<br>\nBeware that when using this option source maps cannot be generated and styles cannot be edited via the devtools.\n\n\\* `process.env.NODE_ENV === 'production'`\n\n#### `sourceMaps`\n\nGenerates source maps (default: `false`)\n\n#### `styleModule`\n\nModule that the transpiled files should import (default: `styled-jsx/style`)\n\n#### `vendorPrefixes`\n\nTurn on/off automatic vendor prefixing (default: `true`)\n\n## Features\n\n- Full CSS support, no tradeoffs in power\n- Runtime size of just **3kb** (gzipped, from 12kb)\n- Complete isolation: Selectors, animations, keyframes\n- Built-in CSS vendor prefixing\n- Very fast, minimal and efficient transpilation (see below)\n- High-performance runtime-CSS-injection when not server-rendering\n- Future-proof: Equivalent to server-renderable \"Shadow CSS\"\n- Source maps support\n- Dynamic styles and themes support\n- CSS Preprocessing via Plugins\n\n## Using in Next.js\n\nNext.js automatically configures `styled-jsx` with babel or swc, you don't have to configure it manually.\n\n## How It Works\n\nThe example above transpiles to the following:\n\n```jsx\nimport _JSXStyle from 'styled-jsx/style'\n\nexport default () => (\n  <div className=\"jsx-123\">\n    <p className=\"jsx-123\">only this paragraph will get the style :)</p>\n    <_JSXStyle id=\"123\">{`p.jsx-123 {color: red;}`}</_JSXStyle>\n  </div>\n)\n```\n\n### Why It Works Like This\n\nUnique classnames give us style encapsulation and `_JSXStyle` is heavily optimized for:\n\n- Injecting styles upon render\n- Only injecting a certain component's style once (even if the component is included multiple times)\n- Removing unused styles\n- Keeping track of styles for server-side rendering\n\n### Targeting The Root\n\nNotice that the outer `<div>` from the example above also gets a `jsx-123` classname. We do this so that\nyou can target the \"root\" element, in the same manner that\n[`:host`](https://web.dev/articles/shadowdom-v1) works with Shadow DOM.\n\nIf you want to target _only_ the host, we suggest you use a class:\n\n```jsx\nexport default () => (\n  <div className=\"root\">\n    <style jsx>{`\n      .root {\n        color: green;\n      }\n    `}</style>\n  </div>\n)\n```\n\n### Global styles\n\nTo skip scoping entirely, you can make the global-ness of your styles\nexplicit by adding _global_.\n\n```jsx\nexport default () => (\n  <div>\n    <style jsx global>{`\n      body {\n        background: red;\n      }\n    `}</style>\n  </div>\n)\n```\n\nThe advantage of using this over `<style>` is twofold: no need\nto use `dangerouslySetInnerHTML` to avoid escaping issues with CSS\nand take advantage of `styled-jsx`'s de-duping system to avoid\nthe global styles being inserted multiple times.\n\n### One-off global selectors\n\nSometimes it's useful to skip selectors scoping. In order to get a one-off global selector we support `:global()`, inspired by [css-modules](https://github.com/css-modules/css-modules).\n\nThis is very useful in order to, for example, generate a _global class_ that\nyou can pass to 3rd-party components. For example, to style\n`react-select` which supports passing a custom class via `optionClassName`:\n\n```jsx\nimport Select from 'react-select'\nexport default () => (\n  <div>\n    <Select optionClassName=\"react-select\" />\n\n    <style jsx>{`\n      /* \"div\" will be prefixed, but \".react-select\" won't */\n\n      div :global(.react-select) {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n```\n\n### Dynamic styles\n\nTo make a component's visual representation customizable from the outside world there are three options.\n\n#### Via interpolated dynamic props\n\nAny value that comes from the component's `render` method scope is treated as dynamic. This makes it possible to use `props` and `state` for example.\n\n```jsx\nconst Button = props => (\n  <button>\n    {props.children}\n    <style jsx>{`\n      button {\n        padding: ${'large' in props ? '50' : '20'}px;\n        background: ${props.theme.background};\n        color: #999;\n        display: inline-block;\n        font-size: 1em;\n      }\n    `}</style>\n  </button>\n)\n```\n\nNew styles' injection is optimized to perform well at runtime.\n\nThat said when your CSS is mostly static we recommend to split it up in static and dynamic styles and use two separate `style` tags so that, when changing, only the dynamic parts are recomputed/rendered.\n\n```jsx\nconst Button = props => (\n  <button>\n    {props.children}\n    <style jsx>{`\n      button {\n        color: #999;\n        display: inline-block;\n        font-size: 2em;\n      }\n    `}</style>\n    <style jsx>{`\n      button {\n        padding: ${'large' in props ? '50' : '20'}px;\n        background: ${props.theme.background};\n      }\n    `}</style>\n  </button>\n)\n```\n\n#### Via `className` toggling\n\nThe second option is to pass properties that toggle class names.\n\n```jsx\nconst Button = props => (\n  <button className={'large' in props && 'large'}>\n    {props.children}\n    <style jsx>{`\n      button {\n        padding: 20px;\n        background: #eee;\n        color: #999;\n      }\n      .large {\n        padding: 50px;\n      }\n    `}</style>\n  </button>\n)\n```\n\nThen you would use this component as either `<Button>Hi</Button>` or `<Button large>Big</Button>`.\n\n#### Via inline `style`\n\n\\***best for animations**\n\nImagine that you wanted to make the padding in the button above completely customizable. You can override the CSS you configure via inline-styles:\n\n```jsx\nconst Button = ({ padding, children }) => (\n  <button style={{ padding }}>\n    {children}\n    <style jsx>{`\n      button {\n        padding: 20px;\n        background: #eee;\n        color: #999;\n      }\n    `}</style>\n  </button>\n)\n```\n\nIn this example, the padding defaults to the one set in `<style>` (`20`), but the user can pass a custom one via `<Button padding={30}>`.\n\n### Constants\n\nIt is possible to use constants like so:\n\n```jsx\nimport { colors, spacing } from '../theme'\nimport { invertColor } from '../theme/utils'\n\nconst Button = ({ children }) => (\n  <button>\n    {children}\n    <style jsx>{`\n      button {\n        padding: ${spacing.medium};\n        background: ${colors.primary};\n        color: ${invertColor(colors.primary)};\n      }\n    `}</style>\n  </button>\n)\n```\n\nPlease keep in mind that constants defined outside of the component scope are treated as static styles.\n\n## Server-Side Rendering\n\n`styled-jsx` v5 introduced `StyledRegistry` component and `useStyleRegistry` hook to let you scope styles rendering in each SSR render to keep concurrent-safe.\n\n- `registry.styles()` will return the array of react components for style tags.\n- `registry.flush()` can clean the existing styles in the registry, it's optional for SSR when you have a standalone registry for each SSR render.\n\n> Next.js 12 integrates with `styled-jsx` v5 and manages the registry for you.\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom/server'\nimport { StyleRegistry, useStyleRegistry } from 'styled-jsx'\nimport App from './app'\n\nfunction Styles() {\n  const registry = useStyleRegistry()\n  const styles = registry.styles()\n  return <>{styles}</>\n}\n\nexport default (req, res) => {\n  const app = ReactDOM.renderToString(<App />)\n  const html = ReactDOM.renderToStaticMarkup(\n    <StyleRegistry>\n      <html>\n        <head>\n          <Styles />\n        </head>\n        <body>\n          <div id=\"root\" dangerouslySetInnerHTML={{ __html: app }} />\n        </body>\n      </html>\n    </StyleRegistry>\n  )\n  res.end('<!doctype html>' + html)\n}\n```\n\nThere's also a new API `createStyleRegistry` that is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).\n\n```js\nconst registry = createStyleRegistry()\nconst styles = registry.styles() // access styles\n\nfunction Page() {\n  return (\n    <StyleRegistry registry={registry}>\n      <App />\n    </StyleRegistry>\n  )\n}\n```\n\nBy default `<StyleRegistry />` will use the `registry` from root top `StyleRegistry`, which means there's only one `registry` in the react tree.\n\nIt's **paramount** that you use one of these two functions so that\nthe generated styles can be diffed when the client loads and\nduplicate styles are avoided.\n\n### Content Security Policy\n\nStrict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is supported.\n\nYou should generate a nonce **per request**.\n\n```js\nimport nanoid from 'nanoid'\n\nconst nonce = Buffer.from(nanoid()).toString('base64') //ex: N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3\n```\n\nYou must then pass a nonce to `registry.styles({ nonce })` **and** set a `<meta property=\"csp-nonce\" content={nonce} />` tag.\n\nYour CSP policy must share the same nonce as well (the header nonce needs to match the html nonce and remain unpredictable).\n`Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3';`\n\n### External CSS and styles outside of the component\n\nIn styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the `styled-jsx/css` library. `styled-jsx/css` exports three tags that can be used to tag your styles:\n\n- `css`, the default export, to define scoped styles.\n- `css.global` to define global styles.\n- `css.resolve` to define scoped styles that resolve to the scoped `className` and a `styles` element.\n\n#### External styles\n\nIn an external file:\n\n```js\n/* styles.js */\nimport css from 'styled-jsx/css'\n\n// Scoped styles\nexport const button = css`\n  button {\n    color: hotpink;\n  }\n`\n\n// Global styles\nexport const body = css.global`body { margin: 0; }`\n\n// Resolved styles\nexport const link = css.resolve`a { color: green; }`\n// link.className -> scoped className to apply to `a` elements e.g. jsx-123\n// link.styles -> styles element to render inside of your component\n\n// Works also with default exports\nexport default css`\n  div {\n    color: green;\n  }\n`\n```\n\nYou can then import and use those styles:\n\n```jsx\nimport styles, { button, body } from './styles'\n\nexport default () => (\n  <div>\n    <button>styled-jsx</button>\n    <style jsx>{styles}</style>\n    <style jsx>{button}</style>\n    <style jsx global>\n      {body}\n    </style>\n  </div>\n)\n```\n\nN.B. All the tags except for [`resolve`](#the-resolve-tag) don't support dynamic styles.\n\n`resolve` and `global` can also be imported individually:\n\n```js\nimport { resolve } from 'styled-jsx/css'\nimport { global } from 'styled-jsx/css'\n```\n\nIf you use Prettier we recommend you to use the default `css` export syntax since the tool doesn't support named imports.\n\n#### Styles outside of components\n\nThe `css` tag from `styled-jsx/css` can be also used to define styles in your components files but outside of the component itself. This might help with keeping `render` methods smaller.\n\n```jsx\nimport css from 'styled-jsx/css'\n\nexport default () => (\n  <div>\n    <button>styled-jsx</button>\n    <style jsx>{button}</style>\n  </div>\n)\n\nconst button = css`\n  button {\n    color: hotpink;\n  }\n`\n```\n\nLike in externals styles `css` doesn't work with dynamic styles. If you have dynamic parts you might want to place them inline inside of your component using a regular `<style jsx>` element.\n\n#### The `resolve` tag\n\nThe `resolve` tag from `styled-jsx/css` can be used when you need to scope some CSS - for example, if you need to style nested components from the parent, such as the `Link` component in the example below.\n\nIt works by returning the generated scoped `className` and related `styles`.\n\n```jsx\nimport React from 'react'\nimport Link from 'some-library'\n\nimport css from 'styled-jsx/css'\n\nconst { className, styles } = css.resolve`\n  a { color: green }\n`\n\nexport default () => (\n  <div>\n    {/* use the className */}\n    <Link className={className}>About</Link>\n\n    {/* render the styles for it */}\n    {styles}\n  </div>\n)\n```\n\nThe `resolve` tag also supports dynamic styles, via template string interpolation:\n\n```jsx\nimport React from 'react'\nimport css from 'styled-jsx/css'\n\nfunction getLinkStyles(color) {\n  return css.resolve`\n    a { color: ${color} }\n  `\n}\n\nexport default props => {\n  const { className, styles } = getLinkStyles(props.theme.color)\n\n  return (\n    <div>\n      <Link className={className}>About</Link>\n      {styles}\n    </div>\n  )\n}\n```\n\n#### Using `resolve` as a Babel macro\n\nIf you can't (or would rather not) make changes to your `.babelrc`, the `resolve` tag can be used as a Babel macro, thanks to the [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) system.\n\nTo set this up, first of all, install `styled-jsx` and `babel-plugin-macros`:\n\n```bash\nnpm i --save styled-jsx\nnpm i --save-dev babel-plugin-macros\n```\n\nNext, add `babel-plugin-macros` to your Babel configuration:\n\n```json\n{\n  \"plugins\": [\"babel-plugin-macros\"]\n}\n```\n\nYou can then use `resolve` by importing it from `styled-jsx/macro`.\n\n```jsx\nimport css from 'styled-jsx/macro'\n\nconst { className, styles } = css.resolve`\n  a { color: green }\n`\n\nexport default () => (\n  <div>\n    <Link className={className}>About</Link>\n    {styles}\n  </div>\n)\n```\n\n##### Usage with [`create-react-app`](https://create-react-app.dev)\n\n[Create React App](https://create-react-app.dev) comes with `babel-plugin-macros` already installed, so the only thing that needs to be done is to install `styled-jsx`:\n\n```bash\nnpm i --save styled-jsx\n```\n\nThen `resolve` can be imported from `styled-jsx/macro` and used the same way as in the example in the [Using `resolve` as a Babel macro](https://github.com/vercel/styled-jsx/blob/main/readme.md#using-resolve-as-a-babel-macro) section above.\n\n#### Styles in regular CSS files\n\nstyled-jsx v3 comes with a webpack loader that lets you write styles in regular `css` files and consume them in React.\n\n```js\nimport styles from '../components/button/styles.css'\n\nexport default () => (\n  <div>\n    <button>styled-jsx</button>\n    <style jsx>{styles}</style>\n  </div>\n)\n```\n\nTo consume the styles in your component you can import them from your CSS file and render them using a `<style jsx>` tag. Remember to add the `global` prop if you want your styles to be global.\n\nTo use this feature you need to register the loader in your webpack config file, before `babel-loader` which will then transpile the styles via `styled-jsx/babel`\n\n```js\nconfig: {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: require('styled-jsx/webpack').loader,\n            options: {\n              type: 'scoped'\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\nThe plugin accepts a `type` option to configure whether the styles should be `scoped`, `global` or `resolve` (see above). By default its values is set to `scoped`. `type` can also be a `function` which takes the `fileName` and the `fileNameQuery` that is being transpiled and must return a valid type.\n\n```js\ntype validTypes = 'scoped' | 'global' | 'resolve'\ntype fileName = string\ntype Options = {|\n  type: validTypes | ((fileName, options) => validTypes)\n|}\n```\n\n```js\nimport styles from './styles.css?type=global'\n\n// webpack\nconfig: {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: require('styled-jsx/webpack').loader,\n            options: {\n              type: (fileName, options) => options.query.type || 'scoped'\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\nThe type can also be set per individual CSS file via CSS comment:\n\n```css\n/* @styled-jsx=scoped */\n\nbutton {\n  color: red;\n}\n```\n\nThe CSS comment option will override the one in the webpack configuration only for this specific file.\n\n##### Next.js\n\nExample of `next.config.js` to integrate `styled-jsx/webpack`:\n\n```js\nmodule.exports = {\n  webpack: (config, { defaultLoaders }) => {\n    config.module.rules.push({\n      test: /\\.css$/,\n      use: [\n        defaultLoaders.babel,\n        {\n          loader: require('styled-jsx/webpack').loader,\n          options: {\n            type: 'scoped'\n          }\n        }\n      ]\n    })\n\n    return config\n  }\n}\n```\n\n## CSS Preprocessing via Plugins\n\nStyles can be preprocessed via plugins.\n\nPlugins are regular JavaScript modules that export a simple function with the following signature:\n\n```ts\nfunction plugin(css: string, options: Object): string\n```\n\nBasically they accept a CSS string in input, optionally modify it and finally return it.\n\nPlugins make it possible to use popular preprocessors like SASS, Less, Stylus, PostCSS or apply custom transformations to the styles at **compile time**.\n\nTo register a plugin add an option `plugins` for `styled-jsx/babel` to your `.babelrc`. `plugins` must be an array of module names or _full_ paths for local plugins.\n\n```json\n{\n  \"plugins\": [\n    [\n      \"styled-jsx/babel\",\n      {\n        \"plugins\": [\n          \"my-styled-jsx-plugin-package\",\n          \"/full/path/to/local/plugin\"\n        ]\n      }\n    ]\n  ]\n}\n```\n\n<details>\n  <summary>Instructions to integrate with Next.js</summary>\n  In order to register styled-jsx plugins in a Next.js app you need to create a custom .babelrc file:\n\n```json\n{\n  \"presets\": [\n    [\n      \"next/babel\",\n      {\n        \"styled-jsx\": {\n          \"plugins\": [\"styled-jsx-plugin-postcss\"]\n        }\n      }\n    ]\n  ]\n}\n```\n\nThis is a fairly new feature so make sure that you using a version of Next.js that supports passing options to `styled-jsx`.\n\n</details>\n<br>\n\nPlugins are applied in definition order left to right before styles are scoped.\n\nIn order to resolve local plugins paths you can use NodeJS' [require.resolve](https://nodejs.org/api/globals.html#globals_require_resolve).\n\nN.B. when applying the plugins styled-jsx replaces template literals expressions with placeholders because otherwise CSS parsers would get invalid CSS E.g.\n\n```css\n/* `ExprNumber` is a number */\n%%styled-jsx-placeholder-ExprNumber%%\n```\n\n**Plugins won't transform expressions** (eg. dynamic styles).\n\nWhen publishing a plugin you may want to add the keywords: `styled-jsx` and `styled-jsx-plugin`.\nWe also encourage you to use the following naming convention for your plugins:\n\n```\nstyled-jsx-plugin-<your-plugin-name>\n```\n\n#### Plugin options\n\nUsers can set plugin options by registering a plugin as an array that contains\nthe plugin path and an options object.\n\n```json\n{\n  \"plugins\": [\n    [\n      \"styled-jsx/babel\",\n      {\n        \"plugins\": [\n          [\"my-styled-jsx-plugin-package\", { \"exampleOption\": true }]\n        ],\n        \"sourceMaps\": true\n      }\n    ]\n  ]\n}\n```\n\nEach plugin receives a `options` object as second argument which contains\nthe babel and user options:\n\n```js\n;(css, options) => {\n  /* ... */\n}\n```\n\nThe `options` object has the following shape:\n\n```js\n{\n  // user options go here\n  // eg. exampleOption: true\n\n  // babel options\n  babel: {\n    sourceMaps: boolean,\n    vendorPrefixes: boolean,\n    isGlobal: boolean,\n    filename: ?string, // defined only when the filename option is passed to Babel, such as when using Babel CLI or Webpack\n    location: { // the original location of the CSS block in the JavaScript file\n      start: {\n        line: number,\n        column: number,\n      },\n      end: {\n        line: number,\n        column: number,\n      }\n    }\n  }\n}\n```\n\n#### Example plugins\n\nThe following plugins are proof of concepts/sample:\n\n- [styled-jsx-plugin-sass](https://github.com/giuseppeg/styled-jsx-plugin-sass)\n- [styled-jsx-plugin-postcss](https://github.com/giuseppeg/styled-jsx-plugin-postcss)\n- [styled-jsx-plugin-stylelint](https://github.com/giuseppeg/styled-jsx-plugin-stylelint)\n- [styled-jsx-plugin-less](https://github.com/erasmo-marin/styled-jsx-plugin-less)\n- [styled-jsx-plugin-stylus](https://github.com/omardelarosa/styled-jsx-plugin-stylus)\n\n## Rendering in tests\n\nIf you're using a tool such as Enzyme, you might want to avoid compiling your styles in test renders. In general, styled-jsx artifacts like `jsx-123` classnames and vendor prefixing are not direct concerns of your component, and they generate a lot of snapshot noise.\n\nOne option is to exclude the `styled-jsx/babel` plugin from the `test` environment using `env` in your Babel config (see [Config Merging options](https://babeljs.io/docs/en/options#config-merging-options)).\n\nBut this can cause noise in your terminal output when rendering:\n\n```\n   console.error node_modules/react-dom/cjs/react-dom.development.js:527\n      Warning: Received `true` for a non-boolean attribute `jsx`.\n```\n\nThe `styled-jsx/babel-test` solves this problem. It simply strips `jsx` attributes from all `<style>` tags. Be sure to target each environment with the appropriate plugin:\n\n```json\n{\n  \"env\": {\n    \"production\": {\n      \"plugins\": [\"styled-jsx/babel\"]\n    },\n    \"development\": {\n      \"plugins\": [\"styled-jsx/babel\"]\n    },\n    \"test\": {\n      \"plugins\": [\"styled-jsx/babel-test\"]\n    }\n  }\n}\n```\n\n#### styled-jsx/css in tests\n\nWhen using `styled-jsx/babel-test`, `styled-jsx/css` throws the following error:\n\n```\nstyled-jsx/css: if you are getting this error it means that your `css` tagged template literals were not transpiled.\n```\n\nto solve this issue you need to mock `styled-jsx/css`. You can find a guide at the following link https://kevinjalbert.com/jest-snapshots-reducing-styled-jsx-noise/\n\n## FAQ\n\n### Warning: unknown `jsx` prop on &lt;style&gt; tag\n\nIf you get this warning it means that your styles were not compiled by styled-jsx.\n\nPlease take a look at your setup and make sure that everything is correct and that the styled-jsx transformation is ran by Babel.\n\n### Can I return an array of components when using React 16?\n\nNo, this feature is not supported. However we support React Fragments, which are available in React `16.2.0` and above.\n\n```jsx\nconst StyledImage = ({ src, alt = '' }) => (\n  <React.Fragment>\n    <img src={src} alt={alt} />\n    <style jsx>{`\n      img {\n        max-width: 100%;\n      }\n    `}</style>\n  </React.Fragment>\n)\n```\n\n### Styling third parties / child components from the parent\n\nWhen the component accepts a `className` (or ad-hoc) prop as a way to allow customizations then you can use [the `resolve` tag from `styled-jsx/css`](#the-resolve-tag).\n\nWhen the component doesn't accept any `className` or doesn't expose any API to customize the component, then your only option is to use `:global()` styles:\n\n```jsx\nexport default () => (\n  <div>\n    <ExternalComponent />\n\n    <style jsx>{`\n      /* \"div\" will be prefixed, but \".nested-element\" won't */\n\n      div > :global(.nested-element) {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n```\n\nPlease keep in mind that `:global()` styles will affect the entire subtree, so in many cases you may want to be careful and use the children (direct descendant) selector `>`.\n\n### Build a component library with styled-jsx\n\nThere's an [article](https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2) explaining how to bundle React components with Rollup and styled-jsx as an external dependency.\n\n## Syntax Highlighting\n\nWhen working with template literals a common drawback is missing syntax highlighting. The following editors currently have support for highlighting CSS inside `<style jsx>` elements.\n\n_If you have a solution for an editor not on the list_ **please [open a PR](https://github.com/vercel/styled-jsx/pull/new/main)** _and let us now._\n\n### Atom\n\nThe [`language-babel`](https://github.com/gandm/language-babel) package for the [Atom editor](https://atom.io/) has an option to [extend the grammar for JavaScript tagged template literals](https://github.com/gandm/language-babel#javascript-tagged-template-literal-grammar-extensions).\n\nAfter [installing the package](https://github.com/gandm/language-babel#installation) add the code below to the appropriate settings entry. In a few moments you should be blessed with proper CSS syntax highlighting. ([source](https://github.com/gandm/language-babel/issues/324))\n\n```\n\"(?<=<style jsx>{)|(?<=<style jsx global>{)|(?<=css)\":source.css.styled\n```\n\n![babel-language settings entry](https://cloud.githubusercontent.com/assets/2313237/22627258/6c97cb68-ebb7-11e6-82e1-60205f8b31e7.png)\n\n### Webstorm/Idea\n\nThe IDE let you inject any language in place with _Inject language or reference_ in an _Intention Actions_ (default _alt+enter_).\nSimply perform the action in the string template and select CSS.\nYou get full CSS highlighting and autocompletion and it will last until you close the IDE.\n\nAdditionally you can use language injection comments to enable all the IDE language features indefinitely using the language comment style:\n\n```jsx\nimport { colors, spacing } from '../theme'\nimport { invertColor } from '../theme/utils'\n\nconst Button = ({ children }) => (\n  <button>\n    {children}\n\n    {/*language=CSS*/}\n    <style jsx>{`\n      button {\n        padding: ${spacing.medium};\n        background: ${colors.primary};\n        color: ${invertColor(colors.primary)};\n      }\n    `}</style>\n  </button>\n)\n```\n\n### Emmet\n\nIf you're using Emmet you can add the following snippet to `~/emmet/snippets-styledjsx.json` This will allow you to expand `style-jsx` to a styled-jsx block.\n\n```json\n{\n  \"html\": {\n    \"snippets\": {\n      \"style-jsx\": \"<style jsx>{`\\n\\t$1\\n`}</style>\"\n    }\n  }\n}\n```\n\n### Syntax Highlighting [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Divlo.vscode-styled-jsx-syntax)\n\nLaunch VS Code Quick Open (⌘+P), paste the following command, and press enter.\n\n```\next install Divlo.vscode-styled-jsx-syntax\n```\n\nIf you use Stylus instead of plain CSS, install [vscode-styled-jsx-stylus](https://marketplace.visualstudio.com/items?itemName=samuelroy.vscode-styled-jsx-stylus) or paste the command below.\n\n```\next install vscode-styled-jsx-stylus\n```\n\n### Autocomplete [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Divlo.vscode-styled-jsx-languageserver)\n\nLaunch VS Code Quick Open (⌘+P), paste the following command, and press enter.\n\n```\next install Divlo.vscode-styled-jsx-languageserver\n```\n\n### Vim\n\nInstall [vim-styled-jsx](https://github.com/alampros/vim-styled-jsx) with your plugin manager of choice.\n\n## ESLint\n\nIf you're using `eslint-plugin-import`, the `css` import will generate errors, being that it's a \"magic\" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:\n\n```\n\"settings\": {\"import/core-modules\": [\"styled-jsx/css\"] }\n```\n\n## TypeScript\n\nIf you're using TypeScript, then in order to allow `<style jsx>` tags to be properly understood by it, create a file named \"styled-jsx.d.ts\" anywhere within your project containing the following, or add this line to the top of any single existing .ts file within your project:\n\n```ts\n/// <reference types=\"styled-jsx\" />\n```\n\n> If you're using babel to transform styled-jsx code with TypeScript, you need to specify `\"jsx\": \"preserve\"` in your tsconfig.json to keep the original JSX and let babel parse and transform with styled-jsx babel plugin.\n\n## Credits\n\n- **Pedram Emrouznejad** ([rijs](https://github.com/rijs/fullstack)) suggested attribute selectors over my initial class prefixing idea.\n- **Sunil Pai** ([glamor](https://github.com/threepointone/glamor)) inspired the use of `murmurhash2` (minimal and fast hashing) and an efficient style injection logic.\n- **Sultan Tarimo** built [stylis.js](https://github.com/thysultan), a super fast and tiny CSS parser and compiler.\n- **Max Stoiber** ([styled-components](https://github.com/styled-components)) proved the value of retaining the familiarity of CSS syntax and pointed me to the very efficient [stylis](https://github.com/thysultan/stylis.js) compiler (which we forked to very efficiently append attribute selectors to the user's css)\n- **Yehuda Katz** ([ember](https://github.com/emberjs)) convinced me on Twitter to transpile CSS as an alternative to CSS-in-JS.\n- **Evan You** ([vuejs](https://github.com/vuejs)) discussed his Vue.js CSS transformation with me.\n- **Henry Zhu** ([babel](https://github.com/babel)) helpfully pointed me to some important areas of the babel plugin API.\n\n## Authors\n\n- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) - [▲Vercel](https://vercel.com)\n- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) - [▲Vercel](https://vercel.com)\n- Giuseppe Gurgone ([@giuseppegurgone](https://twitter.com/giuseppegurgone))\n"
  },
  {
    "path": "src/.babelrc",
    "content": "{\n  \"presets\": [\n    [\"@babel/preset-env\", { \"loose\": true }]\n  ],\n  \"plugins\": [\n    [\"@babel/plugin-proposal-object-rest-spread\", { \"loose\": true }]\n  ]\n}\n"
  },
  {
    "path": "src/_constants.js",
    "content": "export const GLOBAL_ATTRIBUTE = 'global'\nexport const STYLE_ATTRIBUTE = 'jsx'\nexport const STYLE_COMPONENT = '_JSXStyle'\nexport const STYLE_COMPONENT_DYNAMIC = 'dynamic'\nexport const STYLE_COMPONENT_ID = 'id'\n"
  },
  {
    "path": "src/_utils.js",
    "content": "import path from 'path'\nimport * as t from '@babel/types'\nimport _hashString from 'string-hash'\nimport { SourceMapGenerator } from 'source-map'\nimport convert from 'convert-source-map'\nimport transform from './lib/style-transform'\n\nimport {\n  STYLE_ATTRIBUTE,\n  GLOBAL_ATTRIBUTE,\n  STYLE_COMPONENT_ID,\n  STYLE_COMPONENT_DYNAMIC\n} from './_constants'\n\nconst concat = (a, b) => t.binaryExpression('+', a, b)\nconst and = (a, b) => t.logicalExpression('&&', a, b)\nconst or = (a, b) => t.logicalExpression('||', a, b)\n\nconst joinSpreads = spreads => spreads.reduce((acc, curr) => or(acc, curr))\n\nexport const hashString = str => String(_hashString(str))\n\nexport const addClassName = (path, jsxId) => {\n  const jsxIdWithSpace = concat(jsxId, t.stringLiteral(' '))\n  const attributes = path.get('attributes')\n  const spreads = []\n  let className = null\n  // Find className and collect spreads\n  for (let i = attributes.length - 1, attr; (attr = attributes[i]); i--) {\n    const node = attr.node\n\n    if (t.isJSXSpreadAttribute(attr)) {\n      if (t.isObjectExpression(node.argument)) {\n        const properties = node.argument.properties\n\n        const index = properties.findIndex(\n          property => property.key.name === 'className'\n        )\n\n        if (~index) {\n          className = attr.get('argument').get(`properties.${index}`)\n\n          // Remove jsx spread attribute if there is only className property\n          if (properties.length === 1) {\n            attr.remove()\n          }\n          break\n        }\n      }\n\n      if (\n        t.isMemberExpression(node.argument) ||\n        t.isIdentifier(node.argument)\n      ) {\n        const name = node.argument.name\n        const spreadObj = t.isMemberExpression(node.argument)\n          ? node.argument\n          : t.identifier(name)\n        const attrNameDotClassName = t.memberExpression(\n          spreadObj,\n          t.identifier('className')\n        )\n\n        spreads.push(\n          // `${name} && ${name}.className != null && ${name}.className`\n          and(\n            spreadObj,\n            and(\n              t.binaryExpression('!=', attrNameDotClassName, t.nullLiteral()),\n              attrNameDotClassName\n            )\n          )\n        )\n      }\n      continue\n    }\n\n    if (t.isJSXAttribute(attr) && node.name.name === 'className') {\n      className = attributes[i]\n      // found className break the loop\n      break\n    }\n  }\n\n  if (className) {\n    let newClassName = className.node.value.expression || className.node.value\n    newClassName =\n      t.isStringLiteral(newClassName) || t.isTemplateLiteral(newClassName)\n        ? newClassName\n        : or(newClassName, t.stringLiteral(''))\n    className.remove()\n\n    className = t.jSXExpressionContainer(\n      spreads.length === 0\n        ? concat(jsxIdWithSpace, newClassName)\n        : concat(jsxIdWithSpace, or(joinSpreads(spreads), newClassName))\n    )\n  } else {\n    className = t.jSXExpressionContainer(\n      spreads.length === 0\n        ? jsxId\n        : concat(jsxIdWithSpace, or(joinSpreads(spreads), t.stringLiteral('')))\n    )\n  }\n\n  path.node.attributes.push(\n    t.jSXAttribute(t.jSXIdentifier('className'), className)\n  )\n}\n\nexport const getScope = path =>\n  (\n    path.findParent(\n      path =>\n        path.isFunctionDeclaration() ||\n        path.isArrowFunctionExpression() ||\n        path.isClassMethod()\n    ) || path\n  ).scope\n\nexport const isGlobalEl = el =>\n  el && el.attributes.some(({ name }) => name && name.name === GLOBAL_ATTRIBUTE)\n\nexport const isStyledJsx = ({ node: el }) =>\n  t.isJSXElement(el) &&\n  el.openingElement.name.name === 'style' &&\n  el.openingElement.attributes.some(attr => attr.name.name === STYLE_ATTRIBUTE)\n\nexport const findStyles = path => {\n  if (isStyledJsx(path)) {\n    const { node } = path\n    return isGlobalEl(node.openingElement) ? [path] : []\n  }\n\n  return path.get('children').filter(isStyledJsx)\n}\n\nconst validateExternalExpressionsVisitor = {\n  Identifier(path) {\n    if (t.isMemberExpression(path.parentPath)) {\n      return\n    }\n\n    const { name } = path.node\n    if (!path.scope.hasBinding(name)) {\n      throw path.buildCodeFrameError(path.getSource())\n    }\n  },\n  MemberExpression(path) {\n    const { node } = path\n    if (!t.isIdentifier(node.object)) {\n      return\n    }\n\n    if (!path.scope.hasBinding(node.object.name)) {\n      throw path.buildCodeFrameError(path.getSource())\n    }\n  },\n  ThisExpression(path) {\n    throw new Error(path.parentPath.getSource())\n  }\n}\n\nexport const validateExternalExpressions = path => {\n  try {\n    path.traverse(validateExternalExpressionsVisitor)\n  } catch (error) {\n    throw path.buildCodeFrameError(`\n      Found an \\`undefined\\` or invalid value in your styles: \\`${\n        error.message\n      }\\`.\n\n      If you are trying to use dynamic styles in external files this is unfortunately not possible yet.\n      Please put the dynamic parts alongside the component. E.g.\n\n      <button>\n        <style jsx>{externalStylesReference}</style>\n        <style jsx>{\\`\n          button { background-color: $\\{${error.message}} }\n        \\`}</style>\n      </button>\n    `)\n  }\n}\n\nexport const getJSXStyleInfo = (expr, scope) => {\n  const { node } = expr\n  const location = node.loc\n\n  // Assume string literal\n  if (t.isStringLiteral(node)) {\n    return {\n      hash: hashString(node.value),\n      css: node.value,\n      expressions: [],\n      dynamic: false,\n      location\n    }\n  }\n\n  // Simple template literal without expressions\n  if (node.expressions.length === 0) {\n    return {\n      hash: hashString(node.quasis[0].value.raw),\n      css: node.quasis[0].value.raw,\n      expressions: [],\n      dynamic: false,\n      location\n    }\n  }\n\n  // Special treatment for template literals that contain expressions:\n  //\n  // Expressions are replaced with a placeholder\n  // so that the CSS compiler can parse and\n  // transform the css source string\n  // without having to know about js literal expressions.\n  // Later expressions are restored.\n  //\n  // e.g.\n  // p { color: ${myConstant}; }\n  // becomes\n  // p { color: %%styled-jsx-placeholder-${id}%%; }\n\n  const { quasis, expressions } = node\n  const hash = hashString(expr.getSource().slice(1, -1))\n  let dynamic = Boolean(scope)\n  if (dynamic) {\n    try {\n      const val = expr.evaluate()\n      if (val.confident) {\n        dynamic = false\n      } else if (val.deopt) {\n        const computedObject = val.deopt\n          .get('object')\n          .resolve()\n          .evaluate()\n        dynamic = !computedObject.confident\n      }\n    } catch (_) {}\n  }\n  const css = quasis.reduce(\n    (css, quasi, index) =>\n      `${css}${quasi.value.raw}${\n        quasis.length === index + 1 ? '' : `%%styled-jsx-placeholder-${index}%%`\n      }`,\n    ''\n  )\n\n  return {\n    hash,\n    css,\n    expressions,\n    dynamic,\n    location\n  }\n}\n\nexport const computeClassNames = (\n  styles,\n  externalJsxId,\n  styleComponentImportName\n) => {\n  if (styles.length === 0) {\n    return {\n      className: externalJsxId\n    }\n  }\n\n  const hashes = styles.reduce(\n    (acc, styles) => {\n      if (styles.dynamic === false) {\n        acc.static.push(styles.hash)\n      } else {\n        acc.dynamic.push(styles)\n      }\n\n      return acc\n    },\n    {\n      static: [],\n      dynamic: []\n    }\n  )\n\n  const staticClassName = `jsx-${hashString(hashes.static.join(','))}`\n\n  // Static and optionally external classes. E.g.\n  // '[jsx-externalClasses] jsx-staticClasses'\n  if (hashes.dynamic.length === 0) {\n    return {\n      staticClassName,\n      className: externalJsxId\n        ? concat(t.stringLiteral(staticClassName + ' '), externalJsxId)\n        : t.stringLiteral(staticClassName)\n    }\n  }\n\n  // _JSXStyle.dynamic([ ['1234', [props.foo, bar, fn(props)]], ... ])\n  const dynamic = t.callExpression(\n    // Callee: _JSXStyle.dynamic\n    t.memberExpression(\n      t.identifier(styleComponentImportName),\n      t.identifier(STYLE_COMPONENT_DYNAMIC)\n    ),\n    // Arguments\n    [\n      t.arrayExpression(\n        hashes.dynamic.map(styles =>\n          t.arrayExpression([\n            t.stringLiteral(hashString(styles.hash + staticClassName)),\n            t.arrayExpression(styles.expressions)\n          ])\n        )\n      )\n    ]\n  )\n\n  // Dynamic and optionally external classes. E.g.\n  // '[jsx-externalClasses] ' + _JSXStyle.dynamic([ ['1234', [props.foo, bar, fn(props)]], ... ])\n  if (hashes.static.length === 0) {\n    return {\n      staticClassName,\n      className: externalJsxId\n        ? concat(concat(externalJsxId, t.stringLiteral(' ')), dynamic)\n        : dynamic\n    }\n  }\n\n  // Static, dynamic and optionally external classes. E.g.\n  // '[jsx-externalClasses] jsx-staticClasses ' + _JSXStyle.dynamic([ ['5678', [props.foo, bar, fn(props)]], ... ])\n  return {\n    staticClassName,\n    className: externalJsxId\n      ? concat(\n          concat(externalJsxId, t.stringLiteral(` ${staticClassName} `)),\n          dynamic\n        )\n      : concat(t.stringLiteral(`${staticClassName} `), dynamic)\n  }\n}\n\nexport const templateLiteralFromPreprocessedCss = (css, expressions) => {\n  const quasis = []\n  const finalExpressions = []\n  const parts = css.split(/(?:%%styled-jsx-placeholder-(\\d+)%%)/g)\n\n  if (parts.length === 1) {\n    return t.stringLiteral(css)\n  }\n\n  parts.forEach((part, index) => {\n    if (index % 2 > 0) {\n      // This is necessary because, after preprocessing, declarations might have been alterate.\n      // eg. properties are auto prefixed and therefore expressions need to match.\n      finalExpressions.push(expressions[part])\n    } else {\n      quasis.push(part)\n    }\n  })\n\n  return t.templateLiteral(\n    quasis.map((quasi, index) =>\n      t.templateElement(\n        {\n          raw: quasi,\n          cooked: quasi\n        },\n        quasis.length === index + 1\n      )\n    ),\n    finalExpressions\n  )\n}\n\nexport const cssToBabelType = css => {\n  if (typeof css === 'string') {\n    return t.stringLiteral(css)\n  }\n\n  if (Array.isArray(css)) {\n    return t.arrayExpression(css)\n  }\n\n  return t.cloneDeep(css)\n}\n\nexport const makeStyledJsxTag = (\n  id,\n  transformedCss,\n  expressions = [],\n  styleComponentImportName\n) => {\n  const css = cssToBabelType(transformedCss)\n\n  const attributes = [\n    t.jSXAttribute(\n      t.jSXIdentifier(STYLE_COMPONENT_ID),\n      t.jSXExpressionContainer(\n        typeof id === 'string' ? t.stringLiteral(id) : id\n      )\n    )\n  ]\n\n  if (expressions.length > 0) {\n    attributes.push(\n      t.jSXAttribute(\n        t.jSXIdentifier(STYLE_COMPONENT_DYNAMIC),\n        t.jSXExpressionContainer(t.arrayExpression(expressions))\n      )\n    )\n  }\n\n  return t.jSXElement(\n    t.jSXOpeningElement(t.jSXIdentifier(styleComponentImportName), attributes),\n    t.jSXClosingElement(t.jSXIdentifier(styleComponentImportName)),\n    [t.jSXExpressionContainer(css)]\n  )\n}\n\nexport const makeSourceMapGenerator = file => {\n  const filename = file.sourceFileName\n  const generator = new SourceMapGenerator({\n    file: filename,\n    sourceRoot: file.sourceRoot\n  })\n\n  generator.setSourceContent(filename, file.code)\n  return generator\n}\n\nexport const addSourceMaps = (code, generator, filename) => {\n  const sourceMaps = [\n    convert.fromObject(generator).toComment({ multiline: true }),\n    `/*@ sourceURL=${filename.replace(/\\\\/g, '\\\\\\\\')} */`\n  ]\n\n  if (Array.isArray(code)) {\n    return code.concat(sourceMaps)\n  }\n\n  return [code].concat(sourceMaps).join('\\n')\n}\n\nconst combinedPluginsCache = {\n  plugins: null,\n  combined: null\n}\nexport const combinePlugins = plugins => {\n  if (!plugins) {\n    return css => css\n  }\n\n  const pluginsToString = JSON.stringify(plugins)\n\n  if (combinedPluginsCache.plugins === pluginsToString) {\n    return combinedPluginsCache.combined\n  }\n\n  if (\n    !Array.isArray(plugins) ||\n    plugins.some(p => !Array.isArray(p) && typeof p !== 'string')\n  ) {\n    throw new Error(\n      '`plugins` must be an array of plugins names (string) or an array `[plugin-name, {options}]`'\n    )\n  }\n\n  combinedPluginsCache.plugins = pluginsToString\n  combinedPluginsCache.combined = plugins\n    .map((plugin, i) => {\n      let options = {}\n      if (Array.isArray(plugin)) {\n        options = plugin[1] || {}\n        plugin = plugin[0]\n        if (Object.prototype.hasOwnProperty.call(options, 'babel')) {\n          throw new Error(`\n            Error while trying to register the styled-jsx plugin: ${plugin}\n            The option name \\`babel\\` is reserved.\n          `)\n        }\n      }\n\n      log('Loading plugin from path: ' + plugin)\n\n      let p = require(plugin)\n      if (p.default) {\n        p = p.default\n      }\n\n      const type = typeof p\n      if (type !== 'function') {\n        throw new Error(\n          `Expected plugin ${\n            plugins[i]\n          } to be a function but instead got ${type}`\n        )\n      }\n\n      return {\n        plugin: p,\n        options\n      }\n    })\n    .reduce(\n      (previous, { plugin, options }) => (css, babelOptions) =>\n        plugin(previous ? previous(css, babelOptions) : css, {\n          ...options,\n          babel: babelOptions\n        }),\n      null\n    )\n\n  return combinedPluginsCache.combined\n}\n\nconst getPrefix = (isDynamic, id) =>\n  isDynamic ? '.__jsx-style-dynamic-selector' : `.${id}`\n\nexport const processCss = (stylesInfo, options) => {\n  const {\n    hash,\n    css,\n    expressions,\n    dynamic,\n    location,\n    file,\n    isGlobal,\n    plugins,\n    vendorPrefixes,\n    sourceMaps\n  } = stylesInfo\n\n  const fileInfo = {\n    code: file.code,\n    sourceRoot: file.opts.sourceRoot,\n    filename: file.opts.filename || file.filename\n  }\n\n  fileInfo.sourceFileName =\n    file.opts.sourceFileName ||\n    file.sourceFileName ||\n    // According to https://babeljs.io/docs/en/options#source-map-options\n    // filenameRelative = path.relative(file.opts.cwd, file.opts.filename)\n    // sourceFileName = path.basename(filenameRelative)\n    // or simply\n    // sourceFileName = path.basename(file.opts.filename)\n    (fileInfo.filename && path.basename(fileInfo.filename))\n\n  const staticClassName =\n    stylesInfo.staticClassName || `jsx-${hashString(hash)}`\n\n  const { splitRules } = options\n\n  const useSourceMaps = Boolean(sourceMaps) && !splitRules\n\n  const pluginsOptions = {\n    location: {\n      start: { ...location.start },\n      end: { ...location.end }\n    },\n    vendorPrefixes,\n    sourceMaps: useSourceMaps,\n    isGlobal,\n    filename: fileInfo.filename\n  }\n\n  let transformedCss\n\n  if (useSourceMaps) {\n    const generator = makeSourceMapGenerator(fileInfo)\n    const filename = fileInfo.sourceFileName\n\n    transformedCss = addSourceMaps(\n      transform(\n        isGlobal ? '' : getPrefix(dynamic, staticClassName),\n        plugins(css, pluginsOptions),\n        {\n          generator,\n          offset: location.start,\n          filename,\n          splitRules,\n          vendorPrefixes\n        }\n      ),\n      generator,\n      filename\n    )\n  } else {\n    transformedCss = transform(\n      isGlobal ? '' : getPrefix(dynamic, staticClassName),\n      plugins(css, pluginsOptions),\n      { splitRules, vendorPrefixes }\n    )\n  }\n\n  if (expressions.length > 0) {\n    if (typeof transformedCss === 'string') {\n      transformedCss = templateLiteralFromPreprocessedCss(\n        transformedCss,\n        expressions\n      )\n    } else {\n      transformedCss = transformedCss.map(transformedCss =>\n        templateLiteralFromPreprocessedCss(transformedCss, expressions)\n      )\n    }\n  } else if (Array.isArray(transformedCss)) {\n    transformedCss = transformedCss.map(transformedCss =>\n      t.stringLiteral(transformedCss)\n    )\n  }\n\n  return {\n    hash: dynamic ? hashString(hash + staticClassName) : hashString(hash),\n    css: transformedCss,\n    expressions: dynamic && expressions\n  }\n}\n\nexport const booleanOption = opts => {\n  let ret\n  opts.some(opt => {\n    if (typeof opt === 'boolean') {\n      ret = opt\n      return true\n    }\n\n    return false\n  })\n  return ret\n}\n\nexport const createReactComponentImportDeclaration = state => {\n  return t.importDeclaration(\n    [t.importDefaultSpecifier(t.identifier(state.styleComponentImportName))],\n    t.stringLiteral(state.styleModule)\n  )\n}\n\nexport const setStateOptions = state => {\n  const vendorPrefixes = booleanOption([\n    state.opts.vendorPrefixes,\n    state.file.opts.vendorPrefixes\n  ])\n  state.opts.vendorPrefixes =\n    typeof vendorPrefixes === 'boolean' ? vendorPrefixes : true\n  const sourceMaps = booleanOption([\n    state.opts.sourceMaps,\n    state.file.opts.sourceMaps\n  ])\n  state.opts.sourceMaps = Boolean(sourceMaps)\n\n  if (!state.plugins) {\n    state.plugins = combinePlugins(state.opts.plugins, {\n      sourceMaps: state.opts.sourceMaps,\n      vendorPrefixes: state.opts.vendorPrefixes\n    })\n  }\n  state.styleModule =\n    typeof state.opts.styleModule === 'string'\n      ? state.opts.styleModule\n      : 'styled-jsx/style'\n}\n\nexport function log(message) {\n  console.log('[styled-jsx] ' + message)\n}\n"
  },
  {
    "path": "src/babel-external.js",
    "content": "import * as t from '@babel/types'\n\nimport {\n  getJSXStyleInfo,\n  processCss,\n  cssToBabelType,\n  validateExternalExpressions,\n  getScope,\n  computeClassNames,\n  makeStyledJsxTag,\n  setStateOptions\n} from './_utils'\n\nconst isModuleExports = t.buildMatchMemberExpression('module.exports')\n\nexport function processTaggedTemplateExpression({\n  type,\n  path,\n  file,\n  splitRules,\n  plugins,\n  vendorPrefixes,\n  sourceMaps,\n  styleComponentImportName\n}) {\n  const templateLiteral = path.get('quasi')\n  let scope\n\n  // Check whether there are undefined references or\n  // references to this.something (e.g. props or state).\n  // We allow dynamic styles only when resolving styles.\n  if (type !== 'resolve') {\n    validateExternalExpressions(templateLiteral)\n  } else if (!path.scope.path.isProgram()) {\n    scope = getScope(path)\n  }\n\n  const stylesInfo = getJSXStyleInfo(templateLiteral, scope)\n\n  const { staticClassName, className } = computeClassNames(\n    [stylesInfo],\n    undefined,\n    styleComponentImportName\n  )\n\n  const styles = processCss(\n    {\n      ...stylesInfo,\n      staticClassName,\n      file,\n      isGlobal: type === 'global',\n      plugins,\n      vendorPrefixes,\n      sourceMaps\n    },\n    { splitRules }\n  )\n\n  if (type === 'resolve') {\n    const { hash, css, expressions } = styles\n    path.replaceWith(\n      // {\n      //   styles: <_JSXStyle ... />,\n      //   className: 'jsx-123'\n      // }\n      t.objectExpression([\n        t.objectProperty(\n          t.identifier('styles'),\n          makeStyledJsxTag(hash, css, expressions, styleComponentImportName)\n        ),\n        t.objectProperty(t.identifier('className'), className)\n      ])\n    )\n    return\n  }\n\n  const id = path.parentPath.node.id\n  const baseExportName = id ? id.name : 'default'\n  let parentPath =\n    baseExportName === 'default'\n      ? path.parentPath\n      : path.findParent(\n          path =>\n            path.isVariableDeclaration() ||\n            (path.isAssignmentExpression() &&\n              isModuleExports(path.get('left').node))\n        )\n\n  if (baseExportName !== 'default' && !parentPath.parentPath.isProgram()) {\n    parentPath = parentPath.parentPath\n  }\n\n  const css = cssToBabelType(styles.css)\n  const newPath = t.isArrayExpression(css)\n    ? css\n    : t.newExpression(t.identifier('String'), [css])\n\n  // default exports\n\n  if (baseExportName === 'default') {\n    const defaultExportIdentifier = path.scope.generateUidIdentifier(\n      'defaultExport'\n    )\n    parentPath.insertBefore(\n      t.variableDeclaration('const', [\n        t.variableDeclarator(defaultExportIdentifier, newPath)\n      ])\n    )\n\n    parentPath.insertBefore(addHash(defaultExportIdentifier, styles.hash))\n    path.replaceWith(defaultExportIdentifier)\n    return\n  }\n\n  // local and named exports\n\n  parentPath.insertAfter(addHash(t.identifier(baseExportName), styles.hash))\n  path.replaceWith(newPath)\n}\n\nfunction addHash(exportIdentifier, hash) {\n  const value = typeof hash === 'string' ? t.stringLiteral(hash) : hash\n  return t.expressionStatement(\n    t.assignmentExpression(\n      '=',\n      t.memberExpression(exportIdentifier, t.identifier('__hash')),\n      value\n    )\n  )\n}\n\nexport const visitor = {\n  ImportDeclaration(path, state) {\n    // import css from 'styled-jsx/css'\n    if (path.node.source.value !== 'styled-jsx/css') {\n      return\n    }\n\n    // Find all the imported specifiers.\n    // e.g import css, { global, resolve } from 'styled-jsx/css'\n    // -> ['css', 'global', 'resolve']\n    const specifiersNames = path.node.specifiers.map(\n      specifier => specifier.local.name\n    )\n    specifiersNames.forEach(tagName => {\n      // Get all the reference paths i.e. the places that use the tagName above\n      // eg.\n      // css`div { color: red }`\n      // css.global`div { color: red }`\n      // global`div { color: red `\n      const binding = path.scope.getBinding(tagName)\n\n      if (!binding || !Array.isArray(binding.referencePaths)) {\n        return\n      }\n\n      // Produces an object containing all the TaggedTemplateExpression paths detected.\n      // The object contains { scoped, global, resolve }\n      const taggedTemplateExpressions = binding.referencePaths\n        .map(ref => ref.parentPath)\n        .reduce(\n          (result, path) => {\n            let taggedTemplateExpression\n            if (path.isTaggedTemplateExpression()) {\n              // css`` global`` resolve``\n              taggedTemplateExpression = path\n            } else if (\n              path.parentPath &&\n              path.isMemberExpression() &&\n              path.parentPath.isTaggedTemplateExpression()\n            ) {\n              // This part is for css.global`` or css.resolve``\n              // using the default import css\n              taggedTemplateExpression = path.parentPath\n            } else {\n              return result\n            }\n\n            const tag = taggedTemplateExpression.get('tag')\n            const id = tag.isIdentifier()\n              ? tag.node.name\n              : tag.get('property').node.name\n\n            if (result[id]) {\n              result[id].push(taggedTemplateExpression)\n            } else {\n              result.scoped.push(taggedTemplateExpression)\n            }\n\n            return result\n          },\n          {\n            scoped: [],\n            global: [],\n            resolve: []\n          }\n        )\n\n      let hasJSXStyle = false\n\n      const { vendorPrefixes, sourceMaps } = state.opts\n\n      Object.keys(taggedTemplateExpressions).forEach(type =>\n        taggedTemplateExpressions[type].forEach(path => {\n          hasJSXStyle = true\n          // Process each css block\n          processTaggedTemplateExpression({\n            type,\n            path,\n            file: state.file,\n            splitRules:\n              typeof state.opts.optimizeForSpeed === 'boolean'\n                ? state.opts.optimizeForSpeed\n                : process.env.NODE_ENV === 'production',\n            plugins: state.plugins,\n            vendorPrefixes,\n            sourceMaps,\n            styleComponentImportName: state.styleComponentImportName\n          })\n        })\n      )\n\n      const hasCssResolve =\n        hasJSXStyle && taggedTemplateExpressions.resolve.length > 0\n\n      // When using the `resolve` helper we need to add an import\n      // for the _JSXStyle component `styled-jsx/style`\n      if (hasCssResolve) {\n        state.file.hasCssResolve = true\n      }\n    })\n\n    // Finally remove the import\n    path.remove()\n  }\n}\n\nexport default function() {\n  return {\n    Program(path, state) {\n      setStateOptions(state)\n    },\n    ...visitor\n  }\n}\n"
  },
  {
    "path": "src/babel-test.js",
    "content": "import jsx from '@babel/plugin-syntax-jsx'\n\nexport default function() {\n  return {\n    inherits: jsx,\n    visitor: {\n      JSXOpeningElement(path) {\n        const el = path.node\n        const { name } = el.name || {}\n\n        if (name !== 'style') {\n          return\n        }\n\n        el.attributes = el.attributes.filter(a => {\n          const name = a.name.name\n          return name !== 'jsx' && name !== 'global'\n        })\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/babel.js",
    "content": "import jsx from '@babel/plugin-syntax-jsx'\n\nimport { visitor as externalStylesVisitor } from './babel-external'\nimport {\n  isGlobalEl,\n  isStyledJsx,\n  findStyles,\n  makeStyledJsxTag,\n  getJSXStyleInfo,\n  computeClassNames,\n  addClassName,\n  getScope,\n  processCss,\n  createReactComponentImportDeclaration,\n  setStateOptions\n} from './_utils'\nimport { STYLE_COMPONENT } from './_constants'\n\nimport { default as babelMacro } from './macro'\nimport { default as babelTest } from './babel-test'\n\nexport function macro() {\n  return babelMacro(require('babel-plugin-macros'))\n}\n\nexport function test() {\n  return babelTest\n}\n\nexport default function({ types: t }) {\n  const jsxVisitors = {\n    JSXOpeningElement(path, state) {\n      const el = path.node\n      const { name } = el.name || {}\n\n      if (!state.hasJSXStyle) {\n        return\n      }\n\n      if (state.ignoreClosing === null) {\n        // We keep a counter of elements inside so that we\n        // can keep track of when we exit the parent to reset state\n        // note: if we wished to add an option to turn off\n        // selectors to reach parent elements, it would suffice to\n        // set this to `1` and do an early return instead\n        state.ignoreClosing = 0\n      }\n\n      const tag = path.get('name')\n\n      if (\n        name &&\n        name !== 'style' &&\n        name !== state.styleComponentImportName &&\n        (name.charAt(0) !== name.charAt(0).toUpperCase() ||\n          Object.values(path.scope.bindings).some(binding =>\n            binding.referencePaths.some(r => r === tag)\n          ))\n      ) {\n        if (state.className) {\n          addClassName(path, state.className)\n        }\n      }\n\n      state.ignoreClosing++\n      // Next visit will be: JSXElement exit()\n    },\n    JSXElement: {\n      enter(path, state) {\n        if (state.hasJSXStyle !== null) {\n          return\n        }\n\n        const styles = findStyles(path)\n\n        if (styles.length === 0) {\n          return\n        }\n\n        state.styles = []\n        state.externalStyles = []\n\n        const scope = getScope(path)\n\n        for (const style of styles) {\n          // Compute children excluding whitespace\n          const children = style.get('children').filter(\n            c =>\n              t.isJSXExpressionContainer(c.node) ||\n              // Ignore whitespace around the expression container\n              (t.isJSXText(c.node) && c.node.value.trim() !== '')\n          )\n\n          if (children.length !== 1) {\n            throw path.buildCodeFrameError(\n              `Expected one child under ` +\n                `JSX Style tag, but got ${children.length} ` +\n                `(eg: <style jsx>{\\`hi\\`}</style>)`\n            )\n          }\n\n          const child = children[0]\n\n          if (!t.isJSXExpressionContainer(child)) {\n            throw path.buildCodeFrameError(\n              `Expected a child of ` +\n                `type JSXExpressionContainer under JSX Style tag ` +\n                `(eg: <style jsx>{\\`hi\\`}</style>), got ${child.type}`\n            )\n          }\n\n          const expression = child.get('expression')\n\n          if (t.isIdentifier(expression)) {\n            const idName = expression.node.name\n            if (expression.scope.hasBinding(idName)) {\n              const externalStylesIdentifier = t.identifier(idName)\n              const isGlobal = isGlobalEl(style.get('openingElement').node)\n              state.externalStyles.push([\n                t.memberExpression(\n                  externalStylesIdentifier,\n                  t.identifier('__hash')\n                ),\n                externalStylesIdentifier,\n                isGlobal\n              ])\n              continue\n            }\n\n            throw path.buildCodeFrameError(\n              `The Identifier ` +\n                `\\`${expression.getSource()}\\` is either \\`undefined\\` or ` +\n                `it is not an external StyleSheet reference i.e. ` +\n                `it doesn't come from an \\`import\\` or \\`require\\` statement`\n            )\n          }\n\n          if (\n            !t.isTemplateLiteral(expression) &&\n            !t.isStringLiteral(expression)\n          ) {\n            throw path.buildCodeFrameError(\n              `Expected a template ` +\n                `literal or String literal as the child of the ` +\n                `JSX Style tag (eg: <style jsx>{\\`some css\\`}</style>),` +\n                ` but got ${expression.type}`\n            )\n          }\n\n          state.styles.push(getJSXStyleInfo(expression, scope))\n        }\n\n        let externalJsxId\n        if (state.externalStyles.length > 0) {\n          const expressions = state.externalStyles\n            // Remove globals\n            .filter(s => !s[2])\n            .map(s => s[0])\n\n          const expressionsLength = expressions.length\n\n          if (expressionsLength === 0) {\n            externalJsxId = null\n          } else {\n            // Construct a template literal of this form:\n            // `jsx-${styles.__scopedHash} jsx-${otherStyles.__scopedHash}`\n            externalJsxId = t.templateLiteral(\n              [\n                t.templateElement({ raw: 'jsx-', cooked: 'jsx-' }),\n                ...[...new Array(expressionsLength - 1).fill(null)].map(() =>\n                  t.templateElement({ raw: ' jsx-', cooked: ' jsx-' })\n                ),\n                t.templateElement({ raw: '', cooked: '' }, true)\n              ],\n              expressions\n            )\n          }\n        }\n\n        if (state.styles.length > 0 || externalJsxId) {\n          const { staticClassName, className } = computeClassNames(\n            state.styles,\n            externalJsxId,\n            state.styleComponentImportName\n          )\n          state.className = className\n          state.staticClassName = staticClassName\n        }\n\n        state.hasJSXStyle = true\n        state.file.hasJSXStyle = true\n\n        // Next visit will be: JSXOpeningElement\n      },\n      exit(path, state) {\n        const isGlobal = isGlobalEl(path.node.openingElement)\n\n        if (state.hasJSXStyle && !--state.ignoreClosing && !isGlobal) {\n          state.hasJSXStyle = null\n          state.className = null\n          state.externalJsxId = null\n        }\n\n        if (!state.hasJSXStyle || !isStyledJsx(path)) {\n          return\n        }\n\n        if (state.ignoreClosing > 1) {\n          let styleTagSrc\n          try {\n            styleTagSrc = path.getSource()\n          } catch (error) {}\n\n          throw path.buildCodeFrameError(\n            'Detected nested style tag' +\n              (styleTagSrc ? `: \\n\\n${styleTagSrc}\\n\\n` : ' ') +\n              'styled-jsx only allows style tags ' +\n              'to be direct descendants (children) of the outermost ' +\n              'JSX element i.e. the subtree root.'\n          )\n        }\n\n        if (\n          state.externalStyles.length > 0 &&\n          path.get('children').filter(child => {\n            if (!t.isJSXExpressionContainer(child)) {\n              return false\n            }\n\n            const expression = child.get('expression')\n            return expression && expression.isIdentifier()\n          }).length === 1\n        ) {\n          const [id, css] = state.externalStyles.shift()\n\n          path.replaceWith(\n            makeStyledJsxTag(id, css, [], state.styleComponentImportName)\n          )\n          return\n        }\n\n        const { vendorPrefixes, sourceMaps } = state.opts\n        const stylesInfo = {\n          ...state.styles.shift(),\n          file: state.file,\n          staticClassName: state.staticClassName,\n          isGlobal,\n          plugins: state.plugins,\n          vendorPrefixes,\n          sourceMaps\n        }\n        const splitRules =\n          typeof state.opts.optimizeForSpeed === 'boolean'\n            ? state.opts.optimizeForSpeed\n            : process.env.NODE_ENV === 'production'\n\n        const { hash, css, expressions } = processCss(stylesInfo, {\n          splitRules\n        })\n\n        path.replaceWith(\n          makeStyledJsxTag(\n            hash,\n            css,\n            expressions,\n            state.styleComponentImportName\n          )\n        )\n      }\n    }\n  }\n\n  // only apply JSXFragment visitor if supported\n  if (t.isJSXFragment) {\n    jsxVisitors.JSXFragment = jsxVisitors.JSXElement\n    jsxVisitors.JSXOpeningFragment = {\n      enter(path, state) {\n        if (!state.hasJSXStyle) {\n          return\n        }\n\n        if (state.ignoreClosing === null) {\n          // We keep a counter of elements inside so that we\n          // can keep track of when we exit the parent to reset state\n          // note: if we wished to add an option to turn off\n          // selectors to reach parent elements, it would suffice to\n          // set this to `1` and do an early return instead\n          state.ignoreClosing = 0\n        }\n\n        state.ignoreClosing++\n      }\n    }\n  }\n\n  const visitors = {\n    inherits: jsx,\n    visitor: {\n      Program: {\n        enter(path, state) {\n          setStateOptions(state)\n          state.hasJSXStyle = null\n          state.ignoreClosing = null\n          state.file.hasJSXStyle = false\n          state.file.hasCssResolve = false\n          // create unique identifier for _JSXStyle component\n          state.styleComponentImportName = path.scope.generateUidIdentifier(\n            STYLE_COMPONENT\n          ).name\n\n          // we need to beat the arrow function transform and\n          // possibly others so we traverse from here or else\n          // dynamic values in classNames could be incorrect\n          path.traverse(jsxVisitors, state)\n\n          // Transpile external styles\n          path.traverse(externalStylesVisitor, state)\n        },\n        exit(path, state) {\n          if (!state.file.hasJSXStyle && !state.file.hasCssResolve) {\n            return\n          }\n          state.file.hasJSXStyle = true\n          const importDeclaration = createReactComponentImportDeclaration(state)\n          path.unshiftContainer('body', importDeclaration)\n        }\n      }\n    }\n  }\n\n  return visitors\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "import 'client-only'\n\nexport {\n  StyleRegistry,\n  createStyleRegistry,\n  useStyleRegistry\n} from './stylesheet-registry'\n\nexport { default as style } from './style'\n"
  },
  {
    "path": "src/lib/hash.js",
    "content": "import hashString from 'string-hash'\n\nconst sanitize = rule => rule.replace(/\\/style/gi, '\\\\/style')\nconst cache = {}\n\n/**\n * computeId\n *\n * Compute and memoize a jsx id from a basedId and optionally props.\n */\nexport function computeId(baseId, props) {\n  if (!props) {\n    return `jsx-${baseId}`\n  }\n\n  const propsToString = String(props)\n  const key = baseId + propsToString\n\n  if (!cache[key]) {\n    cache[key] = `jsx-${hashString(`${baseId}-${propsToString}`)}`\n  }\n\n  return cache[key]\n}\n\n/**\n * computeSelector\n *\n * Compute and memoize dynamic selectors.\n */\nexport function computeSelector(id, css) {\n  const selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g\n  // Sanitize SSR-ed CSS.\n  // Client side code doesn't need to be sanitized since we use\n  // document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod).\n  if (typeof window === 'undefined') {\n    css = sanitize(css)\n  }\n\n  const idcss = id + css\n  if (!cache[idcss]) {\n    cache[idcss] = css.replace(selectoPlaceholderRegexp, id)\n  }\n\n  return cache[idcss]\n}\n"
  },
  {
    "path": "src/lib/style-transform.js",
    "content": "import Stylis from 'stylis'\nimport stylisRuleSheet from 'stylis-rule-sheet'\n\nconst stylis = new Stylis()\n\nfunction disableNestingPlugin(...args) {\n  let [context, , , parent = [], line, column] = args\n  if (context === 2) {\n    // replace null characters and trim\n    // eslint-disable-next-line no-control-regex\n    parent = (parent[0] || '').replace(/\\u0000/g, '').trim()\n    if (parent.length > 0 && parent.charAt(0) !== '@') {\n      throw new Error(\n        `Nesting detected at ${line}:${column}. ` +\n          'Unfortunately nesting is not supported by styled-jsx.'\n      )\n    }\n  }\n}\n\nlet generator\nlet filename\nlet offset\n\nfunction sourceMapsPlugin(...args) {\n  const [context, , , , line, column, length] = args\n\n  // Pre-processed, init source map\n  if (context === -1 && generator !== undefined) {\n    generator.addMapping({\n      generated: {\n        line: 1,\n        column: 0\n      },\n      source: filename,\n      original: offset\n    })\n\n    return\n  }\n\n  // Post-processed\n  if (context === -2 && generator !== undefined) {\n    generator = undefined\n    offset = undefined\n    filename = undefined\n\n    return\n  }\n\n  // Selector/property, update source map\n  if ((context === 1 || context === 2) && generator !== undefined) {\n    generator.addMapping({\n      generated: {\n        line: 1,\n        column: length\n      },\n      source: filename,\n      original: {\n        line: line + offset.line,\n        column: column + offset.column\n      }\n    })\n  }\n}\n\n/**\n * splitRulesPlugin\n * Used to split a blob of css into an array of rules\n * that can inserted via sheet.insertRule\n */\nlet splitRules = []\n\nconst splitRulesPlugin = stylisRuleSheet(rule => {\n  splitRules.push(rule)\n})\n\nstylis.use(disableNestingPlugin)\nstylis.use(sourceMapsPlugin)\nstylis.use(splitRulesPlugin)\nstylis.set({\n  cascade: false,\n  compress: true\n})\n\n/**\n * Public transform function\n *\n * @param {String} hash\n * @param {String} styles\n * @param {Object} settings\n * @return {string}\n */\nfunction transform(hash, styles, settings = {}) {\n  generator = settings.generator\n  offset = settings.offset\n  filename = settings.filename\n  splitRules = []\n\n  stylis.set({\n    prefix:\n      typeof settings.vendorPrefixes === 'boolean'\n        ? settings.vendorPrefixes\n        : true\n  })\n\n  stylis(hash, styles)\n\n  if (settings.splitRules) {\n    return splitRules\n  }\n\n  return splitRules.join('')\n}\n\nexport default transform\n"
  },
  {
    "path": "src/lib/stylesheet.js",
    "content": "/*\nBased on Glamor's sheet\nhttps://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js\n*/\n\nconst isProd =\n  typeof process !== 'undefined' &&\n  process.env &&\n  process.env.NODE_ENV === 'production'\nconst isString = o => Object.prototype.toString.call(o) === '[object String]'\n\nexport default class StyleSheet {\n  constructor({ name = 'stylesheet', optimizeForSpeed = isProd } = {}) {\n    invariant(isString(name), '`name` must be a string')\n    this._name = name\n    this._deletedRulePlaceholder = `#${name}-deleted-rule____{}`\n\n    invariant(\n      typeof optimizeForSpeed === 'boolean',\n      '`optimizeForSpeed` must be a boolean'\n    )\n    this._optimizeForSpeed = optimizeForSpeed\n    this._serverSheet = undefined\n    this._tags = []\n    this._injected = false\n    this._rulesCount = 0\n\n    const node =\n      typeof window !== 'undefined' &&\n      document.querySelector('meta[property=\"csp-nonce\"]')\n    this._nonce = node ? node.getAttribute('content') : null\n  }\n\n  setOptimizeForSpeed(bool) {\n    invariant(\n      typeof bool === 'boolean',\n      '`setOptimizeForSpeed` accepts a boolean'\n    )\n\n    invariant(\n      this._rulesCount === 0,\n      'optimizeForSpeed cannot be when rules have already been inserted'\n    )\n    this.flush()\n    this._optimizeForSpeed = bool\n    this.inject()\n  }\n\n  isOptimizeForSpeed() {\n    return this._optimizeForSpeed\n  }\n\n  inject() {\n    invariant(!this._injected, 'sheet already injected')\n    this._injected = true\n    if (typeof window !== 'undefined' && this._optimizeForSpeed) {\n      this._tags[0] = this.makeStyleTag(this._name)\n      this._optimizeForSpeed = 'insertRule' in this.getSheet()\n      if (!this._optimizeForSpeed) {\n        if (!isProd) {\n          console.warn(\n            'StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.'\n          )\n        }\n\n        this.flush()\n        this._injected = true\n      }\n\n      return\n    }\n\n    this._serverSheet = {\n      cssRules: [],\n      insertRule: (rule, index) => {\n        if (typeof index === 'number') {\n          this._serverSheet.cssRules[index] = { cssText: rule }\n        } else {\n          this._serverSheet.cssRules.push({ cssText: rule })\n        }\n\n        return index\n      },\n      deleteRule: index => {\n        this._serverSheet.cssRules[index] = null\n      }\n    }\n  }\n\n  getSheetForTag(tag) {\n    if (tag.sheet) {\n      return tag.sheet\n    }\n\n    // this weirdness brought to you by firefox\n    for (let i = 0; i < document.styleSheets.length; i++) {\n      if (document.styleSheets[i].ownerNode === tag) {\n        return document.styleSheets[i]\n      }\n    }\n  }\n\n  getSheet() {\n    return this.getSheetForTag(this._tags[this._tags.length - 1])\n  }\n\n  insertRule(rule, index) {\n    invariant(isString(rule), '`insertRule` accepts only strings')\n\n    if (typeof window === 'undefined') {\n      if (typeof index !== 'number') {\n        index = this._serverSheet.cssRules.length\n      }\n\n      this._serverSheet.insertRule(rule, index)\n      return this._rulesCount++\n    }\n\n    if (this._optimizeForSpeed) {\n      const sheet = this.getSheet()\n      if (typeof index !== 'number') {\n        index = sheet.cssRules.length\n      }\n\n      // this weirdness for perf, and chrome's weird bug\n      // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule\n      try {\n        sheet.insertRule(rule, index)\n      } catch (error) {\n        if (!isProd) {\n          console.warn(\n            `StyleSheet: illegal rule: \\n\\n${rule}\\n\\nSee https://stackoverflow.com/q/20007992 for more info`\n          )\n        }\n\n        return -1\n      }\n    } else {\n      const insertionPoint = this._tags[index]\n      this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint))\n    }\n\n    return this._rulesCount++\n  }\n\n  replaceRule(index, rule) {\n    if (this._optimizeForSpeed || typeof window === 'undefined') {\n      const sheet =\n        typeof window !== 'undefined' ? this.getSheet() : this._serverSheet\n      if (!rule.trim()) {\n        rule = this._deletedRulePlaceholder\n      }\n\n      if (!sheet.cssRules[index]) {\n        // @TBD Should we throw an error?\n        return index\n      }\n\n      sheet.deleteRule(index)\n\n      try {\n        sheet.insertRule(rule, index)\n      } catch (error) {\n        if (!isProd) {\n          console.warn(\n            `StyleSheet: illegal rule: \\n\\n${rule}\\n\\nSee https://stackoverflow.com/q/20007992 for more info`\n          )\n        }\n\n        // In order to preserve the indices we insert a deleteRulePlaceholder\n        sheet.insertRule(this._deletedRulePlaceholder, index)\n      }\n    } else {\n      const tag = this._tags[index]\n      invariant(tag, `old rule at index \\`${index}\\` not found`)\n      tag.textContent = rule\n    }\n\n    return index\n  }\n\n  deleteRule(index) {\n    if (typeof window === 'undefined') {\n      this._serverSheet.deleteRule(index)\n      return\n    }\n\n    if (this._optimizeForSpeed) {\n      this.replaceRule(index, '')\n    } else {\n      const tag = this._tags[index]\n      invariant(tag, `rule at index \\`${index}\\` not found`)\n      tag.parentNode.removeChild(tag)\n      this._tags[index] = null\n    }\n  }\n\n  flush() {\n    this._injected = false\n    this._rulesCount = 0\n    if (typeof window !== 'undefined') {\n      this._tags.forEach(tag => tag && tag.parentNode.removeChild(tag))\n      this._tags = []\n    } else {\n      // simpler on server\n      this._serverSheet.cssRules = []\n    }\n  }\n\n  cssRules() {\n    if (typeof window === 'undefined') {\n      return this._serverSheet.cssRules\n    }\n\n    return this._tags.reduce((rules, tag) => {\n      if (tag) {\n        rules = rules.concat(\n          Array.prototype.map.call(this.getSheetForTag(tag).cssRules, rule =>\n            rule.cssText === this._deletedRulePlaceholder ? null : rule\n          )\n        )\n      } else {\n        rules.push(null)\n      }\n\n      return rules\n    }, [])\n  }\n\n  makeStyleTag(name, cssString, relativeToTag) {\n    if (cssString) {\n      invariant(\n        isString(cssString),\n        'makeStyleTag accepts only strings as second parameter'\n      )\n    }\n\n    const tag = document.createElement('style')\n    if (this._nonce) tag.setAttribute('nonce', this._nonce)\n    tag.type = 'text/css'\n    tag.setAttribute(`data-${name}`, '')\n\n    if (cssString) {\n      tag.appendChild(document.createTextNode(cssString))\n    }\n\n    const head = document.head || document.getElementsByTagName('head')[0]\n\n    if (relativeToTag) {\n      head.insertBefore(tag, relativeToTag)\n    } else {\n      head.appendChild(tag)\n    }\n\n    return tag\n  }\n\n  get length() {\n    return this._rulesCount\n  }\n}\n\nfunction invariant(condition, message) {\n  if (!condition) {\n    throw new Error(`StyleSheet: ${message}.`)\n  }\n}\n"
  },
  {
    "path": "src/macro.js",
    "content": "import { processTaggedTemplateExpression } from './babel-external'\nimport {\n  setStateOptions,\n  createReactComponentImportDeclaration\n} from './_utils'\nimport { STYLE_COMPONENT } from './_constants'\n\nexport default ({ createMacro, MacroError }) => {\n  return createMacro(styledJsxMacro)\n\n  function styledJsxMacro({ references, state }) {\n    setStateOptions(state)\n\n    // Holds a reference to all the lines where strings are tagged using the `css` tag name.\n    // We print a warning at the end of the macro in case there is any reference to css,\n    // because `css` is generally used as default import name for 'styled-jsx/css'.\n    // People who want to migrate from this macro to pure styled-jsx might have name conflicts issues.\n    const cssReferences = []\n\n    // references looks like this\n    // {\n    //    default: [path, path],\n    //    resolve: [path],\n    // }\n    Object.keys(references).forEach(refName => {\n      // Enforce `resolve` as named import so people\n      // can only import { resolve } from 'styled-jsx/macro'\n      // or an alias of it eg. { resolve as foo }\n      if (refName !== 'default' && refName !== 'resolve') {\n        throw new MacroError(\n          `Imported an invalid named import: ${refName}. Please import: resolve`\n        )\n      }\n\n      // Start processing the references for refName\n      references[refName].forEach(path => {\n        // We grab the parent path. Eg.\n        // path -> css\n        // path.parenPath -> css`div { color: red }`\n        let templateExpression = path.parentPath\n\n        // templateExpression member expression?\n        // path -> css\n        // path.parentPath -> css.resolve\n        if (templateExpression.isMemberExpression()) {\n          // grab .resolve\n          const tagPropertyName = templateExpression.get('property').node.name\n          // Member expressions are only valid on default imports\n          // eg. import css from 'styled-jsx/macro'\n          if (refName !== 'default') {\n            throw new MacroError(\n              `Can't use named import ${\n                path.node.name\n              } as a member expression: ${\n                path.node.name\n              }.${tagPropertyName}\\`div { color: red }\\` Please use it directly: ${\n                path.node.name\n              }\\`div { color: red }\\``\n            )\n          }\n\n          // Otherwise enforce `css.resolve`\n          if (tagPropertyName !== 'resolve') {\n            throw new MacroError(\n              `Using an invalid tag: ${tagPropertyName}. Please use ${\n                templateExpression.get('object').node.name\n              }.resolve`\n            )\n          }\n\n          // Grab the TaggedTemplateExpression\n          // i.e. css.resolve`div { color: red }`\n          templateExpression = templateExpression.parentPath\n        } else {\n          if (refName === 'default') {\n            const { name } = path.node\n            throw new MacroError(\n              `Can't use default import directly eg. ${name}\\`div { color: red }\\`. Please use ${name}.resolve\\`div { color: red }\\` instead.`\n            )\n          }\n\n          if (path.node.name === 'css') {\n            // If the path node name is `css` we push it to the references above to emit a warning later.\n            cssReferences.push(path.node.loc.start.line)\n          }\n        }\n\n        if (!state.styleComponentImportName) {\n          const programPath = path.findParent(p => p.isProgram())\n          state.styleComponentImportName = programPath.scope.generateUidIdentifier(\n            STYLE_COMPONENT\n          ).name\n          const importDeclaration = createReactComponentImportDeclaration(state)\n          programPath.unshiftContainer('body', importDeclaration)\n        }\n\n        // Finally transform the path :)\n        processTaggedTemplateExpression({\n          type: 'resolve',\n          path: templateExpression,\n          file: state.file,\n          splitRules:\n            typeof state.opts.optimizeForSpeed === 'boolean'\n              ? state.opts.optimizeForSpeed\n              : process.env.NODE_ENV === 'production',\n          plugins: state.plugins,\n          vendorPrefixes: state.opts.vendorPrefixes,\n          sourceMaps: state.opts.sourceMaps,\n          styleComponentImportName: state.styleComponentImportName\n        })\n      })\n    })\n\n    if (cssReferences.length > 0) {\n      console.warn(\n        `styled-jsx - Warning - We detected that you named your tag as \\`css\\` at lines: ${cssReferences.join(\n          ', '\n        )}.\\n` +\n          'This tag name is usually used as default import name for `styled-jsx/css`.\\n' +\n          'Porting macro code to pure styled-jsx in the future might be a bit problematic.'\n      )\n    }\n  }\n}\n"
  },
  {
    "path": "src/style.js",
    "content": "import React, { useLayoutEffect, useRef } from 'react'\nimport { useStyleRegistry, createStyleRegistry } from './stylesheet-registry'\nimport { computeId } from './lib/hash'\n\n// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.\n// https://github.com/reactwg/react-18/discussions/110\nconst useInsertionEffect = React.useInsertionEffect || useLayoutEffect\n\nconst defaultRegistry =\n  typeof window !== 'undefined' ? createStyleRegistry() : undefined\nexport default function JSXStyle(props) {\n  const registry = defaultRegistry ? defaultRegistry : useStyleRegistry()\n  const insertionEffectCalled = useRef(false)\n\n  // `registry` might not exist while server-side rendering\n  if (!registry) {\n    return null\n  }\n\n  if (typeof window === 'undefined') {\n    registry.add(props)\n    return null\n  }\n\n  useInsertionEffect(() => {\n    // ReactDOM removes all DOM during hydration in certain cases\n    if (!document.head) {\n      return\n    }\n    registry.add(props)\n    insertionEffectCalled.current = true\n    return () => {\n      insertionEffectCalled.current = false\n      registry.remove(props)\n    }\n  }, [props.id, String(props.dynamic)])\n\n  useLayoutEffect(() => {\n    if (!document.head || insertionEffectCalled.current) {\n      return\n    }\n    registry.add(props)\n    return () => {\n      registry.remove(props)\n    }\n    // props.children can be string[], will be striped since id is identical\n  }, [props.id, String(props.dynamic)])\n\n  return null\n}\n\nJSXStyle.dynamic = info => {\n  return info\n    .map(tagInfo => {\n      const baseId = tagInfo[0]\n      const props = tagInfo[1]\n      return computeId(baseId, props)\n    })\n    .join(' ')\n}\n"
  },
  {
    "path": "src/stylesheet-registry.js",
    "content": "import React, { useState, useContext, createContext } from 'react'\n\nimport DefaultStyleSheet from './lib/stylesheet'\nimport { computeId, computeSelector } from './lib/hash'\n\nfunction mapRulesToStyle(cssRules, options = {}) {\n  return cssRules.map(args => {\n    const id = args[0]\n    const css = args[1]\n    return React.createElement('style', {\n      id: `__${id}`,\n      // Avoid warnings upon render with a key\n      key: `__${id}`,\n      nonce: options.nonce ? options.nonce : undefined,\n      dangerouslySetInnerHTML: {\n        __html: css\n      }\n    })\n  })\n}\nexport class StyleSheetRegistry {\n  constructor({ styleSheet = null, optimizeForSpeed = false } = {}) {\n    this._sheet =\n      styleSheet ||\n      new DefaultStyleSheet({\n        name: 'styled-jsx',\n        optimizeForSpeed\n      })\n\n    this._sheet.inject()\n    if (styleSheet && typeof optimizeForSpeed === 'boolean') {\n      this._sheet.setOptimizeForSpeed(optimizeForSpeed)\n      this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()\n    }\n\n    this._fromServer = undefined\n    this._indices = {}\n    this._instancesCounts = {}\n  }\n\n  add(props) {\n    if (undefined === this._optimizeForSpeed) {\n      this._optimizeForSpeed = Array.isArray(props.children)\n      this._sheet.setOptimizeForSpeed(this._optimizeForSpeed)\n      this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()\n    }\n\n    if (typeof window !== 'undefined' && !this._fromServer) {\n      this._fromServer = this.selectFromServer()\n      this._instancesCounts = Object.keys(this._fromServer).reduce(\n        (acc, tagName) => {\n          acc[tagName] = 0\n          return acc\n        },\n        {}\n      )\n    }\n\n    const { styleId, rules } = this.getIdAndRules(props)\n\n    // Deduping: just increase the instances count.\n    if (styleId in this._instancesCounts) {\n      this._instancesCounts[styleId] += 1\n      return\n    }\n\n    const indices = rules\n      .map(rule => this._sheet.insertRule(rule))\n      // Filter out invalid rules\n      .filter(index => index !== -1)\n\n    this._indices[styleId] = indices\n    this._instancesCounts[styleId] = 1\n  }\n\n  remove(props) {\n    const { styleId } = this.getIdAndRules(props)\n    invariant(\n      styleId in this._instancesCounts,\n      `styleId: \\`${styleId}\\` not found`\n    )\n    this._instancesCounts[styleId] -= 1\n\n    if (this._instancesCounts[styleId] < 1) {\n      const tagFromServer = this._fromServer && this._fromServer[styleId]\n      if (tagFromServer) {\n        tagFromServer.parentNode.removeChild(tagFromServer)\n        delete this._fromServer[styleId]\n      } else {\n        this._indices[styleId].forEach(index => this._sheet.deleteRule(index))\n        delete this._indices[styleId]\n      }\n\n      delete this._instancesCounts[styleId]\n    }\n  }\n\n  update(props, nextProps) {\n    this.add(nextProps)\n    this.remove(props)\n  }\n\n  flush() {\n    this._sheet.flush()\n    this._sheet.inject()\n    this._fromServer = undefined\n    this._indices = {}\n    this._instancesCounts = {}\n  }\n\n  cssRules() {\n    const fromServer = this._fromServer\n      ? Object.keys(this._fromServer).map(styleId => [\n          styleId,\n          this._fromServer[styleId]\n        ])\n      : []\n    const cssRules = this._sheet.cssRules()\n\n    return fromServer.concat(\n      Object.keys(this._indices)\n        .map(styleId => [\n          styleId,\n          this._indices[styleId]\n            .map(index => cssRules[index].cssText)\n            .join(this._optimizeForSpeed ? '' : '\\n')\n        ])\n        // filter out empty rules\n        .filter(rule => Boolean(rule[1]))\n    )\n  }\n\n  styles(options) {\n    return mapRulesToStyle(this.cssRules(), options)\n  }\n\n  getIdAndRules(props) {\n    const { children: css, dynamic, id } = props\n\n    if (dynamic) {\n      const styleId = computeId(id, dynamic)\n      return {\n        styleId,\n        rules: Array.isArray(css)\n          ? css.map(rule => computeSelector(styleId, rule))\n          : [computeSelector(styleId, css)]\n      }\n    }\n\n    return {\n      styleId: computeId(id),\n      rules: Array.isArray(css) ? css : [css]\n    }\n  }\n\n  /**\n   * selectFromServer\n   *\n   * Collects style tags from the document with id __jsx-XXX\n   */\n  selectFromServer() {\n    const elements = Array.prototype.slice.call(\n      document.querySelectorAll('[id^=\"__jsx-\"]')\n    )\n\n    return elements.reduce((acc, element) => {\n      const id = element.id.slice(2)\n      acc[id] = element\n      return acc\n    }, {})\n  }\n}\n\nfunction invariant(condition, message) {\n  if (!condition) {\n    throw new Error(`StyleSheetRegistry: ${message}.`)\n  }\n}\n\nexport const StyleSheetContext = createContext(null)\nStyleSheetContext.displayName = 'StyleSheetContext'\n\nexport function createStyleRegistry() {\n  return new StyleSheetRegistry()\n}\n\nexport function StyleRegistry({ registry: configuredRegistry, children }) {\n  const rootRegistry = useContext(StyleSheetContext)\n  const [registry] = useState(\n    () => rootRegistry || configuredRegistry || createStyleRegistry()\n  )\n\n  return React.createElement(\n    StyleSheetContext.Provider,\n    { value: registry },\n    children\n  )\n}\n\nexport function useStyleRegistry() {\n  return useContext(StyleSheetContext)\n}\n"
  },
  {
    "path": "src/webpack.js",
    "content": "import loaderUtils from 'loader-utils'\n\nconst types = ['scoped', 'global', 'resolve']\n\nexport default function(content) {\n  if (this.cacheable) this.cacheable()\n  this.addDependency(this.resourcePath)\n  const options = Object.assign({}, loaderUtils.getOptions(this))\n\n  if (!options.type) {\n    options.type = 'scoped'\n  }\n\n  // Calls type with the current file name.\n  if (typeof options.type === 'function') {\n    options.type = options.type(this.resourcePath, {\n      query: loaderUtils.parseQuery(this.resourceQuery || '?') || {}\n    })\n  }\n\n  if (!types.includes(options.type)) {\n    return this.callback(\n      'The given `type` option is invalid. \\n\\n' +\n        `Expected:\\n One of scoped|global|resolve \\n\\n` +\n        'Actual:\\n ' +\n        options.type\n    )\n  }\n\n  // Allows to define the type for each individual file using a CSS comment.\n  const commentType = content.match(/\\/*\\s*@styled-jsx=(scoped|global|resolve)/)\n  if (commentType) {\n    options.type = commentType[1]\n  }\n\n  let output = `import css from 'styled-jsx/css';\\n\\nconst styles = css`\n\n  if (options.type === 'global') {\n    // css.global``\n    output += '.global'\n  } else if (options.type === 'resolve') {\n    // css.resolve``\n    output += '.resolve'\n  }\n  // default css``\n\n  // Escape backticks and backslashes: “`” ⇒ “\\`”, “\\” ⇒ “\\\\”\n  // (c) https://github.com/coox/styled-jsx-css-loader/blob/97a38e90dddf2c4b066e9247db0612c8f95302de/index.js#L6\n  output += `\\`${content.replace(\n    /[`\\\\]/g,\n    match => '\\\\' + match\n  )}\\`;\\n\\nexport default styles;`\n\n  this.callback(null, output)\n}\n"
  },
  {
    "path": "style.d.ts",
    "content": "declare module 'styled-jsx/style' {\n  export default function JSXStyle(props: any): null\n}\n"
  },
  {
    "path": "style.js",
    "content": "module.exports = require('./dist/index').style\n"
  },
  {
    "path": "test/.babelrc",
    "content": "{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"],\n  \"plugins\": [\n    \"@babel/plugin-proposal-object-rest-spread\",\n    \"@babel/plugin-transform-runtime\"\n  ],\n  \"sourceMaps\": false\n}\n"
  },
  {
    "path": "test/__snapshots__/attribute.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`generate attribute for mixed modes (global, static, dynamic) 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nimport styles from './styles';\n\nconst styles2 = require('./styles2');\n\n// external only\nexport const Test1 = () => <div className={\\`jsx-\\${styles.__hash} jsx-\\${styles2.__hash}\\`}>\n    <p className={\\`jsx-\\${styles.__hash} jsx-\\${styles2.__hash}\\`}>external only</p>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n    <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>\n  </div>;\n\n// external and static\nexport const Test2 = () => <div className={'jsx-2982525546 ' + \\`jsx-\\${styles.__hash}\\`}>\n    <p className={'jsx-2982525546 ' + \\`jsx-\\${styles.__hash}\\`}>external and static</p>\n    <_JSXStyle id={\\\\\"2982525546\\\\\"}>{\\\\\"p.jsx-2982525546{color:red;}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>;\n\n// external and dynamic\nexport const Test3 = ({ color }) => <div className={\\`jsx-\\${styles.__hash}\\` + ' ' + _JSXStyle.dynamic([['1947484460', [color]]])}>\n    <p className={\\`jsx-\\${styles.__hash}\\` + ' ' + _JSXStyle.dynamic([['1947484460', [color]]])}>external and dynamic</p>\n    <_JSXStyle id={\\\\\"1947484460\\\\\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:\\${color};}\\`}</_JSXStyle>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>;\n\n// external, static and dynamic\nexport const Test4 = ({ color }) => <div className={\\`jsx-\\${styles.__hash}\\` + ' jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>\n    <p className={\\`jsx-\\${styles.__hash}\\` + ' jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>external, static and dynamic</p>\n    <_JSXStyle id={\\\\\"3190985107\\\\\"}>{\\\\\"p.jsx-3190985107{display:inline-block;}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={\\\\\"1336444426\\\\\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:\\${color};}\\`}</_JSXStyle>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>;\n\n// static only\nexport const Test5 = () => <div className={\\\\\"jsx-1372669040\\\\\"}>\n    <p className={\\\\\"jsx-1372669040\\\\\"}>static only</p>\n    <_JSXStyle id={\\\\\"3190985107\\\\\"}>{\\\\\"p.jsx-1372669040{display:inline-block;}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={\\\\\"2982525546\\\\\"}>{\\\\\"p.jsx-1372669040{color:red;}\\\\\"}</_JSXStyle>\n  </div>;\n\n// static and dynamic\nexport const Test6 = ({ color }) => <div className={'jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>\n    <p className={'jsx-3190985107 ' + _JSXStyle.dynamic([['1336444426', [color]]])}>static and dynamic</p>\n    <_JSXStyle id={\\\\\"3190985107\\\\\"}>{\\\\\"p.jsx-3190985107{display:inline-block;}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={\\\\\"1336444426\\\\\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:\\${color};}\\`}</_JSXStyle>\n  </div>;\n\n// dynamic only\nexport const Test7 = ({ color }) => <div className={_JSXStyle.dynamic([['1947484460', [color]]])}>\n    <p className={_JSXStyle.dynamic([['1947484460', [color]]])}>dynamic only</p>\n    <_JSXStyle id={\\\\\"1947484460\\\\\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:\\${color};}\\`}</_JSXStyle>\n  </div>;\n\n// dynamic with scoped compound variable\nexport const Test8 = ({ color }) => {\n  if (color) {\n    const innerProps = { color };\n\n    return <div className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>\n        <p className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>dynamic with scoped compound variable</p>\n        <_JSXStyle id={\\\\\"1791723528\\\\\"} dynamic={[innerProps.color]}>{\\`p.__jsx-style-dynamic-selector{color:\\${innerProps.color};}\\`}</_JSXStyle>\n      </div>;\n  }\n};\n\n// dynamic with compound variable\nexport const Test9 = ({ color }) => {\n  const innerProps = { color };\n\n  return <div className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>\n      <p className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>dynamic with compound variable</p>\n      <_JSXStyle id={\\\\\"248922593\\\\\"} dynamic={[innerProps.color]}>{\\`p.__jsx-style-dynamic-selector{color:\\${innerProps.color};}\\`}</_JSXStyle>\n    </div>;\n};\n\nconst foo = 'red';\n\n// dynamic with constant variable\nexport const Test10 = () => <div className={\\\\\"jsx-461505126\\\\\"}>\n    <p className={\\\\\"jsx-461505126\\\\\"}>dynamic with constant variable</p>\n    <_JSXStyle id={\\\\\"461505126\\\\\"}>{\\`p.jsx-461505126{color:\\${foo};}\\`}</_JSXStyle>\n  </div>;\n\n// dynamic with complex scope\nexport const Test11 = ({ color }) => {\n  const items = Array.from({ length: 5 }).map((item, i) => <li key={i} className={_JSXStyle.dynamic([['2172653867', [color]]]) + ' ' + 'item'}>\n      <_JSXStyle id={\\\\\"2172653867\\\\\"} dynamic={[color]}>{\\`.item.__jsx-style-dynamic-selector{color:\\${color};}\\`}</_JSXStyle>\n      Item #{i + 1}\n    </li>);\n\n  return <ul className=\\\\\"items\\\\\">{items}</ul>;\n};\"\n`;\n\nexports[`rewrites className 1`] = `\n\"var _this = this;\n\nimport _JSXStyle from \\\\\"styled-jsx/style\\\\\";\nexport default (() => {\n  const Element = 'div';\n  return <div className={\\\\\"jsx-2886504620\\\\\"}>\n      <div {...test.test} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (test.test.className != null && test.test.className || \\\\\"test\\\\\")} />\n      <div {...test.test.test} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (test.test.test.className != null && test.test.test.className || \\\\\"test\\\\\")} />\n      <div {..._this.test.test} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (_this.test.test.className != null && _this.test.test.className || \\\\\"test\\\\\")} />\n      <div data-test=\\\\\"test\\\\\" className={\\\\\"jsx-2886504620\\\\\"} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + \\\\\"test\\\\\"} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + 'test'} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + \\`test\\`} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + \\`test\\${true ? ' test2' : ''}\\`} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + ('test ' + test || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (['test', 'test2'].join(' ') || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (true && 'test' || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + ((test ? 'test' : null) || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (test || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (test && 'test' || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (test && test('test') || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (undefined || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (null || \\\\\"\\\\\")} />\n      <div className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (false || \\\\\"\\\\\")} />\n      <div data-test className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + 'test'} />\n      <div data-test className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + 'test'} />\n      <div data-test=\\\\\"test\\\\\" className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + 'test'} />\n      <div {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (props.className != null && props.className || 'test')} />\n      <div {...props} {...rest} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (rest.className != null && rest.className || props.className != null && props.className || 'test')} />\n      <div {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (props.className != null && props.className || \\`test \\${test ? 'test' : ''}\\`)} />\n      <div {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (props.className != null && props.className || test && test('test') || \\\\\"\\\\\")} />\n      <div {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (props.className != null && props.className || test && test('test') && 'test' || \\\\\"\\\\\")} />\n      <div {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (props.className != null && props.className || test && test('test') && test2('test') || \\\\\"\\\\\")} />\n      <div {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + 'test'} />\n      <div {...props} {...rest} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + 'test'} />\n      <div {...props} {...rest} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (rest.className != null && rest.className || 'test')} />\n      <div {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (props.className != null && props.className || \\\\\"\\\\\")} />\n      <div {...props} {...rest} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (rest.className != null && rest.className || props.className != null && props.className || \\\\\"\\\\\")} />\n      <div {...props} data-foo {...rest} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (rest.className != null && rest.className || props.className != null && props.className || \\\\\"\\\\\")} />\n      <div {...props} data-foo {...rest} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (rest.className != null && rest.className || 'test')} />\n      <Element className={\\\\\"jsx-2886504620\\\\\"} />\n      <Element className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + \\\\\"test\\\\\"} />\n      <Element {...props} className={\\\\\"jsx-2886504620\\\\\" + \\\\\" \\\\\" + (props.className != null && props.className || \\\\\"\\\\\")} />\n      <_JSXStyle id={\\\\\"2886504620\\\\\"}>{\\\\\"div.jsx-2886504620{color:red;}\\\\\"}</_JSXStyle>\n    </div>;\n});\"\n`;\n"
  },
  {
    "path": "test/__snapshots__/external.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`(optimized) transpiles external stylesheets (CommonJS modules) 1`] = `\n\"const _defaultExport = ['div.jsx-2292456818{font-size:3em;}'];\n_defaultExport.__hash = '2292456818';\n\n\nmodule.exports = _defaultExport;\"\n`;\n\nexports[`(optimized) transpiles external stylesheets 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n\nimport colors, { size } from './constants';\nconst color = 'red';\n\nconst bar = ['div.jsx-2141779268{font-size:3em;}'];\n\nbar.__hash = '2141779268';\nconst baz = ['div{font-size:3em;}'];\n\nbaz.__hash = '2141779268';\na.__hash = '262929833';\nconst a = [\\`div{font-size:\\${size}em;}\\`];\n\nexport const uh = bar;\n\nexport const foo = [\\`div.jsx-2299908427{color:\\${color};}\\`];\n\nfoo.__hash = '2299908427';\n({\n  styles: <_JSXStyle id={\\\\\"1329679275\\\\\"}>{[\\`div.jsx-1329679275{color:\\${colors.green.light};}\\`, 'a.jsx-1329679275{color:red;}']}</_JSXStyle>,\n  className: 'jsx-1329679275'\n});\n\nconst b = {\n  styles: <_JSXStyle id={\\\\\"1329679275\\\\\"}>{[\\`div.jsx-1329679275{color:\\${colors.green.light};}\\`, 'a.jsx-1329679275{color:red;}']}</_JSXStyle>,\n  className: 'jsx-1329679275'\n};\n\nconst dynamic = colors => {\n  const b = {\n    styles: <_JSXStyle id={\\\\\"3325296745\\\\\"} dynamic={[colors.green.light]}>{[\\`div.__jsx-style-dynamic-selector{color:\\${colors.green.light};}\\`, 'a.__jsx-style-dynamic-selector{color:red;}']}</_JSXStyle>,\n    className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])\n  };\n};\n\nexport default {\n  styles: <_JSXStyle id={\\\\\"3290112549\\\\\"}>{['div.jsx-3290112549{font-size:3em;}', \\`p.jsx-3290112549{color:\\${color};}\\`]}</_JSXStyle>,\n  className: 'jsx-3290112549'\n};\"\n`;\n\nexports[`Makes sure that style nodes are not re-used 1`] = `\n\"\\\\\"use strict\\\\\";\n\nvar _style = _interopRequireDefault(require(\\\\\"styled-jsx/style\\\\\"));\n\nvar _App = _interopRequireDefault(require(\\\\\"./App.styles\\\\\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction Test() {\n  return <div>\n        <_style.default id={_App.default.__hash}>{_App.default}</_style.default>\n      </div>;\n}\"\n`;\n\nexports[`does not transpile non-styled-jsx tagged teplate literals 1`] = `\n\"import css from 'hell';\n\nconst color = 'red';\n\nconst bar = css\\`\n  div {\n    font-size: 3em;\n  }\n\\`;\nexport const uh = bar;\n\nexport const foo = css\\`div { color: \\${color}}\\`;\n\nexport default css\\`\n  div {\n    font-size: 3em;\n  }\n  p {\n    color: \\${color};\n  }\n\\`;\n\nconst Title = styled.h1\\`\n  color: red;\n  font-size: 50px;\n\\`;\n\nconst AnotherTitle = Title.extend\\`color: blue;\\`;\n\nexport const Component = () => <AnotherTitle>My page</AnotherTitle>;\"\n`;\n\nexports[`injects JSXStyle for nested scope 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n\n\nfunction test() {\n  ({\n    styles: <_JSXStyle id={\\\\\"2886504620\\\\\"}>{\\\\\"div.jsx-2886504620{color:red;}\\\\\"}</_JSXStyle>,\n    className: 'jsx-2886504620'\n  });\n}\"\n`;\n\nexports[`transpiles external stylesheets (CommonJS modules) 1`] = `\n\"const _defaultExport = new String('div.jsx-2292456818{font-size:3em;}');\n\n_defaultExport.__hash = '2292456818';\n\n\nmodule.exports = _defaultExport;\"\n`;\n\nexports[`transpiles external stylesheets 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n\nimport colors, { size } from './constants';\nconst color = 'red';\n\nconst bar = new String('div.jsx-2141779268{font-size:3em;}');\n\nbar.__hash = '2141779268';\nconst baz = new String('div{font-size:3em;}');\n\nbaz.__hash = '2141779268';\na.__hash = '262929833';\nconst a = new String(\\`div{font-size:\\${size}em;}\\`);\n\nexport const uh = bar;\n\nexport const foo = new String(\\`div.jsx-2299908427{color:\\${color};}\\`);\n\nfoo.__hash = '2299908427';\n({\n  styles: <_JSXStyle id={\\\\\"1329679275\\\\\"}>{\\`div.jsx-1329679275{color:\\${colors.green.light};}a.jsx-1329679275{color:red;}\\`}</_JSXStyle>,\n  className: 'jsx-1329679275'\n});\n\nconst b = {\n  styles: <_JSXStyle id={\\\\\"1329679275\\\\\"}>{\\`div.jsx-1329679275{color:\\${colors.green.light};}a.jsx-1329679275{color:red;}\\`}</_JSXStyle>,\n  className: 'jsx-1329679275'\n};\n\nconst dynamic = colors => {\n  const b = {\n    styles: <_JSXStyle id={\\\\\"3325296745\\\\\"} dynamic={[colors.green.light]}>{\\`div.__jsx-style-dynamic-selector{color:\\${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}\\`}</_JSXStyle>,\n    className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])\n  };\n};\n\nexport default {\n  styles: <_JSXStyle id={\\\\\"3290112549\\\\\"}>{\\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:\\${color};}\\`}</_JSXStyle>,\n  className: 'jsx-3290112549'\n};\"\n`;\n\nexports[`use external stylesheet and dynamic element 1`] = `\n\"import _JSXStyle from \\\\\"styled-jsx/style\\\\\";\nimport styles from './styles2';\n\nexport default (({ level = 1 }) => {\n  const Element = \\`h\\${level}\\`;\n\n  return <Element className={\\`jsx-\\${styles.__hash}\\` + \\\\\" \\\\\" + \\\\\"root\\\\\"}>\n      <p className={\\`jsx-\\${styles.__hash}\\`}>dynamic element</p>\n      <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n    </Element>;\n});\"\n`;\n\nexports[`use external stylesheets (global only) 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nimport styles, { foo as styles3 } from './styles';\n\nconst styles2 = require('./styles2');\n\nexport default (() => <div>\n    <p>test</p>\n    <div>woot</div>\n    <p>woot</p>\n    <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>\n    <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`use external stylesheets (multi-line) 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nimport styles from './styles';\n\nexport default (() => <div className={\\`jsx-\\${styles.__hash}\\`}>\n    <p className={\\`jsx-\\${styles.__hash}\\`}>test</p>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`use external stylesheets 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nimport styles from './styles';\nconst styles2 = require('./styles2');\nimport { foo as styles3 } from './styles';\n\nexport default (() => <div className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash} jsx-\\${styles.__hash}\\`}>\n    <p className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash} jsx-\\${styles.__hash}\\` + ' ' + 'foo'}>test</p>\n    <p className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash} jsx-\\${styles.__hash}\\`}>woot</p>\n    <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>\n    <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>\n    <div className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash} jsx-\\${styles.__hash}\\`}>woot</div>\n    <_JSXStyle id={\\\\\"1646697228\\\\\"}>{\\\\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>);\n\nexport const Test = () => <div className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash}\\`}>\n    <p className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash}\\` + ' ' + 'foo'}>test</p>\n    <p className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash}\\`}>woot</p>\n    <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>\n    <div className={'jsx-1646697228 ' + \\`jsx-\\${styles3.__hash}\\`}>woot</div>\n    <_JSXStyle id={\\\\\"1646697228\\\\\"}>{\\\\\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\\\\\"}</_JSXStyle>\n  </div>;\"\n`;\n"
  },
  {
    "path": "test/__snapshots__/index.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`generates source maps 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nexport default (() => <div className={\\\\\"jsx-2743241663\\\\\"}>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>test</p>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>woot</p>\n    <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p.jsx-2743241663{color:red;}\\\\\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXBzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQixBQUNjLFVBQUMiLCJmaWxlIjoic291cmNlLW1hcHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxkaXY+XG4gICAgPHA+dGVzdDwvcD5cbiAgICA8cD53b290PC9wPlxuICAgIDxzdHlsZSBqc3g+eydwIHsgY29sb3I6IHJlZCB9J308L3N0eWxlPlxuICA8L2Rpdj5cbilcbiJdfQ== */\\\\\\\\n/*@ sourceURL=source-maps.js */\\\\\"}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`ignores when attribute is absent 1`] = `\n\"const a = () => <div>\n    <p>hi</p>\n    <style>{'woot'}</style>\n  </div>;\"\n`;\n\nexports[`ignores whitespace around expression container 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nexport default (() => <div className={\\\\\"jsx-2743241663\\\\\"}>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>test</p>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>woot</p>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>woot</p>\n    <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p.jsx-2743241663{color:red;}\\\\\"}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`mixed global and scoped 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nconst Test = () => <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p{color:red;}\\\\\"}</_JSXStyle>;\n\nexport default (() => <div className={\\\\\"jsx-2673076688\\\\\"}>\n    <p className={\\\\\"jsx-2673076688\\\\\"}>test</p>\n    <_JSXStyle id={\\\\\"4269072806\\\\\"}>{\\\\\"body{background:red;}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p.jsx-2673076688{color:red;}\\\\\"}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`should have different jsx ids 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nconst color = 'red';\nconst otherColor = 'green';\n\nconst A = () => <div className={\\\\\"jsx-57381496\\\\\"}>\n    <p className={\\\\\"jsx-57381496\\\\\"}>test</p>\n    <_JSXStyle id={\\\\\"57381496\\\\\"}>{\\`p.jsx-57381496{color:\\${color};}\\`}</_JSXStyle>\n  </div>;\n\nconst B = () => <div className={\\\\\"jsx-3099245642\\\\\"}>\n    <p className={\\\\\"jsx-3099245642\\\\\"}>test</p>\n    <_JSXStyle id={\\\\\"3099245642\\\\\"}>{\\`p.jsx-3099245642{color:\\${otherColor};}\\`}</_JSXStyle>\n  </div>;\n\nexport default (() => <div>\n    <A />\n    <B />\n  </div>);\"\n`;\n\nexports[`should not add the data-jsx attribute to components instances 1`] = `\n\"import _JSXStyle from \\\\\"styled-jsx/style\\\\\";\nconst Test = () => <div className={\\\\\"jsx-2529315885\\\\\"}>\n    <span className={\\\\\"jsx-2529315885\\\\\"}>test</span>\n    <Component />\n    <_JSXStyle id={\\\\\"2529315885\\\\\"}>{\\\\\"span.jsx-2529315885{color:red;}\\\\\"}</_JSXStyle>\n  </div>;\"\n`;\n\nexports[`works with class 1`] = `\n\"import _JSXStyle from \\\\\"styled-jsx/style\\\\\";\nexport default class {\n\n  render() {\n    return <div className={\\\\\"jsx-2101845350\\\\\"}>\n        <p className={\\\\\"jsx-2101845350\\\\\"}>test</p>\n        <_JSXStyle id={\\\\\"2101845350\\\\\"}>{\\\\\"p.jsx-2101845350{color:red;}\\\\\"}</_JSXStyle>\n      </div>;\n  }\n\n}\"\n`;\n\nexports[`works with css tagged template literals in the same file 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n\n\nexport default (({ children }) => <div className={\\`jsx-\\${styles.__hash}\\`}>\n    <p className={\\`jsx-\\${styles.__hash}\\`}>{children}</p>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>);\n\nconst styles = new String('p.jsx-2587355013{color:red;}');\n\nstyles.__hash = '2587355013';\nclass Test extends React.Component {\n  render() {\n    return <div className={\\`jsx-\\${styles.__hash}\\`}>\n        <p className={\\`jsx-\\${styles.__hash}\\`}>{this.props.children}</p>\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n      </div>;\n  }\n}\"\n`;\n\nexports[`works with dynamic element 1`] = `\n\"import _JSXStyle from \\\\\"styled-jsx/style\\\\\";\nexport default (({ level = 1 }) => {\n  const Element = \\`h\\${level}\\`;\n\n  return <Element className={\\\\\"jsx-1253978709\\\\\" + \\\\\" \\\\\" + \\\\\"root\\\\\"}>\n      <p className={\\\\\"jsx-1253978709\\\\\"}>dynamic element</p>\n      <_JSXStyle id={\\\\\"1253978709\\\\\"}>{\\\\\".root.jsx-1253978709{background:red;}\\\\\"}</_JSXStyle>\n    </Element>;\n});\n\nexport const TestLowerCase = ({ level = 1 }) => {\n  const element = \\`h\\${level}\\`;\n\n  return <element className={\\\\\"jsx-1253978709\\\\\" + \\\\\" \\\\\" + \\\\\"root\\\\\"}>\n      <p className={\\\\\"jsx-1253978709\\\\\"}>dynamic element</p>\n      <_JSXStyle id={\\\\\"1253978709\\\\\"}>{\\\\\".root.jsx-1253978709{background:red;}\\\\\"}</_JSXStyle>\n    </element>;\n};\n\nconst Element2 = 'div';\nexport const Test2 = () => {\n  return <Element2 className=\\\\\"root\\\\\">\n      <p className={\\\\\"jsx-1253978709\\\\\"}>dynamic element</p>\n      <_JSXStyle id={\\\\\"1253978709\\\\\"}>{\\\\\".root.jsx-1253978709{background:red;}\\\\\"}</_JSXStyle>\n    </Element2>;\n};\"\n`;\n\nexports[`works with dynamic element in class 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nexport default class {\n  render() {\n    const Element = 'div';\n\n    return <Element className={'jsx-1800172487' + ' ' + 'root'}>\n        <p className={\\\\\"jsx-1800172487\\\\\"}>dynamic element</p>\n        <_JSXStyle id={\\\\\"1800172487\\\\\"}>{\\\\\".root.jsx-1800172487{background:red;}\\\\\"}</_JSXStyle>\n      </Element>;\n  }\n}\n\nconst Element2 = 'div';\nexport const Test2 = class {\n  render() {\n    return <Element2 className=\\\\\"root\\\\\">\n        <p className={\\\\\"jsx-1800172487\\\\\"}>dynamic element</p>\n        <_JSXStyle id={\\\\\"1800172487\\\\\"}>{\\\\\".root.jsx-1800172487{background:red;}\\\\\"}</_JSXStyle>\n      </Element2>;\n  }\n};\"\n`;\n\nexports[`works with expressions in template literals 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nconst darken = c => c;\nconst color = 'red';\nconst otherColor = 'green';\nconst mediumScreen = '680px';\nconst animationDuration = '200ms';\nconst animationName = 'my-cool-animation';\nconst obj = { display: 'block' };\n\nexport default (({ display }) => <div className={'jsx-3922596756 ' + _JSXStyle.dynamic([['1795062918', [display ? 'block' : 'none']]])}>\n    <p className={'jsx-3922596756 ' + _JSXStyle.dynamic([['1795062918', [display ? 'block' : 'none']]])}>test</p>\n    <_JSXStyle id={\\\\\"1003380713\\\\\"}>{\\`p.\\${color}.jsx-3922596756{color:\\${otherColor};display:\\${obj.display};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p.jsx-3922596756{color:red;}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={\\\\\"602592955\\\\\"}>{\\`body{background:\\${color};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"602592955\\\\\"}>{\\`body{background:\\${color};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"128557999\\\\\"}>{\\`p.jsx-3922596756{color:\\${color};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"128557999\\\\\"}>{\\`p.jsx-3922596756{color:\\${color};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"2622100973\\\\\"}>{\\`p.jsx-3922596756{color:\\${darken(color)};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"1167419394\\\\\"}>{\\`p.jsx-3922596756{color:\\${darken(color) + 2};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"4052509549\\\\\"}>{\\`@media (min-width:\\${mediumScreen}){p.jsx-3922596756{color:green;}p.jsx-3922596756{color:\\${\\`red\\`};}}p.jsx-3922596756{color:red;}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"2824547816\\\\\"}>{\\`p.jsx-3922596756{-webkit-animation-duration:\\${animationDuration};animation-duration:\\${animationDuration};}\\`}</_JSXStyle>\n    <_JSXStyle id={\\\\\"417951176\\\\\"}>{\\`p.jsx-3922596756{-webkit-animation:\\${animationDuration} forwards \\${animationName};animation:\\${animationDuration} forwards \\${animationName};}div.jsx-3922596756{background:\\${color};}\\`}</_JSXStyle>\n\n    <_JSXStyle id={\\\\\"1795062918\\\\\"} dynamic={[display ? 'block' : 'none']}>{\\`span.__jsx-style-dynamic-selector{display:\\${display ? 'block' : 'none'};}\\`}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`works with global styles 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nconst Test = () => <div className={\\\\\"jsx-2209073070\\\\\"}>\n    <_JSXStyle id={\\\\\"2209073070\\\\\"}>{\\\\\"body{color:red;}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out;}div a{display:none;}[data-test]>div{color:red;}\\\\\"}</_JSXStyle>\n  </div>;\n\nconst Test2 = () => <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p{color:red;}\\\\\"}</_JSXStyle>;\"\n`;\n\nexports[`works with multiple jsx blocks 1`] = `\n\"import _JSXStyle from \\\\\"styled-jsx/style\\\\\";\nconst attrs = {\n  id: 'test'\n};\n\nconst Test1 = () => <div className={\\\\\"jsx-2529315885\\\\\"}>\n    <span {...attrs} data-test=\\\\\"test\\\\\" className={\\\\\"jsx-2529315885\\\\\" + \\\\\" \\\\\" + (attrs.className != null && attrs.className || \\\\\"\\\\\")}>test</span>\n    <Component />\n    <_JSXStyle id={\\\\\"2529315885\\\\\"}>{\\\\\"span.jsx-2529315885{color:red;}\\\\\"}</_JSXStyle>\n  </div>;\n\nconst Test2 = () => <span>test</span>;\n\nconst Test3 = () => <div className={\\\\\"jsx-2529315885\\\\\"}>\n    <span className={\\\\\"jsx-2529315885\\\\\"}>test</span>\n    <_JSXStyle id={\\\\\"2529315885\\\\\"}>{\\\\\"span.jsx-2529315885{color:red;}\\\\\"}</_JSXStyle>\n  </div>;\n\nexport default class {\n  render() {\n    return <div className={\\\\\"jsx-2101845350\\\\\"}>\n        <p className={\\\\\"jsx-2101845350\\\\\"}>test</p>\n        <_JSXStyle id={\\\\\"2101845350\\\\\"}>{\\\\\"p.jsx-2101845350{color:red;}\\\\\"}</_JSXStyle>\n      </div>;\n  }\n}\"\n`;\n\nexports[`works with non styled-jsx styles 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nexport default (() => <div className={\\\\\"jsx-2743241663\\\\\"}>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>woot</p>\n    <style dangerouslySetInnerHTML={{ __html: \\`body { margin: 0; }\\` }}></style>\n    <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p.jsx-2743241663{color:red;}\\\\\"}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`works with stateless 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nexport default (() => <div className={\\\\\"jsx-2743241663\\\\\"}>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>test</p>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>woot</p>\n    <p className={\\\\\"jsx-2743241663\\\\\"}>woot</p>\n    <_JSXStyle id={\\\\\"2743241663\\\\\"}>{\\\\\"p.jsx-2743241663{color:red;}\\\\\"}</_JSXStyle>\n  </div>);\"\n`;\n"
  },
  {
    "path": "test/__snapshots__/macro.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`can alias the named import 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n\n\n({\n    styles: <_JSXStyle id={\\\\\"2886504620\\\\\"}>{\\\\\"div.jsx-2886504620{color:red;}\\\\\"}</_JSXStyle>,\n    className: 'jsx-2886504620'\n});\"\n`;\n\nexports[`injects JSXStyle for nested scope 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n\n\nfunction test() {\n  ({\n    styles: <_JSXStyle id={\\\\\"2886504620\\\\\"}>{\\\\\"div.jsx-2886504620{color:red;}\\\\\"}</_JSXStyle>,\n    className: 'jsx-2886504620'\n  });\n}\"\n`;\n\nexports[`transpiles correctly 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\n\n\nconst { className, styles } = {\n  styles: <_JSXStyle id={\\\\\"2052294191\\\\\"}>{\\\\\"div.jsx-2052294191{color:red;}\\\\\"}</_JSXStyle>,\n  className: 'jsx-2052294191'\n};\n\nconst dynamicStyles = props => ({\n  styles: <_JSXStyle id={\\\\\"290194820\\\\\"} dynamic={[props.color]}>{\\`div.__jsx-style-dynamic-selector{color:\\${props.color};}\\`}</_JSXStyle>,\n  className: _JSXStyle.dynamic([['290194820', [props.color]]])\n});\n\nconst test = {\n  styles: <_JSXStyle id={\\\\\"2052294191\\\\\"}>{\\\\\"div.jsx-2052294191{color:red;}\\\\\"}</_JSXStyle>,\n  className: 'jsx-2052294191'\n};\n\nconst dynamicStyles2 = props => ({\n  styles: <_JSXStyle id={\\\\\"290194820\\\\\"} dynamic={[props.color]}>{\\`div.__jsx-style-dynamic-selector{color:\\${props.color};}\\`}</_JSXStyle>,\n  className: _JSXStyle.dynamic([['290194820', [props.color]]])\n});\n\nconst ExampleComponent = props => {\n  const { className, styles } = dynamicStyles(props);\n\n  return <div className={className}>\n      howdy\n      {styles}\n    </div>;\n};\"\n`;\n"
  },
  {
    "path": "test/__snapshots__/plugins.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`applies plugins 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nimport styles from './styles';\nconst color = 'red';\n\nexport default (() => <div className={'jsx-3382438999 ' + \\`jsx-\\${styles.__hash}\\`}>\n    <p className={'jsx-3382438999 ' + \\`jsx-\\${styles.__hash}\\`}>test</p>\n    <_JSXStyle id={\\\\\"3382438999\\\\\"}>{\\`span.\\${color}.jsx-3382438999{color:\\${otherColor};}\\`}</_JSXStyle>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>);\"\n`;\n\nexports[`babel-test plugin strips jsx attribute 1`] = `\n\"import styles from './styles';\nconst color = 'red';\n\nexport default (() => <div>\n    <p>test</p>\n    <style>{\\`\n      div.\\${color} {\n        color: \\${otherColor};\n      }\n    \\`}</style>\n    <style>{styles}</style>\n  </div>);\"\n`;\n\nexports[`passes options to plugins 1`] = `\n\"import _JSXStyle from 'styled-jsx/style';\nimport styles from './styles';\nconst color = 'red';\n\nexport default (() => <div className={'jsx-3382438999 ' + \\`jsx-\\${styles.__hash}\\`}>\n    <p className={'jsx-3382438999 ' + \\`jsx-\\${styles.__hash}\\`}>test</p>\n    <_JSXStyle id={\\\\\"3382438999\\\\\"}>{\\\\\".test.jsx-3382438999{content:\\\\\\\\\\\\\"{\\\\\\\\\\\\\"foo\\\\\\\\\\\\\":false,\\\\\\\\\\\\\"babel\\\\\\\\\\\\\":{\\\\\\\\\\\\\"location\\\\\\\\\\\\\":{\\\\\\\\\\\\\"start\\\\\\\\\\\\\":{\\\\\\\\\\\\\"line\\\\\\\\\\\\\":7,\\\\\\\\\\\\\"column\\\\\\\\\\\\\":16},\\\\\\\\\\\\\"end\\\\\\\\\\\\\":{\\\\\\\\\\\\\"line\\\\\\\\\\\\\":11,\\\\\\\\\\\\\"column\\\\\\\\\\\\\":5}},\\\\\\\\\\\\\"vendorPrefixes\\\\\\\\\\\\\":false,\\\\\\\\\\\\\"sourceMaps\\\\\\\\\\\\\":false,\\\\\\\\\\\\\"isGlobal\\\\\\\\\\\\\":false}}\\\\\\\\\\\\\";}\\\\\"}</_JSXStyle>\n    <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>\n  </div>);\"\n`;\n"
  },
  {
    "path": "test/__snapshots__/styles.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`transpile styles with attributes 1`] = `\"html.jsx-123{background-image: linear-gradient(0deg,rgba(255,255,255,0.8),rgba(255,255,255,0.8)), url(/static/background.svg);}p{color:blue;}p{color:blue;}p,a.jsx-123{color:blue;}.foo + a{color:red;}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}p.jsx-123{color:red;}p.jsx-123{color:red;}*.jsx-123{color:blue;}[href=\\\\\"woot\\\\\"].jsx-123{color:red;}p.jsx-123 a.jsx-123 span.jsx-123{color:red;}p.jsx-123 span{background:blue;}p.jsx-123 a[title=\\\\\"'w ' '  t'\\\\\"].jsx-123{margin:auto;}p.jsx-123 span:not(.test){color:green;}p.jsx-123,h1.jsx-123{color:blue;-webkit-animation:hahaha-jsx-123 3s ease forwards infinite;animation:hahaha-jsx-123 3s ease forwards infinite;-webkit-animation-name:hahaha-jsx-123;animation-name:hahaha-jsx-123;-webkit-animation-delay:100ms;animation-delay:100ms;}p.jsx-123{-webkit-animation:hahaha-jsx-123 1s,hehehe-jsx-123 2s;animation:hahaha-jsx-123 1s,hehehe-jsx-123 2s;}p.jsx-123:hover{color:red;}p.jsx-123::before{color:red;}.jsx-123:hover{color:red;}.jsx-123::before{color:red;}.jsx-123:hover p.jsx-123{color:red;}p.jsx-123+a.jsx-123{color:red;}p.jsx-123~a.jsx-123{color:red;}p.jsx-123>a.jsx-123{color:red;}p.jsx-123>>a.jsx-123{color:red;}@-webkit-keyframes hahaha-jsx-123{from{top:0;}to{top:100;}}@keyframes hahaha-jsx-123{from{top:0;}to{top:100;}}@-webkit-keyframes hehehe-jsx-123{from{left:0;}to{left:100;}}@keyframes hehehe-jsx-123{from{left:0;}to{left:100;}}@media (min-width:500px){.test.jsx-123{color:red;}}.test.jsx-123{display:block;}.inline-flex.jsx-123{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.flex.jsx-123{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.test.jsx-123{box-shadow:0 0 10px black,inset 0 0 5px black;}.test[title=\\\\\",\\\\\"].jsx-123{display:inline-block;}.test.is-status.jsx-123 .test.jsx-123{color:red;}.a-selector.jsx-123:hover,.a-selector.jsx-123:focus{outline:none;}@media (min-width:1px) and (max-width:768px){[class*='grid__col--'].jsx-123{margin-top:12px;margin-bottom:12px;}}@media (max-width:64em){.test.jsx-123{margin-bottom:1em;}@supports (-moz-appearance:none) and (display:contents){.test.jsx-123{margin-bottom:2rem;}}}\"`;\n"
  },
  {
    "path": "test/_read.js",
    "content": "import { resolve } from 'path'\nimport { promises as fs } from 'fs'\n\nexport default async path => {\n  const buffer = await fs.readFile(resolve(__dirname, path))\n  return buffer.toString()\n}\n"
  },
  {
    "path": "test/_transform.js",
    "content": "import path from 'path'\nimport { transform, transformFile } from '@babel/core'\n\nexport default (file, opts = {}) =>\n  new Promise((resolve, reject) => {\n    transformFile(\n      path.resolve(__dirname, file),\n      {\n        babelrc: false,\n        ...opts\n      },\n      (error, data) => {\n        if (error) {\n          return reject(error)\n        }\n\n        resolve(data)\n      }\n    )\n  })\n\nexport const transformSource = (src, opts = {}) =>\n  new Promise((resolve, reject) => {\n    transform(\n      src,\n      {\n        babelrc: false,\n        ...opts\n      },\n      (error, result) => {\n        if (error) {\n          return reject(error)\n        }\n\n        resolve(result)\n      }\n    )\n  })\n"
  },
  {
    "path": "test/attribute.js",
    "content": "// Packages\nimport test from 'ava'\n\n// Ours\nimport plugin from '../src/babel'\nimport _transform from './_transform'\n\nconst transform = (file, opts = {}) =>\n  _transform(file, {\n    plugins: [plugin],\n    ...opts\n  })\n\ntest('rewrites className', async t => {\n  const { code } = await transform(\n    './fixtures/attribute-generation-classname-rewriting.js'\n  )\n  t.snapshot(code)\n})\n\ntest('generate attribute for mixed modes (global, static, dynamic)', async t => {\n  const { code } = await transform('./fixtures/attribute-generation-modes.js')\n  t.snapshot(code)\n})\n"
  },
  {
    "path": "test/external.js",
    "content": "// Packages\nimport test from 'ava'\n\n// Ours\nimport plugin from '../src/babel'\nimport _transform, { transformSource as _transformSource } from './_transform'\n\nconst transform = (file, opts = {}) =>\n  _transform(file, {\n    plugins: [[plugin, opts]]\n  })\n\nconst transformSource = (src, opts = {}) =>\n  _transformSource(src.trim(), {\n    plugins: [[plugin, opts]],\n    ...opts\n  })\n\ntest('transpiles external stylesheets', async t => {\n  const { code } = await transform('./fixtures/styles.js')\n  t.snapshot(code)\n})\n\ntest('(optimized) transpiles external stylesheets', async t => {\n  const { code } = await transform('./fixtures/styles.js', {\n    optimizeForSpeed: true\n  })\n  t.snapshot(code)\n})\n\ntest('transpiles external stylesheets (CommonJS modules)', async t => {\n  const { code } = await transform('./fixtures/styles2.js')\n  t.snapshot(code)\n})\n\ntest('(optimized) transpiles external stylesheets (CommonJS modules)', async t => {\n  const { code } = await transform('./fixtures/styles2.js', {\n    optimizeForSpeed: true\n  })\n  t.snapshot(code)\n})\n\ntest('does not transpile non-styled-jsx tagged teplate literals', async t => {\n  const { code } = await transform(\n    './fixtures/not-styled-jsx-tagged-templates.js'\n  )\n  t.snapshot(code)\n})\n\ntest('throws when using `this.something` in external stylesheets', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transform('./fixtures/styles-external-invalid.js')\n  )\n  t.regex(message, /this\\.props/)\n})\n\ntest('throws when referring an undefined value in external stylesheets', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transform('./fixtures/styles-external-invalid2.js')\n  )\n  t.regex(message, /props\\.color/)\n})\n\ntest('use external stylesheets', async t => {\n  const { code } = await transform('./fixtures/external-stylesheet.js')\n  t.snapshot(code)\n})\n\ntest('use external stylesheets (multi-line)', async t => {\n  const { code } = await transform(\n    './fixtures/external-stylesheet-multi-line.js'\n  )\n  t.snapshot(code)\n})\n\ntest('use external stylesheets (global only)', async t => {\n  const { code } = await transform('./fixtures/external-stylesheet-global.js')\n  t.snapshot(code)\n})\n\ntest('injects JSXStyle for nested scope', async t => {\n  const { code } = await transformSource(`\n    import css from 'styled-jsx/css'\n\n    function test() {\n      css.resolve\\`div { color: red }\\`\n    }\n  `)\n  t.snapshot(code)\n})\n\ntest('use external stylesheet and dynamic element', async t => {\n  const { code } = await transform('./fixtures/dynamic-element-external.js')\n  t.snapshot(code)\n})\n\ntest('Makes sure that style nodes are not re-used', async t => {\n  const { code } = await transformSource(\n    `\n    import styles from './App.styles';\n\n    function Test() {\n      return <div>\n        <style jsx global>{styles}</style>\n      </div>\n    }\n      `,\n    {\n      babelrc: false,\n      plugins: [plugin, '@babel/plugin-transform-modules-commonjs']\n    }\n  )\n\n  t.snapshot(code)\n})\n\ntest('Make sure that it works with the new automatic transform', async t => {\n  const { code } = await transformSource(\n    `\n    import css from \"styled-jsx/css\";\n\n    const A = css.resolve\\`\n      div {\n        color: green;\n      }\n    \\`;\n\n    export default function IndexPage() {\n      return JSON.stringify(A);\n    }\n    `,\n    {\n      babelrc: false,\n      presets: [['@babel/preset-react', { runtime: 'automatic' }]],\n      plugins: [plugin]\n    }\n  )\n\n  t.snapshot(code)\n})\n"
  },
  {
    "path": "test/fixtures/absent.js",
    "content": "const a = () => (\n  <div>\n    <p>hi</p>\n    <style>{'woot'}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/attribute-generation-classname-rewriting.js",
    "content": "export default () => {\n  const Element = 'div'\n  return (\n    <div>\n      <div className=\"test\" {...test.test} />\n      <div className=\"test\" {...test.test.test} />\n      <div className=\"test\" {...this.test.test} />\n      <div data-test=\"test\" />\n      <div className=\"test\" />\n      <div className={'test'} />\n      <div className={`test`} />\n      <div className={`test${true ? ' test2' : ''}`} />\n      <div className={'test ' + test} />\n      <div className={['test', 'test2'].join(' ')} />\n      <div className={true && 'test'} />\n      <div className={test ? 'test' : null} />\n      <div className={test} />\n      <div className={test && 'test'} />\n      <div className={test && test('test')} />\n      <div className={undefined} />\n      <div className={null} />\n      <div className={false} />\n      <div className={'test'} data-test />\n      <div data-test className={'test'} />\n      <div className={'test'} data-test=\"test\" />\n      <div className={'test'} {...props} />\n      <div className={'test'} {...props} {...rest} />\n      <div className={`test ${test ? 'test' : ''}`} {...props} />\n      <div className={test && test('test')} {...props} />\n      <div className={test && test('test') && 'test'} {...props} />\n      <div className={test && test('test') && test2('test')} {...props} />\n      <div {...props} className={'test'} />\n      <div {...props} {...rest} className={'test'} />\n      <div {...props} className={'test'} {...rest} />\n      <div {...props} />\n      <div {...props} {...rest} />\n      <div {...props} data-foo {...rest} />\n      <div {...props} className={'test'} data-foo {...rest} />\n      <div {...{ id: 'foo' }} />\n      <div {...{ className: 'foo' }} />\n      <div {...{ className: 'foo' }} className=\"test\" />\n      <div className=\"test\" {...{ className: 'foo' }} />\n      <div {...{ className: 'foo' }} {...bar} />\n      <div {...{ className: 'foo' }} {...bar} className=\"test\" />\n      <div className=\"test\" {...{ className: 'foo' }} {...bar} />\n      <div className=\"test\" {...{ className: props.className }} />\n      <div className=\"test\" {...{ className: props.className }} {...bar} />\n      <div className=\"test\" {...bar} {...{ className: props.className }} />\n      <div className=\"test\" {...bar()} />\n      <Element />\n      <Element className=\"test\" />\n      <Element {...props} />\n      <style jsx>{'div { color: red }'}</style>\n    </div>\n  )\n}\n"
  },
  {
    "path": "test/fixtures/attribute-generation-modes.js",
    "content": "import styles from './styles'\n\nconst styles2 = require('./styles2')\n\n// external only\nexport const Test1 = () => (\n  <div>\n    <p>external only</p>\n    <style jsx>{styles}</style>\n    <style jsx>{styles2}</style>\n  </div>\n)\n\n// external and static\nexport const Test2 = () => (\n  <div>\n    <p>external and static</p>\n    <style jsx>{`\n      p {\n        color: red;\n      }\n    `}</style>\n    <style jsx>{styles}</style>\n  </div>\n)\n\n// external and dynamic\nexport const Test3 = ({ color }) => (\n  <div>\n    <p>external and dynamic</p>\n    <style jsx>{`\n      p {\n        color: ${color};\n      }\n    `}</style>\n    <style jsx>{styles}</style>\n  </div>\n)\n\n// external, static and dynamic\nexport const Test4 = ({ color }) => (\n  <div>\n    <p>external, static and dynamic</p>\n    <style jsx>{`\n      p {\n        display: inline-block;\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        color: ${color};\n      }\n    `}</style>\n    <style jsx>{styles}</style>\n  </div>\n)\n\n// static only\nexport const Test5 = () => (\n  <div>\n    <p>static only</p>\n    <style jsx>{`\n      p {\n        display: inline-block;\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n\n// static and dynamic\nexport const Test6 = ({ color }) => (\n  <div>\n    <p>static and dynamic</p>\n    <style jsx>{`\n      p {\n        display: inline-block;\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        color: ${color};\n      }\n    `}</style>\n  </div>\n)\n\n// dynamic only\nexport const Test7 = ({ color }) => (\n  <div>\n    <p>dynamic only</p>\n    <style jsx>{`\n      p {\n        color: ${color};\n      }\n    `}</style>\n  </div>\n)\n\n// dynamic with scoped compound variable\nexport const Test8 = ({ color }) => {\n  if (color) {\n    const innerProps = { color }\n\n    return (\n      <div>\n        <p>dynamic with scoped compound variable</p>\n        <style jsx>{`\n          p {\n            color: ${innerProps.color};\n          }\n        `}</style>\n      </div>\n    )\n  }\n}\n\n// dynamic with compound variable\nexport const Test9 = ({ color }) => {\n  const innerProps = { color }\n\n  return (\n    <div>\n      <p>dynamic with compound variable</p>\n      <style jsx>{`\n        p {\n          color: ${innerProps.color};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nconst foo = 'red'\n\n// dynamic with constant variable\nexport const Test10 = () => (\n  <div>\n    <p>dynamic with constant variable</p>\n    <style jsx>{`\n      p {\n        color: ${foo};\n      }\n    `}</style>\n  </div>\n)\n\n// dynamic with complex scope\nexport const Test11 = ({ color }) => {\n  const items = Array.from({ length: 5 }).map((item, i) => (\n    <li className=\"item\" key={i}>\n      <style jsx>{`\n        .item {\n          color: ${color};\n        }\n      `}</style>\n      Item #{i + 1}\n    </li>\n  ))\n\n  return <ul className=\"items\">{items}</ul>\n}\n"
  },
  {
    "path": "test/fixtures/class.js",
    "content": "export default class {\n  render() {\n    return (\n      <div>\n        <p>test</p>\n        <style jsx>{`\n          p {\n            color: red;\n          }\n        `}</style>\n      </div>\n    )\n  }\n}\n"
  },
  {
    "path": "test/fixtures/component-attribute.js",
    "content": "const Test = () => (\n  <div>\n    <span>test</span>\n    <Component />\n    <style jsx>{`\n      span {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/conflicts.js",
    "content": "export const _JSXStyle = '_JSXStyle-literal'\nexport default function() {\n  return (\n    <div>\n      <p>test</p>\n      <style jsx>{`\n        p {\n          color: red;\n        }\n      `}</style>\n    </div>\n  )\n}\n"
  },
  {
    "path": "test/fixtures/css-tag-same-file.js",
    "content": "import css from 'styled-jsx/css'\n\nexport default ({ children }) => (\n  <div>\n    <p>{children}</p>\n    <style jsx>{styles}</style>\n  </div>\n)\n\nconst styles = css`\n  p {\n    color: red;\n  }\n`\n\nclass Test extends React.Component {\n  render() {\n    return (\n      <div>\n        <p>{this.props.children}</p>\n        <style jsx>{styles}</style>\n      </div>\n    )\n  }\n}\n"
  },
  {
    "path": "test/fixtures/different-jsx-ids.js",
    "content": "const color = 'red'\nconst otherColor = 'green'\n\nconst A = () => (\n  <div>\n    <p>test</p>\n    <style jsx>{`\n      p {\n        color: ${color};\n      }\n    `}</style>\n  </div>\n)\n\nconst B = () => (\n  <div>\n    <p>test</p>\n    <style jsx>{`\n      p {\n        color: ${otherColor};\n      }\n    `}</style>\n  </div>\n)\n\nexport default () => (\n  <div>\n    <A />\n    <B />\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/dynamic-element-class.js",
    "content": "export default class {\n  render() {\n    const Element = 'div'\n\n    return (\n      <Element className=\"root\">\n        <p>dynamic element</p>\n        <style jsx>{`\n          .root {\n            background: red;\n          }\n        `}</style>\n      </Element>\n    )\n  }\n}\n\nconst Element2 = 'div'\nexport const Test2 = class {\n  render() {\n    return (\n      <Element2 className=\"root\">\n        <p>dynamic element</p>\n        <style jsx>{`\n          .root {\n            background: red;\n          }\n        `}</style>\n      </Element2>\n    )\n  }\n}\n"
  },
  {
    "path": "test/fixtures/dynamic-element-external.js",
    "content": "import styles from './styles2'\n\nexport default ({ level = 1 }) => {\n  const Element = `h${level}`\n\n  return (\n    <Element className=\"root\">\n      <p>dynamic element</p>\n      <style jsx>{styles}</style>\n    </Element>\n  )\n}\n"
  },
  {
    "path": "test/fixtures/dynamic-element.js",
    "content": "export default ({ level = 1 }) => {\n  const Element = `h${level}`\n\n  return (\n    <Element className=\"root\">\n      <p>dynamic element</p>\n      <style jsx>{`\n        .root {\n          background: red;\n        }\n      `}</style>\n    </Element>\n  )\n}\n\nexport const TestLowerCase = ({ level = 1 }) => {\n  const element = `h${level}`\n\n  return (\n    <element className=\"root\">\n      <p>dynamic element</p>\n      <style jsx>{`\n        .root {\n          background: red;\n        }\n      `}</style>\n    </element>\n  )\n}\n\nconst Element2 = 'div'\nexport const Test2 = () => {\n  return (\n    <Element2 className=\"root\">\n      <p>dynamic element</p>\n      <style jsx>{`\n        .root {\n          background: red;\n        }\n      `}</style>\n    </Element2>\n  )\n}\n"
  },
  {
    "path": "test/fixtures/dynamic-this-value-in-arrow.js",
    "content": "import React, { Component } from 'react'\n\nexport default class Index extends Component {\n  static getInitialProps() {\n    return { color: 'aquamarine' }\n  }\n\n  render() {\n    return (\n      <div>\n        {[1, 2].map(idx => (\n          <div key={idx}>\n            {[3, 4].map(idx2 => (\n              <div key={idx2}>{this.props.color}</div>\n            ))}\n          </div>\n        ))}\n        {[1, 2].map(idx => (\n          <div key={idx}>\n            <div>\n              {this.props.color}\n              <div className=\"something\">\n                <React.Fragment>\n                  <div>\n                    <div>{this.props.color} hello there</div>\n                  </div>\n                </React.Fragment>\n              </div>\n            </div>\n          </div>\n        ))}\n        <style jsx>{`\n          div {\n            background: ${this.props.color};\n          }\n        `}</style>\n      </div>\n    )\n  }\n}\n"
  },
  {
    "path": "test/fixtures/expressions.js",
    "content": "const darken = c => c\nconst color = 'red'\nconst otherColor = 'green'\nconst mediumScreen = '680px'\nconst animationDuration = '200ms'\nconst animationName = 'my-cool-animation'\nconst obj = { display: 'block' }\n\nexport default ({ display }) => (\n  <div>\n    <p>test</p>\n    <style jsx>{`\n      p.${color} {\n        color: ${otherColor};\n        display: ${obj.display};\n      }\n    `}</style>\n    <style jsx>{'p { color: red }'}</style>\n    <style jsx global>{`\n      body {\n        background: ${color};\n      }\n    `}</style>\n    <style jsx global>{`\n      body {\n        background: ${color};\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        color: ${color};\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        color: ${color};\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        color: ${darken(color)};\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        color: ${darken(color) + 2};\n      }\n    `}</style>\n    <style jsx>{`\n      @media (min-width: ${mediumScreen}) {\n        p {\n          color: green;\n        }\n        p {\n          color: ${`red`};\n        }\n      }\n      p {\n        color: red;\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        animation-duration: ${animationDuration};\n      }\n    `}</style>\n    <style jsx>{`\n      p {\n        animation: ${animationDuration} forwards ${animationName};\n      }\n      div {\n        background: ${color};\n      }\n    `}</style>\n\n    <style jsx>{`\n      span {\n        display: ${display ? 'block' : 'none'};\n      }\n    `}</style>\n    <style jsx>{`\n      span:before {\n        display: ${display ? 'block' : 'none'};\n        content: '\\`';\n      }\n    `}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/external-stylesheet-global.js",
    "content": "import styles, { foo as styles3 } from './styles'\n\nconst styles2 = require('./styles2')\n\nexport default () => (\n  <div>\n    <p>test</p>\n    <div>woot</div>\n    <p>woot</p>\n    <style jsx global>\n      {styles2}\n    </style>\n    <style jsx global>\n      {styles3}\n    </style>\n    <style jsx global>\n      {styles}\n    </style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/external-stylesheet-multi-line.js",
    "content": "import styles from './styles'\n\nexport default () => (\n  <div>\n    <p>test</p>\n    <style jsx>{styles}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/external-stylesheet.js",
    "content": "import styles from './styles'\nconst styles2 = require('./styles2')\nimport { foo as styles3 } from './styles'\n\nexport default () => (\n  <div>\n    <p className=\"foo\">test</p>\n    <p>woot</p>\n    <style jsx global>\n      {styles2}\n    </style>\n    <style jsx>{styles3}</style>\n    <div>woot</div>\n    <style jsx>{`\n      p {\n        color: red;\n      }\n      div {\n        color: green;\n      }\n    `}</style>\n    <style jsx>{styles}</style>\n  </div>\n)\n\nexport const Test = () => (\n  <div>\n    <p className=\"foo\">test</p>\n    <p>woot</p>\n    <style jsx>{styles3}</style>\n    <div>woot</div>\n    <style jsx>{`\n      p {\n        color: red;\n      }\n      div {\n        color: green;\n      }\n    `}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/fragment.js",
    "content": "import React from 'react'\n\nexport default () => (\n  <>\n    <p>Testing!!!</p>\n    <p className=\"foo\">Bar</p>\n    <>\n      <h3 id=\"head\">Title...</h3>\n      <React.Fragment>\n        <p>hello</p>\n        <>\n          <p>foo</p>\n          <p>bar</p>\n        </>\n        <p>world</p>\n      </React.Fragment>\n    </>\n    <style jsx>{`\n      p {\n        color: cyan;\n      }\n      .foo {\n        font-size: 18px;\n        color: hotpink;\n      }\n      #head {\n        text-decoration: underline;\n      }\n    `}</style>\n  </>\n)\n\nfunction Component1() {\n  return (\n    <>\n      <div>test</div>\n    </>\n  )\n}\n\nfunction Component2() {\n  return (\n    <div>\n      <style jsx>{`\n        div {\n          color: red;\n        }\n      `}</style>\n    </div>\n  )\n}\n"
  },
  {
    "path": "test/fixtures/global.js",
    "content": "const Test = () => (\n  <div>\n    <style jsx global>{`\n      body {\n        color: red;\n      }\n\n      :hover {\n        color: red;\n        display: flex;\n        animation: foo 1s ease-out;\n      }\n\n      div a {\n        display: none;\n      }\n\n      [data-test] > div {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n\nconst Test2 = () => (\n  <style global jsx>\n    {'p { color: red }'}\n  </style>\n)\n"
  },
  {
    "path": "test/fixtures/ignore.js",
    "content": "export default () => (\n  <div>\n    <p>test</p>\n    <style jsx>{`\n      p {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/macro.js",
    "content": "import css, { resolve } from '../../test/helpers/babel-test.macro'\n\nconst { className, styles } = resolve`\n  div { color: red }\n`\n\nconst dynamicStyles = props => resolve`\n  div { color: ${props.color} }\n`\n\nconst test = css.resolve`\n  div { color: red }\n`\n\nconst dynamicStyles2 = props => css.resolve`\n  div { color: ${props.color} }\n`\n\nconst ExampleComponent = props => {\n  const { className, styles } = dynamicStyles(props)\n\n  return (\n    <div className={className}>\n      howdy\n      {styles}\n    </div>\n  )\n}\n"
  },
  {
    "path": "test/fixtures/mixed-global-scoped.js",
    "content": "const Test = () => (\n  <style global jsx>\n    {'p { color: red }'}\n  </style>\n)\n\nexport default () => (\n  <div>\n    <p>test</p>\n    <style jsx global>{`\n      body {\n        background: red;\n      }\n    `}</style>\n    <style jsx>{'p { color: red }'}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/multiple-jsx.js",
    "content": "const attrs = {\n  id: 'test'\n}\n\nconst Test1 = () => (\n  <div>\n    <span {...attrs} data-test=\"test\">\n      test\n    </span>\n    <Component />\n    <style jsx>{`\n      span {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n\nconst Test2 = () => <span>test</span>\n\nconst Test3 = () => (\n  <div>\n    <span>test</span>\n    <style jsx>{`\n      span {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n\nexport default class {\n  render() {\n    return (\n      <div>\n        <p>test</p>\n        <style jsx>{`\n          p {\n            color: red;\n          }\n        `}</style>\n      </div>\n    )\n  }\n}\n"
  },
  {
    "path": "test/fixtures/nested-style-tags.js",
    "content": "import styles from './styles'\n\nexport default () => (\n  <div>\n    <span>\n      test\n      <style jsx>\n        {`\n          div {\n            color: red;\n          }\n        ` /* this should not be transpiled */}\n      </style>\n    </span>\n    <style jsx>{`\n      span {\n        color: red;\n      }\n    `}</style>\n  </div>\n)\n\nexport const Test = () => (\n  <div>\n    <span>\n      test\n      <style jsx>\n        {`\n          div {\n            color: red;\n          }\n        ` /* this should not be transpiled */}\n      </style>\n      <Component>\n        <style jsx>\n          {`\n            div {\n              color: red;\n            }\n          ` /* this should not be transpiled */}\n        </style>\n        <style jsx>{styles}</style> {/* this should not be transpiled */}\n      </Component>\n    </span>\n    <style jsx>{`\n      span {\n        color: red;\n      }\n    `}</style>\n    <style jsx>{styles}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/non-styled-jsx-style.js",
    "content": "export default () => (\n  <div>\n    <p>woot</p>\n    <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }} />\n    <style jsx>{'p { color: red }'}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/not-styled-jsx-tagged-templates.js",
    "content": "import css from 'hell'\n\nconst color = 'red'\n\nconst bar = css`\n  div {\n    font-size: 3em;\n  }\n`\nexport const uh = bar\n\nexport const foo = css`\n  div {\n    color: ${color};\n  }\n`\n\nexport default css`\n  div {\n    font-size: 3em;\n  }\n  p {\n    color: ${color};\n  }\n`\n\nconst Title = styled.h1`\n  color: red;\n  font-size: 50px;\n`\n\nconst AnotherTitle = Title.extend`\n  color: blue;\n`\n\nexport const Component = () => <AnotherTitle>My page</AnotherTitle>\n"
  },
  {
    "path": "test/fixtures/plugins/another-plugin.js",
    "content": "export default css => css.replace(/div/g, 'span')\n"
  },
  {
    "path": "test/fixtures/plugins/invalid-plugin.js",
    "content": "export default 'invalid'\n"
  },
  {
    "path": "test/fixtures/plugins/multiple-options.js",
    "content": "export default (css, settings) => {\n  let { babel, ...s } = settings\n  let { filename, ...b } = babel\n  s.babel = b\n  if (!filename) {\n    throw new Error('filename should be defined')\n  }\n  return `.test { content: \"${JSON.stringify(s)}\"; }`\n}\n"
  },
  {
    "path": "test/fixtures/plugins/options.js",
    "content": "export default (css, settings) => settings.test\n"
  },
  {
    "path": "test/fixtures/plugins/plugin.js",
    "content": "export default css => `TEST (${css}) EOTEST`\n"
  },
  {
    "path": "test/fixtures/simple-fragment.js",
    "content": "export default () => (\n  <>\n    <p>This should throw in babel 6</p>\n    <style jsx>{`\n      p {\n        color: orange;\n      }\n    `}</style>\n  </>\n)\n"
  },
  {
    "path": "test/fixtures/source-maps.js",
    "content": "export default () => (\n  <div>\n    <p>test</p>\n    <p>woot</p>\n    <style jsx>{'p { color: red }'}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/stateless.js",
    "content": "export default () => (\n  <div>\n    <p>test</p>\n    <p>woot</p>\n    <p>woot</p>\n    <style jsx>{'p { color: red }'}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/styles-external-invalid.js",
    "content": "import css from 'styled-jsx/css'\n\nconst color = 'red'\n\nexport const foo = css`\n  div {\n    color: ${color};\n  }\n`\n\nconst props = { color: 'red ' }\n\nexport default css`\n  div {\n    font-size: 3em;\n    color: ${props.color};\n  }\n  p {\n    color: ${this.props.color};\n  }\n`\n"
  },
  {
    "path": "test/fixtures/styles-external-invalid2.js",
    "content": "import css from 'styled-jsx/css'\n\nconst color = 'red'\n\nexport const foo = css`\n  div {\n    color: ${color};\n  }\n`\n\nexport default css`\n  div {\n    font-size: 3em;\n  }\n  p {\n    color: ${props.color};\n  }\n`\n"
  },
  {
    "path": "test/fixtures/styles.js",
    "content": "import css, { resolve, global } from 'styled-jsx/css'\nimport colors, { size } from './constants'\nconst color = 'red'\n\nconst bar = css`\n  div {\n    font-size: 3em;\n  }\n`\n\nconst baz = css.global`\n  div {\n    font-size: 3em;\n  }\n`\n\nconst a = global`\n  div {\n    font-size: ${size}em;\n  }\n`\n\nexport const uh = bar\n\nexport const foo = css`\n  div {\n    color: ${color};\n  }\n`\n\ncss.resolve`\n  div {\n    color: ${colors.green.light};\n  }\n  a { color: red }\n`\n\nconst b = resolve`\n  div {\n    color: ${colors.green.light};\n  }\n  a { color: red }\n`\n\nconst dynamic = colors => {\n  const b = resolve`\n    div {\n      color: ${colors.green.light};\n    }\n    a { color: red }\n  `\n}\n\nexport default css.resolve`\n  div {\n    font-size: 3em;\n  }\n  p {\n    color: ${color};\n  }\n`\n"
  },
  {
    "path": "test/fixtures/styles2.js",
    "content": "import css from 'styled-jsx/css'\n\nmodule.exports = css`\n  div {\n    font-size: 3em;\n  }\n`\n"
  },
  {
    "path": "test/fixtures/transform.css",
    "content": "html {\n  background-image: linear-gradient(\n      0deg,\n      rgba(255, 255, 255, 0.8),\n      rgba(255, 255, 255, 0.8)\n    ),\n    url(/static/background.svg);\n}\n\n:global(p) {\n  color: blue;\n}\n\n:global(p) {\n  color: blue;\n}\n\n:global(p),\na {\n  color: blue;\n}\n\n:global(.foo + a) {\n  color: red;\n}\n\n:global(body) {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,\n    sans-serif;\n}\n\np {\n  color: red;\n}\n\np {\n  color: red;\n}\n\n* {\n  color: blue;\n}\n\n[href='woot'] {\n  color: red;\n}\n\np a span {\n  color: red;\n}\n\np :global(span) {\n  background: blue;\n}\n\np a[title=\"'w ' '  t'\"] {\n  margin: auto;\n}\n\np :global(span:not(.test)) {\n  color: green;\n}\n\np,\nh1 {\n  color: blue;\n  animation: hahaha 3s ease forwards infinite;\n  animation-name: hahaha;\n  animation-delay: 100ms;\n}\n\np {\n  animation: hahaha 1s, hehehe 2s;\n}\n\np:hover {\n  color: red;\n}\n\np::before {\n  color: red;\n}\n\n:hover {\n  color: red;\n}\n\n::before {\n  color: red;\n}\n\n:hover p {\n  color: red;\n}\n\np + a {\n  color: red;\n}\n\np ~ a {\n  color: red;\n}\n\np > a {\n  color: red;\n}\n\n@keyframes hahaha {\n  from {\n    top: 0;\n  }\n  to {\n    top: 100;\n  }\n}\n\n@keyframes hehehe {\n  from {\n    left: 0;\n  }\n  to {\n    left: 100;\n  }\n}\n\n@media (min-width: 500px) {\n  .test {\n    color: red;\n  }\n}\n\n.test {\n  /* test, test */\n  display: block;\n  /*\n\ntest\n  */\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.flex {\n  display: flex;\n}\n\n.test {\n  box-shadow: 0 0 10px black, inset 0 0 5px black;\n}\n\n.test[title=','] {\n  display: inline-block;\n}\n\n.test.is-status .test {\n  color: red;\n}\n\n.a-selector:hover,\n.a-selector:focus {\n  outline: none;\n}\n\n@media (min-width: 1px) and (max-width: 768px) {\n  [class*='grid__col--'] {\n    margin-top: 12px;\n    margin-bottom: 12px;\n  }\n}\n\n@media (max-width: 64em) {\n  .test {\n    margin-bottom: 1em;\n  }\n  @supports (-moz-appearance: none) and (display: contents) {\n    .test {\n      margin-bottom: 2rem;\n    }\n  }\n}\n"
  },
  {
    "path": "test/fixtures/whitespace.js",
    "content": "export default () => (\n  <div>\n    <p>test</p>\n    <p>woot</p>\n    <p>woot</p>\n    <style jsx>{'p { color: red }'}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/fixtures/with-plugins.js",
    "content": "import styles from './styles'\nconst color = 'red'\n\nexport default () => (\n  <div>\n    <p>test</p>\n    <style jsx>{`\n      div.${color} {\n        color: ${otherColor};\n      }\n    `}</style>\n    <style jsx>{styles}</style>\n  </div>\n)\n"
  },
  {
    "path": "test/helpers/babel-test.macro.js",
    "content": "import { macro } from '../../src/babel'\n\nconst m = macro()\nconsole.log('m', m)\nexport default m\n"
  },
  {
    "path": "test/helpers/with-mock.js",
    "content": "export default function withMock(mockFn, testFn) {\n  return t => {\n    const cleanUp = mockFn(t)\n    if (typeof cleanUp !== 'function') {\n      throw new TypeError('mockFn should return a cleanup function')\n    }\n\n    testFn(t)\n    cleanUp(t)\n  }\n}\n\nexport function withMockDocument(t) {\n  const originalDocument = globalThis.document\n  // We need to stub a document in order to simulate the meta tag\n  globalThis.document = {\n    querySelector(query) {\n      t.is(query, 'meta[property=\"csp-nonce\"]')\n      return {\n        getAttribute(attr) {\n          t.is(attr, 'content')\n          return 'test-nonce'\n        }\n      }\n    }\n  }\n\n  return () => {\n    globalThis.document = originalDocument\n  }\n}\n"
  },
  {
    "path": "test/index.js",
    "content": "// Packages\nimport test from 'ava'\nimport React from 'react'\nimport ReactDOM from 'react-dom/server'\n\n// Ours\nimport plugin from '../src/babel'\nimport JSXStyle from '../src/style'\nimport {\n  StyleRegistry,\n  useStyleRegistry,\n  createStyleRegistry\n} from '../src/stylesheet-registry'\nimport _transform, { transformSource as _transformSource } from './_transform'\n\nconst flushToHTML = (registry, options = {}) => {\n  const cssRules = registry.cssRules()\n  registry.flush()\n  return cssRules.reduce((html, args) => {\n    const id = args[0]\n    const css = args[1]\n    html += `<style id=\"__${id}\"${\n      options.nonce ? ` nonce=\"${options.nonce}\"` : ''\n    }>${css}</style>`\n    return html\n  }, '')\n}\n\nfunction mapCssRulesToReact(cssRules, options = {}) {\n  return cssRules.map(args => {\n    const id = args[0]\n    const css = args[1]\n    return React.createElement('style', {\n      id: `__${id}`,\n      // Avoid warnings upon render with a key\n      key: `__${id}`,\n      nonce: options.nonce ? options.nonce : undefined,\n      dangerouslySetInnerHTML: {\n        __html: css\n      }\n    })\n  })\n}\n\nfunction flushToReact(registry, options = {}) {\n  const cssRules = registry.cssRules()\n  registry.flush()\n  return mapCssRulesToReact(cssRules, options)\n}\n\nconst transform = (file, opts = {}) =>\n  _transform(file, {\n    plugins: [plugin],\n    ...opts\n  })\n\nconst transformSource = (src, opts = {}) =>\n  _transformSource(src.trim(), {\n    plugins: [[plugin, opts]],\n    ...opts\n  })\n\ntest('handles dynamic `this` value inside of arrow function', async t => {\n  const { code } = await transform(\n    './fixtures/dynamic-this-value-in-arrow.js',\n    {\n      plugins: ['@babel/plugin-transform-arrow-functions', plugin]\n    }\n  )\n  t.snapshot(code)\n})\n\ntest('works with stateless', async t => {\n  const { code } = await transform('./fixtures/stateless.js')\n  t.snapshot(code)\n})\n\ntest('works with fragment', async t => {\n  const { code } = await transform('./fixtures/fragment.js')\n  t.snapshot(code)\n})\n\ntest('ignores whitespace around expression container', async t => {\n  const { code } = await transform('./fixtures/whitespace.js')\n  t.snapshot(code)\n})\n\ntest('works with class', async t => {\n  const { code } = await transform('./fixtures/class.js')\n  t.snapshot(code)\n})\n\ntest('ignores when attribute is absent', async t => {\n  const { code } = await transform('./fixtures/absent.js')\n  t.snapshot(code)\n})\n\ntest('works with global styles', async t => {\n  const { code } = await transform('./fixtures/global.js')\n  t.snapshot(code)\n})\n\ntest('generates source maps', async t => {\n  const { code } = await transform('./fixtures/source-maps.js', {\n    plugins: [[plugin, { sourceMaps: true }]]\n  })\n  t.snapshot(code)\n})\n\ntest('mixed global and scoped', async t => {\n  const { code } = await transform('./fixtures/mixed-global-scoped.js')\n  t.snapshot(code)\n})\n\ntest('works with multiple jsx blocks', async t => {\n  const { code } = await transform('./fixtures/multiple-jsx.js')\n  t.snapshot(code)\n})\n\ntest('should not add the data-jsx attribute to components instances', async t => {\n  const { code } = await transform('./fixtures/component-attribute.js')\n  t.snapshot(code)\n})\n\ntest('works with expressions in template literals', async t => {\n  const { code } = await transform('./fixtures/expressions.js')\n  t.snapshot(code)\n})\n\ntest('should have different jsx ids', async t => {\n  const { code } = await transform('./fixtures/different-jsx-ids.js')\n  t.snapshot(code)\n})\n\ntest('works with non styled-jsx styles', async t => {\n  const { code } = await transform('./fixtures/non-styled-jsx-style.js')\n  t.snapshot(code)\n})\n\ntest('works with css tagged template literals in the same file', async t => {\n  const { code } = await transform('./fixtures/css-tag-same-file.js')\n  t.snapshot(code)\n})\n\ntest('works with dynamic element', async t => {\n  const { code } = await transform('./fixtures/dynamic-element.js')\n  t.snapshot(code)\n})\n\ntest('works with dynamic element in class', async t => {\n  const { code } = await transform('./fixtures/dynamic-element-class.js')\n  t.snapshot(code)\n})\n\ntest('works with existing identifier for _JSXStyle', async t => {\n  const { code } = await transform('./fixtures/conflicts.js')\n  t.snapshot(code)\n})\n\ntest('does not transpile nested style tags', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transform('./fixtures/nested-style-tags.js')\n  )\n  t.regex(message, /detected nested style tag/i)\n})\n\ntest('works with exported jsx-style (CommonJS modules)', async t => {\n  const { code } = await transformSource(\n    'module.exports = () => <p><style jsx>{`p { color:red; }`}</style></p>',\n    {\n      plugins: [plugin, '@babel/plugin-transform-modules-commonjs']\n    }\n  )\n  t.snapshot(code)\n})\n\ntest('works with exported non-jsx style (CommonJS modules)', async t => {\n  const { code } = await transformSource(\n    'module.exports = () => <p><style>{`p { color:red; }`}</style></p>',\n    {\n      plugins: [plugin, '@babel/plugin-transform-modules-commonjs']\n    }\n  )\n  t.snapshot(code)\n})\n\ntest('sever rendering with hook api', t => {\n  const registry = createStyleRegistry()\n  function Head() {\n    const registry = useStyleRegistry()\n    const styles = registry.styles()\n    registry.flush()\n    // should be empty and `push` won't effect styles\n    const stylesAfterFlushed = registry.styles()\n    styles.push(...stylesAfterFlushed)\n    return React.createElement('head', null, styles)\n  }\n\n  function App() {\n    const color = 'green'\n    return React.createElement(\n      'div',\n      null,\n      React.createElement(Head),\n      React.createElement(JSXStyle, { id: 2 }, 'div { color: blue }'),\n      React.createElement(JSXStyle, { id: 3 }, `div { color: ${color} }`)\n    )\n  }\n\n  // Expected DOM string\n  const styles =\n    '<style id=\"__jsx-2\">div { color: blue }</style>' +\n    '<style id=\"__jsx-3\">div { color: green }</style>'\n\n  const expected = `<head>${styles}</head>`\n\n  const createContextualApp = type =>\n    React.createElement(StyleRegistry, { registry }, React.createElement(type))\n\n  // Render using react\n  ReactDOM.renderToString(createContextualApp(App))\n  const html = ReactDOM.renderToStaticMarkup(createContextualApp(Head))\n  t.is(html, expected)\n})\n\ntest('server rendering', t => {\n  function App() {\n    const color = 'green'\n    return React.createElement(\n      'div',\n      null,\n      React.createElement(\n        JSXStyle,\n        {\n          id: 1\n        },\n        'p { color: red }'\n      ),\n      React.createElement(\n        JSXStyle,\n        {\n          id: 2\n        },\n        'div { color: blue }'\n      ),\n      React.createElement(\n        JSXStyle,\n        {\n          id: 3\n        },\n        `div { color: ${color} }`\n      )\n    )\n  }\n\n  // Expected CSS\n  const expected =\n    '<style id=\"__jsx-1\">p { color: red }</style>' +\n    '<style id=\"__jsx-2\">div { color: blue }</style>' +\n    '<style id=\"__jsx-3\">div { color: green }</style>'\n\n  const registry = createStyleRegistry()\n  const createApp = () =>\n    React.createElement(StyleRegistry, { registry }, React.createElement(App))\n\n  // Render using react\n  ReactDOM.renderToString(createApp())\n  const html = ReactDOM.renderToStaticMarkup(\n    React.createElement('head', null, flushToReact(registry))\n  )\n\n  t.is(html, `<head>${expected}</head>`)\n\n  // Assert that memory is empty\n  t.is(0, registry.cssRules().length)\n  t.is('', flushToHTML(registry))\n\n  // Render to html again\n  ReactDOM.renderToString(createApp())\n  t.is(expected, flushToHTML(registry))\n\n  // Assert that memory is empty\n  t.is(0, flushToReact(registry).length)\n  t.is('', flushToHTML(registry))\n})\n\ntest('server rendering with nonce', t => {\n  function App() {\n    const color = 'green'\n    return React.createElement(\n      'div',\n      null,\n      React.createElement(\n        JSXStyle,\n        {\n          id: 1\n        },\n        'p { color: red }'\n      ),\n      React.createElement(\n        JSXStyle,\n        {\n          id: 2\n        },\n        'div { color: blue }'\n      ),\n      React.createElement(\n        JSXStyle,\n        {\n          id: 3\n        },\n        `div { color: ${color} }`\n      )\n    )\n  }\n\n  const registry = createStyleRegistry()\n  const createApp = () =>\n    React.createElement(StyleRegistry, { registry }, React.createElement(App))\n\n  // Expected CSS\n  const expected =\n    '<style id=\"__jsx-1\" nonce=\"test-nonce\">p { color: red }</style>' +\n    '<style id=\"__jsx-2\" nonce=\"test-nonce\">div { color: blue }</style>' +\n    '<style id=\"__jsx-3\" nonce=\"test-nonce\">div { color: green }</style>'\n\n  // Render using react\n  ReactDOM.renderToString(createApp())\n  const html = ReactDOM.renderToStaticMarkup(\n    React.createElement(\n      'head',\n      null,\n      flushToReact(registry, { nonce: 'test-nonce' })\n    )\n  )\n\n  t.is(html, `<head>${expected}</head>`)\n\n  // Assert that memory is empty\n  t.is(0, flushToReact(registry, { nonce: 'test-nonce' }).length)\n  t.is('', flushToHTML(registry, { nonce: 'test-nonce' }))\n\n  // Render to html again\n  ReactDOM.renderToString(createApp())\n  t.is(expected, flushToHTML(registry, { nonce: 'test-nonce' }))\n\n  // Assert that memory is empty\n  t.is(0, flushToReact(registry, { nonce: 'test-nonce' }).length)\n  t.is('', flushToHTML(registry, { nonce: 'test-nonce' }))\n})\n\ntest('optimized styles do not contain new lines', t => {\n  function App() {\n    return React.createElement(\n      'div',\n      null,\n      React.createElement(\n        JSXStyle,\n        {\n          id: 1\n        },\n        ['p { color: red }', '.foo { color: hotpink }']\n      )\n    )\n  }\n\n  const registry = createStyleRegistry()\n  const createApp = () =>\n    React.createElement(StyleRegistry, { registry }, React.createElement(App))\n\n  ReactDOM.renderToString(createApp())\n  const html = ReactDOM.renderToStaticMarkup(\n    React.createElement('head', null, flushToReact(registry))\n  )\n  const expected =\n    '<style id=\"__jsx-1\">p { color: red }.foo { color: hotpink }</style>'\n\n  t.is(html, `<head>${expected}</head>`)\n})\n"
  },
  {
    "path": "test/index.ts",
    "content": "import {} from 'styled-jsx'\n"
  },
  {
    "path": "test/macro.js",
    "content": "// Packages\nimport test from 'ava'\n\n// Ours\nimport macros from 'babel-plugin-macros'\nimport jsx from '@babel/plugin-syntax-jsx'\nimport _transform, { transformSource as _transformSource } from './_transform'\n\nconst transform = (file, opts = {}) =>\n  _transform(file, {\n    plugins: [macros, jsx],\n    ...opts\n  })\n\nconst transformSource = (src, opts = {}) =>\n  _transformSource(src.trim(), {\n    filename: './index.js',\n    plugins: [macros, jsx],\n    ...opts\n  })\n\ntest('transpiles correctly', async t => {\n  const { code } = await transform('./fixtures/macro.js')\n  t.snapshot(code)\n})\n\ntest('throws when using the default export directly', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transformSource(`\n    import css from './test/helpers/babel-test.macro'\n\n    css\\`div { color: red }\\`\n  `)\n  )\n\n  t.regex(message, /can't use default import directly/i)\n})\n\ntest('throws when using the default export directly and it is not called css', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transformSource(`\n    import foo from './test/helpers/babel-test.macro'\n\n    foo\\`div { color: red }\\`\n  `)\n  )\n\n  t.regex(message, /can't use default import directly/i)\n})\n\ntest('throws when using the default export directly and it is not called resolve', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transformSource(`\n    import resolve from './test/helpers/babel-test.macro'\n\n    resolve\\`div { color: red }\\`\n  `)\n  )\n\n  t.regex(message, /can't use default import directly/i)\n})\n\ntest('throws when using an invalid method from the default export', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transformSource(`\n    import css from './test/helpers/babel-test.macro'\n\n    css.foo\\`div { color: red }\\`\n  `)\n  )\n\n  t.regex(message, /using an invalid tag/i)\n})\n\ntest('throws when using a named import different than resolve', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transformSource(`\n    import { foo } from './test/helpers/babel-test.macro'\n\n    foo\\`div { color: red }\\`\n  `)\n  )\n\n  t.regex(message, /imported an invalid named import/i)\n})\n\ntest('throws when using a named import as a member expression', async t => {\n  const { message } = await t.throwsAsync(() =>\n    transformSource(`\n    import { resolve } from './test/helpers/babel-test.macro'\n\n    resolve.foo\\`div { color: red }\\`\n  `)\n  )\n\n  t.regex(message, /can't use named import/i)\n})\n\ntest('can alias the named import', async t => {\n  const { code } = await transformSource(`\n    import { resolve as foo } from './test/helpers/babel-test.macro'\n\n    foo\\`div { color: red }\\`\n  `)\n  t.snapshot(code)\n})\n\ntest('injects JSXStyle for nested scope', async t => {\n  const { code } = await transformSource(`\n    import { resolve } from './test/helpers/babel-test.macro'\n\n    function test() {\n      resolve\\`div { color: red }\\`\n    }\n  `)\n  t.snapshot(code)\n})\n"
  },
  {
    "path": "test/plugins.js",
    "content": "// Packages\nimport test from 'ava'\n\n// Ours\nimport babelPlugin from '../src/babel'\nimport babelTestPlugin from '../src/babel-test'\nimport { combinePlugins } from '../src/_utils'\nimport _transform from './_transform'\nimport testPlugin1 from './fixtures/plugins/plugin'\nimport testPlugin2 from './fixtures/plugins/another-plugin'\n\nconst transform = (file, opts = {}) =>\n  _transform(file, {\n    plugins: [\n      [\n        babelPlugin,\n        { plugins: [require.resolve('./fixtures/plugins/another-plugin')] }\n      ]\n    ],\n    ...opts\n  })\n\ntest('combinePlugins returns an identity function when plugins is undefined', t => {\n  const test = 'test'\n  const plugins = combinePlugins()\n  t.is(plugins(test), test)\n})\n\ntest('combinePlugins throws if plugins is not an array', t => {\n  t.throws(() => {\n    combinePlugins(2)\n  })\n})\n\ntest('combinePlugins throws if plugins is not an array of strings', t => {\n  t.throws(() => {\n    combinePlugins(['test', 2])\n  })\n})\n\ntest('combinePlugins throws if loaded plugins are not functions', t => {\n  t.throws(() => {\n    combinePlugins([\n      require.resolve('./fixtures/plugins/plugin'),\n      require.resolve('./fixtures/plugins/invalid-plugin')\n    ])\n  })\n})\n\ntest('combinePlugins works with a single plugin', t => {\n  const plugins = combinePlugins([require.resolve('./fixtures/plugins/plugin')])\n\n  t.is(testPlugin1('test'), plugins('test'))\n})\n\ntest('combinePlugins works with options', t => {\n  const expectedOption = 'my-test'\n  const plugins = combinePlugins([\n    [\n      require.resolve('./fixtures/plugins/options'),\n      {\n        test: expectedOption\n      }\n    ]\n  ])\n  t.is(plugins(''), expectedOption)\n})\n\ntest('combinePlugins applies plugins left to right', t => {\n  const plugins = combinePlugins([\n    require.resolve('./fixtures/plugins/plugin'),\n    require.resolve('./fixtures/plugins/another-plugin')\n  ])\n\n  t.is(testPlugin2(testPlugin1('test')), plugins('test'))\n})\n\ntest('applies plugins', async t => {\n  const { code } = await transform('./fixtures/with-plugins.js')\n  t.snapshot(code)\n})\n\ntest('babel-test plugin strips jsx attribute', async t => {\n  const { code } = await transform('./fixtures/with-plugins.js', {\n    plugins: [babelTestPlugin]\n  })\n\n  t.snapshot(code)\n})\n\ntest('passes options to plugins', async t => {\n  const { code } = await transform('./fixtures/with-plugins.js', {\n    plugins: [\n      [\n        babelPlugin,\n        {\n          plugins: [\n            [require.resolve('./fixtures/plugins/options'), { foo: true }],\n            require.resolve('./fixtures/plugins/multiple-options'),\n            [\n              require.resolve('./fixtures/plugins/multiple-options'),\n              { foo: false }\n            ]\n          ],\n          vendorPrefixes: false\n        }\n      ]\n    ]\n  })\n  t.snapshot(code)\n})\n\ntest('combinePlugins throws if passing an option called `babel`', t => {\n  t.throws(() => {\n    combinePlugins([['test', { babel: true }]])\n  })\n})\n\ntest('combinePlugins memoizes calls', t => {\n  const v1 = combinePlugins([require.resolve('./fixtures/plugins/plugin')])\n  const v2 = combinePlugins([require.resolve('./fixtures/plugins/plugin')])\n\n  t.is(v1('test div'), v2('test div'))\n\n  const v3 = combinePlugins([\n    require.resolve('./fixtures/plugins/plugin'),\n    require.resolve('./fixtures/plugins/another-plugin')\n  ])\n\n  t.not(v2('test div'), v3('test div'))\n})\n"
  },
  {
    "path": "test/snapshots/attribute.js.md",
    "content": "# Snapshot report for `test/attribute.js`\n\nThe actual snapshot is saved in `attribute.js.snap`.\n\nGenerated by [AVA](https://avajs.dev).\n\n## rewrites className\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default (() => {␊\n      const Element = 'div';␊\n      return <div className={\"jsx-2886504620\"}>␊\n          <div {...test.test} className={\"jsx-2886504620\" + \" \" + (test.test && test.test.className != null && test.test.className || \"test\")} />␊\n          <div {...test.test.test} className={\"jsx-2886504620\" + \" \" + (test.test.test && test.test.test.className != null && test.test.test.className || \"test\")} />␊\n          <div {...this.test.test} className={\"jsx-2886504620\" + \" \" + (this.test.test && this.test.test.className != null && this.test.test.className || \"test\")} />␊\n          <div data-test=\"test\" className={\"jsx-2886504620\"} />␊\n          <div className={\"jsx-2886504620\" + \" \" + \"test\"} />␊\n          <div className={\"jsx-2886504620\" + \" \" + 'test'} />␊\n          <div className={\"jsx-2886504620\" + \" \" + \\`test\\`} />␊\n          <div className={\"jsx-2886504620\" + \" \" + \\`test${true ? ' test2' : ''}\\`} />␊\n          <div className={\"jsx-2886504620\" + \" \" + ('test ' + test || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (['test', 'test2'].join(' ') || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (true && 'test' || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + ((test ? 'test' : null) || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (test || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (test && 'test' || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (test && test('test') || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (undefined || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (null || \"\")} />␊\n          <div className={\"jsx-2886504620\" + \" \" + (false || \"\")} />␊\n          <div data-test className={\"jsx-2886504620\" + \" \" + 'test'} />␊\n          <div data-test className={\"jsx-2886504620\" + \" \" + 'test'} />␊\n          <div data-test=\"test\" className={\"jsx-2886504620\" + \" \" + 'test'} />␊\n          <div {...props} className={\"jsx-2886504620\" + \" \" + (props && props.className != null && props.className || 'test')} />␊\n          <div {...props} {...rest} className={\"jsx-2886504620\" + \" \" + (rest && rest.className != null && rest.className || props && props.className != null && props.className || 'test')} />␊\n          <div {...props} className={\"jsx-2886504620\" + \" \" + (props && props.className != null && props.className || \\`test ${test ? 'test' : ''}\\`)} />␊\n          <div {...props} className={\"jsx-2886504620\" + \" \" + (props && props.className != null && props.className || test && test('test') || \"\")} />␊\n          <div {...props} className={\"jsx-2886504620\" + \" \" + (props && props.className != null && props.className || test && test('test') && 'test' || \"\")} />␊\n          <div {...props} className={\"jsx-2886504620\" + \" \" + (props && props.className != null && props.className || test && test('test') && test2('test') || \"\")} />␊\n          <div {...props} className={\"jsx-2886504620\" + \" \" + 'test'} />␊\n          <div {...props} {...rest} className={\"jsx-2886504620\" + \" \" + 'test'} />␊\n          <div {...props} {...rest} className={\"jsx-2886504620\" + \" \" + (rest && rest.className != null && rest.className || 'test')} />␊\n          <div {...props} className={\"jsx-2886504620\" + \" \" + (props && props.className != null && props.className || \"\")} />␊\n          <div {...props} {...rest} className={\"jsx-2886504620\" + \" \" + (rest && rest.className != null && rest.className || props && props.className != null && props.className || \"\")} />␊\n          <div {...props} data-foo {...rest} className={\"jsx-2886504620\" + \" \" + (rest && rest.className != null && rest.className || props && props.className != null && props.className || \"\")} />␊\n          <div {...props} data-foo {...rest} className={\"jsx-2886504620\" + \" \" + (rest && rest.className != null && rest.className || 'test')} />␊\n          <div {...{␊\n          id: 'foo'␊\n        }} className={\"jsx-2886504620\"} />␊\n          <div className={\"jsx-2886504620\" + \" \" + 'foo'} />␊\n          <div {...{␊\n          className: 'foo'␊\n        }} className={\"jsx-2886504620\" + \" \" + \"test\"} />␊\n          <div className=\"test\" className={\"jsx-2886504620\" + \" \" + 'foo'} />␊\n          <div {...bar} className={\"jsx-2886504620\" + \" \" + (bar && bar.className != null && bar.className || 'foo')} />␊\n          <div {...{␊\n          className: 'foo'␊\n        }} {...bar} className={\"jsx-2886504620\" + \" \" + \"test\"} />␊\n          <div className=\"test\" {...bar} className={\"jsx-2886504620\" + \" \" + (bar && bar.className != null && bar.className || 'foo')} />␊\n          <div className=\"test\" className={\"jsx-2886504620\" + \" \" + (props.className || \"\")} />␊\n          <div className=\"test\" {...bar} className={\"jsx-2886504620\" + \" \" + (bar && bar.className != null && bar.className || props.className || \"\")} />␊\n          <div className=\"test\" {...bar} className={\"jsx-2886504620\" + \" \" + (props.className || \"\")} />␊\n          <div {...bar()} className={\"jsx-2886504620\" + \" \" + \"test\"} />␊\n          <Element className={\"jsx-2886504620\"} />␊\n          <Element className={\"jsx-2886504620\" + \" \" + \"test\"} />␊\n          <Element {...props} className={\"jsx-2886504620\" + \" \" + (props && props.className != null && props.className || \"\")} />␊\n          <_JSXStyle id={\"2886504620\"}>{\"div.jsx-2886504620{color:red;}\"}</_JSXStyle>␊\n        </div>;␊\n    });`\n\n## generate attribute for mixed modes (global, static, dynamic)\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import styles from './styles';␊\n    ␊\n    const styles2 = require('./styles2'); // external only␊\n    ␊\n    ␊\n    export const Test1 = () => <div className={\\`jsx-${styles.__hash} jsx-${styles2.__hash}\\`}>␊\n        <p className={\\`jsx-${styles.__hash} jsx-${styles2.__hash}\\`}>external only</p>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n        <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>␊\n      </div>; // external and static␊\n    ␊\n    export const Test2 = () => <div className={\"jsx-2982525546 \" + \\`jsx-${styles.__hash}\\`}>␊\n        <p className={\"jsx-2982525546 \" + \\`jsx-${styles.__hash}\\`}>external and static</p>␊\n        <_JSXStyle id={\"2982525546\"}>{\"p.jsx-2982525546{color:red;}\"}</_JSXStyle>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>; // external and dynamic␊\n    ␊\n    export const Test3 = ({␊\n      color␊\n    }) => <div className={\\`jsx-${styles.__hash}\\` + \" \" + _JSXStyle.dynamic([[\"1947484460\", [color]]])}>␊\n        <p className={\\`jsx-${styles.__hash}\\` + \" \" + _JSXStyle.dynamic([[\"1947484460\", [color]]])}>external and dynamic</p>␊\n        <_JSXStyle id={\"1947484460\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:${color};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>; // external, static and dynamic␊\n    ␊\n    export const Test4 = ({␊\n      color␊\n    }) => <div className={\\`jsx-${styles.__hash}\\` + \" jsx-3190985107 \" + _JSXStyle.dynamic([[\"1336444426\", [color]]])}>␊\n        <p className={\\`jsx-${styles.__hash}\\` + \" jsx-3190985107 \" + _JSXStyle.dynamic([[\"1336444426\", [color]]])}>external, static and dynamic</p>␊\n        <_JSXStyle id={\"3190985107\"}>{\"p.jsx-3190985107{display:inline-block;}\"}</_JSXStyle>␊\n        <_JSXStyle id={\"1336444426\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:${color};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>; // static only␊\n    ␊\n    export const Test5 = () => <div className={\"jsx-1372669040\"}>␊\n        <p className={\"jsx-1372669040\"}>static only</p>␊\n        <_JSXStyle id={\"3190985107\"}>{\"p.jsx-1372669040{display:inline-block;}\"}</_JSXStyle>␊\n        <_JSXStyle id={\"2982525546\"}>{\"p.jsx-1372669040{color:red;}\"}</_JSXStyle>␊\n      </div>; // static and dynamic␊\n    ␊\n    export const Test6 = ({␊\n      color␊\n    }) => <div className={\"jsx-3190985107 \" + _JSXStyle.dynamic([[\"1336444426\", [color]]])}>␊\n        <p className={\"jsx-3190985107 \" + _JSXStyle.dynamic([[\"1336444426\", [color]]])}>static and dynamic</p>␊\n        <_JSXStyle id={\"3190985107\"}>{\"p.jsx-3190985107{display:inline-block;}\"}</_JSXStyle>␊\n        <_JSXStyle id={\"1336444426\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:${color};}\\`}</_JSXStyle>␊\n      </div>; // dynamic only␊\n    ␊\n    export const Test7 = ({␊\n      color␊\n    }) => <div className={_JSXStyle.dynamic([[\"1947484460\", [color]]])}>␊\n        <p className={_JSXStyle.dynamic([[\"1947484460\", [color]]])}>dynamic only</p>␊\n        <_JSXStyle id={\"1947484460\"} dynamic={[color]}>{\\`p.__jsx-style-dynamic-selector{color:${color};}\\`}</_JSXStyle>␊\n      </div>; // dynamic with scoped compound variable␊\n    ␊\n    export const Test8 = ({␊\n      color␊\n    }) => {␊\n      if (color) {␊\n        const innerProps = {␊\n          color␊\n        };␊\n        return <div className={_JSXStyle.dynamic([[\"1791723528\", [innerProps.color]]])}>␊\n            <p className={_JSXStyle.dynamic([[\"1791723528\", [innerProps.color]]])}>dynamic with scoped compound variable</p>␊\n            <_JSXStyle id={\"1791723528\"} dynamic={[innerProps.color]}>{\\`p.__jsx-style-dynamic-selector{color:${innerProps.color};}\\`}</_JSXStyle>␊\n          </div>;␊\n      }␊\n    }; // dynamic with compound variable␊\n    ␊\n    export const Test9 = ({␊\n      color␊\n    }) => {␊\n      const innerProps = {␊\n        color␊\n      };␊\n      return <div className={_JSXStyle.dynamic([[\"248922593\", [innerProps.color]]])}>␊\n          <p className={_JSXStyle.dynamic([[\"248922593\", [innerProps.color]]])}>dynamic with compound variable</p>␊\n          <_JSXStyle id={\"248922593\"} dynamic={[innerProps.color]}>{\\`p.__jsx-style-dynamic-selector{color:${innerProps.color};}\\`}</_JSXStyle>␊\n        </div>;␊\n    };␊\n    const foo = 'red'; // dynamic with constant variable␊\n    ␊\n    export const Test10 = () => <div className={\"jsx-461505126\"}>␊\n        <p className={\"jsx-461505126\"}>dynamic with constant variable</p>␊\n        <_JSXStyle id={\"461505126\"}>{\\`p.jsx-461505126{color:${foo};}\\`}</_JSXStyle>␊\n      </div>; // dynamic with complex scope␊\n    ␊\n    export const Test11 = ({␊\n      color␊\n    }) => {␊\n      const items = Array.from({␊\n        length: 5␊\n      }).map((item, i) => <li key={i} className={_JSXStyle.dynamic([[\"2172653867\", [color]]]) + \" \" + \"item\"}>␊\n          <_JSXStyle id={\"2172653867\"} dynamic={[color]}>{\\`.item.__jsx-style-dynamic-selector{color:${color};}\\`}</_JSXStyle>␊\n          Item #{i + 1}␊\n        </li>);␊\n      return <ul className=\"items\">{items}</ul>;␊\n    };`\n"
  },
  {
    "path": "test/snapshots/external.js.md",
    "content": "# Snapshot report for `test/external.js`\n\nThe actual snapshot is saved in `external.js.snap`.\n\nGenerated by [AVA](https://avajs.dev).\n\n## transpiles external stylesheets\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import colors, { size } from './constants';␊\n    const color = 'red';␊\n    const bar = new String(\"div.jsx-2141779268{font-size:3em;}\");␊\n    bar.__hash = \"2141779268\";␊\n    const baz = new String(\"div{font-size:3em;}\");␊\n    baz.__hash = \"2141779268\";␊\n    const a = new String(\\`div{font-size:${size}em;}\\`);␊\n    a.__hash = \"262929833\";␊\n    export const uh = bar;␊\n    export const foo = new String(\\`div.jsx-2433716433{color:${color};}\\`);␊\n    foo.__hash = \"2433716433\";␊\n    ({␊\n      styles: <_JSXStyle id={\"1329679275\"}>{\\`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}\\`}</_JSXStyle>,␊\n      className: \"jsx-1329679275\"␊\n    });␊\n    const b = {␊\n      styles: <_JSXStyle id={\"1329679275\"}>{\\`div.jsx-1329679275{color:${colors.green.light};}a.jsx-1329679275{color:red;}\\`}</_JSXStyle>,␊\n      className: \"jsx-1329679275\"␊\n    };␊\n    ␊\n    const dynamic = colors => {␊\n      const b = {␊\n        styles: <_JSXStyle id={\"3325296745\"} dynamic={[colors.green.light]}>{\\`div.__jsx-style-dynamic-selector{color:${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}\\`}</_JSXStyle>,␊\n        className: _JSXStyle.dynamic([[\"3325296745\", [colors.green.light]]])␊\n      };␊\n    };␊\n    ␊\n    export default {␊\n      styles: <_JSXStyle id={\"3290112549\"}>{\\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:${color};}\\`}</_JSXStyle>,␊\n      className: \"jsx-3290112549\"␊\n    };`\n\n## (optimized) transpiles external stylesheets\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import colors, { size } from './constants';␊\n    const color = 'red';␊\n    const bar = [\"div.jsx-2141779268{font-size:3em;}\"];␊\n    bar.__hash = \"2141779268\";␊\n    const baz = [\"div{font-size:3em;}\"];␊\n    baz.__hash = \"2141779268\";␊\n    const a = [\\`div{font-size:${size}em;}\\`];␊\n    a.__hash = \"262929833\";␊\n    export const uh = bar;␊\n    export const foo = [\\`div.jsx-2433716433{color:${color};}\\`];␊\n    foo.__hash = \"2433716433\";␊\n    ({␊\n      styles: <_JSXStyle id={\"1329679275\"}>{[\\`div.jsx-1329679275{color:${colors.green.light};}\\`, \"a.jsx-1329679275{color:red;}\"]}</_JSXStyle>,␊\n      className: \"jsx-1329679275\"␊\n    });␊\n    const b = {␊\n      styles: <_JSXStyle id={\"1329679275\"}>{[\\`div.jsx-1329679275{color:${colors.green.light};}\\`, \"a.jsx-1329679275{color:red;}\"]}</_JSXStyle>,␊\n      className: \"jsx-1329679275\"␊\n    };␊\n    ␊\n    const dynamic = colors => {␊\n      const b = {␊\n        styles: <_JSXStyle id={\"3325296745\"} dynamic={[colors.green.light]}>{[\\`div.__jsx-style-dynamic-selector{color:${colors.green.light};}\\`, \"a.__jsx-style-dynamic-selector{color:red;}\"]}</_JSXStyle>,␊\n        className: _JSXStyle.dynamic([[\"3325296745\", [colors.green.light]]])␊\n      };␊\n    };␊\n    ␊\n    export default {␊\n      styles: <_JSXStyle id={\"3290112549\"}>{[\"div.jsx-3290112549{font-size:3em;}\", \\`p.jsx-3290112549{color:${color};}\\`]}</_JSXStyle>,␊\n      className: \"jsx-3290112549\"␊\n    };`\n\n## transpiles external stylesheets (CommonJS modules)\n\n> Snapshot 1\n\n    `const _defaultExport = new String(\"div.jsx-2141779268{font-size:3em;}\");␊\n    ␊\n    _defaultExport.__hash = \"2141779268\";␊\n    module.exports = _defaultExport;`\n\n## (optimized) transpiles external stylesheets (CommonJS modules)\n\n> Snapshot 1\n\n    `const _defaultExport = [\"div.jsx-2141779268{font-size:3em;}\"];␊\n    _defaultExport.__hash = \"2141779268\";␊\n    module.exports = _defaultExport;`\n\n## does not transpile non-styled-jsx tagged teplate literals\n\n> Snapshot 1\n\n    `import css from 'hell';␊\n    const color = 'red';␊\n    const bar = css\\`␊\n      div {␊\n        font-size: 3em;␊\n      }␊\n    \\`;␊\n    export const uh = bar;␊\n    export const foo = css\\`␊\n      div {␊\n        color: ${color};␊\n      }␊\n    \\`;␊\n    export default css\\`␊\n      div {␊\n        font-size: 3em;␊\n      }␊\n      p {␊\n        color: ${color};␊\n      }␊\n    \\`;␊\n    const Title = styled.h1\\`␊\n      color: red;␊\n      font-size: 50px;␊\n    \\`;␊\n    const AnotherTitle = Title.extend\\`␊\n      color: blue;␊\n    \\`;␊\n    export const Component = () => <AnotherTitle>My page</AnotherTitle>;`\n\n## use external stylesheets\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import styles from './styles';␊\n    ␊\n    const styles2 = require('./styles2');␊\n    ␊\n    import { foo as styles3 } from './styles';␊\n    export default (() => <div className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash} jsx-${styles.__hash}\\`}>␊\n        <p className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash} jsx-${styles.__hash}\\` + \" \" + \"foo\"}>test</p>␊\n        <p className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash} jsx-${styles.__hash}\\`}>woot</p>␊\n        <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>␊\n        <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>␊\n        <div className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash} jsx-${styles.__hash}\\`}>woot</div>␊\n        <_JSXStyle id={\"1646697228\"}>{\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\"}</_JSXStyle>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>);␊\n    export const Test = () => <div className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash}\\`}>␊\n        <p className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash}\\` + \" \" + \"foo\"}>test</p>␊\n        <p className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash}\\`}>woot</p>␊\n        <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>␊\n        <div className={\"jsx-1646697228 \" + \\`jsx-${styles3.__hash}\\`}>woot</div>␊\n        <_JSXStyle id={\"1646697228\"}>{\"p.jsx-1646697228{color:red;}div.jsx-1646697228{color:green;}\"}</_JSXStyle>␊\n      </div>;`\n\n## use external stylesheets (multi-line)\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import styles from './styles';␊\n    export default (() => <div className={\\`jsx-${styles.__hash}\\`}>␊\n        <p className={\\`jsx-${styles.__hash}\\`}>test</p>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>);`\n\n## use external stylesheets (global only)\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import styles, { foo as styles3 } from './styles';␊\n    ␊\n    const styles2 = require('./styles2');␊\n    ␊\n    export default (() => <div>␊\n        <p>test</p>␊\n        <div>woot</div>␊\n        <p>woot</p>␊\n        <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>␊\n        <_JSXStyle id={styles3.__hash}>{styles3}</_JSXStyle>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>);`\n\n## injects JSXStyle for nested scope\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    ␊\n    function test() {␊\n      ({␊\n        styles: <_JSXStyle id={\"2886504620\"}>{\"div.jsx-2886504620{color:red;}\"}</_JSXStyle>,␊\n        className: \"jsx-2886504620\"␊\n      });␊\n    }`\n\n## use external stylesheet and dynamic element\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import styles from './styles2';␊\n    export default (({␊\n      level = 1␊\n    }) => {␊\n      const Element = \\`h${level}\\`;␊\n      return <Element className={\\`jsx-${styles.__hash}\\` + \" \" + \"root\"}>␊\n          <p className={\\`jsx-${styles.__hash}\\`}>dynamic element</p>␊\n          <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n        </Element>;␊\n    });`\n\n## Makes sure that style nodes are not re-used\n\n> Snapshot 1\n\n    `\"use strict\";␊\n    ␊\n    var _style = _interopRequireDefault(require(\"styled-jsx/style\"));␊\n    ␊\n    var _App = _interopRequireDefault(require(\"./App.styles\"));␊\n    ␊\n    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊\n    ␊\n    function Test() {␊\n      return <div>␊\n            <_style.default id={_App.default.__hash}>{_App.default}</_style.default>␊\n          </div>;␊\n    }`\n\n## Make sure that it works with the new automatic transform\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import { jsx as _jsx } from \"react/jsx-runtime\";␊\n    const A = {␊\n      styles: /*#__PURE__*/_jsx(_JSXStyle, {␊\n        id: \"2723508961\",␊\n        children: \"div.jsx-2723508961{color:green;}\"␊\n      }),␊\n      className: \"jsx-2723508961\"␊\n    };␊\n    export default function IndexPage() {␊\n      return JSON.stringify(A);␊\n    }`\n"
  },
  {
    "path": "test/snapshots/index.js.md",
    "content": "# Snapshot report for `test/index.js`\n\nThe actual snapshot is saved in `index.js.snap`.\n\nGenerated by [AVA](https://avajs.dev).\n\n## handles dynamic `this` value inside of arrow function\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import React, { Component } from 'react';␊\n    export default class Index extends Component {␊\n      static getInitialProps() {␊\n        return {␊\n          color: 'aquamarine'␊\n        };␊\n      }␊\n    ␊\n      render() {␊\n        var _this = this;␊\n    ␊\n        return <div className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]])}>␊\n            {[1, 2].map(function (idx) {␊\n            return <div key={idx} className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]])}>␊\n                {[3, 4].map(function (idx2) {␊\n                return <div key={idx2} className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]])}>{_this.props.color}</div>;␊\n              })}␊\n              </div>;␊\n          })}␊\n            {[1, 2].map(function (idx) {␊\n            return <div key={idx} className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]])}>␊\n                <div className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]])}>␊\n                  {_this.props.color}␊\n                  <div className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]]) + \" \" + \"something\"}>␊\n                    <React.Fragment>␊\n                      <div className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]])}>␊\n                        <div className={_JSXStyle.dynamic([[\"1028791522\", [_this.props.color]]])}>{_this.props.color} hello there</div>␊\n                      </div>␊\n                    </React.Fragment>␊\n                  </div>␊\n                </div>␊\n              </div>;␊\n          })}␊\n            <_JSXStyle id={\"1028791522\"} dynamic={[_this.props.color]}>{\\`div.__jsx-style-dynamic-selector{background:${this.props.color};}\\`}</_JSXStyle>␊\n          </div>;␊\n      }␊\n    ␊\n    }`\n\n## works with stateless\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default (() => <div className={\"jsx-2743241663\"}>␊\n        <p className={\"jsx-2743241663\"}>test</p>␊\n        <p className={\"jsx-2743241663\"}>woot</p>␊\n        <p className={\"jsx-2743241663\"}>woot</p>␊\n        <_JSXStyle id={\"2743241663\"}>{\"p.jsx-2743241663{color:red;}\"}</_JSXStyle>␊\n      </div>);`\n\n## works with fragment\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import React from 'react';␊\n    export default (() => <>␊\n        <p className={\"jsx-1712488456\"}>Testing!!!</p>␊\n        <p className={\"jsx-1712488456\" + \" \" + \"foo\"}>Bar</p>␊\n        <>␊\n          <h3 id=\"head\" className={\"jsx-1712488456\"}>Title...</h3>␊\n          <React.Fragment>␊\n            <p className={\"jsx-1712488456\"}>hello</p>␊\n            <>␊\n              <p className={\"jsx-1712488456\"}>foo</p>␊\n              <p className={\"jsx-1712488456\"}>bar</p>␊\n            </>␊\n            <p className={\"jsx-1712488456\"}>world</p>␊\n          </React.Fragment>␊\n        </>␊\n        <_JSXStyle id={\"1712488456\"}>{\"p.jsx-1712488456{color:cyan;}.foo.jsx-1712488456{font-size:18px;color:hotpink;}#head.jsx-1712488456{-webkit-text-decoration:underline;text-decoration:underline;}\"}</_JSXStyle>␊\n      </>);␊\n    ␊\n    function Component1() {␊\n      return <>␊\n          <div>test</div>␊\n        </>;␊\n    }␊\n    ␊\n    function Component2() {␊\n      return <div className={\"jsx-4156136654\"}>␊\n          <_JSXStyle id={\"4156136654\"}>{\"div.jsx-4156136654{color:red;}\"}</_JSXStyle>␊\n        </div>;␊\n    }`\n\n## ignores whitespace around expression container\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default (() => <div className={\"jsx-2743241663\"}>␊\n        <p className={\"jsx-2743241663\"}>test</p>␊\n        <p className={\"jsx-2743241663\"}>woot</p>␊\n        <p className={\"jsx-2743241663\"}>woot</p>␊\n        <_JSXStyle id={\"2743241663\"}>{\"p.jsx-2743241663{color:red;}\"}</_JSXStyle>␊\n      </div>);`\n\n## works with class\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default class {␊\n      render() {␊\n        return <div className={\"jsx-2101845350\"}>␊\n            <p className={\"jsx-2101845350\"}>test</p>␊\n            <_JSXStyle id={\"2101845350\"}>{\"p.jsx-2101845350{color:red;}\"}</_JSXStyle>␊\n          </div>;␊\n      }␊\n    ␊\n    }`\n\n## ignores when attribute is absent\n\n> Snapshot 1\n\n    `const a = () => <div>␊\n        <p>hi</p>␊\n        <style>{'woot'}</style>␊\n      </div>;`\n\n## works with global styles\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    ␊\n    const Test = () => <div className={\"jsx-2381107078\"}>␊\n        <_JSXStyle id={\"2381107078\"}>{\"body{color:red;}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out;}div a{display:none;}[data-test]>div{color:red;}\"}</_JSXStyle>␊\n      </div>;␊\n    ␊\n    const Test2 = () => <_JSXStyle id={\"2743241663\"}>{\"p{color:red;}\"}</_JSXStyle>;`\n\n## generates source maps\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default (() => <div className={\"jsx-2743241663\"}>␊\n        <p className={\"jsx-2743241663\"}>test</p>␊\n        <p className={\"jsx-2743241663\"}>woot</p>␊\n        <_JSXStyle id={\"2743241663\"}>{\"p.jsx-2743241663{color:red;}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXBzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQixBQUNjLFVBQUMiLCJmaWxlIjoic291cmNlLW1hcHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxkaXY+XG4gICAgPHA+dGVzdDwvcD5cbiAgICA8cD53b290PC9wPlxuICAgIDxzdHlsZSBqc3g+eydwIHsgY29sb3I6IHJlZCB9J308L3N0eWxlPlxuICA8L2Rpdj5cbilcbiJdfQ== */\\\\n/*@ sourceURL=source-maps.js */\"}</_JSXStyle>␊\n      </div>);`\n\n## mixed global and scoped\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    ␊\n    const Test = () => <_JSXStyle id={\"2743241663\"}>{\"p{color:red;}\"}</_JSXStyle>;␊\n    ␊\n    export default (() => <div className={\"jsx-3467702132\"}>␊\n        <p className={\"jsx-3467702132\"}>test</p>␊\n        <_JSXStyle id={\"1061615554\"}>{\"body{background:red;}\"}</_JSXStyle>␊\n        <_JSXStyle id={\"2743241663\"}>{\"p.jsx-3467702132{color:red;}\"}</_JSXStyle>␊\n      </div>);`\n\n## works with multiple jsx blocks\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    const attrs = {␊\n      id: 'test'␊\n    };␊\n    ␊\n    const Test1 = () => <div className={\"jsx-2529315885\"}>␊\n        <span {...attrs} data-test=\"test\" className={\"jsx-2529315885\" + \" \" + (attrs && attrs.className != null && attrs.className || \"\")}>␊\n          test␊\n        </span>␊\n        <Component />␊\n        <_JSXStyle id={\"2529315885\"}>{\"span.jsx-2529315885{color:red;}\"}</_JSXStyle>␊\n      </div>;␊\n    ␊\n    const Test2 = () => <span>test</span>;␊\n    ␊\n    const Test3 = () => <div className={\"jsx-2529315885\"}>␊\n        <span className={\"jsx-2529315885\"}>test</span>␊\n        <_JSXStyle id={\"2529315885\"}>{\"span.jsx-2529315885{color:red;}\"}</_JSXStyle>␊\n      </div>;␊\n    ␊\n    export default class {␊\n      render() {␊\n        return <div className={\"jsx-2101845350\"}>␊\n            <p className={\"jsx-2101845350\"}>test</p>␊\n            <_JSXStyle id={\"2101845350\"}>{\"p.jsx-2101845350{color:red;}\"}</_JSXStyle>␊\n          </div>;␊\n      }␊\n    ␊\n    }`\n\n## should not add the data-jsx attribute to components instances\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    ␊\n    const Test = () => <div className={\"jsx-2529315885\"}>␊\n        <span className={\"jsx-2529315885\"}>test</span>␊\n        <Component />␊\n        <_JSXStyle id={\"2529315885\"}>{\"span.jsx-2529315885{color:red;}\"}</_JSXStyle>␊\n      </div>;`\n\n## works with expressions in template literals\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    ␊\n    const darken = c => c;␊\n    ␊\n    const color = 'red';␊\n    const otherColor = 'green';␊\n    const mediumScreen = '680px';␊\n    const animationDuration = '200ms';␊\n    const animationName = 'my-cool-animation';␊\n    const obj = {␊\n      display: 'block'␊\n    };␊\n    export default (({␊\n      display␊\n    }) => <div className={\"jsx-3956171631 \" + _JSXStyle.dynamic([[\"2143443147\", [darken(color)]], [\"2381675492\", [darken(color) + 2]], [\"3830663176\", [display ? 'block' : 'none']], [\"1555166447\", [display ? 'block' : 'none']]])}>␊\n        <p className={\"jsx-3956171631 \" + _JSXStyle.dynamic([[\"2143443147\", [darken(color)]], [\"2381675492\", [darken(color) + 2]], [\"3830663176\", [display ? 'block' : 'none']], [\"1555166447\", [display ? 'block' : 'none']]])}>test</p>␊\n        <_JSXStyle id={\"1003380713\"}>{\\`p.${color}.jsx-3956171631{color:${otherColor};display:${obj.display};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"2743241663\"}>{\"p.jsx-3956171631{color:red;}\"}</_JSXStyle>␊\n        <_JSXStyle id={\"602592955\"}>{\\`body{background:${color};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"602592955\"}>{\\`body{background:${color};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"128557999\"}>{\\`p.jsx-3956171631{color:${color};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"128557999\"}>{\\`p.jsx-3956171631{color:${color};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"2143443147\"} dynamic={[darken(color)]}>{\\`p.__jsx-style-dynamic-selector{color:${darken(color)};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"2381675492\"} dynamic={[darken(color) + 2]}>{\\`p.__jsx-style-dynamic-selector{color:${darken(color) + 2};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"309852217\"}>{\\`@media (min-width:${mediumScreen}){p.jsx-3956171631{color:green;}p.jsx-3956171631{color:${\\`red\\`};}}p.jsx-3956171631{color:red;}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"2824547816\"}>{\\`p.jsx-3956171631{-webkit-animation-duration:${animationDuration};animation-duration:${animationDuration};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"417951176\"}>{\\`p.jsx-3956171631{-webkit-animation:${animationDuration} forwards ${animationName};animation:${animationDuration} forwards ${animationName};}div.jsx-3956171631{background:${color};}\\`}</_JSXStyle>␊\n    ␊\n        <_JSXStyle id={\"3830663176\"} dynamic={[display ? 'block' : 'none']}>{\\`span.__jsx-style-dynamic-selector{display:${display ? 'block' : 'none'};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={\"1555166447\"} dynamic={[display ? 'block' : 'none']}>{\\`span.__jsx-style-dynamic-selector:before{display:${display ? 'block' : 'none'};content:'\\\\\\`';}\\`}</_JSXStyle>␊\n      </div>);`\n\n## should have different jsx ids\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    const color = 'red';␊\n    const otherColor = 'green';␊\n    ␊\n    const A = () => <div className={\"jsx-128557999\"}>␊\n        <p className={\"jsx-128557999\"}>test</p>␊\n        <_JSXStyle id={\"128557999\"}>{\\`p.jsx-128557999{color:${color};}\\`}</_JSXStyle>␊\n      </div>;␊\n    ␊\n    const B = () => <div className={\"jsx-347939761\"}>␊\n        <p className={\"jsx-347939761\"}>test</p>␊\n        <_JSXStyle id={\"347939761\"}>{\\`p.jsx-347939761{color:${otherColor};}\\`}</_JSXStyle>␊\n      </div>;␊\n    ␊\n    export default (() => <div>␊\n        <A />␊\n        <B />␊\n      </div>);`\n\n## works with non styled-jsx styles\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default (() => <div className={\"jsx-2743241663\"}>␊\n        <p className={\"jsx-2743241663\"}>woot</p>␊\n        <style dangerouslySetInnerHTML={{␊\n        __html: \\`body { margin: 0; }\\`␊\n      }} />␊\n        <_JSXStyle id={\"2743241663\"}>{\"p.jsx-2743241663{color:red;}\"}</_JSXStyle>␊\n      </div>);`\n\n## works with css tagged template literals in the same file\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default (({␊\n      children␊\n    }) => <div className={\\`jsx-${styles.__hash}\\`}>␊\n        <p className={\\`jsx-${styles.__hash}\\`}>{children}</p>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>);␊\n    const styles = new String(\"p.jsx-2587355013{color:red;}\");␊\n    styles.__hash = \"2587355013\";␊\n    ␊\n    class Test extends React.Component {␊\n      render() {␊\n        return <div className={\\`jsx-${styles.__hash}\\`}>␊\n            <p className={\\`jsx-${styles.__hash}\\`}>{this.props.children}</p>␊\n            <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n          </div>;␊\n      }␊\n    ␊\n    }`\n\n## works with dynamic element\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default (({␊\n      level = 1␊\n    }) => {␊\n      const Element = \\`h${level}\\`;␊\n      return <Element className={\"jsx-1253978709\" + \" \" + \"root\"}>␊\n          <p className={\"jsx-1253978709\"}>dynamic element</p>␊\n          <_JSXStyle id={\"1253978709\"}>{\".root.jsx-1253978709{background:red;}\"}</_JSXStyle>␊\n        </Element>;␊\n    });␊\n    export const TestLowerCase = ({␊\n      level = 1␊\n    }) => {␊\n      const element = \\`h${level}\\`;␊\n      return <element className={\"jsx-1253978709\" + \" \" + \"root\"}>␊\n          <p className={\"jsx-1253978709\"}>dynamic element</p>␊\n          <_JSXStyle id={\"1253978709\"}>{\".root.jsx-1253978709{background:red;}\"}</_JSXStyle>␊\n        </element>;␊\n    };␊\n    const Element2 = 'div';␊\n    export const Test2 = () => {␊\n      return <Element2 className=\"root\">␊\n          <p className={\"jsx-1253978709\"}>dynamic element</p>␊\n          <_JSXStyle id={\"1253978709\"}>{\".root.jsx-1253978709{background:red;}\"}</_JSXStyle>␊\n        </Element2>;␊\n    };`\n\n## works with dynamic element in class\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    export default class {␊\n      render() {␊\n        const Element = 'div';␊\n        return <Element className={\"jsx-1800172487\" + \" \" + \"root\"}>␊\n            <p className={\"jsx-1800172487\"}>dynamic element</p>␊\n            <_JSXStyle id={\"1800172487\"}>{\".root.jsx-1800172487{background:red;}\"}</_JSXStyle>␊\n          </Element>;␊\n      }␊\n    ␊\n    }␊\n    const Element2 = 'div';␊\n    export const Test2 = class {␊\n      render() {␊\n        return <Element2 className=\"root\">␊\n            <p className={\"jsx-1800172487\"}>dynamic element</p>␊\n            <_JSXStyle id={\"1800172487\"}>{\".root.jsx-1800172487{background:red;}\"}</_JSXStyle>␊\n          </Element2>;␊\n      }␊\n    ␊\n    };`\n\n## works with existing identifier for _JSXStyle\n\n> Snapshot 1\n\n    `import _JSXStyle2 from \"styled-jsx/style\";␊\n    export const _JSXStyle = '_JSXStyle-literal';␊\n    export default function () {␊\n      return <div className={\"jsx-319553417\"}>␊\n          <p className={\"jsx-319553417\"}>test</p>␊\n          <_JSXStyle2 id={\"319553417\"}>{\"p.jsx-319553417{color:red;}\"}</_JSXStyle2>␊\n        </div>;␊\n    }`\n\n## works with exported jsx-style (CommonJS modules)\n\n> Snapshot 1\n\n    `\"use strict\";␊\n    ␊\n    var _style = _interopRequireDefault(require(\"styled-jsx/style\"));␊\n    ␊\n    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊\n    ␊\n    module.exports = () => <p className={\"jsx-3800097675\"}><_style.default id={\"3800097675\"}>{\"p.jsx-3800097675{color:red;}\"}</_style.default></p>;`\n\n## works with exported non-jsx style (CommonJS modules)\n\n> Snapshot 1\n\n    `\"use strict\";␊\n    ␊\n    module.exports = () => <p><style>{\\`p { color:red; }\\`}</style></p>;`\n"
  },
  {
    "path": "test/snapshots/macro.js.md",
    "content": "# Snapshot report for `test/macro.js`\n\nThe actual snapshot is saved in `macro.js.snap`.\n\nGenerated by [AVA](https://avajs.dev).\n\n## transpiles correctly\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    const {␊\n      className,␊\n      styles␊\n    } = {␊\n      styles: <_JSXStyle id={\"2052294191\"}>{\"div.jsx-2052294191{color:red;}\"}</_JSXStyle>,␊\n      className: \"jsx-2052294191\"␊\n    };␊\n    ␊\n    const dynamicStyles = props => ({␊\n      styles: <_JSXStyle id={\"290194820\"} dynamic={[props.color]}>{\\`div.__jsx-style-dynamic-selector{color:${props.color};}\\`}</_JSXStyle>,␊\n      className: _JSXStyle.dynamic([[\"290194820\", [props.color]]])␊\n    });␊\n    ␊\n    const test = {␊\n      styles: <_JSXStyle id={\"2052294191\"}>{\"div.jsx-2052294191{color:red;}\"}</_JSXStyle>,␊\n      className: \"jsx-2052294191\"␊\n    };␊\n    ␊\n    const dynamicStyles2 = props => ({␊\n      styles: <_JSXStyle id={\"290194820\"} dynamic={[props.color]}>{\\`div.__jsx-style-dynamic-selector{color:${props.color};}\\`}</_JSXStyle>,␊\n      className: _JSXStyle.dynamic([[\"290194820\", [props.color]]])␊\n    });␊\n    ␊\n    const ExampleComponent = props => {␊\n      const {␊\n        className,␊\n        styles␊\n      } = dynamicStyles(props);␊\n      return <div className={className}>␊\n          howdy␊\n          {styles}␊\n        </div>;␊\n    };`\n\n## can alias the named import\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    ({␊\n      styles: <_JSXStyle id={\"2886504620\"}>{\"div.jsx-2886504620{color:red;}\"}</_JSXStyle>,␊\n      className: \"jsx-2886504620\"␊\n    });`\n\n## injects JSXStyle for nested scope\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    ␊\n    function test() {␊\n      ({␊\n        styles: <_JSXStyle id={\"2886504620\"}>{\"div.jsx-2886504620{color:red;}\"}</_JSXStyle>,␊\n        className: \"jsx-2886504620\"␊\n      });␊\n    }`\n"
  },
  {
    "path": "test/snapshots/plugins.js.md",
    "content": "# Snapshot report for `test/plugins.js`\n\nThe actual snapshot is saved in `plugins.js.snap`.\n\nGenerated by [AVA](https://avajs.dev).\n\n## applies plugins\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import styles from './styles';␊\n    const color = 'red';␊\n    export default (() => <div className={\\`jsx-${styles.__hash}\\` + \" \" + _JSXStyle.dynamic([[\"2799750516\", [color, otherColor]]])}>␊\n        <p className={\\`jsx-${styles.__hash}\\` + \" \" + _JSXStyle.dynamic([[\"2799750516\", [color, otherColor]]])}>test</p>␊\n        <_JSXStyle id={\"2799750516\"} dynamic={[color, otherColor]}>{\\`span.${color}.__jsx-style-dynamic-selector{color:${otherColor};}\\`}</_JSXStyle>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>);`\n\n## babel-test plugin strips jsx attribute\n\n> Snapshot 1\n\n    `import styles from './styles';␊\n    const color = 'red';␊\n    export default (() => <div>␊\n        <p>test</p>␊\n        <style>{\\`␊\n          div.${color} {␊\n            color: ${otherColor};␊\n          }␊\n        \\`}</style>␊\n        <style>{styles}</style>␊\n      </div>);`\n\n## passes options to plugins\n\n> Snapshot 1\n\n    `import _JSXStyle from \"styled-jsx/style\";␊\n    import styles from './styles';␊\n    const color = 'red';␊\n    export default (() => <div className={\\`jsx-${styles.__hash}\\` + \" \" + _JSXStyle.dynamic([[\"2799750516\", [color, otherColor]]])}>␊\n        <p className={\\`jsx-${styles.__hash}\\` + \" \" + _JSXStyle.dynamic([[\"2799750516\", [color, otherColor]]])}>test</p>␊\n        <_JSXStyle id={\"2799750516\"} dynamic={[color, otherColor]}>{\".test.__jsx-style-dynamic-selector{content:\\\\\"{\\\\\"foo\\\\\":false,\\\\\"babel\\\\\":{\\\\\"location\\\\\":{\\\\\"start\\\\\":{\\\\\"line\\\\\":7,\\\\\"column\\\\\":16,\\\\\"index\\\\\":114},\\\\\"end\\\\\":{\\\\\"line\\\\\":11,\\\\\"column\\\\\":5,\\\\\"index\\\\\":180}},\\\\\"vendorPrefixes\\\\\":false,\\\\\"sourceMaps\\\\\":false,\\\\\"isGlobal\\\\\":false}}\\\\\";}\"}</_JSXStyle>␊\n        <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>␊\n      </div>);`\n"
  },
  {
    "path": "test/snapshots/styles.js.md",
    "content": "# Snapshot report for `test/styles.js`\n\nThe actual snapshot is saved in `styles.js.snap`.\n\nGenerated by [AVA](https://avajs.dev).\n\n## transpile styles with attributes\n\n> Snapshot 1\n\n    'html.jsx-123{background-image:linear-gradient( 0deg, rgba(255,255,255,0.8), rgba(255,255,255,0.8) ), url(/static/background.svg);}p{color:blue;}p{color:blue;}p,a.jsx-123{color:blue;}.foo + a{color:red;}body{font-family:-apple-system,BlinkMacSystemFont,\\'Segoe UI\\',Helvetica,Arial, sans-serif;}p.jsx-123{color:red;}p.jsx-123{color:red;}*.jsx-123{color:blue;}[href=\\'woot\\'].jsx-123{color:red;}p.jsx-123 a.jsx-123 span.jsx-123{color:red;}p.jsx-123 span{background:blue;}p.jsx-123 a[title=\"\\'w \\' \\'  t\\'\"].jsx-123{margin:auto;}p.jsx-123 span:not(.test){color:green;}p.jsx-123,h1.jsx-123{color:blue;-webkit-animation:hahaha-jsx-123 3s ease forwards infinite;animation:hahaha-jsx-123 3s ease forwards infinite;-webkit-animation-name:hahaha-jsx-123;animation-name:hahaha-jsx-123;-webkit-animation-delay:100ms;animation-delay:100ms;}p.jsx-123{-webkit-animation:hahaha-jsx-123 1s,hehehe-jsx-123 2s;animation:hahaha-jsx-123 1s,hehehe-jsx-123 2s;}p.jsx-123:hover{color:red;}p.jsx-123::before{color:red;}.jsx-123:hover{color:red;}.jsx-123::before{color:red;}.jsx-123:hover p.jsx-123{color:red;}p.jsx-123+a.jsx-123{color:red;}p.jsx-123~a.jsx-123{color:red;}p.jsx-123>a.jsx-123{color:red;}@-webkit-keyframes hahaha-jsx-123{from{top:0;}to{top:100;}}@keyframes hahaha-jsx-123{from{top:0;}to{top:100;}}@-webkit-keyframes hehehe-jsx-123{from{left:0;}to{left:100;}}@keyframes hehehe-jsx-123{from{left:0;}to{left:100;}}@media (min-width:500px){.test.jsx-123{color:red;}}.test.jsx-123{display:block;}.inline-flex.jsx-123{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.flex.jsx-123{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.test.jsx-123{box-shadow:0 0 10px black,inset 0 0 5px black;}.test[title=\\',\\'].jsx-123{display:inline-block;}.test.is-status.jsx-123 .test.jsx-123{color:red;}.a-selector.jsx-123:hover,.a-selector.jsx-123:focus{outline:none;}@media (min-width:1px) and (max-width:768px){[class*=\\'grid__col--\\'].jsx-123{margin-top:12px;margin-bottom:12px;}}@media (max-width:64em){.test.jsx-123{margin-bottom:1em;}@supports (-moz-appearance:none) and (display:contents){.test.jsx-123{margin-bottom:2rem;}}}'\n"
  },
  {
    "path": "test/styles.js",
    "content": "// Packages\nimport test from 'ava'\n\n// Ours\nimport transform from '../src/lib/style-transform'\nimport read from './_read'\n\ntest('transpile styles with attributes', async t => {\n  const src = await read('./fixtures/transform.css')\n  t.snapshot(transform('.jsx-123', src))\n})\n\ntest('throws when using nesting', t => {\n  const fixtures = [\n    `div { &:hover { color: red } }`,\n    `div {\n      color: green;\n      &:hover { color: red } }`,\n    `:hover { div { color: red } }`,\n    `@media all {\n      div {\n        &:hover { color: red }\n      }\n    }`,\n    `* { div { color: red }\n      &.test {\n        color: red;\n      }\n    }`,\n    `span {}\n      .test {\n        color: red;\n      div& {\n        color: red;\n      }\n    }`\n  ]\n\n  fixtures.forEach(fixture => {\n    t.throws(() => transform('', fixture))\n    t.throws(() => transform('.jsx-123', fixture))\n  })\n})\n\ntest(\"doesn't throw when using at-rules\", t => {\n  const fixtures = [\n    '@media (min-width: 480px) { div { color: red } }',\n    `span {}\n      @media (min-width: 480px) { div { color: red } }`,\n    `@media (min-width: 480px) { div { color: red } }\n    span {}`,\n    `:hover {}\n      @media (min-width: 480px) { div { color: red } }`,\n    `:hover { color: green }\n      @media (min-width: 480px) { div { color: red } }`,\n    `@media (min-width: 480px) { div {} }`,\n    `@keyframes foo {\n      0% { opacity: 0 }\n      100% { opacity: 1}\n    }\n    `,\n    // Line with one space before @rule\n    `div { color: red; }\n \n     @media screen and (min-width: 480px) {\n       div { color: red; }\n     }\n     `,\n    // Line with one tab before @rule\n    `div { color: red; }\n\t\n     @media screen and (min-width: 480px) {\n       div { color: red; }\n     }\n    `\n  ]\n\n  fixtures.forEach(fixture => {\n    t.notThrows(() => transform('', fixture))\n    t.notThrows(() => transform('.jsx-123', fixture))\n  })\n})\n\ntest('splits rules for `optimizeForSpeed`', t => {\n  function assert(input, expected, prefix = '') {\n    t.deepEqual(transform(prefix, input, { splitRules: true }), expected)\n  }\n\n  assert('div { color: red }', ['div{color:red;}'])\n\n  assert('div { color: red } .p { color: red }', [\n    'div{color:red;}',\n    '.p{color:red;}'\n  ])\n\n  assert('div, span { color: red } a > .p { color: red }', [\n    'div,span{color:red;}',\n    'a>.p{color:red;}'\n  ])\n\n  assert(\n    '@media (min-width: 400px) { div, span { color: red } } a > .p { color: red }',\n    ['@media (min-width:400px){div,span{color:red;}}', 'a>.p{color:red;}']\n  )\n\n  assert(\n    '@media (min-width: 400px) { div { color: red } span { color: red } } a > .p { color: red }',\n    [\n      '@media (min-width:400px){div{color:red;}span{color:red;}}',\n      'a>.p{color:red;}'\n    ]\n  )\n\n  assert(\n    `@media (min-width: 1px) and (max-width: 768px) {\n      [class*='test__test--'] {\n        color: red;\n      }\n    }`,\n    [\n      `@media (min-width:1px) and (max-width:768px){[class*='test__test--']{color:red;}}`\n    ]\n  )\n\n  assert(\n    'span { color: red } @font-face { font-family: test; src: url(test.woff); } div { color: red }',\n    [\n      '@font-face{font-family:test;src:url(test.woff);}',\n      'span{color:red;}',\n      'div{color:red;}'\n    ]\n  )\n\n  assert('@charset \"UTF-8\"', ['@charset \"UTF-8\";'])\n\n  assert('@import \"./test.css\"', ['@import \"./test.css\";'])\n\n  assert(\n    `\n    @keyframes test {\n      0% { opacity: 0 }\n      100% { opacity: 1 }\n    }\n  `,\n    [\n      '@-webkit-keyframes test{0%{opacity:0;}100%{opacity:1;}}',\n      '@keyframes test{0%{opacity:0;}100%{opacity:1;}}'\n    ]\n  )\n\n  assert(\n    `\n    @supports (display: flex) {\n      div { display: flex; }\n    }\n  `,\n    [\n      '@supports (display:-webkit-box) or (display:-webkit-flex) or (display:-ms-flexbox) or (display:flex){div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}'\n    ]\n  )\n\n  assert(\n    `\n    @import \"./test.css\";\n    @supports (display: flex) {\n      div { display: flex; }\n    }\n    div { color: red }\n    a, div { color: red }\n    @import \"./test.css\";\n    @media (min-width: 400px) { div, span { color: red } }\n  `,\n    [\n      '@import \"./test.css\";',\n      '@import \"./test.css\";',\n      '@supports (display:-webkit-box) or (display:-webkit-flex) or (display:-ms-flexbox) or (display:flex){div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}',\n      'div{color:red;}',\n      'a,div{color:red;}',\n      '@media (min-width:400px){div,span{color:red;}}'\n    ]\n  )\n\n  assert('@namespace url(http://www.w3.org/1999/xhtml)', [\n    '@namespace url(http://www.w3.org/1999/xhtml);'\n  ])\n  assert('@namespace svg url(http://www.w3.org/2000/svg)', [\n    '@namespace svg url(http://www.w3.org/2000/svg);'\n  ])\n  assert('@page :first { margin: 1in; }', ['@page :first{margin:1in;}'])\n\n  assert(\n    `\n    div {\n      animation: fade-in ease-in 1;\n      animation-fill-mode: forwards;\n      animation-duration: 500ms;\n      opacity: 0;\n    }\n    @keyframes fade-in {\n      from {\n        opacity: 0;\n      }\n\n      to {\n        opacity: 1;\n      }\n    }\n  `,\n    [\n      'div.jsx-123{-webkit-animation:fade-in-jsx-123 ease-in 1;animation:fade-in-jsx-123 ease-in 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:500ms;animation-duration:500ms;opacity:0;}',\n      '@-webkit-keyframes fade-in-jsx-123{from{opacity:0;}to{opacity:1;}}',\n      '@keyframes fade-in-jsx-123{from{opacity:0;}to{opacity:1;}}'\n    ],\n    '.jsx-123'\n  )\n\n  assert(\n    `\n    div {\n      animation: fade-in ease-in 1;\n      animation-fill-mode: forwards;\n      animation-duration: 500ms;\n      opacity: 0;\n    }\n\n    @keyframes fade-in {\n      from {\n        opacity: 0;\n      }\n\n      to {\n        opacity: 1;\n      }\n    }\n  `,\n    [\n      'div{-webkit-animation:fade-in ease-in 1;animation:fade-in ease-in 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:500ms;animation-duration:500ms;opacity:0;}',\n      '@-webkit-keyframes fade-in{from{opacity:0;}to{opacity:1;}}',\n      '@keyframes fade-in{from{opacity:0;}to{opacity:1;}}'\n    ]\n  )\n\n  assert(\n    `div { color: red } ::placeholder { color: green }`,\n    [\n      'div.jsx-123{color:red;}',\n      '.jsx-123::-webkit-input-placeholder{color:green;}',\n      '.jsx-123::-moz-placeholder{color:green;}',\n      '.jsx-123:-ms-input-placeholder{color:green;}',\n      '.jsx-123::placeholder{color:green;}'\n    ],\n    '.jsx-123'\n  )\n})\n"
  },
  {
    "path": "test/stylesheet-registry.js",
    "content": "// Packages\nimport test from 'ava'\n\n// Ours\nimport { StyleSheetRegistry } from '../src/stylesheet-registry'\nimport makeSheet, { invalidRules } from './stylesheet'\nimport withMock, { withMockDocument } from './helpers/with-mock'\nimport { computeId, computeSelector } from '../src/lib/hash'\n\nfunction makeRegistry(options = { optimizeForSpeed: true }) {\n  const registry = new StyleSheetRegistry({\n    styleSheet: makeSheet(options),\n    ...options\n  })\n  registry.selectFromServer = () => ({})\n  return registry\n}\n\nconst cssRule = 'div { color: red }'\nconst cssRuleAlt = 'p { color: red }'\n\n// registry.add\n\ntest(\n  'add',\n  withMock(withMockDocument, t => {\n    const options = [\n      { optimizeForSpeed: true, isBrowser: true },\n      { optimizeForSpeed: false, isBrowser: true },\n      { optimizeForSpeed: true, isBrowser: false },\n      { optimizeForSpeed: false, isBrowser: false }\n    ]\n\n    options.forEach(options => {\n      if (options.isBrowser) {\n        globalThis.window = globalThis\n      }\n\n      const registry = makeRegistry(options)\n\n      registry.add({\n        id: '123',\n        children: options.optimizeForSpeed ? [cssRule] : cssRule\n      })\n\n      t.deepEqual(registry.cssRules(), [['jsx-123', cssRule]])\n\n      // Dedupe\n\n      registry.add({\n        id: '123',\n        children: options.optimizeForSpeed ? [cssRule] : cssRule\n      })\n\n      t.deepEqual(registry.cssRules(), [['jsx-123', cssRule]])\n\n      registry.add({\n        id: '345',\n        children: options.optimizeForSpeed ? [cssRule] : cssRule\n      })\n\n      t.deepEqual(registry.cssRules(), [\n        ['jsx-123', cssRule],\n        ['jsx-345', cssRule]\n      ])\n\n      if (options.optimizeForSpeed) {\n        registry.add({ id: '456', children: [cssRule, cssRuleAlt] })\n\n        t.deepEqual(registry.cssRules(), [\n          ['jsx-123', cssRule],\n          ['jsx-345', cssRule],\n          ['jsx-456', 'div { color: red }p { color: red }']\n        ])\n      }\n\n      if (options.isBrowser) {\n        delete globalThis.window\n      }\n    })\n  })\n)\n\ntest(\n  'add - filters out invalid rules (index `-1`)',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const registry = makeRegistry()\n\n    // Insert a valid rule\n    registry.add({ id: '123', children: [cssRule] })\n\n    // Insert an invalid rule\n    registry.add({ id: '456', children: [invalidRules[0]] })\n\n    // Insert another valid rule\n    registry.add({ id: '678', children: [cssRule] })\n\n    t.deepEqual(registry.cssRules(), [\n      ['jsx-123', 'div { color: red }'],\n      ['jsx-678', 'div { color: red }']\n    ])\n\n    delete globalThis.window\n  })\n)\n\ntest(\n  'it does not throw when inserting an invalid rule',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const registry = makeRegistry()\n\n    // Insert a valid rule\n    registry.add({ id: '123', children: [cssRule] })\n\n    t.notThrows(() => {\n      // Insert an invalid rule\n      registry.add({ id: '456', children: [invalidRules[0]] })\n    })\n\n    t.deepEqual(registry.cssRules(), [['jsx-123', 'div { color: red }']])\n\n    delete globalThis.window\n  })\n)\n\ntest('add - sanitizes dynamic CSS on the server', t => {\n  const registry = makeRegistry({ optimizeForSpeed: false })\n\n  registry.add({\n    id: '123',\n    children: [\n      'div.__jsx-style-dynamic-selector { color: red</style><script>alert(\"howdy\")</script> }'\n    ],\n    dynamic: ['red</style><script>alert(\"howdy\")</script>']\n  })\n\n  t.deepEqual(registry.cssRules(), [\n    [\n      'jsx-1871671996',\n      'div.jsx-1871671996 { color: red<\\\\/style><script>alert(\"howdy\")</script> }'\n    ]\n  ])\n})\n\ntest('add - nonce is properly fetched from meta tag', t => {\n  const originalDocument = globalThis.document\n  // We need to stub a document in order to simulate the meta tag\n  globalThis.document = {\n    querySelector(query) {\n      t.is(query, 'meta[property=\"csp-nonce\"]')\n      return {\n        getAttribute(attr) {\n          t.is(attr, 'content')\n          return 'test-nonce'\n        }\n      }\n    }\n  }\n\n  globalThis.window = globalThis\n\n  const registry = makeRegistry()\n  registry.add({ id: '123', children: [cssRule] })\n\n  t.is(registry._sheet._nonce, 'test-nonce')\n\n  globalThis.document = originalDocument\n\n  delete globalThis.window\n})\n\n// registry.remove\n\ntest(\n  'remove',\n  withMock(withMockDocument, t => {\n    const options = [\n      { optimizeForSpeed: true, isBrowser: true },\n      { optimizeForSpeed: false, isBrowser: true },\n      { optimizeForSpeed: true, isBrowser: false },\n      { optimizeForSpeed: false, isBrowser: false }\n    ]\n\n    options.forEach(options => {\n      if (options.isBrowser) {\n        globalThis.window = globalThis\n      }\n\n      const registry = makeRegistry(options)\n      registry.add({\n        id: '123',\n        children: options.optimizeForSpeed ? [cssRule] : cssRule\n      })\n\n      registry.add({\n        id: '345',\n        children: options.optimizeForSpeed ? [cssRuleAlt] : cssRuleAlt\n      })\n\n      registry.remove({ id: '123' })\n      t.deepEqual(registry.cssRules(), [['jsx-345', cssRuleAlt]])\n\n      // Add a duplicate\n      registry.add({\n        id: '345',\n        children: options.optimizeForSpeed ? [cssRuleAlt] : cssRuleAlt\n      })\n      // and remove it\n      registry.remove({ id: '345' })\n      // Still in the registry\n      t.deepEqual(registry.cssRules(), [['jsx-345', cssRuleAlt]])\n      // remove again\n      registry.remove({ id: '345' })\n      // now the registry should be empty\n      t.deepEqual(registry.cssRules(), [])\n\n      if (options.isBrowser) {\n        delete globalThis.window\n      }\n    })\n  })\n)\n\n// registry.update\n\ntest(\n  'update',\n  withMock(withMockDocument, t => {\n    const options = [\n      { optimizeForSpeed: true, isBrowser: true },\n      { optimizeForSpeed: false, isBrowser: true },\n      { optimizeForSpeed: true, isBrowser: false },\n      { optimizeForSpeed: false, isBrowser: false }\n    ]\n\n    options.forEach(options => {\n      if (options.isBrowser) {\n        globalThis.window = globalThis\n      }\n\n      const registry = makeRegistry(options)\n      registry.add({\n        id: '123',\n        children: options.optimizeForSpeed ? [cssRule] : cssRule\n      })\n\n      registry.add({\n        id: '123',\n        children: options.optimizeForSpeed ? [cssRule] : cssRule\n      })\n\n      registry.update(\n        { id: '123' },\n        {\n          id: '345',\n          children: options.optimizeForSpeed ? [cssRuleAlt] : cssRuleAlt\n        }\n      )\n      // Doesn't remove when there are multiple instances of 123\n      t.deepEqual(registry.cssRules(), [\n        ['jsx-123', cssRule],\n        ['jsx-345', cssRuleAlt]\n      ])\n\n      registry.remove({ id: '345' })\n      t.deepEqual(registry.cssRules(), [['jsx-123', cssRule]])\n\n      // Update again\n      registry.update(\n        { id: '123' },\n        {\n          id: '345',\n          children: options.optimizeForSpeed ? [cssRuleAlt] : cssRuleAlt\n        }\n      )\n      // 123 replaced with 345\n      t.deepEqual(registry.cssRules(), [['jsx-345', cssRuleAlt]])\n\n      if (options.isBrowser) {\n        delete globalThis.window\n      }\n    })\n  })\n)\n\n// createComputeId\n\ntest(\n  'createComputeId',\n  withMock(withMockDocument, t => {\n    // without props\n    t.is(computeId('123'), 'jsx-123')\n\n    // with props\n    t.is(computeId('123', ['test', 3, 'test']), 'jsx-1172888331')\n  })\n)\n\n// createComputeSelector\n\ntest(\n  'createComputeSelector',\n  withMock(withMockDocument, t => {\n    t.is(\n      computeSelector(\n        'jsx-123',\n        '.test {} .__jsx-style-dynamic-selector { color: red } .__jsx-style-dynamic-selector { color: red }'\n      ),\n      '.test {} .jsx-123 { color: red } .jsx-123 { color: red }'\n    )\n  })\n)\n\n// getIdAndRules\n\ntest(\n  'getIdAndRules',\n  withMock(withMockDocument, t => {\n    const utilRegistry = makeRegistry()\n    // simple\n    t.deepEqual(\n      utilRegistry.getIdAndRules({\n        id: '123',\n        children: '.test {} .jsx-123 { color: red } .jsx-123 { color: red }'\n      }),\n      {\n        styleId: 'jsx-123',\n        rules: ['.test {} .jsx-123 { color: red } .jsx-123 { color: red }']\n      }\n    )\n\n    // dynamic\n    t.deepEqual(\n      utilRegistry.getIdAndRules({\n        id: '123',\n        children:\n          '.test {} .__jsx-style-dynamic-selector { color: red } .__jsx-style-dynamic-selector { color: red }',\n        dynamic: ['test', 3, 'test']\n      }),\n      {\n        styleId: 'jsx-1172888331',\n        rules: [\n          '.test {} .jsx-1172888331 { color: red } .jsx-1172888331 { color: red }'\n        ]\n      }\n    )\n\n    // dynamic, css array\n    t.deepEqual(\n      utilRegistry.getIdAndRules({\n        id: '123',\n        children: [\n          '.test {}',\n          '.__jsx-style-dynamic-selector { color: red }',\n          '.__jsx-style-dynamic-selector { color: red }'\n        ],\n        dynamic: ['test', 3, 'test']\n      }),\n      {\n        styleId: 'jsx-1172888331',\n        rules: [\n          '.test {}',\n          '.jsx-1172888331 { color: red }',\n          '.jsx-1172888331 { color: red }'\n        ]\n      }\n    )\n  })\n)\n"
  },
  {
    "path": "test/stylesheet.js",
    "content": "// Packages\nimport test from 'ava'\n\n// Ours\nimport StyleSheet from '../src/lib/stylesheet'\nimport withMock, { withMockDocument } from './helpers/with-mock'\n\nexport const invalidRules = ['invalid rule']\n\nexport default function makeSheet(options = { optimizeForSpeed: true }) {\n  const sheet = new StyleSheet(options)\n  // mocks\n  sheet.makeStyleTag = function(name, cssString) {\n    const cssRules = cssString ? [{ cssText: cssString }] : []\n    const tag = {\n      sheet: {\n        cssRules,\n        insertRule: (rule, index) => {\n          if (invalidRules.includes(rule)) {\n            throw new Error('invalid rule')\n          }\n\n          if (typeof index === 'number') {\n            cssRules[index] = { cssText: rule }\n          } else {\n            cssRules.push({ cssText: rule })\n          }\n\n          return index\n        },\n        deleteRule: index => {\n          if (options.optimizeForSpeed) {\n            cssRules[index] = {\n              cssText: `#${name}-deleted-rule____{}`\n            }\n          } else {\n            cssRules[index] = null\n          }\n        },\n        replaceRule: (index, rule) => {\n          cssRules[index] = { cssText: rule }\n        }\n      },\n      parentNode: {\n        removeChild: () => {}\n      }\n    }\n\n    let textContent = cssString\n    Object.defineProperty(tag, 'textContent', {\n      get: () => textContent,\n      set: text => {\n        textContent = text\n        cssRules.length = 0\n        cssRules.push({ cssText: text })\n      }\n    })\n\n    return tag\n  }\n\n  return sheet\n}\n\n// sheet.setOptimizeForSpeed\n\ntest(\n  'can change optimizeForSpeed only when the stylesheet is empty',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const sheet = makeSheet()\n\n    sheet.inject()\n    t.notThrows(() => {\n      sheet.setOptimizeForSpeed(true)\n    })\n\n    sheet.insertRule('div { color: red }')\n    t.throws(() => {\n      sheet.setOptimizeForSpeed(false)\n    })\n\n    sheet.flush()\n    t.notThrows(() => {\n      sheet.setOptimizeForSpeed(false)\n    })\n\n    delete globalThis.window\n  })\n)\n\n// sheet.insertRule\n\ntest(\n  'insertRule',\n  withMock(withMockDocument, t => {\n    const options = [\n      { optimizeForSpeed: true, isBrowser: true },\n      { optimizeForSpeed: false, isBrowser: true },\n      { optimizeForSpeed: true, isBrowser: false }\n    ]\n\n    options.forEach(options => {\n      if (options.isBrowser) {\n        globalThis.window = globalThis\n      }\n\n      const sheet = makeSheet(options)\n      sheet.inject()\n\n      sheet.insertRule('div { color: red }')\n      t.deepEqual(sheet.cssRules(), [{ cssText: 'div { color: red }' }])\n\n      sheet.insertRule('div { color: green }')\n      t.deepEqual(sheet.cssRules(), [\n        { cssText: 'div { color: red }' },\n        { cssText: 'div { color: green }' }\n      ])\n\n      if (options.isBrowser) {\n        delete globalThis.window\n      }\n    })\n  })\n)\n\ntest(\n  'insertRule - returns the rule index',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const sheet = makeSheet()\n    sheet.inject()\n\n    let i = sheet.insertRule('div { color: red }')\n    t.is(i, 0)\n\n    i = sheet.insertRule('div { color: red }')\n    t.is(i, 1)\n\n    delete globalThis.window\n  })\n)\n\ntest(\n  'insertRule - handles invalid rules and returns -1 as index',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const sheet = makeSheet()\n    sheet.inject()\n\n    const i = sheet.insertRule(invalidRules[0])\n    t.is(i, -1)\n\n    delete globalThis.window\n  })\n)\n\ntest(\n  'insertRule - does not fail when the css is a String object',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const sheet = makeSheet()\n    sheet.inject()\n\n    /* eslint-disable unicorn/new-for-builtins,no-new-wrappers */\n\n    sheet.insertRule(new String('div { color: red }'))\n    t.deepEqual(sheet.cssRules(), [\n      { cssText: new String('div { color: red }') }\n    ])\n\n    delete globalThis.window\n    /* eslint-enable */\n  })\n)\n\n// sheet.deleteRule\n\ntest(\n  'deleteRule',\n  withMock(withMockDocument, t => {\n    const options = [\n      { optimizeForSpeed: true, isBrowser: true },\n      { optimizeForSpeed: false, isBrowser: true },\n      { optimizeForSpeed: true, isBrowser: false },\n      { optimizeForSpeed: false, isBrowser: false }\n    ]\n\n    options.forEach(options => {\n      if (options.isBrowser) {\n        globalThis.window = globalThis\n      }\n\n      const sheet = makeSheet(options)\n      sheet.inject()\n\n      sheet.insertRule('div { color: red }')\n      sheet.insertRule('div { color: green }')\n      const rulesCount = sheet.length\n\n      sheet.deleteRule(1)\n      // When deleting we replace rules with placeholders to keep the indices stable.\n      t.is(sheet.length, rulesCount)\n\n      t.deepEqual(sheet.cssRules(), [{ cssText: 'div { color: red }' }, null])\n\n      if (options.isBrowser) {\n        delete globalThis.window\n      }\n    })\n  })\n)\n\ntest(\n  'deleteRule - does not throw when the rule at index does not exist',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const sheet = makeSheet()\n    sheet.inject()\n\n    t.notThrows(() => {\n      sheet.deleteRule(sheet.length + 1)\n    })\n\n    delete globalThis.window\n  })\n)\n\n// sheet.replaceRule\n\ntest(\n  'replaceRule',\n  withMock(withMockDocument, t => {\n    const options = [\n      { optimizeForSpeed: true, isBrowser: true },\n      { optimizeForSpeed: false, isBrowser: true },\n      { optimizeForSpeed: true, isBrowser: false },\n      { optimizeForSpeed: false, isBrowser: false }\n    ]\n\n    options.forEach(options => {\n      if (options.isBrowser) {\n        globalThis.window = globalThis\n      }\n\n      const sheet = makeSheet(options)\n      sheet.inject()\n\n      const index = sheet.insertRule('div { color: red }')\n      sheet.replaceRule(index, 'p { color: hotpink }')\n\n      t.deepEqual(sheet.cssRules(), [{ cssText: 'p { color: hotpink }' }])\n\n      if (options.isBrowser) {\n        delete globalThis.window\n      }\n    })\n  })\n)\n\ntest(\n  'replaceRule - handles invalid rules gracefully',\n  withMock(withMockDocument, t => {\n    globalThis.window = globalThis\n\n    const sheet = makeSheet()\n    sheet.inject()\n\n    // Insert two rules\n    sheet.insertRule('div { color: red }')\n    const index = sheet.insertRule('div { color: red }')\n\n    // Replace the latter with an invalid rule\n    const i = sheet.replaceRule(index, invalidRules[0])\n    t.is(i, index)\n    t.is(sheet.length, 2)\n\n    // Even though replacement (insertion) failed deletion succeeded\n    // therefore the lib must insert a delete placeholder which resolves to `null`\n    // when `cssRules()` is called.\n    t.deepEqual(sheet.cssRules(), [{ cssText: 'div { color: red }' }, null])\n\n    delete globalThis.window\n  })\n)\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    /* Visit https://aka.ms/tsconfig to read more about this file */\n\n    /* Projects */\n    // \"incremental\": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */\n    // \"composite\": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */\n    // \"tsBuildInfoFile\": \"./.tsbuildinfo\",              /* Specify the path to .tsbuildinfo incremental compilation file. */\n    // \"disableSourceOfProjectReferenceRedirect\": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */\n    // \"disableSolutionSearching\": true,                 /* Opt a project out of multi-project reference checking when editing. */\n    // \"disableReferencedProjectLoad\": true,             /* Reduce the number of projects loaded automatically by TypeScript. */\n\n    /* Language and Environment */\n    \"target\": \"es2016\" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,\n    // \"lib\": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */\n    // \"jsx\": \"preserve\",                                /* Specify what JSX code is generated. */\n    // \"experimentalDecorators\": true,                   /* Enable experimental support for legacy experimental decorators. */\n    // \"emitDecoratorMetadata\": true,                    /* Emit design-type metadata for decorated declarations in source files. */\n    // \"jsxFactory\": \"\",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */\n    // \"jsxFragmentFactory\": \"\",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */\n    // \"jsxImportSource\": \"\",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */\n    // \"reactNamespace\": \"\",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */\n    // \"noLib\": true,                                    /* Disable including any library files, including the default lib.d.ts. */\n    // \"useDefineForClassFields\": true,                  /* Emit ECMAScript-standard-compliant class fields. */\n    // \"moduleDetection\": \"auto\",                        /* Control what method is used to detect module-format JS files. */\n\n    /* Modules */\n    \"module\": \"commonjs\" /* Specify what module code is generated. */,\n    // \"rootDir\": \"./\",                                  /* Specify the root folder within your source files. */\n    // \"moduleResolution\": \"node10\",                     /* Specify how TypeScript looks up a file from a given module specifier. */\n    // \"baseUrl\": \"./\",                                  /* Specify the base directory to resolve non-relative module names. */\n    // \"paths\": {} /* Specify a set of entries that re-map imports to additional lookup locations. */,\n    // \"rootDirs\": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */\n    // \"typeRoots\": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */\n    \"types\": [] /* Specify type package names to be included without being referenced in a source file. */,\n    // \"allowUmdGlobalAccess\": true,                     /* Allow accessing UMD globals from modules. */\n    // \"moduleSuffixes\": [],                             /* List of file name suffixes to search when resolving a module. */\n    // \"allowImportingTsExtensions\": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */\n    // \"resolvePackageJsonExports\": true,                /* Use the package.json 'exports' field when resolving package imports. */\n    // \"resolvePackageJsonImports\": true,                /* Use the package.json 'imports' field when resolving imports. */\n    // \"customConditions\": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */\n    // \"resolveJsonModule\": true,                        /* Enable importing .json files. */\n    // \"allowArbitraryExtensions\": true,                 /* Enable importing files with any extension, provided a declaration file is present. */\n    // \"noResolve\": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */\n\n    /* JavaScript Support */\n    // \"allowJs\": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */\n    // \"checkJs\": true,                                  /* Enable error reporting in type-checked JavaScript files. */\n    // \"maxNodeModuleJsDepth\": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */\n\n    /* Emit */\n    // \"declaration\": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */\n    // \"declarationMap\": true,                           /* Create sourcemaps for d.ts files. */\n    // \"emitDeclarationOnly\": true,                      /* Only output d.ts files and not JavaScript files. */\n    // \"sourceMap\": true,                                /* Create source map files for emitted JavaScript files. */\n    // \"inlineSourceMap\": true,                          /* Include sourcemap files inside the emitted JavaScript. */\n    // \"outFile\": \"./\",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */\n    // \"outDir\": \"./\",                                   /* Specify an output folder for all emitted files. */\n    // \"removeComments\": true,                           /* Disable emitting comments. */\n    // \"noEmit\": true,                                   /* Disable emitting files from a compilation. */\n    // \"importHelpers\": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */\n    // \"importsNotUsedAsValues\": \"remove\",               /* Specify emit/checking behavior for imports that are only used for types. */\n    // \"downlevelIteration\": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */\n    // \"sourceRoot\": \"\",                                 /* Specify the root path for debuggers to find the reference source code. */\n    // \"mapRoot\": \"\",                                    /* Specify the location where debugger should locate map files instead of generated locations. */\n    // \"inlineSources\": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */\n    // \"emitBOM\": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */\n    // \"newLine\": \"crlf\",                                /* Set the newline character for emitting files. */\n    // \"stripInternal\": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */\n    // \"noEmitHelpers\": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */\n    // \"noEmitOnError\": true,                            /* Disable emitting files if any type checking errors are reported. */\n    // \"preserveConstEnums\": true,                       /* Disable erasing 'const enum' declarations in generated code. */\n    // \"declarationDir\": \"./\",                           /* Specify the output directory for generated declaration files. */\n    // \"preserveValueImports\": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */\n\n    /* Interop Constraints */\n    // \"isolatedModules\": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */\n    // \"verbatimModuleSyntax\": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */\n    // \"allowSyntheticDefaultImports\": true,             /* Allow 'import x from y' when a module doesn't have a default export. */\n    \"esModuleInterop\": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,\n    // \"preserveSymlinks\": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */\n    \"forceConsistentCasingInFileNames\": true /* Ensure that casing is correct in imports. */,\n\n    /* Type Checking */\n    \"strict\": true /* Enable all strict type-checking options. */,\n    // \"noImplicitAny\": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */\n    // \"strictNullChecks\": true,                         /* When type checking, take into account 'null' and 'undefined'. */\n    // \"strictFunctionTypes\": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */\n    // \"strictBindCallApply\": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */\n    // \"strictPropertyInitialization\": true,             /* Check for class properties that are declared but not set in the constructor. */\n    // \"noImplicitThis\": true,                           /* Enable error reporting when 'this' is given the type 'any'. */\n    // \"useUnknownInCatchVariables\": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */\n    // \"alwaysStrict\": true,                             /* Ensure 'use strict' is always emitted. */\n    // \"noUnusedLocals\": true,                           /* Enable error reporting when local variables aren't read. */\n    // \"noUnusedParameters\": true,                       /* Raise an error when a function parameter isn't read. */\n    // \"exactOptionalPropertyTypes\": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */\n    // \"noImplicitReturns\": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */\n    // \"noFallthroughCasesInSwitch\": true,               /* Enable error reporting for fallthrough cases in switch statements. */\n    // \"noUncheckedIndexedAccess\": true,                 /* Add 'undefined' to a type when accessed using an index. */\n    // \"noImplicitOverride\": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */\n    // \"noPropertyAccessFromIndexSignature\": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */\n    // \"allowUnusedLabels\": true,                        /* Disable error reporting for unused labels. */\n    // \"allowUnreachableCode\": true,                     /* Disable error reporting for unreachable code. */\n\n    /* Completeness */\n    // \"skipDefaultLibCheck\": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */\n    \"skipLibCheck\": false /* Skip type checking all .d.ts files. */\n  },\n}\n"
  },
  {
    "path": "webpack.js",
    "content": "module.exports = {\n  loader: require.resolve('./dist/webpack')\n}\n"
  }
]