@tbela99/css-parser 1.3.4 → 1.4.1
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/CHANGELOG.md +37 -0
- package/README.md +44 -31
- package/dist/config.json.js +3 -0
- package/dist/index-umd-web.js +1245 -72
- package/dist/index.cjs +1256 -72
- package/dist/index.d.ts +282 -17
- package/dist/lib/ast/features/type.js +1 -1
- package/dist/lib/ast/minify.js +1 -1
- package/dist/lib/ast/types.js +62 -3
- package/dist/lib/ast/walk.js +16 -9
- package/dist/lib/fs/resolve.js +63 -7
- package/dist/lib/parser/declaration/list.js +4 -1
- package/dist/lib/parser/parse.js +828 -13
- package/dist/lib/parser/tokenize.js +22 -7
- package/dist/lib/parser/utils/declaration.js +54 -0
- package/dist/lib/parser/utils/hash.js +86 -0
- package/dist/lib/parser/utils/text.js +8 -0
- package/dist/lib/renderer/render.js +25 -6
- package/dist/lib/syntax/color/relativecolor.js +0 -3
- package/dist/lib/validation/config.json.js +15 -3
- package/dist/lib/validation/syntax.js +6 -1
- package/dist/lib/validation/syntaxes/compound-selector.js +1 -2
- package/dist/lib/validation/syntaxes/relative-selector-list.js +2 -5
- package/dist/node.js +48 -11
- package/dist/types.d.ts +17 -0
- package/dist/types.js +20 -0
- package/dist/web.js +35 -9
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## v1.4.0
|
|
4
|
+
|
|
5
|
+
### CSS Module support
|
|
6
|
+
|
|
7
|
+
- [x] scoped name generation
|
|
8
|
+
- composes:
|
|
9
|
+
- [x] compose from local selector
|
|
10
|
+
- [x] compose from other files
|
|
11
|
+
- [x] compose from global selector
|
|
12
|
+
- [x] comma separated compose list
|
|
13
|
+
- [x] :local
|
|
14
|
+
- [x] :global
|
|
15
|
+
- [x] :local()
|
|
16
|
+
- [x] :global()
|
|
17
|
+
- [x] selector
|
|
18
|
+
- [x] dashed ident (custom properties)
|
|
19
|
+
- [x] css at-rule property
|
|
20
|
+
- [x] css at-rule value
|
|
21
|
+
- [x] keyframe animations
|
|
22
|
+
- [x] grid
|
|
23
|
+
- naming
|
|
24
|
+
- [x] ignore
|
|
25
|
+
- [x] camelCase
|
|
26
|
+
- [x] camelCaseOnly
|
|
27
|
+
- [x] dashCase
|
|
28
|
+
- [x] dashCaseOnly
|
|
29
|
+
- default mode
|
|
30
|
+
- [x] global
|
|
31
|
+
- [x] local
|
|
32
|
+
- [x] pure(at least one class or id)
|
|
33
|
+
- icss
|
|
34
|
+
- [x] :import
|
|
35
|
+
- [x] :export
|
|
36
|
+
|
|
37
|
+
### Bug Fixes
|
|
38
|
+
- [x] fix \<integer\> syntax validation #115
|
|
39
|
+
|
|
3
40
|
## v1.3.4
|
|
4
41
|
|
|
5
42
|
- [x] make streaming optional #109
|
package/README.md
CHANGED
|
@@ -24,21 +24,22 @@ $ deno add @tbela99/css-parser
|
|
|
24
24
|
|
|
25
25
|
- no dependency
|
|
26
26
|
- CSS validation based upon mdn-data
|
|
27
|
-
-
|
|
27
|
+
- CSS modules support
|
|
28
|
+
- fault-tolerant parser implementing the CSS syntax module 3 recommendations.
|
|
28
29
|
- fast and efficient minification without unsafe transforms,
|
|
29
30
|
see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
|
|
30
|
-
-
|
|
31
|
+
- colors minification: color(), lab(), lch(), oklab(), oklch(), color-mix(), light-dark(), system colors and
|
|
31
32
|
relative color
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
33
|
+
- color conversion to any supported color format
|
|
34
|
+
- automatic nested css rules generation
|
|
35
|
+
- nested css rules conversion to legacy syntax
|
|
36
|
+
- sourcemap generation
|
|
37
|
+
- css shorthands computation. see the supported properties list below
|
|
38
|
+
- css transform functions minification
|
|
39
|
+
- css math functions evaluation: calc(), clamp(), min(), max(), etc.
|
|
40
|
+
- css variables inlining
|
|
41
|
+
- duplicate properties removal
|
|
42
|
+
- @import rules flattening
|
|
42
43
|
- experimental CSS prefix removal
|
|
43
44
|
|
|
44
45
|
## Online documentation
|
|
@@ -49,11 +50,11 @@ See the full documentation at the [CSS Parser](https://tbela99.github.io/css-par
|
|
|
49
50
|
|
|
50
51
|
Try it [online](https://tbela99.github.io/css-parser/playground/)
|
|
51
52
|
|
|
52
|
-
##
|
|
53
|
+
## Import
|
|
53
54
|
|
|
54
55
|
There are several ways to import the library into your application.
|
|
55
56
|
|
|
56
|
-
### Node
|
|
57
|
+
### Node
|
|
57
58
|
|
|
58
59
|
import as a module
|
|
59
60
|
|
|
@@ -64,7 +65,7 @@ import {transform} from '@tbela99/css-parser';
|
|
|
64
65
|
// ...
|
|
65
66
|
```
|
|
66
67
|
|
|
67
|
-
### Deno
|
|
68
|
+
### Deno
|
|
68
69
|
|
|
69
70
|
import as a module
|
|
70
71
|
|
|
@@ -84,7 +85,7 @@ const {transform} = require('@tbela99/css-parser/cjs');
|
|
|
84
85
|
// ...
|
|
85
86
|
```
|
|
86
87
|
|
|
87
|
-
### Web
|
|
88
|
+
### Web
|
|
88
89
|
|
|
89
90
|
Programmatic import
|
|
90
91
|
|
|
@@ -162,19 +163,27 @@ Javascript umd module from cdn
|
|
|
162
163
|
</script>
|
|
163
164
|
```
|
|
164
165
|
|
|
165
|
-
##
|
|
166
|
-
|
|
167
|
-
Parse and render css in a single pass.
|
|
166
|
+
## Exported functions
|
|
168
167
|
|
|
169
|
-
|
|
168
|
+
```ts
|
|
170
169
|
|
|
171
|
-
|
|
170
|
+
/* parse and render css */
|
|
171
|
+
transform(css: string | ReadableStream<string>, options?: TransformOptions = {}): Promise<TransformResult>
|
|
172
|
+
/* parse css */
|
|
173
|
+
parse(css: string | ReadableStream<string>, options?: ParseOptions = {}): Promise<ParseResult>;
|
|
174
|
+
/* render ast */
|
|
175
|
+
render(ast: AstNode, options?: RenderOptions = {}): RenderResult;
|
|
176
|
+
/* parse and render css file or url */
|
|
177
|
+
transformFile(filePathOrUrl: string, options?: TransformOptions = {}, asStream?: boolean): Promise<TransformResult>;
|
|
178
|
+
/* parse css file or url */
|
|
179
|
+
parseFile(filePathOrUrl: string, options?: ParseOptions = {}, asStream?: boolean): Promise<ParseResult>;
|
|
172
180
|
|
|
173
|
-
transform(css: string | ReadableStream<string>, transformOptions: TransformOptions = {}): TransformResult
|
|
174
|
-
parse(css: string | ReadableStream<string>, parseOptions: ParseOptions = {}): ParseResult;
|
|
175
|
-
render(ast: AstNode, renderOptions: RenderOptions = {}): RenderResult;
|
|
176
181
|
```
|
|
177
182
|
|
|
183
|
+
## Transform
|
|
184
|
+
|
|
185
|
+
Parse and render css in a single pass.
|
|
186
|
+
|
|
178
187
|
### Example
|
|
179
188
|
|
|
180
189
|
```javascript
|
|
@@ -208,7 +217,7 @@ Include ParseOptions and RenderOptions
|
|
|
208
217
|
> Minify Options
|
|
209
218
|
|
|
210
219
|
- minify: boolean, optional. default to _true_. optimize ast.
|
|
211
|
-
- pass: number, optional. minification
|
|
220
|
+
- pass: number, optional. minification passes. default to 1
|
|
212
221
|
- nestingRules: boolean, optional. automatically generated nested rules.
|
|
213
222
|
- expandNestingRules: boolean, optional. convert nesting rules into separate rules. will automatically set nestingRules
|
|
214
223
|
to false.
|
|
@@ -220,6 +229,10 @@ Include ParseOptions and RenderOptions
|
|
|
220
229
|
in the :root {} or html {} rule.
|
|
221
230
|
- removeEmpty: boolean, optional. remove empty rule lists from the ast.
|
|
222
231
|
|
|
232
|
+
> CSS modules Options
|
|
233
|
+
|
|
234
|
+
- module: boolean | ModuleCaseTransformEnum | ModuleScopeEnumOptions | ModuleOptions, optional. css modules options.
|
|
235
|
+
|
|
223
236
|
> CSS Prefix Removal Options
|
|
224
237
|
|
|
225
238
|
- removePrefix: boolean, optional. remove CSS prefixes.
|
|
@@ -895,7 +908,7 @@ for (const {node, parent, root} of walk(ast)) {
|
|
|
895
908
|
|
|
896
909
|
Ast can be transformed using node visitors
|
|
897
910
|
|
|
898
|
-
###
|
|
911
|
+
### Example 1: Declaration
|
|
899
912
|
|
|
900
913
|
the visitor is called for any declaration encountered
|
|
901
914
|
|
|
@@ -930,7 +943,7 @@ console.debug(result.code);
|
|
|
930
943
|
// .foo{transform:scale(calc(40/3))}
|
|
931
944
|
```
|
|
932
945
|
|
|
933
|
-
###
|
|
946
|
+
### Example 2: Declaration
|
|
934
947
|
|
|
935
948
|
the visitor is called only on 'height' declarations
|
|
936
949
|
|
|
@@ -985,7 +998,7 @@ console.debug(result.code);
|
|
|
985
998
|
|
|
986
999
|
```
|
|
987
1000
|
|
|
988
|
-
###
|
|
1001
|
+
### Example 3: At-Rule
|
|
989
1002
|
|
|
990
1003
|
the visitor is called on any at-rule
|
|
991
1004
|
|
|
@@ -1027,7 +1040,7 @@ console.debug(result.code);
|
|
|
1027
1040
|
|
|
1028
1041
|
```
|
|
1029
1042
|
|
|
1030
|
-
###
|
|
1043
|
+
### Example 4: At-Rule
|
|
1031
1044
|
|
|
1032
1045
|
the visitor is called only for at-rule media
|
|
1033
1046
|
|
|
@@ -1069,7 +1082,7 @@ console.debug(result.code);
|
|
|
1069
1082
|
|
|
1070
1083
|
```
|
|
1071
1084
|
|
|
1072
|
-
###
|
|
1085
|
+
### Example 5: Rule
|
|
1073
1086
|
|
|
1074
1087
|
the visitor is called on any Rule
|
|
1075
1088
|
|
|
@@ -1105,7 +1118,7 @@ console.debug(result.code);
|
|
|
1105
1118
|
|
|
1106
1119
|
```
|
|
1107
1120
|
|
|
1108
|
-
###
|
|
1121
|
+
### Example 6: Rule
|
|
1109
1122
|
|
|
1110
1123
|
Adding declarations to any rule
|
|
1111
1124
|
|
package/dist/config.json.js
CHANGED
|
@@ -562,6 +562,9 @@ var map = {
|
|
|
562
562
|
},
|
|
563
563
|
animation: {
|
|
564
564
|
shorthand: "animation",
|
|
565
|
+
separator: {
|
|
566
|
+
typ: "Comma"
|
|
567
|
+
},
|
|
565
568
|
pattern: "animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-timeline",
|
|
566
569
|
"default": [
|
|
567
570
|
"1",
|