postcss-duplicate-property

    0.0.0 • Public • Published

    PostSCSS Duplicate Property

    PostCSS plugin that duplicates custom properties to provide a fallback for older browsers.

    const duplicateProps = require('postcss-duplicate-property')
     
    module.exports = {
      plugins: [
        duplicateProps({
          values: ['$text-color'],
          duplicate: value => `$custom-property-${value.slice(1)}`
        })
      ]
    }
    .foo {
      color: $text-color;
    }
    .foo {
      color: $text-color;
      color: $custom-property-text-color;
    }

    Usage

    Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

    If you already use PostCSS, add the plugin to plugins list:

    const duplicateProps = require('postcss-duplicate-property');
    module.exports = {
      plugins: [
    +   duplicateProps({values: [ /* values to duplicate */ ], duplicate: value =>  /* duplicated value */}),
        require('autoprefixer')
      ]
    }

    If you do not use PostCSS, add it according to official docs and set this plugin in settings.

    Install

    npm i postcss-duplicate-property

    DownloadsWeekly Downloads

    5

    Version

    0.0.0

    License

    MIT

    Unpacked Size

    4.04 kB

    Total Files

    5

    Last publish

    Collaborators

    • loganmccaul