@cherrywind/postcss

简介 | Introduction

这个包提供了一个 PostCSS 插件，可以将 CSS 中的 rem 单位转换为使用 CSS 变量的动态计算值，同时还提供了一个灵活的布局系统来管理视口大小和响应式设计。

This package provides a PostCSS plugin that converts rem units in CSS to dynamic calculations using CSS variables, along with a flexible layout system to manage viewport sizes and responsive designs.

特性 | Features

• ✨ 将 rem 单位转换为 CSS 变量计算
• 📱 支持响应式布局和断点设置
• 🚀 轻量级实现，易于集成
• 🔄 与现代前端构建工具无缝集成

• ✨ Converts rem units to CSS variable calculations
• 📱 Supports responsive layouts and breakpoints
• 🚀 Lightweight implementation, easy to integrate
• 🔄 Seamlessly integrates with modern frontend build tools

安装 | Installation

# npm
npm install @cherrywind/postcss --save-dev

# yarn
yarn add @cherrywind/postcss --dev

# pnpm
pnpm add @cherrywind/postcss --save-dev

使用方法 | Usage

PostCSS 配置 | PostCSS Configuration

// postcss.config.js
const { postcssRemToCssVars } = require('@cherrywind/postcss');

module.exports = {
  plugins: [
    postcssRemToCssVars({
      // 可选：自定义 CSS 变量名
      // Optional: customize CSS variable name
      varName: '--local-scope-rem'
    })
  ]
};

客户端 JavaScript | Client-side JavaScript

import { flexible } from '@cherrywind/postcss';

// 初始化灵活布局系统
// Initialize the flexible layout system
const cleanup = flexible({
  // 可选参数
  // Optional parameters
  scopeElement: document.documentElement,
  cssVarName: '--local-scope-rem',
  breakpoints: [768], // 断点（像素）| Breakpoints (pixels)
  containers: [375, 1920], // 容器宽度 | Container widths
});

// 清理函数 (移除事件监听器)
// Cleanup function (removes event listeners)
// cleanup();

CSS 转换示例 | CSS Transformation Examples

转换前 | Before

.element {
  margin: 1rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  border: 0.0625rem solid #ccc;
  width: calc(100% - 2rem);
}

转换后 | After

.element {
  margin: calc(var(--local-scope-rem, 1rem) * 1);
  padding: calc(var(--local-scope-rem, 1rem) * 0.5) calc(var(--local-scope-rem, 1rem) * 1.5);
  font-size: calc(var(--local-scope-rem, 1rem) * 0.875);
  border: calc(var(--local-scope-rem, 1rem) * 0.0625) solid #ccc;
  width: calc(100% - calc(var(--local-scope-rem, 1rem) * 2));
}

API 文档 | API Documentation

postcssRemToCssVars(options)

一个 PostCSS 插件，用于将 rem 单位转换为使用 CSS 变量的计算值。

A PostCSS plugin that converts rem units to calculations using CSS variables.

选项 | Options

flexible(options)

初始化一个灵活的布局系统，根据视口宽度设置 CSS 变量，并根据断点自适应缩放。

Initializes a flexible layout system that sets a CSS variable for rem units based on viewport width and adaptively scales according to breakpoints.

选项 | Options

许可证 | License

MIT