| [9af201e] | 1 | import postcss from 'postcss'
|
|---|
| 2 | import postcssNested from 'postcss-nested'
|
|---|
| 3 |
|
|---|
| 4 | export function nesting(opts = postcssNested) {
|
|---|
| 5 | return (root, result) => {
|
|---|
| 6 | root.walkAtRules('screen', (rule) => {
|
|---|
| 7 | rule.name = 'media'
|
|---|
| 8 | rule.params = `screen(${rule.params})`
|
|---|
| 9 | })
|
|---|
| 10 |
|
|---|
| 11 | root.walkAtRules('apply', (rule) => {
|
|---|
| 12 | rule.before(postcss.decl({ prop: '__apply', value: rule.params, source: rule.source }))
|
|---|
| 13 | rule.remove()
|
|---|
| 14 | })
|
|---|
| 15 |
|
|---|
| 16 | let plugin = (() => {
|
|---|
| 17 | if (
|
|---|
| 18 | typeof opts === 'function' ||
|
|---|
| 19 | (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin'))
|
|---|
| 20 | ) {
|
|---|
| 21 | return opts
|
|---|
| 22 | }
|
|---|
| 23 |
|
|---|
| 24 | if (typeof opts === 'string') {
|
|---|
| 25 | return require(opts)
|
|---|
| 26 | }
|
|---|
| 27 |
|
|---|
| 28 | if (Object.keys(opts).length <= 0) {
|
|---|
| 29 | return postcssNested
|
|---|
| 30 | }
|
|---|
| 31 |
|
|---|
| 32 | throw new Error('tailwindcss/nesting should be loaded with a nesting plugin.')
|
|---|
| 33 | })()
|
|---|
| 34 |
|
|---|
| 35 | postcss([plugin]).process(root, result.opts).sync()
|
|---|
| 36 |
|
|---|
| 37 | root.walkDecls('__apply', (decl) => {
|
|---|
| 38 | decl.before(postcss.atRule({ name: 'apply', params: decl.value, source: decl.source }))
|
|---|
| 39 | decl.remove()
|
|---|
| 40 | })
|
|---|
| 41 |
|
|---|
| 42 | /**
|
|---|
| 43 | * Use a private PostCSS API to remove the "clean" flag from the entire AST.
|
|---|
| 44 | * This is done because running process() on the AST will set the "clean"
|
|---|
| 45 | * flag on all nodes, which we don't want.
|
|---|
| 46 | *
|
|---|
| 47 | * This causes downstream plugins using the visitor API to be skipped.
|
|---|
| 48 | *
|
|---|
| 49 | * This is guarded because the PostCSS API is not public
|
|---|
| 50 | * and may change in future versions of PostCSS.
|
|---|
| 51 | *
|
|---|
| 52 | * See https://github.com/postcss/postcss/issues/1712 for more details
|
|---|
| 53 | *
|
|---|
| 54 | * @param {import('postcss').Node} node
|
|---|
| 55 | */
|
|---|
| 56 | function markDirty(node) {
|
|---|
| 57 | if (!('markDirty' in node)) {
|
|---|
| 58 | return
|
|---|
| 59 | }
|
|---|
| 60 |
|
|---|
| 61 | // Traverse the tree down to the leaf nodes
|
|---|
| 62 | if (node.nodes) {
|
|---|
| 63 | node.nodes.forEach((n) => markDirty(n))
|
|---|
| 64 | }
|
|---|
| 65 |
|
|---|
| 66 | // If it's a leaf node mark it as dirty
|
|---|
| 67 | // We do this here because marking a node as dirty
|
|---|
| 68 | // will walk up the tree and mark all parents as dirty
|
|---|
| 69 | // resulting in a lot of unnecessary work if we did this
|
|---|
| 70 | // for every single node
|
|---|
| 71 | if (!node.nodes) {
|
|---|
| 72 | node.markDirty()
|
|---|
| 73 | }
|
|---|
| 74 | }
|
|---|
| 75 |
|
|---|
| 76 | markDirty(root)
|
|---|
| 77 |
|
|---|
| 78 | return root
|
|---|
| 79 | }
|
|---|
| 80 | }
|
|---|