Package Exports

postcss-unrgba

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-unrgba) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

UnRGBA

UnRGBA changes rgba() values to hex. This can be useful for outputting CSS for older browsers like Internet Explorer 8.

/* before */

.hero {
    background: rgba(153, 221, 153, .8);
    border: solid 1px rgba(100, 102, 103, .8);
    border-right-color: rgba(100, 102, 103, 0);
}

/* after */

.hero {
    background: #99dd99;
    border: solid 1px #646667;
    border-right-color: transparent;
}

Usage

Add UnRGBA to your build tool:

npm install postcss-unrgba --save-dev

Node

require('postcss-unrgba')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load UnRGBA as a PostCSS plugin:

postcss([
    require('postcss-unrgba')({ /* options */ })
]);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable UnRGBA within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            require('postcss-unrgba')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable UnRGBA within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('postcss-unrgba')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

Options

`method`

Type: String
Default: 'replace'

`clone`

Copies any properties with rgba values to new properties using hex.

/* before */

.hero {
    background: rgba(153, 221, 153, .8);
}

/* after */

.hero {
    background: #99dd99;
    background: rgba(153, 221, 153, .8);
}

`replace`

Copies any properties with rgba values to new properties using hex while removing the original.

/* before */

.hero {
    background: rgba(153, 221, 153, .8);
}

/* after */

.hero {
    background: #99dd99;
}

`warn`

Warns whenever a property with an rgba value is found.

`filter`

Type: Boolean
Default: false

`true`

Uses the Internet Explorer proprietary filter to preserve alpha-transparent backgrounds.

/* before */

.hero {
    background: rgba(153, 221, 153, .8);
}

/* after */

.hero {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8099dd99',endColorstr='#8099dd99');
}

`false`

Uses regular hexadecimal values when processing backgrounds.

/* before */

.hero {
    background: rgba(153, 221, 153, .8);
}

/* after */

.hero {
    background: #99dd99;
}

`properties`

Type: Array
Default: ['background', 'background-color', 'color', 'border', 'border-bottom', 'border-bottom-color', 'border-color', 'border-left', 'border-left-color', 'border-right', 'border-right-color', 'border-top', 'border-top-color', 'outline', 'outline-color']

Specifies the properties on which rgba values will be processed. If a falsey value is passed then all properties will be processed.