PostCSS package and Meteor Build Plugin questions

I made it work but I will try to rewrite it a little bit to use meteorhacks npm-container. I’ll try to do it in couple of hours.

Also related: https://github.com/meteor/meteor/issues/5512

For now I have something like this: https://github.com/juliancwirko/meteor-postcss works quite well (so far ;))

1 Like
2 Likes

Hey, one problem with using the package instead standard-minifiers is that some of community packages has it in dependencies (I wonder why?). This is a blocker for many people when you want to replace it with something different like for example juliancwirko:postcss package. Even when you remove standard-minifiers meteor will install it again.

I think there should be info somewhere to not use such packages in other custom packages or standard-minifiers should have special logic which will check if there is other minifier active. I don’t know… :confused:

Good example Orion : https://github.com/orionjs/orion/blob/master/packages/base/package.js#L14

This is bad because some packages are doing the same. What’s your opinion about that @sashko ?

1 Like

My two articles about PostCSS usage in Meteor:

1 Like

Can I still use a preprocessor (specifically Stylus [mquandalle’s]) ?

Yes! This postcss package runs after the stylus package would.

1 Like

Cool! So I don’t need to bother with something like https://github.com/seaneking/poststylus ?

Nope! That’s the goal of this package - letting you use your favorite pre-processor independent of postCSS.

2 Likes

Yeah, you can still use your fav preprocessor. PostStylus is just a Stylus plugin which uses PostCSS.

This is the article that I wrote some time ago:

It helps to understand what PostCSS really is.

1 Like

Thanks guys!

@juliancwirko can I add any valid postCSS plugin to the package.json ? Anyone working on a master list for these? I did find this: http://postcss.parts/

In theory yes, but many of the plugins may not work with Meteor. Of course I haven’t tested all.

But some of them works well. Here is the demo: https://github.com/juliancwirko/meteor-postcss-test where I use some of the plugins. You can test others and let me know if they work for you. There is even a demo of usage Stylelint which is also used as a PostCSS plugin: https://github.com/juliancwirko/meteor-stylelint-demo (article: https://medium.com/@juliancwirko/how-to-use-css-linter-in-meteor-c60b2f24f969)

So basically the package is prepared to support many PostCSS plugins, but because of specific Meteor build workflow some of them may not work properly.

1 Like

I also support registering PostCSS as a build tool “minifier”, but a problem that we have right now is that we don’t have a clean way to implement caching for these. That means that every time you touch a file, your minifier is going to be called for every CSS file again. And if you have to parse the file, run postCSS on the AST, and recompute a String for that again, it is going to slow down your reload time in a sensible way. Minifiers, like Compilers should implement some file level caching.

We discussed this issue as part of PR #5875.

3 Likes

Version 1.0.0-beta.1 for Meteor beta (also on Atmosphere):
https://github.com/juliancwirko/meteor-postcss/tree/meteor-1.3-in-progress.
Feedback is welcome.

1 Like

1).

$ meteor create --release 1.3-beta.11 myApp
$ cd myApp
$ meteor remove standard-minifier-css
$ meteor add juliancwirko:postcss@1.0.0-beta.11

2).

$ npm init
$ npm install autoprefixer --save-dev

3). Open just created package.json file
4). After devDependencies add:

"postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }

5). You’ve just installed proper Autoprefixer (PostCSS plugin). And there is more: http://postcss.parts/ :wink: Also check out the new website: http://postcss.org/

3 Likes

New version for Meteor 1.3 has the possibility to configure PostCSS parsers.
Read more here: https://github.com/juliancwirko/meteor-postcss/tree/meteor-1.3-in-progress#postcss-parsers

Also take a look at: Meteor 1.3 Scss imports from node_modules experiment

3 Likes

There is version 1.0.0 for Meteor 1.3
https://atmospherejs.com/juliancwirko/postcss

Check out demo files: https://github.com/juliancwirko/meteor-postcss-test/tree/master/client
And demo package.json file configuration: https://github.com/juliancwirko/meteor-postcss-test/blob/master/package.json

This package also allows you to import .css files from node_modules and with a little more work you will be able to also import and compile .scss files. Take a look at: https://github.com/juliancwirko/meteor-bootstrap-postcss-test

1 Like

Version 1.1.0 with added possibility to exclude particular Meteor packages from the PostCSS processing. More info: https://github.com/juliancwirko/meteor-postcss#exclude-meteor-packages

I recommend:

“PostCSS with Ben Briggs” https://devchat.tv/js-jabber/206-jsj-postcss-with-ben-briggs