css-property-parser
css-property-parser copied to clipboard
mahirshah
Validate css properties and expand shorthand css properties
var cpp = require("css-property-parser") cpp.expandShorthandProperty('border-color', 'hsl(214, 41%, 78%) rgb(218, 112, 214) white NavajoWhite') outputs: Object border-bottom-color: "NavajoWhite" border-left-color: "white" border-right-color: "white" border-top-color: "hsl(214, 41%, 78%)" whereas it should output: Object...
It would be really useful to have a way to normalize values for properties. This would include doing unit conversions, string case conversion, and whitespace normalization in such a way...
``` > props.getShorthandsForProperty("color") [ 'color', 'border-inline-start', 'border-inline-end', 'border-block-start', 'border-block-end', '-webkit-border-before' ] ``` Need to update and pick up https://github.com/mdn/data/commit/045b9e55d94755a37b8c68dfbfc1bf96f93af64f Will by fixed by https://github.com/mahirshah/css-property-parser/issues/19
The validity checker has bugs that are causing it to return invalid for things that are valid, among these are the initial values for some properties.
``` Error: 'Error parsing shorthand property background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1). invalid syntax at line 1 col 2: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1) ^ Unexpected "w" ``` ``` Error: 'Error parsing shorthand property...
``` > propParser.expandShorthandProperty("border", "0", false, true); => { border-bottom-color:"currentcolor"; border-bottom-style:"none"; border-bottom-width:"medium"; border-left-color:"currentcolor"; border-left-style:"none"; border-left-width:"medium"; border-right-color:"currentcolor"; border-right-style:"none"; border-right-width:"medium"; border-top-color:"currentcolor"; border-top-style:"none"; border-top-width:"medium"; border-width:"0"; } ``` This is missing: `border-style: none` and `border-color:...
Currently, calc(...) is not supported by any of the property parsers. Add calc() support to the length and percentage grammars.
Add a function to the public API to return a boolean indicating if a property is supported for expansion
My version ``` css-property-parser@^1.0.6: version "1.0.6" resolved "https://registry.npmjs.org/css-property-parser/-/css-property-parser-1.0.6.tgz#f0609a9e65f2ab429492d13b1406579e10ba0b3c" integrity sha512-exNU7S4ZXcOkQqP8gJRDz5yqj8ZzHU99ZCH3pnKNfivPgoHfVczN6Qh2S9P9SkbSYaEyq/NGhJtlyoxYdePJUQ== ``` The syntax error ``` Error: 'Error parsing shorthand property background: linear-gradient(109.6deg, rgb(61, 245, 167) 11.2%, rgb(9, 111, 224) 91.1%)....
