diff --git a/.changeset/quiet-wings-learn.md b/.changeset/quiet-wings-learn.md new file mode 100644 index 000000000..7007d21b6 --- /dev/null +++ b/.changeset/quiet-wings-learn.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +fix: remove unscopable global styles warning diff --git a/docs/faq.md b/docs/faq.md index dc09c840f..1af15b7af 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -54,34 +54,6 @@ Bad: ``` -### Where should I put my global styles? - -Global styles should always be placed in their own stylesheet files whenever possible, and not in a Svelte component's ` -``` - ### Why can't `cssHash` be set in development mode? `cssHash` is fixed in development for CSS HMR in Svelte components, ensuring that the hash value is stable based on the file name so that styles are only updated when changed. diff --git a/packages/vite-plugin-svelte/src/utils/log.js b/packages/vite-plugin-svelte/src/utils/log.js index 23172e369..61b32bc82 100644 --- a/packages/vite-plugin-svelte/src/utils/log.js +++ b/packages/vite-plugin-svelte/src/utils/log.js @@ -146,9 +146,7 @@ export function logCompilerWarnings(svelteRequest, warnings, options) { let warn = isBuild ? warnBuild : warnDev; /** @type {import('svelte/compiler').Warning[]} */ const handledByDefaultWarn = []; - const notIgnored = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss)); - const extra = buildExtraWarnings(warnings, isBuild); - const allWarnings = [...notIgnored, ...extra]; + const allWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss)); if (sendViaWS) { const _warn = warn; /** @type {(w: import('svelte/compiler').Warning) => void} */ @@ -203,31 +201,6 @@ function isNoScopableElementWarning(warning) { return warning.code === 'css_unused_selector' && warning.message.includes('"*"'); } -/** - * - * @param {import('svelte/compiler').Warning[]} warnings - * @param {boolean} isBuild - * @returns {import('svelte/compiler').Warning[]} - */ -function buildExtraWarnings(warnings, isBuild) { - const extraWarnings = []; - if (!isBuild) { - const noScopableElementWarnings = warnings.filter((w) => isNoScopableElementWarning(w)); - if (noScopableElementWarnings.length > 0) { - // in case there are multiple, use last one as that is the one caused by our *{} rule - const noScopableElementWarning = - noScopableElementWarnings[noScopableElementWarnings.length - 1]; - extraWarnings.push({ - ...noScopableElementWarning, - code: 'vite-plugin-svelte-css-no-scopable-elements', - message: - "No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles." - }); - } - } - return extraWarnings; -} - /** * @param {import('svelte/compiler').Warning} w */