bug 1379288: Include optional locale-specific CSS

gulpfile.js

@@ -9,12 +9,16 @@ const watch = require('gulp-watch');
 
 // compiles top-level .scss files
 gulp.task('styles', () => {
-    // only process files in /styles root
-    // all other .scss files are components/includes/libs
+    // Process files in /styles root
     gulp.src('./kuma/static/styles/*.scss')
         .pipe(sass().on('error', sass.logError))
         // send compiled files to where expected by Django Pipeline
         .pipe(gulp.dest('./static/styles'));
+    // Process files in /styles/locales
+    gulp.src('./kuma/static/styles/locales/*.scss')
+        .pipe(sass().on('error', sass.logError))
+        // send compiled files to where expected by Django Pipeline
+        .pipe(gulp.dest('./static/styles/locales'));
 });
 
 // lints .scss files with stylelint

jinja2/base.html

@@ -36,6 +36,9 @@
     {% stylesheet 'maintenance-mode-global' %}
   {%- endif %}
 
+  {#- If the stylesheet exists, include it. Otherwise, does nothing. #}
+  {% stylesheet 'locale-%s' % LANG %}
+
   {%- if not is_sphinx %}
     <!-- common social tags -->
     {% set social_logo = request.build_absolute_uri(static('img/opengraph-logo.png')) %}

kuma/settings/common.py

@@ -608,6 +608,21 @@ def enable_candidate_languages():
 # Cache non-versioned static files for one week
 WHITENOISE_MAX_AGE = 60 * 60 * 24 * 7
 
+
+def pipeline_scss(output, sources):
+    """Define a CSS file generated from multiple SCSS files."""
+    definition = {
+        'source_filenames': tuple('styles/%s.scss' % src for src in sources),
+        'output_filename': 'build/styles/%s.css' % output
+    }
+    return definition
+
+
+def pipeline_one_scss(slug):
+    """Define a CSS file that shares the name with the one input SCSS."""
+    return pipeline_scss(slug, [slug])
+
+
 PIPELINE_CSS = {
     'mdn-blue': {
         'source_filenames': (
@@ -885,6 +900,7 @@ def enable_candidate_languages():
         ),
         'output_filename': 'build/styles/samples.css',
     },
+    'locale-zh-CN': pipeline_one_scss('locales/zh-CN')
 }
 
 PIPELINE_JS = {

kuma/static/styles/locales/zh-CN.scss

@@ -0,0 +1,3 @@
+/*
+Styles for Chinese (Simplified)
+********************************************************************** */