@tarojs/parse-css-to-stylesheet 0.0.41 → 0.0.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -29
- package/index.d.ts +3 -1
- package/index.js +2 -1
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -10,10 +10,12 @@
|
|
|
10
10
|
import { parse } from '@tarojs/parse-css-to-stylesheet'
|
|
11
11
|
|
|
12
12
|
// Harmony
|
|
13
|
-
const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
13
|
+
const { code, cssVariables } = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
14
14
|
platformString: 'Harmony',
|
|
15
15
|
isEnableNesting: true // 支持解析嵌套选择器，默认关闭
|
|
16
16
|
})
|
|
17
|
+
// code: jsx代码 string
|
|
18
|
+
// cssVariables: css变量 string
|
|
17
19
|
```
|
|
18
20
|
|
|
19
21
|
在 Harmony 中，编译结果会依赖`@tarojs/plugin-platform-harmony-ets`中提供的几个包方法：
|
|
@@ -49,6 +51,7 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
49
51
|
| align-self | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
|
|
50
52
|
| flex-wrap | 'nowrap', 'wrap', 'wrap-reverse' | ❌ |
|
|
51
53
|
| position | 'relative', 'absolute' | ✔️ |
|
|
54
|
+
| position | 'flex' | ❌ |
|
|
52
55
|
| left | Length | ✔️ |
|
|
53
56
|
| top | Length | ❌ |
|
|
54
57
|
| right | Length | ❌ |
|
|
@@ -102,6 +105,7 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
102
105
|
| overflow | 'hidden', 'visible' | ✔️ |
|
|
103
106
|
| transform | translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d | ✔️ |
|
|
104
107
|
| transform-origin | Length Length | ✔️ |
|
|
108
|
+
| animation | | 后续支持 |
|
|
105
109
|
| content | | ✔️ |
|
|
106
110
|
|
|
107
111
|
⚠️ 注意：
|
|
@@ -165,37 +169,56 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
165
169
|
- 支持**类选择器**，
|
|
166
170
|
- 不支持**ID 选择器、标签选择器、属性选择器**
|
|
167
171
|
|
|
168
|
-
| 选择器 | 示例 | 示例说明 | Harmony |
|
|
169
|
-
| ------------------ | ------------------- | ------------------------------------------------------------ | :-----: |
|
|
170
|
-
| .class | .intro | 选择所有 class="intro" 的元素 | ✔️ |
|
|
171
|
-
| .class.class | .red.big | 选择所有 class="red big" 元素 | ✔️ |
|
|
172
|
-
| .class, .class | .item, .text | 选择所有 class="item" 元素和 class="text" 元素 | ✔️ |
|
|
173
|
-
| .class .class | .grandfather .child | 选择所有 class="grandfather" 内所有的 class="child" 的元素 | ✔️ |
|
|
174
|
-
| .class > .class | .parent > .child | 选择所有 父级是 class="parent"的 class="child" 元素 | ✔️ |
|
|
175
|
-
| .class+.class | .red+.big | 选择所有紧跟在 class="red" 元素之后的第一个 class="big" 元素 | ❌ |
|
|
176
|
-
| .class~.class | .red~.big | 选择所有紧跟在 class="red" 之后的每一个 class="big" 元素 | ❌ |
|
|
177
|
-
| #id | #firstname | 选择所有 id="firstname"的元素 | ❌ |
|
|
178
|
-
| \* | \* | 选择所有元素 | ❌ |
|
|
179
|
-
| element | p | 选择所有\<p>元素 | ❌ |
|
|
180
|
-
| \[attribute] | \[target] | 选择所有带有 target 属性元素 | ❌ |
|
|
181
|
-
| \[attribute=value] | \[target=blank] | 选择所有使用 target="blank"的元素 | ❌ |
|
|
182
|
-
| ... | | 其他 | ❌ |
|
|
183
|
-
|
|
184
|
-
### 伪元素
|
|
172
|
+
| 选择器 | 示例 | 示例说明 | Harmony | 备注 |
|
|
173
|
+
| ------------------ | ------------------- | ------------------------------------------------------------ | :-----: | :------: |
|
|
174
|
+
| .class | .intro | 选择所有 class="intro" 的元素 | ✔️ | |
|
|
175
|
+
| .class.class | .red.big | 选择所有 class="red big" 元素 | ✔️ | |
|
|
176
|
+
| .class, .class | .item, .text | 选择所有 class="item" 元素和 class="text" 元素 | ✔️ | |
|
|
177
|
+
| .class .class | .grandfather .child | 选择所有 class="grandfather" 内所有的 class="child" 的元素 | ✔️ | |
|
|
178
|
+
| .class > .class | .parent > .child | 选择所有 父级是 class="parent"的 class="child" 元素 | ✔️ | |
|
|
179
|
+
| .class+.class | .red+.big | 选择所有紧跟在 class="red" 元素之后的第一个 class="big" 元素 | ❌ | 后续支持 |
|
|
180
|
+
| .class~.class | .red~.big | 选择所有紧跟在 class="red" 之后的每一个 class="big" 元素 | ❌ | 后续支持 |
|
|
181
|
+
| #id | #firstname | 选择所有 id="firstname"的元素 | ❌ | |
|
|
182
|
+
| \* | \* | 选择所有元素 | ❌ | 不支持 |
|
|
183
|
+
| element | p | 选择所有\<p>元素 | ❌ | |
|
|
184
|
+
| \[attribute] | \[target] | 选择所有带有 target 属性元素 | ❌ | 不支持 |
|
|
185
|
+
| \[attribute=value] | \[target=blank] | 选择所有使用 target="blank"的元素 | ❌ | 不支持 |
|
|
186
|
+
| ... | | 其他 | ❌ | |
|
|
187
|
+
|
|
188
|
+
### 伪元素 / 伪类
|
|
185
189
|
|
|
186
190
|
- 支持**before、after**，
|
|
187
191
|
|
|
188
|
-
| 选择器 | 示例 | 示例说明 | 支持情况 |
|
|
189
|
-
| ----------------- | ------------------------ | ----------------------------------------------------------------- | :------: |
|
|
190
|
-
| :before | .intro:before | 在每个 class="intro" 元素之前插入内容 | ✔️ |
|
|
191
|
-
| :after | .intro:after | 在每个 class="intro" 元素之后插入内容 | ✔️ |
|
|
192
|
-
| :nth-child() | .intro:nth-child(2) | 选择 class="intro" 元素是其父级的第二个子元素 | ❌ |
|
|
193
|
-
| :nth-last-child() | .intro:nth-last-child(2) | 选择 class="intro" 元素是其父级的第二个子元素, 从最后一个子项计数 | ❌ |
|
|
194
|
-
| :first-child | .intro:first-child | 选择 class="intro" 元素是其父级的第一个子级 | ❌ |
|
|
195
|
-
| :last-child | .intro:last-child | 选择 class="intro" 元素是其父级的最后一个子级 | ❌ |
|
|
196
|
-
| :root | :root | 选择文档的根元素 | ❌ |
|
|
197
|
-
| :checked | input:checked | 选择每个选中的输入元素 | ❌ |
|
|
198
|
-
| ... | | 其他 | ❌ |
|
|
192
|
+
| 选择器 | 示例 | 示例说明 | 支持情况 | 备注 |
|
|
193
|
+
| ----------------- | ------------------------ | ----------------------------------------------------------------- | :------: | :------: |
|
|
194
|
+
| :before | .intro:before | 在每个 class="intro" 元素之前插入内容 | ✔️ | |
|
|
195
|
+
| :after | .intro:after | 在每个 class="intro" 元素之后插入内容 | ✔️ | |
|
|
196
|
+
| :nth-child() | .intro:nth-child(2) | 选择 class="intro" 元素是其父级的第二个子元素 | ❌ | 后续支持 |
|
|
197
|
+
| :nth-last-child() | .intro:nth-last-child(2) | 选择 class="intro" 元素是其父级的第二个子元素, 从最后一个子项计数 | ❌ | 后续支持 |
|
|
198
|
+
| :first-child | .intro:first-child | 选择 class="intro" 元素是其父级的第一个子级 | ❌ | 后续支持 |
|
|
199
|
+
| :last-child | .intro:last-child | 选择 class="intro" 元素是其父级的最后一个子级 | ❌ | 后续支持 |
|
|
200
|
+
| :root | :root | 选择文档的根元素 | ❌ | 后续支持 |
|
|
201
|
+
| :checked | input:checked | 选择每个选中的输入元素 | ❌ | |
|
|
202
|
+
| ... | | 其他 | ❌ | |
|
|
203
|
+
|
|
204
|
+
## CSS 变量
|
|
205
|
+
|
|
206
|
+
若使用 CSS 变量，挂载的属性应当挂载`:root`选择器上
|
|
207
|
+
|
|
208
|
+
⚠️：暂不支持`var传递3个及以上参数`, 如`height: var(--h, --he, 30px);`、`margin: var(--m, 30px 30px);`
|
|
209
|
+
|
|
210
|
+
```css
|
|
211
|
+
:root {
|
|
212
|
+
--color: #403635;
|
|
213
|
+
--angle: 30deg;
|
|
214
|
+
--var: var(--color, 30px);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.hello {
|
|
218
|
+
height: 30px;
|
|
219
|
+
color: var(--color);
|
|
220
|
+
}
|
|
221
|
+
```
|
|
199
222
|
|
|
200
223
|
## 常见问题
|
|
201
224
|
|
package/index.d.ts
CHANGED
|
@@ -9,5 +9,7 @@ export interface ParseOptions {
|
|
|
9
9
|
}
|
|
10
10
|
export interface ParseResult {
|
|
11
11
|
code: string
|
|
12
|
+
cssVariables?: string
|
|
12
13
|
}
|
|
13
|
-
export function parse(component: string, styles: Array<string>, options: ParseOptions):
|
|
14
|
+
export function parse(component: string, styles: Array<string>, options: ParseOptions): ParseResult
|
|
15
|
+
export function combineCssVariables(variables: Array<string>): string | null
|
package/index.js
CHANGED
|
@@ -252,6 +252,7 @@ if (!nativeBinding) {
|
|
|
252
252
|
throw new Error(`Failed to load native binding`)
|
|
253
253
|
}
|
|
254
254
|
|
|
255
|
-
const { parse } = nativeBinding
|
|
255
|
+
const { parse, combineCssVariables } = nativeBinding
|
|
256
256
|
|
|
257
257
|
module.exports.parse = parse
|
|
258
|
+
module.exports.combineCssVariables = combineCssVariables
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tarojs/parse-css-to-stylesheet",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.42",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"napi": {
|
|
@@ -55,18 +55,18 @@
|
|
|
55
55
|
"packageManager": "yarn@3.6.4",
|
|
56
56
|
"repository": "https://github.com/NervJS/parse-css-to-stylesheet",
|
|
57
57
|
"optionalDependencies": {
|
|
58
|
-
"@tarojs/parse-css-to-stylesheet-win32-x64-msvc": "0.0.
|
|
59
|
-
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.
|
|
60
|
-
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.
|
|
61
|
-
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.
|
|
62
|
-
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.
|
|
63
|
-
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.
|
|
64
|
-
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.
|
|
65
|
-
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.
|
|
66
|
-
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.
|
|
67
|
-
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.
|
|
68
|
-
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.
|
|
69
|
-
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.
|
|
70
|
-
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.
|
|
58
|
+
"@tarojs/parse-css-to-stylesheet-win32-x64-msvc": "0.0.42",
|
|
59
|
+
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.42",
|
|
60
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.42",
|
|
61
|
+
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.42",
|
|
62
|
+
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.42",
|
|
63
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.42",
|
|
64
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.42",
|
|
65
|
+
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.42",
|
|
66
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.42",
|
|
67
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.42",
|
|
68
|
+
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.42",
|
|
69
|
+
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.42",
|
|
70
|
+
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.42"
|
|
71
71
|
}
|
|
72
72
|
}
|