Did the svelte.config.js file replace the rollup.config.js file in SvelteKit? - sveltekit

Question

I'm trying to get PostCSS set up in my SvelteKit project to start playing with container queries. I installed 'svelte-preprocess' in my svelte.config.js file and made a postcss.config.cjs file (see below)
svelte.config.js
import adapter from '#sveltejs/adapter-auto';
import sveltePreprocess from 'svelte-preprocess';
/** #type {import('#sveltejs/kit').Config} */
const config = {
preprocess: sveltePreprocess({ postcss: true }),
kit: {
adapter: adapter(),
},
};
export default config;
postcss.config.cjs
const postcssPresetEnv = require('postcss-preset-env');
const config = {
plugins: [
postcssPresetEnv({
stage: 3,
features: {
'nesting-rules': true,
'custom-media-queries': true,
'media-query-ranges': true,
},
}),
],
};
module.exports = config;
I get the following error at my root level +page.svelte file:
*")" 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.*
Here's my +page.svelte file html and css (I'm trying to learn the container query syntax)
<div class="displayContainer">
<div class="queryWrapper">
<div class="imgWrapper">
//custom image component goes here
</div>
<div class="summaryContainer">
<h2>sample header text</h2>
<p>
sample paragraph text
</p>
</div>
</div>
</div>
<style lang="postcss">
.displayContainer {
container: homeDisplay / inline-size;
}
.queryWrapper {
#container homeDisplay (min-width: 450px) { /*line with error*/
display: grid;
grid-template-column: 350px 1fr;
gap: 20px;
}
}
.summaryContainer {
max-width: 600px;
}
</style>
package.json file
{
"name": "algomancy-site",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"#sveltejs/adapter-auto": "^1.0.0",
"#sveltejs/kit": "^1.0.0",
"#types/postcss-preset-env": "^8.0.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"postcss-load-config": "^4.0.1",
"postcss-preset-env": "^8.0.1",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-preprocess": "^5.0.1",
"vite": "^4.0.0"
},
"type": "module"
}
It's expecting a ")" after min-width.
I searched the documentation and recommended GitHub repos for preprocess configuration. Many of these resources/blogs reference a rollup.config.js file.
I don't see a rollup.config.js file in my skeleton SvelteKit project or in the SvelteKit documentation.
Is my issue from lacking a rollup file or is there an error in my file setup above?

Answer 1

After further digging I found this is a known issue with Svelte's compiler has with the '#container' syntax and is being worked on. Github issue 6969
A simple work-around is to place container queries (#container ...) in a separate .css file and import it where needed.