alternative for shadows props without dependency on media props (e.g. custom media queries / PostCSS)

[thescientist13]

I noticed that the file for shadows props depends on the media props file. However, the website states that these media props can only be used with a PostCSS plugin.
https://open-props.style/#media-queries

For those of not using PostCSS is there a way to get the shadow styles without also pulling in those media styles? I'm currently just trying to opt-in one prop file at a time.

/* src/styles/theme.css */
@import "../../node_modules/open-props/src/props.borders.css";
@import "../../node_modules/open-props/src/props.fonts.css";
@import "../../node_modules/open-props/src/props.shadows.css";
@import "../../node_modules/open-props/src/props.sizes.css";

Thanks in advance!

[argyleink]

hi!

looks like youre using the PostCSS files in your import: @import "../../node_modules/open-props/src/props.shadows.css";. this path you shared is specifically to the PostCSS file, which as an author would mean you're going to run PostCSS on them.

if you're not using PostCSS, you can import the files that have already been processed by PostCSS (which are the default exports). instead use @import "open-props/shadows"; or @import "../../node_modules/open-props/shadows.min.css"; as these import paths grab the processed files.

tldr; you can totally use the shadows without PostCSS, you just need to import a different shadows file: https://unpkg.com/browse/open-props@1.7.8/shadows.min.css

[thescientist13]

Ah, excellent! Thank you so much for the explanation and the pointer in the right direction, everything is working great now 💯