Cannot get open-props normalize to work with postcss

[lschierer]

I am considering using open-props with a new project, but I am having trouble with the examples on the website.

I've tried both

@import "open-props/normalize";

and

@import "open-props/postcss/normalize";

in my stylesheet after configuring my postcss.config.js

import postcssImport from "postcss-import";
import cssnano from "cssnano";
import autoprefixer from "autoprefixer";
import postcssJitProps from "postcss-jit-props";
import OpenProps from "open-props";

/** @type {import('postcss-load-config').Config} */
export default {
  plugins: [postcssImport(), postcssJitProps(OpenProps), autoprefixer, cssnano],
};

as long as I do not import, this config properly grabs the styles from open-props, but as soon as there is an import from node_modules, it fails saying it cannot find it.

CssSyntaxError: postcss-import: /Users/lschiere/schierer/RandomUnfinishedThoughts/packages/greenwood/src/styles/luke.css:1:1: Failed to find 'open-props/postcss/normalize'
  in [
    /Users/lschiere/src/RandomUnfinishedThoughts/packages/greenwood/src/styles
  ]

> 1 | @import "open-props/postcss/normalize";
    | ^

I am a bit at a loss at how to configure postcss to properly resolve.

I realize that this is not fully a problem for open-props, postcss itself could use with MUCH better documentation, but the example configuration on the website ought to work, and as best I can tell, doesn't.

I'm using node 22.13.0 and tsx v4.19.2 (for typescript support) with pnpm 10.1.0 with my package.json configured with type: module and I'm on an OSX system. If you need other details, let me know.

[argyleink]

looks to me like the node resolution is failing indeed, so your bundler or pnpn (not sure which) don't like the "exports" from package.json. this kind of path open-props/normalize isnt to a file, but in package.json it specifies (via a standardized node syntax) that open-props/normalize points to open-props/normalize.min.css. you can bypass this exports/alias resolution by providing the direct full import url by something like @import "open-props/normalize.min.css";.

annoying how these convenience features, like having nice and short import urls via aliases, come back to waste so much time. sorry you're running into this and hope this comment helps!.

[thescientist13]

I think the issue here is that the postcss-import plugin does not support export maps - postcss/postcss-import#492