postcss-media-calc

A PostCSS plugin to automatically calculate calc() and var() in @media rules, making responsive CSS easier to manage.

🌟 作用 (Purpose)

• 遍历 CSS 中所有 @media 规则
• 对媒体查询中的 var(--xxx) 和 calc() 表达式进行计算
• 支持简单的加减乘除运算
• 自动读取 :root 中定义的 CSS 变量，无需手动传入

⚙️ 功能 (Features)

• ✅ 自动解析 :root 中的 CSS 变量
• ✅ 解析并计算媒体查询中的 calc() 表达式
• ✅ 支持 + - * / 基本运算
• ✅ 生成最终可直接使用的 CSS
• ✅ 无需手动传入变量，自动获取 :root 中定义的值

💻 安装 (Installation)

# 使用 npm
npm install --save-dev postcss-media-calc

# 使用 pnpm
pnpm add -D postcss-media-calc

# 使用 yarn
yarn add -D postcss-media-calc

🔧 使用方法 (Usage)

配置 PostCSS (postcss.config.mjs)

import postcssMediaCalc from 'postcss-media-calc';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [
    postcssMediaCalc(),
    autoprefixer()
  ]
};

🎨 示例 (Example)

输入 CSS (Input)

:root {
  --layout-max-width: 1280px;
  --aside-width: 300px;
  --layout-orientation-breakpoint: 800px;
  --spacing-sm: 10px;
}

@media (max-width: calc(var(--layout-max-width) + var(--spacing-sm) * 2)) {
  .left {
    width: calc(100vw - var(--aside-width) - var(--spacing-sm) * 2);
  }
}

输出 CSS (Output)

@media (max-width: 1300px) {
  .left {
    width: calc(100vw - 300px - 20px);
  }
}

📌 注意事项 (Notes)

• 只解析 @media 规则里的 calc() 和 var() 表达式
• 支持基本算术运算 (+, -, *, /)
• 如果 var() 未定义，则保留原样
• 对嵌套 calc 或复杂单位暂不支持（可扩展）