# inline-style-expand-shorthand > Expanding shorthand properties in JavaScript style objects. Latest version **1.6.0** (published 2023-03-22) · MIT license · 0 weekly downloads ## Install ```sh npm install inline-style-expand-shorthand pnpm add inline-style-expand-shorthand yarn add inline-style-expand-shorthand bun add inline-style-expand-shorthand ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.6.0 | | Published | 2023-03-22 | | First published | 2019-06-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 58.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 15 | | Author | robinweser | | Maintainers | rofrischmann | ## Links - npm: https://www.npmjs.com/package/inline-style-expand-shorthand - Repository: https://github.com/robinweser/inline-style-expand-shorthand - Homepage: https://github.com/robinweser/inline-style-expand-shorthand#readme - Issues: https://github.com/robinweser/inline-style-expand-shorthand/issues - npm.io page: https://npm.io/package/inline-style-expand-shorthand ## Recent versions - 1.6.0 (latest) — 2023-03-22 - 1.5.0 — 2023-01-30 - 1.4.0 — 2022-05-26 - 1.3.0 — 2021-09-18 - 1.2.0 — 2019-09-30 - 1.1.5 — 2019-09-13 - 1.1.3 — 2019-06-25 - 1.1.2 — 2019-06-13 - 1.1.1 — 2019-06-04 - 1.1.0 — 2019-06-04 - 1.0.0 — 2019-06-03 ## README # inline-style-expand-shorthand Expanding shorthand properties in JavaScript style objects. npm downloads npm version gzipped size ## Installation ```sh yarn add inline-style-expand-shorthand ``` Alternatively use `npm i --save inline-style-expand-shorthand`. ## Why? When using a library that generates Atomic CSS such as [Fela](http://fela.js.org) or [Styletron](https://www.styletron.org), one can run into an issue where mixed shorthand and longhand properties are applied in an unexpected way due to the rendering order of CSS classes. This packages helps to prevent those issues by always expanding shorthand values so that no conflicts occur at all. ## How? As this library runs on the browser as well, it needs to be very small and performant. In order to achieve that, we renounced using complex parsing algorithms, but rather rely on a set of simple regular expressions. This also comes with some downsides: We make a lot of consumptions about the CSS value. All in all, **it must be a valid CSS value**. Otherwise one might experience strange behaviour. ## Supported Properties - border - borderTop - borderRight - borderBottom - borderLeft - borderWidth - borderStyle - borderColor - borderRadius - padding - paddingInline - paddingBlock - margin - marginInline - marginBlock - outline - flex - flexFlow - textDecoration - overflow - gap - placeContent - placeItems - placeSelf - transition - inset - scroll-margin - scroll-padding > Need more? Feel free to [create an issue](https://github.com/rofrischmann/inline-style-expand-shorthand/issues/new) with a proposal! ## Usage This package exports 3 methods, one to expand single properties and two to expand properties on full style objects. ### expandProperty | Parameter  | Description  | | ---------- | -------------------------------------------------------- | | property | The property name (in camelCase) that should be expanded | | value | The value that is going to be expanded | ```js import { expandProperty } from 'inline-style-expand-shorthand' const longhands = expandProperty('padding', '10px 15px 5px') // longhands === output const output = { paddingTop: '10px', paddingRight: '15px', paddingBottom: '5px', paddingLeft: '15px', } ``` ### expand This is just a convenient wrapper for objects that uses `expandProperty` under the hood. | Parameter  | Description  | | ---------- | ----------------------------------------------------------- | | style | A (nested) style objects that contains shorthand properties | ```js import { expand } from 'inline-style-expand-shorthand' const style = { padding: '10px 20px', borderLeft: '1px solid black', } const expanded = expand(style) // expanded === output const output = { paddingTop: '10px', paddingRight: '20px', paddingBottom: '10px', paddingLeft: '20px', borderLeftWidth: '1px', borderLeftStyle: 'solid', borderLeftColor: 'black', } ``` ### expandWithMerge This one is similar to `expand` except that it also merges mixed longhand and shorthand properties. > **Warning**: Beware that there are different border properties with the same specificity. In order to solve that deterministically, we had to choose a order. `borderWidth`, `borderStyle` and `borderColor` will always overwrite `borderLeft`, `borderRight`, `borderTop` and `borderBottom`. | Parameter  | Description  | | ---------- | ----------------------------------------------------------- | | style | A (nested) style objects that contains shorthand properties | ```js import { expandWithMerge } from 'inline-style-expand-shorthand' const style = { padding: '10px 20px', paddingLeft: '15px', } const expanded = expandWithMerge(style) // expanded === output const output = { paddingTop: '10px', paddingRight: '20px', paddingBottom: '10px', // overwrites the expanded padding-left value due to it being more specific paddingLeft: '15px', } ``` ## License inline-style-expand-shorthand is licensed under the [MIT License](http://opensource.org/licenses/MIT).
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).
Created with ♥ by [@robinweser](http://weser.io). --- _Source: https://npm.io/package/inline-style-expand-shorthand · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._