Css scope use data attribute not change ClassName

[lqzhgood]

Now. Css Scope solve is use different ClassName . Like this

The original

.btn{
     background: red
}

<div class="btn">xxx</div>

babel-plugin-react-css-modules

.TestApp_App_btn_md5abc{
     background: red
}

<div class="TestApp_App_btn_md5abc">xxx</div>

But this will make the class name very long and unfavorable for reading.

Use data attribute be better.

Data attribute

.btn[data-css-258219ab] {
    background: red
}

<div class="btn" data-css-258219ab>xxx</div>

And this is more conducive to the global coverage of attributes. Instead of worrying about ClassName for global attributes.

.btn[data-css-258219ab] {
    background: red
}

<div class="btn" data-css-258219ab>xxx</div>

Global Css coverage scope css

.btn {
    background: red !importent;
}

And Some special cases, such as using JS

document.querySelector(".btn").classList.remove("otherCssName")

[gajus]

Perhaps for another module, not for babel-plugin-react-css-modules.