Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
css-property-parser
Advanced tools
Readme
Validate css properties and expand css shorthand properties
$ npm install css-property-parser
const {
isShorthandProperty,
isValidDeclaration,
getShorthandComputedProperties,
expandShorthandProperty,
getShorthandsForProperty,
} = require('css-property-parser');
// isShorthandProperty
// returns boolean indicating if the given property is a shorthand property
console.log(isShorthandProperty('border')); // => true
console.log(isShorthandProperty('color')); // => false
// isValidDeclaration
// returns boolean indicating if the given property value pair is valid
console.log(isValidDeclaration('border', '1px solid black')); // => true
console.log(isValidDeclaration('color', 'rgba(0, 0, 0, .25)')); // => true
console.log(isValidDeclaration('z-index', 'abc')); // => false
console.log(isValidDeclaration('height', 'red')); // => false
// getShorthandComputedProperties
// returns an array of computed property names for the given shorthand
console.log(getShorthandComputedProperties('background'))
// => [
// "background-image",
// "background-position",
// "background-size",
// "background-repeat",
// "background-origin",
// "background-clip",
// "background-attachment",
// "background-color"
// ]
console.log(getShorthandComputedProperties('color'))
// => ["color"]
console.log(getShorthandComputedProperties('unknown'))
// => []
// expandShorthandProperty
// returns an obejct mapping longhand property names to their values
console.log(expandShorthandProperty('margin', '0 3px 10rem'))
// => {
// 'margin-top': '0',
// 'margin-right': '3px',
// 'margin-bottom': '10rem',
// 'margin-left': '3px',
// }
console.log(expandShorthandProperty('background', 'fixed padding-box url(image.png) rgb(255, 255, 0) 10px top / cover repeat-x'))
// => {
// 'background-attachment': 'fixed',
// 'background-clip': 'padding-box',
// 'background-origin': 'padding-box',
// 'background-image': 'url(image.png)',
// 'background-repeat': 'repeat-x',
// 'background-color': 'rgb(255, 255, 0)',
// 'background-position': '10px top',
// 'background-size': 'cover',
// }
console.log(getShorthandsForProperty('border-left-width'));
// => [ 'border-left-width', 'border-left', 'border-width', 'border' ]
Checks if a given property is a shorthand property
isShorthandProperty('border')
// => true
isShorthandProperty('color')
// => false
Checks if the given property, value pair is valid.
isValidDeclaration('color', 'currentColor')
// => true
isValidDeclaration('color', 'rgb(0)')
// => false (rgba expects at least 3 parameters)
isValidDeclaration('z-index', '-1')
// => true
isValidDeclaration('z-index', 'abc')
// => false (z-index expects an integer)
isValidDeclaration('width', '300px')
// => true
isValidDeclaration('width', '300ms')
// => false ('ms' is not a valid length unit)
Given a shorthand property, returns an array of the computed properties for that shorthand property. If given a known property that is not a shorthand, simply returns the given property. If given an unknown property, returns an empty array.
getShorthandComputedProperties('background');
// -> [
// "background-image",
// "background-position",
// "background-size",
// "background-repeat",
// "background-origin",
// "background-clip",
// "background-attachment",
// "background-color"
// ]
getShorthandComputedProperties('color');
// -> ["color"]
getShorthandComputedProperties('border', true);
// -> [
// 'border-width',
// 'border-style',
// 'border-color',
// 'border-bottom-width',
// 'border-left-width',
// 'border-right-width',
// 'border-top-width',
// 'border-bottom-style',
// 'border-left-style',
// 'border-right-style',
// 'border-top-style',
// 'border-bottom-color',
// 'border-left-color',
// 'border-right-color',
// 'border-top-color'
// ];
getShorthandComputedProperties('unknownProperty');
// -> []
Given a property and value attempts to expand the value into its longhand equivalents. Returns an object mapping the property longhand names to the longhand values. If the property cannot be expanded (i.e. the property is not a shorthand property) simply returns an object mapping the original property to the original value.
Currently supports the following properties:
expandShorthandProperty('margin', '0 3px 10rem')
// => {
// 'margin-top': '0',
// 'margin-right': '3px',
// 'margin-bottom': '10rem',
// 'margin-left': '3px',
// }
expandShorthandProperty('flex', 'initial')
// => {
// 'flex-grow': 'initial',
// 'flex-shrink': 'initial',
// 'flex-basis': 'initial',
// }
expandShorthandProperty('border-radius', '10px 5px 2em / 20px 25px 30%')
// => {
// 'border-top-left-radius': '10px / 20px',
// 'border-top-right-radius': '5px / 25px',
// 'border-bottom-left-radius': '5px / 25px',
// 'border-bottom-right-radius': '2em / 30%',
// }
This function is the inverse of getShorthandComputedProperties
.
It returns all properties that set the given property, including the property itself. If the property is unknown, an empty array is returned.
console.log(getShorthandsForProperty('border-left-width'));
// => [ 'border-left-width', 'border-left', 'border-width', 'border' ]
console.log(getShorthandsForProperty('float'));
// => [ 'float' ]
console.log(getShorthandsForProperty('unknown'));
// => [ ]
Because of the initial
keyword and shorthand expansion,
there are many possible values that are equivalently identical
with the initial value of a css property. This function
returns true for all possible values that have the effect of
setting a property to its initial value.
property
- string. the property to which the value is assigned.value
string. the value to check.console.log(isInitialValue('padding-left', '0'));
// => true
console.log(isInitialValue('padding-left', '0px'));
// => true
console.log(isInitialValue('padding-left', '1px'));
// => false
console.log(isInitialValue('padding', '0'));
// => true
console.log(isInitialValue('padding', '0 0px 0in'));
// => true
console.log(isInitialValue('padding', '1px'));
// => false
Get the initial values for a property.
Returns the initial value or values a property has by
default according the CSS specification. If the property's initial
value(s) is/are unknown, the global keyword initial
is returned.
property
- (string) the property namerecursivelyResolve
- (boolean) when given a shorthand property,
causes the result to include long hand values.includeShorthands
- (boolean) when resolving recursively, causes the
the result to include the specified shorthand property as well as any
intermediate shorthands of this property set to the initial value.console.log(initialValues('border-width'));
// => { 'border-width': 'medium' }
console.log(initialValues('border-width', true));
// => {
// 'border-bottom-width': 'medium',
// 'border-left-width': 'medium',
// 'border-right-width': 'medium',
// 'border-top-width': 'medium',
// 'border-width': 'medium'
// }
Get the initial value for a property. Returns a string that is the initial
value has by default according the CSS specification. If the property's
initial value is unknown, the global keyword initial
is returned.
property
- the css property nameconsole.log(initialValue('border-width'));
=> 'medium'
To use a locally-built version of css-values-parser
:
$ npm install
$ npm run start
$ npm test
This will generate grammars and javascript code required to parse the css properties.
FAQs
Validate css properties and expand shorthand css properties
The npm package css-property-parser receives a total of 320 weekly downloads. As such, css-property-parser popularity was classified as not popular.
We found that css-property-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.