Skip to content

Fails on Radium-style media queries #2

Open
@cryptoquick

Description

@cryptoquick

First of all, awesome plugin, it's a lifesaver, I was able to refactor away most of my FS calls on backend components, and remove inlined CSS blocks from my frontend components. I'm not using Webpack, but a static site generator of my own devising.

Unfortunately, code like this will fail in the parser, and I'm unsure why:

.bg {
    text-align: center;

    @media (min-width: 800px) {
        height: 580px;
    }
}

I know that's not proper CSS syntax, but it's the kind of syntax that Radium / React-Styling want to describe media queries.

Here's the error in full:

/Users/hunter/GitHub/slackpass.io/node_modules/css/lib/parse/index.js:62
    var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
              ^
Error: /Users/hunter/GitHub/slackpass.io/components/Background.js: undefined:5:2: missing '}'
    at error (/Users/hunter/GitHub/slackpass.io/node_modules/css/lib/parse/index.js:62:15)
    at declarations (/Users/hunter/GitHub/slackpass.io/node_modules/css/lib/parse/index.js:259:26)
    at rule (/Users/hunter/GitHub/slackpass.io/node_modules/css/lib/parse/index.js:560:21)
    at rules (/Users/hunter/GitHub/slackpass.io/node_modules/css/lib/parse/index.js:117:70)
    at stylesheet (/Users/hunter/GitHub/slackpass.io/node_modules/css/lib/parse/index.js:81:21)
    at module.exports (/Users/hunter/GitHub/slackpass.io/node_modules/css/lib/parse/index.js:564:20)
    at rework (/Users/hunter/GitHub/slackpass.io/node_modules/rework/index.js:27:21)
    at PluginPass.exit (/Users/hunter/GitHub/slackpass.io/node_modules/babel-plugin-transform-css-import-to-string/lib/index.js:19:44)
    at newFn (/Users/hunter/GitHub/slackpass.io/node_modules/babel-traverse/lib/visitors.js:310:19)
    at NodePath._call (/Users/hunter/GitHub/slackpass.io/node_modules/babel-traverse/lib/path/context.js:78:18)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions