使用AST快速解决css代码重构问题css-tree

最新推荐文章于 2024-05-12 10:02:44 发布
最新推荐文章于 2024-05-12 10:02:44 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Nodejs Js HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a19905522/article/details/87274590
版权
本文介绍了如何利用AST和css-tree库快速解决CSS代码重构问题，特别是在小程序转PC预览场景中。通过将SCSS转换为CSS，然后解析为JSON树结构，对尺寸和单位进行修改，最后再生成新的CSS代码，实现样式调整的高效自动化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

抽象语法树（AST）相信很多从事后端开发的同学都已经很了解了，得益于nodejs这两年的发展，很多前端同学也对AST有所研究，像近两年出现的小程序开发框架wepy mpvue等确实解决了不少前端开发中的实际问题，像mpvue这种框架的原理是什么，其中比较核心的功能就是使用AST来完成js,html,css的编译，趁着年初不忙，对去年一个项目中AST的应用做下简单分享，高手勿喷哈！

 

先说下需求背景，已经有一些小程序页面，现在产品要求能在pc管理后台可视化预览这些页面，并在后台可视化通过拖拽等操作在线编辑修改这些页面的样式。这里只介绍其中一个简单的功能点就是css部分的重构，来帮助大家入门。

 

小程序使用mpvue开发，pc后台也是使用vue开发，这样html模板大部分可以复用，只需替换一些组件，css部分小程序使用sass, 里面的尺寸单位都是750rpx，但在pc上预览的时候只有430px，最早使用sass中的一些函数来解决此问题，但发现太费时间，效率不高，最后决定用使用node-sass先将scss转换css文件， 再使用css做ast转换的常用库css-tree把css代码解析成json树，调用csstree.walk对想要重构的尺寸，单位进行修改，修改完后调用csstree.generate再生成css代码，这部分可以封装为一个webpack loader插件或者命令行工具，对小程序写好的scss文件直接转换为pc端能用的文件。

 

最小化代码 

