@mertasan/tailwindcss-variables - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

__tests__/color-variable-helper.test.html

@@ -11,5 +11,2 @@ <div class="text-primary text-opacity-50">tailwindcss-variables</div>
 <div class="bg-yellow bg-opacity-50">tailwindcss-variables</div>
-<div class="bg-gradient-to-r from-red-400 to-transparent"></div>
-<div class="bg-gradient-to-r from-red-500 to-transparent"></div>
-<div class="bg-gradient-to-r from-red-600 to-transparent"></div>
 
@@ -16,0 +13,0 @@ <div class="bg-indigo-400">tailwindcss-variables</div>

__tests__/color-variable-helper.test.js

@@ -286,135 +286,1 @@ const tailwindcssVariables = require('../src/index')
 })
-
-test('colorVariable with gradient color stops', async () => {
-  expect(
-    await utils.diffOnly({
-      corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
-      content: [utils.content()],
-
-      darkMode: false,
-      theme: {
-        screens: false,
-        colors: {
-          red: {
-            400: colorVariable('var(--colors-red-400)'), // RGBA
-            500: colorVariable('var(--colors-red-500)'), // RGBA
-            600: colorVariable('var(--colors-red-600)'), // HEX
-          },
-        },
-
-        variables: {
-          DEFAULT: {
-            colors: {
-              red: {
-                400: 'rgba(254,0,0,1)',
-                500: 'rgba(254,0,0,0.5)',
-                600: '#a20606',
-              },
-            },
-          },
-        },
-      },
-
-      plugins: [
-        tailwindcssVariables({
-          colorVariables: true,
-        }),
-      ],
-    })
-  ).toMatchInlineSnapshot(`
-    "
-
-      
-      + :root {
-      +   --colors-red-400: rgba(254,0,0,1);
-      +   --colors-red-500: rgba(254,0,0,0.5);
-      +   --colors-red-600: #a20606;
-      +   --colors-red-400-rgb: 254,0,0;
-      +   --colors-red-500-rgb: 254,0,0;
-      +   --colors-red-600-rgb: 162,6,6
-      + }
-      + .from-red-400 {
-      +   --tw-gradient-from: rgb(var(--colors-red-400-rgb));
-      +   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400-rgb), 0))
-      + }
-      + .from-red-500 {
-      +   --tw-gradient-from: rgb(var(--colors-red-500-rgb));
-      +   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500-rgb), 0))
-      + }
-      + .from-red-600 {
-      +   --tw-gradient-from: rgb(var(--colors-red-600-rgb));
-      +   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600-rgb), 0))
-      + }
-      + .text-opacity-50 {
-      +   --tw-text-opacity: 0.5
-      + }
-
-    "
-  `)
-})
-
-test('colorVariable with gradient color stops (forceRGB)', async () => {
-  expect(
-    await utils.diffOnly({
-      corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
-      content: [utils.content()],
-
-      darkMode: false,
-      theme: {
-        screens: false,
-        colors: {
-          red: {
-            400: colorVariable('var(--colors-red-400)', true), // RGBA
-            500: colorVariable('var(--colors-red-500)', true), // RGBA
-            600: colorVariable('var(--colors-red-600)', true), // HEX
-          },
-        },
-
-        variables: {
-          DEFAULT: {
-            colors: {
-              red: {
-                400: 'rgba(254,0,0,1)',
-                500: 'rgba(254,0,0,0.5)',
-                600: '#a20606',
-              },
-            },
-          },
-        },
-      },
-
-      plugins: [
-        tailwindcssVariables({
-          colorVariables: true,
-          forceRGB: true,
-        }),
-      ],
-    })
-  ).toMatchInlineSnapshot(`
-    "
-
-      
-      + :root {
-      +   --colors-red-400: 254,0,0;
-      +   --colors-red-500: 254,0,0;
-      +   --colors-red-600: 162,6,6
-      + }
-      + .from-red-400 {
-      +   --tw-gradient-from: rgb(var(--colors-red-400));
-      +   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-400), 0))
-      + }
-      + .from-red-500 {
-      +   --tw-gradient-from: rgb(var(--colors-red-500));
-      +   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-500), 0))
-      + }
-      + .from-red-600 {
-      +   --tw-gradient-from: rgb(var(--colors-red-600));
-      +   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--colors-red-600), 0))
-      + }
-      + .text-opacity-50 {
-      +   --tw-text-opacity: 0.5
-      + }
-
-    "
-  `)
-})

package.json

 {
   "name": "@mertasan/tailwindcss-variables",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Easily create css variables without the need for a css file!",
@@ -46,3 +46,3 @@ "main": "src/index.js",
     "fs-extra": "^10.0.0",
-    "jest": "^27.4.3",
+    "jest": "^28.1.0",
     "postcss": "^8.4.4",
@@ -49,0 +49,0 @@ "postcss-import": "^14.1.0",

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

Worsened metrics

Total package byte prevSize

199817

-1.94%

Lines of code

3603

-3.22%

No dependency changes