Introduce Pattern Library test pages (take two)

FEDX-93

These are developer only pages, so can not be seen in production
environment. On devstack, you can access these pages in LMS and
Studio at:

    /template/ux/reference/pattern-library-test.html

This is the second attempt to enable the Pattern Library. The
first attempt broke Django Templates and didn't work correctly
with right-to-left styling.

cms/envs/common.py

@@ -568,19 +568,29 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/cms-style-vendor-tinymce-skin.css',
     },
-    'style-main': {
-        # this is unnecessary and can be removed
+    'style-main-v1': {
         'source_filenames': [
-            'css/studio-main.css',
+            'css/studio-main-v1.css',
         ],
-        'output_filename': 'css/studio-main.css',
+        'output_filename': 'css/studio-main-v1.css',
     },
-    'style-main-rtl': {
-        # this is unnecessary and can be removed
+    'style-main-v1-rtl': {
         'source_filenames': [
-            'css/studio-main-rtl.css',
+            'css/studio-main-v1-rtl.css',
         ],
-        'output_filename': 'css/studio-main-rtl.css',
+        'output_filename': 'css/studio-main-v1-rtl.css',
+    },
+    'style-main-v2': {
+        'source_filenames': [
+            'css/studio-main-v2.css',
+        ],
+        'output_filename': 'css/studio-main-v2.css',
+    },
+    'style-main-v2-rtl': {
+        'source_filenames': [
+            'css/studio-main-v2-rtl.css',
+        ],
+        'output_filename': 'css/studio-main-v2-rtl.css',
     },
     'style-edx-icons': {
         'source_filenames': [

cms/static/sass/_build.scss → cms/static/sass/_build-v1.scss

 // ------------------------------
 // Studio: Shared Build Compile
+// Version 1 styling (pre-Pattern Library)
 
 // About: Sass compile for Studio that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the studio-main-*.scss files.
 

cms/static/sass/_build-v2.scss

+// ------------------------------
+// Studio: Shared Build Compile
+// Version 2 - introduces the Pattern Library
+
+
+// Configuration
+@import 'config';
+
+// Extensions

cms/static/sass/_config.scss

+// ------------------------------
+// Studio configuration settings
+
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------

cms/static/sass/studio-main-rtl.scss → cms/static/sass/studio-main-v1-rtl.scss

@@ -17,4 +17,4 @@
 @import 'bourbon/bourbon'; // lib - bourbon
 @import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
 
-@import 'build'; // shared app style assets/rendering
+@import 'build-v1'; // shared app style assets/rendering

cms/static/sass/studio-main.scss → cms/static/sass/studio-main-v1.scss

-// studio - css architecture
+// Studio - css architecture
+// Version 1 styling (pre-Pattern Library)
 // ====================
 
 // Table of Contents
@@ -17,4 +18,4 @@
 @import 'bourbon/bourbon'; // lib - bourbon
 @import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
-@import 'build'; // shared app style assets/rendering
+@import 'build-v1'; // shared app style assets/rendering

cms/static/sass/studio-main-v2-rtl.scss

+// ------------------------------
+// Studio main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the right-to-left (RTL) configured style compile.
+// It should mirror main-ltr w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
+
+// Load the shared build
+@import 'build-v2';

cms/static/sass/studio-main-v2.scss

+// ------------------------------
+// Studio main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the left-to-right (LTR) configured style compile.
+// It should mirror main-rtl w/ the exception of bi-app references.
+
+
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
+
+// Load the shared build
+@import 'build-v2';

cms/templates/base.html

 ## coding=utf-8
+
+## Pages currently use v1 styling by default. Once the Pattern Library
+## rollout has been completed, this default can be switched to v2.
+<%! main_css = "style-main-v1" %>
+
+## Standard imports
 <%namespace name='static' file='static_content.html'/>
 <%!
 from django.utils.translation import ugettext as _
@@ -7,6 +13,7 @@ from openedx.core.djangolib.js_utils import (
     dump_js_escaped_json, js_escaped_string
 )
 %>
+
 <%page expression_filter="h"/>
 <!doctype html>
 <!--[if lte IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
@@ -36,7 +43,8 @@ from openedx.core.djangolib.js_utils import (
     <%static:css group='style-vendor'/>
     <%static:css group='style-vendor-tinymce-content'/>
     <%static:css group='style-vendor-tinymce-skin'/>
-    <%static:css group='style-main'/>
+
+    <%static:css group='${self.attr.main_css}'/>
 
     <%include file="widgets/segment-io.html" />
 

cms/templates/ux/reference/index.html

@@ -24,6 +24,7 @@
                             <ul>
                                 <li><a href="container.html">Container page</a></li>
                                 <li><a href="unit.html">Unit page</a></li>
+                                <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
                             </ul>
                         </section>
                     </li>

cms/templates/ux/reference/pattern-library-test.html

+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
+<%inherit file="../../base.html" />
+
+<%block name="title">Pattern Library Test Page</%block>
+<%block name="bodyclass">is-signedin pattern-library</%block>
+
+<%block name="content">
+<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
+<div class="example-set">
+    <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
+        <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+
+        <div class="alert-message">
+            <p class="alert-copy">
+                Interesting pattern library content to come...
+            </p>
+        </div>
+
+    </div>
+</div>
+</%block>

common/djangoapps/pipeline_mako/tests/test_render.py

 """ Tests for rendering functions in the mako pipeline. """
 
+import ddt
+from unittest import skipUnless
+
+from django.conf import settings
 from django.test import TestCase
-from pipeline_mako import render_require_js_path_overrides
+
+from pipeline_mako import render_require_js_path_overrides, compressed_css, compressed_js
 
 
 class RequireJSPathOverridesTest(TestCase):
@@ -31,3 +36,43 @@ class RequireJSPathOverridesTest(TestCase):
         result = render_require_js_path_overrides(self.OVERRIDES)
         # To make the string comparision easy remove the whitespaces
         self.assertEqual(map(str.strip, result.splitlines()), self.OVERRIDES_JS)
+
+
+@ddt.ddt
+class PipelineRenderTest(TestCase):
+    """Test individual pipeline rendering functions. """
+
+    @skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in LMS')
+    @ddt.data(
+        (True,),
+        (False,),
+    )
+    def test_compressed_css(self, pipeline_enabled):
+        """
+        Verify the behavior of compressed_css, with the pipeline
+        both enabled and disabled.
+        """
+        with self.settings(PIPELINE_ENABLED=pipeline_enabled):
+            # Verify the default behavior
+            css_include = compressed_css('style-main-v1')
+            self.assertIn(u'lms-main-v1.css', css_include)
+
+            # Verify that raw keyword causes raw URLs to be emitted
+            css_include = compressed_css('style-main-v1', raw=True)
+            self.assertIn(u'lms-main-v1.css?raw', css_include)
+
+    @skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in LMS')
+    def test_compressed_js(self):
+        """
+        Verify the behavior of compressed_css, with the pipeline
+        both enabled and disabled.
+        """
+        # Verify that a single JS file is rendered with the pipeline enabled
+        with self.settings(PIPELINE_ENABLED=True):
+            js_include = compressed_js('base_application')
+            self.assertIn(u'lms-base-application.js', js_include)
+
+        # Verify that multiple JS files are rendered with the pipeline disabled
+        with self.settings(PIPELINE_ENABLED=False):
+            js_include = compressed_js('base_application')
+            self.assertIn(u'/static/js/src/logger.js', js_include)

lms/djangoapps/courseware/tests/test_comprehensive_theming.py

@@ -104,8 +104,8 @@ class TestComprehensiveTheming(TestCase):
         """
         Test that static files finders are adjusted according to the applied comprehensive theme.
         """
-        result = staticfiles.finders.find('red-theme/css/lms-main.css')
-        self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main.css")
+        result = staticfiles.finders.find('red-theme/css/lms-main-v1.css')
+        self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main-v1.css")
 
         lms_main_css = ""
         with open(result) as css_file:
@@ -117,8 +117,8 @@ class TestComprehensiveTheming(TestCase):
         """
         Test default css is served if no theme is applied
         """
-        result = staticfiles.finders.find('css/lms-main.css')
-        self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css")
+        result = staticfiles.finders.find('css/lms-main-v1.css')
+        self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css")
 
         lms_main_css = ""
         with open(result) as css_file:

lms/envs/common.py

@@ -1390,19 +1390,29 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-vendor-tinymce-skin.css',
     },
-    'style-main': {
-        # this is unnecessary and can be removed
+    'style-main-v1': {
         'source_filenames': [
-            'css/lms-main.css',
+            'css/lms-main-v1.css',
         ],
-        'output_filename': 'css/lms-main.css',
+        'output_filename': 'css/lms-main-v1.css',
     },
-    'style-main-rtl': {
-        # this is unnecessary and can be removed
+    'style-main-v1-rtl': {
         'source_filenames': [
-            'css/lms-main-rtl.css',
+            'css/lms-main-v1-rtl.css',
         ],
-        'output_filename': 'css/lms-main-rtl.css',
+        'output_filename': 'css/lms-main-v1-rtl.css',
+    },
+    'style-main-v2': {
+        'source_filenames': [
+            'css/lms-main-v2.css',
+        ],
+        'output_filename': 'css/lms-main-v2.css',
+    },
+    'style-main-v2-rtl': {
+        'source_filenames': [
+            'css/lms-main-v2-rtl.css',
+        ],
+        'output_filename': 'css/lms-main-v2-rtl.css',
     },
     'style-course-vendor': {
         'source_filenames': [

lms/static/certificates/sass/_build.scss

 // ------------------------------
 // Open edX Certificates: Shared Build Compile
 
-// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files.
+// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI.
+// Configuration and vendor specific imports happen before this shared set of imports are compiled
+// in the main-*.scss files.
 
 
-// ------------------------------
-// #CONFIG + LIB
-// ------------------------------
-@import 'lib';
+// Configuration
 @import 'config';
-@import '../../../../node_modules/edx-pattern-library/pattern-library/sass/edx-pattern-library';
 
-// ------------------------------
-// #EXTENSIONS
-// ------------------------------
+// Extensions
 @import 'utilities';
 @import 'base';
 @import 'components';

lms/static/certificates/sass/_config.scss

 // ------------------------------
 // Open edX Certificates: Config
 
-// About: variable and configuration overrides
-
-// #VARIABLES
 
 // ------------------------------
 // #VARIABLES
 // ------------------------------
-$pattern-library-path: '../../edx-pattern-library' !default;
 
 // certificate characteristics
 $cert-base-color: palette(grayscale-cool, dark);

lms/static/certificates/sass/_lib.scss

-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: third party libraries and dependencies import
-
-
-@import '../../../../node_modules/edx-pattern-library/node_modules/bourbon/app/assets/stylesheets/bourbon';
-@import '../../../../node_modules/edx-pattern-library/node_modules/susy/sass/susy';
-@import '../../../../node_modules/edx-pattern-library/node_modules/breakpoint-sass/stylesheets/breakpoint';

lms/static/certificates/sass/_ltr.scss

-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: Sass partial for defining settings and utilities for LTR-centric layouts.
-
-// #SETTINGS
-// #LIB
-
-
-// ----------------------------
-// #SETTINGS
-// ----------------------------
-$layout-direction: ltr;
-
-// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
-$grid-direction-default: ltr;
-$grid-direction-reversed: ltr;
-
-
-// ----------------------------
-// #LIB
-// ----------------------------
-@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-ltr';

lms/static/certificates/sass/_rtl.scss

-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: Sass partial for defining settings and utilities for LTR-centric layouts.
-
-// #SETTINGS
-// #LIB
-
-
-// ----------------------------
-// #SETTINGS
-// ----------------------------
-$layout-direction: rtl;
-
-// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
-$grid-direction-default: rtl;
-$grid-direction-reversed: ltr;
-
-
-// ----------------------------
-// #LIB
-// ----------------------------
-@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-rtl';

lms/static/certificates/sass/main-ltr.scss

@@ -3,16 +3,13 @@
 
 // About: Sass compile for the Open edX Certificates Elements.
 
-// NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references.
+// NOTE: This is the left to right (LTR) configured style compile.
+// It should mirror main-rtl w/ the exception of bi-app references.
 
 
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-@import 'ltr';                        // LTR-specifc settings and utilities
-
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
 
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build';                     // shared compile/build order for both LTR and RTL UI
+// Load the shared build
+@import 'build';

lms/static/certificates/sass/main-rtl.scss

@@ -3,16 +3,13 @@
 
 // About: Sass compile for the Open edX Certificates Elements.
 
-// NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references.
+// NOTE: This is the right to left (RTL) configured style compile.
+// It should mirror main-ltr w/ the exception of bi-app references.
 
 
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-@import 'rtl';                        // RTL-specifc settings and utilities
-
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
 
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build';                      // shared compile/build order for both LTR and RTL UI
+// Load the shared build
+@import 'build';

lms/static/sass/_build-lms-v2.scss

+// ------------------------------
+// LMS: Shared Build Compile
+// Version 2 - introduces the Pattern Library
+
+
+// Configuration
+@import 'config';
+
+// Extensions

lms/static/sass/_config.scss

+// ------------------------------
+// LMS configuration settings
+
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------

lms/static/sass/lms-main-rtl.scss → lms/static/sass/lms-main-v1-rtl.scss

-// lms - css application architecture
+// LMS - CSS application architecture
+// Version 1 styling (pre-Pattern Library)
 // ====================
 
 // libs and resets *do not edit*
@@ -18,4 +19,4 @@
 // theme, for old-style deprecated theming.
 //<THEME-OVERRIDE>
 
-@import 'build-lms'; // shared app style assets/rendering
+@import 'build-lms-v1'; // shared app style assets/rendering

lms/static/sass/lms-main.scss → lms/static/sass/lms-main-v1.scss

-// lms - css application architecture
+// LMS - CSS application architecture
+// Version 1 styling (pre-Pattern Library)
 // ====================
 
 // libs and resets *do not edit*
@@ -17,4 +18,4 @@
 // theme, for old-style deprecated theming.
 //<THEME-OVERRIDE>
 
-@import 'build-lms'; // shared app style assets/rendering
+@import 'build-lms-v1'; // shared app style assets/rendering

lms/static/sass/lms-main-v2-rtl.scss

+// ------------------------------
+// LMS main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the right-to-left (RTL) configured style compile.
+// It should mirror lms-main-v2 w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
+
+// Load the shared build
+@import 'build-lms-v2';

lms/static/sass/lms-main-v2.scss

+// ------------------------------
+// LMS main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the left-to-right (LTR) configured style compile.
+// It should mirror lms-main-v2-rtl w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
+
+// Load the shared build
+@import 'build-lms-v2';

lms/templates/main.html

 ## coding=utf-8
+
+## This is the main Mako template that all page templates should include.
+## Note: there are a handful of pages that use Django Templates and which
+## instead include main_django.html. It is important that these two files
+## remain in sync, so changes made in one should be applied to the other.
+
+## Pages currently use v1 styling by default. Once the Pattern Library
+## rollout has been completed, this default can be switched to v2.
+<%! main_css = "style-main-v1" %>
+
+
 <%namespace name='static' file='static_content.html'/>
 <%!
 from django.core.urlresolvers import reverse
@@ -49,17 +60,7 @@ from pipeline_mako import render_require_js_path_overrides
   <link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
 
   <%static:css group='style-vendor'/>
-  ## We could do <%static:css group='style-main'/>, but that's only useful
-  ## if the group contains multiple files, and the 'style-main' group doesn't.
-  ## Instead, we'll construct this <link> element manually, to improve clarity.
-  ## When nothing in the system is referencing the 'style-main' group, it can
-  ## be removed from the environment file.
-  <%
-  application_css_path = "css/lms-main{rtl}.css".format(
-    rtl="-rtl" if get_language_bidi() else "",
-  )
-  %>
-  <link rel="stylesheet" href="${static.url(application_css_path)}" type="text/css" media="all" />
+  <%static:css group='${self.attr.main_css}'/>
 
   % if disable_courseware_js:
     <%static:js group='base_vendor'/>

lms/templates/main_django.html

@@ -9,7 +9,7 @@
  <link rel="icon" type="image/x-icon" href="{% favicon_path %}" />
 
   {% stylesheet 'style-vendor' %}
-  {% stylesheet 'style-main' %}
+  {% stylesheet 'style-main-v1' %}
 
   {% block main_vendor_js %}
   {% javascript 'main_vendor' %}

lms/templates/ux/reference/index.html

+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+<%namespace name='static' file='/static_content.html'/>
+
+<%block name="pagetitle">UX Reference</%block>
+<%block name="nav_skip">#content</%block>
+
+<%block name="bodyclass">view-ux-reference</%block>
+
+<%block name="content">
+<div class="main-wrapper">
+    <div class="inner-wrapper">
+        <div class="main-column">
+            <article class="window unit-body">
+                <h1>UX Style Reference</h1>
+
+                <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
+                    <h2>Page Types</h2>
+                    <ul>
+                        <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
+                    </ul>
+                </section>
+            </article>
+        </div>
+    </div>
+</div>
+</%block>

lms/templates/ux/reference/pattern-library-test.html

+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Pattern Library Test</%block>
+<%block name="nav_skip">#content</%block>
+
+<%block name="bodyclass">pattern-library</%block>
+
+<%block name="content">
+<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
+<div class="example-set">
+    <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
+        <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+
+        <div class="alert-message">
+            <p class="alert-copy">
+                Interesting pattern library content to come...
+            </p>
+        </div>
+
+    </div>
+</div>
+</%block>

openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py

@@ -63,8 +63,8 @@ class TestComprehensiveThemeLMS(TestCase):
         """
         Test that theme sass files are used instead of default sass files.
         """
-        result = staticfiles.finders.find('test-theme/css/lms-main.css')
-        self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main.css")
+        result = staticfiles.finders.find('test-theme/css/lms-main-v1.css')
+        self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main-v1.css")
 
         lms_main_css = ""
         with open(result) as css_file:
@@ -115,8 +115,8 @@ class TestComprehensiveThemeCMS(TestCase):
         """
         Test that theme sass files are used instead of default sass files.
         """
-        result = staticfiles.finders.find('test-theme/css/studio-main.css')
-        self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main.css")
+        result = staticfiles.finders.find('test-theme/css/studio-main-v1.css')
+        self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main-v1.css")
 
         cms_main_css = ""
         with open(result) as css_file:
@@ -161,8 +161,8 @@ class TestComprehensiveThemeDisabledLMS(TestCase):
         """
         Test that default css files served without comprehensive themes applied.
         """
-        result = staticfiles.finders.find('css/lms-main.css')
-        self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css")
+        result = staticfiles.finders.find('css/lms-main-v1.css')
+        self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css")
 
         lms_main_css = ""
         with open(result) as css_file:
@@ -208,8 +208,8 @@ class TestComprehensiveThemeDisabledCMS(TestCase):
         """
         Test that default css files served without comprehensive themes applied..
         """
-        result = staticfiles.finders.find('css/studio-main.css')
-        self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main.css")
+        result = staticfiles.finders.find('css/studio-main-v1.css')
+        self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main-v1.css")
 
         cms_main_css = ""
         with open(result) as css_file:

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "dependencies": {
     "coffee-script": "1.6.1",
-    "edx-pattern-library": "0.10.4",
-    "edx-ui-toolkit": "0.9.0",
+    "edx-pattern-library": "~0.12.1",
+    "edx-ui-toolkit": "~0.9.1",
     "requirejs": "~2.1.22",
     "uglify-js": "2.4.24",
     "underscore": "~1.8.3",

pavelib/assets.py

@@ -33,9 +33,12 @@ SYSTEMS = {
 }
 
 # Common lookup paths that are added to the lookup paths for all sass compilations
-COMMON_LOOKUP_DIRS = [
+COMMON_LOOKUP_PATHS = [
     path("common/static"),
     path("common/static/sass"),
+    path("node_modules"),
+    path("node_modules/edx-pattern-library/node_modules"),
+
 ]
 
 # A list of NPM installed libraries that should be copied into the common
@@ -108,10 +111,7 @@ def get_common_sass_directories():
     applicable_directories.append({
         "sass_source_dir": path("common/static/sass"),
         "css_destination_dir": path("common/static/css"),
-        "lookup_paths": [
-            path("common/static"),
-            path("common/static/sass"),
-        ],
+        "lookup_paths": COMMON_LOOKUP_PATHS,
     })
 
     return applicable_directories
@@ -223,7 +223,7 @@ def get_watcher_dirs(themes_base_dir=None, themes=None):
         (list): dirs that need to be added to sass watchers.
     """
     dirs = []
-    dirs.extend(COMMON_LOOKUP_DIRS)
+    dirs.extend(COMMON_LOOKUP_PATHS)
     if themes_base_dir and themes:
         # Register sass watchers for all the given themes
         theme_dirs = [(path(themes_base_dir) / theme) for theme in themes if theme]
@@ -559,7 +559,7 @@ def _compile_sass(system, theme, debug, force, timing_info):
         else:
             sass.compile(
                 dirname=(sass_source_dir, css_dir),
-                include_paths=COMMON_LOOKUP_DIRS + lookup_paths,
+                include_paths=COMMON_LOOKUP_PATHS + lookup_paths,
                 source_comments=source_comments,
                 output_style=output_style,
             )

pavelib/paver_tests/test_assets.py

@@ -148,6 +148,8 @@ class TestPaverWatchAssetTasks(TestCase):
         self.expected_sass_directories = [
             path('common/static/sass'),
             path('common/static'),
+            path('node_modules'),
+            path('node_modules/edx-pattern-library/node_modules'),
             path('lms/static/sass/partials'),
             path('lms/static/sass'),
             path('lms/static/certificates/sass'),
@@ -156,6 +158,10 @@ class TestPaverWatchAssetTasks(TestCase):
         ]
         super(TestPaverWatchAssetTasks, self).setUp()
 
+    def tearDown(self):
+        self.expected_sass_directories = []
+        super(TestPaverWatchAssetTasks, self).tearDown()
+
     def test_watch_assets(self):
         """
         Test the "compile_sass" task.
@@ -198,7 +204,3 @@ class TestPaverWatchAssetTasks(TestCase):
                 self.assertIsInstance(sass_watcher_args[0], PollingObserver)
                 self.assertIsInstance(sass_watcher_args[1], list)
                 self.assertItemsEqual(sass_watcher_args[1], self.expected_sass_directories)
-
-    def tearDown(self):
-        self.expected_sass_directories = []
-        super(TestPaverWatchAssetTasks, self).tearDown()