From 586454263b66ead9c726daca53118ba711ea4496 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 7 Mar 2023 11:28:04 +0000 Subject: [PATCH] Simplify PostCSS config Removes workarounds previously needed for the webpack example --- postcss.config.mjs | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/postcss.config.mjs b/postcss.config.mjs index 62da3e739d..5a0bfbaebb 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -1,5 +1,3 @@ -import { parse } from 'path' - import autoprefixer from 'autoprefixer' import cssnano from 'cssnano' import cssnanoPresetDefault from 'cssnano-preset-default' @@ -20,25 +18,20 @@ import { isDev } from './tasks/task-arguments.mjs' * @param {import('postcss-load-config').ConfigContext} ctx - PostCSS context * @returns {import('postcss-load-config').Config} PostCSS config */ -export default function postcssConfig (ctx) { +export default ({ from = '', to = '', env = 'production' }) => { const plugins = [] - const syntax = ctx.to?.endsWith('.scss') ? scss : postcss - - // PostCSS 'from' (or webpack 'file') source path - // https://github.com/postcss/postcss-load-config#options - const { dir, name } = parse(ctx.from || ctx.file || '') - // IE8 stylesheets - const isIE8 = name?.endsWith('-ie8') || name?.endsWith('-ie8.min') + // Browserslist IE8 environment + if (from.includes('-ie8')) { + env = 'oldie' + } // Add vendor prefixes - plugins.push(autoprefixer({ - env: isIE8 ? 'oldie' : ctx.env - })) + plugins.push(autoprefixer({ env })) // Add review app auto-generated 'companion' classes for each pseudo-class // For example ':hover' and ':focus' classes to simulate form label states - if (minimatch(dir, '**/app/stylesheets')) { + if (minimatch(from, '**/app/stylesheets/*')) { plugins.push(pseudoclasses({ allCombinations: true, restrictTo: [ @@ -52,7 +45,7 @@ export default function postcssConfig (ctx) { } // Transpile CSS for Internet Explorer - if (isIE8) { + if (env === 'oldie') { plugins.push( unmq(), unopacity({ browsers: 'ie 8' }), @@ -72,6 +65,9 @@ export default function postcssConfig (ctx) { }) } + // Sass syntax support + const syntax = to.endsWith('.scss') ? scss : postcss + // Always minify CSS if (syntax !== scss) { plugins.push(cssnano({