feat: ✨ optimize css sizes
Lucas Colombo
11 months ago
parent
b40f501fca
commit
c909a416b3
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,16 @@
|
||||
import { optimizeCss } from "./tasks/optimize-css.js";
|
||||
import { cwd } from 'process';
|
||||
import { join } from 'path';
|
||||
|
||||
const distPath = join(cwd(), 'dist');
|
||||
|
||||
// run the optimization creating a .min.css file for each .css file in the dist folder
|
||||
// useful to check issues with the css files optimization
|
||||
// (in order to use this script, you need to first build the project removing the
|
||||
// optimization step from the build.js file)
|
||||
optimizeCss(distPath, false).then(() => {
|
||||
console.log('Optimization completed');
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
@ -0,0 +1,111 @@
|
||||
import { join } from 'path';
|
||||
import { Logger } from '../utils/logger.js';
|
||||
import { readFileSync, readdirSync } from 'fs';
|
||||
import * as csstree from 'css-tree';
|
||||
import { writeFile } from 'fs/promises';
|
||||
|
||||
const logger = new Logger('build', 'info', 'brightMagenta');
|
||||
|
||||
function getcCssFiles(distPath, path) {
|
||||
try {
|
||||
return readdirSync(join(distPath, path))
|
||||
.filter((fn) => fn.endsWith('.css') && !fn.endsWith('.min.css'))
|
||||
.map((file) => ({
|
||||
name: file.replace('.css', ''),
|
||||
path: join(distPath, path, file),
|
||||
}));
|
||||
} catch (err) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function optimizeCss(distPath, replace = true) {
|
||||
// get the css files in the dist folder
|
||||
const cssFiles = getcCssFiles(distPath, 'public/assets/css');
|
||||
|
||||
for (const file of cssFiles) {
|
||||
logger.info(`Sanitizing ${file.name} css file`);
|
||||
let usedCssVariables = [];
|
||||
|
||||
// read the css file
|
||||
const cssContent = readFileSync(file.path, { encoding: 'utf-8' });
|
||||
const ast = csstree.parse(cssContent, {});
|
||||
|
||||
// get the css variables used in the css file
|
||||
csstree.walk(ast, (node) => {
|
||||
if (node.type === 'Function' && node.name === 'var') {
|
||||
// get the variable name
|
||||
for (const child of node.children) {
|
||||
if (child.type === 'Identifier') {
|
||||
usedCssVariables.push(child.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// could also be that the variable is assigned to another variable
|
||||
if (node.type === 'Declaration' && node.property.startsWith('--')) {
|
||||
// check if its assigned to another variable
|
||||
if(node.property.startsWith('--')) {
|
||||
if (node.value && node.value.type === 'Function' && node.value.name === 'var') {
|
||||
for (const child of node.value.children) {
|
||||
if (child.type === 'Identifier') {
|
||||
if (!usedCssVariables.includes(child.name)) {
|
||||
usedCssVariables.push(child.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (node.value && node.value.type === 'Raw' && node.value.value) {
|
||||
const val = node.value.value.trimStart(); // var(--v-primary)
|
||||
|
||||
// if starts with var(, then its assigned to another variable or many variables, get everything that's inside
|
||||
// var(...) using regex capturing
|
||||
|
||||
// get all varname groups
|
||||
const matches = val.matchAll(/var\((?<varname>[^),\s]+)/g);
|
||||
|
||||
for (const match of matches) {
|
||||
// get the varname group
|
||||
const varname = match.groups?.varname;
|
||||
|
||||
if (varname) {
|
||||
if (!usedCssVariables.includes(varname)) {
|
||||
usedCssVariables.push(varname);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (node.value.children) {
|
||||
for (const child of node.value.children) {
|
||||
if (child.type === 'Function' && child.name === 'var') {
|
||||
for (const varChild of child.children) {
|
||||
if (varChild.type === 'Identifier') {
|
||||
usedCssVariables.push(varChild.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// walk to find all variable declarations and remove the unused ones
|
||||
csstree.walk(ast, (node, item, list) => {
|
||||
if (
|
||||
node.type === 'Declaration' &&
|
||||
(node.property.startsWith('--v-') || node.property.startsWith('--c-'))
|
||||
) {
|
||||
const variable = node.property;
|
||||
|
||||
if (!usedCssVariables.includes(variable)) {
|
||||
list.remove(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const finalPath = replace ? file.path : file.path.replace('.css', '.min.css');
|
||||
|
||||
await writeFile(finalPath, csstree.generate(ast, { mode: 'safe' }));
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue