From 14ffaf4aeaf025a87a73f3ea4ada67e38f85a1f2 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Sat, 2 May 2020 13:22:49 +0100 Subject: [PATCH] update color plucking logic (#113) --- .../package-lock.json | 6 + .../tailwindcss-language-server/package.json | 1 + .../src/util/color.ts | 235 ++++-------------- 3 files changed, 62 insertions(+), 180 deletions(-) diff --git a/packages/tailwindcss-language-server/package-lock.json b/packages/tailwindcss-language-server/package-lock.json index cd77c08..201c8c7 100644 --- a/packages/tailwindcss-language-server/package-lock.json +++ b/packages/tailwindcss-language-server/package-lock.json @@ -4,6 +4,12 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@ctrl/tinycolor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.1.0.tgz", + "integrity": "sha512-J92yG122XoF+UiuQSzBgV451vSm9B0xMb5oGs7vgZijYZtNc80hNep/KbgUeBbj5f+YHehrmbAHlg/yBGX3/+w==", + "dev": true + }, "@types/node": { "version": "13.9.3", "resolved": "https://registry.npmjs.org/@types/node/-/node-13.9.3.tgz", diff --git a/packages/tailwindcss-language-server/package.json b/packages/tailwindcss-language-server/package.json index 6526790..37dbe50 100644 --- a/packages/tailwindcss-language-server/package.json +++ b/packages/tailwindcss-language-server/package.json @@ -16,6 +16,7 @@ "node": "*" }, "devDependencies": { + "@ctrl/tinycolor": "^3.1.0", "@types/node": "^13.9.3", "@zeit/ncc": "^0.22.0", "css.escape": "^1.5.1", diff --git a/packages/tailwindcss-language-server/src/util/color.ts b/packages/tailwindcss-language-server/src/util/color.ts index c1378e8..4e4b598 100644 --- a/packages/tailwindcss-language-server/src/util/color.ts +++ b/packages/tailwindcss-language-server/src/util/color.ts @@ -1,6 +1,8 @@ const dlv = require('dlv') import { State } from './state' import removeMeta from './removeMeta' +import { TinyColor } from '@ctrl/tinycolor' +import { ensureArray, dedupe, flatten } from './array' const COLOR_PROPS = [ 'caret-color', @@ -19,159 +21,6 @@ const COLOR_PROPS = [ 'text-decoration-color', ] -const COLOR_NAMES = { - transparent: 'rgba(0, 0, 0, 0.01)', - aliceblue: '#f0f8ff', - antiquewhite: '#faebd7', - aqua: '#0ff', - aquamarine: '#7fffd4', - azure: '#f0ffff', - beige: '#f5f5dc', - bisque: '#ffe4c4', - black: '#000', - blanchedalmond: '#ffebcd', - blue: '#00f', - blueviolet: '#8a2be2', - brown: '#a52a2a', - burlywood: '#deb887', - burntsienna: '#ea7e5d', - cadetblue: '#5f9ea0', - chartreuse: '#7fff00', - chocolate: '#d2691e', - coral: '#ff7f50', - cornflowerblue: '#6495ed', - cornsilk: '#fff8dc', - crimson: '#dc143c', - cyan: '#0ff', - darkblue: '#00008b', - darkcyan: '#008b8b', - darkgoldenrod: '#b8860b', - darkgray: '#a9a9a9', - darkgreen: '#006400', - darkgrey: '#a9a9a9', - darkkhaki: '#bdb76b', - darkmagenta: '#8b008b', - darkolivegreen: '#556b2f', - darkorange: '#ff8c00', - darkorchid: '#9932cc', - darkred: '#8b0000', - darksalmon: '#e9967a', - darkseagreen: '#8fbc8f', - darkslateblue: '#483d8b', - darkslategray: '#2f4f4f', - darkslategrey: '#2f4f4f', - darkturquoise: '#00ced1', - darkviolet: '#9400d3', - deeppink: '#ff1493', - deepskyblue: '#00bfff', - dimgray: '#696969', - dimgrey: '#696969', - dodgerblue: '#1e90ff', - firebrick: '#b22222', - floralwhite: '#fffaf0', - forestgreen: '#228b22', - fuchsia: '#f0f', - gainsboro: '#dcdcdc', - ghostwhite: '#f8f8ff', - gold: '#ffd700', - goldenrod: '#daa520', - gray: '#808080', - green: '#008000', - greenyellow: '#adff2f', - grey: '#808080', - honeydew: '#f0fff0', - hotpink: '#ff69b4', - indianred: '#cd5c5c', - indigo: '#4b0082', - ivory: '#fffff0', - khaki: '#f0e68c', - lavender: '#e6e6fa', - lavenderblush: '#fff0f5', - lawngreen: '#7cfc00', - lemonchiffon: '#fffacd', - lightblue: '#add8e6', - lightcoral: '#f08080', - lightcyan: '#e0ffff', - lightgoldenrodyellow: '#fafad2', - lightgray: '#d3d3d3', - lightgreen: '#90ee90', - lightgrey: '#d3d3d3', - lightpink: '#ffb6c1', - lightsalmon: '#ffa07a', - lightseagreen: '#20b2aa', - lightskyblue: '#87cefa', - lightslategray: '#789', - lightslategrey: '#789', - lightsteelblue: '#b0c4de', - lightyellow: '#ffffe0', - lime: '#0f0', - limegreen: '#32cd32', - linen: '#faf0e6', - magenta: '#f0f', - maroon: '#800000', - mediumaquamarine: '#66cdaa', - mediumblue: '#0000cd', - mediumorchid: '#ba55d3', - mediumpurple: '#9370db', - mediumseagreen: '#3cb371', - mediumslateblue: '#7b68ee', - mediumspringgreen: '#00fa9a', - mediumturquoise: '#48d1cc', - mediumvioletred: '#c71585', - midnightblue: '#191970', - mintcream: '#f5fffa', - mistyrose: '#ffe4e1', - moccasin: '#ffe4b5', - navajowhite: '#ffdead', - navy: '#000080', - oldlace: '#fdf5e6', - olive: '#808000', - olivedrab: '#6b8e23', - orange: '#ffa500', - orangered: '#ff4500', - orchid: '#da70d6', - palegoldenrod: '#eee8aa', - palegreen: '#98fb98', - paleturquoise: '#afeeee', - palevioletred: '#db7093', - papayawhip: '#ffefd5', - peachpuff: '#ffdab9', - peru: '#cd853f', - pink: '#ffc0cb', - plum: '#dda0dd', - powderblue: '#b0e0e6', - purple: '#800080', - rebeccapurple: '#663399', - red: '#f00', - rosybrown: '#bc8f8f', - royalblue: '#4169e1', - saddlebrown: '#8b4513', - salmon: '#fa8072', - sandybrown: '#f4a460', - seagreen: '#2e8b57', - seashell: '#fff5ee', - sienna: '#a0522d', - silver: '#c0c0c0', - skyblue: '#87ceeb', - slateblue: '#6a5acd', - slategray: '#708090', - slategrey: '#708090', - snow: '#fffafa', - springgreen: '#00ff7f', - steelblue: '#4682b4', - tan: '#d2b48c', - teal: '#008080', - thistle: '#d8bfd8', - tomato: '#ff6347', - turquoise: '#40e0d0', - violet: '#ee82ee', - wheat: '#f5deb3', - white: '#fff', - whitesmoke: '#f5f5f5', - yellow: '#ff0', - yellowgreen: '#9acd32', -} - export function getColor( state: State, keys: string[] @@ -179,42 +28,68 @@ export function getColor( const item = dlv(state.classNames.classNames, keys) if (!item.__rule) return null const props = Object.keys(removeMeta(item)) + if (props.length === 0) return null const nonCustomProps = props.filter((prop) => !prop.startsWith('--')) - if (nonCustomProps.length !== 1) return null - const prop = nonCustomProps[0] - if (COLOR_PROPS.indexOf(prop) === -1) return null - const namedColor = COLOR_NAMES[item[prop].toLowerCase()] - if (namedColor) { - return { documentation: namedColor } + const areAllCustom = nonCustomProps.length === 0 + + if ( + !areAllCustom && + nonCustomProps.some((prop) => !COLOR_PROPS.includes(prop)) + ) { + // they should all be color-based props + return null + } + + const propsToCheck = areAllCustom ? props : nonCustomProps + + const colors = flatten( + propsToCheck.map((prop) => ensureArray(item[prop]).map(createColor)) + ) + + // check that all of the values are valid colors + if (colors.some((color) => !color.isValid)) { + return null + } + + // check that all of the values are the same color + const colorStrings = colors.map((color) => color.toRgbString()) + if (dedupe(colorStrings).length !== 1) { + return null + } + + return { documentation: colorStrings[0] } +} + +export function getColorFromString(str: string): string { + if (str === 'transparent') { + return 'rgba(0, 0, 0, 0.01)' + } + const color = new TinyColor(str) + if (color.isValid) { + return color.toRgbString() + } + return null +} + +function createColor(str: string): TinyColor { + if (str === 'transparent') { + return new TinyColor({ r: 0, g: 0, b: 0, a: 0.01 }) } // matches: rgba(, , , var(--bg-opacity)) // TODO: support other formats? e.g. hsla, css level 4 - const match = item[prop].match( + const match = str.match( /^\s*rgba\(\s*(?[0-9]{1,3})\s*,\s*(?[0-9]{1,3})\s*,\s*(?[0-9]{1,3})\s*,\s*var/ ) + if (match) { - return { - documentation: `rgb(${match.groups.r}, ${match.groups.g}, ${match.groups.b})`, - } + return new TinyColor({ + r: match.groups.r, + g: match.groups.g, + b: match.groups.b, + }) } - return {} -} - -export function isColor(str: any): boolean { - return ( - typeof str === 'string' && - /^(?:#|0x)(?:[a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)$/.test( - str.trim() - ) - ) -} - -export function getColorFromString(str: string): string { - if (isColor(str)) { - return str - } - return COLOR_NAMES[str] || null + return new TinyColor(str) }