consider the following setup <div class="highlight highlight-source-css notranslat

I am just using: postcss-import postcss-cssnext

custom media bug when nested about postcss-custom-media HOT 5 CLOSED

csstools commented on July 23, 2024

custom media bug when nested

from postcss-custom-media.

Comments (5)

MoOx commented on July 23, 2024

It's more an order issue. Be careful with the order of your transformation.

This is perfectly working in cssnext playground

I tested this

@media (--lg-viewport) {
  #Selector1 {
  }
}

#Selector2 {
  @media (--lg-viewport) {
  }
}

@custom-media --lg-viewport screen and (min-width: 60em);

got this

@media screen and (min-width: 60em) {
  #Selector1 {
  }
}

#Selector2 {
}

@media screen and (min-width: 60em) {
  #Selector2 {
  }
  }

from postcss-custom-media.

smuemd commented on July 23, 2024

I am just using:

postcss-import
postcss-cssnext

in that order.

could this possibly be an issue with the static site generator then? (using spike on this one.

from postcss-custom-media.

smuemd commented on July 23, 2024

I investigated further.
If I actually put everything in a single file it works for me too:

/*  single file works */
#Selector2 {
  @media (--lg-viewport) {
  }
}

@custom-media --lg-viewport screen and (min-width: 60em);

But I 've split things up in multiple directories. So its more like this

/* in css_modules/components-hero/lib/hero.css */
#Selector2 {
  @media (--lg-viewport) {
  }
}

/* in css_modules/theme-default/lib/theme.css */
@custom-media --lg-viewport screen and (min-width: 60em);

/* and finally in index.css */
@import 'components-hero';
@import 'theme-default';

Here is my tree:

├── css_modules
│   ├── components-hero
│   │   ├── index.css
│   │   └── lib
│   │       └── hero.css
│   └── theme-default
│       ├── index.css
│       └── lib
│           ├── default-map.css
│           └── default.css
└── index.css

Maybe postcss-import is the culprit?

from postcss-custom-media.

MoOx commented on July 23, 2024

Looks like yes.

from postcss-custom-media.

smuemd commented on July 23, 2024

Ok. Will Open the issue over there then.
Thanks

from postcss-custom-media.

Recommend Projects