Simplify implementation, remove unnecessary new features

Author: adamwathan

__tests__/tailwindAtRule.test.js

@@ -11,11 +11,9 @@ function removeTailwindComments(css) {
       case 'tailwind start base':
       case 'tailwind start components':
       case 'tailwind start utilities':
-      case 'tailwind start screens':
       case 'tailwind end base':
       case 'tailwind end components':
       case 'tailwind end utilities':
-      case 'tailwind end screens':
         comment.remove()
         break
       default:

src/lib/purgeUnusedStyles.js

@@ -10,16 +10,12 @@ export default function(config) {
       theme: { screens },
       separator,
     } = config
-    const responsiveRules = {
-      components: postcss.root(),
-      utilities: postcss.root(),
-    }
+    const responsiveRules = postcss.root()
     const finalRules = []
 
     css.walkAtRules('responsive', atRule => {
-      const bucket = atRule.params === 'components' ? 'components' : 'utilities'
       const nodes = atRule.nodes
-      responsiveRules[bucket].append(...cloneNodes(nodes))
+      responsiveRules.append(...cloneNodes(nodes))
       atRule.before(nodes)
       atRule.remove()
     })
@@ -30,10 +26,8 @@ export default function(config) {
         params: buildMediaQuery(screens[screen]),
       })
 
-      mediaQuery.append(postcss.comment({ text: 'tailwind start components' }))
-
       mediaQuery.append(
-        _.tap(responsiveRules.components.clone(), clonedRoot => {
+        _.tap(responsiveRules.clone(), clonedRoot => {
           clonedRoot.walkRules(rule => {
             rule.selectors = _.map(rule.selectors, selector =>
               buildSelectorVariant(selector, screen, separator, message => {
@@ -44,24 +38,6 @@ export default function(config) {
         })
       )
 
-      mediaQuery.append(postcss.comment({ text: 'tailwind end components' }))
-
-      mediaQuery.append(postcss.comment({ text: 'tailwind start utilities' }))
-
-      mediaQuery.append(
-        _.tap(responsiveRules.utilities.clone(), clonedRoot => {
-          clonedRoot.walkRules(rule => {
-            rule.selectors = _.map(rule.selectors, selector =>
-              buildSelectorVariant(selector, screen, separator, message => {
-                throw rule.error(message)
-              })
-            )
-          })
-        })
-      )
-
-      mediaQuery.append(postcss.comment({ text: 'tailwind end utilities' }))
-
       finalRules.push(mediaQuery)
     })
 

src/lib/substituteResponsiveAtRules.js

@@ -49,58 +49,24 @@ export default function(
 
     let includesScreensExplicitly = false
 
-    function hasChildren(atRule) {
-      return atRule.nodes !== undefined && atRule.nodes.length > 0
-    }
-
-    function extractChildren(atRule, bucket) {
-      if (hasChildren(atRule)) {
-        atRule.walkAtRules('variants', variantsAtRule => {
-          const params = postcss.list.comma(variantsAtRule.params)
-          if (params.includes('responsive')) {
-            variantsAtRule.params = params.filter(p => p !== 'responsive').join(', ')
-            variantsAtRule.before(
-              postcss.atRule({ name: 'responsive', nodes: [variantsAtRule.clone()] })
-            )
-            variantsAtRule.remove()
-          }
-        })
-
-        atRule.walkAtRules('responsive', responsiveAtRule => {
-          responsiveAtRule.params = bucket
-        })
-
-        atRule.before(atRule.nodes)
-      }
-    }
-
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'preflight') {
         // prettier-ignore
         throw atRule.error("`@tailwind preflight` is not a valid at-rule in Tailwind v1.0, use `@tailwind base` instead.", { word: 'preflight' })
       }
 
       if (atRule.params === 'base') {
-        atRule.before(postcss.comment({ text: 'tailwind start base' }))
         atRule.before(updateSource(pluginBase, atRule.source))
-        extractChildren(atRule, 'base')
-        atRule.before(postcss.comment({ text: 'tailwind end base' }))
         atRule.remove()
       }
 
       if (atRule.params === 'components') {
-        atRule.before(postcss.comment({ text: 'tailwind start components' }))
         atRule.before(updateSource(pluginComponents, atRule.source))
-        extractChildren(atRule, 'components')
-        atRule.before(postcss.comment({ text: 'tailwind end components' }))
         atRule.remove()
       }
 
       if (atRule.params === 'utilities') {
-        atRule.before(postcss.comment({ text: 'tailwind start utilities' }))
         atRule.before(updateSource(pluginUtilities, atRule.source))
-        extractChildren(atRule, 'utilities')
-        atRule.before(postcss.comment({ text: 'tailwind end utilities' }))
         atRule.remove()
       }
     })

src/lib/substituteTailwindAtRules.js

@@ -24,6 +24,15 @@ export default function(getConfig) {
       substituteResponsiveAtRules(config),
       substituteScreenAtRules(config),
       substituteClassApplyAtRules(config, processedPlugins.utilities),
+      function(css) {
+        css.walkAtRules('bucket', atRule => {
+          const bucket = atRule.params
+          atRule.before(postcss.comment({ text: `tailwind start ${bucket}` }))
+          atRule.before(atRule.nodes)
+          atRule.before(postcss.comment({ text: `tailwind end ${bucket}` }))
+          atRule.remove()
+        })
+      },
       purgeUnusedStyles(config),
     ]).process(css, { from: _.get(css, 'source.input.file') })
   }