Repository: mdn/kuma

Issue:
Improve Sass build tooling
**Summary**

Local development for the new front end has improved a lot but the Sass portion has lagged behind. This can and does cause friction for both pull request review and general front-end development.

**Audience**
All developers contributing to the codebase.


**Rationale**

I, for one, regularly have to run the entire `docker-compose exec web make build-static` when making changes to the Sass files. This is slow and often leads to Docker slowing down to a crawl.

We do have a Gulp task but it has become very unreliable.


**Workaround**
As described in rationale


**Proposal**
Simplify how we build our CSS from Sass by using `node-sass-chokidar` directly instead of via yet another build tool. There are also some changes we can make to the "old" Sass source to make better use of Sass partials.



Discussion:

Resolving patch:
diff --git a/kuma/core/pipeline/sass.py b/kuma/core/pipeline/sass.py
--- a/kuma/core/pipeline/sass.py
+++ b/kuma/core/pipeline/sass.py
@@ -7,7 +7,7 @@ class DebugSassCompiler(SASSCompiler):
     """
     DEBUG=True replacement for standard SASSCompiler. Same behavior as
     SASSCompiler (e.g. file extension match), but no compilation takes place
-    (handled by gulp).
+    (handled by node-sass).
     """
 
     def compile_file(self, *args, **kwargs):
diff --git a/kuma/settings/common.py b/kuma/settings/common.py
--- a/kuma/settings/common.py
+++ b/kuma/settings/common.py
@@ -681,18 +681,7 @@ def pipeline_one_scss(slug, **kwargs):
     # single page app.
     'react-mdn': {
         'source_filenames': (
-            'styles/minimalist/main.scss',
-            'styles/minimalist/document.scss',
-
-            # Custom build of our Prism theme
-            'styles/libs/prism/prism.css',
-            'styles/libs/prism/prism-line-highlight.css',
-            'styles/libs/prism/prism-line-numbers.css',
-
-            'styles/wiki-syntax.scss',
-
-            # Styles for BCD tables
-            'styles/wiki-compat-tables.scss',
+            'styles/react-mdn.scss',
         ),
         'output_filename': 'build/styles/react-mdn.css',
     },
@@ -720,14 +709,6 @@ def pipeline_one_scss(slug, **kwargs):
         ),
         'output_filename': 'build/styles/banners.css',
     },
-    'jquery-ui': {
-        'source_filenames': (
-            'js/libs/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css',
-            'styles/libs/jqueryui/moz-jquery-plugins.css',
-            'css/jquery-ui-customizations.scss',
-        ),
-        'output_filename': 'build/styles/jquery-ui.css',
-    },
     'home': {
         'source_filenames': (
             'styles/home.scss',
@@ -751,17 +732,7 @@ def pipeline_one_scss(slug, **kwargs):
     },
     'wiki': {
         'source_filenames': (
-            'styles/components/banners/wiki-notice.scss',
             'styles/wiki.scss',
-            'styles/diff.scss',
-
-            # Custom build of our Prism theme
-            'styles/libs/prism/prism.css',
-            'styles/libs/prism/prism-line-highlight.css',
-            'styles/libs/prism/prism-line-numbers.css',
-
-            'js/prism-mdn/components/prism-json.css',
-            'styles/wiki-syntax.scss',
         ),
         'output_filename': 'build/styles/wiki.css',
     },
@@ -810,16 +781,13 @@ def pipeline_one_scss(slug, **kwargs):
     },
     'error-404': {
         'source_filenames': (
-            'styles/error.scss',
             'styles/error-404.scss',
         ),
         'output_filename': 'build/styles/error-404.css',
     },
     'dashboards': {
         'source_filenames': (
-            'styles/components/compact.scss',
             'styles/dashboards.scss',
-            'styles/diff.scss',
         ),
         'output_filename': 'build/styles/dashboards.css',
     },
@@ -849,10 +817,7 @@ def pipeline_one_scss(slug, **kwargs):
     },
     'editor-content': {
         'source_filenames': (
-            'styles/main.scss',
-            'styles/wiki.scss',
-            'styles/wiki-wysiwyg.scss',
-            'styles/wiki.scss',
+            'styles/editor-content.scss',
         ),
         'output_filename': 'build/styles/editor-content.css',
         'template_name': 'pipeline/javascript-array.jinja',
@@ -878,6 +843,22 @@ def pipeline_one_scss(slug, **kwargs):
         ),
         'output_filename': 'build/styles/samples.css',
     },
+    'prism': {
+        'source_filenames': (
+            'styles/libs/prism/prism.css',
+            'styles/libs/prism/prism-line-highlight.css',
+            'styles/libs/prism/prism-line-numbers.css',
+        ),
+        'output_filename': 'build/styles/prism.css',
+    },
+    'jquery-ui': {
+        'source_filenames': (
+            'js/libs/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css',
+            'styles/libs/jqueryui/moz-jquery-plugins.css',
+            'css/jquery-ui-customizations.scss',
+        ),
+        'output_filename': 'build/styles/jquery-ui.css',
+    },
 }
 
 # Locales that are well supported by the Zilla family


Test patch: