[
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\nmax_line_length = 120\n\n[*.php]\nindent_size = 4\n\n[*.md]\ntrim_trailing_whitespace = true\n\n[*.test.js]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".eslintignore",
    "content": "/__tests__/util/_utils.js\n*.stub\n.run\n*.md\n"
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"env\": {\n    \"jest\": true\n  },\n  \"parserOptions\": {\n    \"ecmaVersion\": 2020,\n    \"sourceType\": \"module\"\n  },\n  \"extends\": [\n    \"prettier\"\n  ],\n  \"plugins\": [\n    \"prettier\"\n  ],\n  \"rules\": {\n    \"camelcase\": [\n      \"error\",\n      {\n        \"allow\": [\n          \"^unstable_\"\n        ]\n      }\n    ],\n    \"no-unused-vars\": [\n      2,\n      {\n        \"args\": \"none\",\n        \"argsIgnorePattern\": \"^_\"\n      }\n    ],\n    \"no-warning-comments\": 0,\n    \"prettier/prettier\": [\n      \"error\",\n      {\n        \"semi\": false,\n        \"singleQuote\": true,\n        \"printWidth\": 120,\n        \"tabWidth\": 2,\n        \"useTabs\": false,\n        \"trailingComma\": \"es5\",\n        \"bracketSpacing\": true,\n        \"parser\": \"flow\",\n        \"overrides\": [\n          {\n            \"files\": [\n              \"**/*.css\",\n              \"**/*.scss\",\n              \"**/*.html\"\n            ],\n            \"options\": {\n              \"singleQuote\": false\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n"
  },
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: mertasan\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/---bug-report.md",
    "content": "---\nname: \"\\U0001F4CC Bug report\"\nabout: Create a report to help us improve\ntitle: ''\nlabels: bug\nassignees: ''\n\n---\n\n### Versions:\n- Package Version: #.#.#\n- Tailwindcss Version: #.#.#\n\n### Description:\n\n<!-- Please describe in detail the nature of the bug, code samples, etc. -->\n\n### Steps To Reproduce:\n\n- …\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/---support-question.md",
    "content": "---\nname: \"\\U0001F914 Support Question\"\nabout: I need assistance or clarification on usage of this library\ntitle: ''\nlabels: question\nassignees: ''\n\n---\n\n### Versions:\n- Package Version: #.#.#\n- Tailwindcss Version: #.#.#\n\n### Question:\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/--feature-request.md",
    "content": "---\nname: \"\\U0001F389Feature request\"\nabout: Suggest an idea for this project\ntitle: ''\nlabels: feature request\nassignees: ''\n\n---\n\n### Summary\n\n<!--\nDescribe in detail what you propose, show (preferable) code examples and also signal if you're willing to work on it.\n-->\n"
  },
  {
    "path": ".github/dependabot.yml",
    "content": "version: 2\nupdates:\n- package-ecosystem: npm\n  directory: \"/\"\n  schedule:\n    interval: daily\n    time: \"03:00\"\n  open-pull-requests-limit: 10\n"
  },
  {
    "path": ".github/workflows/build.yml",
    "content": "name: build\n\non:\n  workflow_dispatch:\n  push:\n    paths:\n      - 'examples/**'\n  pull_request:\n    branches: [ master ]\n  release:\n    types: [ published, edited ]\n\njobs:\n  build:\n    if: ${{ github.event_name != 'pull_request' || (github.event_name == 'pull_request' && github.event.action == 'closed' && github.event.pull_request.merged == true) }}\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [16]\n\n    steps:\n      - uses: actions/checkout@v3\n\n      - name: Use Node ${{ matrix.node-version }}\n        uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.node-version }}\n\n      - name: Use cached node_modules\n        id: cache-build\n        uses: actions/cache@v3\n        with:\n          path: node_modules\n          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-build\n          restore-keys: |\n            nodeModules-\n      - name: Install dependencies\n        if: steps.cache-build.outputs.cache-hit != 'true'\n        run: npm install\n        env:\n          CI: true\n\n      - name: Building Examples\n        run: npm run build\n      - name: Clean CSS styles of the Examples are building\n        run: npm run build:clean\n"
  },
  {
    "path": ".github/workflows/publish.yml",
    "content": "name: npm-publish\n\non:\n  workflow_dispatch:\n  release:\n    types: [published, edited]\n\njobs:\n  publish:\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [16]\n\n    steps:\n      - uses: actions/checkout@v3\n\n      - name: Use Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.node-version }}\n          registry-url: 'https://registry.npmjs.org'\n          scope: '@mertasan'\n\n      - name: Use cached node_modules\n        id: cache-publish\n        uses: actions/cache@v3\n        with:\n          path: node_modules\n          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-publish\n          restore-keys: |\n            nodeModules-\n      - name: Install dependencies\n        if: steps.cache-publish.outputs.cache-hit != 'true'\n        run: npm install\n        env:\n          CI: true\n\n      - name: Test\n        run: npm run test\n        env:\n          CI: true\n\n      - name: Publish\n        run: npm publish\n        env:\n          CI: true\n          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/tests.yml",
    "content": "name: tests\n\non:\n  push:\n    branches:\n      - \"**\"\n    paths-ignore:\n      - '**.md'\n  pull_request:\n    types: [ready_for_review, synchronize, opened]\n  schedule:\n    - cron: '0 0 * * *'\n\njobs:\n  tests:\n    runs-on: ubuntu-latest\n    strategy:\n      matrix:\n        node-version: [16]\n\n    steps:\n      - name: Use Node ${{ matrix.node-version }}\n        uses: actions/checkout@v3\n      - name: Setup node ${{ matrix.node-version }}\n        uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.node-version }}\n          cache: 'npm'\n\n      - name: Install dependencies\n        if: steps.npm-cache.outputs.cache-hit != 'true'\n        run: npm install\n        env:\n          CI: true\n\n      - name: Lint\n        run: npm run lint\n        env:\n          CI: true\n\n      - name: Tests\n        run: npm run test -- --coverage\n        env:\n          CI: true\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules/\n**/*/package-lock.json\nyarn.lock\ncoverage/\n.DS_Store\n.idea\ncache/\n*.log\n"
  },
  {
    "path": ".npmignore",
    "content": "node_modules/\n/coverage\n/examples\nyarn.lock\nyarn-error.log\n.DS_Store\n.idea\n.prettierignore\n.run\ncache/\n"
  },
  {
    "path": ".prettierignore",
    "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\ncoverage\nbower_components\npackage.json\npackage-lock.json\nnode_modules/\n.npm\n.idea/\n.DS_Store\n__tests__/*\n!__tests__/util/*\nexamples/*\n!examples/**/*.config.js\n.run\n.editorconfig\ncache/\n.github/\n.eslintrc.json\n*.md\n.prettierrc\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"semi\": false,\n  \"singleQuote\": true,\n  \"printWidth\": 120,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"trailingComma\": \"es5\",\n  \"bracketSpacing\": true,\n  \"parser\": \"flow\",\n  \"overrides\": [\n    {\n      \"files\": [\n        \"**/*.css\",\n        \"**/*.scss\",\n        \"**/*.html\"\n      ],\n      \"options\": {\n        \"singleQuote\": false\n      }\n    }\n  ]\n}\n"
  },
  {
    "path": ".run/tailwindcss-variables-test.run.xml",
    "content": "<component name=\"ProjectRunConfigurationManager\">\n  <configuration default=\"false\" name=\"@mertasan/tailwindcss-variables\" type=\"JavaScriptTestRunnerJest\">\n    <node-interpreter value=\"project\"/>\n    <node-options value=\"\"/>\n    <jest-package value=\"$PROJECT_DIR$/node_modules/jest\"/>\n    <working-dir value=\"$PROJECT_DIR$/src\"/>\n    <jest-options value=\"--coverage\"/>\n    <envs/>\n    <scope-kind value=\"ALL\"/>\n    <method v=\"2\"/>\n  </configuration>\n</component>\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Mert Aşan <mert@yediyuz.com>\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": "README.md",
    "content": "<p>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/actions\"><img src=\"https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master&label=tests\" alt=\"Test Status\"></a>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/tree/master/examples\"><img src=\"https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=examples\" alt=\"Build Status\"></a>\n    <a href=\"https://www.npmjs.com/package/@mertasan/tailwindcss-variables\"><img src=\"https://img.shields.io/npm/dt/@mertasan/tailwindcss-variables\" alt=\"Total Downloads\"></a>\n    <a href=\"https://www.npmjs.com/package/@mertasan/tailwindcss-variables\"><img src=\"https://img.shields.io/npm/dw/%40mertasan%2Ftailwindcss-variables\" alt=\"Weekly Downloads\"></a>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/releases\"><img src=\"https://img.shields.io/npm/v/@mertasan/tailwindcss-variables.svg\" alt=\"Latest Release\"></a>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/blob/master/LICENSE\"><img src=\"https://img.shields.io/badge/License-MIT-green.svg?label=license\" alt=\"License\"></a>\n</p>\n\n# Tailwind CSS Variables\n\nThis package provides an easy way to define CSS variables for your Tailwind CSS project. You can use this package to create custom variables within your Tailwind configuration. This makes it easier to maintain consistency across your CSS, reduces repetition, allows you to configure variables based on various conditions, and eliminates the need to work directly with your CSS files to determine variables.\n\nSimilar to the tailwindcss configurations you are used to. It is also possible to define a different group of variables for Dark Mode. Alternatively, it has an API that you can use for your own plugins.\n\n## Highlights\n\n- Variables are as easy as defining tailwindcss colors...\n- You can designate the variables to `:root`, `:host` or custom CSS selectors.\n- Variables can be formed through using nested object notation.\n- Different variables can be composed for the Dark Mode.\n- Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.\n- Dark Mode custom selector is inherited from [Tailwind configuration](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name)\n- It allows you to add custom themes while creating your own plugin via the plugin API.\n- Prefix can be defined for variables. (It is useful when using the plugin API)\n- You can configure your own needs such as multi-themes without needing an additional plugin!\n\n\n## Documentation\n\n| Language | Documentation link|\n| --- | --- |\n| English | Documentation |\n| Turkish | [**Dökümantasyon**](./README.tr.md) |\n\n## Version Compatibility\n| Tailwind CSS | Package |\n|--------------|----------------|\n| 2.x          | 1.x            |\n| 3.x          | 2.x            |\n\n## Installation\n\n```cli\nnpm install -D @mertasan/tailwindcss-variables\n```\n\n## Playground\nSimple example: https://play.tailwindcss.com/hCpcvnGsPx?file=config\n\n## Usage\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    colors: {\n        red: {\n            50: 'var(--colors-red-50)'\n        }\n    },\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          button: {\n            size: '2rem'\n          }\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --sizes-button-size: 2rem;\n  --colors-red-50: #ff3232\n}\n\n.container {\n  --sizes-medium: 1.5rem\n}\n```\n\n## Dark Mode\n\n### with the `class` mode\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: 'class',\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --colors-red-50: red\n}\n\n.container {\n  --colors-red-50: indigo\n}\n\n:root.dark {\n  --colors-red-50: blue\n}\n\n:root.dark .container {\n  --colors-red-50: green\n}\n```\n\n#### Custom dark selector\n\nNote that the plugin will use your custom selector if [enabled in your Tailwind configuration](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name).\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: ['class', '.custom-dark-selector'],\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-red-50: red\n}\n\n:root.custom-dark-selector {\n  --colors-red-50: blue\n}\n```\n\n#### with the `darkToRoot` configuration\n\nIf the `darkMode` configuration is set as `'class'` in your tailwindcss configuration, you can change and customize the `darkToRoot` setting.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: ['class', '.custom-dark-selector'],\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      darkToRoot: false,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n    --sizes-small: 1rem;\n    --colors-red-50: red\n}\n\n.container {\n    --colors-red-50: indigo\n}\n\n.custom-dark-selector {\n    --colors-red-50: blue\n}\n\n.custom-dark-selector .container {\n    --colors-red-50: green\n}\n```\n\n### with the `media` mode\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: 'media',\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --colors-red-50: red\n}\n\n.container {\n    --colors-red-50: indigo\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --colors-red-50: blue\n  }\n\n  .container {\n    --colors-red-50: green\n  }\n}\n```\n\n## Prefix\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          button: {\n            size: '2rem'\n          }\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      variablePrefix: 'admin'\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --admin-sizes-small: 1rem;\n  --admin-sizes-button-size: 2rem;\n  --admin-colors-red-50: #ff3232\n}\n\n.container {\n    --admin-sizes-medium: 1.5rem\n}\n```\n\n## Nested object notation\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          DEFAULT: '1px',\n          small: '1rem',\n          admin: {\n            DEFAULT: '2px',\n            buttons: {\n              colors: {\n                red: {\n                  DEFAULT: '#ffffff',\n                  500: '#ff0000',\n                  600: '#e60000',\n                }\n              }\n            }\n          }\n        },\n      }\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n```css\n:root {\n  --sizes: 1px;\n  --sizes-small: 1rem;\n  --sizes-admin: 2px;\n  --sizes-admin-buttons-colors-red-500: #ff0000;\n  --sizes-admin-buttons-colors-red-600: #e60000;\n  --sizes-admin-buttons-colors-red: #ffffff\n}\n```\n\n\n## Rules for keys of variables\n\nVariable keys can only include designated characters. Other characters will be automatically removed. Because using underscores (_) on objects is allowed, underscores will be transformed into middle dashes (-).\n\n\nRule:\n````jsregexp\n/[^a-zA-Z0-9-.]+/gi\n````\n\n| Before                               | After                             |\n|--------------------------------------|-----------------------------------|\n| hello[$&+,:;=?@#'<>-^*()%!]WORLD     | hello-WORLD                     \t |\n| hello__world                       \t | hello-world   \t                   |\n| css_variables_for-tailwindcss   \t    | css-variables-for-tailwindcss   \t |\n| foo-bar-1.0   \t                      | foo-bar-1\\\\.0   \t                 |\n\nHere's an example:\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          'hello[$&+,:;=?@#|\\'<>-^*()%!]WORLD': '100%',\n          underscore_to_dash: '100%',\n          'underscore_to_dash-with-dash': '100%',\n          auto_dash: '100%',\n        },\n        sizes: {\n          1.5: '1rem',\n          xl: {\n            '3.0': '2rem',\n          },\n        },\n      },\n      '[type=\\'button\\']': {\n        'hello[$&+,:;=?@#|\\'<>-^*()%!]WORLD': '100%',\n        underscore_to_dash: '100%',\n        'underscore_to_dash-with-dash': '100%',\n        auto_dash: '100%',\n        nested_auto_dash: {\n          color_primary: '100%',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-hello-WORLD: 100%;\n  --colors-underscore-to-dash: 100%;\n  --colors-underscore-to-dash-with-dash: 100%;\n  --colors-auto-dash: 100%;\n  --sizes-1\\.5: 1rem;\n  --sizes-xl-3\\.0: 2rem\n}\n\n[type='button'] {\n  --hello-WORLD: 100%;\n  --underscore-to-dash: 100%;\n  --underscore-to-dash-with-dash: 100%;\n  --auto-dash: 100%;\n  --nested-auto-dash-color-primary: 100%\n}\n```\n\n## Helpers\n\n### `colorVariable()`\n\nYou can use the `colorVariable` helper to add `text-opacity` or `bg-opacity` to the variables for which colors are defined.\n\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      primary: colorVariable('--colors-primary'), // HEX (3 digits)\n      secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)\n      white: '#ffffff', // no variable\n      blue: colorVariable('var(--colors-blue)'), // RGB\n      red: {\n        400: colorVariable('var(--colors-red-400)'), // RGBA\n        500: colorVariable('var(--colors-red-500)'), // RGBA\n        600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)\n      },\n      gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)\n      green: 'var(--colors-green)', // RGB (without using colorVariable() helper)\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          primary: '#ff0',\n          secondary: '#000000',\n          gray: '#6B7280',\n          blue: 'rgb(0,0,254)',\n          red: {\n            400: 'rgba(254,0,0,0.5)',\n            500: 'rgba(254,0,0,1)',\n          },\n          green: 'rgb(0,255,0)',\n        },\n        sizes: {\n          small: '10px',\n          medium: '2rem',\n          large: '100%',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true\n    })\n  ]\n}\n```\n\n**Purge:**\n\n```html\n<div class=\"text-opacity-50 text-primary\"></div>\n<div class=\"bg-opacity-50 bg-secondary\"></div>\n<div class=\"bg-opacity-50 bg-gray\"></div>\n<div class=\"text-opacity-50 text-blue\"></div>\n<div class=\"bg-red-400\"></div>\n<div class=\"bg-red-500\"></div>\n<div class=\"bg-red-600\"></div>\n<div class=\"bg-opacity-50 bg-green\"></div>\n<div class=\"bg-white bg-opacity-50\"></div>\n```\n**Output:**\n\n```css\n:root {\n  --colors-primary: #ff0;\n  --colors-secondary: #000000;\n  --colors-gray: #6B7280;\n  --colors-blue: rgb(0,0,254);\n  --colors-red-400: rgba(254,0,0,0.5);\n  --colors-red-500: rgba(254,0,0,1);\n  --colors-red-400-rgb: 254,0,0;\n  --colors-red-500-rgb: 254,0,0;\n  --colors-green: rgb(0,255,0);\n  --colors-primary-rgb: 255,255,0;\n  --colors-secondary-rgb: 0,0,0;\n  --colors-gray-rgb: 107,114,128;\n  --colors-blue-rgb: 0,0,254;\n  --colors-green-rgb: 0,255,0;\n  --sizes-small: 10px;\n  --sizes-medium: 2rem;\n  --sizes-large: 100%\n}\n\n.text-primary {\n --tw-text-opacity: 1;\n color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))\n}\n\n.text-blue {\n --tw-text-opacity: 1;\n color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n --tw-text-opacity: 0.5\n}\n\n.bg-secondary {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity))\n}\n\n.bg-red-400 {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))\n}\n\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))\n}\n\n.bg-red-600 {\n  background-color: var(--colors-red-500)\n}\n\n.bg-gray {\n background-color: var(--colors-gray)\n}\n\n.bg-green {\n background-color: var(--colors-green)\n}\n\n.bg-opacity-50 {\n --tw-bg-opacity: 0.5\n}\n```\n\n\n\n### forceRGB\n\nIf `forceRGB` is set to `true`, no additional variables are created.\n\n#### Before\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      green: colorVariable('var(--colors-green)'),\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-green: #11ff00;\n  --colors-green-rgb: 17,255,0\n}\n\n.text-green {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))\n}\n```\n\n#### After\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      green: colorVariable('var(--colors-green)', true),\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n      forceRGB: true,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-green: 17,255,0;\n}\n\n.text-green {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-green), var(--tw-text-opacity))\n}\n```\n\n### useHost\n\nIf `useHost` is set to `true`, `:host` is used instead of `:root` for variables injection.\n\n#### Config\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      useHost: true,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:host {\n  --colors-green: #11ff00;\n}\n```\n\n### extendColors for colorVariable\n\nInstead of using each of the colors between the variables as `colorVariable('var(--colors-red)')`,\nYou can define colors in the `extendColors` option.\n\n**Example:**\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      white: '#fff',\n      green: 'var(--colors-green)',\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          blue: '#0065ff',\n          red: '#ff0000',\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n      extendColors: {\n        blue: 'var(--colors-blue)',\n        red: 'var(--colors-red)',\n      }\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-blue: #0065ff;\n  --colors-red: #ff0000;\n  --colors-green: #11ff00;\n  --colors-blue-rgb: 0,101,255;\n  --colors-red-rgb: 255,0,0;\n  --colors-green-rgb: 17,255,0\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n\n.text-green {\n  color: var(--colors-green)\n}\n\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n}\n\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n  --tw-text-opacity: 0.5\n}\n```\n\n\n**Example 2 - Using with [forceRGB](#forcergb):**\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      white: '#fff',\n      green: 'var(--colors-green)',\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          blue: '#0065ff',\n          red: '#ff0000',\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      colorVariables: true,\n      forceRGB: true,\n      extendColors: {\n        blue: 'var(--colors-blue)',\n        red: 'var(--colors-red)',\n      }\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-blue: 0,101,255;\n  --colors-red: 255,0,0;\n  --colors-green: 17,255,0\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n\n.text-green {\n  color: var(--colors-green)\n}\n\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue), var(--tw-text-opacity))\n}\n\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-red), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n  --tw-text-opacity: 0.5\n}\n```\n\n### toBase\n\nBy default, variables are added to `@tailwind base;` styles.\nIf you don't include `@tailwind base;` styles in your `css`, set the `toBase` option to `false`. In this case, the variables will be added to the `@tailwind components;` styles.\n\n```js\n//...\nplugins: [\n  require('@mertasan/tailwindcss-variables')({\n    toBase: false, // default: true\n  })\n]\n//...\n```\n\n- [tailwindcss.com - Functions and directives](https://tailwindcss.com/docs/functions-and-directives#tailwind)\n\n## API example for your own plugins\n\n- [Detailed Explanation](#gerçek-kullanım-örneği-detaylı)\n\n```javascript\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\n\nlet variableOptions = {\n  variablePrefix: 'myplugin'\n}\n\nconst pluginVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'black',\n      secondary: 'white',\n      warning: 'orange',\n    },\n  },\n}\n\nconst pluginDarkVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'red',\n      secondary: 'yellow',\n      warning: 'green',\n    },\n  },\n}\n\nmodule.exports = {\n  plugins: [\n    plugin(function({ addComponents, config }) {\n\n      addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --myplugin-colors-primary: black;\n  --myplugin-colors-secondary: white;\n  --myplugin-colors-warning: orange\n}\n\n:root.dark {\n  --myplugin-colors-primary: red;\n  --myplugin-colors-secondary: yellow;\n  --myplugin-colors-warning: green\n}\n```\n\n### API component helper\n\nYou can also use tailwindcss-variables plugin API to register your components.\n\n```javascript\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\n\nlet variableOptions = {\n  variablePrefix: 'myplugin'\n}\n\nconst pluginVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'black',\n      secondary: 'white',\n      warning: 'orange',\n    },\n  },\n}\n\nconst pluginDarkVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'red',\n      secondary: 'yellow',\n      warning: 'green',\n    },\n  },\n}\n\nmodule.exports = {\n  plugins: [\n    plugin(function({ addComponents, config }) {\n      const formComponents = {\n        select: {\n          DEFAULT: {\n            backgroundColor: 'var(--myplugin-colors-primary)',\n          },\n          multi: {\n            '&.default-multi': {\n              backgroundColor: 'var(--myplugin-colors-secondary)',\n            },\n            '&.other-multi': {\n              backgroundColor: 'var(--myplugin-colors-warning)',\n            },\n          },\n        },\n      }\n\n      addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', formComponents))\n    })\n  ]\n}\n```\n\n**Output:**\n```css\n:root {\n  --myplugin-colors-primary: black;\n  --myplugin-colors-secondary: white;\n  --myplugin-colors-warning: orange;\n}\n\n:root.dark {\n  --myplugin-colors-primary: red;\n  --myplugin-colors-secondary: yellow;\n  --myplugin-colors-warning: green;\n}\n\n.form-select {\n    background-color: var(--myplugin-colors-primary);\n}\n\n.form-select.default-multi {\n    background-color: var(--myplugin-colors-secondary);\n}\n\n.form-select.other-multi {\n    background-color: var(--myplugin-colors-warning);\n}\n```\n\n## Detailed example of the API\n\n**What are the advantages?**\n\nImagine you are creating a form builder (PHP) package for Laravel. In this case, I am sure there will be a lot of styles to customize. Nonetheless, one of the most necessary things is the colors! You'll develop the components with the colors you pick out. Of course these colors can be customized with the `vendor:publish` command but you can make it simpler for everyone. Users can customize the colors for their own likings and if they wish they can also configure your plugin for the dark mode as well. This way, users don't have to alter the `.css` or `.blade.php` files for some small and simple customizations. Thus, they can use your package with up to date components and can adapt to future version updates. If you have read this statement, it means that now you know why this plugin came about. :)\n\n\n\n**What are the disadvantages?**\n\nIf you have any ideas, please don't refrain to send a PR.\n\n**Resources on this example:**\n\n- [Source](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples/readme-source)\n- [test](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__/readme.test.js)\n\n**Your own plugin themes:**\n```javascript\n// myplugin/themes.js\nmodule.exports = (theme) => ({\n  themes: {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'orange',\n      },\n    }\n  }\n})\n```\n\n**Your own plugin components:**\n```javascript\n// myplugin/components.js\nmodule.exports = (theme) => ({\n  select: {\n    DEFAULT: {\n      backgroundColor: 'var(--forms-colors-primary)',\n    },\n    multi: {\n      '.default-multi': {\n        backgroundColor: 'var(--forms-colors-secondary)',\n      },\n      '.other-multi': {\n        backgroundColor: 'var(--forms-colors-warning)',\n      },\n    },\n  },\n})\n```\n\n**Your own plugin source:**\n```javascript\n// myplugin/index.js\nconst plugin = require('tailwindcss/plugin')\nconst _ = require('lodash')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\nconst pluginComponents = require('./components')\nconst pluginThemes = require('./themes')\n\nmodule.exports = plugin.withOptions(\n  function (options) {\n    return function ({addComponents, theme, config}) {\n\n      let variableOptions = {\n        variablePrefix: theme('myPlugin.prefix', 'forms')\n      };\n\n      addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))\n\n      let darkVariables = theme('myPlugin.darkOptions', {});\n      if (!_.isEmpty(darkVariables)) {\n        addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))\n      }\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))\n\n    }\n  }\n)\n```\n\n**User config:** (`tailwind.config.js`)\n```javascript\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    myPlugin: {\n      options: {\n        colors: {\n          primary: 'indigo', // custom color instead of default color\n        }\n      }\n    },\n  },\n  plugins: [require('my-plugin')],\n}\n```\n\n**Output:**\n```css\n:root {\n  --forms-colors-primary: indigo; /* <<< default color changed via root configuration */\n  --forms-colors-secondary: white;\n  --forms-colors-warning: orange;\n}\n\n.form-select {\n    background-color: var(--forms-colors-primary);\n}\n\n.form-select .default-multi {\n    background-color: var(--forms-colors-secondary);\n}\n\n.form-select .other-multi {\n    background-color: var(--forms-colors-warning);\n}\n```\n\nBased on these examples, it won't be necessary to publish extra .css files for your plugin styles and also, it won't be necessary for the users to sort out your style files to compile your packages.\n\n\n\n## Examples and tests\n\nI have prepared examples on both helping with the usage and for testing all of the features that's being offered to make sure it works just fine.\n\n\n| Source                                                                                                     | State                                                                                                                                            |\n|------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|\n| [Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples)                         | ![Examples](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=examples)\t        |\n| [Plugin API Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![API Examples](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=api-examples) |\n| [Tests](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__)                           | ![Tests](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master&label=tests)               |\n\n> Documents on examples and tests are re-organized on pull-request, push, release and etc. events.\n> For this reason, file paths like `require(../index)` have been used on the example files. If you were to use the examples, you need to change the relevant lines as `require('@mertasan/tailwindcss-variables')`.\n\n\n## If You Need Help\n\nPlease send any questions and issues through GitHub issues. I will try my best to help you.\n\n## Contribution\n\nIf you are to improve or/and add new features, please feel free to send pull-requests.\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n"
  },
  {
    "path": "README.tr.md",
    "content": "<p>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/actions\"><img src=\"https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master&label=tests\" alt=\"Test Status\"></a>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/tree/master/examples\"><img src=\"https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=examples\" alt=\"Build Status\"></a>\n    <a href=\"https://www.npmjs.com/package/@mertasan/tailwindcss-variables\"><img src=\"https://img.shields.io/npm/dt/@mertasan/tailwindcss-variables\" alt=\"Total Downloads\"></a>\n    <a href=\"https://www.npmjs.com/package/@mertasan/tailwindcss-variables\"><img src=\"https://img.shields.io/npm/dw/%40mertasan%2Ftailwindcss-variables\" alt=\"Weekly Downloads\"></a>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/releases\"><img src=\"https://img.shields.io/npm/v/@mertasan/tailwindcss-variables.svg\" alt=\"Latest Release\"></a>\n    <a href=\"https://github.com/mertasan/tailwindcss-variables/blob/master/LICENSE\"><img src=\"https://img.shields.io/badge/License-MIT-green.svg?label=license\" alt=\"License\"></a>\n</p>\n\n# Tailwind CSS Variables\n\nBu paket, Tailwind CSS projeniz için CSS değişkenlerini tanımlamanın kolay bir yolunu sunar. Bu paketi, kuyruk rüzgarı yapılandırmanızda özel değişkenler oluşturmak için kullanabilirsiniz. Bu, CSS'nizde tutarlılığı korumanızı kolaylaştırır, tekrarlamayı azaltır, çeşitli koşullara göre değişkenleri yapılandırmanıza olanak tanır ve değişkenleri belirlemek için CSS dosyalarınızla doğrudan çalışma ihtiyacını ortadan kaldırır.\n\nKullanım şekli, tailwindcss'in varsayılan yapılandırmaları ile benzer şekildedir. Dark Mode için ayrı değişken\ngrubu belirleyebilmek, plugin API aracılığıyla kendi eklentilerinize kolayca entegre edebilmek de mümkün.\n\n## Öne çıkan özellikler\n\n- Değişkenler, tailwindcss renklerini tanımlamak kadar basit.\n- Değişkenleri `:root` ya da custom CSS seçicilere tanımlayabilirsiniz.\n- Değişkenler iç içe geçmiş obje notasyonu (nested object notation) kullanılarak oluşturulabilir.\n- Dark Mode için farklı değişkenler oluşturulabilir.\n- Dark Mode değişkenleri, yapılandırmanızdaki `class` ya da `media` moduna göre otomatik tanımlanır.\n- Dark Mode özel seçicisi, [Tailwind yapılandırmasını](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name) dikkate alır.\n- Plugin API aracılığıyla kendi eklentinizi oluştururken tema yapılandırması yapmanıza olanak sağlar.\n- Değişkenler için prefix tanımlaması yapılabilir. (plugin API için faydalı)\n- Değişkenler, yapılandırma dosyasında veya .css vb. stil dosyalarında kullanılabilir.\n- Çoklu tema gibi gereksinimlerinizi ek bir eklentiye gerek kalmadan kendiniz yapılandırabilirsiniz!\n\n## Dökümantasyonlar\n\n| Dil | Dökümantasyon linki |\n| --- | --- |\n| English | [**Documentation**](./README.md) |\n| Türkçe | Dokümantasyon |\n\n## Versiyon Uyumluluğu\n| Tailwind CSS | Paket |\n|--------------|-------|\n| 2.x          | 1.x   |\n| 3.x          | 2.x   |\n\n## Kurulum\n\n```cli\nnpm install -D @mertasan/tailwindcss-variables\n```\n\n## Canlı önizleme\nBasit bir örnek: https://play.tailwindcss.com/hCpcvnGsPx?file=config\n\n## Basit Kullanım\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    colors: {\n        red: {\n            50: 'var(--colors-red-50)'\n        }\n    },\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          button: {\n            size: '2rem'\n          }\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --sizes-button-size: 2rem;\n  --colors-red-50: #ff3232\n}\n\n.container {\n  --sizes-medium: 1.5rem\n}\n```\n\n## Dark Mode\n\n### `class` modu ile\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: 'class',\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --colors-red-50: red\n}\n\n.container {\n  --colors-red-50: indigo\n}\n\n:root.dark {\n  --colors-red-50: blue\n}\n\n:root.dark .container {\n  --colors-red-50: green\n}\n```\n\n#### Özel Dark Mode Seçicisi\n\n[Tailwind yapılandırmanızda](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name) etkinleştirilmiş ise, eklentinin özel seçicinizi kullanacağını unutmayın.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: ['class', '.custom-dark-selector'],\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-red-50: red\n}\n\n:root.custom-dark-selector {\n  --colors-red-50: blue\n}\n```\n\n#### `darkToRoot` ayarları ile\n\nEğer tailwindcss yapılandırmanızda `darkMode` eğer `class` olarak tanımlıysa, eklentinin `darkToRoot` ayarını kullanarak özelleştirebilirsiniz.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: ['class', '.custom-dark-selector'],\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      darkToRoot: false,\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n    --sizes-small: 1rem;\n    --colors-red-50: red\n}\n\n.container {\n    --colors-red-50: indigo\n}\n\n.custom-dark-selector {\n    --colors-red-50: blue\n}\n\n.custom-dark-selector .container {\n    --colors-red-50: green\n}\n```\n\n### `media` modu ile\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n\n  darkMode: 'media',\n\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n        },\n        colors: {\n          red: {\n            50: 'red',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'indigo',\n          },\n        },\n      },\n    },\n    darkVariables: {\n      DEFAULT: {\n        colors: {\n          red: {\n            50: 'blue',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: 'green',\n          },\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --sizes-small: 1rem;\n  --colors-red-50: red\n}\n\n.container {\n    --colors-red-50: indigo\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --colors-red-50: blue\n  }\n\n  .container {\n    --colors-red-50: green\n  }\n}\n```\n\n## Prefix Kullanımı\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          button: {\n            size: '2rem'\n          }\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')({\n      variablePrefix: 'admin'\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --admin-sizes-small: 1rem;\n  --admin-sizes-button-size: 2rem;\n  --admin-colors-red-50: #ff3232\n}\n\n.container {\n    --admin-sizes-medium: 1.5rem\n}\n```\n\n## İç içe geçmiş obje notasyonu (Nested)\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        sizes: {\n          DEFAULT: '1px',\n          small: '1rem',\n          admin: {\n            DEFAULT: '2px',\n            buttons: {\n              colors: {\n                red: {\n                  DEFAULT: '#ffffff',\n                  500: '#ff0000',\n                  600: '#e60000',\n                }\n              }\n            }\n          }\n        },\n      }\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n```css\n:root {\n  --sizes: 1px;\n  --sizes-small: 1rem;\n  --sizes-admin: 2px;\n  --sizes-admin-buttons-colors-red-500: #ff0000;\n  --sizes-admin-buttons-colors-red-600: #e60000;\n  --sizes-admin-buttons-colors-red: #ffffff\n}\n```\n\n\n## Key adlandırma kuralları\n\nDeğişken keyleri yalnızca belirli karakterlere sahip olabilir. Diğer karakterler otomatik olarak temizlenir.\nObjelerde alt tire (_) kullanımı mümkün olduğundan, alt tireler de orta çizgiye (-) dönüştürülür.\n\nRule:\n````jsregexp\n/[^a-zA-Z0-9-.]+/gi\n````\n\n| öncesi                               | sonrası                           |\n|--------------------------------------|-----------------------------------|\n| hello[$&+,:;=?@#'<>-^*()%!]WORLD     | hello-WORLD                     \t |\n| hello__world                       \t | hello-world   \t                   |\n| css_variables_for-tailwindcss   \t    | css-variables-for-tailwindcss   \t |\n| foo-bar-1.0   \t                      | foo-bar-1\\\\.0   \t                 |\n\nİşte bir örnek:\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    variables: {\n      DEFAULT: {\n        colors: {\n          'hello[$&+,:;=?@#|\\'<>-^*()%!]WORLD': '100%',\n          underscore_to_dash: '100%',\n          'underscore_to_dash-with-dash': '100%',\n          auto_dash: '100%',\n        },\n        sizes: {\n          1.5: '1rem',\n          xl: {\n            '3.0': '2rem',\n          },\n        },\n      },\n      '[type=\\'button\\']': {\n        'hello[$&+,:;=?@#|\\'<>-^*()%!]WORLD': '100%',\n        underscore_to_dash: '100%',\n        'underscore_to_dash-with-dash': '100%',\n        auto_dash: '100%',\n        nested_auto_dash: {\n          color_primary: '100%',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables')\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-hello-WORLD: 100%;\n  --colors-underscore-to-dash: 100%;\n  --colors-underscore-to-dash-with-dash: 100%;\n  --colors-auto-dash: 100%;\n  --sizes-1\\.5: 1rem;\n  --sizes-xl-3\\.0: 2rem\n}\n\n[type='button'] {\n  --hello-WORLD: 100%;\n  --underscore-to-dash: 100%;\n  --underscore-to-dash-with-dash: 100%;\n  --auto-dash: 100%;\n  --nested-auto-dash-color-primary: 100%\n}\n```\n\n## Yardımcı Fonksiyonlar (Helpers)\n\n### `colorVariable()`\n\nRenk değişkenlerini `colorVariable` helper fonksiyonunu kullanarak tanımlamanız halinde, renkleri `text-opacity` ya da `bg-opacity` gibi\nek classlar ile uyumlu hale getirmeniz mümkün.\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      primary: colorVariable('--colors-primary'), // HEX (3 haneli)\n      secondary: colorVariable('var(--colors-secondary)'), // HEX (6 haneli)\n      white: '#ffffff', // standart kullanım (output incelemesi için)\n      blue: colorVariable('var(--colors-blue)'), // RGB\n      red: {\n        400: colorVariable('var(--colors-red-400)'), // RGBA\n        500: colorVariable('var(--colors-red-500)'), // RGBA\n        600: 'var(--colors-red-500)', // RGBA (colorVariable() yardımcısı kullanmadan)\n      },\n      gray: 'var(--colors-gray)', // HEX (6 haneli) (colorVariable() yardımcısı kullanmadan)\n      green: 'var(--colors-green)', // RGB (colorVariable() yardımcısı kullanmadan)\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          primary: '#ff0',\n          secondary: '#000000',\n          gray: '#6B7280',\n          blue: 'rgb(0,0,254)',\n          red: {\n            400: 'rgba(254,0,0,0.5)',\n            500: 'rgba(254,0,0,1)',\n          },\n          green: 'rgb(0,255,0)',\n        },\n        sizes: {\n          small: '10px',\n          medium: '2rem',\n          large: '100%',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables'){\n      colorVariables: true\n    }\n  ]\n}\n```\n\n**Purge:**\n\n```html\n<div class=\"text-primary text-opacity-50\"></div>\n<div class=\"bg-secondary bg-opacity-50\"></div>\n<div class=\"bg-gray bg-opacity-50\"></div>\n<div class=\"text-blue text-opacity-50\"></div>\n<div class=\"bg-red-400\"></div>\n<div class=\"bg-red-500\"></div>\n<div class=\"bg-red-600\"></div>\n<div class=\"bg-green bg-opacity-50\"></div>\n<div class=\"bg-white bg-opacity-50\"></div>\n```\n**Output:**\n\n```css\n:root {\n  --colors-primary: #ff0;\n  --colors-secondary: #000000;\n  --colors-gray: #6B7280;\n  --colors-blue: rgb(0,0,254);\n  --colors-red-400: rgba(254,0,0,0.5);\n  --colors-red-500: rgba(254,0,0,1);\n  --colors-red-400-rgb: 254,0,0;\n  --colors-red-500-rgb: 254,0,0;\n  --colors-green: rgb(0,255,0);\n  --colors-primary-rgb: 255,255,0;\n  --colors-secondary-rgb: 0,0,0;\n  --colors-gray-rgb: 107,114,128;\n  --colors-blue-rgb: 0,0,254;\n  --colors-green-rgb: 0,255,0;\n  --sizes-small: 10px;\n  --sizes-medium: 2rem;\n  --sizes-large: 100%\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))\n}\n\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n  --tw-text-opacity: 0.5\n}\n\n.bg-secondary {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))\n}\n\n.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))\n}\n\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))\n}\n\n.bg-red-600 {\n  background-color: var(--colors-red-500)\n}\n\n.bg-gray {\n  background-color: var(--colors-gray)\n}\n\n.bg-green {\n  background-color: var(--colors-green)\n}\n\n.bg-opacity-50 {\n  --tw-bg-opacity: 0.5\n}\n```\n\n### forceRGB\n\nEğer forceRGB `true` olarak tanımlanırsa ek değişkenler oluşturulmaz.\n\n#### Öncesi\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      green: colorVariable('var(--colors-green)'),\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables'){\n      colorVariables: true,\n    }\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-green: #11ff00;\n  --colors-green-rgb: 17,255,0\n}\n\n.text-green {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))\n}\n```\n\n#### Sonrası\n\n```javascript\n// tailwind.config.js\n\nconst colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      green: colorVariable('var(--colors-green)', true),\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables'){\n      colorVariables: true,\n      forceRGB: true,\n    }\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-green: 17,255,0;\n}\n\n.text-green {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-green), var(--tw-text-opacity))\n}\n```\n\n\n### colorVariable için extendColors\n\nDeğişkenler arasındaki renklerin her birisini `colorVariable('var(--colors-red)')` şeklinde kullanmak yerine,\nrenkleri `extendColors` kısmında tanımlayabilirsiniz.\n\n**Örnek:**\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      white: '#fff',\n      green: 'var(--colors-green)',\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          blue: '#0065ff',\n          red: '#ff0000',\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables'){\n      colorVariables: true,\n      extendColors: {\n        blue: 'var(--colors-blue)',\n        red: 'var(--colors-red)',\n      }\n    }\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-blue: #0065ff;\n  --colors-red: #ff0000;\n  --colors-green: #11ff00;\n  --colors-blue-rgb: 0,101,255;\n  --colors-red-rgb: 255,0,0;\n  --colors-green-rgb: 17,255,0\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n\n.text-green {\n  color: var(--colors-green)\n}\n\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n}\n\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n  --tw-text-opacity: 0.5\n}\n```\n\n\n**2. Örnek - [forceRGB](#forcergb) ile birlikte kullanımı:**\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    screens: false,\n    colors: {\n      white: '#fff',\n      green: 'var(--colors-green)',\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          blue: '#0065ff',\n          red: '#ff0000',\n          green: '#11ff00',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('@mertasan/tailwindcss-variables'){\n      colorVariables: true,\n      forceRGB: true,\n      extendColors: {\n        blue: 'var(--colors-blue)',\n        red: 'var(--colors-red)',\n      }\n    }\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --colors-blue: 0,101,255;\n  --colors-red: 255,0,0;\n  --colors-green: 17,255,0\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n\n.text-green {\n  color: var(--colors-green)\n}\n\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue), var(--tw-text-opacity))\n}\n\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-red), var(--tw-text-opacity))\n}\n\n.text-opacity-50 {\n  --tw-text-opacity: 0.5\n}\n```\n\n### toBase\n\nVarsayılan olarak, değişkenler `@tailwind base;` stillerine eklenir.\nEğer projenizin `css` dosyasına `@tailwind base;` stillerini dahil etmiyorsanız, `toBase` seçeneğini `false` durumuna getirebilirsiniz.\nBu durumda değişkenler `@tailwind components;` stillerine dahil edilecektir.\n\n```js\n//...\nplugins: [\n  require('@mertasan/tailwindcss-variables')({\n    toBase: false, // varsayılan: true\n  })\n]\n//...\n```\n\n- [tailwindcss.com - Functions and directives](https://tailwindcss.com/docs/functions-and-directives#tailwind)\n\n\n## Kendi eklentileriniz için API örneği\n\n- [Ayrıntılı açıklama](#gerçek-kullanım-örneği-detaylı)\n\n```javascript\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\n\nlet variableOptions = {\n  variablePrefix: 'myplugin'\n}\n\nconst pluginVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'black',\n      secondary: 'white',\n      warning: 'orange',\n    },\n  },\n}\n\nconst pluginDarkVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'red',\n      secondary: 'yellow',\n      warning: 'green',\n    },\n  },\n}\n\nmodule.exports = {\n  plugins: [\n    plugin(function({ addComponents, config }) {\n\n      addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n\n    })\n  ]\n}\n```\n\n**Output:**\n\n```css\n:root {\n  --myplugin-colors-primary: black;\n  --myplugin-colors-secondary: white;\n  --myplugin-colors-warning: orange\n}\n\n:root.dark {\n  --myplugin-colors-primary: red;\n  --myplugin-colors-secondary: yellow;\n  --myplugin-colors-warning: green\n}\n```\n\n### API Component helper\n\ntailwindcss-variables plugin API'yi bileşenlerinizi kayıt etmek için de kullanabilirsiniz.\n\n```javascript\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\n\nlet variableOptions = {\n  variablePrefix: 'myplugin'\n}\n\nconst pluginVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'black',\n      secondary: 'white',\n      warning: 'orange',\n    },\n  },\n}\n\nconst pluginDarkVariables = {\n  DEFAULT: {\n    colors: {\n      primary: 'red',\n      secondary: 'yellow',\n      warning: 'green',\n    },\n  },\n}\n\nmodule.exports = {\n  plugins: [\n    plugin(function({ addComponents, config }) {\n      const formComponents = {\n        select: {\n          DEFAULT: {\n            backgroundColor: 'var(--myplugin-colors-primary)',\n          },\n          multi: {\n            '&.default-multi': {\n              backgroundColor: 'var(--myplugin-colors-secondary)',\n            },\n            '&.other-multi': {\n              backgroundColor: 'var(--myplugin-colors-warning)',\n            },\n          },\n        },\n      }\n\n      addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', formComponents))\n    })\n  ]\n}\n```\n\n**Output:**\n```css\n:root {\n  --myplugin-colors-primary: black;\n  --myplugin-colors-secondary: white;\n  --myplugin-colors-warning: orange;\n}\n\n:root.dark {\n  --myplugin-colors-primary: red;\n  --myplugin-colors-secondary: yellow;\n  --myplugin-colors-warning: green;\n}\n\n.form-select {\n    background-color: var(--myplugin-colors-primary);\n}\n\n.form-select.default-multi {\n    background-color: var(--myplugin-colors-secondary);\n}\n\n.form-select.other-multi {\n    background-color: var(--myplugin-colors-warning);\n}\n```\n\n## Gerçek kullanım örneği (detaylı)\n\n**Avantajları neler?**\n\nLaravel için bir form oluşturucu (PHP) paketi oluşturduğunuzu hayal edin. Bu durumda özelleştirmeniz gereken\nbirçok stil olacağına eminim. Ancak en gerekli olan şeylerden bir tanesi renkler! Bileşenleri kendi belirlediğiniz\nrenklerle oluşturursunuz. Elbette bu renkler `vendor:publish` komutu ile kullanıcılar tarafından özelleştirilebilir ama\nbunu herkes için daha basit hale getirebilirsiniz. Kullanıcılar renkleri kendileri yapılandırabilir, isterlerse\neklentinizi dark mode için yapılandırabilirler. Böylelikle, kullanıcılar bazı basit değişiklikler için\n`.css` veya `.blade.php` dosyalarını özelleştirmek zorunda kalmazlar. Bu sayede eklentinizi güncel şablonlarıyla\nbirlikte kullanarak, gelecekteki versiyon güncellemelerine uyum sağlayabilirler. Bu açıklamayı okuduysanız eğer,\nbu eklentininin ortaya çıkma nedenini artık biliyorsunuz demektir. :)\n\n\n**Dezavantajları neler?**\n\nBir fikriniz varsa eğer, lütfen PR göndermekten çekinmeyin.\n\n**Bu örnek ile ilgili kaynaklar:**\n\n- [kaynak](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples/readme-source)\n- [test](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__/readme.test.js)\n\n**Your own plugin themes:**\n```javascript\n// myplugin/themes.js\nmodule.exports = (theme) => ({\n  themes: {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'orange',\n      },\n    }\n  }\n})\n```\n\n**Your own plugin components:**\n```javascript\n// myplugin/components.js\nmodule.exports = (theme) => ({\n  select: {\n    DEFAULT: {\n      backgroundColor: 'var(--forms-colors-primary)',\n    },\n    multi: {\n      '.default-multi': {\n        backgroundColor: 'var(--forms-colors-secondary)',\n      },\n      '.other-multi': {\n        backgroundColor: 'var(--forms-colors-warning)',\n      },\n    },\n  },\n})\n```\n\n**Your own plugin source:**\n```javascript\n// myplugin/index.js\nconst plugin = require('tailwindcss/plugin')\nconst _ = require('lodash')\nconst variablesApi = require('@mertasan/tailwindcss-variables/api')\nconst pluginComponents = require('./components')\nconst pluginThemes = require('./themes')\n\nmodule.exports = plugin.withOptions(\n  function (options) {\n    return function ({addComponents, theme, config}) {\n\n      let variableOptions = {\n        variablePrefix: theme('myPlugin.prefix', 'forms')\n      };\n\n      addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))\n\n      let darkVariables = theme('myPlugin.darkOptions', {});\n      if (!_.isEmpty(darkVariables)) {\n        addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))\n      }\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))\n\n    }\n  }\n)\n```\n\n**User config:** (`tailwind.config.js`)\n```javascript\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    myPlugin: {\n      options: {\n        colors: {\n          primary: 'indigo', // custom color instead of default color\n        }\n      }\n    },\n  },\n  plugins: [require('my-plugin')],\n}\n```\n\n**Output:**\n```css\n:root {\n  --forms-colors-primary: indigo; /* <<< default color changed via root configuration */\n  --forms-colors-secondary: white;\n  --forms-colors-warning: orange;\n}\n\n.form-select {\n    background-color: var(--forms-colors-primary);\n}\n\n.form-select .default-multi {\n    background-color: var(--forms-colors-secondary);\n}\n\n.form-select .other-multi {\n    background-color: var(--forms-colors-warning);\n}\n```\n\nBu örnekteki gibi bir kurgu sayesinde, eklentinizin stilleri için, sizin ek .css dosyaları yayınlamanıza,\nkullanan kişilerin ise paketlerinizi kullanabilmek için stil dosyaları derlemelerine gerek kalmayacak.\n\n\n## Örnekler ve testler\n\nHem kullanım şekli konusunda yardımcı olması için, hem de sunulan tüm özellikleri test ederek\ndoğru çalıştığından emin olmak için örnekler hazırladım.\n\n\n| Kaynak                                                                                                      | Durum                                                                                                                                                    |\n|-------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [Örnekler](https://github.com/mertasan/tailwindcss-variables/tree/master/examples)                          | ![Örnekler](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=examples)\t                |\n| [Plugin API örnekleri](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![Plugin API örnekleri](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=api-examples) |\n| [Testler](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__)                          | ![Testler](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master&label=tests)                     |\n\n> Örneklere ve testlere ait dosyalar pull-request, push, release vb. etkinliklerde otomatik olarak yeniden\n> derlenmektedir. Bu nedenle, örnek dosyalarda `require(../index)` gibi dosya yolları kullanıldı.\n> Örnekleri kullanacaksanız eğer, ilgili yerleri `require('@mertasan/tailwindcss-variables')` şeklinde değiştirmeniz gerekiyor.\n\n\n## Yardım\n\nLütfen GitHub issues aracılığıyla tüm soru ve sorunlarınızı iletin. Size yardımcı olmaya çalışacağım.\n\n## Katkı\n\nHerhangi bir özelliği iyileştirir veya yeni özellikler eklerseniz eğer, lütfen pull-request göndermekten çekinmeyin.\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n"
  },
  {
    "path": "__tests__/basic-usage.test.html",
    "content": "<div class='container'></div>\n"
  },
  {
    "path": "__tests__/basic-usage.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('basic usage', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              black: 'rgb(0, 0, 0)',\n              white: '#ffffff',\n            },\n\n            sizes: {\n              small: '10px',\n              medium: '2rem',\n              large: '100%',\n            },\n          },\n\n          '.container': {\n            colors: {\n              primary: 'red',\n              secondary: 'var(--colors-primary)',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-black: rgb(0, 0, 0);\n      +   --colors-white: #ffffff;\n      +   --sizes-small: 10px;\n      +   --sizes-medium: 2rem;\n      +   --sizes-large: 100%\n      + }\n      + .container {\n      +   --colors-primary: red;\n      +   --colors-secondary: var(--colors-primary)\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/color-variable-helper.test.html",
    "content": "<div class=\"text-primary text-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-secondary bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-gray bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"text-blue text-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-red-400\">tailwindcss-variables</div>\n<div class=\"bg-red-500\">tailwindcss-variables</div>\n<div class=\"bg-red-600\">tailwindcss-variables</div>\n<div class=\"bg-green bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-white bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-yellow bg-opacity-50\">tailwindcss-variables</div>\n\n<div class=\"bg-indigo-400\">tailwindcss-variables</div>\n<div class=\"bg-indigo-500\">tailwindcss-variables</div>\n<div class=\"bg-indigo-600\">tailwindcss-variables</div>\n\n<div class=\"text-indigo-400\">tailwindcss-variables</div>\n<div class=\"text-indigo-500\">tailwindcss-variables</div>\n<div class=\"text-indigo-600\">tailwindcss-variables</div>\n"
  },
  {
    "path": "__tests__/color-variable-helper.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\nconst colorVariable = require('../colorVariable')\n\ntest('colorVariable helper', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          primary: colorVariable('--colors-primary'), // HEX (3 digits)\n          secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)\n          white: '#ffffff', // no variable\n          blue: colorVariable('var(--colors-blue)'), // RGB\n          yellow: {\n            400: colorVariable('var(--colors-yellow-400)'), // RGB\n            DEFAULT: colorVariable('var(--colors-yellow)'), // RGB\n          },\n          red: {\n            400: colorVariable('var(--colors-red-400)'), // RGBA\n            500: colorVariable('var(--colors-red-500)'), // RGBA\n            600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)\n          },\n          gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)\n          green: 'var(--colors-green)', // RGB (without using colorVariable() helper)\n        },\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ff0',\n              secondary: '#000000',\n              gray: '#6B7280',\n              blue: 'rgb(0,0,254)',\n              red: {\n                400: 'rgba(254,0,0,0.5)',\n                500: 'rgba(254,0,0,1)',\n              },\n\n              green: 'rgb(0,255,0)',\n              yellow: {\n                400: 'rgb(255,255,0)',\n                DEFAULT: 'rgb(255,255,0)',\n              },\n            },\n\n            sizes: {\n              small: '10px',\n              medium: '2rem',\n              large: '100%',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ff0;\n      +   --colors-secondary: #000000;\n      +   --colors-gray: #6B7280;\n      +   --colors-blue: rgb(0,0,254);\n      +   --colors-red-400: rgba(254,0,0,0.5);\n      +   --colors-red-500: rgba(254,0,0,1);\n      +   --colors-red-400-rgb: 254,0,0;\n      +   --colors-red-500-rgb: 254,0,0;\n      +   --colors-green: rgb(0,255,0);\n      +   --colors-yellow-400: rgb(255,255,0);\n      +   --colors-yellow: rgb(255,255,0);\n      +   --colors-yellow-400-rgb: 255,255,0;\n      +   --colors-yellow-rgb: 255,255,0;\n      +   --colors-primary-rgb: 255,255,0;\n      +   --colors-secondary-rgb: 0,0,0;\n      +   --colors-gray-rgb: 107,114,128;\n      +   --colors-blue-rgb: 0,0,254;\n      +   --colors-green-rgb: 0,255,0;\n      +   --sizes-small: 10px;\n      +   --sizes-medium: 2rem;\n      +   --sizes-large: 100%\n      + }\n      + .bg-gray {\n      +   background-color: var(--colors-gray)\n      + }\n      + .bg-green {\n      +   background-color: var(--colors-green)\n      + }\n      + .bg-red-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-red-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-red-600 {\n      +   background-color: var(--colors-red-500)\n      + }\n      + .bg-secondary {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n      + }\n      + .bg-yellow {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-yellow-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-blue {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n      + }\n      + .text-primary {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('colorVariable - background and text color', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          indigo: {\n            400: colorVariable('var(--colors-indigo-400)', true), // RGBA\n            500: colorVariable('var(--colors-indigo-500)', true), // RGBA\n            600: colorVariable('var(--colors-indigo-600)', true), // HEX\n          },\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              indigo: {\n                400: 'rgba(254,0,0,1)',\n                500: 'rgba(254,0,0,0.5)',\n                600: '#a20606',\n              },\n            },\n          },\n        },\n\n        plugins: [\n          tailwindcssVariables({\n            colorVariables: true,\n            forceRGB: true,\n          }),\n        ],\n      },\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + .bg-indigo-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))\n      + }\n      + .bg-indigo-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))\n      + }\n      + .bg-indigo-600 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-indigo-400 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))\n      + }\n      + .text-indigo-500 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))\n      + }\n      + .text-indigo-600 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\n/**\n * a --tw-bg-opacity must be added to the colors even if the bg-opacity-100 class is not present.\n */\ntest('colorVariable - background and text color 2', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content('color-variable-helper2')],\n\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          indigo: {\n            400: colorVariable('var(--colors-indigo-400)', true), // RGBA\n            500: colorVariable('var(--colors-indigo-500)', true), // RGBA\n            600: colorVariable('var(--colors-indigo-600)', true), // HEX\n          },\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              indigo: {\n                400: 'rgba(254,0,0,1)',\n                500: 'rgba(254,0,0,0.5)',\n                600: '#a20606',\n              },\n            },\n          },\n        },\n\n        plugins: [\n          tailwindcssVariables({\n            colorVariables: true,\n            forceRGB: true,\n          }),\n        ],\n      },\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + .bg-indigo-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))\n      + }\n      + .bg-indigo-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))\n      + }\n      + .bg-indigo-600 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))\n      + }\n      + .text-indigo-400 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))\n      + }\n      + .text-indigo-500 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))\n      + }\n      + .text-indigo-600 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/color-variable-helper2.test.html",
    "content": "<div class=\"bg-indigo-400\">tailwindcss-variables</div>\n<div class=\"bg-indigo-500\">tailwindcss-variables</div>\n<div class=\"bg-indigo-600\">tailwindcss-variables</div>\n\n<div class=\"text-indigo-400\">tailwindcss-variables</div>\n<div class=\"text-indigo-500\">tailwindcss-variables</div>\n<div class=\"text-indigo-600\">tailwindcss-variables</div>\n"
  },
  {
    "path": "__tests__/css-selectors.test.html",
    "content": "<div id=\"app\"></div>\n<div class=\"container\">\n  <div class=\"card\"></div>\n</div>\n<input type=\"text\" />\n<button type=\"submit\"></button>\n<button type=\"reset\"></button>\n"
  },
  {
    "path": "__tests__/css-selectors.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('css selectors', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          '#app': {\n            colors: {\n              black: 'rgb(0, 0, 0)',\n              white: '#ffffff',\n            },\n          },\n\n          'input[type=\"text\"]': {\n            colors: {\n              primary: 'red',\n              secondary: 'yellow',\n            },\n          },\n\n          '.container': {\n            sizes: {\n              medium: '3rem',\n            },\n          },\n\n          '.container.card': {\n            sizes: {\n              medium: '4rem',\n            },\n          },\n\n          '*,\\n*::before,\\n*::after': {\n            hello: {\n              world: '100%',\n            },\n          },\n\n          \"[type='button'],\\n[type='reset']\": {\n            colors: {\n              primary: 'blue',\n              secondary: 'green',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + #app {\n      +   --colors-black: rgb(0, 0, 0);\n      +   --colors-white: #ffffff\n      + }\n      + input[type='text'] {\n      +   --colors-primary: red;\n      +   --colors-secondary: yellow\n      + }\n      + .container {\n      +   --sizes-medium: 3rem\n      + }\n      + .container.card {\n      +   --sizes-medium: 4rem\n      + }\n      + *,\n      + *::before,\n      + *::after {\n      +   --hello-world: 100%\n      + }\n      + [type='button'],\n      + [type='reset'] {\n      +   --colors-primary: blue;\n      +   --colors-secondary: green\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/dark-mode-to-root.test.html",
    "content": "<html class=\"dark custom-dark-selector\">\n<div class=\"container\"></div>\n</html>"
  },
  {
    "path": "__tests__/dark-mode.test.html",
    "content": "<div class=\"dark custom-dark-selector\">\n  <div class=\"container\"></div>\n</div>\n<div class=\"dark foo\">\n  <div class=\"container\"></div>\n</div>\n"
  },
  {
    "path": "__tests__/dark-mode.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('only dark variables with default options and `class` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n\n      darkMode: 'class',\n      theme: {\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root.dark {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.dark .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('only dark variables with default options and `media` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --colors-primary: #ffffff\n      +   }\n      +   .container {\n      +       --colors-secondary: #000000\n      +   }\n      + }\n\n    \"\n  `)\n})\n\ntest('if the `darkMode` is set to `media`, `darkToRoot` options should not work', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          darkToRoot: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --colors-primary: #ffffff\n      +   }\n      +   .container {\n      +       --colors-secondary: #000000\n      +   }\n      + }\n\n    \"\n  `)\n})\n\ntest('only dark variables with darkToRoot option and `class` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content('dark-mode-to-root')],\n      darkMode: 'class',\n      theme: {\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          darkToRoot: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root.dark {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.dark .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('only dark variables with custom options and `class` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content('dark-mode-to-root')],\n      darkMode: ['class', '.custom-dark-selector'],\n      theme: {\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          variablePrefix: 'my-prefix',\n          darkToRoot: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root.custom-dark-selector {\n      +   --my-prefix-colors-primary: #ffffff\n      + }\n      + :root.custom-dark-selector .container {\n      +   --my-prefix-colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('only dark variables with variablePrefix and `media` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content('dark-mode-to-root')],\n      darkMode: 'media',\n      theme: {\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          variablePrefix: 'my-prefix',\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --my-prefix-colors-primary: #ffffff\n      +   }\n      +   .container {\n      +       --my-prefix-colors-secondary: #000000\n      +   }\n      + }\n\n    \"\n  `)\n})\n\ntest('variables and dark variables with default options and `class` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + :root.dark {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.dark .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('variables and dark variables with default options and `media` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --colors-primary: #ffffff\n      +   }\n      +   .container {\n      +       --colors-secondary: #000000\n      +   }\n      + }\n\n    \"\n  `)\n})\n\ntest('variables and dark variables with custom selector and `class` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: ['class', '.custom-dark-selector'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables()],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + :root.custom-dark-selector {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.custom-dark-selector .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('deprecated custom darkSelector', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: ['class', '.custom-dark-selector'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables({\n        darkSelector: '.foo',\n      })],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + :root.custom-dark-selector {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.custom-dark-selector .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('deprecated custom darkSelector [2]', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: ['class', '.custom-dark-selector'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables({\n        darkSelector: null,\n      })],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + :root.custom-dark-selector {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.custom-dark-selector .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('deprecated custom darkSelector [3]', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: ['class'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables({\n        darkSelector: null,\n      })],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + :root.dark {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.dark .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('deprecated custom darkSelector [4]', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: ['class'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables({\n        darkSelector: '.foo',\n      })],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + :root.foo {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.foo .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('variables and dark variables with darkToRoot option and `class` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content('dark-mode-to-root')],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          darkToRoot: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-primary: #ffffff\n      + }\n      + .container {\n      +   --colors-secondary: #000000\n      + }\n      + :root.dark {\n      +   --colors-primary: #ffffff\n      + }\n      + :root.dark .container {\n      +   --colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('variables and dark variables with custom options and `class` mode', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content('dark-mode-to-root')],\n      darkMode: ['class', '.custom-dark-selector'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          variablePrefix: 'my-prefix',\n          darkToRoot: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --my-prefix-colors-primary: #ffffff\n      + }\n      + .container {\n      +   --my-prefix-colors-secondary: #000000\n      + }\n      + :root.custom-dark-selector {\n      +   --my-prefix-colors-primary: #ffffff\n      + }\n      + :root.custom-dark-selector .container {\n      +   --my-prefix-colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/extend-colors.test.html",
    "content": "<div class=\"bg-green\">tailwindcss-variables</div>\n<div class=\"bg-blue\">tailwindcss-variables</div>\n<div class=\"bg-red\">tailwindcss-variables</div>\n<div class=\"bg-red-400\">tailwindcss-variables</div>\n<div class=\"bg-red-500\">tailwindcss-variables</div>\n<div class=\"bg-red-600\">tailwindcss-variables</div>\n<div class=\"bg-red-700 bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-white bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-black bg-opacity-50\">tailwindcss-variables</div>\n\n<div class=\"text-green\">tailwindcss-variables</div>\n<div class=\"text-blue\">tailwindcss-variables</div>\n<div class=\"text-red\">tailwindcss-variables</div>\n<div class=\"text-red-400\">tailwindcss-variables</div>\n<div class=\"text-red-500\">tailwindcss-variables</div>\n<div class=\"text-red-600\">tailwindcss-variables</div>\n<div class=\"text-red-700 text-opacity-50\">tailwindcss-variables</div>\n<div class=\"text-white text-opacity-50\">tailwindcss-variables</div>\n<div class=\"text-black text-opacity-50\">tailwindcss-variables</div>\n"
  },
  {
    "path": "__tests__/extend-colors.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('extendColors', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          red: {\n            600: 'var(--colors-red-600)',\n            700: 'var(--colors-red-700)',\n          },\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              white: '#ffffff',\n              red: {\n                400: 'rgba(254,0,0,0.5)',\n                DEFAULT: 'rgba(254,0,0,1)',\n                500: 'rgba(254,0,0,1)',\n                600: 'rgba(205,7,7,1)',\n                700: 'rgb(186,5,5,1)',\n              },\n            },\n\n            sizes: {\n              small: '1rem',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          extendColors: {\n            black: '#000000',\n            white: 'var(--colors-white)',\n            red: {\n              400: 'var(--colors-red-400)',\n              DEFAULT: 'var(--colors-red)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-white: #ffffff;\n      +   --colors-red-400: rgba(254,0,0,0.5);\n      +   --colors-red-500: rgba(254,0,0,1);\n      +   --colors-red-600: rgba(205,7,7,1);\n      +   --colors-red-700: rgb(186,5,5,1);\n      +   --colors-red: rgba(254,0,0,1);\n      +   --colors-red-400-rgb: 254,0,0;\n      +   --colors-red-500-rgb: 254,0,0;\n      +   --colors-red-600-rgb: 205,7,7;\n      +   --colors-red-700-rgb: 186,5,5,1;\n      +   --colors-red-rgb: 254,0,0;\n      +   --colors-white-rgb: 255,255,255;\n      +   --sizes-small: 1rem\n      + }\n      + .bg-black {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n      + }\n      + .bg-red {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-red-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-red-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-red-600 {\n      +   background-color: var(--colors-red-600)\n      + }\n      + .bg-red-700 {\n      +   background-color: var(--colors-red-700)\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-white-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-black {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(0 0 0 / var(--tw-text-opacity))\n      + }\n      + .text-red {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))\n      + }\n      + .text-red-400 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-400-rgb), var(--tw-text-opacity))\n      + }\n      + .text-red-500 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-500-rgb), var(--tw-text-opacity))\n      + }\n      + .text-red-600 {\n      +   color: var(--colors-red-600)\n      + }\n      + .text-red-700 {\n      +   color: var(--colors-red-700)\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-white-rgb), var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('extendColors with forceRGB', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          red: {\n            600: 'var(--colors-red-600)',\n            700: 'var(--colors-red-700)',\n          },\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              white: '#ffffff',\n              red: {\n                400: 'rgba(254,0,0,0.5)',\n                DEFAULT: 'rgba(254,0,0,1)',\n                500: 'rgba(254,0,0,1)',\n                600: 'rgba(205,7,7,1)',\n                700: 'rgb(186,5,5,1)',\n              },\n            },\n\n            sizes: {\n              small: '1rem',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          forceRGB: true,\n          extendColors: {\n            black: '#000000',\n            white: 'var(--colors-white)',\n            red: {\n              400: 'var(--colors-red-400)',\n              DEFAULT: 'var(--colors-red)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-white: 255,255,255;\n      +   --colors-red-400: 254,0,0;\n      +   --colors-red-500: 254,0,0;\n      +   --colors-red-600: 205,7,7;\n      +   --colors-red-700: 186,5,5,1;\n      +   --colors-red: 254,0,0;\n      +   --sizes-small: 1rem\n      + }\n      + .bg-black {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n      + }\n      + .bg-red {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))\n      + }\n      + .bg-red-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))\n      + }\n      + .bg-red-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))\n      + }\n      + .bg-red-600 {\n      +   background-color: var(--colors-red-600)\n      + }\n      + .bg-red-700 {\n      +   background-color: var(--colors-red-700)\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-white), var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-black {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(0 0 0 / var(--tw-text-opacity))\n      + }\n      + .text-red {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red), var(--tw-text-opacity))\n      + }\n      + .text-red-400 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-400), var(--tw-text-opacity))\n      + }\n      + .text-red-500 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-500), var(--tw-text-opacity))\n      + }\n      + .text-red-600 {\n      +   color: var(--colors-red-600)\n      + }\n      + .text-red-700 {\n      +   color: var(--colors-red-700)\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-white), var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('extendColors (readme)', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          white: '#fff',\n          green: 'var(--colors-green)',\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              blue: '#0065ff',\n              red: '#ff0000',\n              green: '#11ff00',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          extendColors: {\n            blue: 'var(--colors-blue)',\n            red: 'var(--colors-red)',\n          },\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-blue: #0065ff;\n      +   --colors-red: #ff0000;\n      +   --colors-green: #11ff00;\n      +   --colors-blue-rgb: 0,101,255;\n      +   --colors-red-rgb: 255,0,0;\n      +   --colors-green-rgb: 17,255,0\n      + }\n      + .bg-blue {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-blue-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-green {\n      +   background-color: var(--colors-green)\n      + }\n      + .bg-red {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-blue {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n      + }\n      + .text-green {\n      +   color: var(--colors-green)\n      + }\n      + .text-red {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(255 255 255 / var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('extendColors with forceRGB (readme)', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          white: '#fff',\n          green: 'var(--colors-green)',\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              blue: '#0065ff',\n              red: '#ff0000',\n              green: '#11ff00',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          forceRGB: true,\n          extendColors: {\n            blue: 'var(--colors-blue)',\n            red: 'var(--colors-red)',\n          },\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-blue: 0,101,255;\n      +   --colors-red: 255,0,0;\n      +   --colors-green: 17,255,0\n      + }\n      + .bg-blue {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-blue), var(--tw-bg-opacity))\n      + }\n      + .bg-green {\n      +   background-color: var(--colors-green)\n      + }\n      + .bg-red {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-blue {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-blue), var(--tw-text-opacity))\n      + }\n      + .text-green {\n      +   color: var(--colors-green)\n      + }\n      + .text-red {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red), var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(255 255 255 / var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/fallback.test.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n  .component .header {\n    @apply text-red-400;\n  }\n}\n"
  },
  {
    "path": "__tests__/fallback.test.html",
    "content": "<div class=\"bg-red-400\">tailwindcss-variables</div>\n<div class=\"bg-red-500\">tailwindcss-variables</div>\n<div class=\"bg-red-600\">tailwindcss-variables</div>\n<div class=\"bg-red-700\">tailwindcss-variables</div>\n<div class=\"text-red-800\">tailwindcss-variables</div>\n<div class=\"bg-gray bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"component\">\n  <div class=\"header\">tailwindcss-variables</div>\n</div>\n"
  },
  {
    "path": "__tests__/fallback.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\nconst colorVariable = require('../colorVariable')\n\ntest('fallback', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          red: {\n            400: 'var(--colors-red-400 red)',\n            500: 'var(--colors-red red)',\n            600: colorVariable('var(--header-color, black)'),\n            700: colorVariable('var(--header-color, black)', true),\n            800: colorVariable('var(--header-color, black)', false),\n          },\n\n          gray: 'var(--header-color, blue)',\n        },\n\n        variables: {\n          DEFAULT: {\n            header: {\n              color: '#ffffff',\n            },\n\n            colors: {\n              red: {\n                DEFAULT: '#ff0000',\n                400: '#ff3f3f',\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      -\n      + :root {\n      +   --header-color: #ffffff;\n      +   --header-color-rgb: 255,255,255;\n      +   --colors-red-400: #ff3f3f;\n      +   --colors-red: #ff0000;\n      +   --colors-red-400-rgb: 255,63,63;\n      +   --colors-red-rgb: 255,0,0\n      + }\n      + .component .header {\n      +   color: var(--colors-red-400 red)\n      + }\n      + .bg-gray {\n      +   background-color: var(--header-color, blue)\n      + }\n      + .bg-red-400 {\n      +   background-color: var(--colors-red-400 red)\n      + }\n      + .bg-red-500 {\n      +   background-color: var(--colors-red red)\n      + }\n      + .bg-red-600 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--header-color-rgb, black), var(--tw-bg-opacity))\n      + }\n      + .bg-red-700 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--header-color, black), var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-red-800 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--header-color-rgb, black), var(--tw-text-opacity))\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/force-rgb.test.html",
    "content": "<div class=\"bg-green\">tailwindcss-variables</div>\n<div class=\"bg-red\">tailwindcss-variables</div>\n<div class=\"bg-red-400\">tailwindcss-variables</div>\n<div class=\"bg-red-500\">tailwindcss-variables</div>\n<div class=\"bg-red-600\">tailwindcss-variables</div>\n<div class=\"bg-white bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-black bg-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-indigo bg-opacity-50\">tailwindcss-variables</div>\n\n<div class=\"text-green\">tailwindcss-variables</div>\n<div class=\"text-red\">tailwindcss-variables</div>\n<div class=\"text-red-400\">tailwindcss-variables</div>\n<div class=\"text-red-500\">tailwindcss-variables</div>\n<div class=\"text-red-600\">tailwindcss-variables</div>\n<div class=\"text-white text-opacity-50\">tailwindcss-variables</div>\n<div class=\"text-black text-opacity-50\">tailwindcss-variables</div>\n<div class=\"text-indigo text-opacity-50\">tailwindcss-variables</div>\n"
  },
  {
    "path": "__tests__/force-rgb.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\nconst colorVariable = require('../colorVariable')\n\ntest('forceRGB option (enabled)', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          black: '#000000',\n          white: 'var(--colors-white)',\n          red: {\n            400: colorVariable('var(--colors-red-400)', true),\n            DEFAULT: colorVariable('var(--colors-red)', true),\n            500: colorVariable('var(--colors-red-500)', true),\n          },\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              white: '#ffffff',\n              red: {\n                400: 'rgba(254,0,0,0.5)',\n                DEFAULT: 'rgba(254,0,0,1)',\n                500: 'rgba(254,0,0,1)',\n                600: 'rgba(205,7,7,1)',\n              },\n            },\n\n            sizes: {\n              small: '1rem',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          forceRGB: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-white: 255,255,255;\n      +   --colors-red-400: 254,0,0;\n      +   --colors-red-500: 254,0,0;\n      +   --colors-red-600: 205,7,7;\n      +   --colors-red: 254,0,0;\n      +   --sizes-small: 1rem\n      + }\n      + .bg-black {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n      + }\n      + .bg-red {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))\n      + }\n      + .bg-red-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))\n      + }\n      + .bg-red-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   background-color: var(--colors-white)\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-black {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(0 0 0 / var(--tw-text-opacity))\n      + }\n      + .text-red {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red), var(--tw-text-opacity))\n      + }\n      + .text-red-400 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-400), var(--tw-text-opacity))\n      + }\n      + .text-red-500 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-500), var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   color: var(--colors-white)\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('forceRGB option (disabled)', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          black: '#000000',\n          white: 'var(--colors-white)',\n          red: {\n            400: colorVariable('var(--colors-red-400)'),\n            500: '#ff0000',\n          },\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              white: '#ffffff',\n              red: {\n                400: 'rgba(254,0,0,0.5)',\n                500: 'rgba(254,0,0,1)',\n              },\n            },\n\n            sizes: {\n              small: '1rem',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          forceRGB: false, // default\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-white: #ffffff;\n      +   --colors-red-400: rgba(254,0,0,0.5);\n      +   --colors-red-500: rgba(254,0,0,1);\n      +   --colors-red-400-rgb: 254,0,0;\n      +   --colors-red-500-rgb: 254,0,0;\n      +   --colors-white-rgb: 255,255,255;\n      +   --sizes-small: 1rem\n      + }\n      + .bg-black {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n      + }\n      + .bg-red-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-red-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(255 0 0 / var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   background-color: var(--colors-white)\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-black {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(0 0 0 / var(--tw-text-opacity))\n      + }\n      + .text-red-400 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-400-rgb), var(--tw-text-opacity))\n      + }\n      + .text-red-500 {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(255 0 0 / var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   color: var(--colors-white)\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('forceRGB option with extendColors', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          indigo: '#EC4899',\n          extend: {\n            red: {\n              400: '#000',\n            },\n          },\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              white: '#ffffff',\n              red: {\n                400: 'rgba(254,0,0,0.5)',\n                DEFAULT: 'rgba(254,0,0,1)',\n                600: 'rgba(254,0,0,1)',\n              },\n            },\n\n            sizes: {\n              small: '1rem',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          forceRGB: true,\n          extendColors: {\n            black: '#000000',\n            white: 'var(--colors-white)',\n            red: {\n              400: 'var(--colors-red-400)',\n              DEFAULT: 'var(--colors-red)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-white: 255,255,255;\n      +   --colors-red-400: 254,0,0;\n      +   --colors-red-600: 254,0,0;\n      +   --colors-red: 254,0,0;\n      +   --sizes-small: 1rem\n      + }\n      + .bg-black {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n      + }\n      + .bg-indigo {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(236 72 153 / var(--tw-bg-opacity))\n      + }\n      + .bg-red {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))\n      + }\n      + .bg-red-400 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))\n      + }\n      + .bg-red-500 {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-white), var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-black {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(0 0 0 / var(--tw-text-opacity))\n      + }\n      + .text-indigo {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(236 72 153 / var(--tw-text-opacity))\n      + }\n      + .text-red {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red), var(--tw-text-opacity))\n      + }\n      + .text-red-400 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-400), var(--tw-text-opacity))\n      + }\n      + .text-red-500 {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-500), var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-white), var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('extendColors (readme)', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          white: '#fff',\n          green: 'var(--colors-green)',\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              blue: '#0065ff',\n              red: '#ff0000',\n              green: '#11ff00',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          extendColors: {\n            blue: 'var(--colors-blue)',\n            red: 'var(--colors-red)',\n          },\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-blue: #0065ff;\n      +   --colors-red: #ff0000;\n      +   --colors-green: #11ff00;\n      +   --colors-blue-rgb: 0,101,255;\n      +   --colors-red-rgb: 255,0,0;\n      +   --colors-green-rgb: 17,255,0\n      + }\n      + .bg-green {\n      +   background-color: var(--colors-green)\n      + }\n      + .bg-red {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-green {\n      +   color: var(--colors-green)\n      + }\n      + .text-red {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(255 255 255 / var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('forceRGB for docs', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          white: '#fff',\n          green: colorVariable('var(--colors-green)', true),\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              green: '#11ff00',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          forceRGB: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-green: 17,255,0\n      + }\n      + .bg-green {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-green), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-green {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-green), var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(255 255 255 / var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n\ntest('forceRGB (disabled) for docs', async () => {\n  expect(\n    await utils.diffOnly({\n      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],\n      content: [utils.content()],\n\n      darkMode: false,\n      theme: {\n        screens: false,\n        colors: {\n          white: '#fff',\n          green: colorVariable('var(--colors-green)'),\n        },\n\n        variables: {\n          DEFAULT: {\n            colors: {\n              green: '#11ff00',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          colorVariables: true,\n          forceRGB: false,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-green: #11ff00;\n      +   --colors-green-rgb: 17,255,0\n      + }\n      + .bg-green {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgba(var(--colors-green-rgb), var(--tw-bg-opacity))\n      + }\n      + .bg-white {\n      +   --tw-bg-opacity: 1;\n      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n      + }\n      + .bg-opacity-50 {\n      +   --tw-bg-opacity: 0.5\n      + }\n      + .text-green {\n      +   --tw-text-opacity: 1;\n      +   color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))\n      + }\n      + .text-white {\n      +   --tw-text-opacity: 1;\n      +   color: rgb(255 255 255 / var(--tw-text-opacity))\n      + }\n      + .text-opacity-50 {\n      +   --tw-text-opacity: 0.5\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/format-variables.test.html",
    "content": "<button type=\"button\"></button>"
  },
  {
    "path": "__tests__/format-variables.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('format variables [special characters must be removed from variable names]', async () => {\n  expect(\n    /* eslint-disable camelcase */\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              \"hello[$&+,:;=?@#|'<>.-^*()%!]WORLD\": '100%',\n              underscore_to_dash: '100%',\n              'underscore_to_dash-with-dash': '100%',\n              auto_dash: '100%',\n            },\n\n            sizes: {\n              1.5: '1rem',\n              'foo2.0bar3.0': '2rem',\n              baz: {\n                'foo3.0bar4.0': '3rem',\n              },\n            },\n          },\n\n          \"[type='button']\": {\n            \"hello[$&+,:;=?@#|'<>-^*()%!]world\": '100%',\n            underscore_to_dash: '100%',\n            'underscore_to_dash-with-dash': '100%',\n            auto_dash: '100%',\n            nested_auto_dash: {\n              color__primary: '100%',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-hello\\\\.-WORLD: 100%;\n      +   --colors-underscore-to-dash: 100%;\n      +   --colors-underscore-to-dash-with-dash: 100%;\n      +   --colors-auto-dash: 100%;\n      +   --sizes-1\\\\.5: 1rem;\n      +   --sizes-foo2\\\\.0bar3\\\\.0: 2rem;\n      +   --sizes-baz-foo3\\\\.0bar4\\\\.0: 3rem\n      + }\n      + [type='button'] {\n      +   --hello-world: 100%;\n      +   --underscore-to-dash: 100%;\n      +   --underscore-to-dash-with-dash: 100%;\n      +   --auto-dash: 100%;\n      +   --nested-auto-dash-color--primary: 100%\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/issues.test.html",
    "content": "<html data-mode=\"dark\" lang=\"en\">\n<body>\n<div class=\"shadow-xs dark:shadow-xs\"></div>\n<div class=\"shadow-sm dark:shadow-sm\"></div>\n<div class=\"shadow-base dark:shadow-base\"></div>\n<div class=\"shadow-md dark:shadow-md\"></div>\n<div class=\"shadow-lg dark:shadow-lg\"></div>\n<div class=\"shadow-xl dark:shadow-xl\"></div>\n<div class=\"shadow-2xl dark:shadow-2xl\"></div>\n<div class=\"shadow-outline dark:shadow-outline\"></div>\n<div class=\"shadow-inner dark:shadow-inner\"></div>\n<div class=\"shadow-none dark:shadow-none\"></div>\n</body>\n</html>\n"
  },
  {
    "path": "__tests__/issues.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('issue 23', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            // body\n            'body-color': '#000',\n            'body-bg': '#fff',\n            'body-font-family': 'var(--font-primary)',\n            'body-font-size': '1rem',\n            'body-font-weight': 400,\n            'body-line-height': 1.5,\n            'body-font-weight2': '400',\n            'body-line-height2': '1.5',\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --body-color: #000;\n      +   --body-bg: #fff;\n      +   --body-font-family: var(--font-primary);\n      +   --body-font-size: 1rem;\n      +   --body-font-weight: 400;\n      +   --body-line-height: 1.5;\n      +   --body-font-weight2: 400;\n      +   --body-line-height2: 1.5\n      + }\n\n    \"\n  `)\n})\n\ntest('issue 25', async () => {\n  const shadow = {\n    xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n    base: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n    outline: '0 0 0 3px rgba(var(--primary), 0.6)',\n    inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',\n    none: 'none',\n  }\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: ['class', '[data-mode=\"dark\"]'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            shadow,\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            shadow,\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          darkToRoot: true,\n          colorVariables: true,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);\n      +   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n      +   --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);\n      +   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);\n      +   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);\n      +   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);\n      +   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n      +   --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);\n      +   --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);\n      +   --shadow-none: none\n      + }\n      + :root[data-mode='dark'] {\n      +   --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);\n      +   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n      +   --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);\n      +   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);\n      +   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);\n      +   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);\n      +   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n      +   --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);\n      +   --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);\n      +   --shadow-none: none\n      + }\n\n    \"\n  `)\n})\n\ntest('issue 37', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            ONE: 'red',\n            TWO: {\n              DEFAULT: 'black',\n              FOObar: 'green',\n              THREE: {\n                FOUR: 'white',\n                five: 'blue',\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --ONE: red;\n      +   --TWO: black;\n      +   --TWO-FOObar: green;\n      +   --TWO-THREE-FOUR: white;\n      +   --TWO-THREE-five: blue\n      + }\n\n    \"\n  `)\n})\n\ntest('issue 39', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            sizes: {\n              0.5: '2px',\n              3.5: '14px',\n              6.5: '18px',\n              '1.0': {\n                foo: '1rem',\n                2.4: '2rem',\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --sizes-0\\\\.5: 2px;\n      +   --sizes-3\\\\.5: 14px;\n      +   --sizes-6\\\\.5: 18px;\n      +   --sizes-1\\\\.0-foo: 1rem;\n      +   --sizes-1\\\\.0-2\\\\.4: 2rem\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/nested-variables.test.html",
    "content": "<div class=\"container\">\n  <div class=\"card\"></div>\n</div>\n<div class=\"card-body\"></div>\n"
  },
  {
    "path": "__tests__/nested-variables.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('nested variables', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              DEFAULT: '#111111',\n              black: '#000000',\n              buttons: {\n                DEFAULT: '#222222',\n                light: {\n                  DEFAULT: '#333333',\n                  white: '#ffffff',\n                },\n\n                moon: {\n                  white: 'white',\n                  inverse: {\n                    DEFAULT: '#444444',\n                    white: 'black',\n                  },\n                },\n              },\n            },\n          },\n\n          '.container>.card, .card-body': {\n            colors: {\n              DEFAULT: '#555555',\n              black: 'rgb(0, 0, 0)',\n              buttons: {\n                DEFAULT: '#666666',\n                light: {\n                  DEFAULT: '#777777',\n                  white: '#ffffff',\n                },\n\n                moon: {\n                  white: 'white',\n                  inverse: {\n                    DEFAULT: '#888888',\n                    white: 'black',\n                  },\n                },\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors: #111111;\n      +   --colors-black: #000000;\n      +   --colors-buttons: #222222;\n      +   --colors-buttons-light: #333333;\n      +   --colors-buttons-light-white: #ffffff;\n      +   --colors-buttons-moon-white: white;\n      +   --colors-buttons-moon-inverse: #444444;\n      +   --colors-buttons-moon-inverse-white: black\n      + }\n      + .container>.card {\n      +   --colors: #555555;\n      +   --colors-black: rgb(0, 0, 0);\n      +   --colors-buttons: #666666;\n      +   --colors-buttons-light: #777777;\n      +   --colors-buttons-light-white: #ffffff;\n      +   --colors-buttons-moon-white: white;\n      +   --colors-buttons-moon-inverse: #888888;\n      +   --colors-buttons-moon-inverse-white: black\n      + }\n      + .card-body {\n      +   --colors: #555555;\n      +   --colors-black: rgb(0, 0, 0);\n      +   --colors-buttons: #666666;\n      +   --colors-buttons-light: #777777;\n      +   --colors-buttons-light-white: #ffffff;\n      +   --colors-buttons-moon-white: white;\n      +   --colors-buttons-moon-inverse: #888888;\n      +   --colors-buttons-moon-inverse-white: black\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/plugin-api.test.html",
    "content": "<div class=\"admin\"></div>\n<div class=\"dark\"></div>\n<div class=\"form-select\">\n  <div class=\"default-multi\"></div>\n  <div class=\"other-multi\"></div>\n</div>\n<div class=\"select\"></div>\n"
  },
  {
    "path": "__tests__/plugin-api.test.js",
    "content": "const utils = require('./util/_utils')(__filename)\n\ntest('simple example with dark mode set to `media`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: 'indigo',\n            },\n          },\n        },\n      },\n\n      plugins: [require('../examples/api-examples/simple/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: indigo;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray\n      + }\n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --prefix2-colors-primary: yellow;\n      +       --prefix2-colors-secondary: white;\n      +       --prefix2-colors-warning: pink\n      +   }\n      +   .admin {\n      +       --prefix2-colors-primary: blue;\n      +       --prefix2-colors-secondary: green;\n      +       --prefix2-colors-warning: gray\n      +   }\n      + }\n\n    \"\n  `)\n})\n\ntest('simple example with dark mode set to `class`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: 'indigo',\n            },\n          },\n        },\n      },\n\n      plugins: [require('../examples/api-examples/simple/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: indigo;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray\n      + }\n      + .dark {\n      +   --prefix2-colors-primary: yellow;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink\n      + }\n      + .dark .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray\n      + }\n\n    \"\n  `)\n})\n\ntest('with-components example with dark mode set to `class`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {},\n      plugins: [require('../examples/api-examples/with-components/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: black;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink;\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + .dark {\n      +   --prefix2-colors-primary: yellow;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink;\n      + }\n      + .dark .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + .form-select {\n      +   background-color: var(--colors-prefix2-primary);\n      + }\n      + .form-select .default-multi {\n      +   background-color: var(--prefix2-colors-secondary);\n      + }\n      + .form-select .other-multi {\n      +   background-color: var(--prefix2-colors-warning);\n      + }\n\n    \"\n  `)\n})\n\ntest('with-components example with dark mode set to `media`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {},\n      plugins: [require('../examples/api-examples/with-components/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: black;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink;\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --prefix2-colors-primary: yellow;\n      +       --prefix2-colors-secondary: white;\n      +       --prefix2-colors-warning: pink;\n      +   }\n      +   .admin {\n      +       --prefix2-colors-primary: blue;\n      +       --prefix2-colors-secondary: green;\n      +       --prefix2-colors-warning: gray;\n      +   }\n      + }\n      + .form-select {\n      +   background-color: var(--colors-prefix2-primary);\n      + }\n      + .form-select .default-multi {\n      +   background-color: var(--prefix2-colors-secondary);\n      + }\n      + .form-select .other-multi {\n      +   background-color: var(--prefix2-colors-warning);\n      + }\n\n    \"\n  `)\n})\n\ntest('with-components-null-selector example with dark mode set to `class`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {},\n      plugins: [require('../examples/api-examples/with-components-null-selector/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: black;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink;\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + .dark {\n      +   --prefix2-colors-primary: yellow;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink;\n      + }\n      + .dark .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + .select {\n      +   background-color: var(--colors-prefix2-primary);\n      + }\n      + .select .default-multi {\n      +   background-color: var(--prefix2-colors-secondary);\n      + }\n      + .select .other-multi {\n      +   background-color: var(--prefix2-colors-warning);\n      + }\n\n    \"\n  `)\n})\n\ntest('with-components-null-selector example with dark mode set to `media`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {},\n      plugins: [require('../examples/api-examples/with-components-null-selector/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: black;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: pink;\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --prefix2-colors-primary: yellow;\n      +       --prefix2-colors-secondary: white;\n      +       --prefix2-colors-warning: pink;\n      +   }\n      +   .admin {\n      +       --prefix2-colors-primary: blue;\n      +       --prefix2-colors-secondary: green;\n      +       --prefix2-colors-warning: gray;\n      +   }\n      + }\n      + .select {\n      +   background-color: var(--colors-prefix2-primary);\n      + }\n      + .select .default-multi {\n      +   background-color: var(--prefix2-colors-secondary);\n      + }\n      + .select .other-multi {\n      +   background-color: var(--prefix2-colors-warning);\n      + }\n\n    \"\n  `)\n})\n\ntest('with-themes example with dark mode set to `media`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {},\n      plugins: [require('../examples/api-examples/with-themes/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: black;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: indigo\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray\n      + }\n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --prefix2-colors-primary: yellow;\n      +       --prefix2-colors-secondary: red;\n      +       --prefix2-colors-warning: purple\n      +   }\n      +   .admin {\n      +       --prefix2-colors-primary: green;\n      +       --prefix2-colors-secondary: orange;\n      +       --prefix2-colors-warning: teal\n      +   }\n      + }\n\n    \"\n  `)\n})\n\ntest('with-themes example with dark mode set to `class`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: 'indigo',\n            },\n          },\n        },\n      },\n\n      plugins: [require('../examples/api-examples/with-themes/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: indigo;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: indigo\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray\n      + }\n      + .dark {\n      +   --prefix2-colors-primary: yellow;\n      +   --prefix2-colors-secondary: red;\n      +   --prefix2-colors-warning: purple\n      + }\n      + .dark .admin {\n      +   --prefix2-colors-primary: green;\n      +   --prefix2-colors-secondary: orange;\n      +   --prefix2-colors-warning: teal\n      + }\n\n    \"\n  `)\n})\n\ntest('advanced example with dark mode set to `media`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: 'indigo',\n            },\n          },\n        },\n      },\n\n      plugins: [require('../examples/api-examples/advanced/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: indigo;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: indigo;\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --prefix2-colors-primary: yellow;\n      +       --prefix2-colors-secondary: red;\n      +       --prefix2-colors-warning: purple;\n      +   }\n      +   .admin {\n      +       --prefix2-colors-primary: green;\n      +       --prefix2-colors-secondary: orange;\n      +       --prefix2-colors-warning: teal;\n      +   }\n      + }\n      + .form-select {\n      +   background-color: var(--colors-prefix2-primary);\n      + }\n      + .form-select .default-multi {\n      +   background-color: var(--prefix2-colors-secondary);\n      + }\n      + .form-select .other-multi {\n      +   background-color: var(--prefix2-colors-warning);\n      + }\n\n    \"\n  `)\n})\n\ntest('advanced example with dark mode set to `class`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: 'indigo',\n            },\n          },\n        },\n      },\n\n      plugins: [require('../examples/api-examples/advanced/index')],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix2-colors-primary: indigo;\n      +   --prefix2-colors-secondary: white;\n      +   --prefix2-colors-warning: indigo;\n      + }\n      + .admin {\n      +   --prefix2-colors-primary: blue;\n      +   --prefix2-colors-secondary: green;\n      +   --prefix2-colors-warning: gray;\n      + }\n      + .dark {\n      +   --prefix2-colors-primary: yellow;\n      +   --prefix2-colors-secondary: red;\n      +   --prefix2-colors-warning: purple;\n      + }\n      + .dark .admin {\n      +   --prefix2-colors-primary: green;\n      +   --prefix2-colors-secondary: orange;\n      +   --prefix2-colors-warning: teal;\n      + }\n      + .form-select {\n      +   background-color: var(--colors-prefix2-primary);\n      + }\n      + .form-select .default-multi {\n      +   background-color: var(--prefix2-colors-secondary);\n      + }\n      + .form-select .other-multi {\n      +   background-color: var(--prefix2-colors-warning);\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/readme.test.html",
    "content": "<html class=\"dark\">\n<button type=\"button\"></button>\n<div class=\"custom-dark-selector\">\n  <div class=\"container\"></div>\n</div>\n<select class=\"form-select\"></select>\n<select class=\"form-select default-multi\"></select>\n<select class=\"form-select other-multi\"></select>\n</html>\n"
  },
  {
    "path": "__tests__/readme.test.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst tailwindcssVariables = require('../src/index')\nconst variablesApi = require('../api')\nconst utils = require('./util/_utils')(__filename)\n\ntest('basic usage', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            sizes: {\n              small: '1rem',\n              button: {\n                size: '2rem',\n              },\n            },\n\n            colors: {\n              red: {\n                50: '#ff3232',\n              },\n            },\n          },\n\n          '.container': {\n            sizes: {\n              medium: '1.5rem',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --sizes-small: 1rem;\n      +   --sizes-button-size: 2rem;\n      +   --colors-red-50: #ff3232\n      + }\n      + .container {\n      +   --sizes-medium: 1.5rem\n      + }\n\n    \"\n  `)\n})\n\ntest('dark mode with `class`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {\n        variables: {\n          DEFAULT: {\n            sizes: {\n              small: '1rem',\n            },\n\n            colors: {\n              red: {\n                50: 'red',\n              },\n            },\n          },\n\n          '.container': {\n            colors: {\n              red: {\n                50: 'indigo',\n              },\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              red: {\n                50: 'blue',\n              },\n            },\n          },\n\n          '.container': {\n            colors: {\n              red: {\n                50: 'green',\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --sizes-small: 1rem;\n      +   --colors-red-50: red\n      + }\n      + .container {\n      +   --colors-red-50: indigo\n      + }\n      + :root.dark {\n      +   --colors-red-50: blue\n      + }\n      + :root.dark .container {\n      +   --colors-red-50: green\n      + }\n\n    \"\n  `)\n})\n\ntest('dark mode with `class` and custom options', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: ['class', '.custom-dark-selector'],\n      theme: {\n        variables: {\n          DEFAULT: {\n            sizes: {\n              small: '1rem',\n            },\n\n            colors: {\n              red: {\n                50: 'red',\n              },\n            },\n          },\n\n          '.container': {\n            colors: {\n              red: {\n                50: 'indigo',\n              },\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              red: {\n                50: 'blue',\n              },\n            },\n          },\n\n          '.container': {\n            colors: {\n              red: {\n                50: 'green',\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          darkToRoot: false,\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --sizes-small: 1rem;\n      +   --colors-red-50: red\n      + }\n      + .container {\n      +   --colors-red-50: indigo\n      + }\n      + .custom-dark-selector {\n      +   --colors-red-50: blue\n      + }\n      + .custom-dark-selector .container {\n      +   --colors-red-50: green\n      + }\n\n    \"\n  `)\n})\n\ntest('dark mode with `media`', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'media',\n      theme: {\n        variables: {\n          DEFAULT: {\n            sizes: {\n              small: '1rem',\n            },\n\n            colors: {\n              red: {\n                50: 'red',\n              },\n            },\n          },\n\n          '.container': {\n            colors: {\n              red: {\n                50: 'indigo',\n              },\n            },\n          },\n        },\n\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              red: {\n                50: 'blue',\n              },\n            },\n          },\n\n          '.container': {\n            colors: {\n              red: {\n                50: 'green',\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --sizes-small: 1rem;\n      +   --colors-red-50: red\n      + }\n      + .container {\n      +   --colors-red-50: indigo\n      + }\n      + @media (prefers-color-scheme: dark) {\n      +   :root {\n      +       --colors-red-50: blue\n      +   }\n      +   .container {\n      +       --colors-red-50: green\n      +   }\n      + }\n\n    \"\n  `)\n})\n\ntest('variable prefix', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            sizes: {\n              small: '1rem',\n              button: {\n                size: '2rem',\n              },\n            },\n\n            colors: {\n              red: {\n                50: '#ff3232',\n              },\n            },\n          },\n\n          '.container': {\n            sizes: {\n              medium: '1.5rem',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          variablePrefix: '--admin',\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --admin-sizes-small: 1rem;\n      +   --admin-sizes-button-size: 2rem;\n      +   --admin-colors-red-50: #ff3232\n      + }\n      + .container {\n      +   --admin-sizes-medium: 1.5rem\n      + }\n\n    \"\n  `)\n})\n\ntest('variables with nested objects', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            sizes: {\n              small: '1rem',\n              admin: {\n                buttons: {\n                  colors: {\n                    red: {\n                      500: '#ff0000',\n                      600: '#e60000',\n                    },\n                  },\n                },\n              },\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --sizes-small: 1rem;\n      +   --sizes-admin-buttons-colors-red-500: #ff0000;\n      +   --sizes-admin-buttons-colors-red-600: #e60000\n      + }\n\n    \"\n  `)\n})\n\ntest('naming conventions for variable keys', async () => {\n  expect(\n    /* eslint-disable camelcase */\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              \"hello[$&+,:;=?@#|'<>-^*()%!]WORLD\": '100%',\n              underscore_to_dash: '100%',\n              'underscore_to_dash-with-dash': '100%',\n              auto_dash: '100%',\n            },\n\n            sizes: {\n              1.5: '1rem',\n              xl: {\n                '3.0': '2rem',\n              },\n            },\n          },\n\n          \"[type='button']\": {\n            \"hello[$&+,:;=?@#|'<>-^*()%!]world\": '100%',\n            underscore_to_dash: '100%',\n            'underscore_to_dash-with-dash': '100%',\n            auto_dash: '100%',\n            nested_auto_dash: {\n              color_primary: '100%',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-hello-WORLD: 100%;\n      +   --colors-underscore-to-dash: 100%;\n      +   --colors-underscore-to-dash-with-dash: 100%;\n      +   --colors-auto-dash: 100%;\n      +   --sizes-1\\\\.5: 1rem;\n      +   --sizes-xl-3\\\\.0: 2rem\n      + }\n      + [type='button'] {\n      +   --hello-world: 100%;\n      +   --underscore-to-dash: 100%;\n      +   --underscore-to-dash-with-dash: 100%;\n      +   --auto-dash: 100%;\n      +   --nested-auto-dash-color-primary: 100%\n      + }\n\n    \"\n  `)\n})\n\ntest('example api', async () => {\n  let variableOptions = {\n    variablePrefix: '--myplugin',\n  }\n\n  const pluginVariables = {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'orange',\n      },\n    },\n  }\n  const pluginDarkVariables = {\n    DEFAULT: {\n      colors: {\n        primary: 'red',\n        secondary: 'yellow',\n        warning: 'green',\n      },\n    },\n  }\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {},\n      plugins: [\n        plugin(function ({ addComponents, config }) {\n          addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n          addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --myplugin-colors-primary: black;\n      +   --myplugin-colors-secondary: white;\n      +   --myplugin-colors-warning: orange\n      + }\n      + :root.dark {\n      +   --myplugin-colors-primary: red;\n      +   --myplugin-colors-secondary: yellow;\n      +   --myplugin-colors-warning: green\n      + }\n\n    \"\n  `)\n})\n\ntest('example api with components helper', async () => {\n  let variableOptions = {\n    variablePrefix: '--myplugin',\n  }\n\n  const pluginVariables = {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'orange',\n      },\n    },\n  }\n  const pluginDarkVariables = {\n    DEFAULT: {\n      colors: {\n        primary: 'red',\n        secondary: 'yellow',\n        warning: 'green',\n      },\n    },\n  }\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: 'class',\n      theme: {},\n      plugins: [\n        plugin(function ({ addComponents, config }) {\n          const formComponents = {\n            select: {\n              DEFAULT: {\n                backgroundColor: 'var(--myplugin-colors-primary)',\n              },\n\n              multi: {\n                '&.default-multi': {\n                  backgroundColor: 'var(--myplugin-colors-secondary)',\n                },\n\n                '&.other-multi': {\n                  backgroundColor: 'var(--myplugin-colors-warning)',\n                },\n              },\n            },\n          }\n\n          addComponents(variablesApi.variables(pluginVariables, variableOptions))\n\n          addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class\n\n          // Automatically register components via API.\n          addComponents(variablesApi.getComponents('.form', formComponents))\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --myplugin-colors-primary: black;\n      +   --myplugin-colors-secondary: white;\n      +   --myplugin-colors-warning: orange;\n      + }\n      + :root.dark {\n      +   --myplugin-colors-primary: red;\n      +   --myplugin-colors-secondary: yellow;\n      +   --myplugin-colors-warning: green;\n      + }\n      + .form-select {\n      +   background-color: var(--myplugin-colors-primary);\n      + }\n      + .form-select.default-multi {\n      +   background-color: var(--myplugin-colors-secondary);\n      + }\n      + .form-select.other-multi {\n      +   background-color: var(--myplugin-colors-warning);\n      + }\n\n    \"\n  `)\n})\n\ntest('detailed example api', async () => {\n  expect(\n    await utils.diffOnly(\n      ...[\n        {\n          content: [utils.content()],\n          darkMode: 'class',\n          ...require('../examples/api-examples/readme-source/tailwind.config'),\n        },\n      ]\n    )\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --forms-colors-primary: indigo;\n      +   --forms-colors-secondary: white;\n      +   --forms-colors-warning: orange;\n      + }\n      + .form-select {\n      +   background-color: var(--forms-colors-primary);\n      + }\n      + .form-select .default-multi {\n      +   background-color: var(--forms-colors-secondary);\n      + }\n      + .form-select .other-multi {\n      +   background-color: var(--forms-colors-warning);\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/test.stub",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('../jest/_utils')(__filename)\n\nit('test', async () => {\n    expect(\n        await utils.diffOnly({\n            content: [utils.content()],\n            darkMode: false,\n            theme: {\n                variables: {\n                    DEFAULT: {\n                        variable: {\n                            key: 'value'\n                        },\n                    },\n                },\n            },\n            plugins: [tailwindcssVariables],\n        })\n    ).toMatchInlineSnapshot(\n        `\n    \"\n\n\n      + :root {\n      +   --variable-key: '1'\n      + }\n  `\n    )\n})\n"
  },
  {
    "path": "__tests__/to-base.test.html",
    "content": "<html class=\"dark\" lang=\"\">\n<div class=\"text-red-400\">tailwindcss-variables</div>\n<div class=\"text-red-500\">tailwindcss-variables</div>\n</html>\n"
  },
  {
    "path": "__tests__/to-base.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('toBase - default', async () => {\n  expect(\n    await utils.diffOnly(\n      {\n        content: [utils.content()],\n        darkMode: 'class',\n        corePlugins: ['textColor'],\n        theme: {\n          colors: {\n            red: {\n              400: 'var(--colors-red-400)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n\n          variables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#000000',\n                  500: '#111111',\n                },\n              },\n            },\n          },\n\n          darkVariables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#222222',\n                  500: '#333333',\n                },\n              },\n            },\n          },\n        },\n\n        plugins: [tailwindcssVariables],\n      },\n\n      true\n    )\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-red-400: #000000;\n      +   --colors-red-500: #111111\n      + }\n      + :root.dark {\n      +   --colors-red-400: #222222;\n      +   --colors-red-500: #333333\n      + }\n      + .text-red-400 {\n      +   color: var(--colors-red-400)\n      + }\n      + .text-red-500 {\n      +   color: var(--colors-red-500)\n      + }\n\n    \"\n  `)\n})\n\ntest('toBase', async () => {\n  expect(\n    await utils.diffOnly(\n      {\n        content: [utils.content()],\n        darkMode: 'class',\n        corePlugins: ['textColor'],\n        theme: {\n          colors: {\n            red: {\n              400: 'var(--colors-red-400)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n\n          variables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#000000',\n                  500: '#111111',\n                },\n              },\n            },\n          },\n\n          darkVariables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#222222',\n                  500: '#333333',\n                },\n              },\n            },\n          },\n        },\n\n        plugins: [\n          tailwindcssVariables({\n            toBase: true,\n          }),\n        ],\n      },\n\n      true\n    )\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-red-400: #000000;\n      +   --colors-red-500: #111111\n      + }\n      + :root.dark {\n      +   --colors-red-400: #222222;\n      +   --colors-red-500: #333333\n      + }\n      + .text-red-400 {\n      +   color: var(--colors-red-400)\n      + }\n      + .text-red-500 {\n      +   color: var(--colors-red-500)\n      + }\n\n    \"\n  `)\n})\n\ntest('if \"base\" styles are not added then variables should not be added', async () => {\n  expect(\n    await utils.diffOnly(\n      {\n        content: [utils.content()],\n        darkMode: 'class',\n        corePlugins: ['textColor'],\n        theme: {\n          colors: {\n            red: {\n              400: 'var(--colors-red-400)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n\n          variables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#000000',\n                  500: '#111111',\n                },\n              },\n            },\n          },\n\n          darkVariables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#222222',\n                  500: '#333333',\n                },\n              },\n            },\n          },\n        },\n\n        plugins: [\n          tailwindcssVariables({\n            toBase: true,\n          }),\n        ],\n      },\n\n      false\n    )\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + .text-red-400 {\n      +   color: var(--colors-red-400)\n      + }\n      + .text-red-500 {\n      +   color: var(--colors-red-500)\n      + }\n\n    \"\n  `)\n})\n\ntest('if \"base\" styles are not added then variables should be added.', async () => {\n  expect(\n    await utils.diffOnly(\n      {\n        content: [utils.content()],\n        darkMode: 'class',\n        corePlugins: ['textColor'],\n        theme: {\n          colors: {\n            red: {\n              400: 'var(--colors-red-400)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n\n          variables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#000000',\n                  500: '#111111',\n                },\n              },\n            },\n          },\n\n          darkVariables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#222222',\n                  500: '#333333',\n                },\n              },\n            },\n          },\n        },\n\n        plugins: [\n          tailwindcssVariables({\n            toBase: false,\n          }),\n        ],\n      },\n\n      false\n    )\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-red-400: #000000;\n      +   --colors-red-500: #111111\n      + }\n      + :root.dark {\n      +   --colors-red-400: #222222;\n      +   --colors-red-500: #333333\n      + }\n      + .text-red-400 {\n      +   color: var(--colors-red-400)\n      + }\n      + .text-red-500 {\n      +   color: var(--colors-red-500)\n      + }\n\n    \"\n  `)\n})\n\ntest('toComponents', async () => {\n  expect(\n    await utils.diffOnly(\n      {\n        content: [utils.content()],\n        corePlugins: ['textColor'],\n        darkMode: 'class',\n        theme: {\n          colors: {\n            red: {\n              400: 'var(--colors-red-400)',\n              500: 'var(--colors-red-500)',\n            },\n          },\n\n          variables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#000000',\n                  500: '#111111',\n                },\n              },\n            },\n          },\n\n          darkVariables: {\n            DEFAULT: {\n              colors: {\n                red: {\n                  400: '#222222',\n                  500: '#333333',\n                },\n              },\n            },\n          },\n        },\n\n        plugins: [\n          tailwindcssVariables({\n            toBase: false,\n          }),\n        ],\n      },\n\n      false\n    )\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --colors-red-400: #000000;\n      +   --colors-red-500: #111111\n      + }\n      + :root.dark {\n      +   --colors-red-400: #222222;\n      +   --colors-red-500: #333333\n      + }\n      + .text-red-400 {\n      +   color: var(--colors-red-400)\n      + }\n      + .text-red-500 {\n      +   color: var(--colors-red-500)\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/use-host.test.html",
    "content": "<div class='container'></div>\n"
  },
  {
    "path": "__tests__/use-host.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('basic usage with host', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              black: 'rgb(0, 0, 0)',\n              white: '#ffffff',\n            },\n\n            sizes: {\n              small: '10px',\n              medium: '2rem',\n              large: '100%',\n            },\n          },\n\n          '.container': {\n            colors: {\n              primary: 'red',\n              secondary: 'var(--colors-primary)',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables({\n        useHost: true,\n      })],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :host {\n      +   --colors-black: rgb(0, 0, 0);\n      +   --colors-white: #ffffff;\n      +   --sizes-small: 10px;\n      +   --sizes-medium: 2rem;\n      +   --sizes-large: 100%\n      + }\n      + .container {\n      +   --colors-primary: red;\n      +   --colors-secondary: var(--colors-primary)\n      + }\n\n    \"\n  `)\n})\n\ntest('basic usage with host should not work with dark', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content('dark-mode-to-root')],\n      darkMode: 'class',\n      theme: {\n        darkVariables: {\n          DEFAULT: {\n            colors: {\n              black: 'rgb(0, 0, 0)',\n              white: '#ffffff',\n            },\n\n            sizes: {\n              small: '10px',\n              medium: '2rem',\n              large: '100%',\n            },\n          },\n\n          '.container': {\n            colors: {\n              primary: 'red',\n              secondary: 'var(--colors-primary)',\n            },\n          },\n        },\n      },\n\n      plugins: [tailwindcssVariables({\n        darkToRoot: true,\n        useHost: true\n      })],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :host.dark {\n      +   --colors-black: rgb(0, 0, 0);\n      +   --colors-white: #ffffff;\n      +   --sizes-small: 10px;\n      +   --sizes-medium: 2rem;\n      +   --sizes-large: 100%\n      + }\n      + :host.dark .container {\n      +   --colors-primary: red;\n      +   --colors-secondary: var(--colors-primary)\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "__tests__/util/_utils.js",
    "content": "const tailwind = require('tailwindcss')\nconst snapshotDiff = require('snapshot-diff')\nconst postcss = require('postcss')\nconst path = require('path')\nconst fs = require('fs')\nconst atImport = require('postcss-import')\n\nmodule.exports = (contentFile) => {\n  let utils = {}\n\n  utils.run = function(config = {}, toBase = true) {\n    let { currentTestName } = expect.getState()\n    let filename = currentTestName + '.test.css'\n    if (fs.existsSync(path.resolve(__dirname, '../' + filename))) {\n      return this.runFromFile(filename, config)\n    }\n\n    return this.runInline(config, toBase)\n  }\n\n  utils.runInline = (config, toBase) => {\n    let styles\n    if (toBase) {\n      styles = ['@tailwind base;', '@tailwind components;', '@tailwind utilities;']\n    } else {\n      styles = ['@tailwind components;', '@tailwind utilities;']\n    }\n    return postcss([tailwind({ corePlugins: [], ...config })])\n      .process(styles.join('\\n'), {\n        from: undefined,\n      })\n      .then((result) => result.css)\n  }\n\n  utils.runFromFile = (filename, config) => {\n\n    const css = fs.readFileSync(path.resolve(__dirname, '../' + filename), 'utf8')\n    return postcss([tailwind({ corePlugins: [], ...config })])\n      .use(atImport())\n      .process(css, {\n        from: path.resolve(__dirname, '../' + filename),\n      })\n      .then((result) => result.css)\n  }\n\n  utils.diffOnly = async function(options = {}, toBase = true) {\n    const [before, after] = await Promise.all([utils.run({}, toBase), utils.run(options, toBase)])\n\n    return `\\n\\n${snapshotDiff(before, after, {\n      aAnnotation: '__REMOVE_ME__',\n      bAnnotation: '__REMOVE_ME__',\n      contextLines: 0,\n    })\n      .replace(/\\n\\n@@([^@@]*)@@/g, '') // Top level @@ signs\n      .replace(/@@([^@@]*)@@/g, '\\n---\\n') // In between @@ signs\n      .replace(/[-+] __REMOVE_ME__\\n/g, '')\n      .replace(/\\+     /g, '+   ')\n      // .replace(/\\+ \\}\\n([\\s]*)\\+/g, '\\+ \\}\\n$1\\+')\n      .replace(/\\+(\\s+?)\\}\\n(\\s+?)\\+/g, '\\\\+$1\\\\}')\n      .replace(/Snapshot Diff:\\n/g, '')\n      .replace(/\"/g, '\\'')\n      .split('\\n')\n      .map((line) => `  ${line}`)\n      .join('\\n')}\\n\\n`\n  }\n\n  utils.content = (filename, ext) => {\n    if (!ext) {\n      ext = 'html'\n    }\n\n    if (filename) {\n      return path.resolve(__dirname, '../' + path.parse(filename).name + '.test.' + ext)\n    } else {\n      return path.resolve(__dirname, '../' + path.parse(contentFile).name + '.' + ext)\n    }\n  }\n\n  return utils\n}\n"
  },
  {
    "path": "__tests__/variable-prefix.test.html",
    "content": "<div class=\"container\"></div>"
  },
  {
    "path": "__tests__/variable-prefix.test.js",
    "content": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('variable prefix', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          variablePrefix: '--prefix',\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --prefix-colors-primary: #ffffff\n      + }\n      + .container {\n      +   --prefix-colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n\ntest('formatted variable prefix', async () => {\n  expect(\n    await utils.diffOnly({\n      content: [utils.content()],\n      darkMode: false,\n      theme: {\n        variables: {\n          DEFAULT: {\n            colors: {\n              primary: '#ffffff',\n            },\n          },\n\n          '.container': {\n            colors: {\n              secondary: '#000000',\n            },\n          },\n        },\n      },\n\n      plugins: [\n        tailwindcssVariables({\n          variablePrefix: '--[hello](_world)1=tail_wind',\n        }),\n      ],\n    })\n  ).toMatchInlineSnapshot(`\n    \"\n\n      \n      + :root {\n      +   --hello-world1tail-wind-colors-primary: #ffffff\n      + }\n      + .container {\n      +   --hello-world1tail-wind-colors-secondary: #000000\n      + }\n\n    \"\n  `)\n})\n"
  },
  {
    "path": "api.js",
    "content": "const pluginApi = require('./src/pluginApi')\nmodule.exports = pluginApi\n"
  },
  {
    "path": "colorVariable.js",
    "content": "const helpers = require('./src/helpers')\nmodule.exports = helpers.colorVariable\n"
  },
  {
    "path": "examples/.npmignore",
    "content": ""
  },
  {
    "path": "examples/api-examples/advanced/components.js",
    "content": "module.exports = (theme) => ({\n  select: {\n    DEFAULT: {\n      backgroundColor: 'var(--colors-prefix2-primary)',\n    },\n    multi: {\n      '.default-multi': {\n        backgroundColor: 'var(--prefix2-colors-secondary)',\n      },\n      '.other-multi': {\n        backgroundColor: 'var(--prefix2-colors-warning)',\n      },\n    },\n  },\n})\n"
  },
  {
    "path": "examples/api-examples/advanced/index.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginThemes = require('./themes')\nconst pluginComponents = require('./components')\nconst variablesApi = require('../../../api')\n// const variablesApi = require('@mertasan/tailwindcss-variables/api')\n\n/**\n * @typedef  {Object} plugin\n * @property {function} withOptions\n */\nmodule.exports = plugin.withOptions(\n  function(options) {\n    return function({ addComponents, theme, options, config }) {\n      let pluginOptions = merge(\n        {\n          variablePrefix: '--prefix1',\n          darkToRoot: false, // default: true ( :root.dark or .dark )\n        },\n        theme('myPlugin.variableOptions', {}),\n      )\n\n      let allThemes = pluginThemes(theme)\n\n      addComponents(variablesApi.variables(merge(allThemes.themes, theme('variables', {})), pluginOptions))\n\n      addComponents(variablesApi.darkVariables(merge(allThemes.darkThemes, theme('darkVariables', {})), pluginOptions, config('darkMode')))\n\n      let allComponents = pluginComponents(theme)\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', allComponents))\n    }\n  },\n  function(options) {\n    return {\n      // darkMode: 'class', // or media\n      theme: {\n        myPlugin: (theme) => ({\n          variableOptions: {\n            variablePrefix: '--prefix2',\n          },\n        }),\n      },\n    }\n  },\n)\n"
  },
  {
    "path": "examples/api-examples/advanced/themes.js",
    "content": "module.exports = (theme) => ({\n  themes: {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'indigo',\n      },\n    },\n    '.admin': {\n      colors: {\n        primary: 'blue',\n        secondary: 'green',\n        warning: 'gray',\n      },\n    },\n  },\n  darkThemes: {\n    DEFAULT: {\n      colors: {\n        primary: 'yellow',\n        secondary: 'red',\n        warning: 'purple',\n      },\n    },\n    '.admin': {\n      colors: {\n        primary: 'green',\n        secondary: 'orange',\n        warning: 'teal',\n      },\n    },\n  },\n})\n"
  },
  {
    "path": "examples/api-examples/readme-source/components.js",
    "content": "module.exports = (theme) => ({\n  select: {\n    DEFAULT: {\n      backgroundColor: 'var(--forms-colors-primary)',\n    },\n    multi: {\n      '.default-multi': {\n        backgroundColor: 'var(--forms-colors-secondary)',\n      },\n      '.other-multi': {\n        backgroundColor: 'var(--forms-colors-warning)',\n      },\n    },\n  },\n})\n"
  },
  {
    "path": "examples/api-examples/readme-source/index.html",
    "content": "<select class=\"form-select\"></select>\n<select class=\"form-select default-multi\"></select>\n<select class=\"form-select other-multi\"></select>\n"
  },
  {
    "path": "examples/api-examples/readme-source/index.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst _ = require('lodash')\nconst variablesApi = require('../../../api')\n// const variablesApi = require('@mertasan/tailwindcss-variables/api')\nconst pluginComponents = require('./components')\nconst pluginThemes = require('./themes')\n\nmodule.exports = plugin.withOptions(\n  function (options) {\n    return function ({addComponents, theme, config}) {\n\n      let variableOptions = {\n        variablePrefix: theme('myPlugin.prefix', '--forms')\n      };\n\n      addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))\n\n      let darkVariables = theme('myPlugin.darkOptions', {});\n      if (!_.isEmpty(darkVariables)) {\n        addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))\n      }\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))\n\n    }\n  }\n)\n"
  },
  {
    "path": "examples/api-examples/readme-source/tailwind.config.js",
    "content": "module.exports = {\n  theme: {\n    myPlugin: {\n      options: {\n        colors: {\n          primary: 'indigo',\n        }\n      }\n    },\n  },\n  // plugins: [require('my-plugin')],\n  plugins: [require('./index')],\n}\n"
  },
  {
    "path": "examples/api-examples/readme-source/themes.js",
    "content": "module.exports = (theme) => ({\n  themes: {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'orange',\n      },\n    }\n  }\n})\n"
  },
  {
    "path": "examples/api-examples/simple/index.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst variablesApi = require('../../../api')\n// const variablesApi = require('@mertasan/tailwindcss-variables/api')\n\n/**\n * @typedef  {Object} plugin\n * @property {function} withOptions\n */\nmodule.exports = plugin.withOptions(\n  function(options) {\n    return function({ addComponents, theme, options, config }) {\n\n      const myVariables = {\n        DEFAULT: {\n          colors: {\n            primary: 'black',\n            secondary: 'white',\n            warning: 'pink',\n          },\n        },\n        '.admin': {\n          colors: {\n            primary: 'blue',\n            secondary: 'green',\n            warning: 'gray',\n          },\n        },\n      }\n      let pluginOptions = merge(\n        {\n          variablePrefix: '--prefix1',\n          darkToRoot: false, // default: true ( :root.dark or .dark )\n        },\n        theme('myPlugin.variableOptions', {}),\n      )\n\n      addComponents(variablesApi.variables(merge(myVariables, theme('variables', {})), pluginOptions))\n\n      myVariables.DEFAULT.colors.primary = 'yellow'\n      addComponents(variablesApi.darkVariables(merge(myVariables, theme('darkVariables', {})), pluginOptions, config('darkMode')))\n\n    }\n  },\n  function(options) {\n    return {\n      // darkMode: 'class', // or media\n      theme: {\n        myPlugin: (theme) => ({\n          variableOptions: {\n            variablePrefix: '--prefix2',\n          },\n        }),\n      },\n    }\n  },\n)\n"
  },
  {
    "path": "examples/api-examples/with-components/components.js",
    "content": "module.exports = (theme) => ({\n  select: {\n    DEFAULT: {\n      backgroundColor: 'var(--colors-prefix2-primary)',\n    },\n    multi: {\n      '.default-multi': {\n        backgroundColor: 'var(--prefix2-colors-secondary)',\n      },\n      '.other-multi': {\n        backgroundColor: 'var(--prefix2-colors-warning)',\n      },\n    },\n  },\n})\n"
  },
  {
    "path": "examples/api-examples/with-components/index.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginComponents = require('./components')\nconst variablesApi = require('../../../api')\n// const variablesApi = require('@mertasan/tailwindcss-variables/api')\n\n/**\n * @typedef  {Object} plugin\n * @property {function} withOptions\n */\nmodule.exports = plugin.withOptions(\n  function(options) {\n    return function({ addComponents, theme, options, config }) {\n      const myVariables = {\n        DEFAULT: {\n          colors: {\n            primary: 'black',\n            secondary: 'white',\n            warning: 'pink',\n          },\n        },\n        '.admin': {\n          colors: {\n            primary: 'blue',\n            secondary: 'green',\n            warning: 'gray',\n          },\n        },\n      }\n      let pluginOptions = merge(\n        {\n          variablePrefix: '--prefix1',\n          darkToRoot: false, // default: true ( :root.dark or .dark )\n        },\n        theme('myPlugin.variableOptions', {}),\n      )\n\n      addComponents(variablesApi.variables(myVariables, pluginOptions))\n\n      myVariables.DEFAULT.colors.primary = 'yellow'\n      addComponents(variablesApi.darkVariables(myVariables, pluginOptions, config('darkMode')))\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents('.form', theme('myPlugin.components', {})))\n    }\n  },\n  function(options) {\n    return {\n      // darkMode: 'class', // or media\n      theme: {\n        myPlugin: (theme) => ({\n          variableOptions: {\n            variablePrefix: '--prefix2',\n          },\n          components: pluginComponents(theme),\n        }),\n      },\n    }\n  },\n)\n"
  },
  {
    "path": "examples/api-examples/with-components-null-selector/components.js",
    "content": "module.exports = (theme) => ({\n  '.select': {\n    DEFAULT: {\n      backgroundColor: 'var(--colors-prefix2-primary)',\n    },\n    multi: {\n      '.default-multi': {\n        backgroundColor: 'var(--prefix2-colors-secondary)',\n      },\n      '.other-multi': {\n        backgroundColor: 'var(--prefix2-colors-warning)',\n      },\n    },\n  },\n})\n"
  },
  {
    "path": "examples/api-examples/with-components-null-selector/index.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginComponents = require('./components')\nconst variablesApi = require('../../../api')\n// const variablesApi = require('@mertasan/tailwindcss-variables/api')\n\n/**\n * @typedef  {Object} plugin\n * @property {function} withOptions\n */\nmodule.exports = plugin.withOptions(\n  function(options) {\n    return function({ addComponents, theme, options, config }) {\n      const myVariables = {\n        DEFAULT: {\n          colors: {\n            primary: 'black',\n            secondary: 'white',\n            warning: 'pink',\n          },\n        },\n        '.admin': {\n          colors: {\n            primary: 'blue',\n            secondary: 'green',\n            warning: 'gray',\n          },\n        },\n      }\n      let pluginOptions = merge(\n        {\n          variablePrefix: '--prefix1',\n          darkToRoot: false, // default: true ( :root.dark or .dark )\n        },\n        theme('myPlugin.variableOptions', {}),\n      )\n\n      addComponents(variablesApi.variables(myVariables, pluginOptions))\n\n      myVariables.DEFAULT.colors.primary = 'yellow'\n      addComponents(variablesApi.darkVariables(myVariables, pluginOptions, config('darkMode')))\n\n      // Automatically register components via API.\n      addComponents(variablesApi.getComponents(null, theme('myPlugin.components', {})))\n    }\n  },\n  function(options) {\n    return {\n      // darkMode: 'class', // or media\n      theme: {\n        myPlugin: (theme) => ({\n          variableOptions: {\n            variablePrefix: '--prefix2',\n          },\n          components: pluginComponents(theme),\n        }),\n      },\n    }\n  },\n)\n"
  },
  {
    "path": "examples/api-examples/with-themes/index.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginThemes = require('./themes')\nconst variablesApi = require('../../../api')\n// const variablesApi = require('@mertasan/tailwindcss-variables/api')\n\n/**\n * @typedef  {Object} plugin\n * @property {function} withOptions\n */\nmodule.exports = plugin.withOptions(\n  function(options) {\n    return function({ addComponents, theme, options, config }) {\n      let pluginOptions = merge(\n        {\n          variablePrefix: '--prefix1',\n          darkToRoot: false, // default: true ( :root.dark or .dark )\n        },\n        theme('myPlugin.variableOptions', {}),\n      )\n\n      let allThemes = pluginThemes(theme)\n\n      addComponents(variablesApi.variables(merge(allThemes.themes, theme('variables', {})), pluginOptions))\n\n      addComponents(variablesApi.darkVariables(merge(allThemes.darkThemes, theme('darkVariables', {})), pluginOptions, config('darkMode')))\n    }\n  },\n  function(options) {\n    return {\n      // darkMode: 'class', // or media\n      theme: {\n        myPlugin: (theme) => ({\n          variableOptions: {\n            variablePrefix: '--prefix2',\n          },\n        }),\n      },\n    }\n  },\n)\n"
  },
  {
    "path": "examples/api-examples/with-themes/themes.js",
    "content": "module.exports = (theme) => ({\n  themes: {\n    DEFAULT: {\n      colors: {\n        primary: 'black',\n        secondary: 'white',\n        warning: 'indigo',\n      },\n    },\n    '.admin': {\n      colors: {\n        primary: 'blue',\n        secondary: 'green',\n        warning: 'gray',\n      },\n    },\n  },\n  darkThemes: {\n    DEFAULT: {\n      colors: {\n        primary: 'yellow',\n        secondary: 'red',\n        warning: 'purple',\n      },\n    },\n    '.admin': {\n      colors: {\n        primary: 'green',\n        secondary: 'orange',\n        warning: 'teal',\n      },\n    },\n  },\n})\n"
  },
  {
    "path": "examples/color-variable-helper/clean.css",
    "content": ":root {\n    --colors-primary: #ff0;\n    --colors-secondary: #000000;\n    --colors-gray: #6B7280;\n    --colors-blue: rgb(0,0,254);\n    --colors-red-400: rgba(254,0,0,0.5);\n    --colors-red-500: rgba(254,0,0,1);\n    --colors-red-400-rgb: 254,0,0;\n    --colors-red-500-rgb: 254,0,0;\n    --colors-green: rgb(0,255,0);\n    --colors-primary-rgb: 255,255,0;\n    --colors-secondary-rgb: 0,0,0;\n    --colors-gray-rgb: 107,114,128;\n    --colors-blue-rgb: 0,0,254;\n    --colors-green-rgb: 0,255,0;\n    --sizes-small: 10px;\n    --sizes-medium: 2rem;\n    --sizes-large: 100%\n}\n.bg-secondary {\n    --tw-bg-opacity: 1;\n    background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))\n}\n.bg-gray {\n    background-color: var(--colors-gray)\n}\n.bg-red-400 {\n    --tw-bg-opacity: 1;\n    background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))\n}\n.bg-red-500 {\n    --tw-bg-opacity: 1;\n    background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))\n}\n.bg-red-600 {\n    background-color: var(--colors-red-500)\n}\n.bg-green {\n    background-color: var(--colors-green)\n}\n.bg-white {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n.bg-opacity-50 {\n    --tw-bg-opacity: 0.5\n}\n.text-primary {\n    --tw-text-opacity: 1;\n    color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))\n}\n.text-blue {\n    --tw-text-opacity: 1;\n    color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))\n}\n.text-opacity-50 {\n    --tw-text-opacity: 0.5\n}"
  },
  {
    "path": "examples/color-variable-helper/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>colorVariable() example using @mertasan/tailwindcss-variables</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body class=\"bg-gray-50\">\n<section class=\"py-20 bg-gray-50\">\n  <div class=\"container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n    <div class=\"flex flex-wrap items-center -mx-3\">\n      <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n        <div class=\"w-full lg:max-w-md\">\n          <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n            Tailwindcss Variables</h2>\n          <p class=\"mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold\">\n            [colorVariable() example]</p>\n          <a href=\"https://github.com/mertasan/@mertasan/tailwindcss-variables\" class=\"mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium\">\n            source</a>\n        </div>\n      </div>\n      <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n        <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n      </div>\n    </div>\n  </div>\n</section>\n\n<div class=\"hidden\">\n  <div class=\"text-primary text-opacity-50\"></div>\n  <div class=\"bg-secondary bg-opacity-50\"></div>\n  <div class=\"bg-gray bg-opacity-50\"></div>\n  <div class=\"text-blue text-opacity-50\"></div>\n  <div class=\"bg-red-400\"></div>\n  <div class=\"bg-red-500\"></div>\n  <div class=\"bg-red-600\"></div>\n  <div class=\"bg-green bg-opacity-50\"></div>\n  <div class=\"bg-white bg-opacity-50\"></div>\n</div>\n</body>\n</html>\n"
  },
  {
    "path": "examples/color-variable-helper/package.json",
    "content": "{\n  \"name\": \"color-variable-helper\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/color-variable-helper/style.css",
    "content": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse;  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;  /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --colors-primary: #ff0;\n  --colors-secondary: #000000;\n  --colors-gray: #6B7280;\n  --colors-blue: rgb(0,0,254);\n  --colors-red-400: rgba(254,0,0,0.5);\n  --colors-red-500: rgba(254,0,0,1);\n  --colors-red-400-rgb: 254,0,0;\n  --colors-red-500-rgb: 254,0,0;\n  --colors-green: rgb(0,255,0);\n  --colors-primary-rgb: 255,255,0;\n  --colors-secondary-rgb: 0,0,0;\n  --colors-gray-rgb: 107,114,128;\n  --colors-blue-rgb: 0,0,254;\n  --colors-green-rgb: 0,255,0;\n  --sizes-small: 10px;\n  --sizes-medium: 2rem;\n  --sizes-large: 100%;\n}\n.container {\n  width: 100%;\n}\n.order-1 {\n  order: 1;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mb-12 {\n  margin-bottom: 3rem;\n}\n.flex {\n  display: flex;\n}\n.hidden {\n  display: none;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.bg-secondary {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity));\n}\n.bg-gray {\n  background-color: var(--colors-gray);\n}\n.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity));\n}\n.bg-red-600 {\n  background-color: var(--colors-red-500);\n}\n.bg-green {\n  background-color: var(--colors-green);\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-opacity-50 {\n  --tw-bg-opacity: 0.5;\n}\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity));\n}\n.text-blue {\n  --tw-text-opacity: 1;\n  color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity));\n}\n.text-opacity-50 {\n  --tw-text-opacity: 0.5;\n}"
  },
  {
    "path": "examples/color-variable-helper/tailwind.config.js",
    "content": "// const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\nconst colorVariable = require('../../colorVariable')\n\n/**\n * Usage:\n * colorVariable('--colors-primary')\n * or\n * colorVariable('var(--colors-primary)')\n */\nmodule.exports = {\n  corePlugins: process.env.CLEAN ? ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'] : {},\n  content: ['./index.html'],\n  darkMode: 'class',\n  theme: {screens: false,\n    colors: {\n      primary: colorVariable('--colors-primary'), // HEX (3 digits)\n      secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)\n      white: '#ffffff', // no variable\n      blue: colorVariable('var(--colors-blue)'), // RGB\n      red: {\n        400: colorVariable('var(--colors-red-400)'), // RGBA\n        500: colorVariable('var(--colors-red-500)'), // RGBA\n        600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)\n      },\n      gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)\n      green: 'var(--colors-green)', // RGB (without using colorVariable() helper)\n    },\n    variables: {\n      DEFAULT: {\n        colors: {\n          primary: '#ff0',\n          secondary: '#000000',\n          gray: '#6B7280',\n          blue: 'rgb(0,0,254)',\n          red: {\n            400: 'rgba(254,0,0,0.5)',\n            500: 'rgba(254,0,0,1)',\n          },\n          green: 'rgb(0,255,0)',\n        },\n        sizes: {\n          small: '10px',\n          medium: '2rem',\n          large: '100%',\n        },\n      },\n    },\n  },\n  plugins: [\n    require('../../src/index')({\n      colorVariables: true\n    })\n  ],\n}\n"
  },
  {
    "path": "examples/color-variable-helper/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "examples/dark-custom-selector/clean.css",
    "content": ":root {\n    --sizes-small: 1rem;\n    --sizes-medium: 2rem;\n    --sizes-large: 3rem;\n    --colors-red-50: #ff3232;\n    --colors-red-500: #ff0000;\n    --colors-red-900: #d70000\n}\n.container {\n    --sizes-medium: 1.5rem;\n    --sizes-container: 2rem\n}\n:root.custom-dark-selector {\n    --colors-red-50: #c665ff;\n    --colors-red-500: #9433f1;\n    --colors-red-900: #6c0bc9\n}\n:root.custom-dark-selector .container {\n    --colors-red-50: #ff0000\n}"
  },
  {
    "path": "examples/dark-custom-selector/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"custom-dark-selector\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Dark Mode (class) example using tailwindcss-variables</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body class=\"bg-gray-50\">\n<section class=\"py-20 bg-gray-50\">\n  <div class=\"container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n    <div class=\"flex flex-wrap items-center -mx-3\">\n      <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n        <div class=\"w-full lg:max-w-md\">\n          <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n            Tailwindcss Variables</h2>\n          <p class=\"mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold\">\n            [dark mode with \"darkSelector\" option]</p>\n          <a href=\"https://github.com/mertasan/tailwindcss-variables\" class=\"mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium\">\n            source</a>\n        </div>\n      </div>\n      <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n        <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n      </div>\n    </div>\n  </div>\n</section>\n</body>\n</html>\n"
  },
  {
    "path": "examples/dark-custom-selector/package.json",
    "content": "{\n  \"name\": \"dark-custom-selector\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/dark-custom-selector/style.css",
    "content": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse;  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;  /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000;\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem;\n}\n\n:root.custom-dark-selector {\n  --colors-red-50: #c665ff;\n  --colors-red-500: #9433f1;\n  --colors-red-900: #6c0bc9;\n}\n\n:root.custom-dark-selector .container {\n  --colors-red-50: #ff0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.order-1 {\n  order: 1;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mb-12 {\n  margin-bottom: 3rem;\n}\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.text-blue-500 {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .sm\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:px-32 {\n    padding-left: 8rem;\n    padding-right: 8rem;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:order-1 {\n    order: 1;\n  }\n\n  .lg\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .lg\\:max-w-full {\n    max-width: 100%;\n  }\n\n  .lg\\:px-16 {\n    padding-left: 4rem;\n    padding-right: 4rem;\n  }\n}\n@media (min-width: 1280px) {\n\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n}"
  },
  {
    "path": "examples/dark-custom-selector/tailwind.config.js",
    "content": "module.exports = {\n  content: ['./index.html'],\n  corePlugins: process.env.CLEAN ? [] : {},\n  darkMode: ['class', '.custom-dark-selector'],\n  theme: {\n    variables: (theme) => ({\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          medium: '2rem',\n          large: '3rem',\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n            500: '#ff0000',\n            900: '#d70000',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n          container: '2rem',\n        },\n      },\n    }),\n    darkVariables: (theme) => ({\n      DEFAULT: {\n        colors: {\n          red: {\n            50: '#c665ff',\n            500: '#9433f1',\n            900: '#6c0bc9',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: '#ff0000',\n          },\n        },\n      },\n    }),\n  },\n  plugins: [\n    require('../../src/index')({\n      darkToRoot: true,\n    }),\n  ],\n}\n"
  },
  {
    "path": "examples/dark-custom-selector/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "examples/dark-with-class/clean.css",
    "content": ":root {\n    --sizes-small: 1rem;\n    --sizes-medium: 2rem;\n    --sizes-large: 3rem;\n    --colors-red-50: #ff3232;\n    --colors-red-500: #ff0000;\n    --colors-red-900: #d70000\n}\n.container {\n    --sizes-medium: 1.5rem;\n    --sizes-container: 2rem\n}\n.dark {\n    --colors-red-50: #c665ff;\n    --colors-red-500: #9433f1;\n    --colors-red-900: #6c0bc9\n}\n.dark .container {\n    --colors-red-50: #ff0000\n}"
  },
  {
    "path": "examples/dark-with-class/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Dark Mode (class) example using tailwindcss-variables</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body class=\"bg-gray-50\">\n<div class=\"dark\">\n  <section class=\"py-20 bg-gray-50\">\n    <div class=\"container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n      <div class=\"flex flex-wrap items-center -mx-3\">\n        <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n          <div class=\"w-full lg:max-w-md\">\n            <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n              Tailwindcss Variables</h2>\n            <p class=\"mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold\">\n              [dark mode with \"class\"]</p>\n            <a href=\"https://github.com/mertasan/tailwindcss-variables\" class=\"mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium\">\n              source</a>\n          </div>\n        </div>\n        <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n          <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n</body>\n</html>\n"
  },
  {
    "path": "examples/dark-with-class/package.json",
    "content": "{\n  \"name\": \"dark-with-class\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/dark-with-class/style.css",
    "content": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse;  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;  /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000;\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem;\n}\n\n.dark {\n  --colors-red-50: #c665ff;\n  --colors-red-500: #9433f1;\n  --colors-red-900: #6c0bc9;\n}\n\n.dark .container {\n  --colors-red-50: #ff0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.order-1 {\n  order: 1;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mb-12 {\n  margin-bottom: 3rem;\n}\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.text-blue-500 {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .sm\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:px-32 {\n    padding-left: 8rem;\n    padding-right: 8rem;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:order-1 {\n    order: 1;\n  }\n\n  .lg\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .lg\\:max-w-full {\n    max-width: 100%;\n  }\n\n  .lg\\:px-16 {\n    padding-left: 4rem;\n    padding-right: 4rem;\n  }\n}\n@media (min-width: 1280px) {\n\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n}"
  },
  {
    "path": "examples/dark-with-class/tailwind.config.js",
    "content": "module.exports = {\n  content: ['./index.html'],\n  corePlugins: process.env.CLEAN ? [] : {},\n  darkMode: 'class',\n  theme: {\n    variables: (theme) => ({\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          medium: '2rem',\n          large: '3rem',\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n            500: '#ff0000',\n            900: '#d70000',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n          container: '2rem',\n        },\n      },\n    }),\n    darkVariables: (theme) => ({\n      DEFAULT: {\n        colors: {\n          red: {\n            50: '#c665ff',\n            500: '#9433f1',\n            900: '#6c0bc9',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: '#ff0000',\n          },\n        },\n      },\n    }),\n  },\n  plugins: [\n    require('../../src/index')({\n      darkToRoot: false,\n    }),\n  ],\n}\n"
  },
  {
    "path": "examples/dark-with-class/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "examples/dark-with-class-to-root/clean.css",
    "content": ":root {\n    --sizes-small: 1rem;\n    --sizes-medium: 2rem;\n    --sizes-large: 3rem;\n    --colors-red-50: #ff3232;\n    --colors-red-500: #ff0000;\n    --colors-red-900: #d70000\n}\n.container {\n    --sizes-medium: 1.5rem;\n    --sizes-container: 2rem\n}\n:root.dark {\n    --colors-red-50: #c665ff;\n    --colors-red-500: #9433f1;\n    --colors-red-900: #6c0bc9\n}\n:root.dark .container {\n    --colors-red-50: #ff0000\n}"
  },
  {
    "path": "examples/dark-with-class-to-root/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Dark Mode (class) example using tailwindcss-variables</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body class=\"bg-gray-50\">\n<section class=\"py-20 bg-gray-50\">\n  <div class=\"container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n    <div class=\"flex flex-wrap items-center -mx-3\">\n      <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n        <div class=\"w-full lg:max-w-md\">\n          <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n            Tailwindcss Variables</h2>\n          <p class=\"mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold\">\n            [dark mode with \"class\" mode and darkToRoot option]</p>\n          <a href=\"https://github.com/mertasan/tailwindcss-variables\" class=\"mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium\">\n            source</a>\n        </div>\n      </div>\n      <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n        <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n      </div>\n    </div>\n  </div>\n</section>\n</body>\n</html>\n"
  },
  {
    "path": "examples/dark-with-class-to-root/package.json",
    "content": "{\n  \"name\": \"dark-with-class-to-root\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/dark-with-class-to-root/style.css",
    "content": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse;  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;  /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000;\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem;\n}\n\n:root.dark {\n  --colors-red-50: #c665ff;\n  --colors-red-500: #9433f1;\n  --colors-red-900: #6c0bc9;\n}\n\n:root.dark .container {\n  --colors-red-50: #ff0000;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.order-1 {\n  order: 1;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mb-12 {\n  margin-bottom: 3rem;\n}\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.text-blue-500 {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .sm\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:px-32 {\n    padding-left: 8rem;\n    padding-right: 8rem;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:order-1 {\n    order: 1;\n  }\n\n  .lg\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .lg\\:max-w-full {\n    max-width: 100%;\n  }\n\n  .lg\\:px-16 {\n    padding-left: 4rem;\n    padding-right: 4rem;\n  }\n}\n@media (min-width: 1280px) {\n\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n}"
  },
  {
    "path": "examples/dark-with-class-to-root/tailwind.config.js",
    "content": "module.exports = {\n  content: ['./index.html'],\n  corePlugins: process.env.CLEAN ? [] : {},\n  darkMode: 'class',\n  theme: {\n    variables: (theme) => ({\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          medium: '2rem',\n          large: '3rem',\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n            500: '#ff0000',\n            900: '#d70000',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n          container: '2rem',\n        },\n      },\n    }),\n    darkVariables: (theme) => ({\n      DEFAULT: {\n        colors: {\n          red: {\n            50: '#c665ff',\n            500: '#9433f1',\n            900: '#6c0bc9',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: '#ff0000',\n          },\n        },\n      },\n    }),\n  },\n  plugins: [\n    require('../../src/index')({\n      darkToRoot: true,\n    }),\n  ],\n}\n"
  },
  {
    "path": "examples/dark-with-class-to-root/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "examples/dark-with-media/clean.css",
    "content": ":root {\n    --sizes-small: 1rem;\n    --sizes-medium: 2rem;\n    --sizes-large: 3rem;\n    --colors-red-50: #ff3232;\n    --colors-red-500: #ff0000;\n    --colors-red-900: #d70000\n}\n.container {\n    --sizes-medium: 1.5rem;\n    --sizes-container: 2rem\n}\n@media (prefers-color-scheme: dark) {\n    :root {\n        --colors-red-50: #c665ff;\n        --colors-red-500: #9433f1;\n        --colors-red-900: #6c0bc9\n    }\n    .container {\n        --colors-red-50: #ff0000\n    }\n}"
  },
  {
    "path": "examples/dark-with-media/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Dark Mode (media) example using @mertasan/tailwindcss-variables</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body class=\"bg-gray-50\">\n<section class=\"py-20 bg-gray-50\">\n  <div class=\"container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n    <div class=\"flex flex-wrap items-center -mx-3\">\n      <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n        <div class=\"w-full lg:max-w-md\">\n          <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n            Tailwindcss Variables</h2>\n          <p class=\"mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold\">\n            [dark mode with \"media\"]</p>\n          <a href=\"https://github.com/mertasan/@mertasan/tailwindcss-variables\" class=\"mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium\">\n            source</a>\n        </div>\n      </div>\n      <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n        <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n      </div>\n    </div>\n  </div>\n</section>\n</body>\n</html>\n"
  },
  {
    "path": "examples/dark-with-media/package.json",
    "content": "{\n  \"name\": \"dark-with-media\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/dark-with-media/style.css",
    "content": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse;  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;  /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000;\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem;\n}\n\n@media (prefers-color-scheme: dark) {\n\n  :root {\n    --colors-red-50: #c665ff;\n    --colors-red-500: #9433f1;\n    --colors-red-900: #6c0bc9;\n  }\n\n  .container {\n    --colors-red-50: #ff0000;\n  }\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.order-1 {\n  order: 1;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mb-12 {\n  margin-bottom: 3rem;\n}\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.text-blue-500 {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .sm\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:px-32 {\n    padding-left: 8rem;\n    padding-right: 8rem;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:order-1 {\n    order: 1;\n  }\n\n  .lg\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .lg\\:max-w-full {\n    max-width: 100%;\n  }\n\n  .lg\\:px-16 {\n    padding-left: 4rem;\n    padding-right: 4rem;\n  }\n}\n@media (min-width: 1280px) {\n\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n}"
  },
  {
    "path": "examples/dark-with-media/tailwind.config.js",
    "content": "module.exports = {\n  content: ['./index.html'],\n  corePlugins: process.env.CLEAN ? [] : {},\n  darkMode: 'media',\n  theme: {\n    variables: (theme) => ({\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          medium: '2rem',\n          large: '3rem',\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n            500: '#ff0000',\n            900: '#d70000',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n          container: '2rem',\n        },\n      },\n    }),\n    darkVariables: (theme) => ({\n      DEFAULT: {\n        colors: {\n          red: {\n            50: '#c665ff',\n            500: '#9433f1',\n            900: '#6c0bc9',\n          },\n        },\n      },\n      '.container': {\n        colors: {\n          red: {\n            50: '#ff0000',\n          },\n        },\n      },\n    }),\n  },\n  plugins: [require('../../src/index')],\n}\n"
  },
  {
    "path": "examples/dark-with-media/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "examples/prefix/clean.css",
    "content": ":root {\n    --prefix-sizes-small: 1rem;\n    --prefix-sizes-medium: 2rem;\n    --prefix-sizes-large: 3rem;\n    --prefix-colors-red-50: #ff3232;\n    --prefix-colors-red-500: #ff0000;\n    --prefix-colors-red-900: #d70000\n}\n.container {\n    --prefix-sizes-medium: 1.5rem;\n    --prefix-sizes-container: 2rem\n}"
  },
  {
    "path": "examples/prefix/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>variablePrefix example using @mertasan/tailwindcss-variables</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body class=\"bg-gray-50\">\n<section class=\"py-20 bg-gray-50\">\n  <div class=\"container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n    <div class=\"flex flex-wrap items-center -mx-3\">\n      <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n        <div class=\"w-full lg:max-w-md\">\n          <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n            Tailwindcss Variables</h2>\n          <p class=\"mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold\">\n            [variablePrefix example]</p>\n          <a href=\"https://github.com/mertasan/@mertasan/tailwindcss-variables\" class=\"mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium\">\n            source</a>\n        </div>\n      </div>\n      <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n        <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n      </div>\n    </div>\n  </div>\n</section>\n</body>\n</html>\n"
  },
  {
    "path": "examples/prefix/package.json",
    "content": "{\n  \"name\": \"prefix\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/prefix/style.css",
    "content": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse;  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;  /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --prefix-sizes-small: 1rem;\n  --prefix-sizes-medium: 2rem;\n  --prefix-sizes-large: 3rem;\n  --prefix-colors-red-50: #ff3232;\n  --prefix-colors-red-500: #ff0000;\n  --prefix-colors-red-900: #d70000;\n}\n\n.container {\n  --prefix-sizes-medium: 1.5rem;\n  --prefix-sizes-container: 2rem;\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.order-1 {\n  order: 1;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mb-12 {\n  margin-bottom: 3rem;\n}\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.text-blue-500 {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .sm\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:px-32 {\n    padding-left: 8rem;\n    padding-right: 8rem;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:order-1 {\n    order: 1;\n  }\n\n  .lg\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .lg\\:max-w-full {\n    max-width: 100%;\n  }\n\n  .lg\\:px-16 {\n    padding-left: 4rem;\n    padding-right: 4rem;\n  }\n}\n@media (min-width: 1280px) {\n\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n}"
  },
  {
    "path": "examples/prefix/tailwind.config.js",
    "content": "module.exports = {\n  content: ['./index.html'],\n  corePlugins: process.env.CLEAN ? [] : {},\n  darkMode: 'class',\n  theme: {\n    variables: (theme) => ({\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          medium: '2rem',\n          large: '3rem',\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n            500: '#ff0000',\n            900: '#d70000',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n          container: '2rem',\n        },\n      },\n    }),\n  },\n  plugins: [\n    require('../../src/index')({\n      variablePrefix: '--prefix',\n    }),\n  ],\n}\n"
  },
  {
    "path": "examples/prefix/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "examples/simple/clean.css",
    "content": ":root {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --sizes-0\\.5: 2px;\n  --sizes-1\\.0-foo: 1rem;\n  --sizes-1\\.0-2\\.4: 2rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem\n}\n"
  },
  {
    "path": "examples/simple/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Simple example using @mertasan/tailwindcss-variables</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body class=\"bg-gray-50\">\n<section class=\"py-20 bg-gray-50\">\n  <div class=\"container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n    <div class=\"flex flex-wrap items-center -mx-3\">\n      <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n        <div class=\"w-full lg:max-w-md\">\n          <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n            Tailwindcss Variables</h2>\n          <p class=\"mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold\">\n            [simple example]</p>\n          <a href=\"https://github.com/mertasan/@mertasan/tailwindcss-variables\" class=\"mt-4 tracking-tight xl:mt-6 text-base sm:text-md text-blue-500 hover:text-blue-600 font-heading leading-tight font-medium\">\n            source</a>\n        </div>\n      </div>\n      <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n        <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n      </div>\n    </div>\n  </div>\n</section>\n</body>\n</html>\n"
  },
  {
    "path": "examples/simple/package.json",
    "content": "{\n  \"name\": \"simple\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/simple/style.css",
    "content": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse;  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;  /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000;\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem;\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.order-1 {\n  order: 1;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mb-12 {\n  margin-bottom: 3rem;\n}\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.text-blue-500 {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .sm\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:px-32 {\n    padding-left: 8rem;\n    padding-right: 8rem;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:order-1 {\n    order: 1;\n  }\n\n  .lg\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .lg\\:max-w-full {\n    max-width: 100%;\n  }\n\n  .lg\\:px-16 {\n    padding-left: 4rem;\n    padding-right: 4rem;\n  }\n}\n@media (min-width: 1280px) {\n\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n}"
  },
  {
    "path": "examples/simple/tailwind.config.js",
    "content": "module.exports = {\n  content: ['./index.html'],\n  corePlugins: process.env.CLEAN ? [] : {},\n  darkMode: 'class',\n  theme: {\n    variables: (theme) => ({\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          medium: '2rem',\n          large: '3rem',\n          '0.5': '2px',\n          '1.0': {\n            foo: '1rem',\n            2.4: '2rem',\n          },\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n            500: '#ff0000',\n            900: '#d70000',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n          container: '2rem',\n        },\n      },\n    }),\n  },\n  plugins: [require('../../src/index')],\n}\n"
  },
  {
    "path": "examples/simple/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "examples/use-host/clean.css",
    "content": ":host {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --sizes-0\\.5: 2px;\n  --sizes-1\\.0-foo: 1rem;\n  --sizes-1\\.0-2\\.4: 2rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem\n}\n"
  },
  {
    "path": "examples/use-host/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Use host example using @mertasan/tailwindcss-variables</title>\n</head>\n<body>\n<div id=\"shadow-root-inner\" class=\"py-20 bg-gray-50\">\n  <div class=\"container items-center max-w-6xl px-10 mx-auto sm:px-20 md:px-32 lg:px-16\">\n    <div class=\"flex flex-wrap items-center -mx-3\">\n      <div class=\"order-1 w-full px-3 lg:w-1/2 lg:order-0\">\n        <div class=\"w-full lg:max-w-md\">\n          <h2 class=\"mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading\">\n            Tailwindcss Variables</h2>\n          <p class=\"mb-4 text-2xl font-semibold leading-tight tracking-tight text-green-500 xl:mb-6 sm:text-3xl font-heading\">\n            [simple example]</p>\n          <a href=\"https://github.com/mertasan/tailwindcss-variables\" class=\"mt-4 text-base font-medium leading-tight tracking-tight text-blue-500 xl:mt-6 sm:text-md hover:text-blue-600 font-heading\">\n            source</a>\n        </div>\n      </div>\n      <div class=\"w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0\">\n        <img class=\"mx-auto sm:max-w-sm lg:max-w-full\" src=\"image.png\" alt=\"feature image\">\n      </div>\n    </div>\n  </div>\n</div>\n\n<script>\n  // Set <section> tag with shadow root\n  let section = document.createElement('section')\n  section.attachShadow({ mode: 'open' })\n  document.body.appendChild(section)\n\n  let htmlElements = document.getElementById('shadow-root-inner')\n  section.shadowRoot.appendChild(htmlElements)\n\n  // Read CSS file and inject style inside\n  let styleElement = document.createElement('style');\n  section.shadowRoot.appendChild(styleElement);\n\n  fetch('./style.css')\n    .then(response => response.text())\n    .then(cssContent => {\n      styleElement.textContent = cssContent;\n  }).catch(error => {\n    console.error('Error when loading the CSS file:', error);\n  });\n</script>\n</body>\n</html>\n"
  },
  {
    "path": "examples/use-host/package.json",
    "content": "{\n  \"name\": \"use-host\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"build\": \"env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css\"\n  },\n  \"devDependencies\": {\n    \"@mertasan/tailwindcss-variables\": \"latest\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"postcss\": \"^8.4.4\",\n    \"tailwindcss\": \"^3.0.11\"\n  },\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "examples/use-host/style.css",
    "content": "/*\n! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  /* 1 */\n  border-width: 0;\n  /* 2 */\n  border-style: solid;\n  /* 2 */\n  border-color: #e5e7eb;\n  /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n  /* 3 */\n  tab-size: 4;\n  /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  /* 4 */\n  font-feature-settings: normal;\n  /* 5 */\n  font-variation-settings: normal;\n  /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0;\n  /* 1 */\n  line-height: inherit;\n  /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  border-top-width: 1px;\n  /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0;\n  /* 1 */\n  border-color: inherit;\n  /* 2 */\n  border-collapse: collapse;\n  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  /* 1 */\n  font-feature-settings: inherit;\n  /* 1 */\n  font-variation-settings: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  font-weight: inherit;\n  /* 1 */\n  line-height: inherit;\n  /* 1 */\n  color: inherit;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n  padding: 0;\n  /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\n\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  /* 1 */\n  color: #9ca3af;\n  /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  /* 1 */\n  vertical-align: middle;\n  /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n\n[hidden] {\n  display: none;\n}\n\n:host {\n  --sizes-small: 1rem;\n  --sizes-medium: 2rem;\n  --sizes-large: 3rem;\n  --sizes-0\\.5: 2px;\n  --sizes-1\\.0-foo: 1rem;\n  --sizes-1\\.0-2\\.4: 2rem;\n  --colors-red-50: #ff3232;\n  --colors-red-500: #ff0000;\n  --colors-red-900: #d70000;\n}\n\n.container {\n  --sizes-medium: 1.5rem;\n  --sizes-container: 2rem;\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n.container {\n  width: 100%;\n}\n\n@media (min-width: 640px) {\n  .container {\n    max-width: 640px;\n  }\n}\n\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n\n.order-1 {\n  order: 1;\n}\n\n.-mx-3 {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.mb-12 {\n  margin-bottom: 3rem;\n}\n\n.mb-4 {\n  margin-bottom: 1rem;\n}\n\n.mt-4 {\n  margin-top: 1rem;\n}\n\n.flex {\n  display: flex;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.max-w-6xl {\n  max-width: 72rem;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n\n.px-10 {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.py-20 {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-semibold {\n  font-weight: 600;\n}\n\n.leading-tight {\n  line-height: 1.25;\n}\n\n.tracking-tight {\n  letter-spacing: -0.025em;\n}\n\n.text-blue-500 {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity));\n}\n\n@media (min-width: 640px) {\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .sm\\:text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n\n  .sm\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n\n@media (min-width: 768px) {\n  .md\\:px-32 {\n    padding-left: 8rem;\n    padding-right: 8rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .lg\\:order-1 {\n    order: 1;\n  }\n\n  .lg\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .lg\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .lg\\:max-w-full {\n    max-width: 100%;\n  }\n\n  .lg\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .lg\\:px-16 {\n    padding-left: 4rem;\n    padding-right: 4rem;\n  }\n}\n\n@media (min-width: 1280px) {\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n}\n"
  },
  {
    "path": "examples/use-host/tailwind.config.js",
    "content": "module.exports = {\n  content: ['./index.html'],\n  corePlugins: process.env.CLEAN ? [] : {},\n  theme: {\n    variables: (theme) => ({\n      DEFAULT: {\n        sizes: {\n          small: '1rem',\n          medium: '2rem',\n          large: '3rem',\n          '0.5': '2px',\n          '1.0': {\n            foo: '1rem',\n            2.4: '2rem',\n          },\n        },\n        colors: {\n          red: {\n            50: '#ff3232',\n            500: '#ff0000',\n            900: '#d70000',\n          },\n        },\n      },\n      '.container': {\n        sizes: {\n          medium: '1.5rem',\n          container: '2rem',\n        },\n      },\n    }),\n  },\n  plugins: [require('../../src/index')({\n    useHost: true\n  })],\n}\n"
  },
  {
    "path": "examples/use-host/tailwind.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@mertasan/tailwindcss-variables\",\n  \"version\": \"2.7.0\",\n  \"description\": \"Easily create css variables without the need for a css file!\",\n  \"main\": \"src/index.js\",\n  \"license\": \"MIT\",\n  \"repository\": \"https://github.com/mertasan/tailwindcss-variables\",\n  \"bugs\": {\n    \"url\": \"https://github.com/mertasan/tailwindcss-variables/issues\"\n  },\n  \"homepage\": \"https://github.com/mertasan/tailwindcss-variables\",\n  \"author\": \"Mert Aşan <mert@yediyuz.com> (https://github.com/mertasan)\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:update-snapshots\": \"jest -u\",\n    \"test:coverage\": \"jest --coverage\",\n    \"build\": \"env NODE_ENV=production node scripts/build.js\",\n    \"build:clean\": \"env NODE_ENV=production CLEAN=true node scripts/build.js\",\n    \"style\": \"eslint .\",\n    \"lint\": \"npm run style\",\n    \"format\": \"prettier --write .\"\n  },\n  \"keywords\": [\n    \"tailwindcss\",\n    \"tailwindcss variables\",\n    \"tailwind variables\",\n    \"css variables\",\n    \"tailwind css variables\",\n    \"tailwindcss css variables\",\n    \"tailwindcss dark mode\",\n    \"tailwindcss multi theme\"\n  ],\n  \"dependencies\": {\n    \"lodash\": \"^4.17.21\"\n  },\n  \"devDependencies\": {\n    \"autoprefixer\": \"^10.4.13\",\n    \"cross-env\": \"^7.0.3\",\n    \"eslint\": \"^8.23.1\",\n    \"eslint-config-prettier\": \"^8.5.0\",\n    \"eslint-plugin-prettier\": \"^4.2.1\",\n    \"fs-extra\": \"^10.0.0\",\n    \"jest\": \"^29.4.3\",\n    \"postcss\": \"^8.4.21\",\n    \"postcss-import\": \"^14.1.0\",\n    \"prettier\": \"^2.5.0\",\n    \"snapshot-diff\": \"^0.10.0\",\n    \"tailwindcss\": \"^3.2.7\"\n  },\n  \"peerDependencies\": {\n    \"autoprefixer\": \"^10.0.2\",\n    \"postcss\": \"^8.0.9\"\n  },\n  \"prettier\": {\n    \"semi\": false,\n    \"singleQuote\": true,\n    \"printWidth\": 120,\n    \"tabWidth\": 2,\n    \"useTabs\": false,\n    \"trailingComma\": \"es5\",\n    \"bracketSpacing\": true,\n    \"parser\": \"flow\",\n    \"overrides\": [\n      {\n        \"files\": [\n          \"**/*.css\",\n          \"**/*.scss\",\n          \"**/*.html\"\n        ],\n        \"options\": {\n          \"singleQuote\": false\n        }\n      }\n    ]\n  },\n  \"jest\": {\n    \"testTimeout\": 30000,\n    \"testMatch\": [\n      \"<rootDir>/__tests__/**/*.test.js\"\n    ],\n    \"collectCoverageFrom\": [\n      \"src/**/*.js\",\n      \"!**/node_modules/**\"\n    ],\n    \"testPathIgnorePatterns\": [\n      \"<rootDir>/__tests__/util/\"\n    ],\n    \"collectCoverage\": true,\n    \"coverageReporters\": [\n      \"json\",\n      \"html\"\n    ]\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"not edge <= 18\",\n    \"not ie 11\",\n    \"not op_mini all\"\n  ],\n  \"engines\": {\n    \"node\": \">=12.13.0\"\n  }\n}\n"
  },
  {
    "path": "scripts/build.js",
    "content": "const fs = require('fs')\nconst postcss = require('postcss')\nconst tailwind = require('tailwindcss')\n\nfunction buildDistFile(examplePath, message) {\n  console.info('Building: ' + message + '...')\n\n  let styleFilename = 'style'\n  if (process.env.CLEAN) {\n    styleFilename = 'clean'\n  }\n  return postcss([\n    tailwind({\n      ...require('../' + examplePath + '/tailwind.config'),\n      content: ['./' + examplePath + '/*.html'],\n    }),\n    require('autoprefixer'),\n  ])\n    .process(['@tailwind base;', '@tailwind components;', '@tailwind utilities;'].join('\\n'), {\n      from: undefined,\n      to: `./${examplePath}/${styleFilename}.css`,\n      map: false,\n    })\n    .then((result) => {\n      fs.writeFileSync(`./${examplePath}/${styleFilename}.css`, result.css)\n      return result\n    })\n    .catch((error) => {\n      console.log(error)\n    })\n}\n\nconsole.info('Building...')\n\nPromise.all([\n  buildDistFile('examples/simple', 'Examples -> simple'),\n  buildDistFile('examples/prefix', 'Examples -> prefix'),\n  buildDistFile('examples/dark-custom-selector', 'Examples -> dark-custom-selector'),\n  buildDistFile('examples/dark-with-class', 'Examples -> dark-with-class'),\n  buildDistFile('examples/dark-with-class-to-root', 'Examples -> dark-with-class-to-root'),\n  buildDistFile('examples/dark-with-media', 'Examples -> dark-with-media'),\n  buildDistFile('examples/color-variable-helper', 'Examples -> color-variable-helper'),\n]).then(() => {\n  console.log('Finished building.')\n})\n"
  },
  {
    "path": "src/helpers.js",
    "content": "const startsWith = require('lodash/startsWith')\nconst mapValues = require('lodash/mapValues')\nconst isPlainObject = require('lodash/isPlainObject')\nconst includes = require('lodash/includes')\n\nconst withFallback = (variable, startsWithVar = false) => {\n  if (includes(variable, ',')) {\n    variable = variable.replace(',', '-rgb,')\n    return startsWithVar ? variable : variable + ')'\n  } else {\n    return startsWithVar ? variable.replace(')', '-rgb)') : variable + '-rgb'\n  }\n}\nconst withRgb = (variable, forceRGB) => {\n  if (forceRGB) {\n    return startsWith(variable, 'var') ? variable : 'var(' + variable + ')'\n  }\n  return startsWith(variable, 'var') ? withFallback(variable, true) : 'var(' + withFallback(variable) + ')'\n}\n\nconst colorVariable = (variable, forceRGB = false) => {\n  return function ({ opacityVariable, opacityValue }) {\n    if (opacityValue !== undefined) {\n      return `rgba(${withRgb(variable, forceRGB)}, ${opacityValue})`\n    }\n    if (opacityVariable !== undefined) {\n      return `rgba(${withRgb(variable, forceRGB)}, var(${opacityVariable}, 1))`\n    }\n    return `rgb(${withRgb(variable, forceRGB)})`\n  }\n}\n\nconst setColorVariable = (color, forceRGB) => {\n  return startsWith(color, 'var') ? colorVariable(color, forceRGB) : color\n}\nconst convertColorVariables = (colors, forceRGB) => {\n  return mapValues(colors, (color) =>\n    isPlainObject(color)\n      ? mapValues(color, (subColor) => setColorVariable(subColor, forceRGB))\n      : setColorVariable(color, forceRGB)\n  )\n}\n\nmodule.exports.colorVariable = colorVariable\nmodule.exports.convertColorVariables = convertColorVariables\n"
  },
  {
    "path": "src/index.js",
    "content": "const plugin = require('tailwindcss/plugin')\nconst isEmpty = require('lodash/isEmpty')\nconst isUndefined = require('lodash/isUndefined')\nconst api = require('./pluginApi')\nconst has = require('lodash/has')\nconst get = require('lodash/get')\nconst { convertColorVariables } = require('./helpers')\n\n/**\n * @typedef pluginOptions\n * @property {Boolean} darkToRoot\n * @property {Boolean} useHost\n * @property {Object} extendColors\n * @property {Boolean} forceRGB\n * @property {Boolean} toBase\n * @property {Boolean} colorVariables\n * @property {String} variablePrefix\n * @property {String} darkSelector - @deprecated\n */\n\n/**\n * @typedef  {Object} plugin\n * @property {function} withOptions\n */\n\nmodule.exports = plugin.withOptions(\n  /**\n   * @param {pluginOptions} options\n   */\n  function (options) {\n    return function ({ addBase, addComponents, theme, config }) {\n      let variables = theme('variables', {})\n      let darkVariables = theme('darkVariables', {})\n      let toBase = get(options, 'toBase', true)\n      if (!isEmpty(variables)) {\n        let getVariables = api.variables(variables, options)\n        toBase ? addBase(getVariables) : addComponents(getVariables)\n      }\n\n      if (isUndefined(options)) {\n        options = {}\n      }\n\n      let [mode, darkSelector = get(options, 'darkSelector', '.dark') ?? '.dark'] = [].concat(\n        config('darkMode', 'media')\n      )\n\n      options.darkSelector = darkSelector\n\n      if (!isEmpty(darkVariables) && ['class', 'media'].includes(mode)) {\n        let getDarkVariables = api.darkVariables(darkVariables, options, mode)\n        toBase ? addBase(getDarkVariables) : addComponents(getDarkVariables)\n      }\n    }\n  },\n  (options) => ({\n    theme: {\n      extend: {\n        colors: has(options, 'extendColors')\n          ? convertColorVariables(options.extendColors, options.forceRGB ? options.forceRGB : false)\n          : {},\n      },\n    },\n  })\n)\n"
  },
  {
    "path": "src/pluginApi.js",
    "content": "const fromPairs = require('lodash/fromPairs')\nconst toPairs = require('lodash/toPairs')\nconst merge = require('lodash/merge')\nconst isEmpty = require('lodash/isEmpty')\nconst _forEach = require('lodash/forEach')\nconst has = require('lodash/has')\nconst { setVariable, setDarkMediaVariable, setComponent, build, darkBuild, flattenOptions } = require('./utils')\n\nconst variables = (variables, options) => {\n  let variableList = {}\n  let data = build(options, variables)\n\n  _forEach(data, (value, key) => merge(variableList, setVariable(key, fromPairs(value))))\n\n  return variableList\n}\n\nconst darkVariables = (variables, options, darkMode = 'media') => {\n  let variableList = {}\n\n  if (darkMode === 'class' || darkMode === 'media') {\n    if (!has(options, 'darkSelector')) {\n      options.darkSelector = '.dark'\n    }\n    let data = darkBuild(options, darkMode, variables)\n    _forEach(data, (value, key) =>\n      merge(\n        variableList,\n        darkMode === 'media' ? setDarkMediaVariable(key, fromPairs(value)) : setVariable(key, fromPairs(value))\n      )\n    )\n  }\n\n  return variableList\n}\n\nconst getComponents = (selector, components) => {\n  let componentList = {}\n  selector = isEmpty(selector) ? '' : selector\n  toPairs(flattenOptions(components)).forEach(([key, config]) => {\n    const modifier = key === 'DEFAULT' ? '' : isEmpty(selector) ? `${key}` : `-${key}`\n    toPairs(config)\n      .filter(([, options]) => !isEmpty(options))\n      .forEach(([subKey, options]) => merge(componentList, setComponent(selector, modifier, options)))\n  })\n\n  return componentList\n}\nmodule.exports.getComponents = getComponents\nmodule.exports.variables = variables\nmodule.exports.darkVariables = darkVariables\n"
  },
  {
    "path": "src/utils.js",
    "content": "const merge = require('lodash/merge')\nconst fromPairs = require('lodash/fromPairs')\nconst toPairs = require('lodash/toPairs')\nconst assign = require('lodash/assign')\nconst entries = require('lodash/entries')\nconst indexOf = require('lodash/indexOf')\nconst isPlainObject = require('lodash/isPlainObject')\nconst hasOwn = require('lodash/has')\nconst _forEach = require('lodash/forEach')\nconst _replace = require('lodash/replace')\nconst startsWith = require('lodash/startsWith')\nconst trimStart = require('lodash/trimStart')\nconst trimEnd = require('lodash/trimEnd')\nconst get = require('lodash/get')\n\nconst setComponent = (component, modifier, options) => {\n  return { [`${component}${modifier}`]: options }\n}\n\nconst setVariable = (themeName, options) => {\n  return { [`${themeName}`]: options }\n}\nconst setDarkMediaVariable = (themeName, options) => {\n  return {\n    ['@media (prefers-color-scheme: dark)']: {\n      [`${themeName}`]: options,\n    },\n  }\n}\n\nconst flattenOptions = (options) => {\n  return merge(\n    {},\n    ...toPairs(options).map(([keys, value]) => {\n      const flattenValue = isPlainObject(value) ? flattenOptions(value) : value\n      return fromPairs(keys.split(', ').map((key) => [key, flattenValue]))\n    })\n  )\n}\n\nconst formatVariableKey = (key) => {\n  if (key === 'DEFAULT') {\n    return ''\n  }\n  key = key.toString()\n  return key\n    .replace(/_/g, '-')\n    .replace(/[^a-zA-Z0-9-.]+/gi, '')\n    .replace(/\\./gi, '\\\\.')\n    .replace('---', '--')\n}\n\nconst splitVars = (source) => {\n  let results = {}\n\n  ;(function recurse(obj, current) {\n    for (let key in obj) {\n      let newKey = formatVariableKey(current ? current + '-' + key : key)\n      if (indexOf(obj, key) && isPlainObject(obj[key])) {\n        recurse(value, newKey)\n      } else {\n        results[newKey] = obj[key]\n      }\n    }\n  })(source)\n  return entries(results)\n}\n\nconst parseVariables = (object, varPrefix) => {\n  let newObject = {}\n  let results = []\n\n  function recurse(object, varPrefix) {\n    for (let key in object) {\n      let pre = _replace(varPrefix === undefined ? '' : varPrefix + '-', '---', '--')\n      let formattedKey = formatVariableKey(key)\n      if (hasOwn(object, key) && isPlainObject(object[key])) {\n        newObject = recurse(object[key], formattedKey ? pre + formattedKey : pre.slice(0, -1))\n      } else {\n        newObject[formattedKey ? pre + formattedKey : pre.slice(0, -1)] = `${object[key]}`\n      }\n    }\n    return newObject\n  }\n\n  _forEach(splitVars(recurse(object, '--' + varPrefix)), ([key, items]) => results.push([key, items]))\n  return results\n}\n\nconst RGBAtoRGB = (rgba) => {\n  rgba = trimStart(rgba, 'rgba(')\n  rgba = trimEnd(rgba, ')')\n  return rgba.substring(0, rgba.lastIndexOf(','))\n}\n\nconst getRGBKey = (key, forceRGB) => {\n  if (forceRGB) {\n    return key\n  }\n  if (key === 'DEFAULT') {\n    return 'rgb'\n  } else {\n    return key + '-rgb'\n  }\n}\n\nconst hexToRGB = (key, h, forceRGB) => {\n  if (startsWith(h, 'rgba')) {\n    return [getRGBKey(key, forceRGB), RGBAtoRGB(h)]\n  } else if (startsWith(h, 'rgb')) {\n    h = trimStart(h, 'rgb(')\n    h = trimEnd(h, ')')\n    return [getRGBKey(key, forceRGB), h]\n  } else if (!startsWith(h, '#')) {\n    return [key, h]\n  }\n\n  let r = 0,\n    g = 0,\n    b = 0\n\n  // 3 digits\n  if (h.length === 4) {\n    r = '0x' + h[1] + h[1]\n    g = '0x' + h[2] + h[2]\n    b = '0x' + h[3] + h[3]\n\n    // 6 digits\n  } else if (h.length === 7) {\n    r = '0x' + h[1] + h[2]\n    g = '0x' + h[3] + h[4]\n    b = '0x' + h[5] + h[6]\n  }\n\n  return [getRGBKey(key, forceRGB), '' + +r + ',' + +g + ',' + +b + '']\n}\n\nconst setColorVariables = (source, forceRGB) => {\n  return merge(\n    source,\n    ...toPairs(source).map(([keys, value]) => {\n      const flattenValue = isPlainObject(value) ? setColorVariables(value, forceRGB) : value\n      return fromPairs(keys.split(', ').map((key) => hexToRGB(key, flattenValue, forceRGB)))\n    })\n  )\n}\n\nconst build = (options, source) => {\n  let varPrefix = formatVariableKey(get(options, 'variablePrefix', ''))\n  let colorVariables = get(options, 'colorVariables', false)\n  let forceRGB = get(options, 'forceRGB', false)\n  let cssBaseKey = get(options, 'useHost', false) ? `:host` : `:root`\n\n  if (colorVariables) {\n    source = setColorVariables(source, forceRGB)\n  }\n  if (!varPrefix) {\n    varPrefix = ''\n  }\n  let componentOptions = {}\n  _forEach(toPairs(flattenOptions(source)), ([key, config]) => {\n    let block = key === 'DEFAULT' ? cssBaseKey : `${key}`\n\n    if (!hasOwn(componentOptions, block)) {\n      componentOptions[block] = []\n    }\n\n    assign(componentOptions[block], parseVariables(config, varPrefix))\n  })\n\n  return componentOptions\n}\n\nconst darkBuild = (options, darkMode, source) => {\n  let varPrefix = formatVariableKey(get(options, 'variablePrefix', ''))\n  if (!varPrefix) {\n    varPrefix = ''\n  }\n  let colorVariables = get(options, 'colorVariables', false)\n  let forceRGB = get(options, 'forceRGB', false)\n  if (colorVariables) {\n    source = setColorVariables(source, forceRGB)\n  }\n  let darkSelector = get(options, 'darkSelector')\n  let darkToRoot = hasOwn(options, 'darkToRoot') ? options.darkToRoot : true\n  let cssBaseKey = get(options, 'useHost', false) ? `:host` : `:root`\n\n  let componentOptions = {}\n\n  _forEach(toPairs(flattenOptions(source)), ([key, config]) => {\n    let block\n\n    if (key === 'DEFAULT') {\n      if (darkMode === 'class') {\n        block = darkToRoot ? `${cssBaseKey}${darkSelector}` : `${darkSelector}`\n      } else {\n        block = `${cssBaseKey}`\n      }\n    } else {\n      if (darkMode === 'class') {\n        block = darkToRoot ? `${cssBaseKey}${darkSelector} ${key}` : `${darkSelector} ${key}`\n      } else {\n        block = `${key}`\n      }\n    }\n\n    if (!hasOwn(componentOptions, block)) {\n      componentOptions[block] = []\n    }\n\n    assign(componentOptions[block], parseVariables(config, varPrefix))\n  })\n\n  return componentOptions\n}\n\nmodule.exports.build = build\nmodule.exports.darkBuild = darkBuild\nmodule.exports.flattenOptions = flattenOptions\nmodule.exports.setComponent = setComponent\nmodule.exports.setVariable = setVariable\nmodule.exports.setDarkMediaVariable = setDarkMediaVariable\n"
  }
]