Fix issue where inserting extra PurgeCSS control comments could break integrated PurgeCSS support (#2331)

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing new yet!
+- Fix [issue](https://github.com/tailwindlabs/tailwindcss/issues/2258) where inserting extra PurgeCSS control comments could break integrated PurgeCSS support
 
 ## [1.8.3] - 2020-09-05
 

__tests__/purgeUnusedStyles.test.js

@@ -195,19 +195,19 @@ test('custom css in a layer is purged by default when using layers mode', () =>
       ])
         .process(
           `
-        @tailwind base;
+          @tailwind base;
 
-        @tailwind components;
+          @tailwind components;
 
-        @layer components {
-          .example {
-            @apply font-bold;
-            color: theme('colors.red.500');
+          @layer components {
+            .example {
+              @apply font-bold;
+              color: theme('colors.red.500');
+            }
           }
-        }
 
-        @tailwind utilities;
-      `,
+          @tailwind utilities;
+        `,
           { from: null }
         )
         .then(result => {
@@ -411,6 +411,43 @@ test('does not purge components when mode is conservative', () => {
   )
 })
 
+test('extra purgecss control comments can be added manually', () => {
+  return inProduction(
+    suppressConsoleLogs(() => {
+      const input = `
+        @tailwind base;
+
+        /* purgecss start ignore */
+        .btn {
+          background: red;
+        }
+        /* purgecss end ignore */
+
+        @tailwind components;
+        @tailwind utilities;
+      `
+
+      return postcss([
+        tailwind({
+          ...config,
+          purge: {
+            layers: ['utilities'],
+            content: [path.resolve(`${__dirname}/fixtures/**/*.html`)],
+          },
+        }),
+      ])
+        .process(input, { from: null })
+        .then(result => {
+          const rules = extractRules(result.root)
+
+          expect(rules).toContain('.btn')
+          expect(rules).toContain('.container')
+          assertPurged(result)
+        })
+    })
+  )
+})
+
 test(
   'does not purge except in production',
   suppressConsoleLogs(() => {

src/lib/purgeUnusedStyles.js

@@ -77,10 +77,18 @@ export default function purgeUnusedUtilities(config, configChanged) {
           ? ['utilities']
           : _.get(config, 'purge.layers', ['base', 'components', 'utilities'])
 
-      css.prepend(postcss.comment({ text: 'purgecss start ignore' }))
-      css.append(postcss.comment({ text: 'purgecss end ignore' }))
-
       css.walkComments(comment => {
+        switch (comment.text.trim()) {
+          case `purgecss start ignore`:
+            comment.before(postcss.comment({ text: 'purgecss end ignore' }))
+            break
+          case `purgecss end ignore`:
+            comment.before(postcss.comment({ text: 'purgecss end ignore' }))
+            comment.text = 'purgecss start ignore'
+            break
+          default:
+            break
+        }
         layers.forEach(layer => {
           switch (comment.text.trim()) {
             case `tailwind start ${layer}`:
@@ -94,6 +102,9 @@ export default function purgeUnusedUtilities(config, configChanged) {
           }
         })
       })
+
+      css.prepend(postcss.comment({ text: 'purgecss start ignore' }))
+      css.append(postcss.comment({ text: 'purgecss end ignore' }))
     },
     removeTailwindMarkers,
     purgecss({