Skip to content

Incorrect media query concats #512

@romainmenke

Description

@romainmenke
@import "ignore.css" (min-width: 25em);
/* ignore.css */
@import "http://css-screen" screen;

Becomes :

@import "http://css-screen" (min-width: 25em) and screen;

Should be :

@import "http://css-screen" screen and (min-width: 25em);

It might be interesting to adopt our media query parser : https://github.com/csstools/postcss-plugins/tree/postcss-preset-env--v8/packages/media-query-list-parser#readme

It has a typed object model which makes it easier to avoid these issues.


Alternatively it is possible to "special case" these keywords :

  • screen
  • print
  • all
  • not

And then sorting the media query lists :

  1. these keywords first
  2. everything else later
  3. join with and

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions