@mertasan/tailwindcss-variables - npm Package Compare versions

Comparing version 2.0.1 to 2.2.0

__tests__/fallback.test.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .component .header {
+    @apply text-red-400;
+  }
+}

__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>

__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-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-gray {
+      +   background-color: var(--header-color, blue)
+      + }
+      + .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))
+      + }
+
+    "
+  `)
+})

__tests__/issues.test.js

@@ -45,1 +45,73 @@ const tailwindcssVariables = require('../src/index')
 })
+
+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',
+      theme: {
+        variables: {
+          DEFAULT: {
+            shadow,
+          },
+        },
+
+        darkVariables: {
+          DEFAULT: {
+            shadow,
+          },
+        },
+      },
+
+      plugins: [
+        tailwindcssVariables({
+          darkToRoot: true,
+          darkSelector: '[data-mode="dark"]',
+          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
+      + }
+
+    "
+  `)
+})

__tests__/util/_utils.js

@@ -5,2 +5,4 @@ const tailwind = require('tailwindcss')
 const path = require('path')
+const fs = require('fs')
+const atImport = require("postcss-import")
 
@@ -11,7 +13,15 @@ module.exports = (contentFile) => {
   utils.run = function(config = {}) {
-    let { currentTestName } = expect.getState();
+    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)
+  }
+
+  utils.runInline = (config) => {
     return postcss([tailwind({ corePlugins: [], ...config })])
       .process(['@tailwind base;', '@tailwind components;', '@tailwind utilities;'].join('\n'), {
-        // from: `${path.resolve(__filename)}?test=${currentTestName}`
-        from: undefined
+        from: undefined,
       })
@@ -21,3 +31,14 @@ .then((result) => result.css)
 
-  utils.diffOnly = async function (options = {}) {
+  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 = {}) {
     const [before, after] = await Promise.all([utils.run(), utils.run(options)])
@@ -24,0 +45,0 @@

.github/workflows/build.yml

@@ -31,11 +31,11 @@ name: build
       - name: Use cached node_modules
-        id: cache
+        id: cache-build
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-build
           restore-keys: |
             nodeModules-
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
+        if: steps.cache-build.outputs.cache-hit != 'true'
         run: npm install
@@ -42,0 +42,0 @@ env:

.github/workflows/publish.yml

@@ -27,11 +27,11 @@ name: npm-publish
       - name: Use cached node_modules
-        id: cache
+        id: cache-publish
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-publish
           restore-keys: |
             nodeModules-
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
+        if: steps.cache-publish.outputs.cache-hit != 'true'
         run: npm install
@@ -38,0 +38,0 @@ env:

.github/workflows/tests.yml

@@ -17,3 +17,2 @@ name: tests
     runs-on: ubuntu-latest
-
     strategy:
@@ -32,7 +31,7 @@ matrix:
       - name: Use cached node_modules
-        id: cache
+        id: cache-tests
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-tests
           restore-keys: |
@@ -42,3 +41,3 @@ nodeModules-
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
+        if: steps.cache-tests.outputs.cache-hit != 'true'
         run: npm install
@@ -45,0 +44,0 @@ env:

package.json

 {
   "name": "@mertasan/tailwindcss-variables",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Easily create css variables without the need for a css file!",
@@ -47,2 +47,3 @@ "main": "src/index.js",
     "postcss": "^8.4.4",
+    "postcss-import": "^14.1.0",
     "prettier": "^2.5.0",
@@ -49,0 +50,0 @@ "snapshot-diff": "^0.9.0",

src/helpers.js

 const startsWith = require('lodash/startsWith')
 const mapValues = require('lodash/mapValues')
 const isPlainObject = require('lodash/isPlainObject')
+const includes = require('lodash/includes')
 
+const withFallback = (variable, startsWithVar = false) => {
+  if (includes(variable, ',')) {
+    variable = variable.replace(',', '-rgb,')
+    return startsWithVar ? variable : variable + ')'
+  } else {
+    return startsWithVar ? variable.replace(')', '-rgb)') : variable + '-rgb'
+  }
+}
 const withRgb = (variable, forceRGB) => {
@@ -9,6 +18,6 @@ if (forceRGB) {
   }
-  return startsWith(variable, 'var') ? variable.replace(')', '-rgb)') : 'var(' + variable + '-rgb)'
+  return startsWith(variable, 'var') ? withFallback(variable, true) : 'var(' + withFallback(variable) + ')'
 }
 
-const colorVariable = (variable, forceRGB) => {
+const colorVariable = (variable, forceRGB = false) => {
   return function ({ opacityVariable, opacityValue }) {
@@ -15,0 +24,0 @@ if (opacityValue !== undefined) {

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

203367

3.61%

Number of package files

56

5.66%

Lines of code

3723

5.14%

Worsened metrics

Dev dependency count

12

9.09%

Number of low supply chain risk alerts

33

17.86%

No dependency changes