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 [email protected]             # Packages every Meteor app needs to have
  4 [email protected]       # Packages for a great mobile UX
  5 [email protected]                   # The database Meteor supports right now
  6 [email protected]            # Reactive variable for tracker
  7 [email protected]                 # Meteor's client-side reactive programming library
  8 
  9 [email protected]    # JS minifier run for production mode
 10 [email protected]                # ECMAScript 5 compatibility for older browsers.
 11 [email protected]              # Enable ECMAScript2015+ syntax in app code
 12 [email protected]            # Server-side component of the `meteor shell` command
 13 
 14 static-html
 15 aldeed:[email protected]
 16 aldeed:schema-index
 17 matb33:collection-hooks
 18 reywood:publish-composite
 19 universe:i18n
 20 [email protected]
 21 
 22 nathantreid:[email protected]
 23 [email protected]
 24 dburles:collection-helpers
 25 alanning:roles
 26 dburles:factory
 27 aldeed:schema-deny
 28 [email protected]
 29 tmeasday:publish-counts
 30 [email protected]
 31 mdg:validated-method
 32 tunifight:loggedin-mixin
 33 [email protected]
 34 [email protected]
 35 rlivingston:simple-schema-mixin
 36 percolate:migrations
 37 gwendall:impersonate
 38 ziarno:restrict-mixin
 39 [email protected]

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 [email protected] is not satisfied by ecmascript 0.9.0.
[email protected] <- 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...

[akanix42]

@thoomasbro Based on your package versions, it looks like you're running Meteor 1.6; for v3.0.1, you'll need to be on Meteor 1.6.1. Meteor 1.6.0.1 is still the recommended release (or it was yesterday, anyway) so to create a new project with Meteor 1.6.1, add the --release flag to your meteor command:

meteor create --release 1.6.1 my-project-name

You can use the same flag to update an existing project.

[thoomasbro]

thanks, seems to work like a charm!

[warmbowski]

I updated to [email protected] and nathantreid:[email protected]. The import works now and the components are styled for the normal js style import of import styles from ./my-css.css, but in the case of using typescript, the import needs to be in the format import * as styles from ./my-css.css to avoid a typescript error. Css imported in the typescript way still doesn't get processed and the components remain unstyled.

[akanix42]

@warmbowski I just ran a test with barbatus:typescript, and importing is working. You'll need to use the format import styles from ./my-css.css, the import * format will not work; more precisely, if you use import * as styles it'll work, but styles will be a subproperty (styles.styles).

To remove the cannot find module error, I added a generic typing for .css files:

declare module '*.css';

Sample project here: https://github.com/nathantreid/css-modules-barbatus-typescript-sample

[xlinbsd]

Hi, If there is always a problem for some on meteor 1.6.1.1 and meteor-css-modules 3.1.3 to properly display react-toolbox components, I have no problem using the fourseven:scss meteor package instead of npm node-sass in a react-toolbox project. It is the recommended sass package for meteor

I'm importing CSS in MyComponent.jsx with
import styles from './MyComponent.css'

Then I'm importing react-toolbox themes customizations like that
import theme from './_theme.css'

[akanix42]

@xlinbsd Can you elaborate on the issue you are experiencing (expected vs actual behavior) and provide a reproduction repo? Thanks!

[xlinbsd]

@nathantreid, I have no issue to demonstrate.
I figured out a possible solution to the @neoromantic issue with react-toolbox component displayed css-naked.