Remove libsass dependency, precompile CSS for distribution

Depending on libsass for all Wagtail installations was causing issues
with various operating systems, dramatically increasing installation
times, and preventing front end development adopting modern practices.

libsass has been removed as a dependency. Sass files are compiled before
release as a dependency of the `sdist` setup command. Sass compilation
is done through `gulp`. People wishing to hack on the frontend assets
should now install wagtail locally, install the node dependencies, and
run `gulp`:

    $ pip install -e path/to/wagtail
    $ cd path/to/wagtail
    $ npm install
    $ npm start

All the templates and JS files have been updated to reference the new
compiled CSS files instead of the Sass files.

Precompiled CSS for jquery-ui and similar have been moved out of the
`scss/` directory to the `css/` directory.

.gitignore

@@ -10,3 +10,4 @@
 /venv
 /node_modules/
 npm-debug.log
+/*.egg/

docs/getting_started/installation.rst

@@ -20,7 +20,6 @@ Wagtail is based on the Django web framework and various other Python libraries.
 
 Most of Wagtail's dependencies are pure Python and will install automatically using ``pip``, but there are a few native-code components that require further attention:
 
- * libsass-python (for compiling SASS stylesheets) - requires a C++ compiler and the Python development headers.
  * Pillow (for image processing) - additionally requires libjpeg and zlib.
 
 On Debian or Ubuntu, these can be installed with the command::

docs/howto/settings.rst

@@ -450,11 +450,6 @@ These two files should reside in your project directory (``myproject/myproject/`
 
   INTERNAL_IPS = ('127.0.0.1', '10.0.2.2')
 
-  # django-compressor settings
-  COMPRESS_PRECOMPILERS = (
-      ('text/x-scss', 'django_libsass.SassCompiler'),
-  )
-
   # A sample logging configuration. The only tangible logging
   # performed by this configuration is to send an email to
   # the site admins on every HTTP 500 error when DEBUG=False.

gulpfile.js

@@ -0,0 +1,84 @@
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var rename = require('gulp-rename');
+var path = require('path');
+var join = path.join;
+
+
+gulp.task('default', ['watch']);
+gulp.task('build', ['styles']);
+
+var scssFiles = {
+	'wagtail/wagtailadmin/static': [
+		'wagtailadmin/scss/core.scss',
+		'wagtailadmin/scss/layouts/login.scss',
+		'wagtailadmin/scss/layouts/home.scss',
+		'wagtailadmin/scss/layouts/page-editor.scss',
+		'wagtailadmin/scss/layouts/preview.scss',
+		'wagtailadmin/scss/panels/rich-text.scss',
+		'wagtailadmin/scss/userbar.scss',
+		'wagtailadmin/scss/normalize.scss',
+		'wagtailadmin/scss/userbar_embed.scss',
+	],
+	'wagtail/wagtailimages/static': [
+		'wagtailimages/scss/add-multiple.scss',
+		'wagtailimages/scss/focal-point-chooser.scss',
+	],
+	'wagtail/wagtailusers/static': [
+		'wagtailusers/scss/groups_edit.scss',
+	],
+	'wagtail/contrib/wagtailstyleguide/static': [
+		'wagtailstyleguide/scss/styleguide.scss',
+	],
+};
+
+
+/*
+ * Watch - Watch files, trigger tasks when they are modified
+ */
+gulp.task('watch', ['build'], function () {
+	for (var appPath in scssFiles) {
+		gulp.watch(join(appPath, '*/scss/**'), ['styles']);
+	}
+});
+
+
+/*
+ * SASS - Compile and move sass
+**/
+
+gulp.task('styles', function () {
+	var sass = require('gulp-sass');
+	var autoprefixer = require('gulp-autoprefixer');
+
+	// Wagtail Sass files include each other across applications,
+	// e.g. wagtailimages Sass files will include wagtailadmin/scss/mixins.scss
+	// Thus, each app is used as an includePath.
+	var includePaths = Object.keys(scssFiles);
+
+	// Not all files in a directory need to be compiled, so globs can not be used.
+	// Each file is named individually by joining its app path and file name.
+	var sources = Object.keys(scssFiles).reduce(function(allSources, appPath) {
+		var appSources = scssFiles[appPath];
+		return allSources.concat(appSources.map(function(appSource) {
+			return join(appPath, appSource);
+		}));
+	}, []);
+
+	return gulp.src(sources)
+		.pipe(sass({
+			errLogToConsole: true,
+			includePaths: includePaths,
+			outputStyle: 'expanded'
+		}))
+		.pipe(autoprefixer({
+			browsers: ['last 2 versions'],
+			cascade: false
+		}))
+		.pipe(gulp.dest(function(file) {
+			// e.g. wagtailadmin/scss/core.scss -> wagtailadmin/css/core.css
+			// Changing the suffix is done by Sass automatically
+			return file.base.replace('/scss/', '/css/');
+		}))
+		.on('error', gutil.log);
+});

