gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

Does it work with Browserify? #263

Open sryze opened 5 years ago

sryze commented 5 years ago

Does this plugin work with babelify? (browserify plugin for babel)

I've been trying to make it work but no luck, here is my Gulp task:

gulp.task('react', function() {
    const b = browserify({
        entries: path.join(webContentDir, 'app/index.js'),
        extensions: ['.js', '.jsx'],
        debug: true,
        transform: [
            babelify.configure({
                presets: [
                    '@babel/preset-env',
                    '@babel/preset-react'
                ],
                plugins: [
                    ['@babel/transform-react-jsx', {'pragma': 'h'}],
                    ['babel-plugin-react-css-modules']
                ]
            })
        ]
    });
    return b.bundle()
        .pipe(source(path.join(webContentDir, 'dist/bundle.js')))
        .pipe(gulp.dest('.'));
});

When I import a CSS file it seems to not process it with this plugin at all (as if I don't include it):

.answer-input {
^
ParseError: Unexpected token

Any ideas why it's not working?

        "@babel/core": "^7.4.5",
        "@babel/plugin-transform-react-jsx": "^7.3.0",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-react": "^7.0.0",
        "babel-plugin-react-css-modules": "^5.2.6",
        "babelify": "^10.0.0",
        "browserify": "^16.2.3",