search

GoogleChromeLabs / postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
https://stackblitz.com/edit/jit-open-props?file=postcss.config.js
Apache License 2.0
210 stars 9 forks source link

postcss-jit-props breaks Vitest test #52

Open maiertech opened 6 days ago

maiertech commented 6 days ago

I added postcss-jit-props with OpenProps to a SvelteKit app with this postcss.config.js and it seems to work fine:

import postcssJitProps from 'postcss-jit-props';
import OpenProps from 'open-props';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [postcssJitProps(OpenProps), autoprefixer]
};

But one of my Vitest tests breaks with this error message:

 FAIL  src/lib/data/posts.server.test.js [ src/lib/data/posts.server.test.js ]
TypeError: [postcss] Cannot read properties of undefined (reading 'source')
 ❯ Object.Once node_modules/.pnpm/postcss-jit-props@1.0.14_postcss@8.4.38/node_modules/postcss-jit-props/index.js:130:88
 ❯ LazyResult.runOnRoot node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:327:23
 ❯ LazyResult.runAsync node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:258:26
 ❯ LazyResult.async node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:160:30
 ❯ LazyResult.then node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:404:17

I can make the test pass by removing postcss-jit-props from the above config.

Now the thing is that my Vitest tests don't have any business with PostCSS except that the one that breaks uses import.meta.glob, which triggers Vite's preprocessing chain.

The line that causes trouble in postcss-jit-props's index.js is 130:

STATE.target_rule = new Rule({ selector: target_selector, source: node.first.source })

But this where I am a bit lost. The repo where it happens is private. I can try to create a repro, but it would be a SvelteKit app.

argyleink commented 5 days ago

my guess is that the tests don't need any processed CSS but are still being run as part of a build pipeline, so when they're being run for tests there's no source stylesheet and jit props is complaining there's no where to put props as it's being called without a stylesheet. can you disable postcss processes for tests? or provide a dummy stylesheet to pacify / spoof the postcss build process?

argyleink commented 5 days ago

not sure it'd be a good idea to build resilience into jit-props to handle this, like I'd still want the plugin to report an error or something that "no work is being done because there's no source". maybe throwing an error is better than dying tho and would unblock this scenario.

you could also try an alternative postcss config for your test runner to use, and it omits jit-props since you're not needing that during unit testing?