設定
PurgeCSSには、動作をカスタマイズできるオプションのリストがあります。カスタマイズにより、PurgeCSSのパフォーマンスと効率を向上させることができます。次のオプションを使用して設定ファイルを作成できます。
設定ファイル
設定ファイルは、シンプルなJavaScriptファイルです。デフォルトでは、JavaScript APIは`purgecss.config.js`を探します。
module.exports = {
content: ['index.html'],
css: ['style.css']
}
その後、設定ファイルを使用してPurgeCSSを使用できます。
const purgecss = await new PurgeCSS().purge()
// or use the path to the file as the only parameter
const purgecss = await new PurgeCSS().purge('./purgecss.config.js')
オプション
オプションは、次のタイプで定義されます。
interface UserDefinedOptions {
content: Array<string | RawContent>;
css: Array<string | RawCSS>;
defaultExtractor?: ExtractorFunction;
extractors?: Array<Extractors>;
fontFace?: boolean;
keyframes?: boolean;
output?: string;
rejected?: boolean;
rejectedCss?: boolean;
stdin?: boolean;
stdout?: boolean;
variables?: boolean;
safelist?: UserDefinedSafelist;
blocklist?: StringRegExpArray;
}
interface RawContent {
extension: string
raw: string
}
interface RawCSS {
raw: string
}
type StringRegExpArray = Array<RegExp | string>;
type ComplexSafelist = {
standard?: StringRegExpArray;
deep?: RegExp[];
greedy?: RegExp[];
variables?: StringRegExpArray;
keyframes?: StringRegExpArray;
};
type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;
- content
ファイル名の配列またはglobを使用して、PurgeCSSによって解析されるコンテンツを指定できます。ファイルはHTML、Pug、Bladeなどです。
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css']
})
PurgeCSSは生のコンテンツでも動作します。これを行うには、ファイル名の代わりに`raw`プロパティを持つオブジェクトを渡す必要があります。カスタムエクストラクタと正しく動作させるには、生のコンテンツと共に`extension`プロパティを渡す必要があります。
await new PurgeCSS().purge({
content: [
{
raw: '<html><body><div class="app"></div></body></html>',
extension: 'html'
},
'**/*.js',
'**/*.html',
'**/*.vue'
],
css: [
{
raw: 'body { margin: 0 }'
},
'css/app.css'
]
})
- css
contentと同様に、ファイル名の配列またはglobを使用して、PurgeCSSによって処理されるCSSを指定できます。
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css']
})
PurgeCSSは生のCSSでも動作します。これを行うには、ファイル名の代わりに`raw`プロパティを持つオブジェクトを渡す必要があります。
await new PurgeCSS().purge({
content: [
{
raw: '<html><body><div class="app"></div></body></html>',
extension: 'html'
},
'**/*.js',
'**/*.html',
'**/*.vue'
],
css: [
{
raw: 'body { margin: 0 }'
}
]
})
- defaultExtractor
PurgeCSSはニーズに合わせて調整できます。使用されていないCSSが多く削除されていないことに気付いた場合は、カスタムエクストラクタを使用することを検討してください。エクストラクタは、拡張子ファイルに基づいて使用できます。すべての種類のファイルで同じものを使用する場合は、`defaultExtractor`でエクストラクタを指定します。
await new PurgeCSS().purge({
// ...
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
- extractors
PurgeCSSはニーズに合わせて調整できます。使用されていないCSSが多く削除されていないことに気付いた場合は、カスタムエクストラクタを使用することを検討してください。使用可能なエクストラクタのリストがあります。これらはより高い精度と最適化を提供しますが、それらの動作はそれらに固有であり、理解が難しくなる可能性があります。
エクストラクタは、必ずしも必要ではない高度な最適化テクニックとして検討してください。
import purgeFromHTML from 'purge-from-html'
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
extractors: [
{
extractor: purgeFromHTML,
extensions: ['html']
},
{
extractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
extensions: ['vue', 'js']
}
]
})
エクストラクタの詳細については、こちらをご覧ください。
- fontFace (デフォルト: false)
CSSに未使用の@font-faceルールがある場合、`fontFace`オプションを`true`に設定することで削除できます。
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
fontFace: true
})
- keyframes (デフォルト: false)
animate.cssなどのCSSアニメーションライブラリを使用している場合、`keyframes`オプションを`true`に設定することで、使用されていないkeyframesを削除できます。
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
keyframes: true
})
- variables (デフォルト: false)
カスタムプロパティ（CSS変数）またはBootstrapなどのそれらを使用するライブラリを使用している場合、`variables`オプションを`true`に設定することで、使用されていないCSS変数を削除できます。
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
variables: true
})
- rejected (デフォルト: false)
削除されたリストをスキャンして、明らかに間違っているものがないかを確認する方が実用的である場合があります。それを行うには、`rejected`オプションを使用します。
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
rejected: true
})
- rejectedCss (デフォルト: false)
`rejectedCss`オプションを使用すると、破棄されたCSSを保持できます。
await new PurgeCSS().purge({
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
css: ['css/app.css'],
rejectedCss: true
})
- safelist
最終的なCSSに残すセレクトを選択的に指定できます。これは`safelist`オプションで行うことができます。
このオプションには2つの形式があります。
safelist: ['random', 'yep', 'button', /^nav-/]
この形式では、safelistは文字列または正規表現を受け入れる配列です。
複雑な形式は次のとおりです。
safelist: {
standard: ['random', 'yep', 'button', /^nav-/],
deep: [],
greedy: [],
keyframes: [],
variables: []
}
例
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: ['random', 'yep', 'button']
})
この例では、セレクト`.random`、`#yep`、`button`は最終的なCSSに残されます。
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: [/red$/]
})
この例では、`red`で終わるセレクト（例：`.bg-red`）は最終的なCSSに残されます。
- safelist.deep
`safelist.deep`を使用して、正規表現に基づいてセレクトとその子孫をセーフリストに登録できます。
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: {
deep: [/red$/]
}
})
この例では、`child-of-bg`が見つからなくても、`.bg-red .child-of-bg`などのセレクトは最終的なCSSに残されます。
- safelist.greedy
最後に、`safelist.greedy`を使用して、セレクトの一部が正規表現に一致する場合、セレクト全体をセーフリストに登録できます。
const purgecss = await new PurgeCSS().purge({
content: [],
css: [],
safelist: {
greedy: [/red$/]
}
})
この例では、`button`と`nonexistent-class`が見つからなくても、`button.bg-red.nonexistent-class`などのセレクトは最終的なCSSに残されます。
- blocklist
ブロックリストは、CSSセレクトが最終的な出力CSSに表示されないようにします。セレクトは、PurgeCSSによって使用されていると認識されていても削除されます。
blocklist: ['usedClass', /^nav-/]
nav-linksとusedClassはエクストラクタによって検出されても削除されます。
- skippedContentGlobs
`content`パラメータにglobを指定した場合、このオプションを使用して、スキャンされるファイルを特定のファイルまたはフォルダから除外できます。除外するアイテムに一致するglobの配列を渡します。（注：`content`がglobでない場合、このオプションは効果がありません）。
skippedContentGlobs: ['node_modules/**', 'components/**']
ここでは、PurgeCSSは"node_modules"と"components"フォルダ内の何もスキャンしません。
- dynamicAttributes
"aria-selected"、"data-selected"などのカスタムCSS属性セレクタを追加するためのオプションです。
dynamicAttributes: ["aria-selected"]