@mertasan/tailwindcss-variables - npm Package Compare versions

Comparing version 2.5.1 to 2.5.2

__tests__/color-variable-helper.test.js

@@ -91,9 +91,8 @@ const tailwindcssVariables = require('../src/index')
       + }
-      + .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-green {
+      +   background-color: var(--colors-green)
+      + }
       + .bg-red-400 {
@@ -110,4 +109,5 @@ +   --tw-bg-opacity: 1;
       + }
-      + .bg-green {
-      +   background-color: var(--colors-green)
+      + .bg-secondary {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
       + }
@@ -125,2 +125,6 @@ + .bg-white {
       + }
+      + .text-blue {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
+      + }
       + .text-primary {
@@ -130,6 +134,2 @@ +   --tw-text-opacity: 1;
       + }
-      + .text-blue {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
-      + }
       + .text-opacity-50 {
@@ -136,0 +136,0 @@ +   --tw-text-opacity: 0.5

__tests__/extend-colors.test.js

@@ -73,2 +73,6 @@ const tailwindcssVariables = require('../src/index')
       + }
+      + .bg-black {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+      + }
       + .bg-red {
@@ -96,9 +100,9 @@ +   --tw-bg-opacity: 1;
       + }
-      + .bg-black {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgb(0 0 0 / 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 {
@@ -126,6 +130,2 @@ +   --tw-text-opacity: 1;
       + }
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgb(0 0 0 / var(--tw-text-opacity))
-      + }
       + .text-opacity-50 {
@@ -204,2 +204,6 @@ +   --tw-text-opacity: 0.5
       + }
+      + .bg-black {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+      + }
       + .bg-red {
@@ -227,9 +231,9 @@ +   --tw-bg-opacity: 1;
       + }
-      + .bg-black {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgb(0 0 0 / 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 {
@@ -257,6 +261,2 @@ +   --tw-text-opacity: 1;
       + }
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgb(0 0 0 / var(--tw-text-opacity))
-      + }
       + .text-opacity-50 {
@@ -316,5 +316,2 @@ +   --tw-text-opacity: 0.5
       + }
-      + .bg-green {
-      +   background-color: var(--colors-green)
-      + }
       + .bg-blue {
@@ -324,2 +321,5 @@ +   --tw-bg-opacity: 1;
       + }
+      + .bg-green {
+      +   background-color: var(--colors-green)
+      + }
       + .bg-red {
@@ -336,5 +336,2 @@ +   --tw-bg-opacity: 1;
       + }
-      + .text-green {
-      +   color: var(--colors-green)
-      + }
       + .text-blue {
@@ -344,2 +341,5 @@ +   --tw-text-opacity: 1;
       + }
+      + .text-green {
+      +   color: var(--colors-green)
+      + }
       + .text-red {
@@ -405,5 +405,2 @@ +   --tw-text-opacity: 1;
       + }
-      + .bg-green {
-      +   background-color: var(--colors-green)
-      + }
       + .bg-blue {
@@ -413,2 +410,5 @@ +   --tw-bg-opacity: 1;
       + }
+      + .bg-green {
+      +   background-color: var(--colors-green)
+      + }
       + .bg-red {
@@ -425,5 +425,2 @@ +   --tw-bg-opacity: 1;
       + }
-      + .text-green {
-      +   color: var(--colors-green)
-      + }
       + .text-blue {
@@ -433,2 +430,5 @@ +   --tw-text-opacity: 1;
       + }
+      + .text-green {
+      +   color: var(--colors-green)
+      + }
       + .text-red {
@@ -435,0 +435,0 @@ +   --tw-text-opacity: 1;

__tests__/fallback.test.js

@@ -62,2 +62,5 @@ const tailwindcssVariables = require('../src/index')
       + }
+      + .bg-gray {
+      +   background-color: var(--header-color, blue)
+      + }
       + .bg-red-400 {
@@ -77,5 +80,2 @@ +   background-color: var(--colors-red-400 red)
       + }
-      + .bg-gray {
-      +   background-color: var(--header-color, blue)
-      + }
       + .bg-opacity-50 {
@@ -82,0 +82,0 @@ +   --tw-bg-opacity: 0.5

__tests__/force-rgb.test.js

@@ -61,2 +61,6 @@ const tailwindcssVariables = require('../src/index')
       + }
+      + .bg-black {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+      + }
       + .bg-red {
@@ -77,9 +81,9 @@ +   --tw-bg-opacity: 1;
       + }
-      + .bg-black {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgb(0 0 0 / 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 {
@@ -100,6 +104,2 @@ +   --tw-text-opacity: 1;
       + }
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgb(0 0 0 / var(--tw-text-opacity))
-      + }
       + .text-opacity-50 {
@@ -168,2 +168,6 @@ +   --tw-text-opacity: 0.5
       + }
+      + .bg-black {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+      + }
       + .bg-red-400 {
@@ -180,9 +184,9 @@ +   --tw-bg-opacity: 1;
       + }
-      + .bg-black {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgb(0 0 0 / 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-400 {
@@ -199,6 +203,2 @@ +   --tw-text-opacity: 1;
       + }
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgb(0 0 0 / var(--tw-text-opacity))
-      + }
       + .text-opacity-50 {
@@ -275,2 +275,10 @@ +   --tw-text-opacity: 0.5
       + }
+      + .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 {
@@ -292,13 +300,13 @@ +   --tw-bg-opacity: 1;
       + }
-      + .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-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 {
@@ -320,10 +328,2 @@ +   --tw-text-opacity: 1;
       + }
-      + .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-opacity-50 {
@@ -330,0 +330,0 @@ +   --tw-text-opacity: 0.5

__tests__/format-variables.test.js

@@ -48,9 +48,9 @@ const tailwindcssVariables = require('../src/index')
       + :root {
-      +   --colors-hello\\\\.-WORLD: 100%;
+      +   --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
+      +   --sizes-1\\.5: 1rem;
+      +   --sizes-foo2\\.0bar3\\.0: 2rem;
+      +   --sizes-baz-foo3\\.0bar4\\.0: 3rem
       + }
@@ -57,0 +57,0 @@ + [type='button'] {

__tests__/issues.test.js

@@ -185,7 +185,7 @@ const tailwindcssVariables = require('../src/index')
       + :root {
-      +   --sizes-0\\\\.5: 2px;
-      +   --sizes-3\\\\.5: 14px;
-      +   --sizes-6\\\\.5: 18px;
-      +   --sizes-1\\\\.0-foo: 1rem;
-      +   --sizes-1\\\\.0-2\\\\.4: 2rem
+      +   --sizes-0\\.5: 2px;
+      +   --sizes-3\\.5: 14px;
+      +   --sizes-6\\.5: 18px;
+      +   --sizes-1\\.0-foo: 1rem;
+      +   --sizes-1\\.0-2\\.4: 2rem
       + }
@@ -192,0 +192,0 @@

__tests__/readme.test.js

@@ -416,4 +416,4 @@ const plugin = require('tailwindcss/plugin')
       +   --colors-auto-dash: 100%;
-      +   --sizes-1\\\\.5: 1rem;
-      +   --sizes-xl-3\\\\.0: 2rem
+      +   --sizes-1\\.5: 1rem;
+      +   --sizes-xl-3\\.0: 2rem
       + }
@@ -420,0 +420,0 @@ + [type='button'] {

package.json

 {
   "name": "@mertasan/tailwindcss-variables",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Easily create css variables without the need for a css file!",
@@ -40,3 +40,3 @@ "main": "src/index.js",
   "devDependencies": {
-    "autoprefixer": "^10.4.11",
+    "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
@@ -47,8 +47,8 @@ "eslint": "^8.23.1",
     "fs-extra": "^10.0.0",
-    "jest": "^28.1.3",
-    "postcss": "^8.4.16",
+    "jest": "^29.4.3",
+    "postcss": "^8.4.21",
     "postcss-import": "^14.1.0",
     "prettier": "^2.5.0",
     "snapshot-diff": "^0.10.0",
-    "tailwindcss": "^3.0.11"
+    "tailwindcss": "^3.2.7"
   },
@@ -55,0 +55,0 @@ "peerDependencies": {

README.md

 <p>
-    <a href="https://github.com/mertasan/tailwindcss-variables/actions"><img src="https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests" alt="Test Status"></a>
-    <a href="https://github.com/mertasan/tailwindcss-variables/tree/master/examples"><img src="https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples" alt="Build Status"></a>
+    <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>
@@ -1192,11 +1192,10 @@ <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>
 
-| Source | State |
-| --- | --- |
-| [Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/examples) | ![Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples)	|
-| [Plugin API Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![API Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=api-examples) |
-| [Tests](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__) | ![Tests](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests) |
+| Source                                                                                                     | State                                                                                                                                            |
+|------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
+| [Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples)                         | ![Examples](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=examples)	        |
+| [Plugin API Examples](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![API Examples](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=api-examples) |
+| [Tests](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__)                           | ![Tests](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master&label=tests)               |
 
 > 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')`.
->
 
@@ -1203,0 +1202,0 @@

README.tr.md

 <p>
-    <a href="https://github.com/mertasan/tailwindcss-variables/actions"><img src="https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests" alt="Test Status"></a>
-    <a href="https://github.com/mertasan/tailwindcss-variables/tree/master/examples"><img src="https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples" alt="Build Status"></a>
+    <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>
@@ -1201,7 +1201,7 @@ <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>
 
-| Kaynak | Durum |
-| --- | --- |
-| [Örnekler](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/examples) | ![Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples)	|
-| [Plugin API örnekleri](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![API Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=api-examples) |
-| [Testler](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__) | ![Tests](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests) |
+| Kaynak                                                                                                      | Durum                                                                                                                                                    |
+|-------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| [Örnekler](https://github.com/mertasan/tailwindcss-variables/tree/master/examples)                          | ![Örnekler](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=examples)	                |
+| [Plugin API örnekleri](https://github.com/mertasan/tailwindcss-variables/tree/master/examples/api-examples) | ![Plugin API örnekleri](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/build.yml?branch=master&label=api-examples) |
+| [Testler](https://github.com/mertasan/tailwindcss-variables/tree/master/__tests__)                          | ![Testler](https://img.shields.io/github/actions/workflow/status/mertasan/tailwindcss-variables/tests.yml?branch=master&label=tests)                     |
 
@@ -1208,0 +1208,0 @@ > Örneklere ve testlere ait dosyalar pull-request, push, release vb. etkinliklerde otomatik olarak yeniden

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

212260

0.65%

Worsened metrics

Number of lines in readme file

1215

-0.08%

No dependency changes