CSS Modules for Meteor (without Webpack)

announce
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!

26

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

27

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

28

Enjoy! :slight_smile: Demo with SugarSS

29

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.

30

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. :smile:

Check out the github page for more details.

2 Likes
31

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.

6 Likes
32

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

33

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"
    ] 
  }
34

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ā€™

at require (http://localhost:3000/packages/modules-runtime.js?hash=ab7e8d32b6c7b5a5fa7ae1b65e8225c4f9e30223:119:19)
at meteorInstall.node_modules.react-toolbox.lib.ripple.index.js (http://localhost:3000/packages/modules.js?hash=fef91b555dd73d580887a1c3f57a0c41e897af13:27044:14)
at fileEvaluate (http://localhost:3000/packages/modules-runtime.js?hash=ab7e8d32b6c7b5a5fa7ae1b65e8225c4f9e30223:191:9)
at require (http://localhost:3000/packages/modules-runtime.js?hash=ab7e8d32b6c7b5a5fa7ae1b65e8225c4f9e30223:116:16)
at meteorInstall.node_modules.react-toolbox.lib.button.index.js (http://localhost:3000/packages/modules.js?hash=fef91b555dd73d580887a1c3f57a0c41e897af13:26192:15)
at fileEvaluate (http://localhost:3000/packages/modules-runtime.js?hash=ab7e8d32b6c7b5a5fa7ae1b65e8225c4f9e30223:191:9)
at require (http://localhost:3000/packages/modules-runtime.js?hash=ab7e8d32b6c7b5a5fa7ae1b65e8225c4f9e30223:116:16)
at meteorInstall.node_modules.react-toolbox.lib.app_bar.index.js (http://localhost:3000/packages/modules.js?hash=fef91b555dd73d580887a1c3f57a0c41e897af13:25774:15)
at fileEvaluate (http://localhost:3000/packages/modules-runtime.js?hash=ab7e8d32b6c7b5a5fa7ae1b65e8225c4f9e30223:191:9)
at Module.require (http://localhost:3000/packages/modules-runtime.js?hash=ab7e8d32b6c7b5a5fa7ae1b65e8225c4f9e30223:116:16)
kadira_flow-router.js?hash=d431b8eā€¦:519 There is no route for the path: /Router._notfoundRoute @ kadira_flow-router.js?hash=d431b8eā€¦:519

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

2 Likes
35

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
36

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.

37

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ā€™

38

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.

39

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?

40

Hi,

Did someone solved this issue? I am also trying to get react-toolbox working with meteor but I am getting stucked with this errorā€¦

Someone to help please?