Includes all variables when passed in from file

[PapiPeppers]

When i include a file with css vars rather than input the vars directly into the postcss-jit-props as an option, the entire css file with all the unused vars is included in the build. I'm using Astro to build.

Here is my postcss.config.js stripped down for brevity:

module.exports = {
    plugins: [
        require("postcss-jit-props")({
            "--size-15": "30rem",
            "--size-14": "20rem",
            "--size-13": "15rem",
            "--size-12": "10rem",
            "--size-11": "7.5rem",
            "--size-10": "5rem",
            "--size-9": "4rem",
            "--size-8": "3rem",
            "--size-7": "2rem",
            "--size-6": "1.75rem",
            "--size-5": "1.5rem",
            "--size-4": "1.25rem",
            "--size-3": "1rem",
            "--size-2": ".5rem",
            "--size-1": ".25rem",
            "--size-00": "-.25rem",
            "--size-000": "-.5rem",
            files: [ "./src/styles/colors.css" ]
        })
    ]
}

The --size-* vars are included only when used in my css, but the colors.css file included in the files option is included in full. I'm not using the :root selector in my colors.css file, I am using two selectors to have different palettes for light and dark mode. I wonder if that is causing the issue. The selectors used are .light, [data-color-mode=light] and .dark, [data-color-mode=dark].

[argyleink]

hmmm, the files and json provided aren't inserted into a stylesheet unless found used. there's 0 logic for "just putting props into a stylesheet", it's all on a use by use basis. Maybe there's an accidental import of colors somewhere? are you able to create an astro minimal build on stackblitz that shows the issue? I can start debugging it if you have can 🙂

thanks for the report! lets get to the bottom of it

[PapiPeppers]

https://stackblitz.com/~/github.com/PapiPeppers/demo-postcssJitProps-issue

lmk if this doesn't work. Not a big issue here, just something I noticed and figured I'd throw out. Thanks for your help!

[argyleink]

thanks for this!

if you move the color.css file out of the src directory, it doesnt make it to the end build. my guess, one of the plugins has a wildcard to bundle styles and is pulling it in. not sure which plugin, but i believe i was able to shift the blame from jit-props (which did appear to only add the used colors) to astro/vite/plugin (somethin in bein greedy).

[PapiPeppers]

Ok had a feeling that could be it. Should have tested it out myself but thanks for your help!

[PapiPeppers]

Seems like this is no longer an issue. Deployed a dev branch to vercel and the full file is no longer included in the build, the plugin works as expected.