Вход

Просмотр полной версии : Строка валидации CSS


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

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

В вышеуказанном примере есть ошибка так как после font-size нет двоеточия. В задаче предпологается что значения парамтеров (red, 14px и т.д.) всегда переданы правильно.

Нужно написать функцию, которая строкой получает CSS код и возврощает true/false (только для этих 12 случиях) в зависимости от того 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

Поможете решить задачу?

Alexandroppolus
19.03.2020, 16:15
В задаче предпологается что значения парамтеров (red, 14px и т.д.) всегда переданы правильно.
там и без этого гигантская кухня.
дохрена всяких комбинаций селекторов, особенно доставляют селекторы атрибутов.
@-правила (медиазапросы, чарсеты и т.д.)
большой набор тегов.
псевдоклассы, псевдоэлементы.
свойства вроде content, которые должны быть внутри псевдоэлементов, и внутри значения которых надо пропустить точку с запятой.
опять же, составить словарь тегов и названий свойств.

нет, определенно, лет 15 назад можно было такую задачу с полпинка решить, но не сейчас :)

ну а так, понятное дело, регексы плюс некий конечный автомат с состояниями...

Aetae
19.03.2020, 21:51
https://www.npmjs.com/package/postcss-validator