feat: Change how plug-in options are set

BREAKING CHANGE: Change how plug-in options are set

Author: croutonn

README.md

@@ -42,12 +42,16 @@ module.exports = {
     },
   },
 
-  // You can set up your own pseudo-classes and pseudo-elements.
-  customPseudoClasses: ['foo'],
-  customPseudoElements: ['bar'],
-
   plugins: [
-    require('tailwindcss-pseudo-elements'),
+    require('tailwindcss-pseudo-elements')({
+      // You can set up your own pseudo-classes and pseudo-elements. (string[])
+      customPseudoClasses: ['foo'],
+      customPseudoElements: ['bar'],
+      // Configuration of the Content Property Utilities (boolean | { prefix: string })
+      contentUtilities: {
+        prefix: 'tw-content',
+      },
+    }),
     // This plugin is useful in combination with tailwindcss-aspect-ratio.
     require('tailwindcss-aspect-ratio')({
       ratios: {

index.js

@@ -3,16 +3,12 @@ const tailwindcssPlugin = require('tailwindcss/plugin')
 const addContentUtilities = require('./content-utilities')
 const { pseudoElements, pseudoClasses } = require('./lib')
 
-const plugin = (options = {}) => {
-  const { contentUtilities = true } = options
-
-  return tailwindcssPlugin(({ addUtilities, addVariant, e, config }) => {
-    const customPseudoElements = config
-      ? config('customPseudoElements') || []
-      : []
-    const customPseudoClasses = config
-      ? config('customPseudoClasses') || []
-      : []
+const plugin = tailwindcssPlugin.withOptions((options = {}) => {
+  return ({ addUtilities, addVariant, e }) => {
+    const customPseudoElements = options.customPseudoElements || []
+    const customPseudoClasses = options.customPseudoClasses || []
+    const contentUtilities =
+      options.contentUtilities || options.contentUtilities !== false
 
     if (!Array.isArray(customPseudoElements)) {
       throw new Error('`customElements` must be an array of string.')
@@ -62,7 +58,7 @@ const plugin = (options = {}) => {
         pseudoClasses: mergedPseudoClasses,
       })
     }
-  })
-}
+  }
+})
 
 module.exports = plugin

test/plugin.js

@@ -2,6 +2,8 @@ const { assert } = require('chai')
 const postcss = require('postcss')
 const tailwindcss = require('tailwindcss')
 
+const plugin = require('..')
+
 const baseConfig = require('./tailwind.config')
 
 const createProcessor = (config = {}) => {
@@ -55,21 +57,23 @@ describe('with pseudo-classes', () => {
 })
 
 describe('with configuration', () => {
-  it('@tailwind', async () => {
+  it('Turn off the Content Property Utilities', async () => {
     const testData = `@tailwind utilities;`
-    const { css } = await createProcessor().process(testData, {
+    const options = {
+      customPseudoClasses: ['foo'],
+      customPseudoElements: ['bar'],
+      contentUtilities: false,
+    }
+    const { css } = await createProcessor({
+      plugins: [plugin(options)],
+    }).process(testData, {
       from: '',
       to: '',
     })
-    assert.include(css, '.foo\\:bar\\:text-black:foo::bar')
-  })
 
-  it('@variants', async () => {
-    const testData = `@variants foo_bar{.text-blue{color:blue}}`
-    const { css } = await createProcessor().process(testData, {
-      from: '',
-      to: '',
-    })
-    assert.include(css, '.foo\\:bar\\:text-blue:foo::bar')
+    assert.notInclude(
+      css,
+      '.content-before::before {\n  content: attr(tw-content-before)\n}'
+    )
   })
 })

test/tailwind.config.js

@@ -12,7 +12,10 @@ module.exports = {
   modules: {
     textColors: ['before', 'after', 'hover_before', 'hover_after', 'foo_bar'],
   },
-  plugins: [plugin()],
-  customPseudoClasses: ['foo'],
-  customPseudoElements: ['bar'],
+  plugins: [
+    plugin({
+      customPseudoClasses: ['foo'],
+      customPseudoElements: ['bar'],
+    }),
+  ],
 }