Syntax Error on @container Queries

[Bryan Jones]

Consider this snippet of CSS:

@container (min-width: 700px) {
    color: blue;
}

If you attempt to run postcss-csso 6.0.1 on a file containing this snippet, you'll get the following error:

CssSyntaxError: postcss-csso: /main.css:1:11: ")" is expected

> 1 | @container (min-width: 700px) {
    |           ^
  2 |   color: blue;
  3 | }

Other PostCSS-based tools such as Autoprefixer and PurgeCSS don't have a problem with @container. I'm unsure if the issue lies in the conversion to the csso-compatible AST that postcss-csso performs or if the issue is with CSSO itself. As a first step, I'm filing the report here.

[Zach Wegrzyniak]

With postcss-csso@6.0.1 and postcss@8.4.18 and

postcss = require('postcss');
csso = require('postcss-csso');

postcss([
    csso
]).process('@container (min-width: 700px) { .main { color: #FF0000; } } .b { color: rgba(255, 0, 0, 1) }').then((result) => {
        console.log(result.css);
        // .a,.b{color:red}
}).catch(e => console.error(e));

I'm seeing the following stack trace

CssSyntaxError: postcss-csso: <css input>:1:11: ")" is expected
    at Input.error (PATH/node_modules/postcss/lib/input.js:148:16)
    at AtRule.error (PATH/node_modules/postcss/lib/node.js:60:32)
    at parseToCsso (PATH/node_modules/postcss-csso/cjs/postcssToCsso.cjs:24:31)
    at postcssToCsso (PATH/node_modules/postcss-csso/cjs/postcssToCsso.cjs:56:23)
    at Array.map (<anonymous>)
    at appendChildren (PATH/node_modules/postcss-csso/cjs/postcssToCsso.cjs:12:39)
    at postcssToCsso (PATH/node_modules/postcss-csso/cjs/postcssToCsso.cjs:34:20)
    at OnceExit (PATH/node_modules/postcss-csso/cjs/index.cjs:10:25)
    at LazyResult.runAsync (PATH/node_modules/postcss/lib/lazy-result.js:433:21)
    at LazyResult.async (PATH/node_modules/postcss/lib/lazy-result.js:221:30) {

Logging the config at PATH/node_modules/postcss-csso/cjs/postcssToCsso.cjs:24:31

function parseToCsso(css, config, postcssNode) {
    try {
        console.error({config})

produces

{ config: { context: 'stylesheet' } }
{ config: { context: 'atrulePrelude', atrule: 'container' } }

Edit

The config argument is almost the same as the media equivalent.

{ config: { context: 'atrulePrelude', atrule: 'media' } }

Switching the atrule from 'container' to 'media' gets over the initial syntax error at least. This might be a csso bug.

diff --git a/lib/postcssToCsso.js b/lib/postcssToCsso.js
index 315b4ca..77adcf8 100644
--- a/lib/postcssToCsso.js
+++ b/lib/postcssToCsso.js
@@ -50,7 +50,7 @@ function postcssToCsso(node) {
                 loc: getInfo(node),
                 name: node.name,
                 prelude: node.params
-                    ? parseToCsso(node.params, { context: 'atrulePrelude', atrule: node.name }, node)
+                    ? parseToCsso(node.params, { context: 'atrulePrelude', atrule: node.name === 'container' ? 'media' : node.name }, node)
                     : null,
                 block: null
             };
diff --git a/test/test.js b/test/test.js
index b9cf2ca..94b8ff3 100644
--- a/test/test.js
+++ b/test/test.js
@@ -205,6 +205,14 @@ describe('ast transformations', () => {
         [
             '.test { padding-top: 1px; padding-right: 2px; padding-bottom: 1px; padding-left: 2px }',
             '.test{padding:1px 2px}'
+        ],
+        [
+            '@media (min-width: 600px) { .media { width: 150px} }',
+            '@media (min-width:600px){.media{width:150px}}'
+        ],
+        [
+            '@container (min-width : 700px) { .main { width: 200px } }',
+            '@container (min-width:700px){.main{width:200px}}'
         ]
     ];

[Ted Whitehead]

I was also getting the same error but strangely there’s no issue when I run it through the web interface https://css.github.io/csso/csso.html

FWIW my project already uses Gulp so I switched to https://github.com/ben-eb/gulp-csso and that seems to work fine.

[Aleksander Grygier]

i also have this issue in my SvelteKit project

[Mister-Hope]

A similar issue here: vuepress/core#1349

[Patrick Cate]

Running this issue as well. Using with gulp-sass but I don't think that is a factor.

[Jonathan Schofield]

I first became aware of this issue last week when I tried to write @container queries inside Sass files managed by Codekit (which is made by @bdkjones who raised this thread).

(I had previously used @container queries outside of that environment.)

It’s a shame this issue remains unresolved after 16 months and almost a year after container queries officially arrived in Firefox :(

[timkinali]

Same issue here.

[Oliver Georgi]

Same here

[Andy McCray]

Experiencing this issue using Tailwind’s first-party container queries plugin, compiled via CodeKit.

[Luis Pato]

I am having the same issue... :(

[Jonathan Schofield]

In case it helps anyone in this thread … although not Bryan's excellent app :(
…

I’ve moved my CSS compilation to Lightning CSS.

[AlChernova]

I am having the same issue... :(

[Andy McCray]

Still experiencing this issue which, alas, means I can't write container queries.

[Sergey]

It took me 3 hours of searching for information to find the answer, fix it already someone. How to use containers in the end when compiling via sass?