Merge pull request #8419 from edx/sass-output-to-css-dir

Compile Sass to CSS dirs, move Creative Commons CSS into Sass

cms/envs/common.py

@@ -478,15 +478,16 @@ PIPELINE_CSS = {
         'output_filename': 'css/cms-style-vendor-tinymce-skin.css',
     },
     'style-main': {
+        # this is unnecessary and can be removed
         'source_filenames': [
-            'sass/studio-main.css',
-            'css/edx-cc.css',
+            'css/studio-main.css',
         ],
         'output_filename': 'css/studio-main.css',
     },
     'style-main-rtl': {
+        # this is unnecessary and can be removed
         'source_filenames': [
-            'sass/studio-main-rtl.css',
+            'css/studio-main-rtl.css',
         ],
         'output_filename': 'css/studio-main-rtl.css',
     },

cms/static/sass/_build.scss

@@ -44,6 +44,7 @@
 @import 'elements/vendor'; // overrides to vendor-provided styling
 @import 'elements/modal-window';
 @import 'elements/uploaded-assets'; // layout for asset tables
+@import 'elements/creative-commons';
 
 // +Base - Specific Views
 // ====================

common/static/css/edx-cc.css → cms/static/sass/elements/_creative-commons.scss

 @font-face {
-  font-family: 'edx-cc';
-  src: url('../fonts/edx-cc/edx-cc.eot?52318265');
-  src: url('../fonts/edx-cc/edx-cc.eot?52318265#iefix') format('embedded-opentype'),
-       url('../fonts/edx-cc/edx-cc.woff?52318265') format('woff'),
-       url('../fonts/edx-cc/edx-cc.ttf?52318265') format('truetype'),
-       url('../fonts/edx-cc/edx-cc.svg?52318265#edx-cc') format('svg');
+  font-family: 'CreativeCommons';
+  src: url('../fonts/CreativeCommons/cc.eot');
+  src: url('../fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
+       url('../fonts/CreativeCommons/cc.woff') format('woff'),
+       url('../fonts/CreativeCommons/cc.ttf') format('truetype'),
+       url('../fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
 [class^="icon-cc"]:before, [class*=" icon-cc"]:before {
-  font-family: "edx-cc";
+  font-family: "CreativeCommons";
 }
 
 .icon-cc:before { content: '\e800'; } /* '' */

lms/envs/common.py

@@ -1339,16 +1339,16 @@ PIPELINE_CSS = {
         'output_filename': 'css/lms-style-vendor-tinymce-skin.css',
     },
     'style-main': {
+        # this is unnecessary and can be removed
         'source_filenames': [
-            'sass/lms-main.css',
-            'css/edx-cc.css',
+            'css/lms-main.css',
         ],
         'output_filename': 'css/lms-main.css',
     },
     'style-main-rtl': {
+        # this is unnecessary and can be removed
         'source_filenames': [
-            'sass/lms-main-rtl.css',
-            'css/edx-cc.css',
+            'css/lms-main-rtl.css',
         ],
         'output_filename': 'css/lms-main-rtl.css',
     },
@@ -1362,7 +1362,7 @@ PIPELINE_CSS = {
     },
     'style-course': {
         'source_filenames': [
-            'sass/lms-course.css',
+            'css/lms-course.css',
             'xmodule/modules.css',
         ],
         'output_filename': 'css/lms-course.css',

lms/static/fonts/CreativeCommons/cc.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
+<defs>
+<font id="edx-cc" horiz-adv-x="1000" >
+<font-face font-family="edx-cc" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="cc" unicode="&#xe800;" d="m474 830q198 2 340-136t146-336q2-200-136-342t-338-146q-198-2-341 137t-145 337q-4 200 135 342t339 144z m12-858q156 2 266 114t108 270-115 267-269 107q-158-2-267-114t-107-270 114-267 270-107z m-124 298q40 0 58 40l56-30q-20-36-50-52-32-20-70-20-62 0-100 38-38 36-38 104t38 106 96 38q86 0 124-66l-62-32q-10 20-24 28t-28 8q-60 0-60-82 0-38 14-58 18-22 46-22z m266 0q42 0 56 40l58-30q-18-32-50-52t-70-20q-64 0-100 38-38 36-38 104 0 64 38 106 38 38 98 38 84 0 120-66l-60-32q-10 20-24 28t-28 8q-62 0-62-82 0-36 16-58t46-22z" horiz-adv-x="960" />
+<glyph glyph-name="cc-by" unicode="&#xe801;" d="m480 526q-66 0-66 68t66 68q68 0 68-68t-68-68z m98-26q14 0 22-8 10-10 10-22l0-196-56 0 0-234-148 0 0 234-56 0 0 196q0 12 10 22 8 8 22 8l196 0z m-98 330q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m0-872q162 0 277 115t115 277q0 164-115 278t-277 114-277-114-115-278q0-162 115-277t277-115z" horiz-adv-x="960" />
+<glyph glyph-name="cc-nc" unicode="&#xe802;" d="m480 830q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m-370-350q-22-62-22-130 0-162 115-277t277-115q110 0 202 56t142 148l-178 80q-8-46-46-74-38-30-86-34l0-74-56 0 0 74q-78 0-146 58l66 66q50-44 108-44 24 0 42 12t18 36q0 18-14 30l-46 20-56 26-76 32z m506-122l242-108q14 44 14 100 0 164-115 278t-277 114q-102 0-188-48t-140-130l182-82q12 36 46 62 32 22 78 24l0 74 56 0 0-74q68-4 120-44l-62-64q-44 28-84 28-24 0-38-8-18-10-18-30 0-8 4-12l60-28 42-18z" horiz-adv-x="960" />
+<glyph glyph-name="cc-nc-eu" unicode="&#xe803;" d="m480 830q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m-370-352q-22-62-22-128 0-162 115-277t277-115q110 0 201 55t143 149l-246 108-174 0q10-36 26-56 38-40 104-40 46 0 92 20l18-90q-56-30-124-30-128 0-196 92-34 44-46 104l-52 0 0 58 44 0 0 14q0 4 1 12t1 12l-46 0 0 56 10 0z m488-112l262-116q12 48 12 100 0 164-115 278t-277 114q-102 0-189-48t-141-130l158-70q8 14 28 38 72 82 184 82 70 0 122-24l-24-92q-40 20-88 20-64 0-100-44-10-10-16-28l56-24 136 0 0-56-8 0z" horiz-adv-x="960" />
+<glyph glyph-name="cc-nc-jp" unicode="&#xe804;" d="m480 830q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m-374-364q-18-54-18-116 0-162 115-277t277-115q106 0 195 52t141 140l-152 68 0-68-126 0 0-108-118 0 0 108-124 0 0 74 124 0 0 36-12 24-112 0 0 74 54 0z m432-242l112 0-106 48-6-12 0-36z m126 100l192-86q16 58 16 112 0 164-115 278t-277 114q-106 0-194-51t-140-137l158-70-54 98 128 0 76-166 46-20 82 186 128 0-122-224 76 0 0-34z" horiz-adv-x="960" />
+<glyph glyph-name="cc-sa" unicode="&#xe805;" d="m478 604q114 0 180-74 66-72 66-186 0-110-68-184-74-74-180-74-80 0-142 50-58 48-70 138l120 0q6-86 106-86 50 0 82 42 30 44 30 118 0 76-28 116-30 40-82 40-96 0-108-86l36 0-96-94-94 94 36 0q14 90 72 138t140 48z m2 226q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m0-872q162 0 277 115t115 277q0 164-115 278t-277 114-277-114-115-278q0-162 115-277t277-115z" horiz-adv-x="960" />
+<glyph glyph-name="cc-nd" unicode="&#xe806;" d="m306 382l0 82 348 0 0-82-348 0z m0-154l0 82 348 0 0-82-348 0z m174 602q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m0-872q162 0 277 115t115 277q0 164-115 278t-277 114-277-114-115-278q0-162 115-277t277-115z" horiz-adv-x="960" />
+<glyph glyph-name="cc-pd" unicode="&#xe807;" d="m480 830q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m-370-352q-22-62-22-128 0-162 115-277t277-115q110 0 201 55t143 149l-424 188q2-54 28-96t76-42q36 0 64 26l6 6 70-84q-4-2-10-7t-8-9q-62-42-136-42-86 0-159 58t-73 188q0 32 6 62z m310-34l440-194q12 48 12 100 0 164-115 278t-277 114q-102 0-189-48t-141-130l148-66q64 102 196 102 88 0 150-54l-78-80q-8 8-14 12-22 16-52 16-52 0-80-50z" horiz-adv-x="960" />
+<glyph glyph-name="cc-zero" unicode="&#xe808;" d="m480 628q108 0 153-81t45-197q0-114-45-195t-153-81-153 81-45 195q0 116 45 197t153 81z m-86-278q0-18 4-66l106 194q14 24-6 42-12 4-18 4-86 0-86-174z m86-172q86 0 86 172 0 40-6 84l-118-204q-22-30 12-46 2-2 6-2 2 0 2-2 2 0 8-1t10-1z m0 652q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m0-872q162 0 277 115t115 277q0 164-115 278t-277 114-277-114-115-278q0-162 115-277t277-115z" horiz-adv-x="960" />
+<glyph glyph-name="cc-share" unicode="&#xe809;" d="m676 488q12 0 20-8t8-18l0-354q0-10-8-18t-20-8l-260 0q-12 0-20 8t-8 18l0 104-104 0q-10 0-18 8t-8 20l0 352q0 12 6 18 4 6 18 10l264 0q10 0 18-8t8-20l0-104 104 0z m-264 0l108 0 0 78-210 0 0-300 78 0 0 196q0 10 8 18 4 4 16 8z m238-354l0 302-210 0 0-302 210 0z m-170 696q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m0-872q162 0 277 115t115 277q0 164-115 278t-277 114-277-114-115-278q0-162 115-277t277-115z" horiz-adv-x="960" />
+<glyph glyph-name="cc-remix" unicode="&#xe80a;" d="m794 342l10-4 0-136-10-4-116-50-4-2-6 2-252 104-8 4-124-52-124 54 0 122 116 48-2 2 0 136 130 56 294-122 0-118z m-136-158l0 86-2 0 0 2-220 90 0-86 220-92 0 2z m14 112l78 32-72 30-76-32z m102-74l0 84-86-36 0-84z m-294 608q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m0-872q162 0 277 115t115 277q0 164-115 278t-277 114-277-114-115-278q0-162 115-277t277-115z" horiz-adv-x="960" />
+</font>
+</defs>
+</svg>
\ No newline at end of file

lms/static/sass/_build-lms.scss

@@ -16,6 +16,7 @@
 @import 'elements/typography';
 @import 'elements/controls';
 @import 'elements/system-feedback';
+@import 'elements/creative-commons';
 
 // shared - course
 @import 'shared/fields';

lms/static/sass/elements/_creative-commons.scss

+@font-face {
+  font-family: 'CreativeCommons';
+  src: url('../fonts/CreativeCommons/cc.eot');
+  src: url('../fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
+       url('../fonts/CreativeCommons/cc.woff') format('woff'),
+       url('../fonts/CreativeCommons/cc.ttf') format('truetype'),
+       url('../fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-cc"]:before, [class*=" icon-cc"]:before {
+  font-family: "CreativeCommons";
+}
+
+.icon-cc:before { content: '\e800'; } /* '' */
+.icon-cc-by:before { content: '\e801'; } /* '' */
+.icon-cc-nc:before { content: '\e802'; } /* '' */
+.icon-cc-nc-eu:before { content: '\e803'; } /* '' */
+.icon-cc-nc-jp:before { content: '\e804'; } /* '' */
+.icon-cc-sa:before { content: '\e805'; } /* '' */
+.icon-cc-nd:before { content: '\e806'; } /* '' */
+.icon-cc-pd:before { content: '\e807'; } /* '' */
+.icon-cc-zero:before { content: '\e808'; } /* '' */
+.icon-cc-share:before { content: '\e809'; } /* '' */
+.icon-cc-remix:before { content: '\e80a'; } /* '' */

pavelib/assets.py

@@ -15,21 +15,22 @@ from .utils.cmd import cmd, django_cmd
 # setup baseline paths
 
 COFFEE_DIRS = ['lms', 'cms', 'common']
-SASS_LOAD_PATHS = ['./common/static/sass']
-SASS_UPDATE_DIRS = ['*/static']
+SASS_DIRS = {
+    "lms/static/sass": "lms/static/css",
+    "cms/static/sass": "cms/static/css",
+    "common/static/sass": "common/static/css",
+}
+SASS_LOAD_PATHS = ['common/static', 'common/static/sass']
 SASS_CACHE_PATH = '/tmp/sass-cache'
 
 
-THEME_COFFEE_PATHS = []
-THEME_SASS_PATHS = []
-
 edxapp_env = Env()
 if edxapp_env.feature_flags.get('USE_CUSTOM_THEME', False):
     theme_name = edxapp_env.env_tokens.get('THEME_NAME', '')
     parent_dir = path(edxapp_env.REPO_ROOT).abspath().parent
     theme_root = parent_dir / "themes" / theme_name
-    THEME_COFFEE_PATHS = [theme_root]
-    THEME_SASS_PATHS = [theme_root / "static" / "sass"]
+    COFFEE_DIRS.append(theme_root)
+    SASS_DIRS[theme_root / "static" / "sass"] = None
 
 
 class CoffeeScriptWatcher(PatternMatchingEventHandler):
@@ -69,7 +70,7 @@ class SassWatcher(PatternMatchingEventHandler):
         """
         register files with observer
         """
-        for dirname in SASS_LOAD_PATHS + SASS_UPDATE_DIRS + THEME_SASS_PATHS:
+        for dirname in SASS_LOAD_PATHS + SASS_DIRS.keys():
             paths = []
             if '*' in dirname:
                 paths.extend(glob.glob(dirname))
@@ -111,7 +112,7 @@ def coffeescript_files():
     """
     return find command for paths containing coffee files
     """
-    dirs = " ".join(THEME_COFFEE_PATHS + [Env.REPO_ROOT / coffee_dir for coffee_dir in COFFEE_DIRS])
+    dirs = " ".join([Env.REPO_ROOT / coffee_dir for coffee_dir in COFFEE_DIRS])
     return cmd('find', dirs, '-type f', '-name \"*.coffee\"')
 
 
@@ -134,13 +135,24 @@ def compile_sass(debug=False):
     """
     Compile Sass to CSS.
     """
-    sh(cmd(
-        'sass', '' if debug else '--style compressed',
-        "--sourcemap" if debug else '',
-        "--cache-location {cache}".format(cache=SASS_CACHE_PATH),
-        "--load-path", " ".join(SASS_LOAD_PATHS + THEME_SASS_PATHS),
-        "--update", "-E", "utf-8", " ".join(SASS_UPDATE_DIRS + THEME_SASS_PATHS),
-    ))
+    parts = ["sass"]
+    parts.append("--update")
+    parts.append("--cache-location {cache}".format(cache=SASS_CACHE_PATH))
+    parts.append("--default-encoding utf-8")
+    if debug:
+        parts.append("--sourcemap")
+    else:
+        parts.append("--style compressed")
+    for load_path in SASS_LOAD_PATHS + SASS_DIRS.keys():
+        parts.append("--load-path {path}".format(path=load_path))
+
+    for sass_dir, css_dir in SASS_DIRS.items():
+        if css_dir:
+            parts.append("{sass}:{css}".format(sass=sass_dir, css=css_dir))
+        else:
+            parts.append(sass_dir)
+
+    sh(cmd(*parts))
 
 
 def compile_templated_sass(systems, settings):