/**
 * Created by liujinghao on 2018/12/5.
最低0.47元/天 解锁文章
某小说站点逆向还原文本——CSS反爬，AST解混淆
leavemyleave
09-28 1986
前段时间视频刷到一个小说站点，其内容没啥营养，却使用了CSS反爬和OB混淆。于是我去读了一下它的算法。读懂并写出脚本后，感觉这个网站逆向难度较小，可以尝试解决，即：只需要给出小说某一章的html链接，就能获取其内容。样本地址：aHR0cHM6Ly9nLmhvbmdzaHUuY29tL2NvbnRlbnQvMTIxMTAyLzI3NzM2MDkuaHRtbA==ts-nodetypescriptbabelsuperagentcheerio。
前端工程化
yiyueqinghui的博客
02-11 612
1、webpack和rollup的区别，打包出来的产物有什么区别？ 1.1、webpack： webpack官方解析：webpack 是一个现代 JavaScript应用程序的静态模块打包器。 当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack的功能：代码拆分，按需加载 webpack2后已支持tree-shaking 1.2、rollup Rollup
使用AST快速解决css代码重构问题
05-03
NULL 博文链接：https://liujinghao.iteye.com/blog/2437541
关于css 的AST 语法树的理解
weixin_30408309的博客
04-14 444
css 处理插件大致分为压缩css和给css添加浏览器兼容前缀。 cssmin 可以压缩css，大致原理是将使用正则将css 中的注释和空格删除。 px2rem 插件是将css 中的px 转换为 rem，它的原理是 调用了css 的AST对象 ，css插件将css内容解析成 一个javascript对象，即css AST 抽象语法树，然后遍历语法树，将对象中的px转换为rem，然后再将对象转换...
css-bouncer:Bouncer 是一个使用 CSS AST 的 CSS Linter，专注于规则作为插件。 它将使您的 CSS 中的不法分子远离
07-01
css-bouncer 将规则作为插件的 CSS Linter。 CSS Bouncer 是一个运行 CSS 规则的工具。 一些插件 CSS Bouncer 本身是相当无用的。 您需要安装或编写一些插件才能使用它。 请在 npm 中使用cssb-作为公共 CSS Bouncer 规则的前缀，以帮助查找规则。
CSS预编译器三剑客及PostCSS
s8806479的博客
03-25 452
这篇文章包含两个部分，第一部分是个CSS预编译器：Sass、Less、Stylus，他们之间的对比，第二部分是现在大火的PostCSS。 为什么会出现CSS预编译器这个东西呢？这就要谈到CSS的不足了：没有变量(新的规范已经支持了)，不支持嵌套，编程能力较弱，代码复用性差。这些不足导致写出来的CSS维护性极差，同时包含大量重复性的代码；为了弥补这些不足之处，CSS预编译器应运而生。而谈到CSS预编译器，就离不开这三剑客Sass、Less、Stylus。历史上，最先登场的是Sass，因为出现最早，所以也是最完
linter:使用Dart Sass AST编写的实验性Sass linter
04-24
萨斯·林特（Sass Linter） Sass Linter是Sass和SCSS语言的官方Linter。 使用Sass Linter Sass Linter还没有可运行的脚本。 敬请关注。 目标 有几种出色的Sass整理工具，可帮助开发人员遵守样式指南，避免打字错误和陷阱等。这些功能可通过防止错误并减少代码审阅时间来提高开发人员的工作效率。 但是，这些Linter都没有使用官方的Sass实现语言Dart编写，因此都没有使用将来会支持的主要Sass解析器或AST。 随着Sass语言超越Ruby实现，特别是使用原始解析器用Ruby编写的项目将落在后面。 Sass Linter将成为Dart Sass的AST的官方支持客户，并且将在官方实现Dart Sass中实施最新的语言更改。 去做 在这些TODO完成或取消优先级之前，请勿释放这些东西： 调试语句 沉默评论 可合并选择器 空规
【Rust日报】2023-05-11 ast-grep - 利用 AST 进行代码搜索、Lint 和重构
Rust语言学习交流
05-12 608
实用工具：ast-grepast-grep 是一个由 Rust 编写的实用工具，利用 AST 进行代码搜索、Lint 和重构。一个典型的使用场景是：需要大量重复机械修改的情况，例如升级库或 API 破坏性更改。该工具专注于轻量级和用户友好，并提供致力于提供交互式的编辑体验。Website - AST-GREP: Write Code to Match Code: https://ast-grep....
利用抽象语法树(AST)技术快速重构CSS代码
根据给定的文件信息，我们可以了解到，本文将重点探讨如何利用抽象语法树（Abstract Syntax Tree，简称AST）来解决CSS代码重构的问题。尽管没有直接的描述内容，但是结合标题和可用的标签与文件列表，我们可以推断出...
小程序反编译需要的6个依赖下载包cssbeautify，csstree，esprima，js-beautify，UglifyJS2，vm2
04-05
在反编译过程中，csstree可以用来解析小程序的样式规则，帮助开发者理解和重构样式结构。 3. **esprima**：这是一个JavaScript语法解析器，能够将JavaScript源代码转换为抽象语法树（AST）。在反编译过程中，...
掌握gonzales-ast：简化CSS AST的遍历与操作
资源摘要信息:"Gonzales-AST 是一个 JavaScript 库，用于遍历由 ...通过学习 Gonzales-AST 的相关知识，开发者可以更高效地在项目中使用和操作 CSS 的抽象语法树，进行样式优化、代码重构、自动化工具开发等操作。
scss-parser:Sass 的 SCSS 语法的解析器和 AST 树
05-31
解析器 Sass 的 SCSS 语法的解析器和 AST 树
scssparse:用 JavaScript 编写的 Sass 的 SCSS 语法的解析器和 AST
06-13
scssparse 用 JavaScript 编写的 Sass 的 SCSS 语法的解析器和 AST 树
探索组件在线预览和调试
程序员成长指北
10-23 184
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群背景前端人员在开发过程中，如何快速感知到组件的功能和属性？现状是通过阅读组件相关文档，好在基础组件库的文档相对完整和清晰，手动补全示例。业务组件相关文档目前只能在内部 NPM 私库上查看，静态的 API 文档，没有组件的 Demo。对于非前端人员，如何预览和调试组件呢？比如：某一天，产品想提前调研...
探索高效CSS处理的利器：CSSTree
最新发布
gitblog_00039的博客
05-12 337
探索高效CSS处理的利器：CSSTree csstreeA tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations项目地址:https://gitcode.com/gh_mirrors/cs/csstree...
DOM树、css树、渲染树，解析与加载、回流与重绘
weixin_44683351的博客
07-31 278
domTree -> DOM树构建（深度优先解析）-> 元素节点的解析 -> 把HTML解构变成一个树形结构。样式和DOM树的解析没有关系，apeendChild依然会解析到DOM树上。cssTree CSS树（样式结构体）（深度优先解析）1. 构建css树时，不会在机制上结合html，它只会去查看html结构当中样式和元素的对应关系，然后通过兄弟、父子构建cssTree2. 浏览器引擎不会直接把css和html结合在一起，它只会去查看样式关系形成css树。
CSS 中的前端工程化：预编译器与后处理器
薛定谔的猫-前端领域
07-16 1056
预处理器：将类 CSS 语言（Less（.less）、Sass（.scss）、Stylus 等）编译处理成浏览器可解析的真正 CSS。增强了 CSS 代码的复用性，还有嵌套、变量、循环、函数、mixin 等，具有很方便的 UI 组件模块化开发能力。 PostCSS，通常被视为在完成的样式表中根据 CSS 规范处理 CSS，让其更有效。它的初始功能只有源文件生成 AST 树，AST 树生成新文件，借助插件机制实现定制化的功能，目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
Dom树 CSS树 渲染树(render树) 规则、原理
热门推荐
weixin_45820444的博客
10-11 1万+
  前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？ 首先你要了解浏览器渲染的顺序：   1.构建dom 树   2.构建css 树   3.构建渲染树   4.节点布局   5.页面渲染 什么是dom 树？   浏览器将HTML解析成树形的数据结构，简称DOM。   DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树
AST介绍：解析html生成语法树
余阿良的博客
04-08 7118
前言 这个名词一直不陌生，但是没有细致了解过，结合自己的项目，记录一下自己对AST的理解。 什么是AST(抽象语法树)？ 抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。 AST的作用？ 解释器/编译器进行语法分析的基础 AST的使用场景？ JS：代码压缩、混淆、编译 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值