@tbela99/css-parser 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## v1.4.0
+
+### CSS Module support
+
+- [x] scoped name generation
+- composes:
+  - [x] compose from local selector
+  - [x] compose from other files
+  - [x] compose from global selector
+  - [x] comma separated compose list
+- [x] :local
+- [x] :global
+- [x] :local()
+- [x] :global()
+- [x] selector
+- [x] dashed ident (custom properties)
+- [x] css at-rule property
+- [x] css at-rule value
+- [x] keyframe animations
+- [x] grid
+- naming
+  - [x] ignore
+  - [x] camelCase
+  - [x] camelCaseOnly
+  - [x] dashCase
+  - [x] dashCaseOnly
+- default mode
+  - [x] global
+  - [x] local
+  - [x] pure(at least one class or id)
+  - icss
+    - [x] :import
+    - [x] :export
+
+### Bug Fixes
+- [x] fix \<integer\> syntax validation #115
+
+## v1.3.4
+
+- [x] make streaming optional #109
+- [x] patch at-rule syntax for @font-feature-value #110
+- [x] support percentage in transform() and scale() #111
+- [x] allow arrays in visitor definition #112
+
 ## v1.3.3
 
 - [x] relative color computation bug #105

package/README.md

@@ -4,7 +4,7 @@
 
 # css-parser
 
-CSS parser and minifier for node and the browser
+CSS parser, minifier and validator for node and the browser
 
 ## Installation
 
@@ -24,21 +24,22 @@ $ deno add @tbela99/css-parser
 
 - no dependency
 - CSS validation based upon mdn-data
-- fault-tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
+- CSS modules support
+- fault-tolerant parser implementing the CSS syntax module 3 recommendations.
 - fast and efficient minification without unsafe transforms,
   see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
-- minify colors: color(), lab(), lch(), oklab(), oklch(), color-mix(), light-dark(), system colors and
+- colors minification: color(), lab(), lch(), oklab(), oklch(), color-mix(), light-dark(), system colors and
   relative color
-- generate nested css rules
-- convert nested css rules to legacy syntax
-- convert colors to any supported color format
-- generate sourcemap
-- compute css shorthands. see supported properties list below
-- minify css transform functions
-- evaluate math functions: calc(), clamp(), min(), max(), etc.
-- inline css variables
-- remove duplicate properties
-- flatten @import rules
+- color conversion to any supported color format
+- automatic nested css rules generation
+- nested css rules conversion to legacy syntax
+- sourcemap generation
+- css shorthands computation. see the supported properties list below
+- css transform functions minification
+- css math functions evaluation: calc(), clamp(), min(), max(), etc.
+- css variables inlining
+- duplicate properties removal
+- @import rules flattening
 - experimental CSS prefix removal
 
 ## Online documentation
