Support for container queries

[Dgcim1]

Is there any plan to support for container queries? Browser support is already good enough.

[mr150]

Hi there. Yes, we are currently working on a big release that will have JIT mode and add container queries in it as well

But you don't have to wait and add basic support yourself, right in your config! See the example below:

@use 'sass:map';
@use 'sass:meta';

@use 'mlut/tools' as ml with (
  $utils-data: (
    'utils': (
      'registry': (
        'Ctnt': (
          'properties': container-type,
          'keywords': (
            'is': inline-size,
          ),
        ),
      ),
    ),
  ),
  $at-rules-data: (
    'container': (
      'alias': 'c',
    ),
  ),
);

// using at-rule converter from @supports
ml.$at-rules-db: map.set(
  ml.$at-rules-db,
  'container',
  'converter',
  meta.get-function('convert-ar-supports', false, ml),
);

@include ml.apply('@c:mnw600_P5u Ctnt-is');

CSS output:

@container (min-width: 600px) {
  .\@c\:mnw600_P5u {
    padding: 1.25rem;
  }
}
.Ctnt-is {
  container-type: inline-size;
}

[Dgcim1]

Wow, thanks, it works! Looking forward to JIT mode!