Showing preview only (332K chars total). Download the full file or copy to clipboard to get everything.
Repository: mertasan/tailwindcss-variables
Branch: master
Commit: 0743d8bb1a28
Files: 127
Total size: 301.4 KB
Directory structure:
gitextract_64fxtnd3/
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── ---bug-report.md
│ │ ├── ---support-question.md
│ │ └── --feature-request.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── build.yml
│ ├── publish.yml
│ └── tests.yml
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── .run/
│ └── tailwindcss-variables-test.run.xml
├── LICENSE
├── README.md
├── README.tr.md
├── __tests__/
│ ├── basic-usage.test.html
│ ├── basic-usage.test.js
│ ├── color-variable-helper.test.html
│ ├── color-variable-helper.test.js
│ ├── color-variable-helper2.test.html
│ ├── css-selectors.test.html
│ ├── css-selectors.test.js
│ ├── dark-mode-to-root.test.html
│ ├── dark-mode.test.html
│ ├── dark-mode.test.js
│ ├── extend-colors.test.html
│ ├── extend-colors.test.js
│ ├── fallback.test.css
│ ├── fallback.test.html
│ ├── fallback.test.js
│ ├── force-rgb.test.html
│ ├── force-rgb.test.js
│ ├── format-variables.test.html
│ ├── format-variables.test.js
│ ├── issues.test.html
│ ├── issues.test.js
│ ├── nested-variables.test.html
│ ├── nested-variables.test.js
│ ├── plugin-api.test.html
│ ├── plugin-api.test.js
│ ├── readme.test.html
│ ├── readme.test.js
│ ├── test.stub
│ ├── to-base.test.html
│ ├── to-base.test.js
│ ├── use-host.test.html
│ ├── use-host.test.js
│ ├── util/
│ │ └── _utils.js
│ ├── variable-prefix.test.html
│ └── variable-prefix.test.js
├── api.js
├── colorVariable.js
├── examples/
│ ├── .npmignore
│ ├── api-examples/
│ │ ├── advanced/
│ │ │ ├── components.js
│ │ │ ├── index.js
│ │ │ └── themes.js
│ │ ├── readme-source/
│ │ │ ├── components.js
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ ├── tailwind.config.js
│ │ │ └── themes.js
│ │ ├── simple/
│ │ │ └── index.js
│ │ ├── with-components/
│ │ │ ├── components.js
│ │ │ └── index.js
│ │ ├── with-components-null-selector/
│ │ │ ├── components.js
│ │ │ └── index.js
│ │ └── with-themes/
│ │ ├── index.js
│ │ └── themes.js
│ ├── color-variable-helper/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-custom-selector/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-with-class/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-with-class-to-root/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-with-media/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── prefix/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── simple/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ └── use-host/
│ ├── clean.css
│ ├── index.html
│ ├── package.json
│ ├── style.css
│ ├── tailwind.config.js
│ └── tailwind.css
├── package.json
├── scripts/
│ └── build.js
└── src/
├── helpers.js
├── index.js
├── pluginApi.js
└── utils.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
max_line_length = 120
[*.php]
indent_size = 4
[*.md]
trim_trailing_whitespace = true
[*.test.js]
trim_trailing_whitespace = false
================================================
FILE: .eslintignore
================================================
/__tests__/util/_utils.js
*.stub
.run
*.md
================================================
FILE: .eslintrc.json
================================================
{
"env": {
"jest": true
},
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"extends": [
"prettier"
],
"plugins": [
"prettier"
],
"rules": {
"camelcase": [
"error",
{
"allow": [
"^unstable_"
]
}
],
"no-unused-vars": [
2,
{
"args": "none",
"argsIgnorePattern": "^_"
}
],
"no-warning-comments": 0,
"prettier/prettier": [
"error",
{
"semi": false,
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "es5",
"bracketSpacing": true,
"parser": "flow",
"overrides": [
{
"files": [
"**/*.css",
"**/*.scss",
"**/*.html"
],
"options": {
"singleQuote": false
}
}
]
}
]
}
}
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: mertasan
================================================
FILE: .github/ISSUE_TEMPLATE/---bug-report.md
================================================
---
name: "\U0001F4CC Bug report"
about: Create a report to help us improve
title: ''
labels: bug
assignees: ''
---
### Versions:
- Package Version: #.#.#
- Tailwindcss Version: #.#.#
### Description:
<!-- Please describe in detail the nature of the bug, code samples, etc. -->
### Steps To Reproduce:
- …
================================================
FILE: .github/ISSUE_TEMPLATE/---support-question.md
================================================
---
name: "\U0001F914 Support Question"
about: I need assistance or clarification on usage of this library
title: ''
labels: question
assignees: ''
---
### Versions:
- Package Version: #.#.#
- Tailwindcss Version: #.#.#
### Question:
================================================
FILE: .github/ISSUE_TEMPLATE/--feature-request.md
================================================
---
name: "\U0001F389Feature request"
about: Suggest an idea for this project
title: ''
labels: feature request
assignees: ''
---
### Summary
<!--
Describe in detail what you propose, show (preferable) code examples and also signal if you're willing to work on it.
-->
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: npm
directory: "/"
schedule:
interval: daily
time: "03:00"
open-pull-requests-limit: 10
================================================
FILE: .github/workflows/build.yml
================================================
name: build
on:
workflow_dispatch:
push:
paths:
- 'examples/**'
pull_request:
branches: [ master ]
release:
types: [ published, edited ]
jobs:
build:
if: ${{ github.event_name != 'pull_request' || (github.event_name == 'pull_request' && github.event.action == 'closed' && github.event.pull_request.merged == true) }}
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16]
steps:
- uses: actions/checkout@v3
- name: Use Node ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Use cached node_modules
id: cache-build
uses: actions/cache@v3
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-build
restore-keys: |
nodeModules-
- name: Install dependencies
if: steps.cache-build.outputs.cache-hit != 'true'
run: npm install
env:
CI: true
- name: Building Examples
run: npm run build
- name: Clean CSS styles of the Examples are building
run: npm run build:clean
================================================
FILE: .github/workflows/publish.yml
================================================
name: npm-publish
on:
workflow_dispatch:
release:
types: [published, edited]
jobs:
publish:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
scope: '@mertasan'
- name: Use cached node_modules
id: cache-publish
uses: actions/cache@v3
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-publish
restore-keys: |
nodeModules-
- name: Install dependencies
if: steps.cache-publish.outputs.cache-hit != 'true'
run: npm install
env:
CI: true
- name: Test
run: npm run test
env:
CI: true
- name: Publish
run: npm publish
env:
CI: true
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
================================================
FILE: .github/workflows/tests.yml
================================================
name: tests
on:
push:
branches:
- "**"
paths-ignore:
- '**.md'
pull_request:
types: [ready_for_review, synchronize, opened]
schedule:
- cron: '0 0 * * *'
jobs:
tests:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16]
steps:
- name: Use Node ${{ matrix.node-version }}
uses: actions/checkout@v3
- name: Setup node ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Install dependencies
if: steps.npm-cache.outputs.cache-hit != 'true'
run: npm install
env:
CI: true
- name: Lint
run: npm run lint
env:
CI: true
- name: Tests
run: npm run test -- --coverage
env:
CI: true
================================================
FILE: .gitignore
================================================
node_modules/
**/*/package-lock.json
yarn.lock
coverage/
.DS_Store
.idea
cache/
*.log
================================================
FILE: .npmignore
================================================
node_modules/
/coverage
/examples
yarn.lock
yarn-error.log
.DS_Store
.idea
.prettierignore
.run
cache/
================================================
FILE: .prettierignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
coverage
bower_components
package.json
package-lock.json
node_modules/
.npm
.idea/
.DS_Store
__tests__/*
!__tests__/util/*
examples/*
!examples/**/*.config.js
.run
.editorconfig
cache/
.github/
.eslintrc.json
*.md
.prettierrc
================================================
FILE: .prettierrc
================================================
{
"semi": false,
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "es5",
"bracketSpacing": true,
"parser": "flow",
"overrides": [
{
"files": [
"**/*.css",
"**/*.scss",
"**/*.html"
],
"options": {
"singleQuote": false
}
}
]
}
================================================
FILE: .run/tailwindcss-variables-test.run.xml
================================================
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="@mertasan/tailwindcss-variables" type="JavaScriptTestRunnerJest">
<node-interpreter value="project"/>
<node-options value=""/>
<jest-package value="$PROJECT_DIR$/node_modules/jest"/>
<working-dir value="$PROJECT_DIR$/src"/>
<jest-options value="--coverage"/>
<envs/>
<scope-kind value="ALL"/>
<method v="2"/>
</configuration>
</component>
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021 Mert Aşan <mert@yediyuz.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p>
<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>
<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>
<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>
<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>
<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>
<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>
</p>
# Tailwind CSS Variables
This 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.
Similar 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.
## Highlights
- Variables are as easy as defining tailwindcss colors...
- You can designate the variables to `:root`, `:host` or custom CSS selectors.
- Variables can be formed through using nested object notation.
- Different variables can be composed for the Dark Mode.
- Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.
- Dark Mode custom selector is inherited from [Tailwind configuration](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name)
- It allows you to add custom themes while creating your own plugin via the plugin API.
- Prefix can be defined for variables. (It is useful when using the plugin API)
- You can configure your own needs such as multi-themes without needing an additional plugin!
## Documentation
| Language | Documentation link|
| --- | --- |
| English | Documentation |
| Turkish | [**Dökümantasyon**](./README.tr.md) |
## Version Compatibility
| Tailwind CSS | Package |
|--------------|----------------|
| 2.x | 1.x |
| 3.x | 2.x |
## Installation
```cli
npm install -D @mertasan/tailwindcss-variables
```
## Playground
Simple example: https://play.tailwindcss.com/hCpcvnGsPx?file=config
## Usage
```javascript
// tailwind.config.js
module.exports = {
theme: {
colors: {
red: {
50: 'var(--colors-red-50)'
}
},
variables: {
DEFAULT: {
sizes: {
small: '1rem',
button: {
size: '2rem'
}
},
colors: {
red: {
50: '#ff3232',
},
},
},
'.container': {
sizes: {
medium: '1.5rem',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--sizes-button-size: 2rem;
--colors-red-50: #ff3232
}
.container {
--sizes-medium: 1.5rem
}
```
## Dark Mode
### with the `class` mode
```javascript
// tailwind.config.js
module.exports = {
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--colors-red-50: red
}
.container {
--colors-red-50: indigo
}
:root.dark {
--colors-red-50: blue
}
:root.dark .container {
--colors-red-50: green
}
```
#### Custom dark selector
Note that the plugin will use your custom selector if [enabled in your Tailwind configuration](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name).
```javascript
// tailwind.config.js
module.exports = {
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
colors: {
red: {
50: 'red',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--colors-red-50: red
}
:root.custom-dark-selector {
--colors-red-50: blue
}
```
#### with the `darkToRoot` configuration
If the `darkMode` configuration is set as `'class'` in your tailwindcss configuration, you can change and customize the `darkToRoot` setting.
```javascript
// tailwind.config.js
module.exports = {
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
darkToRoot: false,
})
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--colors-red-50: red
}
.container {
--colors-red-50: indigo
}
.custom-dark-selector {
--colors-red-50: blue
}
.custom-dark-selector .container {
--colors-red-50: green
}
```
### with the `media` mode
```javascript
// tailwind.config.js
module.exports = {
darkMode: 'media',
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--colors-red-50: red
}
.container {
--colors-red-50: indigo
}
@media (prefers-color-scheme: dark) {
:root {
--colors-red-50: blue
}
.container {
--colors-red-50: green
}
}
```
## Prefix
```javascript
// tailwind.config.js
module.exports = {
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
button: {
size: '2rem'
}
},
colors: {
red: {
50: '#ff3232',
},
},
},
'.container': {
sizes: {
medium: '1.5rem',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
variablePrefix: 'admin'
})
]
}
```
**Output:**
```css
:root {
--admin-sizes-small: 1rem;
--admin-sizes-button-size: 2rem;
--admin-colors-red-50: #ff3232
}
.container {
--admin-sizes-medium: 1.5rem
}
```
## Nested object notation
```javascript
// tailwind.config.js
module.exports = {
theme: {
variables: {
DEFAULT: {
sizes: {
DEFAULT: '1px',
small: '1rem',
admin: {
DEFAULT: '2px',
buttons: {
colors: {
red: {
DEFAULT: '#ffffff',
500: '#ff0000',
600: '#e60000',
}
}
}
}
},
}
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
```css
:root {
--sizes: 1px;
--sizes-small: 1rem;
--sizes-admin: 2px;
--sizes-admin-buttons-colors-red-500: #ff0000;
--sizes-admin-buttons-colors-red-600: #e60000;
--sizes-admin-buttons-colors-red: #ffffff
}
```
## Rules for keys of variables
Variable 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 (-).
Rule:
````jsregexp
/[^a-zA-Z0-9-.]+/gi
````
| Before | After |
|--------------------------------------|-----------------------------------|
| hello[$&+,:;=?@#'<>-^*()%!]WORLD | hello-WORLD |
| hello__world | hello-world |
| css_variables_for-tailwindcss | css-variables-for-tailwindcss |
| foo-bar-1.0 | foo-bar-1\\.0 |
Here's an example:
```javascript
// tailwind.config.js
module.exports = {
theme: {
variables: {
DEFAULT: {
colors: {
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
},
sizes: {
1.5: '1rem',
xl: {
'3.0': '2rem',
},
},
},
'[type=\'button\']': {
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
nested_auto_dash: {
color_primary: '100%',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--colors-hello-WORLD: 100%;
--colors-underscore-to-dash: 100%;
--colors-underscore-to-dash-with-dash: 100%;
--colors-auto-dash: 100%;
--sizes-1\.5: 1rem;
--sizes-xl-3\.0: 2rem
}
[type='button'] {
--hello-WORLD: 100%;
--underscore-to-dash: 100%;
--underscore-to-dash-with-dash: 100%;
--auto-dash: 100%;
--nested-auto-dash-color-primary: 100%
}
```
## Helpers
### `colorVariable()`
You can use the `colorVariable` helper to add `text-opacity` or `bg-opacity` to the variables for which colors are defined.
```javascript
// tailwind.config.js
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
module.exports = {
theme: {
screens: false,
colors: {
primary: colorVariable('--colors-primary'), // HEX (3 digits)
secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)
white: '#ffffff', // no variable
blue: colorVariable('var(--colors-blue)'), // RGB
red: {
400: colorVariable('var(--colors-red-400)'), // RGBA
500: colorVariable('var(--colors-red-500)'), // RGBA
600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)
},
gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)
green: 'var(--colors-green)', // RGB (without using colorVariable() helper)
},
variables: {
DEFAULT: {
colors: {
primary: '#ff0',
secondary: '#000000',
gray: '#6B7280',
blue: 'rgb(0,0,254)',
red: {
400: 'rgba(254,0,0,0.5)',
500: 'rgba(254,0,0,1)',
},
green: 'rgb(0,255,0)',
},
sizes: {
small: '10px',
medium: '2rem',
large: '100%',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
colorVariables: true
})
]
}
```
**Purge:**
```html
<div class="text-opacity-50 text-primary"></div>
<div class="bg-opacity-50 bg-secondary"></div>
<div class="bg-opacity-50 bg-gray"></div>
<div class="text-opacity-50 text-blue"></div>
<div class="bg-red-400"></div>
<div class="bg-red-500"></div>
<div class="bg-red-600"></div>
<div class="bg-opacity-50 bg-green"></div>
<div class="bg-white bg-opacity-50"></div>
```
**Output:**
```css
:root {
--colors-primary: #ff0;
--colors-secondary: #000000;
--colors-gray: #6B7280;
--colors-blue: rgb(0,0,254);
--colors-red-400: rgba(254,0,0,0.5);
--colors-red-500: rgba(254,0,0,1);
--colors-red-400-rgb: 254,0,0;
--colors-red-500-rgb: 254,0,0;
--colors-green: rgb(0,255,0);
--colors-primary-rgb: 255,255,0;
--colors-secondary-rgb: 0,0,0;
--colors-gray-rgb: 107,114,128;
--colors-blue-rgb: 0,0,254;
--colors-green-rgb: 0,255,0;
--sizes-small: 10px;
--sizes-medium: 2rem;
--sizes-large: 100%
}
.text-primary {
--tw-text-opacity: 1;
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
}
.text-blue {
--tw-text-opacity: 1;
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
}
.text-opacity-50 {
--tw-text-opacity: 0.5
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
}
.bg-red-600 {
background-color: var(--colors-red-500)
}
.bg-gray {
background-color: var(--colors-gray)
}
.bg-green {
background-color: var(--colors-green)
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5
}
```
### forceRGB
If `forceRGB` is set to `true`, no additional variables are created.
#### Before
```javascript
// tailwind.config.js
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
module.exports = {
theme: {
screens: false,
colors: {
green: colorVariable('var(--colors-green)'),
},
variables: {
DEFAULT: {
colors: {
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
colorVariables: true,
})
]
}
```
**Output:**
```css
:root {
--colors-green: #11ff00;
--colors-green-rgb: 17,255,0
}
.text-green {
--tw-text-opacity: 1;
color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))
}
```
#### After
```javascript
// tailwind.config.js
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
module.exports = {
theme: {
screens: false,
colors: {
green: colorVariable('var(--colors-green)', true),
},
variables: {
DEFAULT: {
colors: {
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
colorVariables: true,
forceRGB: true,
})
]
}
```
**Output:**
```css
:root {
--colors-green: 17,255,0;
}
.text-green {
--tw-text-opacity: 1;
color: rgba(var(--colors-green), var(--tw-text-opacity))
}
```
### useHost
If `useHost` is set to `true`, `:host` is used instead of `:root` for variables injection.
#### Config
```javascript
// tailwind.config.js
module.exports = {
theme: {
variables: {
DEFAULT: {
colors: {
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
useHost: true,
})
]
}
```
**Output:**
```css
:host {
--colors-green: #11ff00;
}
```
### extendColors for colorVariable
Instead of using each of the colors between the variables as `colorVariable('var(--colors-red)')`,
You can define colors in the `extendColors` option.
**Example:**
```javascript
// tailwind.config.js
module.exports = {
theme: {
screens: false,
colors: {
white: '#fff',
green: 'var(--colors-green)',
},
variables: {
DEFAULT: {
colors: {
blue: '#0065ff',
red: '#ff0000',
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
colorVariables: true,
extendColors: {
blue: 'var(--colors-blue)',
red: 'var(--colors-red)',
}
})
]
}
```
**Output:**
```css
:root {
--colors-blue: #0065ff;
--colors-red: #ff0000;
--colors-green: #11ff00;
--colors-blue-rgb: 0,101,255;
--colors-red-rgb: 255,0,0;
--colors-green-rgb: 17,255,0
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.text-green {
color: var(--colors-green)
}
.text-blue {
--tw-text-opacity: 1;
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
}
.text-red {
--tw-text-opacity: 1;
color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
}
.text-opacity-50 {
--tw-text-opacity: 0.5
}
```
**Example 2 - Using with [forceRGB](#forcergb):**
```javascript
// tailwind.config.js
module.exports = {
theme: {
screens: false,
colors: {
white: '#fff',
green: 'var(--colors-green)',
},
variables: {
DEFAULT: {
colors: {
blue: '#0065ff',
red: '#ff0000',
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
colorVariables: true,
forceRGB: true,
extendColors: {
blue: 'var(--colors-blue)',
red: 'var(--colors-red)',
}
})
]
}
```
**Output:**
```css
:root {
--colors-blue: 0,101,255;
--colors-red: 255,0,0;
--colors-green: 17,255,0
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.text-green {
color: var(--colors-green)
}
.text-blue {
--tw-text-opacity: 1;
color: rgba(var(--colors-blue), var(--tw-text-opacity))
}
.text-red {
--tw-text-opacity: 1;
color: rgba(var(--colors-red), var(--tw-text-opacity))
}
.text-opacity-50 {
--tw-text-opacity: 0.5
}
```
### toBase
By default, variables are added to `@tailwind base;` styles.
If 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.
```js
//...
plugins: [
require('@mertasan/tailwindcss-variables')({
toBase: false, // default: true
})
]
//...
```
- [tailwindcss.com - Functions and directives](https://tailwindcss.com/docs/functions-and-directives#tailwind)
## API example for your own plugins
- [Detailed Explanation](#gerçek-kullanım-örneği-detaylı)
```javascript
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
const variablesApi = require('@mertasan/tailwindcss-variables/api')
let variableOptions = {
variablePrefix: 'myplugin'
}
const pluginVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
},
}
const pluginDarkVariables = {
DEFAULT: {
colors: {
primary: 'red',
secondary: 'yellow',
warning: 'green',
},
},
}
module.exports = {
plugins: [
plugin(function({ addComponents, config }) {
addComponents(variablesApi.variables(pluginVariables, variableOptions))
addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class
})
]
}
```
**Output:**
```css
:root {
--myplugin-colors-primary: black;
--myplugin-colors-secondary: white;
--myplugin-colors-warning: orange
}
:root.dark {
--myplugin-colors-primary: red;
--myplugin-colors-secondary: yellow;
--myplugin-colors-warning: green
}
```
### API component helper
You can also use tailwindcss-variables plugin API to register your components.
```javascript
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
const variablesApi = require('@mertasan/tailwindcss-variables/api')
let variableOptions = {
variablePrefix: 'myplugin'
}
const pluginVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
},
}
const pluginDarkVariables = {
DEFAULT: {
colors: {
primary: 'red',
secondary: 'yellow',
warning: 'green',
},
},
}
module.exports = {
plugins: [
plugin(function({ addComponents, config }) {
const formComponents = {
select: {
DEFAULT: {
backgroundColor: 'var(--myplugin-colors-primary)',
},
multi: {
'&.default-multi': {
backgroundColor: 'var(--myplugin-colors-secondary)',
},
'&.other-multi': {
backgroundColor: 'var(--myplugin-colors-warning)',
},
},
},
}
addComponents(variablesApi.variables(pluginVariables, variableOptions))
addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', formComponents))
})
]
}
```
**Output:**
```css
:root {
--myplugin-colors-primary: black;
--myplugin-colors-secondary: white;
--myplugin-colors-warning: orange;
}
:root.dark {
--myplugin-colors-primary: red;
--myplugin-colors-secondary: yellow;
--myplugin-colors-warning: green;
}
.form-select {
background-color: var(--myplugin-colors-primary);
}
.form-select.default-multi {
background-color: var(--myplugin-colors-secondary);
}
.form-select.other-multi {
background-color: var(--myplugin-colors-warning);
}
```
## Detailed example of the API
**What are the advantages?**
Imagine 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. :)
**What are the disadvantages?**
If you have any ideas, please don't refrain to send a PR.
**Resources on this example:**
- [Source](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples/readme-source)
- [test](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__/readme.test.js)
**Your own plugin themes:**
```javascript
// myplugin/themes.js
module.exports = (theme) => ({
themes: {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
}
}
})
```
**Your own plugin components:**
```javascript
// myplugin/components.js
module.exports = (theme) => ({
select: {
DEFAULT: {
backgroundColor: 'var(--forms-colors-primary)',
},
multi: {
'.default-multi': {
backgroundColor: 'var(--forms-colors-secondary)',
},
'.other-multi': {
backgroundColor: 'var(--forms-colors-warning)',
},
},
},
})
```
**Your own plugin source:**
```javascript
// myplugin/index.js
const plugin = require('tailwindcss/plugin')
const _ = require('lodash')
const variablesApi = require('@mertasan/tailwindcss-variables/api')
const pluginComponents = require('./components')
const pluginThemes = require('./themes')
module.exports = plugin.withOptions(
function (options) {
return function ({addComponents, theme, config}) {
let variableOptions = {
variablePrefix: theme('myPlugin.prefix', 'forms')
};
addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))
let darkVariables = theme('myPlugin.darkOptions', {});
if (!_.isEmpty(darkVariables)) {
addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))
}
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))
}
}
)
```
**User config:** (`tailwind.config.js`)
```javascript
// tailwind.config.js
module.exports = {
theme: {
myPlugin: {
options: {
colors: {
primary: 'indigo', // custom color instead of default color
}
}
},
},
plugins: [require('my-plugin')],
}
```
**Output:**
```css
:root {
--forms-colors-primary: indigo; /* <<< default color changed via root configuration */
--forms-colors-secondary: white;
--forms-colors-warning: orange;
}
.form-select {
background-color: var(--forms-colors-primary);
}
.form-select .default-multi {
background-color: var(--forms-colors-secondary);
}
.form-select .other-multi {
background-color: var(--forms-colors-warning);
}
```
Based 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.
## Examples and tests
I 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.
| Source | State |
|------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
| [Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples) |  |
| [Plugin API Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) |  |
| [Tests](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__) |  |
> Documents on examples and tests are re-organized on pull-request, push, release and etc. events.
> 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')`.
## If You Need Help
Please send any questions and issues through GitHub issues. I will try my best to help you.
## Contribution
If you are to improve or/and add new features, please feel free to send pull-requests.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
================================================
FILE: README.tr.md
================================================
<p>
<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>
<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>
<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>
<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>
<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>
<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>
</p>
# Tailwind CSS Variables
Bu 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.
Kullanım şekli, tailwindcss'in varsayılan yapılandırmaları ile benzer şekildedir. Dark Mode için ayrı değişken
grubu belirleyebilmek, plugin API aracılığıyla kendi eklentilerinize kolayca entegre edebilmek de mümkün.
## Öne çıkan özellikler
- Değişkenler, tailwindcss renklerini tanımlamak kadar basit.
- Değişkenleri `:root` ya da custom CSS seçicilere tanımlayabilirsiniz.
- Değişkenler iç içe geçmiş obje notasyonu (nested object notation) kullanılarak oluşturulabilir.
- Dark Mode için farklı değişkenler oluşturulabilir.
- Dark Mode değişkenleri, yapılandırmanızdaki `class` ya da `media` moduna göre otomatik tanımlanır.
- Dark Mode özel seçicisi, [Tailwind yapılandırmasını](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name) dikkate alır.
- Plugin API aracılığıyla kendi eklentinizi oluştururken tema yapılandırması yapmanıza olanak sağlar.
- Değişkenler için prefix tanımlaması yapılabilir. (plugin API için faydalı)
- Değişkenler, yapılandırma dosyasında veya .css vb. stil dosyalarında kullanılabilir.
- Çoklu tema gibi gereksinimlerinizi ek bir eklentiye gerek kalmadan kendiniz yapılandırabilirsiniz!
## Dökümantasyonlar
| Dil | Dökümantasyon linki |
| --- | --- |
| English | [**Documentation**](./README.md) |
| Türkçe | Dokümantasyon |
## Versiyon Uyumluluğu
| Tailwind CSS | Paket |
|--------------|-------|
| 2.x | 1.x |
| 3.x | 2.x |
## Kurulum
```cli
npm install -D @mertasan/tailwindcss-variables
```
## Canlı önizleme
Basit bir örnek: https://play.tailwindcss.com/hCpcvnGsPx?file=config
## Basit Kullanım
```javascript
// tailwind.config.js
module.exports = {
theme: {
colors: {
red: {
50: 'var(--colors-red-50)'
}
},
variables: {
DEFAULT: {
sizes: {
small: '1rem',
button: {
size: '2rem'
}
},
colors: {
red: {
50: '#ff3232',
},
},
},
'.container': {
sizes: {
medium: '1.5rem',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--sizes-button-size: 2rem;
--colors-red-50: #ff3232
}
.container {
--sizes-medium: 1.5rem
}
```
## Dark Mode
### `class` modu ile
```javascript
// tailwind.config.js
module.exports = {
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--colors-red-50: red
}
.container {
--colors-red-50: indigo
}
:root.dark {
--colors-red-50: blue
}
:root.dark .container {
--colors-red-50: green
}
```
#### Özel Dark Mode Seçicisi
[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.
```javascript
// tailwind.config.js
module.exports = {
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
colors: {
red: {
50: 'red',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--colors-red-50: red
}
:root.custom-dark-selector {
--colors-red-50: blue
}
```
#### `darkToRoot` ayarları ile
Eğer tailwindcss yapılandırmanızda `darkMode` eğer `class` olarak tanımlıysa, eklentinin `darkToRoot` ayarını kullanarak özelleştirebilirsiniz.
```javascript
// tailwind.config.js
module.exports = {
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
darkToRoot: false,
})
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--colors-red-50: red
}
.container {
--colors-red-50: indigo
}
.custom-dark-selector {
--colors-red-50: blue
}
.custom-dark-selector .container {
--colors-red-50: green
}
```
### `media` modu ile
```javascript
// tailwind.config.js
module.exports = {
darkMode: 'media',
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--sizes-small: 1rem;
--colors-red-50: red
}
.container {
--colors-red-50: indigo
}
@media (prefers-color-scheme: dark) {
:root {
--colors-red-50: blue
}
.container {
--colors-red-50: green
}
}
```
## Prefix Kullanımı
```javascript
// tailwind.config.js
module.exports = {
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
button: {
size: '2rem'
}
},
colors: {
red: {
50: '#ff3232',
},
},
},
'.container': {
sizes: {
medium: '1.5rem',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')({
variablePrefix: 'admin'
})
]
}
```
**Output:**
```css
:root {
--admin-sizes-small: 1rem;
--admin-sizes-button-size: 2rem;
--admin-colors-red-50: #ff3232
}
.container {
--admin-sizes-medium: 1.5rem
}
```
## İç içe geçmiş obje notasyonu (Nested)
```javascript
// tailwind.config.js
module.exports = {
theme: {
variables: {
DEFAULT: {
sizes: {
DEFAULT: '1px',
small: '1rem',
admin: {
DEFAULT: '2px',
buttons: {
colors: {
red: {
DEFAULT: '#ffffff',
500: '#ff0000',
600: '#e60000',
}
}
}
}
},
}
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
```css
:root {
--sizes: 1px;
--sizes-small: 1rem;
--sizes-admin: 2px;
--sizes-admin-buttons-colors-red-500: #ff0000;
--sizes-admin-buttons-colors-red-600: #e60000;
--sizes-admin-buttons-colors-red: #ffffff
}
```
## Key adlandırma kuralları
Değişken keyleri yalnızca belirli karakterlere sahip olabilir. Diğer karakterler otomatik olarak temizlenir.
Objelerde alt tire (_) kullanımı mümkün olduğundan, alt tireler de orta çizgiye (-) dönüştürülür.
Rule:
````jsregexp
/[^a-zA-Z0-9-.]+/gi
````
| öncesi | sonrası |
|--------------------------------------|-----------------------------------|
| hello[$&+,:;=?@#'<>-^*()%!]WORLD | hello-WORLD |
| hello__world | hello-world |
| css_variables_for-tailwindcss | css-variables-for-tailwindcss |
| foo-bar-1.0 | foo-bar-1\\.0 |
İşte bir örnek:
```javascript
// tailwind.config.js
module.exports = {
theme: {
variables: {
DEFAULT: {
colors: {
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
},
sizes: {
1.5: '1rem',
xl: {
'3.0': '2rem',
},
},
},
'[type=\'button\']': {
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
nested_auto_dash: {
color_primary: '100%',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables')
]
}
```
**Output:**
```css
:root {
--colors-hello-WORLD: 100%;
--colors-underscore-to-dash: 100%;
--colors-underscore-to-dash-with-dash: 100%;
--colors-auto-dash: 100%;
--sizes-1\.5: 1rem;
--sizes-xl-3\.0: 2rem
}
[type='button'] {
--hello-WORLD: 100%;
--underscore-to-dash: 100%;
--underscore-to-dash-with-dash: 100%;
--auto-dash: 100%;
--nested-auto-dash-color-primary: 100%
}
```
## Yardımcı Fonksiyonlar (Helpers)
### `colorVariable()`
Renk değişkenlerini `colorVariable` helper fonksiyonunu kullanarak tanımlamanız halinde, renkleri `text-opacity` ya da `bg-opacity` gibi
ek classlar ile uyumlu hale getirmeniz mümkün.
```javascript
// tailwind.config.js
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
module.exports = {
theme: {
screens: false,
colors: {
primary: colorVariable('--colors-primary'), // HEX (3 haneli)
secondary: colorVariable('var(--colors-secondary)'), // HEX (6 haneli)
white: '#ffffff', // standart kullanım (output incelemesi için)
blue: colorVariable('var(--colors-blue)'), // RGB
red: {
400: colorVariable('var(--colors-red-400)'), // RGBA
500: colorVariable('var(--colors-red-500)'), // RGBA
600: 'var(--colors-red-500)', // RGBA (colorVariable() yardımcısı kullanmadan)
},
gray: 'var(--colors-gray)', // HEX (6 haneli) (colorVariable() yardımcısı kullanmadan)
green: 'var(--colors-green)', // RGB (colorVariable() yardımcısı kullanmadan)
},
variables: {
DEFAULT: {
colors: {
primary: '#ff0',
secondary: '#000000',
gray: '#6B7280',
blue: 'rgb(0,0,254)',
red: {
400: 'rgba(254,0,0,0.5)',
500: 'rgba(254,0,0,1)',
},
green: 'rgb(0,255,0)',
},
sizes: {
small: '10px',
medium: '2rem',
large: '100%',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables'){
colorVariables: true
}
]
}
```
**Purge:**
```html
<div class="text-primary text-opacity-50"></div>
<div class="bg-secondary bg-opacity-50"></div>
<div class="bg-gray bg-opacity-50"></div>
<div class="text-blue text-opacity-50"></div>
<div class="bg-red-400"></div>
<div class="bg-red-500"></div>
<div class="bg-red-600"></div>
<div class="bg-green bg-opacity-50"></div>
<div class="bg-white bg-opacity-50"></div>
```
**Output:**
```css
:root {
--colors-primary: #ff0;
--colors-secondary: #000000;
--colors-gray: #6B7280;
--colors-blue: rgb(0,0,254);
--colors-red-400: rgba(254,0,0,0.5);
--colors-red-500: rgba(254,0,0,1);
--colors-red-400-rgb: 254,0,0;
--colors-red-500-rgb: 254,0,0;
--colors-green: rgb(0,255,0);
--colors-primary-rgb: 255,255,0;
--colors-secondary-rgb: 0,0,0;
--colors-gray-rgb: 107,114,128;
--colors-blue-rgb: 0,0,254;
--colors-green-rgb: 0,255,0;
--sizes-small: 10px;
--sizes-medium: 2rem;
--sizes-large: 100%
}
.text-primary {
--tw-text-opacity: 1;
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
}
.text-blue {
--tw-text-opacity: 1;
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
}
.text-opacity-50 {
--tw-text-opacity: 0.5
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
}
.bg-red-600 {
background-color: var(--colors-red-500)
}
.bg-gray {
background-color: var(--colors-gray)
}
.bg-green {
background-color: var(--colors-green)
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5
}
```
### forceRGB
Eğer forceRGB `true` olarak tanımlanırsa ek değişkenler oluşturulmaz.
#### Öncesi
```javascript
// tailwind.config.js
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
module.exports = {
theme: {
screens: false,
colors: {
green: colorVariable('var(--colors-green)'),
},
variables: {
DEFAULT: {
colors: {
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables'){
colorVariables: true,
}
]
}
```
**Output:**
```css
:root {
--colors-green: #11ff00;
--colors-green-rgb: 17,255,0
}
.text-green {
--tw-text-opacity: 1;
color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))
}
```
#### Sonrası
```javascript
// tailwind.config.js
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
module.exports = {
theme: {
screens: false,
colors: {
green: colorVariable('var(--colors-green)', true),
},
variables: {
DEFAULT: {
colors: {
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables'){
colorVariables: true,
forceRGB: true,
}
]
}
```
**Output:**
```css
:root {
--colors-green: 17,255,0;
}
.text-green {
--tw-text-opacity: 1;
color: rgba(var(--colors-green), var(--tw-text-opacity))
}
```
### colorVariable için extendColors
Değişkenler arasındaki renklerin her birisini `colorVariable('var(--colors-red)')` şeklinde kullanmak yerine,
renkleri `extendColors` kısmında tanımlayabilirsiniz.
**Örnek:**
```javascript
// tailwind.config.js
module.exports = {
theme: {
screens: false,
colors: {
white: '#fff',
green: 'var(--colors-green)',
},
variables: {
DEFAULT: {
colors: {
blue: '#0065ff',
red: '#ff0000',
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables'){
colorVariables: true,
extendColors: {
blue: 'var(--colors-blue)',
red: 'var(--colors-red)',
}
}
]
}
```
**Output:**
```css
:root {
--colors-blue: #0065ff;
--colors-red: #ff0000;
--colors-green: #11ff00;
--colors-blue-rgb: 0,101,255;
--colors-red-rgb: 255,0,0;
--colors-green-rgb: 17,255,0
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.text-green {
color: var(--colors-green)
}
.text-blue {
--tw-text-opacity: 1;
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
}
.text-red {
--tw-text-opacity: 1;
color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
}
.text-opacity-50 {
--tw-text-opacity: 0.5
}
```
**2. Örnek - [forceRGB](#forcergb) ile birlikte kullanımı:**
```javascript
// tailwind.config.js
module.exports = {
theme: {
screens: false,
colors: {
white: '#fff',
green: 'var(--colors-green)',
},
variables: {
DEFAULT: {
colors: {
blue: '#0065ff',
red: '#ff0000',
green: '#11ff00',
},
},
},
},
plugins: [
require('@mertasan/tailwindcss-variables'){
colorVariables: true,
forceRGB: true,
extendColors: {
blue: 'var(--colors-blue)',
red: 'var(--colors-red)',
}
}
]
}
```
**Output:**
```css
:root {
--colors-blue: 0,101,255;
--colors-red: 255,0,0;
--colors-green: 17,255,0
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.text-green {
color: var(--colors-green)
}
.text-blue {
--tw-text-opacity: 1;
color: rgba(var(--colors-blue), var(--tw-text-opacity))
}
.text-red {
--tw-text-opacity: 1;
color: rgba(var(--colors-red), var(--tw-text-opacity))
}
.text-opacity-50 {
--tw-text-opacity: 0.5
}
```
### toBase
Varsayılan olarak, değişkenler `@tailwind base;` stillerine eklenir.
Eğer projenizin `css` dosyasına `@tailwind base;` stillerini dahil etmiyorsanız, `toBase` seçeneğini `false` durumuna getirebilirsiniz.
Bu durumda değişkenler `@tailwind components;` stillerine dahil edilecektir.
```js
//...
plugins: [
require('@mertasan/tailwindcss-variables')({
toBase: false, // varsayılan: true
})
]
//...
```
- [tailwindcss.com - Functions and directives](https://tailwindcss.com/docs/functions-and-directives#tailwind)
## Kendi eklentileriniz için API örneği
- [Ayrıntılı açıklama](#gerçek-kullanım-örneği-detaylı)
```javascript
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
const variablesApi = require('@mertasan/tailwindcss-variables/api')
let variableOptions = {
variablePrefix: 'myplugin'
}
const pluginVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
},
}
const pluginDarkVariables = {
DEFAULT: {
colors: {
primary: 'red',
secondary: 'yellow',
warning: 'green',
},
},
}
module.exports = {
plugins: [
plugin(function({ addComponents, config }) {
addComponents(variablesApi.variables(pluginVariables, variableOptions))
addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class
})
]
}
```
**Output:**
```css
:root {
--myplugin-colors-primary: black;
--myplugin-colors-secondary: white;
--myplugin-colors-warning: orange
}
:root.dark {
--myplugin-colors-primary: red;
--myplugin-colors-secondary: yellow;
--myplugin-colors-warning: green
}
```
### API Component helper
tailwindcss-variables plugin API'yi bileşenlerinizi kayıt etmek için de kullanabilirsiniz.
```javascript
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
const variablesApi = require('@mertasan/tailwindcss-variables/api')
let variableOptions = {
variablePrefix: 'myplugin'
}
const pluginVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
},
}
const pluginDarkVariables = {
DEFAULT: {
colors: {
primary: 'red',
secondary: 'yellow',
warning: 'green',
},
},
}
module.exports = {
plugins: [
plugin(function({ addComponents, config }) {
const formComponents = {
select: {
DEFAULT: {
backgroundColor: 'var(--myplugin-colors-primary)',
},
multi: {
'&.default-multi': {
backgroundColor: 'var(--myplugin-colors-secondary)',
},
'&.other-multi': {
backgroundColor: 'var(--myplugin-colors-warning)',
},
},
},
}
addComponents(variablesApi.variables(pluginVariables, variableOptions))
addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', formComponents))
})
]
}
```
**Output:**
```css
:root {
--myplugin-colors-primary: black;
--myplugin-colors-secondary: white;
--myplugin-colors-warning: orange;
}
:root.dark {
--myplugin-colors-primary: red;
--myplugin-colors-secondary: yellow;
--myplugin-colors-warning: green;
}
.form-select {
background-color: var(--myplugin-colors-primary);
}
.form-select.default-multi {
background-color: var(--myplugin-colors-secondary);
}
.form-select.other-multi {
background-color: var(--myplugin-colors-warning);
}
```
## Gerçek kullanım örneği (detaylı)
**Avantajları neler?**
Laravel için bir form oluşturucu (PHP) paketi oluşturduğunuzu hayal edin. Bu durumda özelleştirmeniz gereken
birçok stil olacağına eminim. Ancak en gerekli olan şeylerden bir tanesi renkler! Bileşenleri kendi belirlediğiniz
renklerle oluşturursunuz. Elbette bu renkler `vendor:publish` komutu ile kullanıcılar tarafından özelleştirilebilir ama
bunu herkes için daha basit hale getirebilirsiniz. Kullanıcılar renkleri kendileri yapılandırabilir, isterlerse
eklentinizi dark mode için yapılandırabilirler. Böylelikle, kullanıcılar bazı basit değişiklikler için
`.css` veya `.blade.php` dosyalarını özelleştirmek zorunda kalmazlar. Bu sayede eklentinizi güncel şablonlarıyla
birlikte kullanarak, gelecekteki versiyon güncellemelerine uyum sağlayabilirler. Bu açıklamayı okuduysanız eğer,
bu eklentininin ortaya çıkma nedenini artık biliyorsunuz demektir. :)
**Dezavantajları neler?**
Bir fikriniz varsa eğer, lütfen PR göndermekten çekinmeyin.
**Bu örnek ile ilgili kaynaklar:**
- [kaynak](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples/readme-source)
- [test](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__/readme.test.js)
**Your own plugin themes:**
```javascript
// myplugin/themes.js
module.exports = (theme) => ({
themes: {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
}
}
})
```
**Your own plugin components:**
```javascript
// myplugin/components.js
module.exports = (theme) => ({
select: {
DEFAULT: {
backgroundColor: 'var(--forms-colors-primary)',
},
multi: {
'.default-multi': {
backgroundColor: 'var(--forms-colors-secondary)',
},
'.other-multi': {
backgroundColor: 'var(--forms-colors-warning)',
},
},
},
})
```
**Your own plugin source:**
```javascript
// myplugin/index.js
const plugin = require('tailwindcss/plugin')
const _ = require('lodash')
const variablesApi = require('@mertasan/tailwindcss-variables/api')
const pluginComponents = require('./components')
const pluginThemes = require('./themes')
module.exports = plugin.withOptions(
function (options) {
return function ({addComponents, theme, config}) {
let variableOptions = {
variablePrefix: theme('myPlugin.prefix', 'forms')
};
addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))
let darkVariables = theme('myPlugin.darkOptions', {});
if (!_.isEmpty(darkVariables)) {
addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))
}
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))
}
}
)
```
**User config:** (`tailwind.config.js`)
```javascript
// tailwind.config.js
module.exports = {
theme: {
myPlugin: {
options: {
colors: {
primary: 'indigo', // custom color instead of default color
}
}
},
},
plugins: [require('my-plugin')],
}
```
**Output:**
```css
:root {
--forms-colors-primary: indigo; /* <<< default color changed via root configuration */
--forms-colors-secondary: white;
--forms-colors-warning: orange;
}
.form-select {
background-color: var(--forms-colors-primary);
}
.form-select .default-multi {
background-color: var(--forms-colors-secondary);
}
.form-select .other-multi {
background-color: var(--forms-colors-warning);
}
```
Bu örnekteki gibi bir kurgu sayesinde, eklentinizin stilleri için, sizin ek .css dosyaları yayınlamanıza,
kullanan kişilerin ise paketlerinizi kullanabilmek için stil dosyaları derlemelerine gerek kalmayacak.
## Örnekler ve testler
Hem kullanım şekli konusunda yardımcı olması için, hem de sunulan tüm özellikleri test ederek
doğru çalıştığından emin olmak için örnekler hazırladım.
| Kaynak | Durum |
|-------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
| [Örnekler](https://github.com/mertasan/tailwindcss-variables/tree/master/examples) |  |
| [Plugin API örnekleri](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) |  |
| [Testler](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__) |  |
> Örneklere ve testlere ait dosyalar pull-request, push, release vb. etkinliklerde otomatik olarak yeniden
> derlenmektedir. Bu nedenle, örnek dosyalarda `require(../index)` gibi dosya yolları kullanıldı.
> Örnekleri kullanacaksanız eğer, ilgili yerleri `require('@mertasan/tailwindcss-variables')` şeklinde değiştirmeniz gerekiyor.
## Yardım
Lütfen GitHub issues aracılığıyla tüm soru ve sorunlarınızı iletin. Size yardımcı olmaya çalışacağım.
## Katkı
Herhangi bir özelliği iyileştirir veya yeni özellikler eklerseniz eğer, lütfen pull-request göndermekten çekinmeyin.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
================================================
FILE: __tests__/basic-usage.test.html
================================================
<div class='container'></div>
================================================
FILE: __tests__/basic-usage.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('basic usage', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
colors: {
black: 'rgb(0, 0, 0)',
white: '#ffffff',
},
sizes: {
small: '10px',
medium: '2rem',
large: '100%',
},
},
'.container': {
colors: {
primary: 'red',
secondary: 'var(--colors-primary)',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-black: rgb(0, 0, 0);
+ --colors-white: #ffffff;
+ --sizes-small: 10px;
+ --sizes-medium: 2rem;
+ --sizes-large: 100%
+ }
+ .container {
+ --colors-primary: red;
+ --colors-secondary: var(--colors-primary)
+ }
"
`)
})
================================================
FILE: __tests__/color-variable-helper.test.html
================================================
<div class="text-primary text-opacity-50">tailwindcss-variables</div>
<div class="bg-secondary bg-opacity-50">tailwindcss-variables</div>
<div class="bg-gray bg-opacity-50">tailwindcss-variables</div>
<div class="text-blue text-opacity-50">tailwindcss-variables</div>
<div class="bg-red-400">tailwindcss-variables</div>
<div class="bg-red-500">tailwindcss-variables</div>
<div class="bg-red-600">tailwindcss-variables</div>
<div class="bg-green bg-opacity-50">tailwindcss-variables</div>
<div class="bg-white bg-opacity-50">tailwindcss-variables</div>
<div class="bg-yellow bg-opacity-50">tailwindcss-variables</div>
<div class="bg-indigo-400">tailwindcss-variables</div>
<div class="bg-indigo-500">tailwindcss-variables</div>
<div class="bg-indigo-600">tailwindcss-variables</div>
<div class="text-indigo-400">tailwindcss-variables</div>
<div class="text-indigo-500">tailwindcss-variables</div>
<div class="text-indigo-600">tailwindcss-variables</div>
================================================
FILE: __tests__/color-variable-helper.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
const colorVariable = require('../colorVariable')
test('colorVariable helper', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
primary: colorVariable('--colors-primary'), // HEX (3 digits)
secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)
white: '#ffffff', // no variable
blue: colorVariable('var(--colors-blue)'), // RGB
yellow: {
400: colorVariable('var(--colors-yellow-400)'), // RGB
DEFAULT: colorVariable('var(--colors-yellow)'), // RGB
},
red: {
400: colorVariable('var(--colors-red-400)'), // RGBA
500: colorVariable('var(--colors-red-500)'), // RGBA
600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)
},
gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)
green: 'var(--colors-green)', // RGB (without using colorVariable() helper)
},
variables: {
DEFAULT: {
colors: {
primary: '#ff0',
secondary: '#000000',
gray: '#6B7280',
blue: 'rgb(0,0,254)',
red: {
400: 'rgba(254,0,0,0.5)',
500: 'rgba(254,0,0,1)',
},
green: 'rgb(0,255,0)',
yellow: {
400: 'rgb(255,255,0)',
DEFAULT: 'rgb(255,255,0)',
},
},
sizes: {
small: '10px',
medium: '2rem',
large: '100%',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ff0;
+ --colors-secondary: #000000;
+ --colors-gray: #6B7280;
+ --colors-blue: rgb(0,0,254);
+ --colors-red-400: rgba(254,0,0,0.5);
+ --colors-red-500: rgba(254,0,0,1);
+ --colors-red-400-rgb: 254,0,0;
+ --colors-red-500-rgb: 254,0,0;
+ --colors-green: rgb(0,255,0);
+ --colors-yellow-400: rgb(255,255,0);
+ --colors-yellow: rgb(255,255,0);
+ --colors-yellow-400-rgb: 255,255,0;
+ --colors-yellow-rgb: 255,255,0;
+ --colors-primary-rgb: 255,255,0;
+ --colors-secondary-rgb: 0,0,0;
+ --colors-gray-rgb: 107,114,128;
+ --colors-blue-rgb: 0,0,254;
+ --colors-green-rgb: 0,255,0;
+ --sizes-small: 10px;
+ --sizes-medium: 2rem;
+ --sizes-large: 100%
+ }
+ .bg-gray {
+ background-color: var(--colors-gray)
+ }
+ .bg-green {
+ background-color: var(--colors-green)
+ }
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
+ }
+ .bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
+ }
+ .bg-red-600 {
+ background-color: var(--colors-red-500)
+ }
+ .bg-secondary {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+ }
+ .bg-yellow {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-yellow-rgb), var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-blue {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
+ }
+ .text-primary {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('colorVariable - background and text color', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
indigo: {
400: colorVariable('var(--colors-indigo-400)', true), // RGBA
500: colorVariable('var(--colors-indigo-500)', true), // RGBA
600: colorVariable('var(--colors-indigo-600)', true), // HEX
},
},
variables: {
DEFAULT: {
colors: {
indigo: {
400: 'rgba(254,0,0,1)',
500: 'rgba(254,0,0,0.5)',
600: '#a20606',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: true,
}),
],
},
})
).toMatchInlineSnapshot(`
"
+ .bg-indigo-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
+ }
+ .bg-indigo-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
+ }
+ .bg-indigo-600 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-indigo-400 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
+ }
+ .text-indigo-500 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
+ }
+ .text-indigo-600 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
/**
* a --tw-bg-opacity must be added to the colors even if the bg-opacity-100 class is not present.
*/
test('colorVariable - background and text color 2', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content('color-variable-helper2')],
darkMode: false,
theme: {
screens: false,
colors: {
indigo: {
400: colorVariable('var(--colors-indigo-400)', true), // RGBA
500: colorVariable('var(--colors-indigo-500)', true), // RGBA
600: colorVariable('var(--colors-indigo-600)', true), // HEX
},
},
variables: {
DEFAULT: {
colors: {
indigo: {
400: 'rgba(254,0,0,1)',
500: 'rgba(254,0,0,0.5)',
600: '#a20606',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: true,
}),
],
},
})
).toMatchInlineSnapshot(`
"
+ .bg-indigo-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
+ }
+ .bg-indigo-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
+ }
+ .bg-indigo-600 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
+ }
+ .text-indigo-400 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
+ }
+ .text-indigo-500 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
+ }
+ .text-indigo-600 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
+ }
"
`)
})
================================================
FILE: __tests__/color-variable-helper2.test.html
================================================
<div class="bg-indigo-400">tailwindcss-variables</div>
<div class="bg-indigo-500">tailwindcss-variables</div>
<div class="bg-indigo-600">tailwindcss-variables</div>
<div class="text-indigo-400">tailwindcss-variables</div>
<div class="text-indigo-500">tailwindcss-variables</div>
<div class="text-indigo-600">tailwindcss-variables</div>
================================================
FILE: __tests__/css-selectors.test.html
================================================
<div id="app"></div>
<div class="container">
<div class="card"></div>
</div>
<input type="text" />
<button type="submit"></button>
<button type="reset"></button>
================================================
FILE: __tests__/css-selectors.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('css selectors', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
'#app': {
colors: {
black: 'rgb(0, 0, 0)',
white: '#ffffff',
},
},
'input[type="text"]': {
colors: {
primary: 'red',
secondary: 'yellow',
},
},
'.container': {
sizes: {
medium: '3rem',
},
},
'.container.card': {
sizes: {
medium: '4rem',
},
},
'*,\n*::before,\n*::after': {
hello: {
world: '100%',
},
},
"[type='button'],\n[type='reset']": {
colors: {
primary: 'blue',
secondary: 'green',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ #app {
+ --colors-black: rgb(0, 0, 0);
+ --colors-white: #ffffff
+ }
+ input[type='text'] {
+ --colors-primary: red;
+ --colors-secondary: yellow
+ }
+ .container {
+ --sizes-medium: 3rem
+ }
+ .container.card {
+ --sizes-medium: 4rem
+ }
+ *,
+ *::before,
+ *::after {
+ --hello-world: 100%
+ }
+ [type='button'],
+ [type='reset'] {
+ --colors-primary: blue;
+ --colors-secondary: green
+ }
"
`)
})
================================================
FILE: __tests__/dark-mode-to-root.test.html
================================================
<html class="dark custom-dark-selector">
<div class="container"></div>
</html>
================================================
FILE: __tests__/dark-mode.test.html
================================================
<div class="dark custom-dark-selector">
<div class="container"></div>
</div>
<div class="dark foo">
<div class="container"></div>
</div>
================================================
FILE: __tests__/dark-mode.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('only dark variables with default options and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root.dark {
+ --colors-primary: #ffffff
+ }
+ :root.dark .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('only dark variables with default options and `media` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ }
"
`)
})
test('if the `darkMode` is set to `media`, `darkToRoot` options should not work', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
darkToRoot: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ }
"
`)
})
test('only dark variables with darkToRoot option and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content('dark-mode-to-root')],
darkMode: 'class',
theme: {
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
darkToRoot: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root.dark {
+ --colors-primary: #ffffff
+ }
+ :root.dark .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('only dark variables with custom options and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content('dark-mode-to-root')],
darkMode: ['class', '.custom-dark-selector'],
theme: {
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
variablePrefix: 'my-prefix',
darkToRoot: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root.custom-dark-selector {
+ --my-prefix-colors-primary: #ffffff
+ }
+ :root.custom-dark-selector .container {
+ --my-prefix-colors-secondary: #000000
+ }
"
`)
})
test('only dark variables with variablePrefix and `media` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content('dark-mode-to-root')],
darkMode: 'media',
theme: {
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
variablePrefix: 'my-prefix',
}),
],
})
).toMatchInlineSnapshot(`
"
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --my-prefix-colors-primary: #ffffff
+ }
+ .container {
+ --my-prefix-colors-secondary: #000000
+ }
+ }
"
`)
})
test('variables and dark variables with default options and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ :root.dark {
+ --colors-primary: #ffffff
+ }
+ :root.dark .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('variables and dark variables with default options and `media` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ }
"
`)
})
test('variables and dark variables with custom selector and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables()],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ :root.custom-dark-selector {
+ --colors-primary: #ffffff
+ }
+ :root.custom-dark-selector .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('deprecated custom darkSelector', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables({
darkSelector: '.foo',
})],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ :root.custom-dark-selector {
+ --colors-primary: #ffffff
+ }
+ :root.custom-dark-selector .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('deprecated custom darkSelector [2]', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables({
darkSelector: null,
})],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ :root.custom-dark-selector {
+ --colors-primary: #ffffff
+ }
+ :root.custom-dark-selector .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('deprecated custom darkSelector [3]', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: ['class'],
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables({
darkSelector: null,
})],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ :root.dark {
+ --colors-primary: #ffffff
+ }
+ :root.dark .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('deprecated custom darkSelector [4]', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: ['class'],
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [tailwindcssVariables({
darkSelector: '.foo',
})],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ :root.foo {
+ --colors-primary: #ffffff
+ }
+ :root.foo .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('variables and dark variables with darkToRoot option and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content('dark-mode-to-root')],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
darkToRoot: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-primary: #ffffff
+ }
+ .container {
+ --colors-secondary: #000000
+ }
+ :root.dark {
+ --colors-primary: #ffffff
+ }
+ :root.dark .container {
+ --colors-secondary: #000000
+ }
"
`)
})
test('variables and dark variables with custom options and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content('dark-mode-to-root')],
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
darkVariables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
variablePrefix: 'my-prefix',
darkToRoot: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --my-prefix-colors-primary: #ffffff
+ }
+ .container {
+ --my-prefix-colors-secondary: #000000
+ }
+ :root.custom-dark-selector {
+ --my-prefix-colors-primary: #ffffff
+ }
+ :root.custom-dark-selector .container {
+ --my-prefix-colors-secondary: #000000
+ }
"
`)
})
================================================
FILE: __tests__/extend-colors.test.html
================================================
<div class="bg-green">tailwindcss-variables</div>
<div class="bg-blue">tailwindcss-variables</div>
<div class="bg-red">tailwindcss-variables</div>
<div class="bg-red-400">tailwindcss-variables</div>
<div class="bg-red-500">tailwindcss-variables</div>
<div class="bg-red-600">tailwindcss-variables</div>
<div class="bg-red-700 bg-opacity-50">tailwindcss-variables</div>
<div class="bg-white bg-opacity-50">tailwindcss-variables</div>
<div class="bg-black bg-opacity-50">tailwindcss-variables</div>
<div class="text-green">tailwindcss-variables</div>
<div class="text-blue">tailwindcss-variables</div>
<div class="text-red">tailwindcss-variables</div>
<div class="text-red-400">tailwindcss-variables</div>
<div class="text-red-500">tailwindcss-variables</div>
<div class="text-red-600">tailwindcss-variables</div>
<div class="text-red-700 text-opacity-50">tailwindcss-variables</div>
<div class="text-white text-opacity-50">tailwindcss-variables</div>
<div class="text-black text-opacity-50">tailwindcss-variables</div>
================================================
FILE: __tests__/extend-colors.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('extendColors', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
red: {
600: 'var(--colors-red-600)',
700: 'var(--colors-red-700)',
},
},
variables: {
DEFAULT: {
colors: {
white: '#ffffff',
red: {
400: 'rgba(254,0,0,0.5)',
DEFAULT: 'rgba(254,0,0,1)',
500: 'rgba(254,0,0,1)',
600: 'rgba(205,7,7,1)',
700: 'rgb(186,5,5,1)',
},
},
sizes: {
small: '1rem',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
extendColors: {
black: '#000000',
white: 'var(--colors-white)',
red: {
400: 'var(--colors-red-400)',
DEFAULT: 'var(--colors-red)',
500: 'var(--colors-red-500)',
},
},
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-white: #ffffff;
+ --colors-red-400: rgba(254,0,0,0.5);
+ --colors-red-500: rgba(254,0,0,1);
+ --colors-red-600: rgba(205,7,7,1);
+ --colors-red-700: rgb(186,5,5,1);
+ --colors-red: rgba(254,0,0,1);
+ --colors-red-400-rgb: 254,0,0;
+ --colors-red-500-rgb: 254,0,0;
+ --colors-red-600-rgb: 205,7,7;
+ --colors-red-700-rgb: 186,5,5,1;
+ --colors-red-rgb: 254,0,0;
+ --colors-white-rgb: 255,255,255;
+ --sizes-small: 1rem
+ }
+ .bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+ }
+ .bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
+ }
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
+ }
+ .bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
+ }
+ .bg-red-600 {
+ background-color: var(--colors-red-600)
+ }
+ .bg-red-700 {
+ background-color: var(--colors-red-700)
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-white-rgb), var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity))
+ }
+ .text-red {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
+ }
+ .text-red-400 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-400-rgb), var(--tw-text-opacity))
+ }
+ .text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-500-rgb), var(--tw-text-opacity))
+ }
+ .text-red-600 {
+ color: var(--colors-red-600)
+ }
+ .text-red-700 {
+ color: var(--colors-red-700)
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-white-rgb), var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('extendColors with forceRGB', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
red: {
600: 'var(--colors-red-600)',
700: 'var(--colors-red-700)',
},
},
variables: {
DEFAULT: {
colors: {
white: '#ffffff',
red: {
400: 'rgba(254,0,0,0.5)',
DEFAULT: 'rgba(254,0,0,1)',
500: 'rgba(254,0,0,1)',
600: 'rgba(205,7,7,1)',
700: 'rgb(186,5,5,1)',
},
},
sizes: {
small: '1rem',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: true,
extendColors: {
black: '#000000',
white: 'var(--colors-white)',
red: {
400: 'var(--colors-red-400)',
DEFAULT: 'var(--colors-red)',
500: 'var(--colors-red-500)',
},
},
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-white: 255,255,255;
+ --colors-red-400: 254,0,0;
+ --colors-red-500: 254,0,0;
+ --colors-red-600: 205,7,7;
+ --colors-red-700: 186,5,5,1;
+ --colors-red: 254,0,0;
+ --sizes-small: 1rem
+ }
+ .bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+ }
+ .bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
+ }
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))
+ }
+ .bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))
+ }
+ .bg-red-600 {
+ background-color: var(--colors-red-600)
+ }
+ .bg-red-700 {
+ background-color: var(--colors-red-700)
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-white), var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity))
+ }
+ .text-red {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red), var(--tw-text-opacity))
+ }
+ .text-red-400 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-400), var(--tw-text-opacity))
+ }
+ .text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-500), var(--tw-text-opacity))
+ }
+ .text-red-600 {
+ color: var(--colors-red-600)
+ }
+ .text-red-700 {
+ color: var(--colors-red-700)
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-white), var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('extendColors (readme)', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
white: '#fff',
green: 'var(--colors-green)',
},
variables: {
DEFAULT: {
colors: {
blue: '#0065ff',
red: '#ff0000',
green: '#11ff00',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
extendColors: {
blue: 'var(--colors-blue)',
red: 'var(--colors-red)',
},
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-blue: #0065ff;
+ --colors-red: #ff0000;
+ --colors-green: #11ff00;
+ --colors-blue-rgb: 0,101,255;
+ --colors-red-rgb: 255,0,0;
+ --colors-green-rgb: 17,255,0
+ }
+ .bg-blue {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-blue-rgb), var(--tw-bg-opacity))
+ }
+ .bg-green {
+ background-color: var(--colors-green)
+ }
+ .bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-blue {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
+ }
+ .text-green {
+ color: var(--colors-green)
+ }
+ .text-red {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('extendColors with forceRGB (readme)', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
white: '#fff',
green: 'var(--colors-green)',
},
variables: {
DEFAULT: {
colors: {
blue: '#0065ff',
red: '#ff0000',
green: '#11ff00',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: true,
extendColors: {
blue: 'var(--colors-blue)',
red: 'var(--colors-red)',
},
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-blue: 0,101,255;
+ --colors-red: 255,0,0;
+ --colors-green: 17,255,0
+ }
+ .bg-blue {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-blue), var(--tw-bg-opacity))
+ }
+ .bg-green {
+ background-color: var(--colors-green)
+ }
+ .bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-blue {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-blue), var(--tw-text-opacity))
+ }
+ .text-green {
+ color: var(--colors-green)
+ }
+ .text-red {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red), var(--tw-text-opacity))
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
================================================
FILE: __tests__/fallback.test.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.component .header {
@apply text-red-400;
}
}
================================================
FILE: __tests__/fallback.test.html
================================================
<div class="bg-red-400">tailwindcss-variables</div>
<div class="bg-red-500">tailwindcss-variables</div>
<div class="bg-red-600">tailwindcss-variables</div>
<div class="bg-red-700">tailwindcss-variables</div>
<div class="text-red-800">tailwindcss-variables</div>
<div class="bg-gray bg-opacity-50">tailwindcss-variables</div>
<div class="component">
<div class="header">tailwindcss-variables</div>
</div>
================================================
FILE: __tests__/fallback.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
const colorVariable = require('../colorVariable')
test('fallback', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
red: {
400: 'var(--colors-red-400 red)',
500: 'var(--colors-red red)',
600: colorVariable('var(--header-color, black)'),
700: colorVariable('var(--header-color, black)', true),
800: colorVariable('var(--header-color, black)', false),
},
gray: 'var(--header-color, blue)',
},
variables: {
DEFAULT: {
header: {
color: '#ffffff',
},
colors: {
red: {
DEFAULT: '#ff0000',
400: '#ff3f3f',
},
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
}),
],
})
).toMatchInlineSnapshot(`
"
-
+ :root {
+ --header-color: #ffffff;
+ --header-color-rgb: 255,255,255;
+ --colors-red-400: #ff3f3f;
+ --colors-red: #ff0000;
+ --colors-red-400-rgb: 255,63,63;
+ --colors-red-rgb: 255,0,0
+ }
+ .component .header {
+ color: var(--colors-red-400 red)
+ }
+ .bg-gray {
+ background-color: var(--header-color, blue)
+ }
+ .bg-red-400 {
+ background-color: var(--colors-red-400 red)
+ }
+ .bg-red-500 {
+ background-color: var(--colors-red red)
+ }
+ .bg-red-600 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--header-color-rgb, black), var(--tw-bg-opacity))
+ }
+ .bg-red-700 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--header-color, black), var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-red-800 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--header-color-rgb, black), var(--tw-text-opacity))
+ }
"
`)
})
================================================
FILE: __tests__/force-rgb.test.html
================================================
<div class="bg-green">tailwindcss-variables</div>
<div class="bg-red">tailwindcss-variables</div>
<div class="bg-red-400">tailwindcss-variables</div>
<div class="bg-red-500">tailwindcss-variables</div>
<div class="bg-red-600">tailwindcss-variables</div>
<div class="bg-white bg-opacity-50">tailwindcss-variables</div>
<div class="bg-black bg-opacity-50">tailwindcss-variables</div>
<div class="bg-indigo bg-opacity-50">tailwindcss-variables</div>
<div class="text-green">tailwindcss-variables</div>
<div class="text-red">tailwindcss-variables</div>
<div class="text-red-400">tailwindcss-variables</div>
<div class="text-red-500">tailwindcss-variables</div>
<div class="text-red-600">tailwindcss-variables</div>
<div class="text-white text-opacity-50">tailwindcss-variables</div>
<div class="text-black text-opacity-50">tailwindcss-variables</div>
<div class="text-indigo text-opacity-50">tailwindcss-variables</div>
================================================
FILE: __tests__/force-rgb.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
const colorVariable = require('../colorVariable')
test('forceRGB option (enabled)', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
black: '#000000',
white: 'var(--colors-white)',
red: {
400: colorVariable('var(--colors-red-400)', true),
DEFAULT: colorVariable('var(--colors-red)', true),
500: colorVariable('var(--colors-red-500)', true),
},
},
variables: {
DEFAULT: {
colors: {
white: '#ffffff',
red: {
400: 'rgba(254,0,0,0.5)',
DEFAULT: 'rgba(254,0,0,1)',
500: 'rgba(254,0,0,1)',
600: 'rgba(205,7,7,1)',
},
},
sizes: {
small: '1rem',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-white: 255,255,255;
+ --colors-red-400: 254,0,0;
+ --colors-red-500: 254,0,0;
+ --colors-red-600: 205,7,7;
+ --colors-red: 254,0,0;
+ --sizes-small: 1rem
+ }
+ .bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+ }
+ .bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
+ }
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))
+ }
+ .bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ background-color: var(--colors-white)
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity))
+ }
+ .text-red {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red), var(--tw-text-opacity))
+ }
+ .text-red-400 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-400), var(--tw-text-opacity))
+ }
+ .text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-500), var(--tw-text-opacity))
+ }
+ .text-white {
+ color: var(--colors-white)
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('forceRGB option (disabled)', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
black: '#000000',
white: 'var(--colors-white)',
red: {
400: colorVariable('var(--colors-red-400)'),
500: '#ff0000',
},
},
variables: {
DEFAULT: {
colors: {
white: '#ffffff',
red: {
400: 'rgba(254,0,0,0.5)',
500: 'rgba(254,0,0,1)',
},
},
sizes: {
small: '1rem',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: false, // default
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-white: #ffffff;
+ --colors-red-400: rgba(254,0,0,0.5);
+ --colors-red-500: rgba(254,0,0,1);
+ --colors-red-400-rgb: 254,0,0;
+ --colors-red-500-rgb: 254,0,0;
+ --colors-white-rgb: 255,255,255;
+ --sizes-small: 1rem
+ }
+ .bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+ }
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
+ }
+ .bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+ }
+ .bg-white {
+ background-color: var(--colors-white)
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity))
+ }
+ .text-red-400 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-400-rgb), var(--tw-text-opacity))
+ }
+ .text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgb(255 0 0 / var(--tw-text-opacity))
+ }
+ .text-white {
+ color: var(--colors-white)
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('forceRGB option with extendColors', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
indigo: '#EC4899',
extend: {
red: {
400: '#000',
},
},
},
variables: {
DEFAULT: {
colors: {
white: '#ffffff',
red: {
400: 'rgba(254,0,0,0.5)',
DEFAULT: 'rgba(254,0,0,1)',
600: 'rgba(254,0,0,1)',
},
},
sizes: {
small: '1rem',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: true,
extendColors: {
black: '#000000',
white: 'var(--colors-white)',
red: {
400: 'var(--colors-red-400)',
DEFAULT: 'var(--colors-red)',
500: 'var(--colors-red-500)',
},
},
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-white: 255,255,255;
+ --colors-red-400: 254,0,0;
+ --colors-red-600: 254,0,0;
+ --colors-red: 254,0,0;
+ --sizes-small: 1rem
+ }
+ .bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+ }
+ .bg-indigo {
+ --tw-bg-opacity: 1;
+ background-color: rgb(236 72 153 / var(--tw-bg-opacity))
+ }
+ .bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
+ }
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))
+ }
+ .bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-white), var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity))
+ }
+ .text-indigo {
+ --tw-text-opacity: 1;
+ color: rgb(236 72 153 / var(--tw-text-opacity))
+ }
+ .text-red {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red), var(--tw-text-opacity))
+ }
+ .text-red-400 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-400), var(--tw-text-opacity))
+ }
+ .text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-500), var(--tw-text-opacity))
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-white), var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('extendColors (readme)', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
white: '#fff',
green: 'var(--colors-green)',
},
variables: {
DEFAULT: {
colors: {
blue: '#0065ff',
red: '#ff0000',
green: '#11ff00',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
extendColors: {
blue: 'var(--colors-blue)',
red: 'var(--colors-red)',
},
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-blue: #0065ff;
+ --colors-red: #ff0000;
+ --colors-green: #11ff00;
+ --colors-blue-rgb: 0,101,255;
+ --colors-red-rgb: 255,0,0;
+ --colors-green-rgb: 17,255,0
+ }
+ .bg-green {
+ background-color: var(--colors-green)
+ }
+ .bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-green {
+ color: var(--colors-green)
+ }
+ .text-red {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('forceRGB for docs', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
white: '#fff',
green: colorVariable('var(--colors-green)', true),
},
variables: {
DEFAULT: {
colors: {
green: '#11ff00',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-green: 17,255,0
+ }
+ .bg-green {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-green), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-green {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-green), var(--tw-text-opacity))
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
test('forceRGB (disabled) for docs', async () => {
expect(
await utils.diffOnly({
corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
content: [utils.content()],
darkMode: false,
theme: {
screens: false,
colors: {
white: '#fff',
green: colorVariable('var(--colors-green)'),
},
variables: {
DEFAULT: {
colors: {
green: '#11ff00',
},
},
},
},
plugins: [
tailwindcssVariables({
colorVariables: true,
forceRGB: false,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-green: #11ff00;
+ --colors-green-rgb: 17,255,0
+ }
+ .bg-green {
+ --tw-bg-opacity: 1;
+ background-color: rgba(var(--colors-green-rgb), var(--tw-bg-opacity))
+ }
+ .bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+ }
+ .bg-opacity-50 {
+ --tw-bg-opacity: 0.5
+ }
+ .text-green {
+ --tw-text-opacity: 1;
+ color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))
+ }
+ .text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity))
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5
+ }
"
`)
})
================================================
FILE: __tests__/format-variables.test.html
================================================
<button type="button"></button>
================================================
FILE: __tests__/format-variables.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('format variables [special characters must be removed from variable names]', async () => {
expect(
/* eslint-disable camelcase */
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
colors: {
"hello[$&+,:;=?@#|'<>.-^*()%!]WORLD": '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
},
sizes: {
1.5: '1rem',
'foo2.0bar3.0': '2rem',
baz: {
'foo3.0bar4.0': '3rem',
},
},
},
"[type='button']": {
"hello[$&+,:;=?@#|'<>-^*()%!]world": '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
nested_auto_dash: {
color__primary: '100%',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-hello\\.-WORLD: 100%;
+ --colors-underscore-to-dash: 100%;
+ --colors-underscore-to-dash-with-dash: 100%;
+ --colors-auto-dash: 100%;
+ --sizes-1\\.5: 1rem;
+ --sizes-foo2\\.0bar3\\.0: 2rem;
+ --sizes-baz-foo3\\.0bar4\\.0: 3rem
+ }
+ [type='button'] {
+ --hello-world: 100%;
+ --underscore-to-dash: 100%;
+ --underscore-to-dash-with-dash: 100%;
+ --auto-dash: 100%;
+ --nested-auto-dash-color--primary: 100%
+ }
"
`)
})
================================================
FILE: __tests__/issues.test.html
================================================
<html data-mode="dark" lang="en">
<body>
<div class="shadow-xs dark:shadow-xs"></div>
<div class="shadow-sm dark:shadow-sm"></div>
<div class="shadow-base dark:shadow-base"></div>
<div class="shadow-md dark:shadow-md"></div>
<div class="shadow-lg dark:shadow-lg"></div>
<div class="shadow-xl dark:shadow-xl"></div>
<div class="shadow-2xl dark:shadow-2xl"></div>
<div class="shadow-outline dark:shadow-outline"></div>
<div class="shadow-inner dark:shadow-inner"></div>
<div class="shadow-none dark:shadow-none"></div>
</body>
</html>
================================================
FILE: __tests__/issues.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('issue 23', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
// body
'body-color': '#000',
'body-bg': '#fff',
'body-font-family': 'var(--font-primary)',
'body-font-size': '1rem',
'body-font-weight': 400,
'body-line-height': 1.5,
'body-font-weight2': '400',
'body-line-height2': '1.5',
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --body-color: #000;
+ --body-bg: #fff;
+ --body-font-family: var(--font-primary);
+ --body-font-size: 1rem;
+ --body-font-weight: 400;
+ --body-line-height: 1.5;
+ --body-font-weight2: 400;
+ --body-line-height2: 1.5
+ }
"
`)
})
test('issue 25', async () => {
const shadow = {
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
base: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
outline: '0 0 0 3px rgba(var(--primary), 0.6)',
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
none: 'none',
}
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: ['class', '[data-mode="dark"]'],
theme: {
variables: {
DEFAULT: {
shadow,
},
},
darkVariables: {
DEFAULT: {
shadow,
},
},
},
plugins: [
tailwindcssVariables({
darkToRoot: true,
colorVariables: true,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);
+ --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
+ --shadow-none: none
+ }
+ :root[data-mode='dark'] {
+ --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ --shadow-outline: 0 0 0 3px rgba(var(--primary), 0.6);
+ --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
+ --shadow-none: none
+ }
"
`)
})
test('issue 37', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
ONE: 'red',
TWO: {
DEFAULT: 'black',
FOObar: 'green',
THREE: {
FOUR: 'white',
five: 'blue',
},
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --ONE: red;
+ --TWO: black;
+ --TWO-FOObar: green;
+ --TWO-THREE-FOUR: white;
+ --TWO-THREE-five: blue
+ }
"
`)
})
test('issue 39', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
sizes: {
0.5: '2px',
3.5: '14px',
6.5: '18px',
'1.0': {
foo: '1rem',
2.4: '2rem',
},
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --sizes-0\\.5: 2px;
+ --sizes-3\\.5: 14px;
+ --sizes-6\\.5: 18px;
+ --sizes-1\\.0-foo: 1rem;
+ --sizes-1\\.0-2\\.4: 2rem
+ }
"
`)
})
================================================
FILE: __tests__/nested-variables.test.html
================================================
<div class="container">
<div class="card"></div>
</div>
<div class="card-body"></div>
================================================
FILE: __tests__/nested-variables.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('nested variables', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
colors: {
DEFAULT: '#111111',
black: '#000000',
buttons: {
DEFAULT: '#222222',
light: {
DEFAULT: '#333333',
white: '#ffffff',
},
moon: {
white: 'white',
inverse: {
DEFAULT: '#444444',
white: 'black',
},
},
},
},
},
'.container>.card, .card-body': {
colors: {
DEFAULT: '#555555',
black: 'rgb(0, 0, 0)',
buttons: {
DEFAULT: '#666666',
light: {
DEFAULT: '#777777',
white: '#ffffff',
},
moon: {
white: 'white',
inverse: {
DEFAULT: '#888888',
white: 'black',
},
},
},
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors: #111111;
+ --colors-black: #000000;
+ --colors-buttons: #222222;
+ --colors-buttons-light: #333333;
+ --colors-buttons-light-white: #ffffff;
+ --colors-buttons-moon-white: white;
+ --colors-buttons-moon-inverse: #444444;
+ --colors-buttons-moon-inverse-white: black
+ }
+ .container>.card {
+ --colors: #555555;
+ --colors-black: rgb(0, 0, 0);
+ --colors-buttons: #666666;
+ --colors-buttons-light: #777777;
+ --colors-buttons-light-white: #ffffff;
+ --colors-buttons-moon-white: white;
+ --colors-buttons-moon-inverse: #888888;
+ --colors-buttons-moon-inverse-white: black
+ }
+ .card-body {
+ --colors: #555555;
+ --colors-black: rgb(0, 0, 0);
+ --colors-buttons: #666666;
+ --colors-buttons-light: #777777;
+ --colors-buttons-light-white: #ffffff;
+ --colors-buttons-moon-white: white;
+ --colors-buttons-moon-inverse: #888888;
+ --colors-buttons-moon-inverse-white: black
+ }
"
`)
})
================================================
FILE: __tests__/plugin-api.test.html
================================================
<div class="admin"></div>
<div class="dark"></div>
<div class="form-select">
<div class="default-multi"></div>
<div class="other-multi"></div>
</div>
<div class="select"></div>
================================================
FILE: __tests__/plugin-api.test.js
================================================
const utils = require('./util/_utils')(__filename)
test('simple example with dark mode set to `media`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {
variables: {
DEFAULT: {
colors: {
primary: 'indigo',
},
},
},
},
plugins: [require('../examples/api-examples/simple/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: indigo;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray
+ }
+ }
"
`)
})
test('simple example with dark mode set to `class`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
colors: {
primary: 'indigo',
},
},
},
},
plugins: [require('../examples/api-examples/simple/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: indigo;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray
+ }
+ .dark {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink
+ }
+ .dark .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray
+ }
"
`)
})
test('with-components example with dark mode set to `class`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {},
plugins: [require('../examples/api-examples/with-components/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: black;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ .dark {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .dark .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ .form-select {
+ background-color: var(--colors-prefix2-primary);
+ }
+ .form-select .default-multi {
+ background-color: var(--prefix2-colors-secondary);
+ }
+ .form-select .other-multi {
+ background-color: var(--prefix2-colors-warning);
+ }
"
`)
})
test('with-components example with dark mode set to `media`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {},
plugins: [require('../examples/api-examples/with-components/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: black;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ }
+ .form-select {
+ background-color: var(--colors-prefix2-primary);
+ }
+ .form-select .default-multi {
+ background-color: var(--prefix2-colors-secondary);
+ }
+ .form-select .other-multi {
+ background-color: var(--prefix2-colors-warning);
+ }
"
`)
})
test('with-components-null-selector example with dark mode set to `class`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {},
plugins: [require('../examples/api-examples/with-components-null-selector/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: black;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ .dark {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .dark .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ .select {
+ background-color: var(--colors-prefix2-primary);
+ }
+ .select .default-multi {
+ background-color: var(--prefix2-colors-secondary);
+ }
+ .select .other-multi {
+ background-color: var(--prefix2-colors-warning);
+ }
"
`)
})
test('with-components-null-selector example with dark mode set to `media`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {},
plugins: [require('../examples/api-examples/with-components-null-selector/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: black;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: pink;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ }
+ .select {
+ background-color: var(--colors-prefix2-primary);
+ }
+ .select .default-multi {
+ background-color: var(--prefix2-colors-secondary);
+ }
+ .select .other-multi {
+ background-color: var(--prefix2-colors-warning);
+ }
"
`)
})
test('with-themes example with dark mode set to `media`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {},
plugins: [require('../examples/api-examples/with-themes/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: black;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: indigo
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: red;
+ --prefix2-colors-warning: purple
+ }
+ .admin {
+ --prefix2-colors-primary: green;
+ --prefix2-colors-secondary: orange;
+ --prefix2-colors-warning: teal
+ }
+ }
"
`)
})
test('with-themes example with dark mode set to `class`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
colors: {
primary: 'indigo',
},
},
},
},
plugins: [require('../examples/api-examples/with-themes/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: indigo;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: indigo
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray
+ }
+ .dark {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: red;
+ --prefix2-colors-warning: purple
+ }
+ .dark .admin {
+ --prefix2-colors-primary: green;
+ --prefix2-colors-secondary: orange;
+ --prefix2-colors-warning: teal
+ }
"
`)
})
test('advanced example with dark mode set to `media`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {
variables: {
DEFAULT: {
colors: {
primary: 'indigo',
},
},
},
},
plugins: [require('../examples/api-examples/advanced/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: indigo;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: indigo;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: red;
+ --prefix2-colors-warning: purple;
+ }
+ .admin {
+ --prefix2-colors-primary: green;
+ --prefix2-colors-secondary: orange;
+ --prefix2-colors-warning: teal;
+ }
+ }
+ .form-select {
+ background-color: var(--colors-prefix2-primary);
+ }
+ .form-select .default-multi {
+ background-color: var(--prefix2-colors-secondary);
+ }
+ .form-select .other-multi {
+ background-color: var(--prefix2-colors-warning);
+ }
"
`)
})
test('advanced example with dark mode set to `class`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
colors: {
primary: 'indigo',
},
},
},
},
plugins: [require('../examples/api-examples/advanced/index')],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix2-colors-primary: indigo;
+ --prefix2-colors-secondary: white;
+ --prefix2-colors-warning: indigo;
+ }
+ .admin {
+ --prefix2-colors-primary: blue;
+ --prefix2-colors-secondary: green;
+ --prefix2-colors-warning: gray;
+ }
+ .dark {
+ --prefix2-colors-primary: yellow;
+ --prefix2-colors-secondary: red;
+ --prefix2-colors-warning: purple;
+ }
+ .dark .admin {
+ --prefix2-colors-primary: green;
+ --prefix2-colors-secondary: orange;
+ --prefix2-colors-warning: teal;
+ }
+ .form-select {
+ background-color: var(--colors-prefix2-primary);
+ }
+ .form-select .default-multi {
+ background-color: var(--prefix2-colors-secondary);
+ }
+ .form-select .other-multi {
+ background-color: var(--prefix2-colors-warning);
+ }
"
`)
})
================================================
FILE: __tests__/readme.test.html
================================================
<html class="dark">
<button type="button"></button>
<div class="custom-dark-selector">
<div class="container"></div>
</div>
<select class="form-select"></select>
<select class="form-select default-multi"></select>
<select class="form-select other-multi"></select>
</html>
================================================
FILE: __tests__/readme.test.js
================================================
const plugin = require('tailwindcss/plugin')
const tailwindcssVariables = require('../src/index')
const variablesApi = require('../api')
const utils = require('./util/_utils')(__filename)
test('basic usage', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
button: {
size: '2rem',
},
},
colors: {
red: {
50: '#ff3232',
},
},
},
'.container': {
sizes: {
medium: '1.5rem',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --sizes-small: 1rem;
+ --sizes-button-size: 2rem;
+ --colors-red-50: #ff3232
+ }
+ .container {
+ --sizes-medium: 1.5rem
+ }
"
`)
})
test('dark mode with `class`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --sizes-small: 1rem;
+ --colors-red-50: red
+ }
+ .container {
+ --colors-red-50: indigo
+ }
+ :root.dark {
+ --colors-red-50: blue
+ }
+ :root.dark .container {
+ --colors-red-50: green
+ }
"
`)
})
test('dark mode with `class` and custom options', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: ['class', '.custom-dark-selector'],
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [
tailwindcssVariables({
darkToRoot: false,
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --sizes-small: 1rem;
+ --colors-red-50: red
+ }
+ .container {
+ --colors-red-50: indigo
+ }
+ .custom-dark-selector {
+ --colors-red-50: blue
+ }
+ .custom-dark-selector .container {
+ --colors-red-50: green
+ }
"
`)
})
test('dark mode with `media`', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'media',
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
},
colors: {
red: {
50: 'red',
},
},
},
'.container': {
colors: {
red: {
50: 'indigo',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
50: 'blue',
},
},
},
'.container': {
colors: {
red: {
50: 'green',
},
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --sizes-small: 1rem;
+ --colors-red-50: red
+ }
+ .container {
+ --colors-red-50: indigo
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --colors-red-50: blue
+ }
+ .container {
+ --colors-red-50: green
+ }
+ }
"
`)
})
test('variable prefix', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
button: {
size: '2rem',
},
},
colors: {
red: {
50: '#ff3232',
},
},
},
'.container': {
sizes: {
medium: '1.5rem',
},
},
},
},
plugins: [
tailwindcssVariables({
variablePrefix: '--admin',
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --admin-sizes-small: 1rem;
+ --admin-sizes-button-size: 2rem;
+ --admin-colors-red-50: #ff3232
+ }
+ .container {
+ --admin-sizes-medium: 1.5rem
+ }
"
`)
})
test('variables with nested objects', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
sizes: {
small: '1rem',
admin: {
buttons: {
colors: {
red: {
500: '#ff0000',
600: '#e60000',
},
},
},
},
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --sizes-small: 1rem;
+ --sizes-admin-buttons-colors-red-500: #ff0000;
+ --sizes-admin-buttons-colors-red-600: #e60000
+ }
"
`)
})
test('naming conventions for variable keys', async () => {
expect(
/* eslint-disable camelcase */
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
colors: {
"hello[$&+,:;=?@#|'<>-^*()%!]WORLD": '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
},
sizes: {
1.5: '1rem',
xl: {
'3.0': '2rem',
},
},
},
"[type='button']": {
"hello[$&+,:;=?@#|'<>-^*()%!]world": '100%',
underscore_to_dash: '100%',
'underscore_to_dash-with-dash': '100%',
auto_dash: '100%',
nested_auto_dash: {
color_primary: '100%',
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-hello-WORLD: 100%;
+ --colors-underscore-to-dash: 100%;
+ --colors-underscore-to-dash-with-dash: 100%;
+ --colors-auto-dash: 100%;
+ --sizes-1\\.5: 1rem;
+ --sizes-xl-3\\.0: 2rem
+ }
+ [type='button'] {
+ --hello-world: 100%;
+ --underscore-to-dash: 100%;
+ --underscore-to-dash-with-dash: 100%;
+ --auto-dash: 100%;
+ --nested-auto-dash-color-primary: 100%
+ }
"
`)
})
test('example api', async () => {
let variableOptions = {
variablePrefix: '--myplugin',
}
const pluginVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
},
}
const pluginDarkVariables = {
DEFAULT: {
colors: {
primary: 'red',
secondary: 'yellow',
warning: 'green',
},
},
}
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {},
plugins: [
plugin(function ({ addComponents, config }) {
addComponents(variablesApi.variables(pluginVariables, variableOptions))
addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --myplugin-colors-primary: black;
+ --myplugin-colors-secondary: white;
+ --myplugin-colors-warning: orange
+ }
+ :root.dark {
+ --myplugin-colors-primary: red;
+ --myplugin-colors-secondary: yellow;
+ --myplugin-colors-warning: green
+ }
"
`)
})
test('example api with components helper', async () => {
let variableOptions = {
variablePrefix: '--myplugin',
}
const pluginVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
},
}
const pluginDarkVariables = {
DEFAULT: {
colors: {
primary: 'red',
secondary: 'yellow',
warning: 'green',
},
},
}
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
theme: {},
plugins: [
plugin(function ({ addComponents, config }) {
const formComponents = {
select: {
DEFAULT: {
backgroundColor: 'var(--myplugin-colors-primary)',
},
multi: {
'&.default-multi': {
backgroundColor: 'var(--myplugin-colors-secondary)',
},
'&.other-multi': {
backgroundColor: 'var(--myplugin-colors-warning)',
},
},
},
}
addComponents(variablesApi.variables(pluginVariables, variableOptions))
addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', formComponents))
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --myplugin-colors-primary: black;
+ --myplugin-colors-secondary: white;
+ --myplugin-colors-warning: orange;
+ }
+ :root.dark {
+ --myplugin-colors-primary: red;
+ --myplugin-colors-secondary: yellow;
+ --myplugin-colors-warning: green;
+ }
+ .form-select {
+ background-color: var(--myplugin-colors-primary);
+ }
+ .form-select.default-multi {
+ background-color: var(--myplugin-colors-secondary);
+ }
+ .form-select.other-multi {
+ background-color: var(--myplugin-colors-warning);
+ }
"
`)
})
test('detailed example api', async () => {
expect(
await utils.diffOnly(
...[
{
content: [utils.content()],
darkMode: 'class',
...require('../examples/api-examples/readme-source/tailwind.config'),
},
]
)
).toMatchInlineSnapshot(`
"
+ :root {
+ --forms-colors-primary: indigo;
+ --forms-colors-secondary: white;
+ --forms-colors-warning: orange;
+ }
+ .form-select {
+ background-color: var(--forms-colors-primary);
+ }
+ .form-select .default-multi {
+ background-color: var(--forms-colors-secondary);
+ }
+ .form-select .other-multi {
+ background-color: var(--forms-colors-warning);
+ }
"
`)
})
================================================
FILE: __tests__/test.stub
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('../jest/_utils')(__filename)
it('test', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
variable: {
key: 'value'
},
},
},
},
plugins: [tailwindcssVariables],
})
).toMatchInlineSnapshot(
`
"
+ :root {
+ --variable-key: '1'
+ }
`
)
})
================================================
FILE: __tests__/to-base.test.html
================================================
<html class="dark" lang="">
<div class="text-red-400">tailwindcss-variables</div>
<div class="text-red-500">tailwindcss-variables</div>
</html>
================================================
FILE: __tests__/to-base.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('toBase - default', async () => {
expect(
await utils.diffOnly(
{
content: [utils.content()],
darkMode: 'class',
corePlugins: ['textColor'],
theme: {
colors: {
red: {
400: 'var(--colors-red-400)',
500: 'var(--colors-red-500)',
},
},
variables: {
DEFAULT: {
colors: {
red: {
400: '#000000',
500: '#111111',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
400: '#222222',
500: '#333333',
},
},
},
},
},
plugins: [tailwindcssVariables],
},
true
)
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-red-400: #000000;
+ --colors-red-500: #111111
+ }
+ :root.dark {
+ --colors-red-400: #222222;
+ --colors-red-500: #333333
+ }
+ .text-red-400 {
+ color: var(--colors-red-400)
+ }
+ .text-red-500 {
+ color: var(--colors-red-500)
+ }
"
`)
})
test('toBase', async () => {
expect(
await utils.diffOnly(
{
content: [utils.content()],
darkMode: 'class',
corePlugins: ['textColor'],
theme: {
colors: {
red: {
400: 'var(--colors-red-400)',
500: 'var(--colors-red-500)',
},
},
variables: {
DEFAULT: {
colors: {
red: {
400: '#000000',
500: '#111111',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
400: '#222222',
500: '#333333',
},
},
},
},
},
plugins: [
tailwindcssVariables({
toBase: true,
}),
],
},
true
)
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-red-400: #000000;
+ --colors-red-500: #111111
+ }
+ :root.dark {
+ --colors-red-400: #222222;
+ --colors-red-500: #333333
+ }
+ .text-red-400 {
+ color: var(--colors-red-400)
+ }
+ .text-red-500 {
+ color: var(--colors-red-500)
+ }
"
`)
})
test('if "base" styles are not added then variables should not be added', async () => {
expect(
await utils.diffOnly(
{
content: [utils.content()],
darkMode: 'class',
corePlugins: ['textColor'],
theme: {
colors: {
red: {
400: 'var(--colors-red-400)',
500: 'var(--colors-red-500)',
},
},
variables: {
DEFAULT: {
colors: {
red: {
400: '#000000',
500: '#111111',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
400: '#222222',
500: '#333333',
},
},
},
},
},
plugins: [
tailwindcssVariables({
toBase: true,
}),
],
},
false
)
).toMatchInlineSnapshot(`
"
+ .text-red-400 {
+ color: var(--colors-red-400)
+ }
+ .text-red-500 {
+ color: var(--colors-red-500)
+ }
"
`)
})
test('if "base" styles are not added then variables should be added.', async () => {
expect(
await utils.diffOnly(
{
content: [utils.content()],
darkMode: 'class',
corePlugins: ['textColor'],
theme: {
colors: {
red: {
400: 'var(--colors-red-400)',
500: 'var(--colors-red-500)',
},
},
variables: {
DEFAULT: {
colors: {
red: {
400: '#000000',
500: '#111111',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
400: '#222222',
500: '#333333',
},
},
},
},
},
plugins: [
tailwindcssVariables({
toBase: false,
}),
],
},
false
)
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-red-400: #000000;
+ --colors-red-500: #111111
+ }
+ :root.dark {
+ --colors-red-400: #222222;
+ --colors-red-500: #333333
+ }
+ .text-red-400 {
+ color: var(--colors-red-400)
+ }
+ .text-red-500 {
+ color: var(--colors-red-500)
+ }
"
`)
})
test('toComponents', async () => {
expect(
await utils.diffOnly(
{
content: [utils.content()],
corePlugins: ['textColor'],
darkMode: 'class',
theme: {
colors: {
red: {
400: 'var(--colors-red-400)',
500: 'var(--colors-red-500)',
},
},
variables: {
DEFAULT: {
colors: {
red: {
400: '#000000',
500: '#111111',
},
},
},
},
darkVariables: {
DEFAULT: {
colors: {
red: {
400: '#222222',
500: '#333333',
},
},
},
},
},
plugins: [
tailwindcssVariables({
toBase: false,
}),
],
},
false
)
).toMatchInlineSnapshot(`
"
+ :root {
+ --colors-red-400: #000000;
+ --colors-red-500: #111111
+ }
+ :root.dark {
+ --colors-red-400: #222222;
+ --colors-red-500: #333333
+ }
+ .text-red-400 {
+ color: var(--colors-red-400)
+ }
+ .text-red-500 {
+ color: var(--colors-red-500)
+ }
"
`)
})
================================================
FILE: __tests__/use-host.test.html
================================================
<div class='container'></div>
================================================
FILE: __tests__/use-host.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('basic usage with host', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
colors: {
black: 'rgb(0, 0, 0)',
white: '#ffffff',
},
sizes: {
small: '10px',
medium: '2rem',
large: '100%',
},
},
'.container': {
colors: {
primary: 'red',
secondary: 'var(--colors-primary)',
},
},
},
},
plugins: [tailwindcssVariables({
useHost: true,
})],
})
).toMatchInlineSnapshot(`
"
+ :host {
+ --colors-black: rgb(0, 0, 0);
+ --colors-white: #ffffff;
+ --sizes-small: 10px;
+ --sizes-medium: 2rem;
+ --sizes-large: 100%
+ }
+ .container {
+ --colors-primary: red;
+ --colors-secondary: var(--colors-primary)
+ }
"
`)
})
test('basic usage with host should not work with dark', async () => {
expect(
await utils.diffOnly({
content: [utils.content('dark-mode-to-root')],
darkMode: 'class',
theme: {
darkVariables: {
DEFAULT: {
colors: {
black: 'rgb(0, 0, 0)',
white: '#ffffff',
},
sizes: {
small: '10px',
medium: '2rem',
large: '100%',
},
},
'.container': {
colors: {
primary: 'red',
secondary: 'var(--colors-primary)',
},
},
},
},
plugins: [tailwindcssVariables({
darkToRoot: true,
useHost: true
})],
})
).toMatchInlineSnapshot(`
"
+ :host.dark {
+ --colors-black: rgb(0, 0, 0);
+ --colors-white: #ffffff;
+ --sizes-small: 10px;
+ --sizes-medium: 2rem;
+ --sizes-large: 100%
+ }
+ :host.dark .container {
+ --colors-primary: red;
+ --colors-secondary: var(--colors-primary)
+ }
"
`)
})
================================================
FILE: __tests__/util/_utils.js
================================================
const tailwind = require('tailwindcss')
const snapshotDiff = require('snapshot-diff')
const postcss = require('postcss')
const path = require('path')
const fs = require('fs')
const atImport = require('postcss-import')
module.exports = (contentFile) => {
let utils = {}
utils.run = function(config = {}, toBase = true) {
let { currentTestName } = expect.getState()
let filename = currentTestName + '.test.css'
if (fs.existsSync(path.resolve(__dirname, '../' + filename))) {
return this.runFromFile(filename, config)
}
return this.runInline(config, toBase)
}
utils.runInline = (config, toBase) => {
let styles
if (toBase) {
styles = ['@tailwind base;', '@tailwind components;', '@tailwind utilities;']
} else {
styles = ['@tailwind components;', '@tailwind utilities;']
}
return postcss([tailwind({ corePlugins: [], ...config })])
.process(styles.join('\n'), {
from: undefined,
})
.then((result) => result.css)
}
utils.runFromFile = (filename, config) => {
const css = fs.readFileSync(path.resolve(__dirname, '../' + filename), 'utf8')
return postcss([tailwind({ corePlugins: [], ...config })])
.use(atImport())
.process(css, {
from: path.resolve(__dirname, '../' + filename),
})
.then((result) => result.css)
}
utils.diffOnly = async function(options = {}, toBase = true) {
const [before, after] = await Promise.all([utils.run({}, toBase), utils.run(options, toBase)])
return `\n\n${snapshotDiff(before, after, {
aAnnotation: '__REMOVE_ME__',
bAnnotation: '__REMOVE_ME__',
contextLines: 0,
})
.replace(/\n\n@@([^@@]*)@@/g, '') // Top level @@ signs
.replace(/@@([^@@]*)@@/g, '\n---\n') // In between @@ signs
.replace(/[-+] __REMOVE_ME__\n/g, '')
.replace(/\+ /g, '+ ')
// .replace(/\+ \}\n([\s]*)\+/g, '\+ \}\n$1\+')
.replace(/\+(\s+?)\}\n(\s+?)\+/g, '\\+$1\\}')
.replace(/Snapshot Diff:\n/g, '')
.replace(/"/g, '\'')
.split('\n')
.map((line) => ` ${line}`)
.join('\n')}\n\n`
}
utils.content = (filename, ext) => {
if (!ext) {
ext = 'html'
}
if (filename) {
return path.resolve(__dirname, '../' + path.parse(filename).name + '.test.' + ext)
} else {
return path.resolve(__dirname, '../' + path.parse(contentFile).name + '.' + ext)
}
}
return utils
}
================================================
FILE: __tests__/variable-prefix.test.html
================================================
<div class="container"></div>
================================================
FILE: __tests__/variable-prefix.test.js
================================================
const tailwindcssVariables = require('../src/index')
const utils = require('./util/_utils')(__filename)
test('variable prefix', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
variablePrefix: '--prefix',
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --prefix-colors-primary: #ffffff
+ }
+ .container {
+ --prefix-colors-secondary: #000000
+ }
"
`)
})
test('formatted variable prefix', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: false,
theme: {
variables: {
DEFAULT: {
colors: {
primary: '#ffffff',
},
},
'.container': {
colors: {
secondary: '#000000',
},
},
},
},
plugins: [
tailwindcssVariables({
variablePrefix: '--[hello](_world)1=tail_wind',
}),
],
})
).toMatchInlineSnapshot(`
"
+ :root {
+ --hello-world1tail-wind-colors-primary: #ffffff
+ }
+ .container {
+ --hello-world1tail-wind-colors-secondary: #000000
+ }
"
`)
})
================================================
FILE: api.js
================================================
const pluginApi = require('./src/pluginApi')
module.exports = pluginApi
================================================
FILE: colorVariable.js
================================================
const helpers = require('./src/helpers')
module.exports = helpers.colorVariable
================================================
FILE: examples/.npmignore
================================================
================================================
FILE: examples/api-examples/advanced/components.js
================================================
module.exports = (theme) => ({
select: {
DEFAULT: {
backgroundColor: 'var(--colors-prefix2-primary)',
},
multi: {
'.default-multi': {
backgroundColor: 'var(--prefix2-colors-secondary)',
},
'.other-multi': {
backgroundColor: 'var(--prefix2-colors-warning)',
},
},
},
})
================================================
FILE: examples/api-examples/advanced/index.js
================================================
const plugin = require('tailwindcss/plugin')
const merge = require('lodash/merge')
const pluginThemes = require('./themes')
const pluginComponents = require('./components')
const variablesApi = require('../../../api')
// const variablesApi = require('@mertasan/tailwindcss-variables/api')
/**
* @typedef {Object} plugin
* @property {function} withOptions
*/
module.exports = plugin.withOptions(
function(options) {
return function({ addComponents, theme, options, config }) {
let pluginOptions = merge(
{
variablePrefix: '--prefix1',
darkToRoot: false, // default: true ( :root.dark or .dark )
},
theme('myPlugin.variableOptions', {}),
)
let allThemes = pluginThemes(theme)
addComponents(variablesApi.variables(merge(allThemes.themes, theme('variables', {})), pluginOptions))
addComponents(variablesApi.darkVariables(merge(allThemes.darkThemes, theme('darkVariables', {})), pluginOptions, config('darkMode')))
let allComponents = pluginComponents(theme)
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', allComponents))
}
},
function(options) {
return {
// darkMode: 'class', // or media
theme: {
myPlugin: (theme) => ({
variableOptions: {
variablePrefix: '--prefix2',
},
}),
},
}
},
)
================================================
FILE: examples/api-examples/advanced/themes.js
================================================
module.exports = (theme) => ({
themes: {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'indigo',
},
},
'.admin': {
colors: {
primary: 'blue',
secondary: 'green',
warning: 'gray',
},
},
},
darkThemes: {
DEFAULT: {
colors: {
primary: 'yellow',
secondary: 'red',
warning: 'purple',
},
},
'.admin': {
colors: {
primary: 'green',
secondary: 'orange',
warning: 'teal',
},
},
},
})
================================================
FILE: examples/api-examples/readme-source/components.js
================================================
module.exports = (theme) => ({
select: {
DEFAULT: {
backgroundColor: 'var(--forms-colors-primary)',
},
multi: {
'.default-multi': {
backgroundColor: 'var(--forms-colors-secondary)',
},
'.other-multi': {
backgroundColor: 'var(--forms-colors-warning)',
},
},
},
})
================================================
FILE: examples/api-examples/readme-source/index.html
================================================
<select class="form-select"></select>
<select class="form-select default-multi"></select>
<select class="form-select other-multi"></select>
================================================
FILE: examples/api-examples/readme-source/index.js
================================================
const plugin = require('tailwindcss/plugin')
const _ = require('lodash')
const variablesApi = require('../../../api')
// const variablesApi = require('@mertasan/tailwindcss-variables/api')
const pluginComponents = require('./components')
const pluginThemes = require('./themes')
module.exports = plugin.withOptions(
function (options) {
return function ({addComponents, theme, config}) {
let variableOptions = {
variablePrefix: theme('myPlugin.prefix', '--forms')
};
addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))
let darkVariables = theme('myPlugin.darkOptions', {});
if (!_.isEmpty(darkVariables)) {
addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))
}
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))
}
}
)
================================================
FILE: examples/api-examples/readme-source/tailwind.config.js
================================================
module.exports = {
theme: {
myPlugin: {
options: {
colors: {
primary: 'indigo',
}
}
},
},
// plugins: [require('my-plugin')],
plugins: [require('./index')],
}
================================================
FILE: examples/api-examples/readme-source/themes.js
================================================
module.exports = (theme) => ({
themes: {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'orange',
},
}
}
})
================================================
FILE: examples/api-examples/simple/index.js
================================================
const plugin = require('tailwindcss/plugin')
const merge = require('lodash/merge')
const variablesApi = require('../../../api')
// const variablesApi = require('@mertasan/tailwindcss-variables/api')
/**
* @typedef {Object} plugin
* @property {function} withOptions
*/
module.exports = plugin.withOptions(
function(options) {
return function({ addComponents, theme, options, config }) {
const myVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'pink',
},
},
'.admin': {
colors: {
primary: 'blue',
secondary: 'green',
warning: 'gray',
},
},
}
let pluginOptions = merge(
{
variablePrefix: '--prefix1',
darkToRoot: false, // default: true ( :root.dark or .dark )
},
theme('myPlugin.variableOptions', {}),
)
addComponents(variablesApi.variables(merge(myVariables, theme('variables', {})), pluginOptions))
myVariables.DEFAULT.colors.primary = 'yellow'
addComponents(variablesApi.darkVariables(merge(myVariables, theme('darkVariables', {})), pluginOptions, config('darkMode')))
}
},
function(options) {
return {
// darkMode: 'class', // or media
theme: {
myPlugin: (theme) => ({
variableOptions: {
variablePrefix: '--prefix2',
},
}),
},
}
},
)
================================================
FILE: examples/api-examples/with-components/components.js
================================================
module.exports = (theme) => ({
select: {
DEFAULT: {
backgroundColor: 'var(--colors-prefix2-primary)',
},
multi: {
'.default-multi': {
backgroundColor: 'var(--prefix2-colors-secondary)',
},
'.other-multi': {
backgroundColor: 'var(--prefix2-colors-warning)',
},
},
},
})
================================================
FILE: examples/api-examples/with-components/index.js
================================================
const plugin = require('tailwindcss/plugin')
const merge = require('lodash/merge')
const pluginComponents = require('./components')
const variablesApi = require('../../../api')
// const variablesApi = require('@mertasan/tailwindcss-variables/api')
/**
* @typedef {Object} plugin
* @property {function} withOptions
*/
module.exports = plugin.withOptions(
function(options) {
return function({ addComponents, theme, options, config }) {
const myVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'pink',
},
},
'.admin': {
colors: {
primary: 'blue',
secondary: 'green',
warning: 'gray',
},
},
}
let pluginOptions = merge(
{
variablePrefix: '--prefix1',
darkToRoot: false, // default: true ( :root.dark or .dark )
},
theme('myPlugin.variableOptions', {}),
)
addComponents(variablesApi.variables(myVariables, pluginOptions))
myVariables.DEFAULT.colors.primary = 'yellow'
addComponents(variablesApi.darkVariables(myVariables, pluginOptions, config('darkMode')))
// Automatically register components via API.
addComponents(variablesApi.getComponents('.form', theme('myPlugin.components', {})))
}
},
function(options) {
return {
// darkMode: 'class', // or media
theme: {
myPlugin: (theme) => ({
variableOptions: {
variablePrefix: '--prefix2',
},
components: pluginComponents(theme),
}),
},
}
},
)
================================================
FILE: examples/api-examples/with-components-null-selector/components.js
================================================
module.exports = (theme) => ({
'.select': {
DEFAULT: {
backgroundColor: 'var(--colors-prefix2-primary)',
},
multi: {
'.default-multi': {
backgroundColor: 'var(--prefix2-colors-secondary)',
},
'.other-multi': {
backgroundColor: 'var(--prefix2-colors-warning)',
},
},
},
})
================================================
FILE: examples/api-examples/with-components-null-selector/index.js
================================================
const plugin = require('tailwindcss/plugin')
const merge = require('lodash/merge')
const pluginComponents = require('./components')
const variablesApi = require('../../../api')
// const variablesApi = require('@mertasan/tailwindcss-variables/api')
/**
* @typedef {Object} plugin
* @property {function} withOptions
*/
module.exports = plugin.withOptions(
function(options) {
return function({ addComponents, theme, options, config }) {
const myVariables = {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'pink',
},
},
'.admin': {
colors: {
primary: 'blue',
secondary: 'green',
warning: 'gray',
},
},
}
let pluginOptions = merge(
{
variablePrefix: '--prefix1',
darkToRoot: false, // default: true ( :root.dark or .dark )
},
theme('myPlugin.variableOptions', {}),
)
addComponents(variablesApi.variables(myVariables, pluginOptions))
myVariables.DEFAULT.colors.primary = 'yellow'
addComponents(variablesApi.darkVariables(myVariables, pluginOptions, config('darkMode')))
// Automatically register components via API.
addComponents(variablesApi.getComponents(null, theme('myPlugin.components', {})))
}
},
function(options) {
return {
// darkMode: 'class', // or media
theme: {
myPlugin: (theme) => ({
variableOptions: {
variablePrefix: '--prefix2',
},
components: pluginComponents(theme),
}),
},
}
},
)
================================================
FILE: examples/api-examples/with-themes/index.js
================================================
const plugin = require('tailwindcss/plugin')
const merge = require('lodash/merge')
const pluginThemes = require('./themes')
const variablesApi = require('../../../api')
// const variablesApi = require('@mertasan/tailwindcss-variables/api')
/**
* @typedef {Object} plugin
* @property {function} withOptions
*/
module.exports = plugin.withOptions(
function(options) {
return function({ addComponents, theme, options, config }) {
let pluginOptions = merge(
{
variablePrefix: '--prefix1',
darkToRoot: false, // default: true ( :root.dark or .dark )
},
theme('myPlugin.variableOptions', {}),
)
let allThemes = pluginThemes(theme)
addComponents(variablesApi.variables(merge(allThemes.themes, theme('variables', {})), pluginOptions))
addComponents(variablesApi.darkVariables(merge(allThemes.darkThemes, theme('darkVariables', {})), pluginOptions, config('darkMode')))
}
},
function(options) {
return {
// darkMode: 'class', // or media
theme: {
myPlugin: (theme) => ({
variableOptions: {
variablePrefix: '--prefix2',
},
}),
},
}
},
)
================================================
FILE: examples/api-examples/with-themes/themes.js
================================================
module.exports = (theme) => ({
themes: {
DEFAULT: {
colors: {
primary: 'black',
secondary: 'white',
warning: 'indigo',
},
},
'.admin': {
colors: {
primary: 'blue',
secondary: 'green',
warning: 'gray',
},
},
},
darkThemes: {
DEFAULT: {
colors: {
primary: 'yellow',
secondary: 'red',
warning: 'purple',
},
},
'.admin': {
colors: {
primary: 'green',
secondary: 'orange',
warning: 'teal',
},
},
},
})
================================================
FILE: examples/color-variable-helper/clean.css
================================================
:root {
--colors-primary: #ff0;
--colors-secondary: #000000;
--colors-gray: #6B7280;
--colors-blue: rgb(0,0,254);
--colors-red-400: rgba(254,0,0,0.5);
--colors-red-500: rgba(254,0,0,1);
--colors-red-400-rgb: 254,0,0;
--colors-red-500-rgb: 254,0,0;
--colors-green: rgb(0,255,0);
--colors-primary-rgb: 255,255,0;
--colors-secondary-rgb: 0,0,0;
--colors-gray-rgb: 107,114,128;
--colors-blue-rgb: 0,0,254;
--colors-green-rgb: 0,255,0;
--sizes-small: 10px;
--sizes-medium: 2rem;
--sizes-large: 100%
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
}
.bg-gray {
background-color: var(--colors-gray)
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
}
.bg-red-600 {
background-color: var(--colors-red-500)
}
.bg-green {
background-color: var(--colors-green)
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5
}
.text-primary {
--tw-text-opacity: 1;
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
}
.text-blue {
--tw-text-opacity: 1;
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
}
.text-opacity-50 {
--tw-text-opacity: 0.5
}
================================================
FILE: examples/color-variable-helper/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colorVariable() example using @mertasan/tailwindcss-variables</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50">
<section class="py-20 bg-gray-50">
<div class="container items-center max-w-6xl px-4 px-10 mx-auto sm:px-20 md:px-32 lg:px-16">
<div class="flex flex-wrap items-center -mx-3">
<div class="order-1 w-full px-3 lg:w-1/2 lg:order-0">
<div class="w-full lg:max-w-md">
<h2 class="mb-4 text-3xl font-bold leading-tight tracking-tight sm:text-5xl font-heading">
Tailwindcss Variables</h2>
<p class="mb-4 tracking-tight xl:mb-6 text-2xl sm:text-3xl text-green-500 font-heading leading-tight font-semibold">
[colorVariable() example]</p>
<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">
source</a>
</div>
</div>
<div class="w-full px-3 mb-12 lg:w-1/2 order-0 lg:order-1 lg:mb-0">
<img class="mx-auto sm:max-w-sm lg:max-w-full" src="image.png" alt="feature image">
</div>
</div>
</div>
</section>
<div class="hidden">
<div class="text-primary text-opacity-50"></div>
<div class="bg-secondary bg-opacity-50"></div>
<div class="bg-gray bg-opacity-50"></div>
<div class="text-blue text-opacity-50"></div>
<div class="bg-red-400"></div>
<div class="bg-red-500"></div>
<div class="bg-red-600"></div>
<div class="bg-green bg-opacity-50"></div>
<div class="bg-white bg-opacity-50"></div>
</div>
</body>
</html>
================================================
FILE: examples/color-variable-helper/package.json
================================================
{
"name": "color-variable-helper",
"version": "1.0.0",
"scripts": {
"build": "env NODE_ENV=production npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./style.css",
"build:clean": "env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css"
},
"devDependencies": {
"@mertasan/tailwindcss-variables": "latest",
"autoprefixer": "^10.4.0",
"postcss": "^8.4.4",
"tailwindcss": "^3.0.11"
},
"license": "MIT"
}
================================================
FILE: examples/color-variable-helper/style.css
================================================
/*
! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
tab-size: 4; /* 3 */
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 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are vis
gitextract_64fxtnd3/
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── ---bug-report.md
│ │ ├── ---support-question.md
│ │ └── --feature-request.md
│ ├── dependabot.yml
│ └── workflows/
│ ├── build.yml
│ ├── publish.yml
│ └── tests.yml
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── .run/
│ └── tailwindcss-variables-test.run.xml
├── LICENSE
├── README.md
├── README.tr.md
├── __tests__/
│ ├── basic-usage.test.html
│ ├── basic-usage.test.js
│ ├── color-variable-helper.test.html
│ ├── color-variable-helper.test.js
│ ├── color-variable-helper2.test.html
│ ├── css-selectors.test.html
│ ├── css-selectors.test.js
│ ├── dark-mode-to-root.test.html
│ ├── dark-mode.test.html
│ ├── dark-mode.test.js
│ ├── extend-colors.test.html
│ ├── extend-colors.test.js
│ ├── fallback.test.css
│ ├── fallback.test.html
│ ├── fallback.test.js
│ ├── force-rgb.test.html
│ ├── force-rgb.test.js
│ ├── format-variables.test.html
│ ├── format-variables.test.js
│ ├── issues.test.html
│ ├── issues.test.js
│ ├── nested-variables.test.html
│ ├── nested-variables.test.js
│ ├── plugin-api.test.html
│ ├── plugin-api.test.js
│ ├── readme.test.html
│ ├── readme.test.js
│ ├── test.stub
│ ├── to-base.test.html
│ ├── to-base.test.js
│ ├── use-host.test.html
│ ├── use-host.test.js
│ ├── util/
│ │ └── _utils.js
│ ├── variable-prefix.test.html
│ └── variable-prefix.test.js
├── api.js
├── colorVariable.js
├── examples/
│ ├── .npmignore
│ ├── api-examples/
│ │ ├── advanced/
│ │ │ ├── components.js
│ │ │ ├── index.js
│ │ │ └── themes.js
│ │ ├── readme-source/
│ │ │ ├── components.js
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ ├── tailwind.config.js
│ │ │ └── themes.js
│ │ ├── simple/
│ │ │ └── index.js
│ │ ├── with-components/
│ │ │ ├── components.js
│ │ │ └── index.js
│ │ ├── with-components-null-selector/
│ │ │ ├── components.js
│ │ │ └── index.js
│ │ └── with-themes/
│ │ ├── index.js
│ │ └── themes.js
│ ├── color-variable-helper/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-custom-selector/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-with-class/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-with-class-to-root/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── dark-with-media/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── prefix/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ ├── simple/
│ │ ├── clean.css
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── style.css
│ │ ├── tailwind.config.js
│ │ └── tailwind.css
│ └── use-host/
│ ├── clean.css
│ ├── index.html
│ ├── package.json
│ ├── style.css
│ ├── tailwind.config.js
│ └── tailwind.css
├── package.json
├── scripts/
│ └── build.js
└── src/
├── helpers.js
├── index.js
├── pluginApi.js
└── utils.js
SYMBOL INDEX (2 symbols across 2 files)
FILE: scripts/build.js
function buildDistFile (line 5) | function buildDistFile(examplePath, message) {
FILE: src/utils.js
function recurse (line 73) | function recurse(object, varPrefix) {
Condensed preview — 127 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (333K chars).
[
{
"path": ".editorconfig",
"chars": 280,
"preview": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 43,
"preview": "/__tests__/util/_utils.js\n*.stub\n.run\n*.md\n"
},
{
"path": ".eslintrc.json",
"chars": 985,
"preview": "{\n \"env\": {\n \"jest\": true\n },\n \"parserOptions\": {\n \"ecmaVersion\": 2020,\n \"sourceType\": \"module\"\n },\n \"exte"
},
{
"path": ".gitattributes",
"chars": 66,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 64,
"preview": "# These are supported funding model platforms\n\ngithub: mertasan\n"
},
{
"path": ".github/ISSUE_TEMPLATE/---bug-report.md",
"chars": 312,
"preview": "---\nname: \"\\U0001F4CC Bug report\"\nabout: Create a report to help us improve\ntitle: ''\nlabels: bug\nassignees: ''\n\n---\n\n##"
},
{
"path": ".github/ISSUE_TEMPLATE/---support-question.md",
"chars": 237,
"preview": "---\nname: \"\\U0001F914 Support Question\"\nabout: I need assistance or clarification on usage of this library\ntitle: ''\nlab"
},
{
"path": ".github/ISSUE_TEMPLATE/--feature-request.md",
"chars": 272,
"preview": "---\nname: \"\\U0001F389Feature request\"\nabout: Suggest an idea for this project\ntitle: ''\nlabels: feature request\nassignee"
},
{
"path": ".github/dependabot.yml",
"chars": 143,
"preview": "version: 2\nupdates:\n- package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: daily\n time: \"03:00\"\n open-p"
},
{
"path": ".github/workflows/build.yml",
"chars": 1224,
"preview": "name: build\n\non:\n workflow_dispatch:\n push:\n paths:\n - 'examples/**'\n pull_request:\n branches: [ master ]\n"
},
{
"path": ".github/workflows/publish.yml",
"chars": 1130,
"preview": "name: npm-publish\n\non:\n workflow_dispatch:\n release:\n types: [published, edited]\n\njobs:\n publish:\n runs-on: ubu"
},
{
"path": ".github/workflows/tests.yml",
"chars": 879,
"preview": "name: tests\n\non:\n push:\n branches:\n - \"**\"\n paths-ignore:\n - '**.md'\n pull_request:\n types: [ready_"
},
{
"path": ".gitignore",
"chars": 86,
"preview": "node_modules/\n**/*/package-lock.json\nyarn.lock\ncoverage/\n.DS_Store\n.idea\ncache/\n*.log\n"
},
{
"path": ".npmignore",
"chars": 103,
"preview": "node_modules/\n/coverage\n/examples\nyarn.lock\nyarn-error.log\n.DS_Store\n.idea\n.prettierignore\n.run\ncache/\n"
},
{
"path": ".prettierignore",
"chars": 291,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\ncoverage\nbower_components\npackage.json\npackage-lock.jso"
},
{
"path": ".prettierrc",
"chars": 350,
"preview": "{\n \"semi\": false,\n \"singleQuote\": true,\n \"printWidth\": 120,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"trailingComma\": \""
},
{
"path": ".run/tailwindcss-variables-test.run.xml",
"chars": 462,
"preview": "<component name=\"ProjectRunConfigurationManager\">\n <configuration default=\"false\" name=\"@mertasan/tailwindcss-variables"
},
{
"path": "LICENSE",
"chars": 1085,
"preview": "MIT License\n\nCopyright (c) 2021 Mert Aşan <mert@yediyuz.com>\n\nPermission is hereby granted, free of charge, to any perso"
},
{
"path": "README.md",
"chars": 28411,
"preview": "<p>\n <a href=\"https://github.com/mertasan/tailwindcss-variables/actions\"><img src=\"https://img.shields.io/github/acti"
},
{
"path": "README.tr.md",
"chars": 28463,
"preview": "<p>\n <a href=\"https://github.com/mertasan/tailwindcss-variables/actions\"><img src=\"https://img.shields.io/github/acti"
},
{
"path": "__tests__/basic-usage.test.html",
"chars": 30,
"preview": "<div class='container'></div>\n"
},
{
"path": "__tests__/basic-usage.test.js",
"chars": 1125,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('basic usa"
},
{
"path": "__tests__/color-variable-helper.test.html",
"chars": 955,
"preview": "<div class=\"text-primary text-opacity-50\">tailwindcss-variables</div>\n<div class=\"bg-secondary bg-opacity-50\">tailwindcs"
},
{
"path": "__tests__/color-variable-helper.test.js",
"chars": 8405,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\nconst colorVaria"
},
{
"path": "__tests__/color-variable-helper2.test.html",
"chars": 337,
"preview": "<div class=\"bg-indigo-400\">tailwindcss-variables</div>\n<div class=\"bg-indigo-500\">tailwindcss-variables</div>\n<div class"
},
{
"path": "__tests__/css-selectors.test.html",
"chars": 164,
"preview": "<div id=\"app\"></div>\n<div class=\"container\">\n <div class=\"card\"></div>\n</div>\n<input type=\"text\" />\n<button type=\"submi"
},
{
"path": "__tests__/css-selectors.test.js",
"chars": 1740,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('css selec"
},
{
"path": "__tests__/dark-mode-to-root.test.html",
"chars": 78,
"preview": "<html class=\"dark custom-dark-selector\">\n<div class=\"container\"></div>\n</html>"
},
{
"path": "__tests__/dark-mode.test.html",
"chars": 141,
"preview": "<div class=\"dark custom-dark-selector\">\n <div class=\"container\"></div>\n</div>\n<div class=\"dark foo\">\n <div class=\"cont"
},
{
"path": "__tests__/dark-mode.test.js",
"chars": 15394,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('only dark"
},
{
"path": "__tests__/extend-colors.test.html",
"chars": 1019,
"preview": "<div class=\"bg-green\">tailwindcss-variables</div>\n<div class=\"bg-blue\">tailwindcss-variables</div>\n<div class=\"bg-red\">t"
},
{
"path": "__tests__/extend-colors.test.js",
"chars": 11374,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('extendCol"
},
{
"path": "__tests__/fallback.test.css",
"chars": 134,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .component .header {\n @apply text-r"
},
{
"path": "__tests__/fallback.test.html",
"chars": 406,
"preview": "<div class=\"bg-red-400\">tailwindcss-variables</div>\n<div class=\"bg-red-500\">tailwindcss-variables</div>\n<div class=\"bg-r"
},
{
"path": "__tests__/fallback.test.js",
"chars": 2346,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\nconst colorVaria"
},
{
"path": "__tests__/force-rgb.test.html",
"chars": 917,
"preview": "<div class=\"bg-green\">tailwindcss-variables</div>\n<div class=\"bg-red\">tailwindcss-variables</div>\n<div class=\"bg-red-400"
},
{
"path": "__tests__/force-rgb.test.js",
"chars": 13289,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\nconst colorVaria"
},
{
"path": "__tests__/format-variables.test.html",
"chars": 31,
"preview": "<button type=\"button\"></button>"
},
{
"path": "__tests__/format-variables.test.js",
"chars": 1793,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('format va"
},
{
"path": "__tests__/issues.test.html",
"chars": 533,
"preview": "<html data-mode=\"dark\" lang=\"en\">\n<body>\n<div class=\"shadow-xs dark:shadow-xs\"></div>\n<div class=\"shadow-sm dark:shadow-"
},
{
"path": "__tests__/issues.test.js",
"chars": 5130,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('issue 23'"
},
{
"path": "__tests__/nested-variables.test.html",
"chars": 88,
"preview": "<div class=\"container\">\n <div class=\"card\"></div>\n</div>\n<div class=\"card-body\"></div>\n"
},
{
"path": "__tests__/nested-variables.test.js",
"chars": 2631,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('nested va"
},
{
"path": "__tests__/plugin-api.test.html",
"chars": 181,
"preview": "<div class=\"admin\"></div>\n<div class=\"dark\"></div>\n<div class=\"form-select\">\n <div class=\"default-multi\"></div>\n <div "
},
{
"path": "__tests__/plugin-api.test.js",
"chars": 12578,
"preview": "const utils = require('./util/_utils')(__filename)\n\ntest('simple example with dark mode set to `media`', async () => {\n "
},
{
"path": "__tests__/readme.test.html",
"chars": 274,
"preview": "<html class=\"dark\">\n<button type=\"button\"></button>\n<div class=\"custom-dark-selector\">\n <div class=\"container\"></div>\n<"
},
{
"path": "__tests__/readme.test.js",
"chars": 12542,
"preview": "const plugin = require('tailwindcss/plugin')\nconst tailwindcssVariables = require('../src/index')\nconst variablesApi = r"
},
{
"path": "__tests__/test.stub",
"chars": 657,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('../jest/_utils')(__filename)\n\nit('test', asy"
},
{
"path": "__tests__/to-base.test.html",
"chars": 144,
"preview": "<html class=\"dark\" lang=\"\">\n<div class=\"text-red-400\">tailwindcss-variables</div>\n<div class=\"text-red-500\">tailwindcss-"
},
{
"path": "__tests__/to-base.test.js",
"chars": 6720,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('toBase - "
},
{
"path": "__tests__/use-host.test.html",
"chars": 30,
"preview": "<div class='container'></div>\n"
},
{
"path": "__tests__/use-host.test.js",
"chars": 2326,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('basic usa"
},
{
"path": "__tests__/util/_utils.js",
"chars": 2450,
"preview": "const tailwind = require('tailwindcss')\nconst snapshotDiff = require('snapshot-diff')\nconst postcss = require('postcss')"
},
{
"path": "__tests__/variable-prefix.test.html",
"chars": 29,
"preview": "<div class=\"container\"></div>"
},
{
"path": "__tests__/variable-prefix.test.js",
"chars": 1612,
"preview": "const tailwindcssVariables = require('../src/index')\nconst utils = require('./util/_utils')(__filename)\n\ntest('variable "
},
{
"path": "api.js",
"chars": 72,
"preview": "const pluginApi = require('./src/pluginApi')\nmodule.exports = pluginApi\n"
},
{
"path": "colorVariable.js",
"chars": 80,
"preview": "const helpers = require('./src/helpers')\nmodule.exports = helpers.colorVariable\n"
},
{
"path": "examples/.npmignore",
"chars": 0,
"preview": ""
},
{
"path": "examples/api-examples/advanced/components.js",
"chars": 335,
"preview": "module.exports = (theme) => ({\n select: {\n DEFAULT: {\n backgroundColor: 'var(--colors-prefix2-primary)',\n },"
},
{
"path": "examples/api-examples/advanced/index.js",
"chars": 1424,
"preview": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginThemes = require('./theme"
},
{
"path": "examples/api-examples/advanced/themes.js",
"chars": 581,
"preview": "module.exports = (theme) => ({\n themes: {\n DEFAULT: {\n colors: {\n primary: 'black',\n secondary: '"
},
{
"path": "examples/api-examples/readme-source/components.js",
"chars": 329,
"preview": "module.exports = (theme) => ({\n select: {\n DEFAULT: {\n backgroundColor: 'var(--forms-colors-primary)',\n },\n "
},
{
"path": "examples/api-examples/readme-source/index.html",
"chars": 140,
"preview": "<select class=\"form-select\"></select>\n<select class=\"form-select default-multi\"></select>\n<select class=\"form-select oth"
},
{
"path": "examples/api-examples/readme-source/index.js",
"chars": 995,
"preview": "const plugin = require('tailwindcss/plugin')\nconst _ = require('lodash')\nconst variablesApi = require('../../../api')\n//"
},
{
"path": "examples/api-examples/readme-source/tailwind.config.js",
"chars": 213,
"preview": "module.exports = {\n theme: {\n myPlugin: {\n options: {\n colors: {\n primary: 'indigo',\n }\n"
},
{
"path": "examples/api-examples/readme-source/themes.js",
"chars": 177,
"preview": "module.exports = (theme) => ({\n themes: {\n DEFAULT: {\n colors: {\n primary: 'black',\n secondary: '"
},
{
"path": "examples/api-examples/simple/index.js",
"chars": 1499,
"preview": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst variablesApi = require('../../."
},
{
"path": "examples/api-examples/with-components/components.js",
"chars": 335,
"preview": "module.exports = (theme) => ({\n select: {\n DEFAULT: {\n backgroundColor: 'var(--colors-prefix2-primary)',\n },"
},
{
"path": "examples/api-examples/with-components/index.js",
"chars": 1671,
"preview": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginComponents = require('./c"
},
{
"path": "examples/api-examples/with-components-null-selector/components.js",
"chars": 338,
"preview": "module.exports = (theme) => ({\n '.select': {\n DEFAULT: {\n backgroundColor: 'var(--colors-prefix2-primary)',\n "
},
{
"path": "examples/api-examples/with-components-null-selector/index.js",
"chars": 1668,
"preview": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginComponents = require('./c"
},
{
"path": "examples/api-examples/with-themes/index.js",
"chars": 1199,
"preview": "const plugin = require('tailwindcss/plugin')\nconst merge = require('lodash/merge')\nconst pluginThemes = require('./theme"
},
{
"path": "examples/api-examples/with-themes/themes.js",
"chars": 581,
"preview": "module.exports = (theme) => ({\n themes: {\n DEFAULT: {\n colors: {\n primary: 'black',\n secondary: '"
},
{
"path": "examples/color-variable-helper/clean.css",
"chars": 1493,
"preview": ":root {\n --colors-primary: #ff0;\n --colors-secondary: #000000;\n --colors-gray: #6B7280;\n --colors-blue: rgb("
},
{
"path": "examples/color-variable-helper/index.html",
"chars": 1784,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "examples/color-variable-helper/package.json",
"chars": 510,
"preview": "{\n \"name\": \"color-variable-helper\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx tail"
},
{
"path": "examples/color-variable-helper/style.css",
"chars": 9346,
"preview": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting elemen"
},
{
"path": "examples/color-variable-helper/tailwind.config.js",
"chars": 1637,
"preview": "// const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')\nconst colorVariable = require('../../c"
},
{
"path": "examples/color-variable-helper/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "examples/dark-custom-selector/clean.css",
"chars": 440,
"preview": ":root {\n --sizes-small: 1rem;\n --sizes-medium: 2rem;\n --sizes-large: 3rem;\n --colors-red-50: #ff3232;\n --"
},
{
"path": "examples/dark-custom-selector/index.html",
"chars": 1398,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"custom-dark-selector\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" co"
},
{
"path": "examples/dark-custom-selector/package.json",
"chars": 509,
"preview": "{\n \"name\": \"dark-custom-selector\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx tailw"
},
{
"path": "examples/dark-custom-selector/style.css",
"chars": 9870,
"preview": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting elemen"
},
{
"path": "examples/dark-custom-selector/tailwind.config.js",
"chars": 992,
"preview": "module.exports = {\n content: ['./index.html'],\n corePlugins: process.env.CLEAN ? [] : {},\n darkMode: ['class', '.cust"
},
{
"path": "examples/dark-custom-selector/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "examples/dark-with-class/clean.css",
"chars": 398,
"preview": ":root {\n --sizes-small: 1rem;\n --sizes-medium: 2rem;\n --sizes-large: 3rem;\n --colors-red-50: #ff3232;\n --"
},
{
"path": "examples/dark-with-class/index.html",
"chars": 1419,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "examples/dark-with-class/package.json",
"chars": 504,
"preview": "{\n \"name\": \"dark-with-class\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx tailwindcs"
},
{
"path": "examples/dark-with-class/style.css",
"chars": 9828,
"preview": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting elemen"
},
{
"path": "examples/dark-with-class/tailwind.config.js",
"chars": 966,
"preview": "module.exports = {\n content: ['./index.html'],\n corePlugins: process.env.CLEAN ? [] : {},\n darkMode: 'class',\n theme"
},
{
"path": "examples/dark-with-class/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "examples/dark-with-class-to-root/clean.css",
"chars": 408,
"preview": ":root {\n --sizes-small: 1rem;\n --sizes-medium: 2rem;\n --sizes-large: 3rem;\n --colors-red-50: #ff3232;\n --"
},
{
"path": "examples/dark-with-class-to-root/index.html",
"chars": 1395,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=dev"
},
{
"path": "examples/dark-with-class-to-root/package.json",
"chars": 512,
"preview": "{\n \"name\": \"dark-with-class-to-root\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx ta"
},
{
"path": "examples/dark-with-class-to-root/style.css",
"chars": 9838,
"preview": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting elemen"
},
{
"path": "examples/dark-with-class-to-root/tailwind.config.js",
"chars": 965,
"preview": "module.exports = {\n content: ['./index.html'],\n corePlugins: process.env.CLEAN ? [] : {},\n darkMode: 'class',\n theme"
},
{
"path": "examples/dark-with-class-to-root/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "examples/dark-with-media/clean.css",
"chars": 464,
"preview": ":root {\n --sizes-small: 1rem;\n --sizes-medium: 2rem;\n --sizes-large: 3rem;\n --colors-red-50: #ff3232;\n --"
},
{
"path": "examples/dark-with-media/index.html",
"chars": 1375,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "examples/dark-with-media/package.json",
"chars": 504,
"preview": "{\n \"name\": \"dark-with-media\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx tailwindcs"
},
{
"path": "examples/dark-with-media/style.css",
"chars": 9879,
"preview": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting elemen"
},
{
"path": "examples/dark-with-media/tailwind.config.js",
"chars": 923,
"preview": "module.exports = {\n content: ['./index.html'],\n corePlugins: process.env.CLEAN ? [] : {},\n darkMode: 'media',\n theme"
},
{
"path": "examples/dark-with-media/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "examples/prefix/clean.css",
"chars": 303,
"preview": ":root {\n --prefix-sizes-small: 1rem;\n --prefix-sizes-medium: 2rem;\n --prefix-sizes-large: 3rem;\n --prefix-co"
},
{
"path": "examples/prefix/index.html",
"chars": 1372,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "examples/prefix/package.json",
"chars": 495,
"preview": "{\n \"name\": \"prefix\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx tailwindcss build ."
},
{
"path": "examples/prefix/style.css",
"chars": 9722,
"preview": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting elemen"
},
{
"path": "examples/prefix/tailwind.config.js",
"chars": 649,
"preview": "module.exports = {\n content: ['./index.html'],\n corePlugins: process.env.CLEAN ? [] : {},\n darkMode: 'class',\n theme"
},
{
"path": "examples/prefix/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "examples/simple/clean.css",
"chars": 307,
"preview": ":root {\n --sizes-small: 1rem;\n --sizes-medium: 2rem;\n --sizes-large: 3rem;\n --sizes-0\\.5: 2px;\n --sizes-1\\.0-foo: 1"
},
{
"path": "examples/simple/index.html",
"chars": 1356,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "examples/simple/package.json",
"chars": 495,
"preview": "{\n \"name\": \"simple\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx tailwindcss build ."
},
{
"path": "examples/simple/style.css",
"chars": 9666,
"preview": "/*\n! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting elemen"
},
{
"path": "examples/simple/tailwind.config.js",
"chars": 703,
"preview": "module.exports = {\n content: ['./index.html'],\n corePlugins: process.env.CLEAN ? [] : {},\n darkMode: 'class',\n theme"
},
{
"path": "examples/simple/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "examples/use-host/clean.css",
"chars": 307,
"preview": ":host {\n --sizes-small: 1rem;\n --sizes-medium: 2rem;\n --sizes-large: 3rem;\n --sizes-0\\.5: 2px;\n --sizes-1\\.0-foo: 1"
},
{
"path": "examples/use-host/index.html",
"chars": 1968,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "examples/use-host/package.json",
"chars": 497,
"preview": "{\n \"name\": \"use-host\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build\": \"env NODE_ENV=production npx tailwindcss build"
},
{
"path": "examples/use-host/style.css",
"chars": 12685,
"preview": "/*\n! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting elem"
},
{
"path": "examples/use-host/tailwind.config.js",
"chars": 707,
"preview": "module.exports = {\n content: ['./index.html'],\n corePlugins: process.env.CLEAN ? [] : {},\n theme: {\n variables: (t"
},
{
"path": "examples/use-host/tailwind.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "package.json",
"chars": 2558,
"preview": "{\n \"name\": \"@mertasan/tailwindcss-variables\",\n \"version\": \"2.7.0\",\n \"description\": \"Easily create css variables witho"
},
{
"path": "scripts/build.js",
"chars": 1483,
"preview": "const fs = require('fs')\nconst postcss = require('postcss')\nconst tailwind = require('tailwindcss')\n\nfunction buildDistF"
},
{
"path": "src/helpers.js",
"chars": 1613,
"preview": "const startsWith = require('lodash/startsWith')\nconst mapValues = require('lodash/mapValues')\nconst isPlainObject = requ"
},
{
"path": "src/index.js",
"chars": 1911,
"preview": "const plugin = require('tailwindcss/plugin')\nconst isEmpty = require('lodash/isEmpty')\nconst isUndefined = require('loda"
},
{
"path": "src/pluginApi.js",
"chars": 1702,
"preview": "const fromPairs = require('lodash/fromPairs')\nconst toPairs = require('lodash/toPairs')\nconst merge = require('lodash/me"
},
{
"path": "src/utils.js",
"chars": 6145,
"preview": "const merge = require('lodash/merge')\nconst fromPairs = require('lodash/fromPairs')\nconst toPairs = require('lodash/toPa"
}
]
About this extraction
This page contains the full source code of the mertasan/tailwindcss-variables GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 127 files (301.4 KB), approximately 88.6k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.