import postcss from 'postcss' import postcssNested from 'postcss-nested' export 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, source: rule.source })) rule.remove() }) let plugin = (() => { if ( typeof opts === 'function' || (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin')) ) { 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, source: decl.source })) decl.remove() }) return root } }