Zenn
💨

PurgeCssをバージョンアップしたら、ホワイトリストの設定が変わってて苦戦した話

2023/02/06に公開
Gulp
purgecss
tech

はじめに

開発環境でこんなん使って作ってた。

  • gulp@4.0.2
  • gulp-purgecss@0.21.0

でも、久々に開発環境を作る機会に出くわして、gulp-purgecss@3.0.0を入れたら、ホワイトリストの設定がすっかり変わってたのでメモ。

以前まで書いてたgulpタスク

export const stylusTask = () => {
`!${paths.stylusPath}/_*/*.styl`, `!${paths.stylusPath}/_*/**/*.styl`])
  return gulp.src([`${paths.stylusPath}/*.styl`, `!${paths.stylusPath}/_*/*.styl`, `!${paths.stylusPath}/_*/**/*.styl`])
    .pipe(plumber())
    .pipe(stylus({
      use: [axis(), jeet(), rupture()]
    }))
    .pipe(purgecss({
      content: [`${paths.distHtml}**/*.html`],
      whitelistPatterns: [/is(_|-)|remodal|slick|p-information|block-modal-square-cont|infoBox|setupBox|deviceList|infoSlider|c-tag--info|modalBox|c-modal|type--|no-scroll/]
    })).on('error', console.error.bind(console))
    .pipe(gulp.dest(`${paths.distCss}`))
    .pipe(browserSync.stream())
};

gulp-purgecss@3.0.0で同じことやろうとしたら、まぁ消える消える。
「えー…(´・ω:;.:...」ってなったので、ドキュメント見てみた。

ドキュメント見たよ

Purgecssのドキュメント

どうやら結構細かく指定できるようになってるっぽい。

.pipe(purgecss({
      content: [`dist/**/*.html`],
      safelist: {
        greedy: [/is(_|-)|swiper|c-icon|div/]
      }
    }))

感動ポイント1【contentオプションがPugも対象になってるぅ】

前回はこんなんなってなかった…気がする。
pugでできれば、htmlにコンパイルした後にそのhtmlを見て不要CSSを削除するーとかをしなくていいから、gulpタスクを並行して進められるし良き！！

解せぬ…

greedyのところに c-icon を含むものについては除外するってしているはずなのに、全然効いてくれなかった。

div[class^="c-icon--"]:before,
div[class*=" c-icon--"]:before {
  .......
}

何故(゜゜)？？
対処法としては設定に div を入れることで解消。
ちょっとモヤついているので引き続き調べる予定。。

GitHubで編集を提案

Discussion