sveltejs/svelte-preprocess

PostCSS doesn't run against @import url() local css.

MadMaxMcKinney opened this issue · 1 comments

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.