Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Help upgrading to 1.x

See original GitHub issue

Hi and thanks for this great Rollup plugin. It’s been working well for me.

I am looking to upgrade from version 0.5.6 to 1.2.7 but am having difficulty figuring out what changes I need to make.

My use case is a React app with CSS modules. The existing setup is below:

const cssExportMap = {};

postcss({
    plugins : [
        cssModules({
            getJSON(id, exportTokens) {
                cssExportMap[id] = camelcaseKeys(exportTokens);
            },
            // Rc-slider needs some global CSS classes defined
            globalModulePaths : [/node_modules\/rc-slider\/assets\/index.css/]
        })
    ],
    getExportNamed : true,
    getExport(id) {
        return cssExportMap[id];
    }
})

The main goal of this special config is to enabled named imports with the more idiomatic convention of camelcase names, avoiding the -- to $__$ conversion that this plugin does by default.

/* sheet.css */
.foo-bar { background : blue }

import { fooBar } from './sheet.css';

… much better than …

import { foo$__$bar } from './sheet.css';

This worked perfectly prior to 1.0.0. Now I see output like below.

lib/js/components/nav-bar/nav-bar.jsx
navSearchWrapper is not exported by lib/css/nav-bar.css
21:             React.createElement(
22:                 'div',
23:                 { className: style.navSearchWrapper },
                                       ^
24:                 React.createElement('input', { name: 'search', id: 'nav-search', placeholder: 'Search' }),
25:                 React.createElement(Icon, { svgInfo: searchIcon, width: '25', height: '25' })

Based on what I see in the README now, I tried using the modules option, as below.

postcss({
    modules : {
        getJSON(id, exportTokens) {
            cssExportMap[id] = camelcaseKeys(exportTokens);
        },
        // Rc-slider needs some global CSS classes defined
        globalModulePaths : [/node_modules\/rc-slider\/assets\/index.css/]
    },
    getExportNamed : true,
    getExport(id) {
        return cssExportMap[id];
    }
})

But there was no effect, the output remains the same. Based on some logging I tried, it seems that getExport() is no longer being called.

I’m happy to migrate to any other pattern that achieves the same end goal of importing classes as camelcased names. Any advice on how to upgrade would be much appreciated.