enb-stylus

    3.2.0 • Public • Published

    enb-stylus

    NPM version Build Status Build status Coverage Status Dependency Status

    Пакет предоставляет 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']);
        });
    };

    Лицензия

    © 2014 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.

    Install

    npm i enb-stylus

    DownloadsWeekly Downloads

    63

    Version

    3.2.0

    License

    none

    Unpacked Size

    99.2 kB

    Total Files

    19

    Last publish

    Collaborators

    • blond
    • mdevils
    • tadatuta