Empty styles

[kevinehosford]

This plugin seems like the tool I need, but the output always seems to be empty.

var styles = {} // this is always empty

Could this be an issue with the .babelrc?

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    [
      "css-modules-transform", {
        "camelCase": true,
        "extractCss": "./build/styles/app.css",
        "generateScopedName": "[name]__[local]___[hash:base64:5]",
        "prepend": [
          "postcss-cssnext",
          "postcss-extend",
          "postcss-import"
        ]
      }
    ]
  ]
}

[andismith]

Not sure if this is the same problem as you have, but I had this problem when I turned on --inspect in Node.js and had a debugger window open. The Node application wouldn't end properly reporting Waiting for the debugger to disconnect....

The extractCss output wasn't generated as it was waiting for the debugger to close, and force closing the app didn't generate the CSS.

[kevinehosford]

Hm. I wasn't using --inspect, just not seeing any generated output.

[jjuutila]

With the setup we have, I noticed that // styled comments in SCSS files will somehow break the plugin and cause an empty styles object.

[matthewwithanm]

Wow, thanks for the tip @jjuutila!

It seems like this mostly works because the CSS parser is able to handle most SCSS syntax. But those inline comments break it (specifically, for us it was a single quote in a // comment, causing a CssSyntaxError). To correctly support SCSS, it looks like you need to configure a preprocessor:

// ./path/to/module-exporting-a-function.js
var sass = require('node-sass');
var path = require('path');

module.exports = function processSass(data, filename) {
    var result;
    result = sass.renderSync({
        data: data,
        file: filename
    }).css;
    return result.toString('utf8');
};

What a footgun! #104 seems relevant.