tailwindcss-pseudo-elements - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

index.js

@@ -1,14 +0,25 @@
-const { pseudoElements, hasPluginFactory } = require('./lib')
+const { pseudoElements, pseudoClasses, hasPluginFactory } = require('./lib')
 
 function plugin({addVariant, e}) {
   const escape = hasPluginFactory ? e : (x => x)
-  pseudoElements.forEach(pseudo => {
-    addVariant(pseudo, ({modifySelectors, separator}) => {
+
+  pseudoElements.forEach(pelement => {
+    addVariant(pelement, ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `.${escape(`${pseudo}${separator}${className}`)}::${pseudo}`
+        return `.${escape(`${pelement}${separator}${className}`)}::${pelement}`
       })
     })
   })
+
+  pseudoClasses.forEach(pclass => {
+    pseudoElements.forEach(pelement => {
+      addVariant(`${pclass}_${pelement}`, ({modifySelectors, separator}) => {
+        modifySelectors(({className}) => {
+          return `.${escape(`${pclass}${separator}${pelement}${separator}${className}`)}:${pclass}::${pelement}`
+        })
+      })
+    })
+  })
 }
 
 module.exports = hasPluginFactory ? require('tailwindcss/plugin')(plugin) : plugin

lib.js

@@ -15,2 +15,36 @@ module.exports = {
 
+  pseudoClasses: [
+    'active',
+    'checked',
+    'disabled',
+    'empty',
+    'enabled',
+    'first-child',
+    'first-of-type',
+    'focus',
+    'hover',
+    'in-range',
+    'invalid',
+    // 'lang(language)',
+    'last-child',
+    'last-of-type',
+    'link',
+    // 'not(selector)',
+    // 'nth-child(n)',
+    // 'nth-last-child(n)',
+    // 'nth-last-of-type(n)',
+    // 'nth-of-type(n)',
+    'only-of-type',
+    'only-child',
+    'optional',
+    'out-of-range',
+    'read-only',
+    'read-write',
+    'required',
+    'root',
+    'target',
+    'valid',
+    'visite',
+  ],
+
   hasPluginFactory: function() {
@@ -17,0 +51,0 @@ try {

package.json

 {
   "name": "tailwindcss-pseudo-elements",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "TailwindCSS Plugin that adds variants of pseudo elements.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -24,5 +24,16 @@ # tailwindcss-pseudo-elements
 ```js
+const plugin = require("tailwindcss/plugin");
+
 module.exports = {
   variants: {
-    textColor: ["responsive", "hover", "focus", "before", "after"],
+    textColor: [
+      "responsive",
+      "hover",
+      "focus",
+      "before",
+      "after",
+      "hover_before",
+      "hover_after",
+      "focus_before",
+    ],
   },
@@ -40,5 +51,5 @@
       },
-      variants: ["before", "responsive"],
+      variants: ["before", "hover_before", "responsive"],
     }),
-    function ({ addUtilities }) {
+    plugin(function ({ addUtilities }) {
       addUtilities(
@@ -52,3 +63,3 @@ {
       );
-    },
+    }),
   ],
@@ -61,5 +72,10 @@ };
 ```html
-<div class="relative before:aspect-ratio-4/3 before:empty-content">
+<div
+  class="relative
+    before:aspect-ratio-4/3
+    hover:before:aspect-ratio-1/1
+    before:empty-content"
+>
   <img class="absolute pin w-full h-full" src="..." />
 </div>
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4944

increased by30.79%

Lines of code

76

increased by123.53%

Number of lines in readme file

78

increased by25.81%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes