fela-plugin-expand-shorthand

    11.6.1 • Public • Published

    fela-plugin-expand-shorthand

    npm version npm downloads Bundlephobia

    Expands shorthand properties in style objects so that only longhand properties are used.

    It uses inline-style-expand-shorthand under the hood. Check the repo if you're interested in which properties are supported.

    It comes in two different modes: One that simply expands the shorthands and one that merges the resulting longhands with existing longhands in the style object depending on the specificity of that property.

    Installation

    yarn add fela-plugin-expand-shorthand

    You may alternatively use npm i --save fela-plugin-expand-shorthand.

    Usage

    Make sure to read the documentation on how to use plugins.

    import { createRenderer } from 'fela'
    import expandShorthand from 'fela-plugin-expand-shorthand'
    
    const renderer = createRenderer({
      plugins: [ expandShorthand() ]
    })

    Configuration

    In order to get enable auto-merging of longhands, one needs to pass a configuration flag.

    import { createRenderer } from 'fela'
    import expandShorthand from 'fela-plugin-expand-shorthand'
    
    const renderer = createRenderer({
      plugins: [ expandShorthand(true) ]
    })

    Example

    Input

    {
      padding: '15px 20px 5px'
    }

    Output

    {
      paddingTop: '15px',
      paddingRight: '20px',
      paddingBottom: '15px',
      paddingLeft: '5px'
    }

    License

    Fela is licensed under the MIT License.
    Documentation is licensed under Creative Commons License.
    Created with by @robinweser and all the great contributors.

    Install

    npm i fela-plugin-expand-shorthand

    DownloadsWeekly Downloads

    915

    Version

    11.6.1

    License

    MIT

    Unpacked Size

    4.89 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar