diff --git a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css index 28f535ded..a04ced715 100644 --- a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css +++ b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css @@ -28,4 +28,4 @@ .john { content: "wick"; -} \ No newline at end of file +} diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js index 27b25cf4b..8697f0f77 100644 --- a/src/lib/substituteResponsiveAtRules.js +++ b/src/lib/substituteResponsiveAtRules.js @@ -7,11 +7,12 @@ import buildMediaQuery from '../util/buildMediaQuery' export default function(config) { return function (css) { const screens = config().screens - const rules = [] + const responsiveRules = [] + let finalRules = [] css.walkAtRules('responsive', atRule => { const nodes = atRule.nodes - rules.push(...cloneNodes(nodes)) + responsiveRules.push(...cloneNodes(nodes)) atRule.before(nodes) atRule.remove() }) @@ -23,24 +24,27 @@ export default function(config) { }) mediaQuery.append( - rules.map(rule => { + responsiveRules.map(rule => { const cloned = rule.clone() cloned.selectors = _.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`) return cloned }) ) - let includesScreenUtilitiesExplicitly = false - css.walkAtRules('tailwind', atRule => { - if (atRule.params === 'screen-utilities') { - includesScreenUtilitiesExplicitly = true - atRule.replaceWith(mediaQuery) - } - }) - if(! includesScreenUtilitiesExplicitly) { - css.append(mediaQuery) + finalRules.push(mediaQuery) + }) + + let includesScreenUtilitiesExplicitly = false + css.walkAtRules('tailwind', atRule => { + if (atRule.params === 'screen-utilities') { + includesScreenUtilitiesExplicitly = true + atRule.replaceWith(finalRules) } }) + + if(! includesScreenUtilitiesExplicitly) { + css.append(finalRules) + } } }