After installing lightningcss and configuring the vite config, I defined lightningcss and customMedia as 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,
},
},
},
});
};
Additionally, I created a media.css file with
@custom-media --medium-screen (width <= 768px);I anticipated being able to use this variable. What could be wrong with my configuration? "vite" version is "5.0.12" and "lightningcss" is at version "1.22.1".