Incompatibility with some coding styles

[kucrut]

Hello!

I'm a fan of putting a space after the opening and before the closing function parens (for multiple reasons), and it seems like this plugin is not compatible with that type of coding style because it's using (too) specific sub-string to match when collecting the properties, ie var(--.

Perhaps something like this would make it more forgiving?

Declaration (node, {Declaration}) {
    // bail early
    if (node[processed]) return

    let matches = node.value.match(/var\(\s*[\w\d-]+\s*\)/g);

    if (!matches) return;

    let props = matches.map(v => v.match(/var\(\s*([\w\d-]+)\s*\)/)[1])

    // ...
}

Disclaimer: My regex-fu is questionable 😁

[argyleink]

so i'm understanding correctly, you're saying var( --foo ) breaks because of the space in the var? or you're original pool of properties have spaces in them?

i added a test in a draft PR that i think outlines the use case you're inquiring about, can you verify that's testing the right thing? the test does fail, so hopefully it's aligned with this report.

[kucrut]

you're saying var( --foo ) breaks because of the space in the var?

That is correct, yes. I can also verify that the draft PR is addressing it. Thank you!

[argyleink]

hmm, from my testing it appears to be postcss that doesnt like the spaces. my test doesnt even get the CSS variable passed to it when it has spaces.

the problem appears upstream from this plugin!.. aka, I can't get the test to pass because it the plugin isnt passed the variable that uses spaces.

open to insights/feedback here, but as of right now, i dont think jit props can resolve this?

[kucrut]

@argyleink I took a stab at this and issued a PR: https://github.com/GoogleChromeLabs/postcss-jit-props/pull/6

[argyleink]

released and fixed in 1.0.2 👍🏻 thanks for the help!