CSSの並び順にこだわる人もいるので、コンパイル時にルールに沿って出力するように対応した。基本的に一人で対応しているけれど、コンパイル後のCSSファイルを他者がいじることもあるだろうから対応してみた。

postcssとcss-declaration-sorterをインストール

npm install -D gulp-postcss css-declaration-sorter

gulpfile.jsに下記を追記。

const postcss = require('gulp-postcss');
const cssDeclarationSorter = require('css-declaration-sorter');

.pipe(postcss([
cssDeclarationSorter({order: 'smacss'}) // 'alphabetical', 'smacss', 'concentric-css'のいずれかを選択
]))

こんな感じ（一部抜粋）。

const postcss = require('gulp-postcss');
const cssDeclarationSorter = require('css-declaration-sorter');
// sassコンパイル
gulp.task('sass', (done) => {
gulp.src('draft/sass/**/*.scss')
.pipe(sass({
outputStyle: 'expanded'
})
)
.on("error", sass.logError)
.pipe(postcss([
cssDeclarationSorter({order: 'smacss'}) // 'alphabetical', 'smacss', 'concentric-css'のいずれかを選択
]))
.pipe(gulp.dest('draft/css'));
done();
});

ソート順は好みでよいと思うけど「alphabetical（アルファベット順）」はないかな。