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

WordPressのブロックなどを開発するときに便利な@wordpres/scripts。基本的な制作環境がさくっと作れて重宝します。SCSSもコンパイルしてくれるのがとてもありがたい。しかし、大がかりなものを作ろうとしたときになどは、できあがりのCSSをもうちょっとこう、メディアクエリをまとめてほしいとかソートしてほしいとか、いろいろ必要な処理が出てきます。

そこで、@wordpress/scripts環境のPostCSSをカスタマイズして、理想のCSS出力を目指そう、といった内容です。

deやりたいこと

@wordpress/scriptsでコンパイルされるCSSの出力をカスタマイズする。PostCSSを使う。

前提

@wordpress/scriptsで環境が構築されていること

手順1 必要なパッケージのインストール

必須

  • postcss: PostCSS本体
  • sass-loader: SCSSをwebpackで使えるようにする
  • postcss-loader: PostCSSをwebpackで使えるようにする

任意。プロジェクトに必要なものを選んで使ってください。

  • autoprefixer: CSSプロパティのプレフィックスを自動でつける
  • css-declaration-sorter: CSSプロパティの属性をソートする
  • css-mqpacker: 重複するメディアクエリをひとつにまとめる
  • postcss-combine-duplicated-selectors: 重複するセレクタをひとつにまとめる
  • sort-css-media-queries: css-mqpackerのプラグイン。メディアクエリをソートする
yarn add -D postcss sass-loader postcss-loader autoprefixer css-declaration-sorter css-mqpacker postcss-combine-duplicated-selectors sort-css-media-queries

手順2 webpack.config.jsを作成

プロジェクトフォルダのルートに webpack.config.jsを作成すると、自動的にこちらを読み込んでくれます。内容は以下をコピペします。

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,
							},
						},
					},
				],
			},
		],
	},
};

defautConfig はオリジナルの設定情報が入っています。

postcssPlugins にPostCSS用のプラグインをまとめてあるので、こちらを適宜編集してください。

これでOK。SCSSをコンパイルするとカスタマイズされたCSSが生成されます。

といったところで以上です。さようなら!

  • ブックマーク
  • Feedly

この記事を書いた人

Takashi Fujisaki

10年の音楽制作屋さんを経て、2010〜 Webデザイン / フロントエンドエンジニア / ブロガーとして活動しています。WordPressテーマ・プラグイン制作やちょっとしたアプリ開発など。Appleと自転車とラーメンが好き。