CSS Modules for Meteor (without Webpack)

nathantreid · April 12, 2016, 4:59pm

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.

newswim · April 12, 2016, 5:17pm

Got it working, thank you

gly · May 8, 2016, 3:24pm

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.

nathantreid · May 13, 2016, 8:37pm

@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…

gly · May 15, 2016, 7:29am

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.

priezz · June 15, 2016, 10:10am

@nathantreid, I have just installed your module with sugarss support… Well, now I pray for you! 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!

nathantreid · June 15, 2016, 1:05pm

Thanks, although in this case all credit goes to @comerc, who actually implemented the sugarss support.

priezz · June 15, 2016, 1:58pm

Many thanks to both of you then! Could you please update the package in the Atmosphere to the upstream version?

comerc · June 15, 2016, 7:09pm

Enjoy! Demo with SugarSS

nathantreid · June 16, 2016, 2:29pm

I’ve started releasing 1.3.0 with sugarss… unfortunately the Meteor build servers are being difficult again, so only the Linux versions are live right now.

nathantreid · June 20, 2016, 11:36pm

After many build failures, I gave up on 1.3.0, and I just now released 2.0.2. As of 2.0.0, the node-sass, stylus, and sugarss npm packages are no longer bundled with the app, allowing the user to only install the ones they need via meteor npm install.
It also means I don’t have to use the Meteor build servers anymore, so publishing only takes 1 command and 30 seconds.

Check out the github page for more details.

nathantreid · June 21, 2016, 7:32am

Finally got it! v2.1.0 includes support for .css files.

I was supposed to enjoy some light reading tonight before bed but instead my brain got caught on the .css issue and wouldn’t let go until I finished (that was about 4 hours ago, oops…). Anyway, I dug into the build plugin system again and this time it clicked.

tgoldenberg · July 20, 2016, 3:04pm

Following your sample project and having issues getting started - https://github.com/nathantreid/meteor-react-toolbox-example/issues/10

nathantreid · July 20, 2016, 3:20pm

Just replied on the issue, but I’ll repost it here as well so others can see it:

Given the error message:

While processing files with nathantreid:css-modules (for target
   web.browser):

   /Users/thomasgoldenberg/.meteor/packages/nathantreid_css-modules/.2.1.0.x581y4++os+web.browser+web.cordova/plugin.mss.os/npm/node_modules/meteor/mss/node_modules/postcss/lib/input.js:61:22:
   /Users/thomasgoldenberg/Desktop/agolo/agolo-v2/node_modules/convert-source-map/test/fixtures/map-file-comment-double-slash.css:14:1:
   Unknown word
   at Input.error

It looks like you (or one of the npm modules you are using) are using the convert-source-map package, which as one of its tests includes a css file with invalid syntax (a double-slash comment).

Meteor’s build tool currently processes all files, even if the file isn’t being used anywhere in your application,

The simplest way to avoid this is to use the cssModules ignorePaths option. I think this should do the trick:

"cssModules": {
    "globalVariables": [],
    "ignorePaths": [
      "node_modules/convert-source-map/test"
    ] 
  }

lightbringer · November 6, 2016, 12:29pm

Beginner here.

I am trying to integrate react-toolbox with meteor 1.4.2. I have followed all the steps you have mentioned, but whenever I import a component, I get the following error in the browser console.

Uncaught Error: Cannot find module ‘./theme.scss’

Can anyone please help me out with this? Or will this only work withy meteor 1.3?

foodeatyum · November 14, 2016, 5:14am

Same here with the following stack trace:

Uncaught Error: Cannot find module './styles/home.scss'(…)
require.resolve @ modules-runtime.js?hash=5b5615c…:139
Module.resolve @ modules-runtime.js?hash=5b5615c…:91
Mp.import @ modules.js?hash=f8627ca…:308
meteorInstall.client.main.js @ main.js:1
fileEvaluate @ modules-runtime.js?hash=5b5615c…:191
require @ modules-runtime.js?hash=5b5615c…:116
(anonymous function) @ app.js?hash=828fb0f…:364

foodeatyum · November 15, 2016, 1:05pm

So the issue with my project was that setting the specificArchitecture option with either “os” or false was causing scss import issues. I’ve reported the issue under the main repo here, waiting to hear back. Hopefully this provides a temporary solution for others.

germanliu · November 24, 2016, 5:41am

Hi, where you able to install it? I’ve installed react toolbox with meteor 1.4.2.3 and get a Uncaught Error: Cannot find module ‘./theme.scss’

foodeatyum · November 24, 2016, 12:29pm

Yeap, I just removed specificArchitecture from package.json entirely. So that means the server side of things right now, and it seems like Nathan is working on the issue. I referenced the open issue in my previous message above if you want to take a look.

germanliu · November 25, 2016, 1:31am

Thanks! I’ve tried with specificArchitecture turned to false as you suggested but I still get the “Cannot find module ‘./theme.scss’”

What I did was:

meteor npm install --save react-toolbox

Then I just tried to use react-toolbox adding:

import { Button } from ‘react-toolbox/lib/button’;

Maybe I’m missing something in the middle?