Robin Malfait f63b4531f5
Add tailwindcss/nesting plugin (#4673)
* add nesting plugin

* rename @tailwindcss/nesting to tailwindcss/nesting

* ignore the built `nesting` plugin

* add a postcss7 compat version

* include `nesting` plugin when publishing

* add `build-plugins` script

This will allow us to keep the plugins in their dedicated folders +
tests + postcss7 compatibility files. However, when we copy over the
plugins to the root. For example `plugins/nesting/` -> `nesting/` we
skip files like `.test.js` and `.postcss7.js`.

* build plugins when running `prepublishOnly`

* improve compat mode

We will use a glob so that we can move all *.postcss7.* files to just
*.* likewise we will also backup to *.* to *.postcss8.* for restoring
purposes.

Concrete example:

- Current state:
  - index.js            // PostCSS 8 implementation
  - index.postcss7.js   // PostCSS 7 implementation

- Run "compat"
  - index.js            // PostCSS 7 implementation
  - index.postcss7.js   // PostCSS 7 implementation
  - index.postcss8.js   // PostCSS 8 implementation (Backup of original)

- Run "compat:restore"
  - index.js            // PostCSS 8 implementation
  - index.postcss7.js   // PostCSS 7 implementation
  - X index.postcss8.js // PostCSS 8 implementation (Removed)

* Update README.md

* ensure we `npm install` before publishing

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2021-06-17 09:43:52 -04:00

42 lines
1001 B
JavaScript

let postcss = require('postcss')
let postcssNested = require('postcss-nested')
module.exports = function nesting(opts = postcssNested) {
return (root, result) => {
root.walkAtRules('screen', (rule) => {
rule.name = 'media'
rule.params = `screen(${rule.params})`
})
root.walkAtRules('apply', (rule) => {
rule.before(postcss.decl({ prop: '__apply', value: rule.params }))
rule.remove()
})
let plugin = (() => {
if (typeof opts === 'function') {
return opts
}
if (typeof opts === 'string') {
return require(opts)
}
if (Object.keys(opts).length <= 0) {
return postcssNested
}
throw new Error('tailwindcss/nesting should be loaded with a nesting plugin.')
})()
postcss([plugin]).process(root, result.opts).sync()
root.walkDecls('__apply', (decl) => {
decl.before(postcss.atRule({ name: 'apply', params: decl.value }))
decl.remove()
})
return root
}
}