| 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 + |
| 17 |
(file.endsWith('editor.css') ? '-editor' : ''), |
| 18 |
}), |
| 19 |
(css) => |
| 20 |
css.walkRules((rule) => { |
| 21 |
// Removes top level TW styles like *::before {} |
| 22 |
rule.selector.startsWith('*') && rule.remove(); |
| 23 |
|
| 24 |
// This will allow users to override something like |
| 25 |
// padding within the block styles |
| 26 |
if (file.endsWith('style.css')) { |
| 27 |
// This appends the :not() exception to padding and margins |
| 28 |
if (new RegExp('[:]?[^a-z]-?p[a-z]?-.+').test(rule)) { |
| 29 |
rule.selector += ':not([style*="padding"])'; |
| 30 |
} |
| 31 |
if (new RegExp('[:]?[^a-z]-?m[a-z]?-.+').test(rule)) { |
| 32 |
rule.selector += ':not([style*="margin"])'; |
| 33 |
} |
| 34 |
} |
| 35 |
}), |
| 36 |
// See: https://github.com/WordPress/gutenberg/blob/trunk/packages/postcss-plugins-preset/lib/index.js |
| 37 |
require('autoprefixer')({ grid: true }), |
| 38 |
!file.endsWith('editor.css') && require('postcss-safe-important'), |
| 39 |
mode === 'production' && |
| 40 |
// See: https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/config/webpack.config.js#L68 |
| 41 |
require('cssnano')({ |
| 42 |
preset: [ |
| 43 |
'default', |
| 44 |
{ |
| 45 |
discardComments: { |
| 46 |
removeAll: true, |
| 47 |
}, |
| 48 |
}, |
| 49 |
], |
| 50 |
}), |
| 51 |
], |
| 52 |
}); |
| 53 |
|
