Configure adaptive prop

[mod3x]

Hi!.

Current implementation of adaptive prop (-@media:dark) contains characters that throws an not-valid syntax error on postcss compile step when props are parsed from css files not JSON. This PR adds a functionality to configure it.

Thank you.

[google-cla[bot]]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[mod3x]

@argyleink heres stackblitz demo package.json contains postcss script to start compilation, thank you

[argyleink]

ty for the repro! looks like it's a bug in the CSS import feature specifically? that props using the naming convention break the CSS parser AND then don't get searched for. yeah?

I'd expect the test to then look closer to the issue? somethin like:

it('Can jit a light and dark adaptive prop from a CSS file', async () => {
  await run(
`p {
  color: var(--text);
}`, 
`:root {
  --text: white;
}
p {
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: black;
  }
}`, 
 { files: ['./*.test.css']}
  )
})

where then props.test.css get's updated to:

:root {
  ...
  --text: white;
  --text-@media:dark: black;
}

i'm almost thinking this means i need to change the syntax for these special props, so that they parse from CSS without any special configuration? it's like i missed this use case entirely in the tests and it's here to show the strategy needs adjusted. thoughts?

[mod3x]

ty for the repro! looks like it's a bug in the CSS import feature specifically? that props using the naming convention break the CSS parser AND then don't get searched for. yeah?

Youre right.

i'm almost thinking this means i need to change the syntax for these special props, so that they parse from CSS without any special configuration? it's like i missed this use case entirely in the tests and it's here to show the strategy needs adjusted

It would be cool. I mean its postcss after all, align it with css spec as much as possible :)