Getting started instructions for NPM are missing something

[foolip]

Trying to follow https://open-props.style/#getting-started to self-host open-props and avoid a network connection to unpkg.com.

The instructions are npm install open-props and then doing either @import "open-props/style"; or @import "open-props/open-props.min.css";. It's not clear when to use which, but neither will work out of the box. Some file copying or bundling step is missing here.

[foolip]

I've tried using PostCSS and ran into a similar problem, where neither @import "open-props/postcss/style"; nor @import "open-props/postcss/index.css"; work. There's no directory called "postcss" anywhere so this is expected.

[argyleink]

node resolutions are tricky these days:

1. @import "open-props/style" is for modern NPM bundlers that can read the exports field of package.json. it's a map of shorthand references to the actual file. some bundlers dont understand exports, so they fail to resolve this path.
2. @import "open-props/open-props.min.css" points directly to the file as was downloaded from npm. all bundlers understand this because it's not using any alias'
3. @import "open-props/postcss/style" more about exports and npm resolutions here, but also, the postcss route is for when you have a browserlist config that you want to impact the open props bundle, but it's otherwise a more complicated route. postcss isnt required to import the props, if this was your reason for trying postcss was to help with the module resolution.

to me it sounds like your bundler is struggling to resolve the CSS npm dependency. this stuff can be tricky, and honestly it's getting trickier every day as more and more options become available, and alias' / convenience methods.

[foolip]

I didn't have a bundler at all to begin with, because I'm not a real web developer :)

Using Vite I got it to work, but maybe the docs could say something about assumptions or prerequisites?

[argyleink]

i'll not it for the redesign, to make the paths easier to understand based on contextual usage type 👍🏻

sounds like 2 groups arent explained enough as to why they're separate