Convert layers to control comments before processing @apply rules

Author: adamwathan

src/lib/convertLayerAtRulesToControlComments.js

@@ -0,0 +1,13 @@
+import postcss from 'postcss'
+
+export default function convertLayerAtRulesToControlComments() {
+  return function(css) {
+    css.walkAtRules('layer', atRule => {
+      const layer = atRule.params
+      atRule.before(postcss.comment({ text: `tailwind start ${layer}` }))
+      atRule.before(atRule.nodes)
+      atRule.before(postcss.comment({ text: `tailwind end ${layer}` }))
+      atRule.remove()
+    })
+  }
+}

src/lib/purgeUnusedStyles.js

@@ -5,40 +5,6 @@ import chalk from 'chalk'
 import { log } from '../cli/utils'
 import * as emoji from '../cli/emoji'
 
-function convertLayersToControlComments(css) {
-  css.walkAtRules('layer', atRule => {
-    const layer = atRule.params
-    atRule.before(postcss.comment({ text: `tailwind start ${layer}` }))
-    atRule.before(atRule.nodes)
-    atRule.before(postcss.comment({ text: `tailwind end ${layer}` }))
-    atRule.remove()
-  })
-}
-
-function convertControlCommentsToPurgeIgnoreComments(config) {
-  return function(css) {
-    const mode = _.get(config, 'purge.mode', 'conservative')
-
-    if (mode === 'conservative') {
-      css.prepend(postcss.comment({ text: 'purgecss start ignore' }))
-      css.append(postcss.comment({ text: 'purgecss end ignore' }))
-
-      css.walkComments(comment => {
-        switch (comment.text.trim()) {
-          case 'tailwind start utilities':
-            comment.text = 'purgecss end ignore'
-            break
-          case 'tailwind end utilities':
-            comment.text = 'purgecss start ignore'
-            break
-          default:
-            break
-        }
-      })
-    }
-  }
-}
-
 function removeTailwindComments(css) {
   css.walkComments(comment => {
     switch (comment.text.trim()) {
@@ -62,7 +28,7 @@ export default function purgeUnusedUtilities(config) {
   )
 
   if (!purgeEnabled) {
-    return postcss([convertLayersToControlComments, removeTailwindComments])
+    return removeTailwindComments
   }
 
   // Skip if `purge: []` since that's part of the default config
@@ -86,8 +52,27 @@ export default function purgeUnusedUtilities(config) {
   }
 
   return postcss([
-    convertLayersToControlComments,
-    convertControlCommentsToPurgeIgnoreComments(config),
+    function(css) {
+      const mode = _.get(config, 'purge.mode', 'conservative')
+
+      if (mode === 'conservative') {
+        css.prepend(postcss.comment({ text: 'purgecss start ignore' }))
+        css.append(postcss.comment({ text: 'purgecss end ignore' }))
+
+        css.walkComments(comment => {
+          switch (comment.text.trim()) {
+            case 'tailwind start utilities':
+              comment.text = 'purgecss end ignore'
+              break
+            case 'tailwind end utilities':
+              comment.text = 'purgecss start ignore'
+              break
+            default:
+              break
+          }
+        })
+      }
+    },
     removeTailwindComments,
     purgecss({
       content: Array.isArray(config.purge) ? config.purge : config.purge.content,

src/processTailwindFeatures.js

@@ -5,6 +5,7 @@ import substituteTailwindAtRules from './lib/substituteTailwindAtRules'
 import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import substituteVariantsAtRules from './lib/substituteVariantsAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
+import convertLayerAtRulesToControlComments from './lib/convertLayerAtRulesToControlComments'
 import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
 import purgeUnusedStyles from './lib/purgeUnusedStyles'
@@ -22,6 +23,7 @@ export default function(getConfig) {
       evaluateTailwindFunctions(config),
       substituteVariantsAtRules(config, processedPlugins),
       substituteResponsiveAtRules(config),
+      convertLayerAtRulesToControlComments(config),
       substituteScreenAtRules(config),
       substituteClassApplyAtRules(config, processedPlugins.utilities),
       purgeUnusedStyles(config),