Postcss Global Data config

[Small-Systems]

How can I setup the Postcss Global Data plugin in my vite.config.js file? I've tried the following but it doesn't work.

    css: {
      postcss: {
        postcssGlobalData: {
          files: ["./src/assets/css/variables.css"],
        },
        plugins: [
          require("postcss-nesting"),
          require("postcss-custom-media"),
          require("@csstools/postcss-global-data"),
        ],
      },
    },

[mzenz]

@Small-Systems I also struggled a bit on this. There's no need to configure/import anything inside vite.config.ts since Vite already reads postcss.config.js via postcss-load-config out of the box.

Here's the config I came up with:

<root_dir>/postcss.config.cjs:

module.exports = {
  plugins: {
    '@csstools/postcss-global-data': {
      files: [
        './assets/css/media.css',
      ]
    },
    'postcss-custom-media': {},
  }
}

<root_dir>/assets/css/media.css:

@custom-media --small (max-width: 400px);
@custom-media --medium (min-width: 401px) and (max-width: 800px);
@custom-media --large (min-width: 801px) and (max-width: 1200px);

Example css code:

@media (--small) {
  body {
    background-color: yellow;
    font-size: 10px;
  }
}

@media (--medium) {
  body {
    background-color: orange;
    font-size: 15px;
  }
}

@media (--large) {
  body {
    background-color: magenta;
    font-size: 20px;
  }
}

This will make all these custom media definitions globally available for any css code that goes through PostCSS. An important detail that is somewhat buried in postcss docs is that the config above needs to list postcss-global-data BEFORE the others, otherwise this won't work as intended.

Hope it helps,

[Small-Systems]

Hi,

Thanks for the information. I just can't this to work. The postcss-global-data will just not load files. I really don't get it...

[theMosaad]

I had to remove postcss-custom-media for it to work 🤷‍♂️ It was probably in the default PostCSS preset in my case and adding it again might've been causing a conflict.

css: {
  postcss: {
    plugins: [
      postcssGlobalData({
        files: ['./custom-media-queries.css'],
      }),
      tailwindcss,
    ],
  },
},

[SamuelEarl]

The following configuration worked for me in my vite.config.js file:

import { defineConfig } from "vite";
import { ripple } from "@ripple-ts/vite-plugin";
import postcssGlobalData from "@csstools/postcss-global-data";
import postcssPresetEnv from "postcss-preset-env";

export default defineConfig({
  plugins: [
    ripple(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  css: {
    postcss: {
      plugins: [
        postcssGlobalData({
          files: [
            // Path to your CSS files containing @custom-media or @custom-selector.
            "./src/styles/media-queries.css"
          ]
        }),
        postcssPresetEnv({
          // Additional PostCSS options.
          stage: 3,
          features: {
            "custom-media-queries": true
          }
        }),
      ]
    }
  },
});