Lightningcss and @custom media

Question

Im install lightningcss and configure vite config. So i define lightningcss and customMedia: true.

import browserslist from "browserslist";
import { browserslistToTargets } from "lightningcss";


    return defineConfig({
        build: {
            outDir: "build",
            cssMinify: "lightningcss",
        },
        css: {
            transformer: "lightningcss",
            lightningcss: {
                drafts: {
                    customMedia: true,
                },
                targets: browserslistToTargets(browsersList),
            },
        },
        plugins: [reactPlugin(), svgr(), vitePWA],
        resolve: {
            alias: [
                {
                    find: "~",
                    replacement: fileURLToPath(new URL("src", import.meta.url)),
                },
            ],
        },
        server: {
            port: Number(VITE_APP_DEVELOPMENT_PORT),
            proxy: {
                [VITE_APP_API_ORIGIN_URL as string]: {
                    changeOrigin: true,
                    target: VITE_APP_PROXY_SERVER_URL,
                },
            },
        },
    });
};

Also i create media.css with @custom-media --medium-screen (width <= 768px); But when i try open project i get [plugin:vite:css] Custom media query --medium-screen is not defined

I expected that I could use this variable. What's wrong with my config? "vite": "5.0.12", and "lightningcss": "1.22.1".

Answer 1

heyho, are you using css layers? I had a similar problem and found out, that custom-media in lightningcss only works, when you are not using css layers. Maybe it's a bug in lightningcss?