search

akanix42 / meteor-css-modules

MIT License
92 stars 20 forks source link

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

Open neoromantic opened 6 years ago

neoromantic commented 6 years ago

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 commented 6 years ago

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

neoromantic commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

https://github.com/nathantreid/meteor-css-modules/issues/106#issuecomment-341252464 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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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

akanix42 commented 6 years ago

@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 commented 6 years ago

thanks, seems to work like a charm!

warmbowski commented 6 years ago

I updated to meteor@1.6.1 and nathantreid:css-modules@3.0.1. 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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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

xlinbsd commented 6 years ago

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