These are chat archives for jescalan/roots
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
postcss so that Accord can find it. There's no need to require Accord or PostCSS in your
app.coffee - 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:
npm install postcss --save
app.coffeein the manner @hhsnopek described above
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
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 app.coffee:
postcss: use: [lost()]
postcss.coffeefile to change the PostCSS extension to
pcssto see if that would work, no dice.
afterhook in your
app.coffee- 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
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:
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 = postcss: 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: