svelte-preprocess
svelte-preprocess copied to clipboard
PostCSS doesn't run against @import url() local css.
Describe the bug
In my +layout.svelte
root file I have this import statement for my global css
<style lang="postcss">
@import url('../app.css');
</style>
However the imported css is not processed via PostCSS. If I directly in-line the css instead of importing it, PostCSS runs correctly.
Specifically concerned about nesting, here's my svelte.config
import adapter from '@sveltejs/adapter-auto'
import preprocess from 'svelte-preprocess';
import nesting from 'postcss-nesting'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: preprocess({
postcss: {
plugins: [nesting()]
}
}),
kit: {
adapter: adapter()
}
};
Expected behavior I'd like to keep my general css in it's own file, what is the best way to work here? I'd expect the imported css to be processed.
Experiencing the same, but with a global import within script
:
<script lang="ts">
import '$styles/layout/index.scss';
</script>
I'm postcss'ing with mqpacker
and sorting: true
in order to get column widths working via placeholders, and the impact of this bug is quite big. Just not sure anymore where it started.