Разделение стилей на разные CSS-файлы из одного исходного файла Stylus

Question

Я использовал эту технику для создания условных таблиц стилей IE во время разработки:

http://clock.co.uk/blog/handling-ie-with-stylus

По сути, это позволяет мне писать специфичные для IE CSS вместе со стилями, не относящимися к IE, и автоматически разделяет их в новом файле. По большей части это было здорово, но если бы я изменил одну вещь, это то, что он создает 2 полные копии файлов CSS, только одна копия содержит дополнительные специфичные для IE стили. Я хотел бы, чтобы в отдельном файле отображались только стили, специфичные для IE.

Так что если я сделаю что-то подобное в стилусе

/* styles.styl */
.myDiv 
  +ie(8)
    width: 100px
  background: #000
  color: red

.other
  display: block
  width: 10px

Я хочу, чтобы 2 файла выглядели так:

/* styles.css: */
.myDiv {
  background: #000;
  color: red;
 }

.other {
  display: block;
  width: 10px;
}

/* styles-ie8.css: Just the IE specific styles */
.myDiv {
  width: 100px;
}

вместо стилей, т.е.

/* styles-ie8.css: */
.myDiv {
  width: 100px; /* <-- includes the extra IE-specific style along with everything else */
  background: #000;
  color: red;
}

.other {
  display: block;
  width: 10px;
}

Просто любопытно, если это возможно, спасибо!

Answer 1

Я не верю, что это возможно без упаковки остального стилуса в +not-ie() стиль mixins (явно не рекомендуется) или расширение Stylus как-то.

В Clock мы столкнулись с той же проблемой - стремимся предоставить одну таблицу стилей каждому браузеру, а дополнительные функции будут добавлены в IE8 в отдельной таблице стилей. К сожалению, мы не смогли найти достойный способ справиться с этим.

В настоящее время, как вы упоминаете, мы имеем полную копию стилей в таблице стилей IE8 вместе со специфическими стилями IE8. Преимущество этого заключается в том, что теперь нам нужно только отправить одну таблицу стилей пользователям IE8, сохранив им HTTP-запрос по сравнению с описанным выше методом.

<!--[if gt IE 8]><!-->
link(rel='stylesheet', href='index.css')
<!--<![endif]-->
<!--[if lte IE 8]>
link(rel='stylesheet', href='index-ie8.css')
<![endif]-->

Хорошие браузеры, в том числе IE9+ get index.css только. IE8 и ниже получить index-ie8.css только. Ни один браузер не получает одинаковые стили дважды.

Боюсь, это не то решение, которое вы ищете, но, по крайней мере, это немного аргументирует наши решения.