Respect user prefix by default when creating component classes

Author: adamwathan

__tests__/processPlugins.test.js

@@ -616,7 +616,7 @@ test('plugins respect prefix and important options by default when adding utilit
   `)
 })
 
-test("component declarations are not affected by the 'prefix' option", () => {
+test("component declarations respect the 'prefix' option by default", () => {
   const [components] = processPluginsWithValidConfig({
     plugins: [
       function({ addComponents }) {
@@ -632,6 +632,32 @@ test("component declarations are not affected by the 'prefix' option", () => {
     },
   })
 
+  expect(css(components)).toMatchCss(`
+    .tw-btn-blue {
+      background-color: blue
+    }
+  `)
+})
+
+test("component declarations can optionally ignore 'prefix' option", () => {
+  const [components] = processPluginsWithValidConfig({
+    plugins: [
+      function({ addComponents }) {
+        addComponents(
+          {
+            '.btn-blue': {
+              backgroundColor: 'blue',
+            },
+          },
+          { respectPrefix: false }
+        )
+      },
+    ],
+    options: {
+      prefix: 'tw-',
+    },
+  })
+
   expect(css(components)).toMatchCss(`
     .btn-blue {
       background-color: blue
@@ -672,7 +698,8 @@ test("plugins can apply the user's chosen prefix to components manually", () =>
               backgroundColor: 'blue',
             },
           },
-        })
+          { respectPrefix: false }
+        )
       },
     ],
     options: {
@@ -792,7 +819,8 @@ test('prefix will prefix all classes in a selector', () => {
               backgroundColor: 'blue',
             },
           },
-        })
+          { respectPrefix: false }
+        )
       },
     ],
     options: {

src/util/processPlugins.js

@@ -46,8 +46,18 @@ export default function(config) {
 
         pluginUtilities.push(wrapWithVariants(styles.nodes, options.variants))
       },
-      addComponents: components => {
-        pluginComponents.push(...parseStyles(components))
+      addComponents: (components, options) => {
+        options = Object.assign({ respectPrefix: true }, options)
+
+        const styles = postcss.root({ nodes: parseStyles(components) })
+
+        styles.walkRules(rule => {
+          if (options.respectPrefix) {
+            rule.selector = prefixSelector(config.options.prefix, rule.selector)
+          }
+        })
+
+        pluginComponents.push(...styles.nodes)
       },
     })
   })