Updating from 3.9.5 to 3.9.6 breaks global styles

[mlbiche]

Describe the bug
When updating from 3.9.5 to 3.9.6, global styles are broken.

Here is my svelte.config.js file :

const { scss, globalStyle } = require('svelte-preprocess')

module.exports = (production) => ({
  // enable run-time checks when not in production
  dev: !production,
  // we'll extract any component CSS out into
  // a separate file - better for performance
  css: css => {
    css.write('public/build/bundle.css')
  },
  preprocess: [
    scss({
      includePaths: [
        './src/styles',
        './node_modules'
      ]
    }),
    globalStyle()
  ]
})

I have [email protected] and [email protected] installed. Updating scss config to include implementation: require('sass') does not fix the issue.

When checking the bundle.css file, all the global style is missing, while it exists in the bundle.map.css file 🤔

My global styles just concern the following :

In my Svelte component :

...

<style src="App.scss" global></style>

In App.scss file :

@use "@material/theme";
@use "@material/typography/mdc-typography";
@use "@material/button/mdc-button";
@use "@material/icon-button/mdc-icon-button";
@use "@material/textfield/mdc-text-field";
@use "@material/drawer/mdc-drawer";
@use "@material/list/mdc-list";
@use "@material/chips/mdc-chips";
@use "@material/menu-surface/mdc-menu-surface";
@use "@material/menu/mdc-menu";
@use "@material/select/mdc-select";
@use "@material/card/mdc-card";
@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/fab/mdc-fab";
@use "@material/linear-progress/mdc-linear-progress";
@use "@material/dialog/mdc-dialog";
@use "@material/form-field/mdc-form-field";
@use "@material/checkbox/mdc-checkbox";
@use "@material/snackbar/mdc-snackbar";
@use "@material/textfield/helper-text/mdc-text-field-helper-text";

main {
  padding: 124px 8px 32px 8px;
  margin: 0 auto;
  min-height: calc(100vh - 156px);
  display: flex;
  align-items: center;
  max-width: 400px;

  > * {
    width: 100%;
  }
}

Not only all the Material style is missing but the main rule too.

Expected behavior

Having a working global style 😬

Information about your project:

• Your browser and the version: Firefox 77.0.1, Brave 1.9.76

• Your operating system: OS X 10.15.5

• svelte-preprocess version: 3.9.6 (the bug is not present in 3.9.5)

• Whether your project uses Webpack or Rollup: Rollup

[kaisermann]

Hey @mlbiche, would you be able to provide a repro? Just tried your main definition in a empty project and it seems to be working for me.

[mlbiche]

Here is a dedicated branch on my project where I am trying to update svelte-preprocess. It may be a bug from @use imports as the style from App.scss is present in the bundle. The details I have written in the commit :

When updating, the style is completely broken. Seems like @use is not supported ? The SCSS code in App.scss is packed in bundle.css (main and @media main rules are present) but all the code from styles/main.scss and styles/_aposto-theme.scss is not (for example .typography--button-inline from main is missing). Even when moving Material imports from main.scss to App.scss, the Material styles are still missing in the bundle.
When removing the aposto-theme and main import (@use) in App.scss, the precompilation fails due to missing $top-app-bar-height-breakpoint definition from aposto-theme. So it seems that the precompilation is looking through these files (and the $top-app-bar-height-breakpoint value is indeed present in the bundle when importing aposto-theme).

[kaisermann]

@mlbiche Got it! Thanks! I wasn't passing the attributes object when using standalone processors. Fixed in v3.9.7 🎉