Media query is not contained in the Parallel layer when Parallel is imported as its own layer

[nathania-haryanto]

Hello, I'm trying to implement a dark mode feature for our project which uses the Atos Design System. The idea is to enable the user to manually toggle the app's theme, regardless of their system's current color scheme.

We have imported Parallel's CSS into our project as its own layer and intended to use its dark mode styling which is defined under the selector [data-theme=dark]. However, the prefers-color-scheme media-query from Parallel's CSS is somehow not contained in the Parallel layer. Hence, it has a higher priority than data-theme:

How could this be solved?

[Th3S4mur41]

There seems to be a bug in postcss that results in @media queries not being enclosed in the @layer block.

As a workaround for now, you could leave parallel on the default layer and only put 3rd party libraries in their own layer. Since Parallel is mostly using :where to work without specificity, that shouldn't have impact on your own styles.
This will fix the specificity issue within parallel and still be good enough to make parallel take precedence over 3rd party libraries