| 1 |
const tailwind = require('./tailwind.config'); |
| 2 |
|
| 3 |
module.exports = ({ mode, file }) => ({ |
| 4 |
ident: 'postcss', |
| 5 |
sourceMap: mode !== 'production', |
| 6 |
plugins: [ |
| 7 |
require('postcss-import'), |
| 8 |
require('tailwindcss/nesting'), |
| 9 |
require('tailwindcss')({ |
| 10 |
...tailwind, |
| 11 |
// Scope the editor css separately from the frontend css. |
| 12 |
content: file.endsWith('editor.css') |
| 13 |
? ['./src/editor/**/*.{ts,tsx}'] |
| 14 |
: ['./src/front/**/*.{ts,tsx}'], |
| 15 |
important: |
| 16 |
tailwind.important + (file.endsWith('editor.css') ? '-editor' : ''), |
| 17 |
}), |
| 18 |
(css) => |
| 19 |
css.walkRules((rule) => { |
| 20 |
// Removes top level TW styles like *::before {} |
| 21 |
rule.selector.startsWith('*') && rule.remove(); |
| 22 |
}), |
| 23 |
// See: https://github.com/WordPress/gutenberg/blob/trunk/packages/postcss-plugins-preset/lib/index.js |
| 24 |
require('autoprefixer')({ grid: true }), |
| 25 |
!file.endsWith('editor.css') && require('postcss-safe-important'), |
| 26 |
mode === 'production' && |
| 27 |
// See: https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/config/webpack.config.js#L68 |
| 28 |
require('cssnano')({ |
| 29 |
preset: [ |
| 30 |
'default', |
| 31 |
{ |
| 32 |
discardComments: { |
| 33 |
removeAll: true, |
| 34 |
}, |
| 35 |
}, |
| 36 |
], |
| 37 |
}), |
| 38 |
], |
| 39 |
}); |
| 40 |
|
