ビルド環境

@kamado-io/style-compilerを通してPostCSSを利用してCSS変換を行います。CSSはPostCSSのみを使用します。

kamado.config.tsで設定を行います。

import type { UserConfig } from 'kamado/config';

import path from 'node:path';

import { styleCompiler } from '@kamado-io/style-compiler';

export const config: UserConfig = {
	compilers: {
		style: styleCompiler({
			alias: {
				'@': path.resolve(import.meta.dirname, '__assets', '_libs'),
			},
		}),
	},
};

export default config;

パスエイリアス

aliasオプションでパスエイリアスを設定できます。PostCSSの@importで使用されます。

styleCompiler({
	alias: {
		'@': path.resolve(import.meta.dirname, '__assets', '_libs'),
	},
})

ベンダープレフィックス

Autoprefixerを利用するのでベンダープレフィックス付きのプロパティは必要ありません。

selector {
	transition: opacity 300ms;
	-webkit-transition: opacity 300ms; /* ❌ 不要 */
	-moz-transition: opacity 300ms; /* ❌ 不要 */
}

ただしCSSの標準規格でないものについては必要なケースがあります。Stylelintはその点を考慮して警告を出すので心配はありません。

selector {
	-moz-osx-font-smoothing: grayscale; /* ✅ ブラウザ固有のプロパティのためプレフィックは必要 */
	-webkit-font-smoothing: antialiased; /* ✅ ブラウザ固有のプロパティのためプレフィックは必要 */
}

🔧 自動修正可能

このルールはStylelintによって自動修正されます。