browserlist cant load config for virtual css files

[days-later]

Description

if you configure vite to use postcss+autoprefixer, at some point svelte's virtual css files will be processed.
browserlist will see the cssId from

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/id.ts

Line 44 in d38c4f7

const cssId = createVirtualImportId(normalizedFilename, 'style', timestamp);

looks something like "/src/App.svelte.css?svelte&type=style"

browserlist cant resolve that path to find a package.json / .browserslistrc and uses default settings.

Reproduction

https://github.com/days-later/vite-plugin-svelte-test

• npm run build
• css in dist/assets/index.xxxx.css is not prefixed

Additional Information

to solve the issue:

• set browserlist explicitly with autoprefixers overrideBrowserslist option
• change cssId, eg:
  const cssId = root + createVirtualImportId(normalizedFilename, 'style', timestamp);
  ... not sure if that has side effects. (when using '.' instead of root, rollup tries to load the file)

[dominikg]

Is this also a problem when using vue?

using a path normalized to stay inside of the project root is crucial because otherwise the build output could be different depending on if you built it from /foo/project or /bar/project

[days-later]

it works in vue.

vue also uses absolute paths ("F:/Projects/my-vue-app/src/App.vue?vue&type=style&index=0&lang.css")

[ghostdevv]

I am having this too! You can use the overrideBrowserslist option with autoprefixer for example which takes in a array, for example your postcss config might look like this:

module.exports = {
    plugins: [
        require('autoprefixer')({ overrideBrowserslist: ['last 12 versions'] }),
        require('postcss-import')(),
    ],
};

(As seen here)

[dominikg]

2 things are strange here.

1. autoprefixer finding .browserslistrc based on the filepath being processed rather than postcss config location?
2. in theory svelte-preprocess should take care of the prefixing even before the css is emitted and then handled by vites postcss chain.

@kaisermann do you have any idea why svelte-preprocess may not be picking up the .browserslistrc file? The absolute path to App.svelte is passed to the svelte.preprocess call here:

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/compile.ts

Line 44 in b229a8c

preprocessed = await preprocess(code, preprocessors, { filename });

note: the reproduction repo is missing 'postcss' and 'postcss-load-config' dependencies, i did add them when i tried to debug this but it did not change anything. Also adding lang="pcss" to the style node or {defaults:{style:"postcss"}} to svelte-preprocess config did not help

[kaisermann]

Hm... Nothing comes to mind immediately. We don't do anything to handle the browserslistrc in svelte-preprocess. Nevertheless, I'll check the repro tomorrow and see if I can find something

[dominikg]

update:
svelte-preprocess in full auto mode preprocess: sveltePreprocess() doesn't seem to use postcss by default. I tried it in a vanilla svelte template and had to use preprocess: sveltePreprocess({postcss: true}) or preprocess: [postcss()] for it to try and use postcss-load-config.

Once you add this to the reproduction here, you can see in a debugger that the prefixed sticky is added during preprocess. Unfortunately it gets removed again later by vites postcss run that doesn't find the browserslistrc due to the virtual path.

[dominikg]

The ideal solution if you only need autoprefixer or other postcss plugins that start with valid css would be to disable svelte-preprocess postcss step and let vite do it's job. This would require vite-plugin-svelte to use a virtual path that makes the browerslistrc discoverable again though. This may be possible by using vite-plugin-vues approach of the absolute path with a query that ends in lang=.css instead of adding the .css after .svelte.

[dominikg]

I also compared how vite-plugin-vue works and found that they are also using a shortend virtual import path like import "/src/App.vue?vue&type=style&index=0&lang.css" but unlike vite-plugin-svelte, that import gets resolved to an id with absolute path as seen in the css module const id = "/home/dominikg/develop/vite-vue-test/src/App.vue?vue&type=style&index=0&lang.css"

I am not quite sure where that id is rewritten in vues case, but vite-plugin-svelte uses enforce: pre option to be able to resolve the svelte field in package.json before the other resolvers might mess that one up.

So fixing this issue can be done by updating vite-plugin-svelte's resolveId hook to return the absolute id in case it's a virtual svelte style module. Then the css module id contains the full path const id = "/home/dominikg/develop/vite-plugin-svelte-test/src/App.svelte?svelte&type=style&lang.css" and autoprefixer config is preserved: const css = ".sticky.s-mwwoSKzBCGIL{position:-webkit-sticky;position:sticky}.s-mwwoSKzBCGIL{}"`

I'm still on the fence about how to best handle the case of postcss being applied twice (could be remedied by disabling svelte-preprocess postcss step if it only applies transforms that are not required for svelte compiler to get valid css) and the fact that postcss+autoprefixer seems to find the browserslist config via file path rather than config location (can be remedied by passing the override option instead).

[days-later]

for the browserslist config: autoprefixer instanciates browserlist for every file. browserlist then looks for its config on its own, if no explicit config is passed. it starts at the files location and goes up directories until it finds a .browserlistrc or package.json.

postcss being applied twice: however you want to solve that, i think a note in the readme to configure postcss via vite instead of vite-plugin-svelte/svelte-preprocess would be good.

[dominikg]

I have created a PR with a fix for this issue. #24

One problem remains and that is that imported svelte dependencies (at least when linked by pnpm) are not handled correctly even with that fix. Their import path is absolute and does not involve the project root and thus browserslist isn't found again. Given the performance penalty and unclear results when letting browserslist scan for that file i highly recommend to keep using the override option.

Maybe use something to parse that browserslist file into a json array and feed it to autoprefixer in postcss conf?