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

Make the hoverable, focusable and responsive separator (default '\:') configurable.

Browse source
This commit is contained in:
dumconstantin 2017-11-24 16:26:40 +02:00
parent 9c72969b7c
commit 013f845281
8 changed files with 48 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/lib/substituteFocusableAtRules.js
View file

@ -1,12 +1,13 @@
export default function() {
export default function(config) {
return function(css) {
const separator = config().options.separator
css.walkAtRules('focusable', atRule => {
const clonedRule = atRule.clone()
clonedRule.walkRules(rule => {
// Might be wise to error if the rule has multiple selectors,
// or weird compound selectors like .bg-blue>p>h1
rule.selector = `.focus\\:${rule.selector.slice(1)}:focus`
rule.selector = `.focus${separator}${rule.selector.slice(1)}:focus`
})
atRule.before(atRule.clone().nodes)

5
src/lib/substituteHoverableAtRules.js
View file

@ -1,12 +1,13 @@
export default function() {
export default function(config) {
return function(css) {
const separator = config().options.separator
css.walkAtRules('hoverable', atRule => {
const clonedRule = atRule.clone()
clonedRule.walkRules(rule => {
// Might be wise to error if the rule has multiple selectors,
// or weird compound selectors like .bg-blue>p>h1
rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
rule.selector = `.hover${separator}${rule.selector.slice(1)}:hover`
})
atRule.before(atRule.clone().nodes)

6
src/lib/substituteResponsiveAtRules.js
View file

@ -6,6 +6,7 @@ import buildMediaQuery from '../util/buildMediaQuery'
export default function(config) {
return function(css) {
const screens = config().screens
const separator = config().options.separator
const responsiveRules = []
let finalRules = []
@ -25,7 +26,10 @@ export default function(config) {
mediaQuery.append(
responsiveRules.map(rule => {
const cloned = rule.clone()
cloned.selectors = _.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`)
cloned.selectors = _.map(
rule.selectors,
selector => `.${screen}${separator}${selector.slice(1)}`
)
return cloned
})
)

14
src/lib/substituteVariantsAtRules.js
View file

@ -2,27 +2,29 @@ import _ from 'lodash'
import postcss from 'postcss'
const variantGenerators = {
hover: container => {
hover: (separator, container) => {
const cloned = container.clone()
cloned.walkRules(rule => {
rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
rule.selector = `.hover${separator}${rule.selector.slice(1)}:hover`
})
return cloned.nodes
},
focus: container => {
focus: (separator, container) => {
const cloned = container.clone()
cloned.walkRules(rule => {
rule.selector = `.focus\\:${rule.selector.slice(1)}:focus`
rule.selector = `.focus${separator}${rule.selector.slice(1)}:focus`
})
return cloned.nodes
},
}
export default function() {
export default function(config) {
const separator = config().options.separator
return function(css) {
css.walkAtRules('variants', atRule => {
const variants = postcss.list.comma(atRule.params)
@ -37,7 +39,7 @@ export default function() {
_.forEach(['focus', 'hover'], variant => {
if (variants.includes(variant)) {
atRule.before(variantGenerators[variant](atRule))
atRule.before(variantGenerators[variant](separator, atRule))
}
})