Как написать функцию для валидации CSS кода?

Вопрос-ответ JavaScript
1

Дана строка в котором написана CSS код. И надо выяснить в нем все правильно написано, или нет?

Например
div > p {
color: red;
font-size 14px;
}

В вышеуказанном примере есть ошибка так как после font-size нет двоеточия. В задаче предпологается что значения парамтеров (red, 14px и т.д.) всегда переданы правильно.
Нужно написать функцию, которая строкой получает CSS код и возврощает true/false в зависимости от того CSS код написан правильно или нет.

function  validateCSS(){}
console.log(validateCSS(" div > p { color:red;  font-size  14px; } "))    // false
console.log(validateCSS("{ color: red }"))    // false
console.log(validateCSS("p { color: red;  }"))    // true
console.log(validateCSS("p { color: red  font-size: 14px; }"))    // false
console.log(validateCSS("p: first-child a { color: red; }"))    // true
console.log(validateCSS("a: not (.red):last-child {color: red; background: red; border: 1px solid red; }"))    // true
console.log(validateCSS(“div > p”));    // false
console.log(validateCSS(“div > p {}”));    // true
console.log(validateCSS(“div > p {color: red, background color: green;}”));    // false
console.log(validateCSS(“a {display: block;}”));    // true
console.log(validateCSS(“a {display-block;}”);   // false
console.log(validateCSS(“a {dis play-block;}”);   // false
2

Проверить общую корректность или только точки с запятой?

3

Здравствуйте дорогой Дмитрий. Как я понимаю из задачи значения например red, block и т.д. написаны правильно как я панимаю нужно проверить чтобы обизательно в строке было {} : в конце ; не было бы написано например dis play.
Я там новые тести добавил если все console.log() напримерах будут работать правильно то задача решится

5

А еще #fff, #ffffff - тоже верные значения. calc - валидное ли значением для цвета? #fff - валидно для background, но невалидно для padding.

Я к тому что при формулировке

И надо выяснить в нем все правильно написано, или нет?

вылазит очень много нюансов. Поэтому и спрашиваю что именно подразумевается в задаче.

Примеры с псевдоселекторами тоже годные. При этом некоторые псевдоселекторы не терпят пробелов. На это тоже проверять?

6

Если нужно решить задачу во всей полноте - проще дергать сервис валидации https://jigsaw.w3.org/css-validator/api.html

7

Спасибо бальшое но если можно было бы решить задачу только для этих 12 тестах то задача была бы решена

8

Я бы делал так:

  • регуляркой выкусил бы селектор и тело стилей.
  • отдельно написал бы регулярку для валиации выкушенного селектора.
  • отдельный смешанный код из регулярки и логики для тела стилей.

И потом бы дотачивал код пока эти 12 тестов не пройдут

9

Писать регулярки для большого известного количества случаев очень удобно в https://regexr.com/