avanes / postcss-color-alpha Goto Github PK

PostCSS plugin to transform color from #rgb.a to rgba()

License: MIT License

JavaScript 100.00%

postcss-color-alpha's Introduction

PostCSS Color Alpha

PostCSS plugin to transform color from #rgb.a to rgba().

/* Input examples */
.foo { color: black(.1) }
.bar { color: white(0.2); }
.baz { color: #0fc.3; }
.woo { color: #00ffcc.45; }
.hoo { border-color: #000 #000.5 white white(0.5); }
.boo { text-shadow: 1px 1px 1px #0fc.1, 3px 3px 5px rgba(#fff, .5); }

/* Output examples */
.foo { color: rgba(0, 0, 0, 0.1); }
.bar { color: rgba(255, 255, 255, 0.2); }
.baz { color: rgba(0, 255, 204, 0.3); }
.woo { color: rgba(0, 255, 204, 0.45); }
.hoo { border-color: #000 rgba(0, 0, 0, 0.5) white rgba(255, 255, 255, 0.5); }
.boo { text-shadow: 1px 1px 1px rgba(0, 255, 204, 0.1), 3px 3px 5px rgba(255, 255, 255, 0.5); }

Install

$ npm install postcss-color-alpha

Usage

postcss([ require('postcss-color-alpha') ])

See PostCSS docs for examples for your environment.

postcss-color-alpha's People

Contributors

Stargazers

Watchers

Forkers

antyakushev demiazz

postcss-color-alpha's Issues

PR to PostCSS README

Please send a PR to PostCSS README.md with your plugin in list.

Not working

This is not working for me. It is changing

.background {
   background-color: #121519.3;
}

.background {
   background-color: #121519 0.3;
}

Mixed colors

    it('converts mixed `#rgb`, `#rgb.a`, `black()`, `white` to propper rgba in series', function () {
        test('div{ border-color: #0fc #000.2 white(.3) black }', 'div{ border-color: #0fc rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.3) black }');
    });

Use PostCSS 4.1 API

PostCSS Plugin Guidelines are mandatory right now. Because all of rules are about ecosystem health.

Gradient problem

Sorry, I didn’t investigate this issue yet.

Input:

background: #004400 radial-gradient(white(0.05), white(0))

Output (according Chrome DevTools):

background: #004400 rgba(255, 255, 255, 0.05) white(255, 255, 255, 0)

Seems like plugin broke radial-gradient word.

/cc @avanes

NPM release

Please, publish npm package by npm publish. I want to use your plugin on Amplifr.

Hex syntax

Does #0fc 0.3 is safe? Maybe #0fc0.3?

postcss-simple-vars

Haven’t been able to get this to work with the postcss-simple-vars extension.

Trying to do something along the lines of $pale-color: rgba($bright-color, .5); but no variation of the syntax seems to product the desired output.

CSS Variables + Alpha

Hi, love the plugin. Is it possible to use this alongside a CSS Custom Property/Variable for example

box-shadow: 0 0 4px 0 var(--dark-ui-color-1)(0.5)

Do not works with nested rgba(rgba(), 0.5)

It does not work with rgba(rgb(51, 113, 113), 0.4).

Of course, this example looks wierd on first look, but postcss-color-function return all colors in rgb(), so it is useful case.

/cc @avanes

It looks like rgba(hex, 0) doesn't get processed

Is rgba(hex, 0) not supported for a reason or is it a bug?

https://github.com/avanes/postcss-color-alpha/blob/master/index.js#L144

Thanks.