svelte-preprocess icon indicating copy to clipboard operation
svelte-preprocess copied to clipboard

:global { } don't works as expected

Open Inqnuam opened this issue 1 year ago • 2 comments

Describe the bug The entier :global {} (not :global()) is dropped.

:global() works as expected.

Logs no log.

To Reproduce

Used config:

 sveltePreprocess({
      sourceMap: true,
 });

code:

<style>
 :global {
  .someGlobalClass {
    background-color: red;
   }
 }
</style>

Expected behavior output something like this:

.someGlobalClass {
  background-color: red;
}

Information about your project:

  • svelte-preprocess version: 6.0.3

  • Whether your project uses Webpack or Rollup: none

Inqnuam avatar Nov 11 '24 17:11 Inqnuam

Is your concern that the preprocessor isn't transforming that? I wouldn't expect it to. That's valid input to the compiler as of Svelte 5 - and then the compiler handles it from there.

If that's not what you're referring to, please provide a complete reproduction, not just code snippets.

Conduitry avatar Nov 11 '24 18:11 Conduitry

You need to turn on postcss and add the postcss-preset-env plugin.

sveltePreprocess({
  postcss: {
    plugins: [
      postcssPresetEnv(),
    ],
  },
}),

AlexRMU avatar Dec 13 '24 17:12 AlexRMU