Constant console spam about "options.css"

[thonkinator]

Describe the bug

Whenever you start the dev server or make a change, you get multiple warnings pertaining to "options.css", even if you are just using the default config. Example:

8:30:50 PM [vite-plugin-svelte] /Users/me/dev/cards/.svelte-kit/generated/root.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/me/dev/cards/src/routes/+page.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/me/dev/cards/src/routes/+layout.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/me/dev/cards/.svelte-kit/generated/root.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/me/dev/cards/src/routes/+layout.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/me/dev/cards/node_modules/@sveltejs/kit/src/runtime/components/error.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/me/dev/cards/src/routes/+page.svelte options.css as a boolean is deprecated. Use 'external' instead of false.

This fills the console very quickly if you have many pages/files.

This is on sveltekit, but the error seems to be related to the latest update of this repo, 3.53.0, and this pull.

Reproduction

You can simply just create a new SvelteKit project and run the dev server.
StackBlitz doesn't use the latest version, and I am unsure of any other REPLs that do.

Logs

8:30:50 PM [vite-plugin-svelte] /Users/patrick/dev/cards/.svelte-kit/generated/root.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/patrick/dev/cards/src/routes/+page.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/patrick/dev/cards/src/routes/+layout.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/patrick/dev/cards/.svelte-kit/generated/root.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/patrick/dev/cards/src/routes/+layout.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/patrick/dev/cards/node_modules/@sveltejs/kit/src/runtime/components/error.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:50 PM [vite-plugin-svelte] /Users/patrick/dev/cards/src/routes/+page.svelte options.css as a boolean is deprecated. Use 'external' instead of false.
8:30:56 PM [vite-plugin-svelte] svelte config changed: restarting vite server. - file: /Users/patrick/dev/cards/svelte.config.js

System Info

System:
    OS: macOS 12.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 477.12 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - /usr/local/bin/node
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 104.0.1
    Safari: 16.0
  npmPackages:
    svelte: ^3.44.0 => 3.53.0

Severity

annoyance

[KaraKunT]

#7914
#7270

[mallsoft]

Relevand discord thread

[KaraKunT]

svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = { 
	vitePlugin: {
		emitCss: false,
		...
	},
	compilerOptions: {
		css: "injected",
		...
	},

	...

}

---

If you get the following error after adding css: "injected", you should add emitCss: false.

[vite-plugin-svelte] hmr and emitCss are enabled but compilerOptions.css is true, forcing it to false

---

https://svelte.dev/docs#compile-time-svelte-compile

If 'injected' (formerly true), styles will be included in the JavaScript class and injected at runtime for the components actually rendered. If 'external' (formerly false), the CSS will be returned in the css field of the compilation result. Most Svelte bundler plugins will set this to 'external' and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable .css files. If 'none', styles are completely avoided and no CSS output is generated.

[mallsoft]

as the warning says, i set in svelte.config.js

  compilerOptions: {
    css: 'external'
  }

After this the warning remains.
To me this seems like either the message is wrong or the config is?

[thonkinator]

is it possible to make these values the default?

[Conduitry]

Fixed in 3.53.1 by just removing the warning for now.

[oetiker]

with svelte 4.0.1 the message has come back

it reads:

compilerOptions.css as a boolean is deprecated. Use 'external' instead of false.

[jerrygreen]

Currently using svelte@4.2.0, getting the same warning message.

Setting compilerOptions to compilerOptions: { css: 'external' } in config doesn't do anything, it still complains.

[gtm-nayan]

@jerrygreen where are you setting the options? Can you send your config?

[artello73]

Have the same issue with svelte 4.2.0 and it started with ^4.x versions

compilerOptions.css as a boolean is deprecated. Use 'external' instead of false.

svetle.config.json set in the following way:

import { vitePreprocess } from '@sveltejs/kit/vite';
import path from 'path';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess({ postcss: true }),

	vitePlugin: {
		inspector: true
	},
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			// fallback: null,
			fallback: '200.html',
			precompress: false,
			strict: true
		}),
		alias: {
			// these are the aliases and paths to them
			'@components': path.resolve('./src/lib/components'),
			'@lib': path.resolve('./src/lib'),
			'@img': path.resolve('./src/img'),
			'@utils': path.resolve('./src/lib/utils')
		}
	},
	compilerOptions: {
		css: 'external'
	}
};
export default config;