Better modular css solution

[ben-pr-p]

We have brandnewcongress.org, justicedemocrats.com, and soon to be candidatename.com.

We need some system that has some global css, some page specific css (/events, /platform, etc.) – and some brand specific css (color variables, logo positioning, etc.).

@lukewestby, do you know of any good way to approach this type of situation?

At the moment, I have an app.css, which is a bundle of all these css files

    css: [
      './web/static/css/app.css',
      './web/static/css/bnc.css',
      './web/static/css/jd.css',
      './web/static/css/footer.css',
      './web/static/css/header.css',
      './web/static/css/tab-menu.css'
    ]

However, I'm serving both bnc.css and jd.css when it's either bnc or jd, they're just being conditionally applied based on a .bnc or .jd class on the body.

At the moment, I'm also putting page specific styles in inline <style> </style> tags inside the page templates. That works, and it lets me use .eex if statements for my css which is kind of nice, but it leads to unwieldy files.

Does anyone know what typical solutions to this type of architecture are?

[ben-pr-p]

We could start using a preprocessor, and we output a different css bundle like:

/static
-- bnc.css
-- jd.css
-- candidate.css

Each has all global styles with colors determined by sass, stylus, or less variables.

I would love to use a preprocessor, but is it possible to hack webpack to take one input css file and output multiple different css files with different values for variables?

[ben-pr-p]

Re: page specific css, are the performance improvements to be gained by splitting up the css bundles worth the effort, or should we serve one bundle with css for all routes on the site?