Skip to content

Commit

Permalink
Merged release/v0.3.0 into master
Browse files Browse the repository at this point in the history
  • Loading branch information
KamiKillertO committed Feb 4, 2017
2 parents 663293a + 553c423 commit de163c9
Show file tree
Hide file tree
Showing 12 changed files with 249 additions and 161 deletions.
26 changes: 26 additions & 0 deletions .vscode/spell.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"language": "en",
"ignoreWordsList": [],
"mistakeTypeToStatus": {
"Passive voice": "Hint",
"Spelling": "Error",
"Complex Expression": "Disable",
"Hidden Verbs": "Information",
"Hyphen Required": "Disable",
"Redundant Expression": "Disable",
"Did you mean...": "Disable",
"Repeated Word": "Warning",
"Missing apostrophe": "Warning",
"Cliches": "Disable",
"Missing Word": "Disable",
"Make I uppercase": "Warning"
},
"languageIDs": [
"markdown",
"plaintext"
],
"ignoreRegExp": [
"/\\(.*\\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)\\)/g",
"/((http|https|ftp|git)\\S*)/g"
]
}
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).

## [0.3.0] - 2017.02.04

- Use Promise for background generation/update for easy chaining
- Add new regex for rgb(a) colors detection
- Add new activationEvents (pcss and sss)
- Add rgb(a) color extraction
- Add rgb and luminance properties in color.ts

## [0.2.1] - 2017.01.26

## [0.2.0] - 2017.01.25
Expand Down
18 changes: 14 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

