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",
}

You could check out Gulp with the gulp-concat module. There is also a gulp-postcss module although I haven't used that one myself. — Wouter
– Wouter, Commented Oct 6, 2015 at 16:00
I want to avoid using Gulp or Grunt. I have worked with both and are convinced that I can achieve a more future proof work flow by using npm and OS tools. But I'm pretty new to this approach and don't know the best practice for listening and triggering commands. — dotnetCarpenter
– dotnetCarpenter, Commented Oct 7, 2015 at 12:22
how about using something like this?: "css:build": "cat partials/*.css | postcss -u lost -u postcss-cssnext | cat styles/_base.css - > default.css" . Will do it in one step. But you won't get sourcemaps, since postcss-cli has no option for source maps. — hassansin
– hassansin, Commented Oct 9, 2015 at 4:32
you can trigger npm command after postcss "css:build": "postcss --use lost --use postcss-cssnext --dir styles/bundle/ partials/*.css && npm run concat", — Tim Marinin
– Tim Marinin, Commented Oct 12, 2015 at 20:44

Mladen · Accepted Answer · 2015-10-15 17:21:40Z

4

+200

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/

answered Oct 15, 2015 at 17:21

Mladen

1,2551 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stoffe Over a year ago

Worked well with the package watch, given a script called "css:build" that does the actual work: "watch": "watch 'npm run css:build' css"

Gillsoft AB · Accepted Answer · 2015-10-15 18:14:20Z

3

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.

answered Oct 15, 2015 at 18:14

Gillsoft AB

4,2352 gold badges22 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related