Skip to content
This repository was archived by the owner on Jun 30, 2024. It is now read-only.

Commit bd8cec3

Browse files
committed
- Only match named colors if they're preceeded by a colon or a comma. This should reduce false-positives
- Look through matches so we can capture multiple colors per line
1 parent 514a4dc commit bd8cec3

File tree

2 files changed

+10
-9
lines changed

2 files changed

+10
-9
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
- Guard insert colon with when clause. Thanks @phyllisstein! [297](https://github.com/styled-components/vscode-styled-components/pull/297)
66
- Cursor control has returned but only with CSS Functions
7+
- Fix color matching issues, match multiple colors per-line and reduce false-positives on named color matches
78

89
## 1.6.3 (21-05-2021)
910

src/colorProvider.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,13 @@ const colorMatchShort = /#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a
1616
const rgbaMatch = /rgba?\((\d+)\,\s*(\d+)\,\s*(\d+)(?:\)|\,\s*([\d\.]+)\))/;
1717
// hsl(60, 100%, 50%)
1818
const hslMatch = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/;
19-
// blue
20-
const namedColor = /(?<=:|\s+)(aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|goldenrod|gold|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavenderblush|lavender|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)(?![\w\-])/i;
19+
// only match if followed by , or :
20+
const namedColor = /(?<=(?::|,)\s+)(aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|goldenrod|gold|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavenderblush|lavender|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)(?![\w\-])/i;
21+
22+
const totalRegex = new RegExp(
23+
`${colorMatch.source}|${colorMatchShort.source}|${rgbaMatch.source}|${hslMatch.source}|${namedColor.source}`,
24+
"ig"
25+
);
2126

2227
export const colorProvider = {
2328
provideColorPresentations(color: Color) {
@@ -44,13 +49,8 @@ export const colorProvider = {
4449
const colors: ColorInformation[] = [];
4550
for (let i = 0; i < document.lineCount; i++) {
4651
const element = document.lineAt(i);
47-
let match =
48-
colorMatch.exec(element.text) ??
49-
colorMatchShort.exec(element.text) ??
50-
rgbaMatch.exec(element.text) ??
51-
hslMatch.exec(element.text) ??
52-
namedColor.exec(element.text);
53-
if (match) {
52+
let match;
53+
while ((match = totalRegex.exec(element.text))) {
5454
const color = colorFromString(match[0]);
5555
if (color) {
5656
colors.push(

0 commit comments

Comments
 (0)