Compile multiple CSS files in one | CSS tricks

Stu Robson is on a mission to “Un-sass” are CSS. I see that this kind of articles popping up every year, and for a good reason because CSS has grown so much new legs in recent years. So much so that many of the core functions that you have asked for SASS in the past are now baked directly in CSS. In fact, we have that Jeff Bridgforth On tap with a related item next week.

What I like about Stud’s stab about this is that it is a continuous journey instead of a wholesale switch. In fact, he is on his way with a new post that Sticks specifically in the preparation of multiple CSS files in one file. Splitting and organizing styles into individual files is definitely the reason that I keep sagging my work. I think it is wonderful to find exactly what I need in a specific file and updating without having to dig a monolith of style rules.

But is that a real reason to keep using SASS? To be honest, I never questioned it, perhaps because of a lizard brain that doesn’t matter, as long as something continues to work. Oh, I want partial style files? I have always done that with a SASS-Y toolchain that has not yet abandoned me. I know, not the most proactive path.

Stu outlines two ways to put together multiple CSS files when you do not trust it:

Use postcss

Ah, that’s right, we can use Postcsss both with And Without Sass. It is easy to forget that Postcss and SASS are compatible, but not dependent on each other.

postcss main.css -o output.css

Stu explains why this could be a fun way not to let your work dip:

Postcss can integrate seamlessly with popular Build tools such as Webpack, Gulp and Rollup, so that you can include CSS compilation in your existing development work flow without potential, extra configuration headache.

Adapted script for compilation

The ultimate thing would be the necessity of eliminating dependencies. Stu has an adapted node.js script for this:

const fs = require('fs');
const path = require('path');
// Function to read and compile CSS
function compileCSS(inputFile, outputFile) {
    const cssContent = fs.readFileSync(inputFile, 'utf-8');
    const imports = cssContent.match(/@import\s+['"]([^'"]+)['"]/g) || [];
    let compiledCSS = '';
    // Read and append each imported CSS file
    imports.forEach(importStatement => {
        const filePath = importStatement.match(/['"]([^'"]+)['"]/)[1];
        const fullPath = path.resolve(path.dirname(inputFile), filePath);
        compiledCSS += fs.readFileSync(fullPath, 'utf-8') + '\n';
    });
    // Write the compiled CSS to the output file
    fs.writeFileSync(outputFile, compiledCSS.trim());
    console.log(`Compiled CSS written to ${outputFile}`);
}
// Usage
const inputCSSFile="index.css"; // Your main CSS file
const outputCSSFile="output.css"; // Output file
compileCSS(inputCSSFile, outputCSSFile);

Not 100% free of dependencies, but Geez, what a nice way to reduce the overhead and still combine files:

node compile-css.js

This approach is designed for a flat file directory. If you are like me and prefer nested subfolders:

With the flat file structure and import strategy at one level that I use, nested import (you can do it with it postcss-import Are not necessary for my project institution, which simplifies the compilation process while maintaining a clean organization.

Very cool, thanks Stu! And view the Full post Because there is a lot of useful context behind this, especially with the adapted script.

Direct link →