csstools/postcss-custom-media

Importing file with :root declarations

quantuminformation opened this issue · 6 comments

quantuminformation commented

I take it using it like this is not supported, which was my 1st attempt?

@import "css-variables/breakpoints/generic.pcss";

generic:

:root {
  --small: 480px;
  --medium: 768px;
  --large: 992px;
  --xlarge: 1200px;
}

usage:

image

MoOx commented

This is not possible according to the specification. Custom props are depending on the DOM, as media queries don't.

quantuminformation commented

The reason I am doing it this way is I want to import variables that I share over npm:

https://github.com/quantumjs/css-variables/blob/master/breakpoints/generic.pcss

MoOx commented

Again, it does not make sense. Just declare multiple custom media queries.

quantuminformation commented

Thanks but it makes me feel more DRY by attempting to share these via npm.

I'm not sure what you mean by Custom props are depending on the DOM, as media queries don't.

MoOx commented

custom props are defined in a selector (:root is just html - and postcss-custom-properties limit those because of potential issues - see readme of this package).
media queries just depend on the media (desktop, mobile, tv etc) and are not related with the dom tree.
You can share custom media using npm like this https://github.com/cssrecipes/custom-media-queries

quantuminformation commented

Great thx, that will be fine for my needs.