archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #242 from tailwindcss/remove-hoverable-focusable

Browse Source 
[0.3] Remove hoverable and focusable at-rules in favor of variants at-rule
This commit is contained in:
Adam Wathan 2017-11-24 16:50:30 -05:00 committed by GitHub
commit 260ce829af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 0 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
__tests__/focusableAtRule.test.js
View File

@ -1,30 +0,0 @@
import postcss from 'postcss'
import plugin from '../src/lib/substituteFocusableAtRules'
import config from '../defaultConfig.stub.js'
const separator = config.options.separator
function run(input, opts = () => config) {
return postcss([plugin(opts)]).process(input)
}
test('it adds a focusable variant to each nested class definition', () => {
const input = `
@focusable {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.focus${separator}banana:focus { color: yellow; }
.focus${separator}chocolate:focus { color: brown; }
`
return run(input).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})

30
__tests__/hoverableAtRule.test.js
View File

@ -1,30 +0,0 @@
import postcss from 'postcss'
import plugin from '../src/lib/substituteHoverableAtRules'
import config from '../defaultConfig.stub.js'
const separator = config.options.separator
function run(input, opts = () => config) {
return postcss([plugin(opts)]).process(input)
}
test('it adds a hoverable variant to each nested class definition', () => {
const input = `
@hoverable {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.hover${separator}banana:hover { color: yellow; }
.hover${separator}chocolate:hover { color: brown; }
`
return run(input).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})

4
src/index.js
View File

@ -8,8 +8,6 @@ import registerConfigAsDependency from './lib/registerConfigAsDependency'
import substituteTailwindPreflightAtRule from './lib/substituteTailwindPreflightAtRule'
import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
import substituteTailwindUtilitiesAtRules from './lib/substituteTailwindUtilitiesAtRules'
import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
import substituteFocusableAtRules from './lib/substituteFocusableAtRules'
import substituteVariantsAtRules from './lib/substituteVariantsAtRules'
import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
import substituteScreenAtRules from './lib/substituteScreenAtRules'
@ -39,8 +37,6 @@ const plugin = postcss.plugin('tailwind', config => {
substituteTailwindPreflightAtRule(lazyConfig),
evaluateTailwindFunctions(lazyConfig),
substituteTailwindUtilitiesAtRules(lazyConfig),
substituteHoverableAtRules(lazyConfig),
substituteFocusableAtRules(lazyConfig),
substituteVariantsAtRules(lazyConfig),
substituteResponsiveAtRules(lazyConfig),
substituteScreenAtRules(lazyConfig),

19
src/lib/substituteFocusableAtRules.js
View File

@ -1,19 +0,0 @@
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${separator}${rule.selector.slice(1)}:focus`
})
atRule.before(atRule.clone().nodes)
atRule.after(clonedRule.nodes)
atRule.remove()
})
}
}

19
src/lib/substituteHoverableAtRules.js
View File

@ -1,19 +0,0 @@
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${separator}${rule.selector.slice(1)}:hover`
})
atRule.before(atRule.clone().nodes)
atRule.after(clonedRule.nodes)
atRule.remove()
})
}
}