Awesome

enb-stylus

Пакет предоставляет ENB-технологию для сборки CSS- и Stylus-файлов в проектах, построенных по методологии БЭМ.

Принципы работы технологии и ее API описаны в документе API технологии.

Совместимость: технология пакета enb-stylus поддерживает версию CSS-препроцессора Stylus 0.54.2.

Работа технологии `stylus`

В БЭМ-методологии стили к каждому блоку хранятся в отдельных файлах в директориях блоков.

ENB-технология stylus позволяет писать код как в синтаксисе Stylus, так и на чистом CSS. Для компиляции Stylus-кода в CSS используется CSS-препроцессор Stylus.

В результате сборки вы получите CSS-файл. Для обработки итогового CSS используется CSS-построцессор postcss.

Как начать использовать?

1. Установите пакет enb-stylus:

$ npm install --save-dev enb-stylus

Требования: зависимость от пакета enb версии 0.16.0 или выше.

2. Опишите код стилей в файле с расширением .styl:

 blocks/
 └── block/
     └── block.styl

3. Добавьте в конфигурационный файл .enb/make.js следующий код:

var stylusTech = require('enb-stylus/techs/stylus'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // Получаем список файлов (FileList)
        node.addTechs([
            [FileProvideTech, { target: '?.bemdecl.js' }],
            [bemTechs.levels, { levels: ['blocks'] }],
            bemTechs.deps,
            bemTechs.files
        ]);

        // Строим CSS-файл
        node.addTech([stylusTech, {
            // target: '?.css',
            // filesTarget: '?.files',
            // sourceSuffixes: ['.styl', '.css'],
            // url: 'rebase'
            // imports: 'include',
            // comments: true
        }]);
        node.addTarget('?.css');
    });
};

Особенности работы пакета

Совместное использование Stylus и CSS

В проекте допускается совместное использование .css- и .styl-файлов. Однако в рамках одного блока обе технологии не могут использоваться одновременно. Если стили блока реализованы и в CSS, и в Stylus, будет использоваться файл с расширением .styl.

Пример 1. Если файл одного блока реализован в CSS-технологии, а файл другого — в Stylus:

blocks/
└── block1/
    └── block1.styl
└── block2/
    └── block2.css
bundle
└── bundle.css

В сборку попадут оба файла:

@import "../blocks/block1/block1.styl";
@import "../blocks/block1/block2.css";

Пример 2. Если у одного блока есть несколько реалиализаций: файл c расширением .styl и файл c расширением .css:

blocks/
└── block/
    ├── block.styl
    └── block.css
bundle
└── bundle.css

В сборку попадет только Stylus-файл:

@import "../blocks/block/block.styl";

Пример 3. Если у одного блока есть несколько реалиализаций, но на разных уровнях переопределения:

common.blocks/
└── block/
    └── block.styl
desktop.blocks/
    └── block/
        └── block.css
bundle
└── bundle.css

В сборку попадут оба файла:

@import "../common.blocks/block/block.styl";
@import "../desktop.blocks/block/block.css";

Добавление вендорных префиксов

Технология stylus поддерживает Autoprefixer.

Для автоматического добавления вендорных префиксов в процессе сборки используйте опцию autoprefixer.

Минимизация CSS-кода

Для минимизации CSS-кода используется csswring.

Включить минимизацию можно с помощью опции compress.

Сборка отдельного бандла для IE

Если в проекте есть стили, которые должны примениться только для IE, то их помещают в отдельный файл со специальным расширением .ie*.styl:

.ie.styl — стили для любого IE, ниже 9й версии.
.ie6.styl — стили для IE 6.
.ie7.styl — стили для IE 7.
.ie8.styl — стили для IE 8.
.ie9.styl — стили для IE 9.

Чтобы собрать отдельный бандл для IE нужно:

1. В папке блока создать один или несколько файлов c расширением .ie*.styl:

blocks/
└── block/
    ├── block.styl
    ├── block.ie.styl
    └── block.ie6.styl

2. Добавить еще технологию StylusTech:

node.addTechs([
   [stylusTech], // для основного CSS
   [stylusTech]  // для IE
]);

3. Добавить новую цель сборки для IE файла — ?.ie6.css:

node.addTechs([
    [stylusTech],
    [stylusTech, { target: '?.ie6.css' }]  // IE 6
]);

node.addTargets(['?.css', '?.ie6.css']);

4. В БЭМ проектах принято подключать стили с помощью условных комментариев.

Пример

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!--[if gt IE 9]><!-->
            <link rel="stylesheet" href="index.css"/>
        <!--<![endif]-->
        <!--[if lte IE 9]>
            <link rel="stylesheet" href="index.ie.css"/>
        <![endif]-->
    </head>
    <body>

Важно, чтобы файл, подключаемый для IE, содержал стили не только специфичные для него, но и общие для всей страницы.

Чтобы собрать такой файл, нужно расширить список суффиксов с помощью опции sourceSuffixed.

node.addTechs([
    [stylusTech],
    [stylusTech, {
        target: '?.ie6.css',
        sourceSuffixes: [
            'styl', 'css',          // Общие стили
            'ie.styl', 'ie.css',    // Стили для IE < 9
            'ie6.styl', 'ie6.css'   // Стили для IE 6
        ]
    }]
]);
node.addTargets(['?.css', '?.ie.css']);

В итоге получаем следующий конфигурационный файл .enb/make.js:

var stylusTech = require('enb-stylus/techs/stylus'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // получаем список файлов (FileList)
        node.addTechs([
            [FileProvideTech, { target: '?.bemdecl.js' }],
            [bemTechs.levels, { levels: ['blocks'] }],
            bemTechs.deps,
            bemTechs.files
        ]);

        // Собираем CSS-файлы
        node.addTechs([
            [stylusTech],
            [stylusTech, {
                target: '?.ie6.css',
                sourceSuffixes: [
                    'styl', 'css',          // Общие стили
                    'ie.styl', 'ie.css',    // Стили для IE < 9
                    'ie6.styl', 'ie6.css'   // Стили для IE 6
                ]
            }]
        ]);
        node.addTargets(['?.css', '?.ie6.css']);
    });
};