Compatibility issues with Astro

[Que-tin]

It seems like there are some compatibility issues with Astros fences used inside of .astro files. If I'm trying to integrate it into an astro project but I always run into the following error (e.g.):

Unknown word
    1  |  ---
       |   ^
    2  |  import Button from '../helper/Button.astro';
    3  |  ---

It seems like it's trying to scan the whole file, even though the CSS is only inside of the <style> block. I have no other plugins installed besides postcss-jit-props.

module.exports = {
  plugins: [
    require('postcss-jit-props')({
      '--xl': '(min-width: 1200px)',
    }),
  ],
};

[argyleink]

strange, i've used this plugin multiple times with astro. this plugin only runs if postcss runs. not quite sure this plugin is the issue. are there errors that point you towards it that can provide some context?

sidenote: you'll need an extra plugin to get custom properties inside media queries tho. maybe the error is the way you're hoping to swap props? here's the plugin you'll need to do what you're showing https://github.com/csstools/postcss-custom-media. i'm pretty sure that plugin is required because postcss doesnt otherwise understand the use of props in MQs.

[Que-tin]

Nvm. the problem was somewhere else. But found it in the examples..

I was trying to do: '--xl': '(min-width: 1200px)'

Instead of; '--xl': '@custom-media --xl (min-width: 1200px);'

But still quite confusing that the error then shows that the fence is the problem.