Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty styles #92

Open
kevinehosford opened this issue Jul 25, 2018 · 4 comments
Open

Empty styles #92

kevinehosford opened this issue Jul 25, 2018 · 4 comments

Comments

@kevinehosford
Copy link

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
Copy link

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
Copy link
Author

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

@jjuutila
Copy link

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
Copy link

matthewwithanm commented Aug 21, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants