Compound query produces invalid syntax

[nickstanish]

Getting an incorrect expansion when custom media queries are combined

@custom-media --screen only screen;
@custom-media --md-and-larger1 --screen and (width >= 570px);
@custom-media --md-and-larger2 (--screen) and (width >= 570px);
@custom-media --md-and-larger3 only screen and (width >= 570px);

@media (--md-and-larger1) {
  body {
    background-color: red;
  }
}
@media (--md-and-larger2) {
  body {
    background-color: yellow;
  }
}
@media (--md-and-larger3) {
  body {
    background-color: green;
  }
}

Actual Output vs Expected Output:

- @media only screen(min-width: 570px) {
+ @media only screen and (min-width: 570px) {
  body {
    background-color: red;
  }
}
- @media only screen(min-width: 570px) {
+ @media only screen and (min-width: 570px) {
  body {
    background-color: yellow;
  }
}
@media only screen and (min-width: 570px) {
  body {
    background-color: green;
  }
}

[amanagr]

Please fix this issue.

[wesleyboar]

I think just the combining works, there's something more specific to the problem.

---

Debugging

1. I do get exactly the same results when I test the problem case.
2. I get the same problem even if I remove the word only.
3. I think the incorrect expansion occurs when both "custom media queries are combined" and something else…

I thought perhaps use of screen in the custom media query could be the problem, but I notice screen in a custom media query in a test case (and I assume the test cases are working).

I thought perhaps use of media query ranges in the custom media query could be the problem, but using min-width: 570px produces the same incorrect expansion.

---

Testing Just Combining, NOT Using only screen

Input

@custom-media --wide-window (992px <= width < 1200px);
@custom-media --compound-query (--wide-window);

@media (--wide-window) {
  ._test{ background-color:red; }
}
@media (--compound-query) {
  ._test{ background-color:green; }
}

Output

@media (min-width:992px) and (max-width:1199px){._test{background-color:red}}@media (min-width:992px) and (max-width:1199px){._test{background-color:green}}

.postcssrc.yml

plugins:
  postcss-import:
    path:
      - './taccsite_cms/static/site_cms/css/src'
  postcss-extend: {}
  # [...]
  postcss-env-function:
    importFrom:
      - './taccsite_cms/static/site_cms/css/src/_themes/export.js'
  postcss-preset-env:
    # SEE: https://github.com/csstools/postcss-preset-env#features
    stage: false
    # SEE: https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js#L35
    features:
      custom-media-queries: true
      media-query-ranges: true
      # RFE: Fix bug on the Internet so we can use these reliably
      # SEE: https://github.com/postcss/postcss-custom-selectors/issues/40
      custom-selectors: true
  cssnano:
    preset:
      - 'default'
      -
        # [...]
        discardDuplicates:
          exclude: true
        mergeRules:
          exclude: true

package.json

{
  /* ... */
  "devDependencies": {
    "async": "^3.2.3",
    "cssnano": "^5.1.5",
    "dotenv": "^8.6.0",
    "npm-watch": "^0.7.0",
    "postcss": "^8.4.12",
    "postcss-cli": "^9.1.0",
    "postcss-css-variables": "^0.18.0",
    "postcss-extend": "^1.0.5",
    "postcss-import": "^14.1.0",
    "postcss-preset-env": "^7.4.3"
  }
  /* ... */
}
...

[romainmenke]

Can confirm this issue but I do not see a way to fix this in the current code as I am unable to find the root cause.

It might take a while before we are able to ship a fix for this :/

[romainmenke]

small update: this has been fixed, but not yet released.

todo:

• release a new version of the plugin
• some time later, also release a new version of postcss-preset-env

[romainmenke]

@nickstanish It only took us almost 4 years but we finally have an update that resolves this issue!

v9 was just released : https://www.npmjs.com/package/postcss-custom-media

Do note that it is invalid to reference custom media queries without () :

@custom-media --md-and-larger1 --screen and (width >= 570px);

Custom media must always be wrapped in parentheses : (--screen)