
Have you tried to make less work on writing Media Queries using like Scss's `@mixin` or utility functions in CSS-in-JS?

Custom Media Queries ( `@custom-media` ), a future CSS feature, offer a solution to simplify the management and writing of media queries.

## Basic Usage

Declare the Custom Media Queries name after `@custom-media` , followed by the specified value. In your code, use `@media` followed by the declared name.

```css
/* Custom Media Query Declaration */
@custom-media --sm (width >= 600px);
@custom-media --md (width >= 900px);

/* Usage */
h1 {
  font-size: 24px;
}

@media (--sm) {
  h1 {
    font-size: 32px;
  }
}
```

The `@media` part above is same with writing:

```css
@media (min-width: 600px) {
  h1 {
    font-size: 32px;
  }
}
```

## Integrate on Astro Project using PostCSS

If you want to try this feature on your project right now, PostCSS plugins provide the required functionality. Here is an example of adding to the Astro project.

### 1. Install Packages

Install [postcss-custom-media-generator](https://github.com/jasonraimondi/postcss-custom-media-generator) and its dependency [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env).

Since Astro uses Vite, and postcss comes bundled with Vite, there's no need to install postcss separately.

```bash
npm install postcss-preset-env postcss-custom-media-generator
```

### 2. Create a Configuration File

Create a `postcss.config.cjs` file in the project's root directory.

```js
// postcss.config.cjs

const postcssPresetEnv = require("postcss-preset-env");
const postcssCustomMediaGenerator = require("postcss-custom-media-generator");

module.exports = {
  plugins: [
    postcssCustomMediaGenerator({
      // Specify name and value here
    }),
    postcssPresetEnv(),
  ],
};
```

Ensure `postcssCustomMediaGenerator()` is declared before `postcssPresetEnv()`.

### 3. Create Custom Media Queries

Append Custom Media Queries to the config file created in step 2.

For example, if you add `sm: 600`, it becomes `@custom-media --sm (600px <= width);`.

Here is example:

```jsx
// postcss.config.cjs

...

module.exports = {
  plugins: [
    postcssCustomMediaGenerator({
      sm: 600,
      md: 900,
      lg: 1200,
    }),
    postcssPresetEnv(),
  ],
};
```

Usage in actual code remains the same as the [basic usage](#basic-usage).

```css
h1 {
  font-size: 24px;
}

@media (--sm) {
  h1 {
    font-size: 32px;
  }
}
```

### Media Queries Ranges

When you write more than two values like `sm: 600` and `md: 900`, it becomes as follows:

```css
@custom-media --sm (600px <= width);
@custom-media --sm-only (600px <= width < 900px);
@custom-media --md (900px <= width);
```

If you want to use `@media (max-width: 599px)` , add `xs: 0` to the config file, and in your CSS file, write:

```css
@media (--xs-only) {
  /* Applies when the window width is below 599px */
}
```

Embrace the future of CSS by adopting Custom Media Queries (@custom-media), available right now! 🎉

This feature seamlessly functions within the `<style>` section of Astro projects located in pages/ or components/.

## References

- 10 Custom Media Queries | Media Queries Level 5 [https://www.w3.org/TR/mediaqueries-5/#custom-mq](https://www.w3.org/TR/mediaqueries-5/#custom-mq) （2024-01-18 参照）
- No media query variables | State of CSS 2022 | web.dev [https://web.dev/blog/state-of-css-2022#no-media-query-variables](https://web.dev/blog/state-of-css-2022#no-media-query-variables) （2024-01-18 参照）


How to Use Future CSS Features Custom Media Queries （@custom-media） using PostCSS

Tags