Support self-closing <style> tag

[rondonjon]

I am using a preprocessor to import styles in SCSS into my Svelte components.

Some of the stylesheets have grown rather big, so eventually I started to swap them out as follows:

<style lang="scss">
  @import "./CheckBox.scss";
</style>

Out of curiosity I tried out something shorter and was surprised that it actually worked:

<style lang="scss" src="./CheckBox.scss"></style>

One minor point that still bothers me is that the compiler raises an error when I try to make the tag self-closing. The following is currently not possible:

<style lang="scss" src="./CheckBox.scss" />

Output from svelte-loader:

ERROR in ./src/CheckBox/CheckBox.svelte
Module build failed (from /......./node_modules/svelte-loader/index.js):
Error: ParseError: Expected > (13:41)
11: </script>
12: 
13: <style lang="scss" src="./CheckBox.scss" />

I think it would be nice to have that supported.

[Conduitry]

Yeah it probably makes sense for svelte.preprocess() to treat self-closing <style> and <script> tags the same as empty ones when running style or script preprocessor callbacks.

[lukasmoellerch]

@Conduitry If it is planned to implement to implement this feature request - can I try to implement it? I've never contributed to svelte before, but I really like the project and thought that this feature wouldn't be too hard to implement?

[Conduitry]

Sure, feel free to take a look, thank you! To get you started, the implementation would go in https://github.com/sveltejs/svelte/tree/master/src/compiler/preprocess and tests would go in https://github.com/sveltejs/svelte/tree/master/test/preprocess

[Conduitry]

Self-closing <script/> and <style/> tags are now handled by the preprocessor the same as empty ones as of 3.24.0.