vanilla-extract で width-range media query を使用する

ピン留めされたアイテム

vite の時は postcss の minmax plugin をいれよう
Next.js の時はデフォルトで入ってるので必要ない

これを

@media (max-width: 30em) { ... }

こう書ける

@media (width <= 30em) { ... }

vanilla-extract だとこう

export const test = style({
  "@media": {
    "screen and (width <= 30em)": {
      // 
    },
  },
});

Next.js 使用時だと polyfill が動いていたので、vanilla-extract 側に postcss が入っているものだと思っていたが vite を使っていると polyfill が働いていないのでどこで postcss が刺さっているのか確認する

naporitan

Next.js

next build では設定なしで polyfill が適用される
- デフォルトで入ってる
  - https://nextjs.org/docs/pages/building-your-application/configuring/post-css

config

const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");

const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
 swcMinify: true,
};

module.exports = withVanillaExtract(nextConfig);

Vite

vite build では polyfill が適用されない
vite の postcss plugin に minmax を設定する必要あり
- https://github.com/postcss/postcss-media-minmax

config

import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import minmax from 'postcss-media-minmax'
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vanillaExtractPlugin()],
  css: {
    postcss: {
      plugins: [minmax()]
    }
  }
});

naporitan

next-plugin では lazyPostCSS でデフォルトの設定を読み込んで webpack の loaders として私ているっぽい。

vite-plugin では config を createCompilerに渡してる。js と css が分離されてから postcss がかかるのかは調べ切れてない