Semicolon or block expected error svelte with postcss - css

Question

I have set up a project with snowpack for svelte in which I'm trying to use tailwind for styling, but using states like hover or focus results in vs code throwing the error
Semicolon or block is expected
If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocess`, did you add `lang=\"scss\"`/`lang=\"less\"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`?
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.
One code example that is causing the problem is
<style lang="postcss">
button {
#apply py-2 px-6 rounded-lg shadow-md;
}
.hoverable {
#apply hover:opacity-90;
}
</style>
This is the package.json
{
"scripts": {
"start": "run-p routify snp",
"build": "routify -b && routify export && snowpack build",
"test": "web-test-runner \"src/**/*.test.ts\"",
"routify": "routify",
"snp": "snowpack dev"
},
"dependencies": {
"#snowpack/plugin-run-script": "^2.3.0",
"postcss-import": "^14.0.2",
"svelte": "^3.37.0"
},
"devDependencies": {
"#roxi/routify": "^2.18.3",
"#snowpack/plugin-dotenv": "^2.2.0",
"#snowpack/plugin-postcss": "^1.4.3",
"#snowpack/plugin-svelte": "^3.6.1",
"#snowpack/plugin-typescript": "^1.2.1",
"#snowpack/web-test-runner-plugin": "^0.2.2",
"#testing-library/svelte": "^3.0.3",
"#tsconfig/svelte": "^1.0.10",
"#types/chai": "^4.2.17",
"#types/mocha": "^8.2.2",
"#types/snowpack-env": "^2.3.3",
"#web/test-runner": "^0.13.3",
"autoprefixer": "^10.4.0",
"chai": "^4.3.4",
"concurrently": "^6.4.0",
"cross-env": "^7.0.3",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.11",
"postcss-cli": "^9.0.2",
"postcss-load-config": "^3.1.0",
"snowpack": "^3.8.7",
"svelte-preprocess": "^4.7.2",
"tailwindcss": "^2.2.19",
"typescript": "^4.3.4"
},
"routify": {
"extensions": "svelte,html,svx,md",
"dynamicImports": false,
"routifyDir": "src/.routify"
}
}
As you can see, I have installed svelte-preprocess which should be responsible for processing the postcss, as well as the other needed packages. The configuration for the project is as follows:
svelte.config.js
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
preprocess: sveltePreprocess({
defaults: {
script: "typescript",
style: "postcss",
},
postcss: true,
}),
};
snowpack.config.js
/** #type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: { url: "/", static: true },
src: { url: "/dist" },
},
plugins: [
"#snowpack/plugin-svelte",
"#snowpack/plugin-dotenv",
"#snowpack/plugin-typescript",
"#snowpack/plugin-postcss",
],
routes: [
/* Enable an SPA Fallback in development: */
{ match: "routes", src: ".*", dest: "/index.html" },
],
optimize: {
/* Example: Bundle your final build: */
// "bundle": true,
},
packageOptions: {
knownEntrypoints: ["#roxi/routify/runtime/buildRoutes"],
},
devOptions: {
/* ... */
},
buildOptions: {
/* ... */
},
};
postcss.config.js
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
};
tailind.config.js
const production = process.env.NODE_ENV === "production";
module.exports = {
mode: "jit",
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
purge: { content: ["./src/**/*.svelte"], enabled: production },
darkMode: false, // or 'media' or 'class'
theme: {
extend: {/*...*/},
},
variants: {
extend: {},
},
plugins: [],
};
Do you have any idea if it's a configuration problem or is something related to the editor?