Rust CSS解析与转换工具swc_css的使用：高性能Rust前端工具链SWC的CSS处理库

安装

在项目目录中运行以下Cargo命令：

cargo add swc_css

或者在Cargo.toml中添加以下行：

swc_css = "17.0.0"

示例代码

以下是一个使用swc_css解析和转换CSS的完整示例：

use swc_css::{
    ast::Stylesheet,
    codegen::{writer::basic::BasicCssWriter, CodeGenerator, CodegenConfig, Emit},
    parser::parser::{Parser, parser_config::ParserConfig},
};

fn main() {
    // 要解析的CSS代码
    let css_code = r#"
        .container {
            display: flex;
            color: red;
        }
        
        @media (min-width: 768px) {
            .container {
                color: blue;
            }
        }
    "#;

    // 创建解析器配置
    let config = ParserConfig {
        css_modules: false,
        legacy_nesting: false,
        legacy_ie: false,
    };

    // 解析CSS
    let mut parser = Parser::new(css_code, config);
    let stylesheet: Stylesheet = parser.parse_all().unwrap();

    // 代码生成配置
    let codegen_config = CodegenConfig {
        minify: false,
        targets: None,
    };

    // 生成CSS代码
    let mut output = String::new();
    {
        let writer = BasicCssWriter::new(&mut output, None);
        let mut gen = CodeGenerator::new(writer, codegen_config);
        gen.emit(&stylesheet).unwrap();
    }

    println!("Generated CSS:\n{}", output);
}

完整示例demo

以下是一个更完整的示例，展示了如何使用swc_css进行CSS解析、转换和代码生成：

use swc_css::{
    ast::Stylesheet,
    codegen::{writer::basic::BasicCssWriter, CodeGenerator, CodegenConfig, Emit},
    parser::parser::{Parser, parser_config::ParserConfig},
    visit::{VisitMut, VisitMutWith},
};

// 自定义访问者用于修改CSS规则
struct ColorChanger;

impl VisitMut for ColorChanger {
    fn visit_mut_color(&mut self, color: &mut swc_css::ast::Color) {
        // 将所有颜色值改为green
        *color = swc_css::ast::Color::Ident("green".into());
    }
}

fn main() {
    // 要解析的CSS代码
    let css_code = r#"
        .header {
            font-size: 24px;
            color: red;
            background: #fff;
        }
        
        .footer {
            border: 1px solid black;
        }
        
        @media (max-width: 600px) {
            .header {
                font-size: 18px;
            }
        }
    "#;

    // 创建解析器配置
    let config = ParserConfig {
        css_modules: false,
        legacy_nesting: false,
        legacy_ie: false,
    };

    // 解析CSS
    let mut parser = Parser::new(css_code, config);
    let mut stylesheet: Stylesheet = parser.parse_all().unwrap();

    // 使用自定义访问者修改AST
    stylesheet.visit_mut_with(&mut ColorChanger);

    // 代码生成配置 - 启用压缩
    let codegen_config = CodegenConfig {
        minify: true,  // 开启压缩
        targets: None,
    };

    // 生成CSS代码
    let mut output = String::new();
    {
        let writer = BasicCssWriter::new(&mut output, None);
        let mut gen = CodeGenerator::new(writer, codegen_config);
        gen.emit(&stylesheet).unwrap();
    }

    println!("转换后的CSS代码:\n{}", output);
}

功能特性

1. 高性能的CSS解析器，完全用Rust编写
2. 支持CSS模块化
3. 支持现代和传统CSS语法
4. 可配置的代码生成选项
5. 与SWC工具链的其他组件无缝集成