CSS preprocessors, JavaScript compilers, and the Meteor Build Tool

[tmeasday]

Article outline

https://github.com/meteor/guide/blob/master/outlines/build-tool.md

Major decision points

1. Use ES2015+ everywhere via the ecmascript package, if you really want to you can use coffeescript instead but all of our code samples will be against ES2015.
2. Use autoprefixer by using one of the community minifier packages that have it built-in, rather than by building it into the CSS compiler. In the future, we will need a separate build step for CSS post-processing.
3. Ideally the Meteor 1.3 build tool will support NPM on the client and server natively, but until then meteorhacks:npm and cosmos:browserify are the best options

[stubailo]

The initial outline:

Meteor guide: The build tool

Meteor brings sane, zero-configuration defaults to the previously tedious tasks of compiling, concatenating, minifying, and transforming assets.

1. How to use popular transpiled languages in Meteor out of the box:
   1. ES2015+
   2. LESS
   3. SASS
   4. Coffee
   5. TypeScript
2. How to use packages from other packaging systems:
   1. Compatibility directory and 'bare' files
   2. Bower
   3. NPM

We should also link to the section about making your own build plugin.

[vladshcherbin]

A section about how to use css Autoprefixer after compiling scss/less/etc will be great.

[stubailo]

Let's look at some key decisions that need to be made:

Easy parts

• ES2015 is built-in now, we just have to explain what it is and what features we support
• LESS has a "core" package for it, just need to explain cross-package imports
• CoffeeScript has a core package
• client/compatibility is pretty straightforward!
• JSX
• Angular has some build plugins that we should name drop here

Probably easy

• SCSS/SASS - I imagine this will be fourseven:scss, pending the discussion here: Set up CI test service Meteor-Community-Packages/meteor-scss#133
• NPM - the current solutions aren't ideal, but cosmos:browserify and meteorhacks:npm cover some variety of needs. I don't think we can currently recommend replacing the whole system with one of the community Webpack projects to meet this bullet point.

Need research

• TypeScript - I've never tried using it with Meteor, but I've heard some people have success with it. I need to find out more.
• Bower - I should find out more about the state of @mquandalle's bower. There's a PR here where a 1.2 transition is in progress: WIP: Port the package to the new Meteor 1.2+ Compiler API mquandalle/meteor-bower#94
• Other templating languages - we should mention Jade and any other Blaze template compilers
• CSS post-processors like autoprefixer. I don't know anything about this. @vladshcherbin have you done this before in Meteor?

Anything else I missed?

[vladshcherbin]

@stubailo I've used gulp to compile scss and pass through autoprefixer and it was very easy, just 2-3 lines and vendor prefixes were added to css files.

Then I saw there is no scss support in core and decided to give a try to fourseven/meteor-scss with autoprefixer inside. It worked well, but with 1.2 the build system changed and there is no more autoprefixer there. Here is the latest issue about that.

So, I decided to switch back to gulp until the build system will have stable scss and autoprefixer support. The Autoprefixer is absolutely a must in websites for me.

[vladshcherbin]

I don't know, if there is a way to do that now (post processing of css), but it is just a simple step in the build system - grab the css, push it through autoprefixer with options and store it.

It is available everywhere - gulp, grunt, webpack, etc.

[adrianbw]

An autoprefixer is absolutely necessary. We have several projects that we simply cannot upgrade to 1.2 until we have one.

[stubailo]

we simply cannot upgrade to 1.2 until we have one.

What were you using before 1.2?

[mquandalle]

Not that some CSS pre-processors (such as mquandalle:stylus) include autoprefixer in the compilation step — not saying this is the best solution but it has been working very well for me.

[stubailo]

@mquandalle we were having a parallel conversation here: Meteor-Community-Packages/meteor-scss#133

It seems like the best option might be to build it into the minifier? Although maybe if your stylus package works fine then it's a good approach for now!

@sebakerckhof was also considering having a separate branch with autoprefixer. But it seems somewhat silly to have everyone (stylus, less, scss) build in autoprefixer separately if we could do it once?