erikras / erikras/react-redux-universal-hot-example

CSS Module composes with different file

Open
#184 30 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
2.5k
PR merge metrics
No merged PRs in 30d

Description

Hi,

Have you guys use `composes` feature of CSS Module? I have this error when I try to compose css class from different file.

```
/Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:209
[0] throw _iteratorError;
[0] ^
[0] SyntaxError: Unexpected token +
[0] at Object.parse (native)
[0] at module.exports.assets.style_modules.parser (/Users/jiratarinrith/codes/node/redux/erik/webpack/webpack-isomorphic-tools.js:46:42)
[0] at /Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:187:17
[0] at Array.reduce (native)
[0] at _loop (/Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:183:7)
[0] at populate_assets (/Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:197:4)
[0] at write_assets (/Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:59:2)
[0] at Compiler. (/Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/plugin.js:161:32)
[0] at Compiler.applyPlugins (/Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack/node_modules/tapable/lib/Tapable.js:26:37)
[0] at Watching._done (/Users/jiratarinrith/codes/node/redux/erik/node_modules/webpack/lib/Compiler.js:78:17)
```

Here's what I've tried.
- In `About.js`, add this require to the top of render() and add className to

``` javascript
const styles = require('./About.scss');
...

About Us


...
```
- Add `About.scss`

``` css
/* About.scss */
.verybig {
font-size: 60px;
}

.heading {
color: red;
composes: verybig;
}
```
- Works great so far. Now let's add one more file, text-underline.css

``` css
.text-underline {
text-decoration: underline;
}
```
- Adjust .heading class in `About.scss`

``` css
/* About.scss */
.verybig {
font-size: 60px;
}

.heading {
color: red;
composes: verybig;
composes: text-underline from "./underline.css"; /* <---------------- add this */
}
```

This will give error from webpack-isomorphic-tools. I guess it has something to do with how composes work and the parser function.

Any idea how to fix this?
@halt-hammerzeit @erikras

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.