search

sveltejs / svelte-preprocess

A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
MIT License
1.73k stars 147 forks source link

Infer `lang` from `src` attribute #548

Closed aabounegm closed 1 year ago

aabounegm commented 1 year ago

Is your feature request related to a problem? Please describe. The problem is that when developing a (UI components) library with SvelteKit, the preprocessing happens when packaging and we are unable to ship raw SCSS (while keeping the docs processed as usual), which is needed to enable theming, even though the style tags still include the src attribute along with the generated CSS.

Describe the solution you'd like I would like for svelte-preprocess to automatically infer the lang attribute from src, since the src one is left intact after the initial phase of preprocessing. This way, we can both ship the preprocessed version and still give the option to repeat the preprocessing with different parameters. For example, if the tag looks like <style src="./button.scss">, it should infer lang="scss" and preprocess it as such. Edit: I just realized that to achieve what we need, it would also be necessary to ignore the contents of <style> if there is a src attribute, but that should probably be in a different issue.

Describe alternatives you've considered One alternative could be to give an option to turn off some preprocessors when packaging, but that likely needs work from SvelteKit's side. We could also migrate all of our SCSS variables to plain CSS, but that would be very cumbersome to do since we depend on a lot of Sass's color utilities. The last resort would be to require users to use defaults.style: "scss", but that is highly undesirable, especially that this option is deprecated.

How important is this feature to you? It is blocking our migration to SvelteKit.

Additional context I'm currently in the process of migrating a component library (attractions) to SvelteKit, but I'm having an issue with theming. We support customizing the theme by overriding Sass variables. Previously, we were shipping the components unprocessed and required the consumers to use svelte-preprocess. However, after migrating to SvelteKit, the preprocessor of our docs kicks in when packaging as well. While this is desirable (we want to use TypeScript but not require it for the users), it breaks our Sass theming because it compiles to CSS, even though it leaves the scss file in place, as well as the src="..." attribute on the style tag.

With this solution, we would have the added benefit of shipping the components with the generated CSS for users who prefer not to preprocess, while also giving the customizability features to those who do.

dummdidumm commented 1 year ago

Having this inferred would open up a can of worms. Having a clear and consistent lang rule is better. And, as you noted in your edit, it wouldn't solve your use case because if it was inferred, svelte-preprocess would preprocess it either way, so having it inferred actually loses you some control. What you could do instead is write your own preprocessor that runs at the desired time (before or after the regular preprocessing) and either add or removes the lang="scss" tag (I don't fully understand what you are trying to do, hence the rather broad sentence). You could use the replace preprocessor for that. You can chain preprocessors, so you could do something like

preprocess: [removeLangTag(isProductionBuild), sveltePreprocess()]

Closing as there's nothing we can/should do, but happy to answer more questions in here.