15

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",
}
approxiblue
  • 6,982
  • 16
  • 51
  • 59
dotnetCarpenter
  • 10,019
  • 6
  • 32
  • 54
  • You could check out [Gulp](http://gulpjs.com/) with the [gulp-concat](https://www.npmjs.com/package/gulp-concat) module. There is also a [gulp-postcss](https://github.com/postcss/gulp-postcss) module although I haven't used that one myself. – Wouter Oct 06 '15 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 Oct 07 '15 at 12:22
  • 1
    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 Oct 09 '15 at 04: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 Oct 12 '15 at 20:44

2 Answers2

4

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/

Mladen
  • 1,215
  • 1
  • 10
  • 20
  • Worked well with the package `watch`, given a script called `"css:build"` that does the actual work: `"watch": "watch 'npm run css:build' css"` – Stoffe Mar 09 '17 at 11:26
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.

Gillsoft AB
  • 4,185
  • 2
  • 19
  • 35