postcss-property-shorthand

PostCSS plugin for short definition of user default properties using variables

Usage no npm install needed!

<script type="module">
  import postcssPropertyShorthand from 'https://cdn.skypack.dev/postcss-property-shorthand';
</script>

README

PostCSS Property Shorthand Build Status

PostCSS plugin for short definition of user default properties using variables.

.foo {
    transition: ;
}

.foo {
    transition: $transition;
}

Usage

postcss([ require('postcss-property-shorthand') ])

See PostCSS docs for examples for your environment.

Options

syntax

Type: css, scss, less
Default: ``
Manage type of variables

Using stylus (default) variable

postcss([
    require('postcss-property-shorthand')
])

/* input */
.foo {
    transition: ;
}

/* output */
.foo {
    transition: transition;
}

Using scss variable

postcss([
    require('postcss-property-shorthand')({
        syntax: 'scss'
    })
])

/* input */
.foo {
    transition: ;
}

/* output */
.foo {
    transition: $transition;
}

Using css custom property

postcss([
    require('postcss-property-shorthand')({
        syntax: 'css'
    })
])

/* input */
.foo {
    transition: ;
}

/* output */
.foo {
    transition: var(--transition);
}