michalkvasnicak / babel-plugin-css-modules-transform

Extract css class names from required css module files, so we can render it on server.
MIT License
326 stars 54 forks source link

`import './global.css'` does not work #60

Closed CrocoDillon closed 6 years ago

CrocoDillon commented 7 years ago

Hello, I have two one issue.

First issue is while all these work...

import foo from './global.css' // even if not using foo
require('./global.css')

...this one doesn't work:

import './global.css'

It just gives the following error:

Module parse failed: global.css Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Second issue might not be related to this project but is confusing the hell out of me. In global.css I tried the following selectors to get some custom properties in:

:root {}
:global :root {}
:global(:root) {}

But none of those work, the whole block just gets ignored and doesn't end up in the bundle.

Interesting though is that I can use the custom properties in the global.css file, they are just replaced with their values... as I'm typing this I realize it might be CSSNext doing this intentionally 😅

Hope you can help me out, thanks in advance 😁

Related PR that introduced ES6 import support is #32 by @GabeMedrash.

CrocoDillon commented 7 years ago

Actually it seems like there are more issues with the import syntax. imports in nested components didn't end up in the bundle, require seems to work fine.

Update: after disabling CSSNext import works fine in nested components as well 😲 (as long as it's not import './foo.css' but import foo from './foo.css' that is, even if you don't use foo)

michalkvasnicak commented 6 years ago

@CrocoDillon this is probably a problem with postcss and not this plugin. This is just a wrapper around css-modules-require-hook. Related PR is merged so does it resolve this issue?