CSS Declaration Sorter

npmjs · github

CSS kodlarını düzenlemek için bir PostCSS eklentisidir. CSS kodlarını alfabetik yada farklı sıralar ile sıralabilirsiniz.

Alfabetik kaydetme örneğini inceleyelim:

/* Kaydetmeden Önce */
body {
    display: block;
    animation: none;
    color: #C55;
    border: 0;
}

/* Kaydettikten Sonra */
body {
    animation: none;
    border: 0;
    color: #C55;
    display: block;
}

Kurulum

Aşağıdaki komut ile kurulum işlemini gerçekleştirebilirsiniz.

npm install css-declaration-sorter --save-dev

Kullanımı

var alphabetical    = require("css-declaration-sorter"),
    gulp            = require("gulp"),
    postcss         = require("gulp-postcss");

gulp.task("css", function() {
    return gulp.src("./src/*.css")
        .pipe(postcss([alphabetical({order: "alphabetically"})]))
        .pipe(gulp.dest("./dest"))
});

Yukarıdaki kod, tüm css dosyalarını alfabetik olarak sıralayacaktır (Şahsen ben alfabetik css kullanıyorum).

Seçenekler

Farklı türde sıralama yapmak mümkün. Yukarıdaki örnekte {order: "alphabetically"} ile alfabetik sıralanma sağlanmıştır. Burada alphabetically yerine aşağıdaki kullanımları seçebilirsiniz.

smacss

Css kod sıralamasını Box, Border, Background, Text, Other şeklinde yapar.

...
.pipe(postcss([alphabetical({order: "smacss"})]))
...

concentric-css

Css kod sıralamasını Positioning, Visibility, Box model, Dimensions, Text şeklinde yapar.

...
.pipe(postcss([alphabetical({order: "concentric-css"})]))
...

Varsayılan olarak alfabetik sıralama yapar.

Sıradaki Eklenti: Imagemin

gulp