svelte-preprocess icon indicating copy to clipboard operation
svelte-preprocess copied to clipboard

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

Open MadMaxMcKinney opened this issue 1 year ago • 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.

MadMaxMcKinney avatar Jul 02 '23 19:07 MadMaxMcKinney

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.

pooledge avatar Oct 02 '23 13:10 pooledge