There was very recently a spec change from contain to container.

https://drafts.csswg.org/css-contain-3/#container-queries.

Change this:

.element {
  contain: layout inline-size;
}

To this:

.element {
  container: inline-size;
}

I'm seeing a lot of Forced reflow while executing JavaScript took 34ms in the console when adding this library.

Any hint what could be optimized?

I'm using [email protected] in a react application, and cqfill makes the build fail with the following error:

TypeError: [...]\node_modules\cqfill\polyfill\cqfill.mjs: Duplicate declaration "n"
> 1 | (({every:e,indexOf:t,slice:s}=Array.prototype [rest of the script...]

I unminified the content of the file and could pinpoint the location of the error:

TypeError: C:\DEV\GitHub\eclubpolimi.it\node_modules\cqfill\polyfill\cqfill.mjs: Duplicate declaration "n"
  25 |   y = () => {
  26 |       for (const [e, t, s, n] of d) {
> 27 |           const n = new Set();
     |                 ^
  28 |           for (const t of r) if (s(t, a.get(t))) for (const s of t.querySelectorAll(e)) n.add(s);
  29 |           const o = [];
  30 |           for (const e of n) {

This is the corresponding code https://github.com/jsxtools/cqfill/blob/main/src/export.js#L58
It looks like an issue with minification.

Hey, I tried to get this to work with lit, but failed: https://codepen.io/lazka/pen/ExWgrYb

I was wondering if I'm missing something or if this isn't supported?

Just a quick heads up, looks like the polyfill may be lacking the CH unit's support. I typically use this for max character length legibility (https://www.w3.org/TR/WCAG21/#visual-presentation), and noticed it wasn't supported currently. Falling back to REM for now is sufficient (but not exact - https://chrislachance.com/respecting-font-preferences-rem-isnt-the-answer). Figured I'd raise the issue any ways.

When I add multiple containers/contained elements on the page the polyfill behaves strange.
Would be nice to have a example for multiple containers / unit tests.

Example 1 (normal website): we have one (global) container and two contained
Variant 1: https://stackblitz.com/edit/cqfill-multiple-containers?file=index.html
Variant 2: https://stackblitz.com/edit/cqfill-one-container-multiple-contained-media?file=style.css
it works as expected then.

Example 2 (Component based development): - we have two containers and two contained (basically if you develop isolated component based > webcomponents, angular,.... it's always this case):
https://stackblitz.com/edit/cqfill-multiple-containers-multiple-components?file=index.html

only the first will work because of the --css-container variable?

I think the postcss plugin should process it > make a central container or use multiple --css-container variables

The only way I could successfully import cqfill into a ".svelte" file was like this:

<script>
    // Error: "Uncaught (in promise) TypeError: cqfill is not a function"    
    // import { cqfill } from "cqfill";

    import { cqfill } from '../../node_modules/cqfill/export/cqfill';

    cqfill();
</script>

Not sure if this is a problem with the module or something I'm doing.

My first time filing an open source issue, please go easy on me :).

Using cqfill with PostCSS, when i leave a whitespace between @container and (RULE), the generated CSS code works. But when I remove the whitespace

@container(min-width: 700px) {
  .contained {
    /* styles applied when a container is at least 700px */
  }
}

which i think is valid, then the generated CSS become

@media--css-container and (min-width: 700px) {
...
}

The whitespace between @media and --css-container is gone and it does not work anymore.

Your thought on this ?

The docs indicate that I should be able to manually apply the polyfill to a shadow root by importing a named export function called cqfill:

import { cqfill } from 'cqfill'

cqfill() /* cqfill(document); cqfill(shadowRoot) */

However, when I attempted to do this, Webpack gave me an error saying that cqfill had no exports. I ended up having to do the following in order to import the cqfill function:

import { cqfill } from 'node_modules/cqfill/export/cqfill.cjs'

cqfill(shadowRoot)

I ended up using another library that worked with styled-components but wanted to post this issue here in case it affects others as well. :)

Could you please add a license file to this project? Thanks!

Hey, does this polyfill support to use ::before and ::after inside the contained element. I tried but it seems not working.