[class=^col-] could be mismatch and won't be exported by css-loader

[houkanshan]

Hi, I believe using [class=^col-] will lead to some problems:

1. If col- is not at the start of a class name, like class=" col-md-6" or class="first-xs col-md-6", then it will mismatch the selector.
2. When using css-loader, [class=^col-] won't be exported, because css-loader's CSS Module only works with class name selector. A typical user is react-flexbox-grid. I just posted a related issue there.

I'm thinking that maybe we could keep [class=^col-] and add all the explicit class names back?

Thank you!

[knulli]

I have the same issue. Right now [class=^col-] does not consider Joomla classes like class="custom col-md-3 col-xs-12".

This means I have to hard code the columns instead of controlling them from inside the CMS or override the selector in my template.css.

[jacargentina]

@evgenyrodionov Any chance to fix this? Having problems as user of react-flexbox-grid

[imevro]

Will dig on this week

[jacargentina]

@evgenyrodionov maybe on "this" week ? Please....

[imevro]

File issue in css-loader because it’s absolutely valid css code

[jacargentina]

@houkanshan are you sure this is a "css-loader" bug ? If so, please fill the issue there? Anyway @evgenyrodionov adding the classes would hurt anybody 😉

[houkanshan]

Hi, @evgenyrodionov , thanks for responding.

Since currently codesandbox.io doesn't support config webpack.config.js, I have to explain by text here.

Yeh, it's valid css code. And what css-loader + style-loader (with CSS Modules enabled) export will be like this:

<style>
...

[class^="col-"] {
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-basis: 100%;
  padding-right: var(--half-gutter-width, 8px);
  padding-left: var(--half-gutter-width, 8px);
  max-width: 100%;
}

...

._1fN_pog_-VsREObhSvH0-I { /* .col-xs-1 */
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

...
</style>

A screenshot of my project:

So when we use them in our project, like a react project, the code will be like this:

import style from 'flexboxgrid2/flexboxgrid2.css'

<div className={style['col-xs-1']}>I'm a Col guy</div>

And the generated html will be:

<div class="_1fN_pog_-VsREObhSvH0-I">I'm a Col guy</div>

Then the [class^="col-"] thing is lost.

And I thinks it's not css-loader's fault because CSS Modules is all about class name.

[imevro]

Got it, thanks