package.json

@@ -15,7 +15,6 @@
     "browserify-shim": "~3.4.1",
     "gulp": "~3.8.11",
     "gulp-autoprefixer": "~1.0.1",
-    "gulp-pixrem": "~0.1.1",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "~1.0.0",
     "gulp-sourcemaps": "~1.2.2",

setup.py

@@ -1,8 +1,12 @@
 #!/usr/bin/env python
 
-import sys, os
+import sys
+import os
+
+from setuptools.command.sdist import sdist
 
 from wagtail.wagtailcore import __version__
+from wagtail.utils.setup import assets, add_subcommand
 
 
 try:
@@ -20,17 +24,12 @@ except ImportError:
     pass
 
 
-# Disable parallel builds, because Pillow 2.5.3 does some crazy monkeypatching of
-# the build process on multicore systems, which breaks installation of libsass
-os.environ['MAX_CONCURRENCY'] = '1'
-
 PY3 = sys.version_info[0] == 3
 
 
 install_requires = [
     "Django>=1.7.1,<1.9",
     "django-compressor>=1.4",
-    "django-libsass>=0.2",
     "django-modelcluster>=0.6",
     "django-taggit>=0.13.0",
     "django-treebeard==3.0",
@@ -82,4 +81,8 @@ setup(
             wagtail=wagtail.bin.wagtail:main
     """,
     zip_safe=False,
+    cmdclass={
+        'sdist': add_subcommand(sdist, [('assets', None)]),
+        'assets': assets,
+    },
 )

tox.ini

@@ -18,8 +18,6 @@ basepython =
 
 deps =
     django-compressor>=1.4
-    django-libsass>=0.2
-    libsass==0.5.1
     django-modelcluster>=0.6
     django-taggit==0.13.0
     django-treebeard==3.0

wagtail/contrib/wagtailstyleguide/static/wagtailstyleguide/css/.gitignore

@@ -0,0 +1 @@
+styleguide.css

wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html

@@ -3,7 +3,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailstyleguide/scss/styleguide.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailstyleguide/css/styleguide.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/project_template/core/templates/base.html

@@ -14,7 +14,7 @@
 
         {% templatetag openblock %} compress css {% templatetag closeblock %}
             {# Global stylesheets #}
-            <link rel="stylesheet" type="text/x-scss" href="{% templatetag openblock %} static 'css/{{ project_name }}.scss' {% templatetag closeblock %}">
+            <link rel="stylesheet" type="text/css" href="{% templatetag openblock %} static 'css/{{ project_name }}.css' {% templatetag closeblock %}">
         {% templatetag openblock %} endcompress {% templatetag closeblock %}
 
         {% templatetag openblock %} block extra_css {% templatetag closeblock %}

wagtail/project_template/project_name/settings/base.py

@@ -129,14 +129,6 @@ MEDIA_ROOT = join(PROJECT_ROOT, 'media')
 MEDIA_URL = '/media/'
 
 
-# Django compressor settings
-# http://django-compressor.readthedocs.org/en/latest/settings/
-
-COMPRESS_PRECOMPILERS = (
-    ('text/x-scss', 'django_libsass.SassCompiler'),
-)
-
-
 # Template configuration
 
 from django.conf import global_settings

wagtail/utils/setup.py

@@ -0,0 +1,32 @@
+from __future__ import absolute_import, print_function, unicode_literals
+import subprocess
+
+from distutils.core import Command
+
+
+class assets(Command):
+
+    user_options = []
+
+    def initialize_options(self):
+        pass
+
+    def finalize_options(self):
+        pass
+
+    def run(self):
+        try:
+            subprocess.check_call(['npm', 'run', 'build'])
+        except (OSError, subprocess.CalledProcessError) as e:
+            print('Error compiling assets: ' + str(e))
+            raise SystemExit(1)
+
+
+def add_subcommand(command, extra_sub_commands):
+    # Sadly, as commands are old-style classes, `type()` can not be used to
+    # construct these. Additionally, old-style classes do not have a `name`
+    # attribute, so naming them nicely is also impossible.
+    class CompileAnd(command):
+        sub_commands = command.sub_commands + extra_sub_commands
+    CompileAnd.__name__ = command.__name__
+    return CompileAnd

wagtail/wagtailadmin/static/wagtailadmin/css/.gitignore

@@ -0,0 +1,9 @@
+core.css
+layouts/home.css
+layouts/login.css
+layouts/page-editor.css
+layouts/preview.css
+normalize.css
+panels/rich-text.css
+userbar.css
+userbar_embed.css

wagtail/wagtailadmin/static/wagtailadmin/js/userbar_embed.js

@@ -33,7 +33,7 @@
 
     l = d.createElement('link');
     l.rel = 'stylesheet';
-    l.href = w.wagtail.static_root + 'scss/userbar_embed.css';
+    l.href = w.wagtail.static_root + 'css/userbar_embed.css';
 
     f = d.createElement('iframe');
     f.id = 'wagtail-userbar';
@@ -50,4 +50,4 @@
     t = d.getElementsByTagName('title')[0];
     t.parentNode.insertBefore(l, t.nextSibling);
     d.body.appendChild(f);
-}(window, document));
+}(window,document));

wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html

@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/login.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html

@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/login.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html

@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/login.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html

@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/login.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailadmin/templates/wagtailadmin/admin_base.html

@@ -3,8 +3,8 @@
 
 {% block css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css' %}" />
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/core.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css' %}" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/core.css' %}" type="text/css" />
     {% endcompress %}
 
     {% block extra_css %}{% endblock %}

wagtail/wagtailadmin/templates/wagtailadmin/home.html

@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/home.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/home.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailadmin/templates/wagtailadmin/login.html

@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/login.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html

@@ -5,12 +5,12 @@
 {% endcomment %}
 
 {% compress css %}
-    <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/page-editor.scss' %}" type="text/x-scss" />
-    <link rel="stylesheet" href="{% static 'wagtailadmin/scss/panels/rich-text.scss' %}" type="text/x-scss" />
+    <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/page-editor.css' %}" type="text/css" />
+    <link rel="stylesheet" href="{% static 'wagtailadmin/css/panels/rich-text.css' %}" type="text/css" />
 
     {# we'll want tag-it included, for the benefit of any modals that use it, like images. #}
     {# TODO: a method of injecting these sorts of things on demand when the modal is spawned #}
-    <link rel="stylesheet" href="{% static 'wagtailadmin/scss/vendor/jquery.tagit.css' %}">
+    <link rel="stylesheet" href="{% static 'wagtailadmin/css/vendor/jquery.tagit.css' %}">
 
     {% hook_output 'insert_editor_css' %}
 {% endcompress %}

wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html

@@ -4,7 +4,7 @@
     <head>
         <title>{% trans "Preview" %}</title>
         {% compress css %}
-            <link rel="stylesheet" href="{% static 'wagtailadmin/scss/layouts/preview.scss' %}" type="text/x-scss" />
+            <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/preview.css' %}" type="text/css" />
         {% endcompress %}
     </head>
     <body class="ready">

wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html

@@ -1,4 +1,4 @@
 {% load compress static %}
 {% compress css %}
-    <link rel="stylesheet" href="{% static 'wagtailadmin/scss/vendor/jquery.tagit.css' %}">
+    <link rel="stylesheet" href="{% static 'wagtailadmin/css/vendor/jquery.tagit.css' %}">
 {% endcompress %}

wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html

@@ -11,7 +11,7 @@
     <script src="{% static 'wagtailadmin/js/vendor/modernizr-2.6.2.min.js' %}"></script>
 
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/normalize.css' %}" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/normalize.css' %}" />
     {% endcompress %}
 
     {% block css %}{% endblock %}

wagtail/wagtailadmin/templates/wagtailadmin/userbar/base.html

@@ -4,7 +4,7 @@
 {% block titletag %}{% trans 'User bar' %}{% endblock %}
 {% block css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailadmin/scss/userbar.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailadmin/css/userbar.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailimages/static/wagtailimages/css/.gitignore

@@ -0,0 +1,2 @@
+add-multiple.css
+focal-point-chooser.css

wagtail/wagtailimages/templates/wagtailimages/images/edit.html

@@ -6,9 +6,9 @@
     {% include "wagtailadmin/shared/tag_field_css.html" %}
 
     <!-- Focal point chooser -->
-    <link rel="stylesheet" href="{% static 'wagtailimages/scss/vendor/jquery.Jcrop.min.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'wagtailimages/css/vendor/jquery.Jcrop.min.css' %}" type="text/css">
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailimages/scss/focal-point-chooser.scss' %}" type="text/x-scss">
+        <link rel="stylesheet" href="{% static 'wagtailimages/css/focal-point-chooser.css' %}" type="text/css">
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailimages/templates/wagtailimages/multiple/add.html

@@ -4,7 +4,7 @@
 {% block bodyclass %}menu-images{% endblock %}
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailimages/scss/add-multiple.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />
     {% endcompress %}
     {% include "wagtailadmin/shared/tag_field_css.html" %}
 {% endblock %}

wagtail/wagtailusers/static/wagtailusers/css/.gitignore

@@ -0,0 +1 @@
+groups_edit.css

wagtail/wagtailusers/templates/wagtailusers/groups/create.html

@@ -6,7 +6,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailusers/scss/groups_edit.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailusers/css/groups_edit.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}
 

wagtail/wagtailusers/templates/wagtailusers/groups/edit.html

@@ -6,7 +6,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'wagtailusers/scss/groups_edit.scss' %}" type="text/x-scss" />
+        <link rel="stylesheet" href="{% static 'wagtailusers/css/groups_edit.css' %}" type="text/css" />
     {% endcompress %}
 {% endblock %}