Skip to content

Commit cef0b84

Browse files
adamwathanadamwathan
committed
Reorganize prototype code
1 parent 577f536 commit cef0b84

File tree

7 files changed

+89
-69
lines changed

7 files changed

+89
-69
lines changed

‎__tests__/applyComplexClasses.test.js‎

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -655,7 +655,7 @@ describe('using apply with the prefix option', () => {
655655
},
656656
])
657657

658-
return run(input, config, () => processPlugins(corePlugins(config), config)).then(result => {
658+
return run(input, config).then(result => {
659659
expect(result.css).toMatchCss(expected)
660660
expect(result.warnings().length).toBe(0)
661661
})
@@ -679,7 +679,7 @@ describe('using apply with the prefix option', () => {
679679
},
680680
])
681681

682-
return run(input, config, () => processPlugins(corePlugins(config), config)).then(result => {
682+
return run(input, config).then(result => {
683683
expect(result.css).toMatchCss(expected)
684684
expect(result.warnings().length).toBe(0)
685685
})
@@ -697,7 +697,7 @@ describe('using apply with the prefix option', () => {
697697
},
698698
])
699699

700-
return run(input, config, () => processPlugins(corePlugins(config), config)).catch(e => {
700+
return run(input, config).catch(e => {
701701
expect(e).toMatchObject({ name: 'CssSyntaxError' })
702702
})
703703
})
@@ -720,7 +720,7 @@ describe('using apply with the prefix option', () => {
720720
},
721721
])
722722

723-
return run(input, config, () => processPlugins(corePlugins(config), config)).then(result => {
723+
return run(input, config).then(result => {
724724
expect(result.css).toMatchCss(expected)
725725
expect(result.warnings().length).toBe(0)
726726
})
@@ -744,7 +744,7 @@ describe('using apply with the prefix option', () => {
744744
},
745745
])
746746

747-
return run(input, config, () => processPlugins(corePlugins(config), config)).then(result => {
747+
return run(input, config).then(result => {
748748
expect(result.css).toMatchCss(expected)
749749
expect(result.warnings().length).toBe(0)
750750
})
@@ -764,16 +764,62 @@ describe('using apply with the prefix option', () => {
764764

765765
expect.assertions(1)
766766

767-
return run(input, config, () => processPlugins(corePlugins(config), config)).catch(e => {
767+
return run(input, config).catch(e => {
768768
expect(e).toMatchObject({
769769
name: 'CssSyntaxError',
770770
reason: 'The `mt-4` class does not exist, but `tw-mt-4` does. Did you forget the prefix?',
771771
})
772772
})
773773
})
774+
775+
test('you can apply classes with important and a prefix enabled', () => {
776+
const input = `
777+
.foo { @apply tw-mt-4; }
778+
`
779+
780+
const expected = `
781+
.foo { margin-top: 1rem; }
782+
`
783+
784+
const config = resolveConfig([
785+
{
786+
...defaultConfig,
787+
prefix: 'tw-',
788+
important: true,
789+
},
790+
])
791+
792+
return run(input, config).then(result => {
793+
expect(result.css).toMatchCss(expected)
794+
expect(result.warnings().length).toBe(0)
795+
})
796+
})
797+
798+
test('you can apply classes with an important selector and a prefix enabled', () => {
799+
const input = `
800+
.foo { @apply tw-mt-4; }
801+
`
802+
803+
const expected = `
804+
.foo { margin-top: 1rem; }
805+
`
806+
807+
const config = resolveConfig([
808+
{
809+
...defaultConfig,
810+
prefix: 'tw-',
811+
important: '#app',
812+
},
813+
])
814+
815+
return run(input, config).then(result => {
816+
expect(result.css).toMatchCss(expected)
817+
expect(result.warnings().length).toBe(0)
818+
})
819+
})
774820
})
775821

776-
test.skip('you can apply utility classes when a selector is used for the important option', () => {
822+
test('you can apply utility classes when a selector is used for the important option', () => {
777823
const input = `
778824
.foo {
779825
@apply mt-8 mb-8;
@@ -794,30 +840,7 @@ test.skip('you can apply utility classes when a selector is used for the importa
794840
},
795841
])
796842

797-
return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
798-
expect(result.css).toMatchCss(expected)
799-
expect(result.warnings().length).toBe(0)
800-
})
801-
})
802-
803-
test.skip('you can apply utility classes without using the given prefix even if important (selector) is used', () => {
804-
const input = `
805-
.foo { @apply .tw-mt-4 .mb-4; }
806-
`
807-
808-
const expected = `
809-
.foo { margin-top: 1rem; margin-bottom: 1rem; }
810-
`
811-
812-
const config = resolveConfig([
813-
{
814-
...defaultConfig,
815-
prefix: 'tw-',
816-
important: '#app',
817-
},
818-
])
819-
820-
return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
843+
return run(input, config).then(result => {
821844
expect(result.css).toMatchCss(expected)
822845
expect(result.warnings().length).toBe(0)
823846
})

‎src/featureFlags.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,7 @@ export function issueFlagNotices(config) {
7070
.map(s => chalk.cyan(s))
7171
.join(', ')
7272

73-
console.log()
74-
log.info(`You have opted-in to future-facing breaking changes: ${changes}`)
73+
log.info(`\nYou have opted-in to future-facing breaking changes: ${changes}`)
7574
log.info(
7675
'These changes are stable and will be the default behavior in the next major version of Tailwind.'
7776
)
@@ -82,8 +81,7 @@ export function issueFlagNotices(config) {
8281
.map(s => chalk.yellow(s))
8382
.join(', ')
8483

85-
console.log()
86-
log.warn(`You have enabled experimental features: ${changes}`)
84+
log.warn(`\nYou have enabled experimental features: ${changes}`)
8785
log.warn(
8886
'Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.'
8987
)
@@ -94,8 +92,7 @@ export function issueFlagNotices(config) {
9492
.map(s => chalk.magenta(s))
9593
.join(', ')
9694

97-
console.log()
98-
log.risk(`There are upcoming breaking changes: ${changes}`)
95+
log.risk(`\nThere are upcoming breaking changes: ${changes}`)
9996
log.risk(
10097
'We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.'
10198
)

‎src/flagged/applyComplexClasses.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,11 +210,11 @@ function processApplyAtRules(css, lookupTree, config) {
210210
afterRule,
211211
]
212212

213-
const root = _.tap(postcss.root({ nodes: rulesToInsert }), root =>
213+
const { nodes } = _.tap(postcss.root({ nodes: rulesToInsert }), root =>
214214
root.walkDecls(d => (d.important = important))
215215
)
216216

217-
const mergedRules = mergeAdjacentRules(rule, root.nodes)
217+
const mergedRules = mergeAdjacentRules(rule, nodes)
218218

219219
inject.remove()
220220
rule.after(mergedRules)

‎src/lib/applyImportantConfiguration.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default function applyImportantConfiguration(_config) {
2+
return function(css) {
3+
css.walkRules(rule => {
4+
const important = rule.__tailwind ? rule.__tailwind.important : false
5+
6+
if (!important) {
7+
return
8+
}
9+
10+
if (typeof important === 'string') {
11+
rule.selectors = rule.selectors.map(selector => {
12+
return `${rule.__tailwind.important} ${selector}`
13+
})
14+
} else {
15+
rule.walkDecls(decl => (decl.important = true))
16+
}
17+
})
18+
}
19+
}

‎src/lib/purgeUnusedStyles.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import chalk from 'chalk'
55
import { log } from '../cli/utils'
66
import * as emoji from '../cli/emoji'
77

8-
function removeTailwindComments(css) {
8+
function removeTailwindMarkers(css) {
9+
css.walkAtRules('tailwind', rule => rule.remove())
910
css.walkComments(comment => {
1011
switch (comment.text.trim()) {
1112
case 'tailwind start components':
@@ -28,7 +29,7 @@ export default function purgeUnusedUtilities(config) {
2829
)
2930

3031
if (!purgeEnabled) {
31-
return removeTailwindComments
32+
return removeTailwindMarkers
3233
}
3334

3435
// Skip if `purge: []` since that's part of the default config
@@ -48,7 +49,7 @@ export default function purgeUnusedUtilities(config) {
4849
log(
4950
chalk.white('\n https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css')
5051
)
51-
return removeTailwindComments
52+
return removeTailwindMarkers
5253
}
5354

5455
return postcss([
@@ -73,7 +74,7 @@ export default function purgeUnusedUtilities(config) {
7374
})
7475
}
7576
},
76-
removeTailwindComments,
77+
removeTailwindMarkers,
7778
purgecss({
7879
content: Array.isArray(config.purge) ? config.purge : config.purge.content,
7980
defaultExtractor: content => {

‎src/processTailwindFeatures.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
88
import convertLayerAtRulesToControlComments from './lib/convertLayerAtRulesToControlComments'
99
import substituteScreenAtRules from './lib/substituteScreenAtRules'
1010
import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
11+
import applyImportantConfiguration from './lib/applyImportantConfiguration'
1112
import purgeUnusedStyles from './lib/purgeUnusedStyles'
1213

1314
import corePlugins from './corePlugins'
@@ -40,9 +41,7 @@ export default function(getConfig) {
4041
convertLayerAtRulesToControlComments(config),
4142
substituteScreenAtRules(config),
4243
substituteClassApplyAtRules(config, getProcessedPlugins),
43-
function(css) {
44-
css.walkAtRules('tailwind', rule => rule.remove())
45-
},
44+
applyImportantConfiguration(config),
4645
purgeUnusedStyles(config),
4746
]).process(css, { from: _.get(css, 'source.input.file') })
4847
}

‎src/util/processPlugins.js‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import parseObjectStyles from '../util/parseObjectStyles'
99
import prefixSelector from '../util/prefixSelector'
1010
import wrapWithVariants from '../util/wrapWithVariants'
1111
import cloneNodes from '../util/cloneNodes'
12-
import increaseSpecificity from '../util/increaseSpecificity'
13-
import selectorParser from 'postcss-selector-parser'
1412

1513
function parseStyles(styles) {
1614
if (!Array.isArray(styles)) {
@@ -20,14 +18,6 @@ function parseStyles(styles) {
2018
return _.flatMap(styles, style => (style instanceof Node ? style : parseObjectStyles(style)))
2119
}
2220

23-
function containsClass(value) {
24-
return selectorParser(selectors => {
25-
let classFound = false
26-
selectors.walkClasses(() => (classFound = true))
27-
return classFound
28-
}).transformSync(value)
29-
}
30-
3121
function wrapWithLayer(rules, layer) {
3222
return postcss
3323
.atRule({
@@ -102,19 +92,10 @@ export default function(plugins, config) {
10292
rule.selector = applyConfiguredPrefix(rule.selector)
10393
}
10494

105-
if (options.respectImportant && _.get(config, 'important')) {
106-
if (config.important === true) {
107-
rule.walkDecls(decl => (decl.important = true))
108-
} else if (typeof config.important === 'string') {
109-
if (containsClass(config.important)) {
110-
throw rule.error(
111-
`Classes are not allowed when using the \`important\` option with a string argument. Please use an ID instead.`
112-
)
113-
}
114-
115-
rule.selectors = rule.selectors.map(selector => {
116-
return increaseSpecificity(config.important, selector)
117-
})
95+
if (options.respectImportant && config.important) {
96+
rule.__tailwind = {
97+
...rule.__tailwind,
98+
important: config.important,
11899
}
119100
}
120101
})

0 commit comments

Comments
 (0)