{"id":28447749,"url":"https://github.com/nervjs/parse-css-to-stylesheet","last_synced_at":"2026-03-17T11:16:34.132Z","repository":{"id":195964957,"uuid":"687986645","full_name":"NervJS/parse-css-to-stylesheet","owner":"NervJS","description":"css转stylesheet插件，适用于鸿蒙、RN","archived":false,"fork":false,"pushed_at":"2025-11-10T13:17:29.000Z","size":2514,"stargazers_count":20,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-11-19T22:05:17.720Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NervJS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-09-06T12:19:44.000Z","updated_at":"2025-11-10T13:11:53.000Z","dependencies_parsed_at":"2023-12-25T09:46:00.872Z","dependency_job_id":"29514753-d3f0-4989-969a-219c1abcb5b4","html_url":"https://github.com/NervJS/parse-css-to-stylesheet","commit_stats":null,"previous_names":["nervjs/parse-css-to-stylesheet"],"tags_count":115,"template":false,"template_full_name":null,"purl":"pkg:github/NervJS/parse-css-to-stylesheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NervJS%2Fparse-css-to-stylesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NervJS%2Fparse-css-to-stylesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NervJS%2Fparse-css-to-stylesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NervJS%2Fparse-css-to-stylesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NervJS","download_url":"https://codeload.github.com/NervJS/parse-css-to-stylesheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NervJS%2Fparse-css-to-stylesheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28771531,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T08:38:24.014Z","status":"ssl_error","status_checked_at":"2026-01-26T08:38:22.080Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-06T12:06:46.246Z","updated_at":"2026-01-26T09:03:33.318Z","avatar_url":"https://github.com/NervJS.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# parse-css-to-stylesheet\n\n## 简介\n\n对 CSS 代码进行解析编码处理，应用于 React Native 、鸿蒙等不支持 CSS 写法的场景\n\n## 使用方式\n\n```typescript\nimport { parse } from '@tarojs/parse-css-to-stylesheet'\n\n// Harmony\nconst { code } = parse([cssCode1, cssCode2, ...], {\n  platformString: 'Harmony',\n  designWidth: 750\n})\n// code: CSS 代码 string\n```\n\n## 参数说明\n\n```typescript\nexport interface OutputOptions {\n  isBin?: boolean\n}\nexport interface ParseOptions {\n  platformString: string  // 平台 Harmony\n  output?: OutputOptions\n}\nexport interface ParseResult {\n  code?: string\n  buffer?: Buffer\n}\n\n// 样式解析\nexport function parse(\n  styles: Array\u003cstring\u003e,\n  options: ParseOptions\n): ParseResult;\n```\n\n#### ParseOptions\n\n| 配置参数        | 类型    | 可选值                   | 说明             |\n| --------------- | ------- | ------------------------ | ---------------- |\n| platformString  | String  | 'Harmony'、'ReactNative' | 平台             |\n| output          | Object |   { isBin: false }        | 输出格式 |\n\n#### ParseResult\n\n| 配置参数 | 类型   | 说明                      |\n| -------- | ------ | ------------------------- |\n| code     | String | 经过样式解析后的样式代码 |\n| buffer   | Buffer | 经过样式解析后的二进制 |\n\n## 样式支持情况\n\n| 类型   | 举例合法值                                       |        备注         |\n| ------ | ------------------------------------------------ | :-----------------: |\n| Length | 10px、10vw、10vh、100%、10rem、calc(100% - 20px) |     1rem = 16px     |\n| Color  | #f00、rgb(0,0,0)、rgba(0,0,0,0.2)、green         | 暂不支持 hsl 等方法 |\n| Border | '1px solid #f00'                                 |    符合 w3c 规范    |\n\n### 通用属性\n\n所有元素都支持的样式：\n\n| 属性                       | 可选值 / 单位                                                                                                                               | 支持情况 |\n| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | :------: |\n| flex                       | 'flexGrow', 'flexShrink', 'flexBasis'                                                                                                       |    ✔️    |\n| flex-grow                  | Number                                                                                                                                      |    ✔️    |\n| flex-shrink                | Number                                                                                                                                      |    ✔️    |\n| flex-basis                 | Length                                                                                                                                      |    ✔️    |\n| flex-direction             | 'row','row-reverse','column','column-reverse'                                                                                               |    ✔️    |\n| justify-content            | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'                                                         |    ✔️    |\n| align-content              | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'                                                         |    ✔️    |\n| align-items                | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'                                                                                   |    ✔️    |\n| align-self                 | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto'                                                                          |    ✔️    |\n| flex-wrap                  | 'nowrap', 'wrap', 'wrap-reverse'                                                                                                            |    ✔️    |\n| position                   | 'relative', 'absolute', 'fixed'                                                                                                             |    ✔️    |\n| left                       | Length                                                                                                                                      |    ✔️    |\n| top                        | Length                                                                                                                                      |    ✔️    |\n| bottom                     | Length                                                                                                                                      |    ❌    |\n| right                      | Length                                                                                                                                      |    ❌    |\n| z-index                    | Number                                                                                                                                      |    ✔️    |\n| bottom                     | Length                                                                                                                                      |    ✔️    |\n| margin                     | Length \\ Length Length \\ Length Length Length \\ Length Length Length Length                                                                 |    ✔️    |\n| margin-top                 | Length                                                                                                                                      |    ✔️    |\n| margin-right               | Length                                                                                                                                      |    ✔️    |\n| margin-bottom              | Length                                                                                                                                      |    ✔️    |\n| margin-left                | Length                                                                                                                                      |    ✔️    |\n| padding                    | Length \\ Length Length \\ Length Length Length \\ Length Length Length Length                                                                 |    ✔️    |\n| padding-top                | Length                                                                                                                                      |    ✔️    |\n| padding-right              | Length                                                                                                                                      |    ✔️    |\n| padding-bottom             | Length                                                                                                                                      |    ✔️    |\n| padding-left               | Length                                                                                                                                      |    ✔️    |\n| width                      | Length                                                                                                                                      |    ✔️    |\n| height                     | Length                                                                                                                                      |    ✔️    |\n| min-height                 | Length                                                                                                                                      |    ✔️    |\n| min-width                  | Length                                                                                                                                      |    ✔️    |\n| max-height                 | Length                                                                                                                                      |    ✔️    |\n| max-width                  | Length                                                                                                                                      |    ✔️    |\n| background                 |                                                                                                                                             |    ✔️    |\n| background-color           | Color                                                                                                                                       |    ✔️    |\n| background-image           | \"src('xxx')\", \"linear-gradient(xxx)\", \"radial-gradient(xxx)\" 支持图片资源和性渐变                                                           |    ✔️    |\n| background-size            | 'cover', 'contain', Length(x y), Length(x) Length(y)                                                                                        |    ✔️    |\n| background-position        | center', 'top', 'bottom', 'left', 'right', , Length(x y), Length(x) Length(y)                                                               |    ✔️    |\n| background-repeat          | 'repeat', 'no-repeat', 'repeat-x', 'repeat-y'                                                                                               |    ✔️    |\n| border                     | Border（可设置 4 个值，控制 4 个方向）                                                                                                      |    ✔️    |\n| border-top                 | Border                                                                                                                                      |    ✔️    |\n| border-left                | Border                                                                                                                                      |    ✔️    |\n| border-right               | Border                                                                                                                                      |    ✔️    |\n| border-bottom              | Border                                                                                                                                      |    ✔️    |\n| border-color               | Color（可设置 4 个值，控制 4 个方向）                                                                                                       |    ✔️    |\n| border-top-color           | Color                                                                                                                                       |    ✔️    |\n| border-right-color         | Color                                                                                                                                       |    ✔️    |\n| border-bottom-color        | Color                                                                                                                                       |    ✔️    |\n| border-left-color          | Color                                                                                                                                       |    ✔️    |\n| border-radius              | Length（可设置 4 个值，控制 4 个方向）, 不支持百分比                                                                                        |    ✔️    |\n| border-top-left-radius     | Length, 不支持百分比                                                                                                                        |    ✔️    |\n| border-top-right-radius    | Length, 不支持百分比                                                                                                                        |    ✔️    |\n| border-bottom-left-radius  | Length, 不支持百分比                                                                                                                        |    ✔️    |\n| border-bottom-right-radius | Length, 不支持百分比                                                                                                                        |    ✔️    |\n| border-style               | 'dotted', 'dashed', 'solid' （4 个值，控制 4 个方向）                                                                                       |    ✔️    |\n| border-top-style           | 'dotted', 'dashed', 'solid'                                                                                                                 |    ✔️    |\n| border-right-style         | 'dotted', 'dashed', 'solid'                                                                                                                 |    ✔️    |\n| border-bottom-style        | 'dotted', 'dashed', 'solid'                                                                                                                 |    ✔️    |\n| border-left-style          | 'dotted', 'dashed', 'solid'                                                                                                                 |    ✔️    |\n| opacity                    | Number                                                                                                                                      |    ✔️    |\n| display                    | 'flex', 'none', 'block'                                                                                                                     |    ✔️    |\n| display                    | 'inline-block', 'inline-flex', 'inline'                                                                                                     |    ❌    |\n| overflow                   | 'hidden', 'visible', 'scroll', 'auto'                                                                                                       |    ✔️    |\n| transform                  | translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d |    ✔️    |\n| transform-origin           | Length(top/center/bottom) Length(left/center/right)                                                                                         |    ✔️    |\n| animation                  | 仅支持 animation-name, animation-duration , animation-timing-function, animation-delay, animation-iteration-count， 暂不支持 style 设置     |    ✔️    |\n| box-shadow                 |                                                                                                                                             |    ✔️    |\n| content                    |                                                                                                                                             |    ✔️    |\n\n⚠️ 注意：\n\n- `transform` 不允许连续出现 2 个同类型如：transform: translate(20px 20px) translate3d(10px, 30px, 30px)\n- `radial-linear`\n  - \\\u003cradial-extent\u003e不支持, 如（closest-side、closest-corner、farthest-side、farthest-corner）\n- `display` 不支持 **行内**\n- 定位不支持 **bottom** 和 **right**\n\n### 文本样式\n\n| 属性               | 可选值 / 单位                                           | 支持情况 |\n| ------------------ | ------------------------------------------------------- | :------: |\n| font-size          | Length                                                  |    ✔️    |\n| font-family        |                                                         |    ✔️    |\n| font-style         | 'normal', 'italic'                                      |    ✔️    |\n| font-weight        | 100~900, 'bold','bolder','lighter','normal'             |    ✔️    |\n| line-height        | 'XXpx' (需要指定具体指，不支持 Number)                  |    ✔️    |\n| text-align         | 'center', 'left', 'right'                               |    ✔️    |\n| text-decoration    | ('none', 'underline', 'line-through', 'overline') Color |    ✔️    |\n| text-overflow      | 'ellipsis', 'clip'                                      |    ✔️    |\n| vertical-align     | 'middle', 'top', 'bottom'                               |    ✔️    |\n| color              | Color                                                   |    ✔️    |\n| -webkit-line-clamp | Number                                                  |    ✔️    |\n\n⚠️ 注意：\n\n- 文本样式 **仅对`\u003cText\u003e\u003c/Text\u003e`节点生效**\n- 文本样式 **不支持继承**\n- `line-height`**不支持数值**\n\n**以下两种情况是正确的对文本进行样式添加的案例：**\n\n1.直接将样式添加在`\u003cText/\u003e`上\n\n```jsx\n// ✅ 允许\n\u003cText className=\"txt\"\u003ehello\u003c/Text\u003e\n```\n\n2.样式添加到`\u003cView/\u003e`下是一个文本内容\n\n```jsx\n// ✅ 允许\n\u003cView className=\"txt\"\u003ehello\u003c/View\u003e\n```\n\n**错误案例：**\n\n```jsx\n// ❌ hello 父级没有添加文本样式，txt的文本属性无法继承下去\n\u003cView className=\"txt\"\u003e\n  \u003cText\u003ehello\u003c/Text\u003e\n\u003c/View\u003e\n```\n\n## CSS 选择器\n\n### 通用选择器\n\n注意点：\n\n- 支持**类选择器**，\n- 不支持**ID 选择器、标签选择器、属性选择器**\n\n| 选择器             | 示例                | 示例说明                                                     | Harmony |   备注   |\n| ------------------ | ------------------- | ------------------------------------------------------------ | :-----: | :------: |\n| .class             | .intro              | 选择所有 class=\"intro\" 的元素                                |   ✔️    |          |\n| .class.class       | .red.big            | 选择所有 class=\"red big\" 元素                                |   ✔️    |          |\n| .class, .class     | .item, .text        | 选择所有 class=\"item\" 元素和 class=\"text\" 元素               |   ✔️    |          |\n| .class .class      | .grandfather .child | 选择所有 class=\"grandfather\" 内所有的 class=\"child\" 的元素   |   ✔️    |          |\n| .class \u003e .class    | .parent \u003e .child    | 选择所有 父级是 class=\"parent\"的 class=\"child\" 元素          |   ✔️    |          |\n| .class+.class      | .red+.big           | 选择所有紧跟在 class=\"red\" 元素之后的第一个 class=\"big\" 元素 |   ❌    | 后续支持 |\n| .class~.class      | .red~.big           | 选择所有紧跟在 class=\"red\" 之后的每一个 class=\"big\" 元素     |   ❌    | 后续支持 |\n| #id                | #firstname          | 选择所有 id=\"firstname\"的元素                                |   ❌    |          |\n| \\*                 | \\*                  | 选择所有元素                                                 |   ❌    |  不支持  |\n| element            | p                   | 选择所有\\\u003cp\u003e元素                                             |   ❌    |          |\n| \\[attribute]       | \\[target]           | 选择所有带有 target 属性元素                                 |   ❌    |  不支持  |\n| \\[attribute=value] | \\[target=blank]     | 选择所有使用 target=\"blank\"的元素                            |   ❌    |  不支持  |\n| ...                |                     | 其他                                                         |   ❌    |          |\n\n### 伪元素 / 伪类\n\n- 支持**before、after**，\n\n| 选择器       | 示例                | 示例说明                                      | 支持情况 | 备注 |\n| ------------ | ------------------- | --------------------------------------------- | :------: | :--: |\n| :before      | .intro:before       | 在每个 class=\"intro\" 元素之前插入内容         |    ✔️    |      |\n| :after       | .intro:after        | 在每个 class=\"intro\" 元素之后插入内容         |    ✔️    |      |\n| :nth-child() | .intro:nth-child(2) | 选择 class=\"intro\" 元素是其父级的第二个子元素 |    ✔️    |      |\n| :first-child | .intro:first-child  | 选择 class=\"intro\" 元素是其父级的第一个子级   |    ✔️    |      |\n| :last-child  | .intro:last-child   | 选择 class=\"intro\" 元素是其父级的最后一个子级 |    ✔️    |      |\n| :empty       | .intro:empty        | 选择 class=\"intro\" 元素并且其没有子级         |    ✔️    |      |\n| :checked     | input:checked       | 选择每个选中的输入元素                        |    ❌    |      |\n| ...          |                     | 其他                                          |    ❌    |      |\n\n## CSS 变量\n\n⚠️：暂不支持 **动态修改 Css 变量的值**\n\n```css\n:root {\n  --color: #403635;\n  --angle: 30deg;\n  --var: var(--color, 30px);\n}\n\n.hello {\n  height: 30px;\n  color: var(--color);\n}\n```\n\n## 常见问题\n\n### 1. 跨组件传递 className、style\n\n#### ❌ 错误做法\n\n比如业务上针对`@tarojs/components`的组件进行重导出，如引入了`Image`，对其进行了**二次封装**，然后通过一个入口统一导出如：\n\n```js\n// ./components.js\nimport { View, Text } from \"@tarojs/components\";\n\n// 这里的Image实际上是对TaroImage的二次封装，一样的暴露出style和classname使用\nexport { default as Image } from \"./xxxx\";\n```\n\n- 在 Taro 编译的视角来看`\u003cImage/\u003e`已经是一个**自定义组件**，并且它接收了`className`，也就说明了它的类名其实是往下传递了，我们会在运行时进行**样式合成**\n- `\u003cView/\u003e`和`\u003cText/\u003e`其实是原封不动的直接导出的，本质上它并不是一个自定义组件，所以 Taro 在编译时，会在**编译阶段将样式赋予上去**\n\n```js\n// 注意：这里的组件从统一入口进行导入\nimport { View, Image } from \"./components\";\n\nfunction Index() {\n  return (\n    \u003cView className=\"xxx\"\u003e\n      \u003cImage className=\"xxxxxx\" /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n但是问题来了，这里在实际使用时，`\u003cView/\u003e`和`\u003cImage/\u003e`都是通过`'./components'`导入，编译阶段无法知道他们是**Taro 组件**还是**自定义组件**，顾在实际运行时，都会视为**自定义组件**对待\n\n因为**自定义组件**是在**运行时动态合成样式**，顾性能远不及**Taro 组件**\n\n#### ✅ 正确做法\n\n如果 Taro 组件没有二次封装，我们建议从`@tarojs/components`导入，提供编译的优化效果\n\n```js\n// 自定义组件引入\nimport { Image } from \"./components\";\n// Taro组件引入\nimport { View } from \"@tarojs/components\";\n\nfunction Index() {\n  return (\n    \u003cView className=\"xxx\"\u003e\n      \u003cImage className=\"xxxxxx\" /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnervjs%2Fparse-css-to-stylesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnervjs%2Fparse-css-to-stylesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnervjs%2Fparse-css-to-stylesheet/lists"}