Modifying props during development doesn't update page

[djmtype]

Given the setup below, if I was to add/remove/change any css variables within props.css, those changes will not update during development. Unsure if this is a stipulation of this plugin. Tested with Astro 1.6 and PostCSS 8.4.18

postcssJitProps({
  files: ['./src/styles/common/props.css'],
})

[argyleink]

yes, makes sense, i'm reading from a file and not watching it also..

feature request: watch files for changes and update var pool

[romainmenke]

Can be done with two changes :

• emit dependency messages (see postcss-import)
• use prepare in the PostCSS plugin

The dependency messages communicate to a build tool (like postcss-cli) that that tool should watch certain files.

prepare should give you a blank slate each time the plugin is run.

This avoids issues where someone removes properties from the source but that not being reflected in the plugin state.

module.exports = (UserProps) => {
  const STATE = {}

  return {
    postcssPlugin: 'postcss-jit-props',
    async Once (node, {Rule, AtRule}) {
    ...

->

module.exports = (UserProps) => {
  return {
    postcssPlugin: 'postcss-jit-props',
    prepare() {
      const STATE = {}

      return {
        async Once (node, {Rule, AtRule}) {
        ...

I've noticed that switching to prepare can have unexpected side effects.

Some build tools run a single plugin instance in parallel against multiple source files. This creates subtle dependencies on the plugin having a specific state when processing specific files in a specific order.

Using prepare ensures that each file will have its own state when processed. Normally this would fix bugs, but in rare cases it can surface issues for users.

[argyleink]

fixed in v1.0.10