@@ -49,11 +50,11 @@ See the full documentation at the [CSS Parser](https://tbela99.github.io/css-par
 
 Try it [online](https://tbela99.github.io/css-parser/playground/)
 
-## Exports
+## Import
 
 There are several ways to import the library into your application.
 
-### Node exports
+### Node
 
 import as a module
 
@@ -64,7 +65,7 @@ import {transform} from '@tbela99/css-parser';
 // ...
 ```
 
-### Deno exports
+### Deno
 
 import as a module
 
@@ -84,7 +85,7 @@ const {transform} = require('@tbela99/css-parser/cjs');
 // ...
 ```
 
-### Web export
+### Web 
 
 Programmatic import
 
@@ -101,7 +102,7 @@ Javascript module from cdn
 
 <script type="module">
 
-    import {transform} from 'https://esm.sh/@tbela99/css-parser@1.3.3/web';
+    import {transform} from 'https://esm.sh/@tbela99/css-parser@1.3.4/web';
 
     const css = `
     .s {
@@ -126,7 +127,7 @@ Javascript umd module from cdn
 
 ```html
 
-<script src="https://unpkg.com/@tbela99/css-parser@1.3.2/dist/index-umd-web.js"></script>
+<script src="https://unpkg.com/@tbela99/css-parser@1.3.4/dist/index-umd-web.js"></script>
 <script>
 
     (async () => {
@@ -162,19 +163,27 @@ Javascript umd module from cdn
 </script>
 ```
 
-## Transform
-
-Parse and render css in a single pass.
+## Exported functions
 
-### Usage
+```ts
 
-```typescript
+/* parse and render css */
+transform(css: string | ReadableStream<string>, options?: TransformOptions = {}): Promise<TransformResult>
+/* parse css */
+parse(css: string | ReadableStream<string>, options?: ParseOptions = {}): Promise<ParseResult>;
+/* render ast */
+render(ast: AstNode, options?: RenderOptions = {}): RenderResult;
+/* parse and render css file or url */
+transformFile(filePathOrUrl: string, options?: TransformOptions = {}, asStream?: boolean): Promise<TransformResult>;
+/* parse css file or url */
+parseFile(filePathOrUrl: string, options?: ParseOptions = {}, asStream?: boolean): Promise<ParseResult>;
 
-transform(css: string | ReadableStream<string>, transformOptions: TransformOptions = {}): TransformResult
-parse(css: string | ReadableStream<string>, parseOptions: ParseOptions = {}): ParseResult;
-render(ast: AstNode, renderOptions: RenderOptions = {}): RenderResult;
 ```
 
+## Transform
+
+Parse and render css in a single pass.
+
 ### Example
 
 ```javascript
@@ -208,7 +217,7 @@ Include ParseOptions and RenderOptions
 > Minify Options
 
 - minify: boolean, optional. default to _true_. optimize ast.
-- pass: number, optional. minification pass. default to 1
+- pass: number, optional. minification passes. default to 1
 - nestingRules: boolean, optional. automatically generated nested rules.
 - expandNestingRules: boolean, optional. convert nesting rules into separate rules. will automatically set nestingRules
   to false.
@@ -220,6 +229,10 @@ Include ParseOptions and RenderOptions
   in the :root {} or html {} rule.
 - removeEmpty: boolean, optional. remove empty rule lists from the ast.
 
+> CSS modules Options
+
+- module: boolean | ModuleCaseTransformEnum | ModuleScopeEnumOptions | ModuleOptions, optional. css modules options.
+
 > CSS Prefix Removal Options
 
 - removePrefix: boolean, optional. remove CSS prefixes.
@@ -764,6 +777,7 @@ result
 # Node Walker
 
 ```javascript
+
 import {walk} from '@tbela99/css-parser';
 
 for (const {node, parent, root} of walk(ast)) {
@@ -894,7 +908,7 @@ for (const {node, parent, root} of walk(ast)) {
 
 Ast can be transformed using node visitors
 
-### Exemple 1: Declaration
+### Example 1: Declaration
 
 the visitor is called for any declaration encountered
 
@@ -923,20 +937,19 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{transform:scale(calc(40/3))}
 ```
 
-### Exemple 2: Declaration
+### Example 2: Declaration
 
 the visitor is called only on 'height' declarations
 
 ```typescript
 
-import {AstDeclaration, LengthToken, ParserOptions} from "../src/@types";
-import {EnumToken} from "../src/lib";
-import {transform} from "../src/node";
+import {AstDeclaration, EnumToken, LengthToken, ParserOptions, transform} from '@tbela99/css-parser';
 
 const options: ParserOptions = {
 
@@ -978,13 +991,14 @@ color: lch(from peru calc(l * 0.8) calc(c * 0.7) calc(h + 180))
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{height:calc(40px/3);width:3px}.selector{color:#0880b0}
 
 ```
 
-### Exemple 3: At-Rule
+### Example 3: At-Rule
 
 the visitor is called on any at-rule
 
@@ -1019,13 +1033,14 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{height:calc(40px/3)}
 
 ```
 
-### Exemple 4: At-Rule
+### Example 4: At-Rule
 
 the visitor is called only for at-rule media
 
@@ -1060,13 +1075,14 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{height:calc(40px/3)}
 
 ```
 
-### Exemple 5: Rule
+### Example 5: Rule
 
 the visitor is called on any Rule
 
@@ -1079,10 +1095,10 @@ const options: ParserOptions = {
 
     visitor: {
 
-
         Rule(node: AstRule): AstRule {
 
-            return {...node, sel: '.foo,.bar,.fubar'};
+            node.sel = '.foo,.bar,.fubar'
+            return node;
         }
     }
 };
@@ -1095,21 +1111,20 @@ const css = `
     } 
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo,.bar,.fubar{height:calc(40px/3)}
 
 ```
 
-### Exemple 6: Rule
+### Example 6: Rule
 
 Adding declarations to any rule
 
 ```typescript
 
-import {transform} from "../src/node";
-import {AstRule, ParserOptions} from "../src/@types";
-import {parseDeclarations} from "../src/lib";
+import {AstRule, parseDeclarations, ParserOptions, transform} from '@tbela99/css-parser';
 
 const options: ParserOptions = {
 
@@ -1135,7 +1150,8 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{width:3px}
 

package/dist/config.json.js

@@ -562,6 +562,9 @@ var map = {
 	},
 	animation: {
 		shorthand: "animation",
+		separator: {
+			typ: "Comma"
+		},
 		pattern: "animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-timeline",
 		"default": [
 			"1",