postcss-unrgba
v1.1.1
Published
Convert rgba() values to hex
Downloads
6,516
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.