Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
/errors.txt
/syntax.txt
/deno.lock
/.repl_history
/ROADMAP.draft.md
/.idea
/.DS_Store
Expand Down
37 changes: 37 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,42 @@
# 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
Expand Down
75 changes: 44 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand All @@ -64,7 +65,7 @@ import {transform} from '@tbela99/css-parser';
// ...
```

### Deno exports
### Deno

import as a module

Expand All @@ -84,7 +85,7 @@ const {transform} = require('@tbela99/css-parser/cjs');
// ...
```

### Web export
### Web

Programmatic import

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -895,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

Expand Down Expand Up @@ -930,7 +943,7 @@ console.debug(result.code);
// .foo{transform:scale(calc(40/3))}
```

### Exemple 2: Declaration
### Example 2: Declaration

the visitor is called only on 'height' declarations

Expand Down Expand Up @@ -985,7 +998,7 @@ console.debug(result.code);

```

### Exemple 3: At-Rule
### Example 3: At-Rule

the visitor is called on any at-rule

Expand Down Expand Up @@ -1027,7 +1040,7 @@ console.debug(result.code);

```

### Exemple 4: At-Rule
### Example 4: At-Rule

the visitor is called only for at-rule media

Expand Down Expand Up @@ -1069,7 +1082,7 @@ console.debug(result.code);

```

### Exemple 5: Rule
### Example 5: Rule

the visitor is called on any Rule

Expand Down Expand Up @@ -1105,7 +1118,7 @@ console.debug(result.code);

```

### Exemple 6: Rule
### Example 6: Rule

Adding declarations to any rule

Expand Down
3 changes: 3 additions & 0 deletions dist/config.json.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading