Description
I'm starting to use svelte-preprocess with webpack and tailwindcss. When running the dev server, warnings about unused CSS selectors appear, such as the following one:
WARNING in ./src/App.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
Unused CSS selector "video" (371:0)
369: img,
370: svg,
371: video,
^
372: canvas,
373: audio,
@ ./src/main.ts 2:0-31 3:16-19
The problem is that one of these warnings appears for EVREY selector (~1500 lines of warnings), and of course there is also the warning overlay in the dev server's website view.
Technically, the combination Svelte+Webpack+TypeScript+TailwindCSS is already working for me (styling is applied etc.), it's just this mess of warnings that is a problem.
I could not yet find any explanation or fix on the internet, both because most documentation is for rollup
, and because the postcss
option for sveltePreprocess
does not seem to have an option for purging unused CSS - at least I couldn't find anything.
If you need any more info on config files etc. I'm happy to provide them.
Excerpt from webpack.config.js:
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
options: {
compilerOptions: {
dev: !prod,
},
emitCss: prod,
hotReload: !prod,
preprocess: sveltePreprocess({
sourceMap: !prod,
postcss: {
plugins: [
tailwindcss,
autoprefixer
],
},
}),
},
},
},
{
// required to prevent errors from Svelte on Webpack 5+
test: /node_modules\/svelte\/.*\.mjs$/,
resolve: {
fullySpecified: false,
},
},
],
},
Whole tailwind.config.js:
module.exports = {
content: [
'./src/**/*.svelte',
'./src/**/*.html',
'./public/index.html',
],
theme: {
extend: {},
},
plugins: [],
}