Css-loader: Way to disable classname changing

[mmjamal]

Hello

I have react component that generates divs with specific classnames - now i when i import the css - the css-loader seem to change the classnames and my generated dom classnames are not valid anymore - is there way to disable changing the classnames to unique ids and leave them as they are

[psimyn]

You can wrap them in a :global {} block, or disable modules in webpack config

example:

:global {
  .specific-classname {
    color: black;
  }
}

Or in webpack config check the ?modules parameter

[dwilt]

I've got some keyframes in a :global block and it's still changing those names. For example:

:global {
    @keyframes slideInUp {
        from {
            transform: translate3d(0, 100%, 0);
            visibility: visible;
        }

        to {
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes slideOutDown {
        from {
            transform: translate3d(0, 0, 0);
        }

        to {
            visibility: hidden;
            transform: translate3d(0, 100%, 0);
        }
    }

    .modal {
        position: fixed;
        z-index: 10;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: white;
    }

    .modal-enter {
        animation: slideInUp .5s cubic-bezier(0.23,1,0.32,1);
    }

    .modal-leave {
        animation: slideOutDown .35s cubic-bezier(0.23,1,0.32,1);
    }

}

compiles to:

@keyframes src-components-Modal-___Modal__slideInUp___xjx2Y {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes src-components-Modal-___Modal__slideOutDown___2zyuP {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.modal {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

.modal-enter {
  animation: slideInUp 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.modal-leave {
  animation: slideOutDown 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

This is incorrect, right? Notice how the class names are not being changed but the keyframes are.

[psimyn]

Might need different handling for keyframes.

Try @keyframes :global(slideInUp) {} (doesn't need to be nested in the other global)

Not sure if this is doc'd but saw it in a test

[dwilt]

Thanks for the idea. Didn't work though :(

@keyframes :global(slideInUp) {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes :global(slideOutDown) {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes :global(fadeIn) {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes :global(fadeOut) {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

threw this:

WARNING in ./~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/resolve-url-loader!./~/sass-loader!./src/components/Modal/Modal.scss
  resolve-url-loader cannot operate: CSS error
  /Users/dwilt/Projects/64i/64i-v2/src/components/Modal/Modal.scss:1:12: @keyframes missing name
  at error (/Users/dwilt/Projects/64i/64i-v2/node_modules/css/lib/parse/index.js:62:15)

[psimyn]

That looks like an issue with resolve-url-loader (are you sure you need that?)

That should work according to CSS Modules docs

[dwilt]

I guess I didn't need it. It might have been an artifact when setting up my environment. Nonetheless, that did work. Thanks @psimyn

[brunolm]

I have the same issue. In my case I'm doing:

app.css

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

And it is changing all classnames from bootstrap.

Is there a way to disable it but keep modules?

[mikegleasonjr]

@brunolm you can...

:global {
    @import 'bootstrap/dist/css/bootstrap.css';
}

BUT for me I load the sass files and the css produced includes curly brackets wrapping the first comment...

 {
  /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ }
  html {
  [...]

anyone knows why?

EDIT:

A trick can be:

:global div {
@import 'scss/bootstrap';
    // @import 'scss/material-design-lite';
}

It will generate an empty div at the beginning:

div {
  /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ }
  div html {

But I opted for 2 separate rules as explained here with the include option of the loader: http://stackoverflow.com/questions/35398733/css-modules-how-do-i-disable-local-scope-for-a-file

[kvieira90]

Also tried using the :global flag but to no avail. Background, I'm using Electrode with it's archtype mapping so most likely I have to override to disable modules in webpack. Just curious why the :global doesn't actually work when it should. Any help would be appreciated.

[Patricknew]

@kvieira90
did you fix this issue? I'm also using electrode. All classnames and id names are changed. Thank you.

[TrySound]

@Patricknew It's not an issue. If you want 1:1 exported mappings, just change localIdentName option to [local]. You will get the same classes. Or you can just disable modules and use regular css.

[mschipperheyn]

@TrySound there should be an easy way to locally force [local] indent naming (prevent processing). seems to be that a :global { } around pieces of css code would be the ideal approach for that.

[MrSaints]

I just encountered a similar issue. To adopt the above example, if I did:

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

I noticed the external styles are _hoisted_ out of the wrapper. Any idea why that might be happening?

_That is:_

// Bootstrap stuff
body { } ...

// The wrapper
div { } 

[TrySound]

@MrSaints because this behaviour was never allowed. Nobody said it should work.

[alexander-akait]

Original issue solved. Other post or duplicate https://github.com/webpack-contrib/css-loader/issues/243 or new proposal

[ashnur]

@Patricknew It's not an issue. If you want 1:1 exported mappings, just change localIdentName option to [local]. You will get the same classes. Or you can just disable modules and use regular css.

This is so not true, I get completely unnecessary underscores all over the place with [local]

[CaelanStewart]

If anybody here is wondering why this is happening to them, also make sure that you have not unintentionally passed: modules: true to 'css-loader' if you do not need the option enabled.

[evil-star]

With sass syntax is worked for me

.list
    &:global.ps--active-y
        ...styles