Package subpath './open-props.min.css' is not defined by "exports" in ...<PATH>.../node_modules/open-props/package.json

[Andy Wardley]

I'm using the Props from CSS example from the website to configure PostCSS JIT Props.

// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');

module.exports = {
  plugins: [
    postcssJitProps({
      files: [
        require('open-props/open-props.min.css'),
      ]
    }),
  ]
}`

Getting the following error:

[plugin:vite:css] Package subpath './open-props.min.css' is not defined by "exports" in /Users/abw/js/vite-open-props/node_modules/open-props/package.json

I'm using pnpm, Vite (created with the react-ts variant) and sass.

Here's a test project demonstrating the problem: https://github.com/abw/vite-open-props

[Adam Argyle]

i see, the syntax you've used for the require statement is checking the exports for an alias but you've referenced the file directly. try switching require('open-props/open-props.min.css') to require('open-props/style') which is the export that points to the min.css props file.

also, you've double importing Open Props: once on line 3 (which is all the props as a js object) and then again inside the files array. you should pick one of the 2 strategies as you dont need both 🙂

[Andy Wardley]

Thanks for the response.

The postcss.config.js file that I'm using was copied directly from the "Props from CSS" example on the Open Props web site.

I commented out the redundant line 3 and tried changing 'open-props/open-props.min.css' to 'open-props/style' in line 9 as you suggested. That kinda worked... but then I was getting a different error:

17:15:55 [vite] Internal server error: Unexpected token ':'
  Plugin: vite:css
  File: /Users/abw/js/vite-open-props/src/App.css
      at Object.compileFunction (node:vm:352:18)
      at wrapSafe (node:internal/modules/cjs/loader:1031:15)
      at Module._compile (node:internal/modules/cjs/loader:1065:27)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
      at Module.load (node:internal/modules/cjs/loader:981:32)
      at Function.Module._load (node:internal/modules/cjs/loader:822:12)
      at Module.require (node:internal/modules/cjs/loader:1005:19)
      at require (node:internal/modules/cjs/helpers:102:18)
      at Object.<anonymous> (/Users/abw/js/vite-open-props/postcss.config.js:9:9)
      at Module._compile (node:internal/modules/cjs/loader:1101:14)

It's reporting my App.css as the file in question, but I don't think that's the cause as it's super-simple:

h1 {
    color: var(--red-6);
}

I think that loading a CSS file is what's triggering PostCSS to run and that's when it's choking on the config file. If I comment out the require('open-props/style') line in the postcss.config.js then it works OK.

What eventually worked for me was changing the postcss.config.js to the "Props as Javascript" example from the web site:

// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');

module.exports = {
  plugins: [
    postcssJitProps(OpenProps),
  ]
}

I'm not sure why I decided to use the "Props from CSS" example rather than the "Props as Javascript" example. Is there any difference between them? Other than the fact that the "Props as Javascript" seems to work and "Props from CSS" doesn't (for me at least).

Thanks for your help, and for creating a great package. I'm looking forward to using it in anger in my next project.

[Adam Argyle]

nice, glad you found the JS way too, i was going to send you here where vite and open props and jit-props are workin great https://stackblitz.com/edit/jit-open-props?file=postcss.config.js

there shouldnt be a difference between jit-props using js props or css props. both supply a list of props for jit-props to query and resolve usages of. i'll keep my eye out for any more errors reported using files: [] and parsing issues.

thanks for reporting, glad you're all setup!