Meteor's future and CSS Modules

[ffxsam]

I’m wondering if there’s any plan to allow Meteor’s build system to allow us to use CSS Modules and import CSS/SCSS files? I’m using Material UI and inline styles, which works fine, though the amount of HTML dumped out to the client can be massive.

[juliancwirko]

yeah, this is so important, at least we need a simple way to use scss, less, styl, css files from node_modules packages, but CSS Modules with ability to use preprocessors would be awesome. Altought I don’t think that we get this any soon. This is probably quite hard to achieve with current Meteor build system.

Do you just write your css in React components? What do you do if some npm library has ready to use .css files? Do you copy the contents or all .css files into the app? And what if this library has only .scss files? There are many questions, I wonder what will be the recommended way to do this in the Meteor Guide for version 1.3, @sashko ?

[ffxsam]

Currently I’m using inline styles with Radium, and breaking my UI into small components as much as possible. It’s an ok solution, but one that I feel is temporary.

[juliancwirko]

I just leave it here

Also there is a new webpack:webpack and new kickstarters: https://github.com/thereactivestack/kickstart

I think it will be much much simpler to use css modules with it (besides many other benefits).

[benoitt]

I’m wondering if there’s any plan to allow Meteor’s build system to allow us to use CSS Modules and import CSS/SCSS files? I’m using Material UI and inline styles, which works fine, though the amount of HTML dumped out to the client can be massive.

I know this is not the Meteor build system but if you use webpack:webpack, you can import CSS / LESS / SASS files within your components. You can also use local CSS that will make sure you never have name conflicts.It works like this:

:local(.myClass) {
  background: red;
}

import React, { Component } from 'react';
import style from './less/Component';

export default class Test extends Component {
  render() {
    return <div className={style.myClass} />;
  }
}

[juliancwirko]

yeah, this is awesome, also I think you can just configure your loader to use :local as a default like described here:

Webpack compiler inside Meteor (ES6 modules, hot reload and code splitting!)

You need stylus-loader usage like: (…) cssLoader = ‘style!css!stylus-loader’; { test: /.styl$/, loader: cssLoader } (…) or with css modules like: (…) cssLoader = ‘style!css?modules&importLoaders=1&localIdentName=[name][local][hash:base64:5]!stylus-loader’; { test: /.styl$/, loader: cssLoader } (…) you can add stylus plugins in your webpack conf by: (…) stylus: function () { return [sGrid, Rupture] } (…) you can even add postcss loader and use it like: …

am I right?

[benoitt]

yeah, this is awesome, also I think you can just configure your loader to use :local as a default like described here:

Yes you can. With webpack:webpack you just set css.module to true.

[juliancwirko]

wow, even simpler!
I need to play with new webpack:webpack version.
Thanks for this project! It is awesome.