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
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
/errors.txt
/syntax.txt
/ROADMAP.draft.md
/.idea
/.DS_Store
/ROADMAP.md
/docs
/package-lock.json
test/*.ts
test/*.js
test/*.css
test/*.html
test/*.json
test/*.md

# Logs
logs
Expand Down
3 changes: 2 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@
/.gitattributes
/Writerside
/validator
/sw.js
/sw.js
/jsr.json
41 changes: 32 additions & 9 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,26 @@
# Changelog

#v0.7.0

- [x] fix merging rules
- [ ] experimental CSS prefix removal
- [x] declaration name
- [ ] declaration value
- [ ] exclude -webkit-* gradients
- [x] css selector validation
- [x] pseudo element
- [x] partial pseudo class validation. does not validate parameters
- [x] attribute selector
- [x] combinator
- [x] simple selector
- [x] nested selector
- [x] strict vs permissive validation: allow unknown items such as pseudo classes
- [x] allow unknown pseudo classes
- [x] allow unknown attribute selectors
- [x] strip universal selector when possible

# v0.6.0

- [x] light-dark() color
- [x] system color

Expand Down Expand Up @@ -58,15 +78,16 @@ CSS color level 4 & 5
- [x] gap

### Other

- [x] renamed RenderOptions.colorConvert to RenderOptions.convertColor
- [x] support none keyword in color
- [x] css relative color syntax for rgb(), hsl() and hwb() colors https://www.w3.org/TR/css-color-5/#relative-colors
- [x] rgb
- [x] hex
- [x] hsl
- [x] hwb
- [x] calc()
- [x] calc() and inline var()
- [x] rgb
- [x] hex
- [x] hsl
- [x] hwb
- [x] calc()
- [x] calc() and inline var()

## v0.2.0

Expand All @@ -93,7 +114,7 @@ CSS color level 4 & 5
## v0.1.0

- [x] sourcemap generation
- [x] reduce calc():
- [x] reduce calc():
- [x] inline css variables
- [x] configure duplicate declarations removal
- [x] configure shorthand properties computation
Expand All @@ -104,7 +125,7 @@ CSS color level 4 & 5

- [x] merge identical rules
- [x] merge adjacent rules
- [x] minify colors
- [x] minify colors
- [x] minify numbers and Dimensions tokens
- [x] compute shorthand: see the list below
- [x] remove redundant declarations
Expand All @@ -113,12 +134,14 @@ CSS color level 4 & 5
- [x] conditionally unwrap :is()
- [x] automatic css nesting
- [x] automatically wrap selectors using :is()
- [x] multi-level shorthand properties (border - [border-width, border-color, border-style, etc.]) https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
- [x] multi-level shorthand properties (
border - [border-width, border-color, border-style, etc.]) https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
- [x] avoid reparsing (declarations, selectors, at-rule)
- [x] node and browser versions
- [x] decode and replace utf-8 escape sequence

### Computed shorthands

- [x] background
- [x] border
- [x] border-bottom
Expand Down
109 changes: 106 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ $ npm install @tbela99/css-parser
- inline css variables
- remove duplicate properties
- flatten @import rules
- partial css validation: only css selector is validated

## Playground

Expand Down Expand Up @@ -145,17 +146,21 @@ Include ParseOptions and RenderOptions
- inlineCssVariables: boolean, optional. replace some css variables with their actual value. they must be declared once in the :root {} or html {} rule.
- removeEmpty: boolean, optional. remove empty rule lists from the ast.

> Minify Options

- validation: boolean, optional. enable strict css validation using (mdn data)[https://github.com/mdn/data]. only the selector is validated at this time.

> Sourcemap Options

- src: string, optional. original css file location to be used with sourcemap.
- src: string, optional. original css file location to be used with sourcemap, also used to resolve url().
- sourcemap: boolean, optional. preserve node location data.

> Misc Options

- resolveUrls: boolean, optional. resolve css 'url()' according to the parameters 'src' and 'cwd'
- resolveImport: boolean, optional. replace @import rule by the content of its referenced stylesheet.
- removeCharset: boolean, optional. remove @charset.
- cwd: string, optional. the current working directory. when specified url() are resolved using this value
- cwd: string, optional. destination directory used to resolve url().
- visitor: VisitorNodeMap, optional. node visitor used to transform the ast.
- signal: AbortSignal, optional. abort parsing.

Expand All @@ -179,7 +184,7 @@ Include ParseOptions and RenderOptions
- indent: string, optional. css indention string. uses space character by default.
- newLine: string, optional. new line character.
- output: string, optional. file where to store css. url() are resolved according to the specified value. no file is created though.
- cwd: string, optional. value used as current working directory. when output is not provided, urls are resolved according to this value.
- cwd: string, optional. destination directory used to resolve url().

## Parsing

Expand Down Expand Up @@ -316,6 +321,104 @@ table.colortable {
}
```

### CSS Validation

CSS

```css

#404 {
--animate-duration: 1s;
}

.s, #404 {
--animate-duration: 1s;
}

.s [type="text" {
--animate-duration: 1s;
}

.s [type="text"]] {
--animate-duration: 1s;
}

.s [type="text"] {
--animate-duration: 1s;
}

.s [type="text" i] {
--animate-duration: 1s;
}

.s [type="text" s] {
--animate-duration: 1s;
}

.s [type="text" b] {
--animate-duration: 1s;
}

.s [type="text" b], {
--animate-duration: 1s;
}

.s [type="text" b]+ {
--animate-duration: 1s;
}

.s [type="text" b]+ b {
--animate-duration: 1s;
}

.s [type="text" i]+ b {
--animate-duration: 1s;
}


.s [type="text"())] {
--animate-duration: 1s;
}
.s() {
--animate-duration: 1s;
}
.s:focus {
--animate-duration: 1s;
}
```

with validation enabled

```javascript
import {parse, render} from '@tbela99/css-parser';
const options = {minify: true, validate: true};
const {code} = await parse(css, options).then(result => render(result.ast, {minify: false}));
//
console.debug(code);
```

```css
.s:is([type=text],[type=text i],[type=text s],[type=text i]+b,:focus) {
--animate-duration: 1s
}
```

with validation disabled

```javascript
import {parse, render} from '@tbela99/css-parser';
const options = {minify: true, validate: false};
const {code} = await parse(css, options).then(result => render(result.ast, {minify: false}));
//
console.debug(code);
```

```css
.s:is([type=text],[type=text i],[type=text s],[type=text b],[type=text b]+b,[type=text i]+b,:focus) {
--animate-duration: 1s
}
```

### Nested CSS Expansion

CSS
Expand Down
4 changes: 3 additions & 1 deletion dist/config.json.js
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,9 @@ var map = {
transition: {
shorthand: "transition",
multiple: true,
separator: ",",
separator: {
typ: "Comma"
},
pattern: "transition-property transition-duration transition-timing-function transition-delay transition-behavior",
keywords: [
"none",
Expand Down
Loading