@wordpress/scripts環境でPostCSSをカスタマイズする方法

yarn add -D postcss sass-loader postcss-loader autoprefixer css-declaration-sorter css-mqpacker postcss-combine-duplicated-selectors sort-css-media-queries

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const isProduction = process.env.NODE_ENV === 'production';
const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
const sortCssMediaQueries = require( 'sort-css-media-queries' );
const postcssPlugins = [
	[
		// 重複するプロパティをまとめる
		'postcss-combine-duplicated-selectors',
	],
	[
		// 重複するメディアクエリをまとめる
		'css-mqpacker',
		{
			// メディアクエリをソート
			sort: sortCssMediaQueries,
		},
	],
	[
		// CSSの属性をソート
		'css-declaration-sorter',
		{
			// ソート方式
			order: 'smacss', // alphabetical, smacss, concentric-css
		},
	],
	[
		// ベンダープレフィックスを付与
		'autoprefixer',
		{
			// CSSグリッドを使う
			grid: true,
		},
	],
];

module.exports = {
	...defaultConfig,
	module: {
		...defaultConfig.module,
		rules: [
			{
				test: /\.(sc|sa)ss$/,
				use: [
					{
						loader: MiniCSSExtractPlugin.loader,
					},
					{
						loader: require.resolve( 'css-loader' ),
						options: {
							sourceMap: ! isProduction,
						},
					},
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: postcssPlugins,
							},
						},
					},
					{
						loader: require.resolve( 'sass-loader' ),
						options: {
							sassOptions: {
								indentType: 'tab',
								indentWidth: 1,
								outputStyle: 'expanded',
								sourceMap: ! isProduction,
							},
						},
					},
				],
			},
		],
	},
};