enhance: tablerのCSSを使用されているクラスのみに限定

This commit is contained in:
kakkokari-gtyih 2025-01-25 17:12:09 +09:00
parent 0d6d24dd12
commit b254633abc
3 changed files with 11 additions and 6 deletions

View File

@ -9,7 +9,6 @@ import 'vite/modulepreload-polyfill';
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
await import('@tabler/icons-webfont/dist/tabler-icons.scss'); await import('@tabler/icons-webfont/dist/tabler-icons.scss');
} else { } else {
await import('icons-subsetter/built/tabler-icons-classes.css');
await import('icons-subsetter/built/tabler-icons-frontendEmbed.css'); await import('icons-subsetter/built/tabler-icons-frontendEmbed.css');
} }

View File

@ -9,7 +9,6 @@ import 'vite/modulepreload-polyfill';
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
await import('@tabler/icons-webfont/dist/tabler-icons.scss'); await import('@tabler/icons-webfont/dist/tabler-icons.scss');
} else { } else {
await import('icons-subsetter/built/tabler-icons-classes.css');
await import('icons-subsetter/built/tabler-icons-frontend.css'); await import('icons-subsetter/built/tabler-icons-frontend.css');
} }

View File

@ -27,9 +27,8 @@ async function main() {
rgMap.set(matches[1], matches[2]); rgMap.set(matches[1], matches[2]);
} }
// 3. tabler-icons-classes.cssから、@font-faceを削除して書き出し // 3. tabler-icons-classes.cssから、.tiのルールを抽出
const cssWithoutFontFace = css.replace(/@font-face\s*{[^}]*}/g, ''); const classTiBaseRule = css.match(/\.ti\s*{[^}]*}/)![0];
await fsp.writeFile('./built/tabler-icons-classes.css', cssWithoutFontFace);
// 4. フォールバック用のtabler-icons.woff2をコピー // 4. フォールバック用のtabler-icons.woff2をコピー
const fontPath = 'node_modules/@tabler/icons-webfont/dist/fonts/'; const fontPath = 'node_modules/@tabler/icons-webfont/dist/fonts/';
@ -110,9 +109,17 @@ async function main() {
src: url("./tabler-icons-${key}.woff2") format("woff2"); src: url("./tabler-icons-${key}.woff2") format("woff2");
unicode-range: ${unicodeRangeString}; unicode-range: ${unicodeRangeString};
}`); }`);
cssRules.push(classTiBaseRule);
// 使用されているアイコンのclassとの対応を追記
for (const icon of unicodeRangeValues.get(key)!) {
const iconClass = Array.from(rgMap.entries()).find(([_, unicode]) => parseInt(unicode, 16) === icon)![0];
cssRules.push(`.${iconClass}::before { content: "\\${icon.toString(16)}"; }`);
}
} }
await fsp.writeFile(`./built/tabler-icons-${key}.css`, cssRules.join('\n\n') + '\n'); await fsp.writeFile(`./built/tabler-icons-${key}.css`, cssRules.join('\n') + '\n');
})); }));
const end = performance.now(); const end = performance.now();