Add Stylelint to gulp and CI

.stylelintrc

@@ -0,0 +1,43 @@
+{
+  "rules": {
+    "color-no-invalid-hex": true,
+    "font-family-no-duplicate-names": true,
+    "font-family-name-quotes": ["always-where-recommended", { "severity": "warning" }],
+    "function-name-case": "lower",
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": ["always", { "severity": "warning" }],
+    "number-no-trailing-zeros": [true, { "severity": "warning" }],
+    "length-zero-no-unit": [true, { "severity": "warning" }],
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "property-case": "lower",
+    "property-no-unknown": true,
+    "keyframe-declaration-no-important": true,
+    "declaration-no-important": true,
+    "declaration-block-no-ignored-properties": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-single-line-max-declarations": [1, { "severity": "warning" }],
+    "declaration-block-trailing-semicolon": ["always", { "severity": "warning" }],
+    "block-no-empty": true,
+    "selector-no-empty": true,
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-element-no-unknown": true,
+    "selector-pseudo-element-case": "lower",
+    "selector-type-case": "lower",
+    "selector-type-no-unknown": true,
+    "selector-max-empty-lines": 0,
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-unknown": [true, {
+      ignoreMediaFeatureNames: ["min--moz-device-pixel-ratio"]
+    }],
+    "media-feature-no-missing-punctuation": true,
+    "stylelint-disable-reason": "always-before",
+    "comment-no-empty": true,
+    "max-nesting-depth": [5, { "severity": "warning" }],
+    "no-invalid-double-slash-comments": true,
+    "no-unknown-animations": true,
+    "no-extra-semicolons": true,
+    "no-missing-end-of-source-newline": [true, { "severity": "warning" }],
+    "no-eol-whitespace": [true, { "severity": "warning" }]
+  }
+}

bedrock/firefox/templates/firefox/desktop/desktop-base.html

@@ -29,7 +29,7 @@
     <div class="container">
       <div id="subscribe-wrapper">
         {# L10n: Line break for visual formatting. #}
-        {{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light') }}
+        {{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light', spinner_color='#fff') }}
       </div>
       <div id="download-wrapper">
         {{ download_firefox() }}

bedrock/firefox/templates/firefox/new/scene1.html

@@ -126,7 +126,7 @@ <h2 class="good">{{_('Freedom is yours') }}</h2>
     </section>
     <aside id="newsletter-subscribe">
       <div class="container">
-        {{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light') }}
+        {{ email_newsletter_form(title=_('Keep up with<br> all things Firefox.'), button_class='button-light', spinner_color='#fff') }}
       </div>
     </aside>
   </div>

circle.yml

@@ -33,6 +33,7 @@ test:
   pre:
     - mkdir -p "$CIRCLE_TEST_REPORTS/django"
   override:
+    - gulp css:lint
     - gulp js:lint
     - gulp js:test
     - make test-image

gulpfile.js

@@ -9,14 +9,22 @@ const del = require('del');
 const karma = require('karma');
 const eslint = require('gulp-eslint');
 const watch = require('gulp-watch');
+const gulpStylelint = require('gulp-stylelint');
 
-const lintPaths = [
+const lintPathsJS = [
     'media/js/**/*.js',
     '!media/js/libs/*.js',
     'tests/unit/spec/**/*.js',
     'gulpfile.js'
 ];
 
+const lintPathsCSS = [
+    'media/css/**/*.scss',
+    'media/css/**/*.less',
+    'media/css/**/*.css',
+    '!media/css/libs/*'
+];
+
 gulp.task('media:watch', () => {
     return gulp.src('./media/**/*')
         .pipe(watch('./media/**/*', {
@@ -33,17 +41,44 @@ gulp.task('js:test', done => {
 });
 
 gulp.task('js:lint', () => {
-    return gulp.src(lintPaths)
+    return gulp.src(lintPathsJS)
         .pipe(eslint())
         .pipe(eslint.format())
         .pipe(eslint.failAfterError());
 });
 
+
+gulp.task('css:lint', () => {
+    return gulp.src(lintPathsCSS)
+        .pipe(gulpStylelint({
+            reporters: [{
+                formatter: 'string',
+                console: true
+            }]
+        }));
+});
+
 gulp.task('static:clean', () => {
     return del(['static/**', '!static', '!static/.gitignore']);
 });
 
 gulp.task('default', () => {
     gulp.start('media:watch');
-    gulp.watch(lintPaths, ['js:lint']);
+
+    gulp.watch(lintPathsJS).on('change', file => {
+        return gulp.src(file.path)
+            .pipe(eslint())
+            .pipe(eslint.format());
+    });
+
+    gulp.watch(lintPathsCSS).on('change', file => {
+        return gulp.src(file.path)
+            .pipe(gulpStylelint({
+                failAfterError: false,
+                reporters: [{
+                    formatter: 'string',
+                    console: true
+                }]
+            }));
+    });
 });