Watch multiple css files with postcss and output a bundle.css

Question

I'm trying to figure out a workflow involving postcss. My need is to have css partials in one folder, watch them and output a bundle css file. The bundle css file must have include a base.css file at the top.

postcss has a --watch flag and can watch multiple files but can only output multiple files and not a bundle css file. I can use cat to combine all the files and use stdin to pipe them to postcss. But I can't trigger the cat command from postcss.

My files structure could look like this:

partials/
    |_one.css
    |_two.css
styles/
    |_base.css
    |_bundle.css

How would I, by using npm, arrange my script section to use CLI commands to achieve my goal?

My main issue is to figure out how to orchestra the build steps without one step blocking the next. A link to a working work-flow example would be great!

EDIT I got a solution working but it is very suboptimal as it can not be used with sourcemaps, can not have global variables and is a two step process. But I will outline it here in hope that someone can suggest a better approach.

Using the following structure:

build/
    |_stylesheet/
        |_default.css (final processed css)
partials/
    |_one.css
    |_one.htm (html snippet example)
    |_two.css
    |_two.htm (html snippet example)
styles/
    |_base.css
    |_bundle/ (css files from partial/ that is partly processed)
        |_one.css
        |_two.css
    |_master.css (import rules)

I have a two step process in my package.json. First I make sure I have a styles/bundle folder (mkdir -p) and then I start nodemon to watch the css files in partials/. When a change occurs, nodemon runs npm run css:build.

css:build process the css files in partials/ and output them in styles/bundle/ (remember that I don't know how to watch multiple files and output one bundled file).

After running css:build, npm runs postcss:build which processes the master.css file that @import css files from styles/bundle/. I then output (>) the processed content from stdout to build/stylesheet/default.css.

{
    "css": "mkdir -p styles/bundle && nodemon -I --ext css --watch partials/ --exec 'npm run css:build'",
    "css:build": "postcss --use lost --use postcss-cssnext --dir styles/bundle/ partials/*.css",
    "postcss:build": "postcss --use postcss-import --use postcss-cssnext --use cssnano styles/master.css > build/stylesheet/default.css",
}

Answer 1

You can check out watch and parallelshell packages from npm. I believe the combo of those two will do the trick. More on that here: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

Answer 2

Maybe you should consider using webpack instead to build a single css file and other resources which also has a watch flag. It is very efficient and you don't need to manually rebuild all the time after changes to resources/files.