Блог

Главная - Вопросы по программированию - Стилус игнорирует набор правил, если относительная ссылка селектора ссылается на корень

Стилус игнорирует набор правил, если относительная ссылка селектора ссылается на корень

#css #stylus

Вопрос:

В приведенном ниже коде стилуса я заранее не знаю, будет .InputField-LightTheme ли родительский селектор или нет: это зависит от того, определит ли пользователь библиотеки несколько тем или нет.

 .InputField-LightTheme

  .InputField-InputElement
  
    color blue
  
    ../ .InputField-InputElement__InvalidValueState

       color red

Когда селектор тем существует, я ожидаю результата ниже, и приведенный выше код дает этот результат:

 .InputField-LightTheme .InputField-InputElement {
  color: #00f;
}
.InputField-LightTheme .InputField-InputElement__InvalidValueState {
  color: #f00;
}

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

 .InputField-InputElement {
  color: #00f;
}
.InputField-InputElement__InvalidValueState {
  color: #f00;
}

Однако, если удалить .InputField-LightTheme селектор и превратить код в:

 .InputField-InputElement

  color blue

  ../ .InputField-InputElement__InvalidValueState

     color red

… только первый набор правил будет скомпилирован:

 .InputField-InputElement {
  color: #00f;
}

Мои расследования

Когда селектор темы существует, если попытаться сбросить текущий селектор внутри ../ .InputField-InputElement__InvalidValueState , как и ожидалось '.InputField-LightTheme .InputField-InputElement__InvalidValueState' , будет выведен результат.

 .InputField-LightTheme

  .InputField-InputElement
  
    color blue
  
    ../ .InputField-InputElement__InvalidValueState

       p(selector())
       color red

Next, when the theme selector does not exist, of if try to dump the current selector inside ../ .InputField-InputElement__InvalidValueState , just '' (empty string) will be output. It’s normal too because no selector exists above .InputField-InputElement .

 .InputField-InputElement

  color blue

  ../ .InputField-InputElement__InvalidValueState

     p(selector())
     color red

What is not normal is Stylus has not generate the ruleset with selector .InputField-InputElement__InvalidValueState as empty string and .InputField-InputElement__InvalidValueState addition result.

Метки: ,