Can't get CSS Modules to work on Meteor 1.6 (still)

[neoromantic]

I've been using this package for awhile now, along with meteor 1.4, 1.5 and now I'm trying to get it working with 1.6. Also, I use react-toolbox.

Currently, I just get unstyled components, as if no import styles from 'file.css' were working. No errors, I even see 'processing files with nathantreid:meteor-css-modules' line when run devserver. But no css code gets to client.

I suppose my configuration is a bit wrong, could anyone point me to an error?

Here's my setup:

.meteor/packages

  1 # Meteor packages used by this project, one per line.                                                                                                       
  2 
  3 meteor-base@1.2.0             # Packages every Meteor app needs to have
  4 mobile-experience@1.0.5       # Packages for a great mobile UX
  5 mongo@1.3.0                   # The database Meteor supports right now
  6 reactive-var@1.0.11            # Reactive variable for tracker
  7 tracker@1.1.3                 # Meteor's client-side reactive programming library
  8 
  9 standard-minifier-js@2.2.0    # JS minifier run for production mode
 10 es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
 11 ecmascript@0.9.0              # Enable ECMAScript2015+ syntax in app code
 12 shell-server@0.3.0            # Server-side component of the `meteor shell` command
 13 
 14 static-html
 15 aldeed:collection2-core@2.0.0
 16 aldeed:schema-index
 17 matb33:collection-hooks
 18 reywood:publish-composite
 19 universe:i18n
 20 accounts-base@1.4.0
 21 
 22 nathantreid:css-modules@2.8.0
 23 accounts-password@1.5.0
 24 dburles:collection-helpers
 25 alanning:roles
 26 dburles:factory
 27 aldeed:schema-deny
 28 check@1.2.5
 29 tmeasday:publish-counts
 30 email@1.2.3
 31 mdg:validated-method
 32 tunifight:loggedin-mixin
 33 ddp-rate-limiter@1.0.7
 34 standard-minifier-css@1.3.5
 35 rlivingston:simple-schema-mixin
 36 percolate:migrations
 37 gwendall:impersonate
 38 ziarno:restrict-mixin
 39 dynamic-import@0.2.0

package.json

{
  "dependencies": {
    "anchorate": "^1.1.0",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^1.0.3",
    "caniuse-db": "^1.0.30000746",
    "classnames": "^2.2.5",
    "deep-extend": "^0.5.0",
    "faker": "^4.1.0",
    "file-saver": "^1.3.3",
    "filestack-react": "^1.3.8",
    "lodash": "^4.17.4",
    "message-box": "0.1.1",
    "meteor-node-stubs": "~0.3.2",
    "meteor-subdomain-persistent-login-fixed": "^1.0.1",
    "mobx": "^3.3.1",
    "mobx-logger": "^0.6.0",
    "mobx-react": "^4.3.3",
    "mobx-task": "^0.2.3",
    "moment": "^2.19.1",
    "moment-timezone": "^0.5.13",
    "postcss-responsive-type": "^1.0.0",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-emoji-render": "^0.4.2",
    "react-helmet": "^5.2.0",
    "react-loadable": "^5.2.2",
    "react-markdown": "^2.5.0",
    "react-moment": "^0.6.5",
    "react-required-if": "^1.0.1",
    "react-router-dom": "^4.2.2",
    "react-tap-event-plugin": "^3.0.2",
    "react-toastify": "^2.1.2",
    "react-toolbox": "^2.0.0-beta.12",
    "react-transition-group": "^2.2.1",
    "recompact": "^3",
    "rollbar": "^2.2.9",
    "simpl-schema": "^0.3.2",
    "slugify": "^1.2.1",
    "uniforms": "^1.22.0-rc.1"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.6.0",
    "babel-preset-meteor": "^6.26.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-root-slash-import": "^1.1.0",
    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "mocha": "^4.0.1",
    "node-sass": "^4.5.3",
    "postcss-cssnext": "2.11.0",
    "postcss-each": "^0.10.0",
    "postcss-import": "^11.0.0",
    "postcss-mixins": "^6.1.1",
    "postcss-modules-extract-imports": "^1.1.0",
    "postcss-modules-local-by-default": "^1.2.0",
    "postcss-modules-scope": "^1.1.0",
    "postcss-modules-values": "^1.3.0",
    "postcss-simple-vars": "^4.1.0",
    "sass-lint": "^1.12.0"
  },
  "babel": {
    "plugins": ["transform-class-properties"]
  },
  "cssModules": {
    "postcssPlugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-each": {},
      "postcss-cssnext": {},
      "postcss-responsive-type": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {},
      "postcss-simple-vars": {
        "fileOptions": ["style-globals.json"]
      }
    },
    "extensions": ["scss", "css"],
    "globalVariables": ["style-globals.json"]
  }
}

.babelrc:

{
  "presets": [["env", { "targets": { "node": "current" } }], "react", "stage-2"],
  "plugins": ["babel-root-slash-import", "transform-decorators-legacy", "transform-class-properties"]
}

