feat(css): add CSScombx

Author: jpatovh

README.md

@@ -14,7 +14,7 @@ This stack core is to be included in your main project and sets up many Gulp tas
 
 ## Features
 
-- SCSS => CSS compiling with LibSass, PostCSS, linting, and SourceMaps
+- SCSS => CSS compiling with LibSass, PostCSS, linting, CSScomb(x), and SourceMaps
 - JS compiling via Babel, linting and aggregation
 - WebPack module bundling
 - SVG => Font Icons compiling with support for adding mixins and classes to SCSS along with a demo page

docs/features/css.md

@@ -16,12 +16,14 @@ You can create individual CSS files bundle, using the config:
 - `gulp css` - Compile SCSS to CSS
 - `gulp watch:css` - Watch and compile
 - `gulp validate:css` - Test SCSS with [gulp-sass-lint](https://github.com/sasstools/gulp-sass-lint), which uses [sass-lint](https://github.com/sasstools/sass-lint) (Pure node.js - no Ruby)
+- `gulp format:css` - Format SCSS with [gulp-csscombx](https://github.com/drugan/gulp-csscombx), which uses [csscombx](https://github.com/drugan/csscombx)
 
 ## Config
 
 - `config.css.src` - Array of SCSS files
 - `config.css.dest` - String of Destination directory for CSS
-- `config.css.lint` - Boolean for if Linting should occur
+- `config.css.lint.enabled` - Boolean for if Linting should occur
+- `config.css.csscombx.enabled` - Boolean for if Formating should occur
 - `config.css.sourceComments` - Boolean - Enable comments written in CSS that shows SCSS source. **Don't turn on permanently**, it's useful if SourceMaps aren't working.
 - `config.css.autoPrefixerBrowsers` - Array of [Browsers to Support](https://github.com/ai/browserslist#queries) for Autoprefixer (used by PostCSS).
 

docs/index.md

@@ -8,7 +8,7 @@ This stack core is to be included in your main project and sets up many Gulp tas
 
 ## Features
 
-- SCSS => CSS compiling with LibSass, PostCSS, linting, and SourceMaps
+- SCSS => CSS compiling with LibSass, PostCSS, linting, CSScomb(x), and SourceMaps
 - JS compiling via Babel, linting and aggregation
 - WebPack module bundling
 - SVG => Font Icons compiling with support for adding mixins and classes to SCSS along with a demo page

docs/usage.md

@@ -60,7 +60,7 @@ $ npm install --save-dev eslint-config-drupal
 ```
 And create a `.eslintrc.js` file:
 ```javascript
-"use strict";
+'use strict';
 // rule reference: http://eslint.org/docs/rules
 // individual rule reference: http://eslint.org/docs/rules/NAME-OF-RULE
 
@@ -89,4 +89,8 @@ module.exports = {
 };
 ```
 
+### CSScombx
+
+The module follows the rules from [Drupal](https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool).
+
 ---

gulpfile.default.yml

@@ -12,6 +12,10 @@ css:
     failOnError: true
     extraSrc:
       - scss/**/*.scss
+  csscombx:
+    enabled: false
+    extraSrc:
+      - scss/**/*.scss
   sourceComments: false
   sourceMap:
     enabled: false

lib/css.js

@@ -11,6 +11,7 @@ const plumber = require('gulp-plumber');
 const notify = require('gulp-notify');
 const flatten = require('gulp-flatten');
 const gulpif = require('gulp-if');
+const csscombx = require('gulp-csscombx');
 const sassdoc = require('sassdoc');
 const join = require('path').join;
 const del = require('del');
@@ -84,6 +85,21 @@ module.exports = (gulp, config, tasks) => {
 
   gulp.task('validate:css', () => validateCss(true));
 
+
+  function formatCss() {
+    return gulp.src(config.css.csscombx.extraSrc
+      ? [].concat(config.css.src, config.css.csscombx.extraSrc)
+      : config.css.src, { base: './' })
+      .pipe(cached('format:css'))
+      .pipe(csscombx())
+      .pipe(gulp.dest('./'));
+  }
+
+  formatCss.description = 'Format SCSS files';
+
+  gulp.task('format:css', () => formatCss());
+
+
   function docsCss() {
     return gulp.src(config.css.src)
       .pipe(sassdoc({
@@ -108,6 +124,9 @@ module.exports = (gulp, config, tasks) => {
 
   function watchCss() {
     const watchTasks = [cssCompile];
+    if (config.css.csscombx.enabled) {
+      watchTasks.push('format:css');
+    }
     if (config.css.lint.enabled) {
       watchTasks.push(validateCssWithNoExit);
     }
@@ -128,7 +147,12 @@ module.exports = (gulp, config, tasks) => {
 
   tasks.compile.push('css');
 
+  if (config.css.csscombx.enabled) {
+    tasks.validate.push('format:css');
+  }
+
   if (config.css.lint.enabled) {
+    // must be after format:css
     tasks.validate.push('validate:css');
   }
 

package.json

@@ -34,6 +34,7 @@
     "gulp-babel": "^7.0.0",
     "gulp-cached": "^1.1.1",
     "gulp-concat": "^2.6.1",
+    "gulp-csscombx": "^4.2.1",
     "gulp-eslint": "^4.0.0",
     "gulp-flatten": "^0.3.1",
     "gulp-iconfont": "^9.0.2",