Prevent scoped class names via CLI

[MaffooBristol]

Hello,

I'm using css-modulesify like so:

browserify -t [babelify --presets es2015 --presets react --presets stage-0] -p [css-modulesify --global -o client2/public/bundle.css] -o client2/public/bundle.js client2/lib/main.jsx

... along with the require code:

import styles from 'react-virtualized/styles.css';

... however, this creates scoped class names such as ._node_modules_react_virtualized_styles__FlexTable__headerColumn, which breaks the CSS for the module. Please bear in mind that I'm quite new to react and browserify so I may just be being thick.

Is there a way of turning off the scoping from the command line? Or if not, is there something I'm missing that would make my components work normally with the scope?

Thanks Matt

[stoarca]

I'm also having trouble with the same issue. I'd like to disable the mangled class names for a single file that I'm importing.

[joshwnj]

Currently it's possible to use https://github.com/postcss/postcss-nested to allow marking blocks as "global". Eg.

:global {
  .a { ... }
  .b { ... }
}

The output will contain .a and .b, without any scoping.

Ideally we'd be able to do

:global {
  @import "file.css";
}

however it looks like there are some ordering issues around that. Something to look into!

[klarkc]

@joshwnj How can I use the global with ES6 modules?

In my code I have:

import 'bootstrap/dist/css/bootstrap.css';

that build to a bundle.css. But the bundle have the prefixes.

with postcss-nested I should use this?

:global {
    @import "bootstrap/dist/css/bootstrap.css"
}

[klarkc]

I found this answer: https://github.com/postcss/postcss-import/issues/179#issuecomment-264287790

But it seems not working with css-modulesify:

Error: Cannot find module '!node_modules/bootstrap-vue/dist/bootstrap-vue.css' from ...

[klarkc]

I found a workaround using generateScopedName option:

b.plugin(modulesify, {
    output: path.resolve(
      dirs.buildClient,
      'bundle.css',
    ),
    global: true,
    generateScopedName: function(name, filename) {
      var matches = filename.match(/^\/node_modules/);
      if (matches) return name;
      if (process.env.NODE_ENV === 'production') {
        return modulesify.generateShortName(name, filename);
      } else {
        return modulesify.generateLongName(name, filename);
      }
    }
  });