Как достать из css файла все уникальные цвета используемые там?

Question

[danilr]

Вот через этот api достаю стили из файла css

const doc = document.styleSheets[0];
console.log(doc);

Теперь нужно создать массив из уникальных цветов, используемых в этом файле. Как это сделать?
Например, нужен на выходе массив с примерно такого типа:

const colors = [ white, rgb(195,228,255), green, #64FF7E, #FF2323 ]

Answer 1

[hzzzzl]

[...document.styleSheets[5].cssRules]
  .map(c => c.style)
  .map(c => Object.entries(c)
    .filter(ent => ent[0].toLowerCase().includes('color') && !!ent[1]))
  .flat()
  .map(prop => prop[1])
  .flat()

потестил на фейсбуке, где есть в css цвета там работает, где нет - там вываливается с ошибкой

массив из уникальных цветов

uniqueArray = [...new Set(notUniqueArray)]

Comments

[Kovalsky]

Достаёт все-все цвета или только по факту используемые?

[Сергей c0re]

...document.styleSheets[5]

почему 5, почему 10, на каждой странице все по разному.

и почему-то например на тостере cssRules не читается -

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at < anonymous >

[hzzzzl]

Сергей,

почему-то например на тостере cssRules не читается

потому что тостер подгружает css не со своего домена toster.ru, и они не доступны через браузерный яваскрипт
https://stackoverflow.com/a/49994161

[Сергей c0re]

hzzzzl, а... Семен Семеныч ))

[hzzzzl]

Сергей, а про почему 5/10, просто потому что на ФБ в этих цсс-ках были свойства, а в других навскидку ничего не было :D докручивать уже автору, если будет использовать это хоть как-то

[Антон Шаманов]

нужно не только color, нужно еще как минимум все *-color т.е. border-color и т.д. и даже тогда упускаются цвета в строках вроде `border: 1px solid #eee;`

[danilr]

hzzzzl, очень круто, почти что мне надо)
Единственное, что мне нужно все цвета, что написаны в css файле, а тут ищется только по "color", а если задан цвет через background или box-shadow?

.box {
  color: red;
  background: yellow;
  box-shadow: 1px 3px rgba(34,53,45,0.5);
}

И еще он собирает такие значения как "inherit" и "transparant", но их я ещё понимаю как убрать в конце из массива.

UPD.
чуть апгрейдил по своим же нуждам, теперь так, но сейчас в массиве вот такая запись из box-shadow встречается "rgba(34, 53, 45, 0.5) 1px 3px", а надо как-то убрать все, кроме цвета

0: "tomato"
1: "yellow"
2: "rgba(34, 53, 45, 0.5) 1px 3px"
3: "red"

const unColorValues = ["inherit", "transparent", "initial"];

var notUniqueArray = [...document.styleSheets[0].cssRules]
  .map(c => c.style)
  .map(c => Object.entries(c)
    .filter(ent => (ent[0].toLowerCase().includes('color') || ent[0].toLowerCase().includes('boxshadow')) && !!ent[1]))
  .flat()
  .map(prop => prop[1])
  .flat()
  var uniqueArray = [...new Set(notUniqueArray)]

  var colors = uniqueArray.filter(val => !unColorValues.includes(val))

  console.log('uniqueArray: ', colors);

[Сергей c0re]

danilr,

а надо как-то убрать все, кроме цвета

-> см. регулярные выражения.

Answer 2

[Kovalsky]

Hsl/a, rgb/a, hex3/4/6/8 можно собрать относительно простыми регулярками, а цвета прямо по ключевым словам придётся таскать из таблицы наверное. Можно подойти с другой стороны: не конкретные форматы искать, а просто пройтись по списку всех нужных цветовых свойств, например искать только цвета указанные в color, background-color, border-color

UPD: оказывается существует некий css-color-extractor который этим и занимается