These are chat archives for jescalan/roots

May 2015
Declan de Wet
May 28 2015 09:18

Yeah, it's a custom task runner - though I wouldn't necessarily call it a "task runner". Roots is essentially just glue that brings a set of different independent modules together that handle compilation, project scaffolding, serving webpages, etc into a tool that can essentially pass command line arguments and information from a config file to each of these individual components (with sane defaults) - however it also offers several hooks for writing super powerful plugins.

When using Roots, try not to think about "tasks" - "tasks" imply that there are many different things to do, when there really is only one: files being read, potentially transformed (even if it's just the destination file path) and then written. in -> out - there's no line dividing one set of files from another other than the file extension and the adapters associated with that extension. Roots exists to give you an alternative to writing huge task-based build files. :)

I'm not too familiar with PostCSS (I just started using it recently myself) but from what I know about Accord, getting PostCSS to work is as simple as simply setting the correct file extension on your CSS files and then npm installing postcss so that Accord can find it. There's no need to require Accord or PostCSS in your - once you install postcss, Roots will automatically load it into Accord.

I think the real problem here is that you're trying to get it to compile Stylus and then pipe that into PostCSS. But you're going about it the wrong way. Thankfully, Roots actually does support this kind of workflow due to it's support for multipass compilation - if you name the file with two extensions, the file will be transformed by each accord adapter associated with each extension in the order the extensions appear.

Given this information, and reading through the code in Accord for the PostCSS adapter, these steps might be what you need - bare in mind I have yet to test this, but do let me know if there's a problem:

  1. npm install postcss --save
  2. add your PostCSS options to in the manner @hhsnopek described above
  3. name your source stylesheet files <name>.styl.css - e.g. master.styl.css

Given that configuration, Roots should pipe your files into the Stylus Accord adapter, followed by the PostCSS adapter.

If none of this works, then it might be due to the file extension that accord has registered for PostCSS - perhaps changing it to something like pcss would be of benefit, but that would have to be an Accord change

also, because @jenius is travelling at the moment there might be a chance that he hasn't published the new version of Accord to NPM. take that information as you wish
Noel Quiles
May 28 2015 14:31

Thanks so much for the info, @declandewet ! Ok, after updating Accord from within the Roots directory (since it wasn't 0.18.0 as you had informed us) I tried running roots watch using the following in


    use: [lost()]
Nothing changed. The stylus is being converted properly but PostCSS is just not running on the output. Using the format from @hhsnopek 's post also failed to work. I went into Accord's file to change the PostCSS extension to pcss to see if that would work, no dice.
Noel Quiles
May 28 2015 14:37
To clarify, the Accord I updated to was the git master, which includes the PostCSS adapter.
Declan de Wet
May 28 2015 14:49
I'll have a look at this during the weekend when I've got some time
for now, you might have some luck calling postcss directly inside an after hook in your - it receives the Roots class instance as the first argument, so using this you can grab all the css files Roots knows about after they're compiled an run them through PostCSS
Noel Quiles
May 28 2015 15:14

Looks like I finally figured it out! It was basically what you had described regarding multipass compilation, but from what I just saw in the Roots documentation on multipass, the first compiled language needs to be listed at the end of the files extensions, since Accord works its way to the base of the filename during compilation. The correct extensions that got me the expected result were added as such: master.css.styl.

So, after this little adventure, it seems the process to use PostCSS within Roots' multipass compilation pipeline is:

1) in the Roots module directory, update Accord using the git master for now, should be published to NPM soon
2) In your project directory: npm install postcss --save
3) Put the following in your

foo = require 'postcss-plugin-you-want-to-use'

modules.exports =
        use: [foo()]

4) Name files you'd want to have postprocessed as file.css, optionally adding extensions for whatever else you want to use for preprocessing, for example file.css.styl for Stylus-to-PostCSS.

Seems to be working consistently for me :smile:

Thanks for all your help and guidance @hhsnopek @declandewet and also @janviehweger for braving the waters with me lol
Henry Snopek
May 28 2015 18:11
@EnMod Awesome! Thank you @declandewet & @janviehweger for helping out :D
Declan de Wet
May 28 2015 18:31
glad you got it working :)