Class shaker
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 35/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- css, typescript, vite
- 領域
- build-system, frontend
調査の方向性
まず、プラグインの Vite 統合と、JavaScript および CSS の出力段階を読みます。提案されている PurgeCSS のカスタムエクストラクターと、提案されている { shake: true } オプションを確認します。未使用の CSS Module クラスが、参照されているクラスを削除することなく削除され、その動作が Vite ビルドで検証されれば完了です。
索引モデルが issue の本文から書いたものです。
説明
One thing that surprised me about CSS Modules in Vite is that it doesn't automatically shake unreferenced classes.
.unused {
font-size: 42px;
}
.used {
font-size: 27px;
}
import { used } from './foo.module.css'
...
The .unused class will appear in the output.
I noticed that this plugin does not shake unused classes either, so I made a small postprocessor that does the job.
If this seems like a good idea, I wonder if it could be incorporated into this plugin somehow. Basically it scans through the JS files to gather possible class names (/"([A-Za-z_]{1,2})"/g) then uses PurgeCSS with a custom extractor to strip the unused classes.
I think this could be incorporated as a { shake: true } option for this plugin. Shaking would require hooking into the JS output from Vite, marking known class names as used, and then stripping the unused ones before outputting the final CSS.
import { readFileSync, writeFileSync } from 'fs'
import { ExtractorResultDetailed, PurgeCSS } from 'purgecss'
const tags = ['a', 'abbr', ...]
const purgeFromJs = (content: string): ExtractorResultDetailed => {
const regex = /"([A-Za-z_]{1,2})"/g
const matches: string[] = []
let match: RegExpExecArray | null
while ((match = regex.exec(content)) !== null) {
matches.push(match[1])
}
// console.log(`Possible classes (${matches.length}): ${matches.join(', ')}`)
return {
attributes: {
names: [],
values: [],
},
ids: [],
tags,
undetermined: [],
classes: matches,
}
}
const purgeCSSResult = await new PurgeCSS().purge({
content: ['dist/assets/*.js'],
css: ['dist/assets/*.css'],
extractors: [
{
extractor: purgeFromJs,
extensions: ['js'],
},
],
})
// process.exit(0)
purgeCSSResult.forEach((result) => {
const { css, file } = result
if (!file) return
const bytesBefore = Buffer.byteLength(readFileSync(file, 'utf-8'), 'utf-8')
const bytesAfter = Buffer.byteLength(css, 'utf-8')
console.log(`Writing optimized css: ${file}`)
writeFileSync(file, css)
console.log(`Reduced size from ${bytesBefore} to ${bytesAfter} bytes`)
})
- 主要言語
- CSS
- スター
- 48
- フォーク
- 5
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
simonwep/vite-plugin-optimize-css-modules のほかの issue
-
improvement
難易度 3/5 1〜2日 初心者へのやさしさ 42/100
simonwep/vite-plugin-optimize-css-modules#8 · コメント 6 件 ·
-
Tailwind Supportオープンquestion
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
simonwep/vite-plugin-optimize-css-modules#3 · コメント 1 件 ·
simonwep/vite-plugin-optimize-css-modules の issue をすべて見る
似ている issue
-
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
-
agent:Windows bug code-review MEDIUM tooling
難易度 2/5 1〜3時間 初心者へのやさしさ 83/100
mgradwohl/tasksmack#2960 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
Link Checker Reportオープンautomated issue linkchecker report
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
QuantEcon/lecture-dp#68 ·
-
Area: Instruments Bug Difficulty: Low Priority: Low
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
DouglasNeuroInformatics/OpenDataCapture#1824 ·
メンテナーはふだん 1 日以内に返信
-
package_info fails analysis with --incompatible_stop_exporting_build_file_path対応中かも @mkanat が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
bazelbuild/rules_license#184 ·