Description
@geelen great job speaking at React Rally. We have been trying CSS Modules out in within an internal application. It seems as though building a bundle (sfx or normal) breaks css rules. The output bundle correctly provides a JS module with the appropriately generated class names that are loaded into the JavaScript. It does not include any css declarations with the generated class names.
I have a minimal example repository that shows the problem:
https://github.com/blittle/jspm-cssmodule-test
If you clone the repository and run the following:
npm run all- Runs npm install, jspm install, jspm bundle-sfx, and starts a static server on port 1337- Navigate to http://localhost:1337/ and notice the background style is applied.
- Navigate to http://localhost:1337/index.build.html and notice the background style is not applied.
The only difference between the two is the latter is running a jspm bundle-sfx script.
The app.js file is:
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './app.css!';
function App() {
return (
<div className={styles.myRule}>Hello</div>
)
}The app.css file is:
.myRule {
background: red;
}The output sfx bundle properly includes the generated className:
$__System.register("a4", [], function(_export) {
"use strict";
return {
setters: [],
execute: function() {
_export("default", {
"myRule": "_app__myRule"
});
}
};
});But there is no instance of the generated rule definition _app__myRule