tailwindcss-pseudo-elements - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

index.js

 const { pseudoElements, pseudoClasses, hasPluginFactory } = require('./lib')
 
-function plugin({addVariant, e}) {
-  const escape = hasPluginFactory ? e : (x => x)
+const plugin = ({ addVariant, e, config }) => {
+  const escape = hasPluginFactory ? e : (x) => x
+  const customPseudoElements = config
+    ? config('customPseudoElements') || []
+    : []
+  const customPseudoClasses = config ? config('customPseudoClasses') || [] : []
 
-  pseudoElements.forEach(pelement => {
-    addVariant(pelement, ({modifySelectors, separator}) => {
-      modifySelectors(({className}) => {
+  if (!Array.isArray(customPseudoElements)) {
+    throw new Error('`customElements` must be an array of string.')
+  }
+
+  if (!Array.isArray(customPseudoClasses)) {
+    throw new Error('`customClasses` must be an array of string.')
+  }
+
+  const mergedPseudoElements = Array.from(
+    new Set(pseudoElements.concat(customPseudoElements))
+  )
+  const mergedPseudoClasses = Array.from(
+    new Set(pseudoClasses.concat(customPseudoClasses))
+  )
+
+  mergedPseudoElements.forEach((pelement) => {
+    addVariant(pelement, ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
         return `.${escape(`${pelement}${separator}${className}`)}::${pelement}`
@@ -14,7 +33,9 @@ })
 
-  pseudoClasses.forEach(pclass => {
-    pseudoElements.forEach(pelement => {
-      addVariant(`${pclass}_${pelement}`, ({modifySelectors, separator}) => {
-        modifySelectors(({className}) => {
-          return `.${escape(`${pclass}${separator}${pelement}${separator}${className}`)}:${pclass}::${pelement}`
+  mergedPseudoClasses.forEach((pclass) => {
+    mergedPseudoElements.forEach((pelement) => {
+      addVariant(`${pclass}_${pelement}`, ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${escape(
+            `${pclass}${separator}${pelement}${separator}${className}`
+          )}:${pclass}::${pelement}`
         })
@@ -26,2 +47,4 @@ })
 
-module.exports = hasPluginFactory ? require('tailwindcss/plugin')(plugin) : plugin
+module.exports = hasPluginFactory
+  ? require('tailwindcss/plugin')(plugin)
+  : plugin

lib.js

@@ -0,13 +1,16 @@
+/* DON'T EDIT THIS FILE. This is generated by 'scripts/update-pseudos.js' */
 module.exports = {
   pseudoElements: [
     'after',
-    'backdrop ',
+    'backdrop',
     'before',
     'cue',
+    'cue-region',
     'first-letter',
     'first-line',
-    'grammar-error ',
-    'marker ',
-    'placeholder ',
-    'selection'
+    'grammar-error',
+    'marker',
+    'placeholder',
+    'selection',
+    'spelling-error',
   ],
@@ -17,35 +20,50 @@
     'active',
+    'any-link',
+    'blank',
     'checked',
+    'current',
+    'default',
+    'defined',
     'disabled',
+    'drop',
     'empty',
     'enabled',
+    'first',
     'first-child',
     'first-of-type',
+    'fullscreen',
+    'future',
     'focus',
+    'focus-visible',
+    'focus-within',
+    'host',
     'hover',
+    'indeterminate',
     'in-range',
     'invalid',
-    // 'lang(language)',
     'last-child',
     'last-of-type',
+    'left',
     'link',
-    // 'not(selector)',
-    // 'nth-child(n)',
-    // 'nth-last-child(n)',
-    // 'nth-last-of-type(n)',
-    // 'nth-of-type(n)',
+    'local-link',
+    'only-child',
     'only-of-type',
-    'only-child',
     'optional',
     'out-of-range',
+    'past',
+    'placeholder-shown',
     'read-only',
     'read-write',
     'required',
+    'right',
     'root',
+    'scope',
     'target',
+    'target-within',
+    'user-invalid',
     'valid',
-    'visite',
+    'visited',
   ],
 
-  hasPluginFactory: function() {
+  hasPluginFactory: (() => {
     try {
@@ -57,3 +75,3 @@ require.resolve('tailwindcss/plugin')
     return true
-  }()
+  })(),
 }

package.json

 {
   "name": "tailwindcss-pseudo-elements",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "TailwindCSS Plugin that adds variants of pseudo elements.",
@@ -20,9 +20,23 @@ "main": "index.js",
   "scripts": {
-    "test": "mocha"
+    "fix": "yarn fix:prettier && yarn fix:eslint",
+    "fix:eslint": "eslint . --fix",
+    "fix:prettier": "prettier --write .",
+    "lint": "yarn lint:prettier && yarn lint:eslint",
+    "lint:eslint": "eslint .",
+    "lint:prettier": "prettier .",
+    "pretest": "yarn update && yarn lint",
+    "update": "node scripts/update-pseudos.js",
+    "test": "mocha",
+    "test-only": "mocha",
+    "version": "yarn fix"
   },
   "devDependencies": {
+    "@croutonn/eslint-config": "^1.0.2",
     "chai": "^4.2.0",
-    "mocha": "^8.1.3",
-    "postcss": "^8.1.0",
-    "tailwindcss": "^1.8.10"
+    "eslint": "^7.12.0",
+    "mocha": "^8.2.0",
+    "postcss": "^8.1.4",
+    "prettier": "^2.1.2",
+    "puppeteer": "^5.4.0",
+    "tailwindcss": "^1.9.6"
   },
@@ -29,0 +43,0 @@ "peerDependencies": {

README.md

@@ -24,3 +24,3 @@ # tailwindcss-pseudo-elements
 ```js
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin')
 
@@ -30,24 +30,31 @@ module.exports = {
     textColor: [
-      "responsive",
-      "hover",
-      "focus",
-      "before",
-      "after",
-      "hover_before",
-      "hover_after",
-      "focus_before",
+      'responsive',
+      'hover',
+      'focus',
+      'before',
+      'after',
+      // If you want to combine it with a pseudo class,
+      // use `<pseudo-class>_<pseudo-element>`.
+      'hover_before',
+      'hover_after',
+      'focus_before',
+      'foo_bar',
     ],
   },
 
+  // You can set up your own pseudo-classes and pseudo-elements.
+  customPseudoClasses: ['foo'],
+  customPseudoElements: ['bar'],
+
   plugins: [
-    require("tailwindcss-pseudo-elements"),
+    require('tailwindcss-pseudo-elements'),
     // This plugin is useful in combination with tailwindcss-aspect-ratio.
-    require("tailwindcss-aspect-ratio")({
+    require('tailwindcss-aspect-ratio')({
       ratios: {
-        "16/9": [16, 9],
-        "4/3": [4, 3],
-        "3/2": [3, 2],
-        "1/1": [1, 1],
+        '16/9': [16, 9],
+        '4/3': [4, 3],
+        '3/2': [3, 2],
+        '1/1': [1, 1],
       },
-      variants: ["before", "hover_before", "responsive"],
+      variants: ['before', 'hover_before', 'responsive'],
     }),
@@ -57,11 +64,11 @@ plugin(function ({ addUtilities }) {
         {
-          ".empty-content": {
+          '.empty-content': {
             content: "''",
           },
         },
-        ["before"]
-      );
+        ['before']
+      )
     }),
   ],
-};
+}
 ```
@@ -68,0 +75,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8967

81.37%

Number of package files

9

80%

Lines of code

207

172.37%

Number of lines in readme file

85

8.97%

Worsened metrics

Dev dependency count

8

100%

Number of low supply chain risk alerts

2

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes