Соответствует селектору CSS, который не начинается с селектора

Question

Если у меня есть файл CSS, например, так:

div {
  color: red;
}
a{color: red}.someClass {color: red}

.someOtherClass {
color: red;
}

@media (max-width: 767px){
 div { color: green; }
 [data-module="123"] .someOtherClass { color: green; }
}

[data-module='123'] .someRandomClass { color: red }
[data-module='123'] .someOtherRandomClass {
color: red;
}

Только эти последние три соответствуют правильному использованию CSS в нашей компании:

[data-module='123'] .someOtherClass {
[data-module="123"] .someRandomClass {
[data-module='123'] .someOtherRandomClass {

Поскольку они начинаются с [data-module='xxx'] (обратите внимание, что пользователи могут использовать "или"), я смог найти / отредактировать REGEX, который правильно соответствует этим трем последним, но мне нужно обратное, я хочу соответствовать селекторы, которые не начинаются с [data-module="xxx"]... Поэтому, когда я проверяю с помощью PHP/Regex, если он совпадает, мне придется сообщить пользователю, что он не следует правилам... regex должен учитывать, что этот CSS может быть неорганизованным, как в примере, а также могут быть медиа-запросы.

Может ли какой-нибудь волшебный человек помочь мне понять это? Потому что это волшебство... какой-то источник... не могу понять

РЕДАКТИРОВАТЬ: я хочу что-то вроде этого Regex: http://regexr.com/328s7

Но совпадают, только если у селектора нет [data-module = "xxx"] перед ним

Answer 1

Заметки

Дополнительная информация (в комментариях под вопросом) позволила мне правильно создать регулярное выражение, которое будет работать в вашей ситуации.

Обратите внимание, что этот ответ можно улучшить, следуя истинным правилам селектора CSS, а также правилам объявления / списка объявлений / блоков объявлений, однако, учитывая важность синтаксиса CSS-селектора в этом вопросе, я решил игнорировать его и принять все символы (кроме новой строки и фигурных скобок). Это регулярное выражение не будет работать в любых строках, где перед селекторами стоит фигурная скобка (поэтому убедитесь, что вы предварительно украсили свой CSS с помощью какого-либо инструмента автоформатирования, если вы склонны писать неаккуратный код).

Обратите внимание, что приведенное ниже регулярное выражение требует двух следующих модификаторов:

• Глобальный: g
• Мульти линия: m

---

Ответ

Regex

^([\r\n]*)((?!\[data-module=(['"])\d+\3\])[^\r\n{}])+({[\s\S]*?})$

Чтобы объяснить немного того, что делает это регулярное выражение:

1. Утвердить позицию в начале строки
2. Совпадение от нуля до неограниченного времени возврата каретки \r или перевод строки \n персонажи
3. Совпадение между одним и неограниченным количеством раз, но как можно меньшим количеством символов, которые не появляются в группе (\r\n{}) и это не содержит структуру [data-module=сопровождаемый или единственной цитатой ' или двойная кавычка " символ, за которым следуют от одной до неограниченных цифр, за которым следует тот же ранее сопоставленный символ (одинарная или двойная кавычка - обеспечивает правильное закрытие) и, наконец, закрывающая квадратная скобка ]
4. Сопоставьте блок объявления CSS, проверив наличие открывающей фигурной скобки { за которым следует любой символ (включая символы новой строки) от нуля до неограниченного количества раз, но как можно меньше раз, за ​​которым следует закрывающая фигурная скобка }
5. Утвердить позицию в конце строки (здесь не очень нужно, но мне нравится соответствие с первым шагом)

---

Обновить

Regex

^([\r\n]*)(@.*?{[\r\n]*)?((?!\[data-module=(['"])\d+\4\])[^@\r\n{}])+({[\s\S]*?})([\r\n]*})?$

Этот также поймает в правилах. Обратите внимание, что он не будет перехватывать начальное правило at, однако.

Например, если у вас есть следующий код:

@media (max-width: 767px){
   [data-module="123"] .someOtherClass { color: green; }
   .someOtherClass { color: green; }
   [data-module="123"] .someOtherClass { color: green; }
   .someOtherClass { color: green; }
}

В приведенном выше примере, только третья, пятая и шестая строки будут пойманы. Первая строка @media ... не будут захвачены.