1.0.1 β’ Published 6 months ago
shorthand-css-properties v1.0.1
β¨ Shorthand CSS
Shorthand CSS is a lightweight utility library for expanding CSS shorthand properties into their full equivalent properties. It simplifies the process of working with CSS properties in JavaScript and makes handling shorthand styles more convenient. π¨
π Features
- π Expand CSS shorthand properties like
margin
,padding
,border
, etc., into their full forms. - π³ Recursive handling of nested shorthand properties.
- β‘ Easy-to-use and lightweight.
π¦ Installation
Install the library via npm:
npm install shorthand-css
π οΈ Usage
Standard Expansion
Expand a shorthand property into its full equivalents:
import ShorthandCSS from 'shorthand-css';
console.log(ShorthandCSS.expand('border'));
// Output: ['border-width', 'border-style', 'border-color']
console.log(ShorthandCSS.expand('color'));
// Output: ['color']
console.log(cssShorthandProps.expand('border', '1px solid red'));
/*
Output: {
"border-color": "red",
"border-style": "solid",
"border-width": "1px"
}
*/
π API
isShortHand(property: string): boolean
Checks whether the given CSS property is a shorthand property.
property
: (string) The CSS property to check. Example:'margin'
,'padding'
,'border'
, etc.
Returns:
boolean
:true
if the property is a shorthand property, otherwisefalse
.
expand(property: string, value?: string): string[] | expandProperties | undefined
Expands a shorthand CSS property into its full equivalent properties.
property
: (string) The CSS property to expand. Example:'margin'
,'padding'
,'border'
, etc.value
: (string, optional) A space-separated string of values to apply to the expanded properties. If not provided, only the property names are returned. If provided, the values are assigned to each expanded property, with pixel units (px
) automatically added for numeric values.
Returns:
string[]
: An array of the full equivalent properties for the given shorthand property if novalue
is provided.expandProperties
: An object containing the expanded properties as keys, with their corresponding value from thevalue
parameter.undefined
: If the shorthand property is not recognized, or if the length ofvalue
doesnβt match the number of expanded properties.
see more APIs on docs
π€ Contributing
welcome contributions from the community to improve shorthand-css! π
How to Contribute
- π΄ Fork the repository.
- π± Create a new branch for your feature or fix.
- π Commit your changes.
- π€ Push your branch and submit a pull request.
π License
This library is licensed under the MIT License. π
π¨ Support & Feedback
π Bug Reports: Submit an issue π§βπ» Contributors: Check the repository Built with β€οΈ by doosoom-dev. β¨