wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Use root instead of array to unify code paths

Browse source
This commit is contained in:
Adam Wathan 2019-02-06 14:20:03 -05:00
parent faf2be163f
commit b544febfcb
2 changed files with 7 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
__tests__/responsiveAtRule.test.js
View file

@ -233,7 +233,7 @@ test('it can generate responsive variants for nested at-rules', () => {
})
})
test.only('it can generate responsive variants for deeply nested at-rules', () => {
test('it can generate responsive variants for deeply nested at-rules', () => {
const input = `
@responsive {
.banana { color: yellow; }

31
src/lib/substituteResponsiveAtRules.js
View file

@ -8,12 +8,12 @@ export default function(config) {
return function(css) {
const screens = config.screens
const separator = config.options.separator
const responsiveRules = []
const responsiveRules = postcss.root()
let finalRules = []
css.walkAtRules('responsive', atRule => {
const nodes = atRule.nodes
responsiveRules.push(...cloneNodes(nodes))
responsiveRules.append(...cloneNodes(nodes))
atRule.before(nodes)
atRule.remove()
})
@ -24,34 +24,15 @@ export default function(config) {
params: buildMediaQuery(screens[screen]),
})
mediaQuery.append(
// Filter out nested `atRules`; we'll process those separately
responsiveRules.filter(rule => rule.type !== 'atrule').map(rule => {
const cloned = rule.clone()
cloned.selectors = _.map(rule.selectors, selector =>
mediaQuery.append(_.tap(responsiveRules.clone(), clonedRoot => {
clonedRoot.walkRules(rule => {
rule.selectors = _.map(rule.selectors, selector =>
buildSelectorVariant(selector, screen, separator, message => {
throw rule.error(message)
})
)
return cloned
})
)
mediaQuery.append(
// Process nested `atRules`.
responsiveRules.filter(rule => rule.type === 'atrule').map(atRule => {
const clonedAtRule = atRule.clone()
clonedAtRule.nodes.forEach(rule => {
rule.selectors = _.map(rule.selectors, selector => {
const selectorVariant = buildSelectorVariant(selector, screen, separator, message => {
throw rule.error(message)
})
return selectorVariant
})
})
return clonedAtRule
})
)
}))
finalRules.push(mediaQuery)
})