Skip to content

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

@MadMaxMcKinney

Description

@MadMaxMcKinney

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions