Breaks with css-modules and React about cq-prolyfill HOT 7 CLOSED

Using :global fixes this issue. For example:

&:global(:container(width >= 18em)) {}

However, it still seems to be failing when there is some class change on the element (adding a class .active, for example). The CSS breaks in this case, as the container query disappears from the HTML element. Later, though, if the viewport is resized, everything goes back to normal.

from cq-prolyfill.

The PostCSS plugin converts the container query to an escaped class name, e.g. from :container(width < 10em) to .\:container\(width\<10em\) so it looks like a regular class name. Maybe it helps if you let the cq-prolyfill-plugin run after the css modules plugin.

If that doesn’t help, could you give me a quick example how I can reproduce this issue?

from cq-prolyfill.

@rulych is correct, using global works off the bat until something changes the class.

I tried moving the the css modules plugin to only process after but it doesn't work. I'll put the partial configs below:

webpack:

module: {
    loaders: [
      {
        test:   /\.css$/,
        loader: 'style-loader!css-loader?modules!postcss-loader'
      }
}
...
postcss: [
  require('postcss-nested'),
  require('cq-prolyfill/postcss-plugin')
]

component:

import React from 'react';

import styles from './styles.css';

export default ({ }) => (
  <div className={styles['card-list']}>
    <div className='res'>
      <button>HELLO</button>
    </div>
  </div>
);

styles.css (with global workaround)

.card-list {
  &:global(:container(width >= 18em)) {
    background-color: red;
  }
}

from cq-prolyfill.

I think the issue with using the :global is more a problem with using react. React sets the classes according to what css modules returns as class names, which does not seem to include the :container(...) but even if it did, the cq-prolyfill contains code that adds/removes classes to/from elements, which is generally very bad form for react.

from cq-prolyfill.

You could take a look at react-container-query-container from @VinSpee how it works there. Im not very familiar with React so I don’t know if it’s bad practice to change class names outside React code.

from cq-prolyfill.

Yeah alright. Which sucks because I really like cq-prolyfill. Here's to hoping it becomes a standard.

from cq-prolyfill.

Why was this issue closed when it was not resolved?

from cq-prolyfill.