Skip to content

Commit

Permalink
compute border shorthand #3bun run build
Browse files Browse the repository at this point in the history
  • Loading branch information
tbela99 committed Aug 5, 2023
1 parent e3e7031 commit 6c27892
Show file tree
Hide file tree
Showing 84 changed files with 7,711 additions and 9,257 deletions.
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/test/ export-ignore
/docs/ export-ignore
/benchmark
/tools/ export-ignore
/package-lock.json export-ignore
/.gitignore export-ignore
Expand Down
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/test
/benchmark
/tools
/ROADMAP.md
/rollup.config.mjs
Expand Down
24 changes: 18 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,20 @@ CSS parser for node and the browser

```shell
$ npm install @tbela99/css-parser

```

### Features

- [x] fault tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
- [x] efficient minification, see benchmark
- [x] replace @import at-rules with actual css content of the imported rule
- [x] automatically create nested css rules
- [x] works the same way in node and web browser

### Performance

- [x] flatten @import

## Transform

Parse and render css in a single pass.
Expand All @@ -28,7 +39,7 @@ transform(css, transformOptions = {})

import {transform} from '@tbela99/css-parser';

const {ast, code, errors, stats} = await transform(css, {compress: true, resolveImport: true, cwd: 'files/css'});
const {ast, code, errors, stats} = await transform(css, {minify: true, resolveImport: true, cwd: 'files/css'});
```

### TransformOptions
Expand All @@ -38,19 +49,20 @@ Include ParseOptions and RenderOptions
#### ParseOptions

- src: string, optional. css file location to be used with sourcemap.
- compress: boolean, optional. default to _true_. optimize ast and minify css.
- minify: boolean, optional. default to _true_. optimize ast.
- nestingRules: boolean, optional. automatically nest rules.
- removeEmpty: boolean, remove empty nodes from the ast.
- location: boolean, optional. includes node location in the ast, required for sourcemap generation.
- cwd: string, optional. the current working directory. when specified url() are resolved using this value
- resolveImport: boolean, optional. replace @import node by the content of the referenced stylesheet.
- resolveUrls: boolean, optional. resolve css url() according to the parameters 'src' and 'cwd'

#### RenderOptions
- compress: boolean, optional. default to _true_. optimize ast and minify css.
- minify: boolean, optional. default to _true_. minify css output.
- indent: string, optional. css indention string. uses space character by default.
- newLine: string, new line character.
- removeComments: boolean, remove comments in generated css.
- preserveLicense: boolean, force preserving comments starting with '/\*!' when compress is enabling.
- preserveLicense: boolean, force preserving comments starting with '/\*!' when minify is enabled.
- colorConvert: boolean, convert colors to hex.


Expand Down Expand Up @@ -84,7 +96,7 @@ render(ast, RenderOptions = {});
import {render} from '@tbela99/css-parser';

// minified
const {code} = render(ast, {compress: true});
const {code} = render(ast, {minify: true});

console.log(code);
```
Expand Down
99 changes: 95 additions & 4 deletions dist/config.json.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ var properties = {
},
"border-width": {
shorthand: "border-width",
map: "border",
properties: [
"border-top-width",
"border-right-width",
Expand All @@ -127,26 +128,34 @@ var properties = {
"Length",
"Perc"
],
"default": [
"medium"
],
keywords: [
"thin",
"medium",
"thick"
]
},
"border-top-width": {
map: "border",
shorthand: "border-width"
},
"border-right-width": {
map: "border",
shorthand: "border-width"
},
"border-bottom-width": {
map: "border",
shorthand: "border-width"
},
"border-left-width": {
map: "border",
shorthand: "border-width"
},
"border-style": {
shorthand: "border-style",
map: "border",
properties: [
"border-top-style",
"border-right-style",
Expand All @@ -155,6 +164,9 @@ var properties = {
],
types: [
],
"default": [
"none"
],
keywords: [
"none",
"hidden",
Expand All @@ -169,19 +181,24 @@ var properties = {
]
},
"border-top-style": {
map: "border",
shorthand: "border-style"
},
"border-right-style": {
map: "border",
shorthand: "border-style"
},
"border-bottom-style": {
map: "border",
shorthand: "border-style"
},
"border-left-style": {
map: "border",
shorthand: "border-style"
},
"border-color": {
shorthand: "border-color",
map: "border",
properties: [
"border-top-color",
"border-right-color",
Expand All @@ -191,23 +208,95 @@ var properties = {
types: [
"Color"
],
"default": [
"currentcolor"
],
keywords: [
]
},
"border-top-color": {
map: "border",
shorthand: "border-color"
},
"border-right-color": {
map: "border",
shorthand: "border-color"
},
"border-bottom-color": {
map: "border",
shorthand: "border-color"
},
"border-left-color": {
map: "border",
shorthand: "border-color"
}
};
var map = {
border: {
shorthand: "border",
pattern: "border-color border-style border-width",
keywords: [
"none"
],
"default": [
"0",
"none"
],
properties: {
"border-color": {
types: [
"Color"
],
"default": [
"currentcolor"
],
keywords: [
]
},
"border-style": {
types: [
],
"default": [
"none"
],
keywords: [
"none",
"hidden",
"dotted",
"dashed",
"solid",
"double",
"groove",
"ridge",
"inset",
"outset"
]
},
"border-width": {
types: [
"Length",
"Perc"
],
"default": [
"medium"
],
keywords: [
"thin",
"medium",
"thick"
]
}
}
},
"border-color": {
shorthand: "border"
},
"border-style": {
shorthand: "border"
},
"border-width": {
shorthand: "border"
},
outline: {
shorthand: "outline",
pattern: "outline-color outline-style outline-width",
Expand All @@ -224,12 +313,10 @@ var map = {
"Color"
],
"default": [
"currentColor",
"invert"
"currentColor"
],
keywords: [
"currentColor",
"invert"
"currentColor"
]
},
"outline-style": {
Expand Down Expand Up @@ -567,6 +654,7 @@ var map = {
"default": [
"transparent"
],
multiple: true,
keywords: [
]
},
Expand All @@ -587,6 +675,7 @@ var map = {
"default": [
"scroll"
],
multiple: true,
keywords: [
"scroll",
"fixed",
Expand All @@ -599,6 +688,7 @@ var map = {
"default": [
"border-box"
],
multiple: true,
keywords: [
"border-box",
"padding-box",
Expand All @@ -612,6 +702,7 @@ var map = {
"default": [
"padding-box"
],
multiple: true,
keywords: [
"border-box",
"padding-box",
Expand Down
Loading

0 comments on commit 6c27892

Please sign in to comment.