CSS Modules for Meteor (without Webpack)

announce
6

Yeah, this is the same as with my postcss package. I needed to use minifiers instead build plugins :confused:

I’ve played with babel-compiler and mentioned css modules plugin which uses css modules require hook and I was able to imort .css files in the format:

@import styles from './main.css';
console.log(styles.myClass) // result: {myClass: 'some-weird-class-name-string'}

but it was really hacky, there is also a problem with Node version, I needed to use some polyfills and some path changes so I gave up :confused:

I hope this will land in Meteor someday

1 Like
7

A quick test revealed that simply commenting out Meteor’s CSS compiler registration is all it takes to get my plugin working on the .css extension, so hopefully MDG will break the CSS compiler out into a separate plugin soon.

Meteor’s CSS compiler is pretty much the simplest compiler ever, all it does it call addStylesheet() for each CSS file, so there’s no worries about missing functionality either.

2 Likes
8

Would this make the use of react toolbox possible? Is their anyway to import files from npm packages?

9

you should still be able to overload the extension with
’styles.m.css’ registering your compiler on ‘.m.css’ or ‘.module.css’

Not confusing IDEs anymore.

I think that this works. Would be great.

2 Likes
10

So has anyone successfully used react toolbox with meteor 1.3?

11

My just-released latest beta (nathantreid:css-modules@1.0.0-beta.9) adds support for react toolbox / SASS compilation.
As long as you’re not on a Mac, you can use it now through Atmosphere (Meteor’s OS X build machines have been uncooperative for the past hour or so, so Mac users currently have to check out the repository).

I’ve put up a Meteor version of React Toolbox’s example app; the README also contains instructions on how to integrate React Toolbox into an app of your own.

3 Likes
12

I like this - I’m going to include the .m.css extension as a default extension in my next update.

13

I was wondering where the CssModules namespace comes from when you’re doing alternative syntax? That’s a build plugin pickup? does it work in jsx for 1.2?

14

In the 0.x version, as the MSS files are processed I store their output in an object, where the keys are the file paths and the values are object containing the local -> global class mappings. At the end of processing, I add a JavaScript file that exposes that information to the browser:

var tokens = ${JSON.stringify(tokens)};
window.CssModules = {
	'import': function importStyles(path) {
		return tokens[path];
	}
};

Since Meteor 1.2 lacks support for import statements, I overrode the Babel compiler so that it replaces all import yourVariable from 'yourFile.mss' statements with var yourVariable = CssModules.import('yourFile.mss');, so in the 0.x version of the plugin, all of your statements end up using the CssModules namespace.
The CssModules namespace is no longer available in the 1.x beta, although I’m considering adding it back in.

To answer your last question, yes, it can work in .jsx in 1.2, but doesn’t out-of-the-box. I should be able to push an update soon that enables .jsx processing for the 0.x series.

15

@nathantreid thanks for the thorough response. I’m
Gonna post an issue and how about you tell me how you want it solved and I’ll give you a PR

16

How does this not have more likes?? This is brilliant!

Have you thought about instead of doing the substitution via a build plugin, doing it with a babel plugin? That way I can still use ecmascript-hot and you won’t have to worry about constantly bumping versions :slight_smile:

17

I found some examples that could be used / adapted :slight_smile:

1 Like
18

I’ve started thinking about babel plugins, but that’s about it. :slight_smile:
It’s definitely on my list of things to check into for the future!

19

@nathantreid , any update on supporting Mac? I noticed the meteor-1.3 branch was deleted and I’d really love to try this out. Thank you!!

20

Yes! The Meteor build servers started cooperating, so it’s on Atmosphere now. The latest version is 1.0.3. The Meteor 1.3 branch has become the new master.

21

Got it working, thank you

22

Hello. What is the advantage of CSS modules versus scoped CSS?
Or what is the disadvantage of scoped CSS versus CSS modules?
Instead of file-scope, I use the main tag (a div) and in .js:

import style from './style.scss';
Template.someTemplate.helpers({
  style() {
    return style;
  },
});

and in .html:

<template name="someTemplate">
  <!--@import "./style.scss";-->
  <style scoped>    
    {{style}}
  </style>

This template is direct under a div.

Thank you.

23

@gly: Off the top of my head, I’d say the number one advantage is browser support - Firefox is the only major browser that supports the scoped attribute. CSS modules works in all of the browsers…

24

Thank you. Now I understand the problem. Just a note: although it is not everywhere reported, chrome (20+) does support it (I use chrome for my tests): mozilla.org

EDIT: scoped was available in chrome, but it has been removed (google engineers removed it because of the code complexity). It works in my application probably because there is no collision.

25

@nathantreid, I have just installed your module with sugarss support… Well, now I pray for you! :slight_smile: I have sugarss set to be as much similar to stylus as possible, so now I can say that I can easily use modular stylus w/o stylus itself. It works great!