[![codebeat badge](https://codebeat.co/badges/aec222e1-64ae-4360-a849-d077040694ca)](https://codebeat.co/projects/github-com-kamikillerto-vscode-colorize) [![Build Status](https://travis-ci.org/KamiKillertO/vscode-colorize.svg?branch=master)](https://travis-ci.org/KamiKillertO/vscode-colorize) [![Build status](https://ci.appveyor.com/api/projects/status/errygb6n97kiq75a?svg=true)](https://ci.appveyor.com/project/KamiKillertO/vscode-colorize) [![Licence](https://img.shields.io/github/license/KamiKillertO/vscode_colorize.svg)](https://github.com/KamiKillertO/vscode_colorize) ![VS Code Marketplace](http://vsmarketplacebadge.apphb.com/version-short/kamikillerto.vscode-colorize.svg)

Instantly visualize css colors in your css/sass/scss/less files.
Instantly visualize css colors in your css/sass/scss/less/pcss/sss files.

This extension scan your styles files looking for colors and generate a colored background for each of them.
The background is generated/updated from the color.
Expand All @@ -12,14 +12,16 @@ The background is generated/updated from the color.
## Features

- Generate colored background for css hexa color
- 🆕 Generate colored background for rgb hexa color
- 🆕 Generate colored background for rgba hexa color
- Update the background when the color is updated

## Roadmap

- [x] Generate background for hexa colors
- [x] Update background on color updates
- [ ] Generate background for rgb colors
- [ ] Generate background for rgba colors
- [x] Generate background for rgb colors
- [~] Generate background for rgba colors
- [ ] Generate background for hsl colors
- [ ] Generate background for hsla colors
- [ ] Generate background for Predefined/Cross-browser colors
Expand All @@ -28,7 +30,15 @@ The background is generated/updated from the color.

## Release Notes

### Latest 0.2.1 (2017.01.26)
### Latest 0.3.0 (2017.02.04)

- Add support for PostCSS
- Generate background for RGB colors
- Generate background for RGBa colors

### 0.2.1 (2017.01.26)

- Fix some background update issues

### 0.2.0 (2017.01.25)

Expand Down
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "vscode-colorize",
"displayName": "colorize",
"description": "A vscode extension to help visualize css colors in files.",
"version": "0.2.1",
"version": "0.3.0",
"publisher": "kamikillerto",
"license": "Apache-2.0",
"icon": "assets/logo.png",
Expand Down Expand Up @@ -35,7 +35,9 @@
"onLanguage:css",
"onLanguage:sass",
"onLanguage:scss",
"onLanguage:less"
"onLanguage:less",
"onLanguage:pcss",
"onLanguage:sss"
],
"main": "./out/src/extension",
"contributes": {
Expand Down
4 changes: 2 additions & 2 deletions src/color-decoration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ class ColorDecoration {
let backgroundDecorationType = window.createTextEditorDecorationType({
borderWidth: "1px",
borderStyle: "solid",
borderColor: this.color.value,
backgroundColor: this.color.value,
borderColor: this.color.toRGBString(),
backgroundColor: this.color.toRGBString(),
color: textColor
});
this.decoration = backgroundDecorationType;
Expand Down
7 changes: 4 additions & 3 deletions src/color-regex.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
/**
* Utils object for color manipulation
*/
export const HEXA_COLOR = /(#[\da-f]{3}|#[\da-f]{6})($|,| |;|\n)/gi;

export const HEXA_COLOR = /(#[\da-f]{3}|#[\da-f]{6})(?:$|,| |;|\n)/gi;
export const RGB_COLOR = /((?:rgb\((?:\d{1,3}\s*,\s*){2}\d{1,3}\))|(?:rgba\((?:\d{1,3}\s*,\s*){3}[0-1](?:\.\d+){0,1}\)))(?:$|,| |;|\n)/gi;
export default {
HEXA_COLOR
HEXA_COLOR,
RGB_COLOR
};
90 changes: 46 additions & 44 deletions src/color-util.ts
Original file line number Diff line number Diff line change
@@ -1,62 +1,64 @@
import {
HEXA_COLOR
HEXA_COLOR,
RGB_COLOR
} from './color-regex';
import Color from './color';

// Flatten Array
// flatten(arr[[1,2,3],[4,5]]) -> arr[1,2,3,4,5]
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

class ColorUtil {
public static getRGB(color: Color): number[] {
let rgb: any[] = [];
if (color.model === 'hexa') {
rgb = /#(.+)/gi.exec(color.value);
if (rgb[1].length === 3) {
return rgb[1].split('').map(_ => parseInt(_ + _, 16));
}
rgb = rgb[1].split('').map(_ => parseInt(_, 16));
return [16 * rgb[0] + rgb[1], 16 * rgb[2] + rgb[3], 16 * rgb[4] + rgb[5]];
}
return [];
}

public static luminance(color: Color): number {
let rgb = this.getRGB(color);
if (!rgb) {
return null;
}
rgb = rgb.map(_ => {
_ = _ / 255;
if (_ < 0.03928) {
_ = _ / 12.92;
let rgb = color.rgb;
rgb = rgb.map(c => {
c = c / 255;
if (c < 0.03928) {
c = c / 12.92;
} else {
_ = (_ + .055) / 1.055;
_ = Math.pow(_, 2.4);
c = (c + .055) / 1.055;
c = Math.pow(c, 2.4);
}
return _;
return c;
});
return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
return (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]);
}

public static extractColor(text: string):Color[] {
let colors:Color[] = [];
colors = colors.concat(this._extractHexa(text));
return colors;
public static findColors(text): Promise < Color[] > {
return Promise.all([
this._extractHexa(text),
this._extractRGB(text)
]).then(colors => {
return flatten(colors);
});
}

public static match(text: string, model: string):boolean {
switch(model) {
case 'hexa':
return !!text.match(HEXA_COLOR);
default:
return false;
}
private static _extractHexa(text: string): Promise < Color[] > {
return new Promise((resolve, reject) => {
let match = null;
let colors: Color[] = [];
while ((match = HEXA_COLOR.exec(text)) !== null) {
colors.push(new Color('hexa', match[1], match.index));
}
return resolve(colors);
});
}

private static _extractHexa(text: string): Color[] {
let match = null;
let colors:Color[] = [];
while((match = HEXA_COLOR.exec(text)) !== null) {
colors.push(new Color('hexa', match[1], match.index))
}
return colors;

private static _extractRGB(text: string): Promise < Color[] > {
return new Promise((resolve, reject) => {
let match = null;
let colors: Color[] = [];
// Get rgb "like" colors
while ((match = RGB_COLOR.exec(text)) !== null) {
let rgba = match[1].replace(/rgb(a){0,1}\(/, '').replace(/\)/, '').split(/,/gi).map(c => parseFloat(c));
// Check if it's a valid rgb(a) color
if (rgba.slice(0, 3).every(c => c <= 255) && (rgba[4] || 1) <= 1) {
colors.push(new Color('rgb', match[0], match.index));
}
}
return resolve(colors);
});
}
};
export default ColorUtil;
25 changes: 25 additions & 0 deletions src/color.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,37 @@ import ColorUtil from './color-util';
class Color {
public model: string;
public value: string;
public rgb: number[];
public alpha: number;
public positionInText: number;

public constructor(model: string, value: string, positionInText: number = 0) {
this.model = model;
this.value = value;
this.positionInText = positionInText;
this._getRGBValue();
}

private _getRGBValue() {
switch (this.model) {
case 'hexa':
this.alpha = 1;
let rgb: any = /#(.+)/gi.exec(this.value);
if (rgb[1].length === 3) {
return this.rgb = rgb[1].split('').map(_ => parseInt(_ + _, 16));
}
rgb = rgb[1].split('').map(_ => parseInt(_, 16));
return this.rgb = [16 * rgb[0] + rgb[1], 16 * rgb[2] + rgb[3], 16 * rgb[4] + rgb[5]];
case 'rgb':
let rgba = this.value.replace(/rgb(a){0,1}\(/, '').replace(/\)/, '').split(/,/gi).map(c => parseFloat(c));
this.rgb = rgba.slice(0, 3);
this.alpha = rgba[4] || 1;
return;
}
}

public toRGBString(): string {
return `rgb(${this.rgb.join(',')})`;
}
}
export default Color;
Loading

0 comments on commit de163c9

Please sign in to comment.