Did the svelte.config.js file replace the rollup.config.js file in 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.