CSSTree
CSSTree是一个CSS工具集： 快 基于规范和浏览器实现的详细解析器（CSS→AST）、遍历器（AST遍历）、生成器（AST→CSS）和词法分析器（验证和匹配）。主要目标是高效且符合W3C规范，重点是CSS分析和源到源转换任务。
特性
-
具有可调整的详细级别的详细解析
默认情况下，CSSTree尽可能详细地解析CSS，即每个逻辑部分都用自己的AST节点表示(参见 AST格式 对于所有可能的节点类型)。解析细节级别可以通过以下方式更改 解析器选项例如，您可以禁用对组件部件的选择器或声明值的解析。
-
能容忍错误的
解析器的行为如下 规范说：“当CSS中出现错误时，解析器会尝试优雅地恢复，在返回正常解析之前只丢弃最少量的内容”。解析器与规范的唯一不同之处在于，它不会丢弃不良内容，而是将其包装在特殊的节点类型中(
Raw)，以便稍后处理。 -
快速高效
CSSTree的创建重点是性能和有效的内存消耗。因此,它的 最快的CSS解析器之一 目前为止。
-
语法验证
内置词法分析器可以根据W3C定义的语法测试CSS。CSSTree使用 mdn /数据 作为lexer字典的基础，并使用特定于供应商的遗留语法对其进行扩展。Lexer目前只能检查声明值和at-rules，但这个特性将来会扩展到CSS的其他部分。
使用csstreet的项目
- 苗条的 -控制论增强的web应用程序
- SVGO -优化SVG文件的Node.js工具
- CSSO - CSS微缩与结构优化
- NativeScript NativeScript允许你直接从JavaScript访问本地api
- react-native-svg -用于React Native， React Native Web和纯React Web项目的SVG库
- 《阁楼》 —关键路径CSS生成器
- 位 - Bit是组件协作的平台
- 和更多的……
文档
工具
相关项目
- csstree-validator - NPM包来验证CSS
- stylelint-csstree-validator -插件的样式来验证CSS
- 繁重的插件
- 吞咽插件
- 崇高的插件
- VS Code插件
- 原子插件
用法
使用npm安装：
npm install css-tree
基本用法:
import * as csstree from 'css-tree';
// parse CSS to AST
const ast = csstree.parse('.example { world: "!" }');
// traverse AST and modify it
csstree.walk(ast, (node) => {
if (node.type === 'ClassSelector' && node.name === 'example') {
node.name = 'hello';
}
});
// generate CSS from AST
console.log(csstree.generate(ast));
// .hello{world:"!"}
语法匹配:
// parse CSS to AST as a declaration value
const ast = csstree.parse('red 1px solid', { context: 'value' });
// match to syntax of `border` property
const matchResult = csstree.lexer.matchProperty('border', ast);
// check first value node is a <color>
console.log(matchResult.isType(ast.children.first, 'color'));
// true
// get a type list matched to a node
console.log(matchResult.getTrace(ast.children.first));
// [ { type: 'Property', name: 'border' },
// { type: 'Type', name: 'color' },
// { type: 'Type', name: 'named-color' },
// { type: 'Keyword', name: 'red' } ]
出口
是否有可能只导入库中所需的部分，如解析器或walker。这对于加载时间或包大小优化可能很有用。
import * as tokenizer from 'css-tree/tokenizer';
import * as parser from 'css-tree/parser';
import * as walker from 'css-tree/walker';
import * as lexer from 'css-tree/lexer';
import * as definitionSyntax from 'css-tree/definition-syntax';
import * as data from 'css-tree/definition-syntax-data';
import * as dataPatch from 'css-tree/definition-syntax-data-patch';
import * as utils from 'css-tree/utils';
在浏览器中使用
bundle可以在浏览器中使用：
dist/csstree.js与…一起生活csstree随着全球
<script src="node_modules/css-tree/dist/csstree.js"></script>
<script>
csstree.parse('.example { color: green }');
</script>
dist/csstree.esm.js-缩小的ES模块
<script type="module">
import { parse } from 'node_modules/css-tree/dist/csstree.esm.js'
parse('.example { color: green }');
</script>
CDN服务之一 unpkg 或 jsDelivr 可以使用。默认情况下（对于短路径），ESM版本是公开的。对于IIFE版本，应该指定bundle的完整路径：
<!-- ESM -->
<script type="module">
import * as csstree from 'https://cdn.jsdelivr.net/npm/css-tree';
import * as csstree from 'https://unpkg.com/css-tree';
</script>
<!-- IIFE with an export to global -->
<script src="https://cdn.jsdelivr.net/npm/css-tree/dist/csstree.js"></script>
<script src="https://unpkg.com/css-tree/dist/csstree.js"></script>
顶层API
许可证
麻省理工学院