在Node.js中是否可以访问cssRules?

huangapple go评论70阅读模式
英文:

Is it possible to access cssRules in Node JS

问题

I am attempting to modify CSS as part of a Node JS build process, but most of what I can find online refers to doing this in the DOM with Javascript. Is it possible to read a file in Node and access the equivalent of document.stylesheet or the cssRules property or is this a DOM-only concept and I need to stick with string replacement to modify these CSS rules/properties?

For reference here is the browser-based answer to the problem I'm trying to solve: Stack Overflow 上的回答

英文:

I am attempting to modify CSS as part of a Node JS build process, but most of what I can find online refers to doing this in the DOM with Javascript. Is it possible to read a file in Node and access the equivalent of document.stylesheet or the cssRules property or is this a DOM-only concept and I need to stick with string replacement to modify these CSS rules/properties?

For reference here is the browser-based answer to the problem I'm trying to solve: https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript

答案1

得分: 0

我认为使用DOM操纵CSS没有什么不好的,可以使用以下链接中的工具:https://www.npmjs.com/package/jsdom

如果要直接操作CSS,您可以将其解析为AST:
https://www.npmjs.com/package/css-tree

CSSTree是用于CSS的工具集:快速详细的解析器(CSS → AST),遍历器(AST遍历),生成器(AST → CSS)和词法分析器(基于规范和浏览器实现的验证和匹配)。主要目标是高效和符合W3C规范,重点关注CSS分析和源代码转换任务。

英文:

I think there's nothing bad to manipulate CSS with DOM, use for that: https://www.npmjs.com/package/jsdom

For manipulate CSS directly you could parse it into AST:
https://www.npmjs.com/package/css-tree

> CSSTree is a tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C spec compliant, with focus on CSS analyzing and source-to-source transforming tasks.

huangapple
  • 本文由 发表于 2023年6月6日 02:11:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76408989.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定