marko-js / tags-api-preview

Preview the Marko 6 "Tags API" in Marko 5!
MIT License
22 stars 7 forks source link

Vite preprocessor options not applied to style tags #49

Closed vwong closed 1 year ago

vwong commented 1 year ago

Version: 0.7.2

"@marko/tags-api-preview": "^0.7.2",
"@marko/vite": "^4.1.0",
"marko": "^5.31.18",
"vite": "^4.5.0",

Details

I want to use a preprocessor (scss) but preprocessor options are not being applied with Vite, when using the style tags.

Expected Behavior

I've configured vite with:

{
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "sass:math";`,
      }
    }
  }
}

This should inject the additional string / variables to the SCSS.

Actual Behavior

First variant with external style sheet my-component.marko: no styles my-component.style.scss:

.foo {
  top: math.abs(-10px);
}

Produces correctly generated CSS with top: 10px.

Second variant with a style block (Marko 5 syntax) in a single file component: my-component.marko:

style.scss {
  .foo {
    top: math.abs(-10px);
  }
}

Also produces correctly generated CSS with top: 10px.

Third variant, with a style tag (Marko 6 Tags syntax) in a single file component: my-component.marko:

<!-- use tags -->
<style.scss>
  .foo {
    top: math.abs(-10px);
  }
</style>

Produces incorrect CSS with top: math.abs(-10px). It seems the Vite preprocessor options are not being applied.

I'm not sure which repo this belongs to, but seeming that this applies with the Tags API, I thought I'd raise it here.

vwong commented 1 year ago

Weird... I'm unable to reproduce this anymore. Must be some caching issue.