Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@mertasan/tailwindcss-variables

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mertasan/tailwindcss-variables - npm Package Compare versions

Comparing version
2.5.2
 to
2.6.0
+3
-0
__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>
+246
-13
__tests__/dark-mode.test.js

@@ -83,3 +83,3 @@ const tailwindcssVariables = require('../src/index')

test('if the `darkMode` is set to `media`, the `darkSelector` and `darkToRoot` options should not work', async () => {
test('if the `darkMode` is set to `media`, `darkToRoot` options should not work', async () => {
expect(

@@ -107,3 +107,2 @@ await utils.diffOnly({

tailwindcssVariables({
darkSelector: '.custom-dark-selector',
darkToRoot: true,

@@ -176,3 +175,3 @@ }),

content: [utils.content('dark-mode-to-root')],
darkMode: 'class',
darkMode: ['class', '.custom-dark-selector'],
theme: {

@@ -197,3 +196,2 @@ darkVariables: {

variablePrefix: 'my-prefix',
darkSelector: '.custom-dark-selector',
darkToRoot: true,

@@ -380,7 +378,7 @@ }),

test('variables and dark variables with custom darkSelector and `class` mode', async () => {
test('variables and dark variables with custom selector and `class` mode', async () => {
expect(
await utils.diffOnly({
content: [utils.content()],
darkMode: 'class',
darkMode: ['class', '.custom-dark-selector'],
theme: {

@@ -416,7 +414,3 @@ variables: {

plugins: [
tailwindcssVariables({
darkSelector: '.custom-dark-selector',
}),
],
plugins: [tailwindcssVariables()],
})

@@ -444,2 +438,242 @@ ).toMatchInlineSnapshot(`

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 () => {

@@ -511,3 +745,3 @@ expect(

content: [utils.content('dark-mode-to-root')],
darkMode: 'class',
darkMode: ['class', '.custom-dark-selector'],
theme: {

@@ -546,3 +780,2 @@ variables: {

variablePrefix: 'my-prefix',
darkSelector: '.custom-dark-selector',
darkToRoot: true,

@@ -549,0 +782,0 @@ }),

+1
-2
__tests__/issues.test.js

@@ -62,3 +62,3 @@ const tailwindcssVariables = require('../src/index')

content: [utils.content()],
darkMode: 'class',
darkMode: ['class', '[data-mode="dark"]'],
theme: {

@@ -81,3 +81,2 @@ variables: {

darkToRoot: true,
darkSelector: '[data-mode="dark"]',
colorVariables: true,

@@ -84,0 +83,0 @@ }),

+1
-2
__tests__/readme.test.js

@@ -130,3 +130,3 @@ const plugin = require('tailwindcss/plugin')

content: [utils.content()],
darkMode: 'class',
darkMode: ['class', '.custom-dark-selector'],
theme: {

@@ -177,3 +177,2 @@ variables: {

darkToRoot: false,
darkSelector: '.custom-dark-selector',
}),

@@ -180,0 +179,0 @@ ],

+4
-4
.github/workflows/build.yml

@@ -20,9 +20,9 @@ name: build

matrix:
node-version: [12.x, 15.x]
node-version: [16]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node ${{ matrix.node-version }}
uses: actions/setup-node@v2
uses: actions/setup-node@v3
with:

@@ -33,3 +33,3 @@ node-version: ${{ matrix.node-version }}

id: cache-build
uses: actions/cache@v2
uses: actions/cache@v3
with:

@@ -36,0 +36,0 @@ path: node_modules

+4
-4
.github/workflows/publish.yml

@@ -14,9 +14,9 @@ name: npm-publish

matrix:
node-version: [12]
node-version: [16]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
uses: actions/setup-node@v3
with:

@@ -29,3 +29,3 @@ node-version: ${{ matrix.node-version }}

id: cache-publish
uses: actions/cache@v2
uses: actions/cache@v3
with:

@@ -32,0 +32,0 @@ path: node_modules

+4
-13
.github/workflows/tests.yml

@@ -22,19 +22,10 @@ name: tests

steps:
- uses: actions/checkout@v3
- name: Use Node ${{ matrix.node-version }}
uses: actions/setup-node@v2
uses: actions/checkout@v3
- name: Setup node ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Use cached node_modules
id: npm-cache
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-${{ matrix.node-version }}-
${{ runner.os }}-node-
- name: Install dependencies

@@ -41,0 +32,0 @@ if: steps.npm-cache.outputs.cache-hit != 'true'

+1
-1
package.json
{
"name": "@mertasan/tailwindcss-variables",
"version": "2.5.2",
"version": "2.6.0",
"description": "Easily create css variables without the need for a css file!",

@@ -5,0 +5,0 @@ "main": "src/index.js",

+52
-11
README.md

@@ -11,7 +11,6 @@ <p>

This plugin allows you to configure CSS variables in the `tailwind.config.js`
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

@@ -24,3 +23,3 @@

- Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.
- If `darkMode` config are set as `class`, custom dark selector can be defined.
- 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.

@@ -181,12 +180,55 @@ - Prefix can be defined for variables. (It is useful when using the plugin API)

#### with the `darkToRoot` and `darkSelector` configurations
#### Custom dark selector
If the `darkMode`configuration is set as `'class'` in your tailwindcss configuration, you can change and customize the `darkToRoot` and `darkSelector` settings.
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
| Option | Type | Default | Description |
|-------------- |-------- |--------- |------------------------------------------------------------------------- |
| darkSelector | string | .dark | CSS selector used for Dark mode. |
| darkToRoot | bool | true | Does the selector defined as`darkSelector` being used as :root ? |
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

@@ -197,3 +239,3 @@ // tailwind.config.js

darkMode: 'class',
darkMode: ['class', '.custom-dark-selector'],

@@ -240,3 +282,2 @@ theme: {

darkToRoot: false,
darkSelector: '.custom-dark-selector',
})

@@ -243,0 +284,0 @@ ]

+53
-12
README.tr.md

@@ -11,4 +11,3 @@ <p>

Bu eklenti, tailwindcss için CSS değişkenlerini `tailwind.config.js` dosyası aracılığıyla kolayca yapılandırmaya
olanak sağlar.
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.

@@ -25,3 +24,3 @@ Kullanım şekli, tailwindcss'in varsayılan yapılandırmaları ile benzer şekildedir. Dark Mode için ayrı değişken

- Dark Mode değişkenleri, yapılandırmanızdaki `class` ya da `media` moduna göre otomatik tanımlanır.
- Yapılandırmadaki `darkMode` ayarı eğer `class` olarak belirtilmiş ise özel seçiciler tanımlanabilir.
- 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.

@@ -182,12 +181,55 @@ - Değişkenler için prefix tanımlaması yapılabilir. (plugin API için faydalı)

#### `darkToRoot` ve `darkSelector` ayarları ile
#### Özel Dark Mode Seçicisi
Eğer tailwindcss yapılandırmanızda `darkMode: 'class'` olarak tanımlıysa, eklentinin `darkToRoot` ve `darkSelector`
ayarlarını kullanarak özelleştirebilirsiniz.
[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.
| option | type | default | description |
|-------------- |-------- |--------- |------------------------------------------------------------------------- |
| darkSelector | string | .dark | Dark mode için kullanılan CSS seçici. |
| darkToRoot | bool | true | `darkSelector` ayarında tanımlanan seçici :root olarak mı kullanılıyor? |
```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

@@ -198,3 +240,3 @@ // tailwind.config.js

darkMode: 'class',
darkMode: ['class', '.custom-dark-selector'],

@@ -241,3 +283,2 @@ theme: {

darkToRoot: false,
darkSelector: '.custom-dark-selector',
})

@@ -244,0 +285,0 @@ ]

+27
-3
src/index.js
const plugin = require('tailwindcss/plugin')
const isEmpty = require('lodash/isEmpty')
const isUndefined = require('lodash/isUndefined')
const api = require('./pluginApi')

@@ -9,2 +10,13 @@ const has = require('lodash/has')

/**
* @typedef pluginOptions
* @property {Boolean} darkToRoot
* @property {Object} extendColors
* @property {Boolean} forceRGB
* @property {Boolean} toBase
* @property {Boolean} colorVariables
* @property {String} variablePrefix
* @property {String} darkSelector - @deprecated
*/
/**
* @typedef {Object} plugin

@@ -15,5 +27,7 @@ * @property {function} withOptions

module.exports = plugin.withOptions(
/**
* @param {pluginOptions} options
*/
function (options) {
return function ({ addBase, addComponents, theme, config }) {
let darkMode = config('darkMode')
let variables = theme('variables', {})

@@ -27,4 +41,14 @@ let darkVariables = theme('darkVariables', {})

if (!isEmpty(darkVariables) && (darkMode === 'class' || darkMode === 'media')) {
let getDarkVariables = api.darkVariables(darkVariables, options, darkMode)
if (isUndefined(options)) {
options = {}
}
let [mode, darkSelector = get(options, 'darkSelector', '.dark') ?? '.dark'] = [].concat(
config('darkMode', 'media')
)
options.darkSelector = darkSelector
if (!isEmpty(darkVariables) && ['class', 'media'].includes(mode)) {
let getDarkVariables = api.darkVariables(darkVariables, options, mode)
toBase ? addBase(getDarkVariables) : addComponents(getDarkVariables)

@@ -31,0 +55,0 @@ }

+5
-1
src/pluginApi.js

@@ -6,2 +6,3 @@ const fromPairs = require('lodash/fromPairs')

const _forEach = require('lodash/forEach')
const has = require('lodash/has')
const { setVariable, setDarkMediaVariable, setComponent, build, darkBuild, flattenOptions } = require('./utils')

@@ -18,6 +19,9 @@

const darkVariables = (variables, options, darkMode) => {
const darkVariables = (variables, options, darkMode = 'media') => {
let variableList = {}
if (darkMode === 'class' || darkMode === 'media') {
if (!has(options, 'darkSelector')) {
options.darkSelector = '.dark'
}
let data = darkBuild(options, darkMode, variables)

@@ -24,0 +28,0 @@ _forEach(data, (value, key) =>

+1
-4
src/utils.js

@@ -183,6 +183,3 @@ const merge = require('lodash/merge')

}
let darkSelector = get(options, 'darkSelector', '.dark')
if (!darkSelector) {
darkSelector = '.dark'
}
let darkSelector = get(options, 'darkSelector')
let darkToRoot = hasOwn(options, 'darkToRoot') ? options.darkToRoot : true

@@ -189,0 +186,0 @@