I use styles like that:

import styles from './somemodule.scss'

const ReactModule = () => <div className={styles.test} />

@nathantreid if you could help soon, it would get me out of deep shithole, since I just can't release my project after Meteor 1.6 came around (old version doesn't builds in my CI process, i have to upgrade to 1.6 as it seems)

[neoromantic]

I suppose, I might be lacking some babel plugin, but all was working great on 1.5 :(

[neoromantic]

I've created demo repository with just clean Meteor 1.6, meteor-css-modules and Babel with env and react presets. Here it is: https://github.com/neoromantic/meteor-cssmodules-1.6

I can't get imported styles to work there either. What am I missing? Anyone?

[neoromantic]

While fighting with this, I've discovered a bug in Meteor 1.6 (rather unsettling) that prevented me from building my (1.5) app. So, please nevermind my plead for urgency and sorry for that also, nerves :)

But problem stands, can't get css-modules to work on 1.6.

[timbrandin]

I have the same problem. I'm curious if this have to do with the fact that node 8 supports import and export natively? And meteor removed Reify that made it possible before.

[merrington]

I ran into the same thing - it seems like a problem with the default export.

Until it gets fixed, I found a quick fix (depending how many places you are importing styles) is to import styles by it's name instead of default, e.g.:

import { styles } from './styles.m.css';

[timbrandin]

#106 (comment) works for me, and using sass/scss. 💃
in case you have multiple imports just:

import { styles } from './styles.scss';
import { styles as table } from './table.scss';

[neoromantic]

Wow, cool. But is it meteor-css-modules bug or something regarding node8/babel?

Seems like no brainer to replace it all in my code, but feels wrong to do that not knowing why it is so.

In any case, thanks a lot, guys.

[neoromantic]

However, react-toolbox doesn't work :(

Do you have any idea on how to work around that one? I use react-toolbox installed with npm.

[akanix42]

It looks like this is a change in 1.6. I've chimed in on a Meteor issue report, so we'll wait to see what the feedback is. In the meantime, you can also import the default styles by appending .js to your file path, e.g.
import styles from './somemodule.scss.js'. Unfortunately I don't think npm packages will work until this is resolved since the default exports won't load properly for them.

[warmbowski]

FYI, I get this same problem using css-modules with typescript (replaced babel with barbatus/typescript). I needed to follow comments above as well and import { styles } from ./my-css.css as opposed to import * as styles from ./my-css.css as I typically would in typescript.

[neoromantic]

@nathantreid so, did anyone managed to get react-toolbox working well with meteor 1.6 and css-modules 3.0.0?

I couldn't. Is there a point in trying?

[akanix42]

Meteor 1.6.1 included the imports fix, so I've published v3.0.1 to support it (and fix a couple of other bugs). @neoromantic react-toolbox now works in my tests!

[thoomasbro]

Hi, thanks for the nice work. I tried to install v3.0.1 but there seems to be a conflict :
Conflict: Constraint ecmascript@0.10.0 is not satisfied by ecmascript 0.9.0.
ecmascript@0.10.0 <- nathantreid:css-modules 3.0.1

Here is the list of installed packages:

accounts-google                    1.3.1  Login service for Google accounts
accounts-password                  1.5.0  Password support for accounts
accounts-ui                        1.2.0* Simple templates to add login widgets to an app
blaze-html-templates               1.1.2  Compile HTML templates into reactive UI with Meteor Blaze
check                              1.2.5* Check whether a value matches a pattern
cottz:publish-relations            2.0.8  Edit your documents before sending without too much stress
ecmascript                         0.9.0* Compiler plugin that supports ES2015+ in all .js files
email                              1.2.3  Send email messages
es5-shim                           4.6.15* Shims and polyfills to improve ECMAScript 5 support
google-config-ui                   1.0.0  Blaze configuration templates for Google OAuth.
jagi:astronomy                     2.5.2  Model layer for Meteor
jagi:astronomy-timestamp-behavior  2.0.0  Timestamp behavior for Meteor Astronomy
meteor-base                        1.2.0* Packages that every Meteor app needs
mobile-experience                  1.0.5  Packages for a great mobile user experience
mongo                              1.3.1* Adaptor for using MongoDB and Minimongo over DDP
msavin:mongol                      4.0.1  In-App MongoDB Editor.. now with improved third party package compatibility.
nathantreid:css-modules            3.0.0* CSS modules implementation. CSS for components!
react-meteor-data                  0.2.15  React higher-order component for reactively tracking Meteor data
reactive-var                       1.0.11  Reactive variable
service-configuration              1.0.11  Manage the configuration for third-party services
shell-server                       0.3.1  Server-side component of the `meteor shell` command.
standard-minifier-css              1.3.5* Standard css minifier used with Meteor apps by default.
standard-minifier-js               2.2.3* Standard javascript minifiers used with Meteor apps by default.
tracker                            1.1.3  Dependency tracker to allow reactive callbacks

I started with a fresh new meteor project, but can't make it work...