Merge remote-tracking branch 'takeflight/refactor/remove-libsass'

.gitignore

@@ -11,3 +11,4 @@
 /node_modules/
 npm-debug.log
 /.idea
+/*.egg/

docs/contributing/css_guidelines.rst

@@ -3,6 +3,26 @@ CSS coding guidelines
 
 Our CSS is written in Sass, using the SCSS syntax.
 
+Compiling
+~~~~~~~~~
+
+The SCSS source files are compiled to CSS using the
+[gulp](http://gulpjs.com/) build system.
+This requires [node.js](http://nodejs.org) to run.
+To install the libraries required for compiling the SCSS,
+run the following from the Wagtail repository root:
+
+    $ npm install
+
+To compile the assets, run:
+
+    $ npm run build
+
+Alternatively, the SCSS files can be monitored,
+automatically recompiling when any changes are observed, by running:
+
+    $ npm start
+
 Spacing
 ~~~~~~~
 

docs/contributing/developing.rst

@@ -101,3 +101,27 @@ If your Elasticsearch instance is located somewhere else, you can set the
 
 If you no longer want Wagtail to test against Elasticsearch, uninstall the
 ``elasticsearch`` package.
+
+Compiling static assets
+~~~~~~~~~~~~~~~~~~~~~~~
+
+All static assets such as JavaScript, CSS, images, and fonts for the Wagtail admin are compiled from their respective sources by ``gulp``. The compiled assets are not committed to the repository, and are compiled before packaging each new release. Compiled assets should not be submitted as part of a pull request.
+
+To compile the assets, Node.js and the compilation tool chain need to be installed. Instructions for installing Node.js can be found on the `Node.js download page <https://nodejs.org/download/>`_. Once Node.js is installed, installing the tool chain is done via ``npm``:
+
+.. code-block:: bash
+
+    $ cd /path/to/wagtail
+    $ npm install
+
+To compile the assets, run:
+
+.. code-block:: bash
+
+    $ npm run build
+
+This must be done after every change to the source files. To watch the source files for changes and then automatically recompile the assets, run:
+
+.. code-block:: bash
+
+    $ npm start

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,160 @@
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var rename = require('gulp-rename');
+var path = require('path');
+
+
+gulp.task('default', ['build', 'watch']);
+gulp.task('build', ['styles', 'javascript', 'images', 'fonts']);
+
+
+var sourceDirName = 'static_src';
+var destDirName = 'static';
+var renameSrcToDest = function() {
+	return rename(function(filePath) {
+		filePath.dirname = filePath.dirname.replace(
+			'/' + sourceDirName + '/',
+			'/' + destDirName + '/');
+	});
+};
+
+var flatten = function(arrOfArr) {
+	return arrOfArr.reduce(function(flat, more) {
+		return flat.concat(more);
+	}, []);
+};
+
+
+// A Wagtail app that contains static files
+var App = function(dir, options) {
+	this.dir = dir;
+	this.options = options || {};
+	this.appName = this.options.appName || path.basename(dir);
+	this.sourceFiles = path.join('.', this.dir, sourceDirName);
+};
+App.prototype = Object.create(null);
+App.prototype.scssIncludePaths = function() {
+	return [this.sourceFiles];
+};
+App.prototype.scssSources = function() {
+	if (!this.options.scss) return [];
+
+	return this.options.scss.map(function(file) {
+		return path.join(this.sourceFiles, file);
+	}, this);
+};
+
+
+// All the Wagtail apps that contain static files
+var apps = [
+	new App('wagtail/wagtailadmin', {
+		'scss': [
+			'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/userbar_embed.scss',
+		],
+	}),
+	new App('wagtail/wagtaildocs'),
+	new App('wagtail/wagtailembeds'),
+	new App('wagtail/wagtailforms'),
+	new App('wagtail/wagtailimages', {
+		'scss': [
+			'wagtailimages/scss/add-multiple.scss',
+			'wagtailimages/scss/focal-point-chooser.scss',
+		],
+	}),
+	new App('wagtail/wagtailsnippets'),
+	new App('wagtail/wagtailusers', {
+		'scss': [
+			'wagtailusers/scss/groups_edit.scss',
+		],
+	}),
+	new App('wagtail/contrib/wagtailstyleguide', {
+		'scss': [
+			'wagtailstyleguide/scss/styleguide.scss'
+		],
+	}),
+];
+
+
+/*
+ * Watch - Watch files, trigger tasks when they are modified
+ */
+gulp.task('watch', ['build'], function () {
+	apps.forEach(function(app) {
+		gulp.watch(path.join(app.sourceFiles, '*/scss/**'), ['styles:sass']);
+		gulp.watch(path.join(app.sourceFiles, '*/css/**'), ['styles:css']);
+		gulp.watch(path.join(app.sourceFiles, '*/js/**'), ['javascript']);
+		gulp.watch(path.join(app.sourceFiles, '*/images/**'), ['images']);
+		gulp.watch(path.join(app.sourceFiles, '*/fonts/**'), ['fonts']);
+	});
+});
+
+
+/*
+ * Styles
+**/
+gulp.task('styles', ['styles:sass', 'styles:css']);
+
+// SASS - Compile and move sass
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+gulp.task('styles:sass', function () {
+
+	// Wagtail Sass files include each other across applications,
+	// e.g. wagtailimages Sass files will include wagtailadmin/sass/mixins.scss
+	// Thus, each app is used as an includePath.
+	var includePaths = flatten(apps.map(function(app) { return app.scssIncludePaths(); }));
+
+	// Not all files in a directory need to be compiled, so each app defines
+	// its own Sass files that need to be compiled.
+	var sources = flatten(apps.map(function(app) { return app.scssSources(); }));
+
+	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('/static_src/', '/static/')
+				.replace('/scss/', '/css/');
+		}))
+		.on('error', gutil.log);
+});
+
+
+/*
+ * Simple copy tasks - these just copy files from the source to the destination,
+ * with no compilation, minification, or other intelligence
+ *
+**/
+var rename = require('gulp-rename');
+var simpleCopyTask = function(glob) {
+	return function() {
+		var sources = apps.map(function(app) {
+			return path.join(app.sourceFiles, app.appName, glob);
+		});
+
+		return gulp.src(sources, {base: '.'})
+			.pipe(renameSrcToDest())
+			.pipe(gulp.dest('.'))
+			.on('error', gutil.log);
+	};
+};
+gulp.task('styles:css', simpleCopyTask('css/**/*'));
+gulp.task('javascript', simpleCopyTask('js/**/*'));
+gulp.task('images', simpleCopyTask('images/**/*'));
+gulp.task('fonts', simpleCopyTask('fonts/**/*'));

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,9 +1,11 @@
 #!/usr/bin/env python
 
-import sys, os
+import sys
 
-from wagtail.wagtailcore import __version__
+from setuptools.command.sdist import sdist
 
+from wagtail.wagtailcore import __version__
+from wagtail.utils.setup import assets, add_subcommand, check_bdist_egg
 
 try:
     from setuptools import setup, find_packages
@@ -20,17 +22,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",
@@ -83,4 +80,9 @@ setup(
             wagtail=wagtail.bin.wagtail:main
     """,
     zip_safe=False,
+    cmdclass={
+        'sdist': add_subcommand(sdist, [('assets', None)]),
+        'bdist_egg': check_bdist_egg,
+        '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/.gitignore

@@ -0,0 +1 @@
+static/

wagtail/contrib/wagtailstyleguide/static/wagtailstyleguide/scss/styleguide.scss → wagtail/contrib/wagtailstyleguide/static_src/wagtailstyleguide/scss/styleguide.scss

@@ -102,4 +102,4 @@ section{
 
 .timepicker{
     height:150px;
-}
+}

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,52 @@
+from __future__ import absolute_import, print_function, unicode_literals
+
+import os
+import subprocess
+
+from distutils.core import Command
+
+from setuptools.command.bdist_egg import bdist_egg
+
+
+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)
+
+
+class check_bdist_egg(bdist_egg):
+
+    # If this file does not exist, warn the user to compile the assets
+    sentinel_dir = 'wagtail/wagtailadmin/static/'
+
+    def run(self):
+        bdist_egg.run(self)
+        if not os.path.isdir(self.sentinel_dir):
+            print("\n".join([
+                "************************************************************",
+                "The front end assets for Wagtail are missing.",
+                "To generate the assets, please refer to the documentation in",
+                "docs/contributing/css_guidelines.rst",
+                "************************************************************",
+            ]))
+
+
+def add_subcommand(command, extra_sub_commands):
+    # Sadly, as commands are old-style classes, `type()` can not be used to
+    # construct these.
+    class CompileAnd(command):
+        sub_commands = command.sub_commands + extra_sub_commands
+    CompileAnd.__name__ = command.__name__
+    return CompileAnd

wagtail/wagtailadmin/.gitignore

@@ -0,0 +1 @@
+static

wagtail/wagtailadmin/static/wagtailadmin/scss/fonts.scss

@@ -1,83 +0,0 @@
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Light-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Light-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Light-webfont.svg#opensans_italic_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Light-webfont.woff") format("woff");
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Regular-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Regular-webfont.svg#opensans_regular_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Regular-webfont.woff") format("woff");
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Semibold-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Semibold-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Semibold-webfont.svg#opensans_semibold_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Semibold-webfont.woff") format("woff");
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Bold-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Bold-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Bold-webfont.svg#opensans_bold_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Bold-webfont.woff") format("woff");
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Bitter";
-    src: url("#{$css-root}fonts/Bitter-Regular.eot");
-    src: url("#{$css-root}fonts/Bitter-Regular.eot?#iefix") format("embedded-opentype"),
-       url("#{$css-root}fonts/Bitter-Regular.ttf") format("truetype"),
-       url("#{$css-root}fonts/Bitter-Regular.svg#Bitter-Regular") format("svg"),
-       url("#{$css-root}fonts/Bitter-Regular.woff") format("woff");
-    font-weight:400;
-    font-style:normal;
-}
-
-@font-face {
-    font-family: "Bitter";
-    src: url("#{$css-root}fonts/Bitter-Bold.eot");
-    src: url("#{$css-root}fonts/Bitter-Bold.eot?#iefix") format("embedded-opentype"),
-       url("#{$css-root}fonts/Bitter-Bold.ttf") format("truetype"),
-       url("#{$css-root}fonts/Bitter-Bold.svg#Bitter-Bold") format("svg"),
-       url("#{$css-root}fonts/Bitter-Bold.woff") format("woff");
-    font-weight:700;
-    font-style:normal;
-}
-
-@font-face {
-    font-family: "wagtail";
-    src:url("#{$css-root}fonts/wagtail.eot");
-    src:url("#{$css-root}fonts/wagtail.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/wagtail.ttf") format("truetype"),
-        url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg"),
-        url("#{$css-root}fonts/wagtail.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
-}
-/* fix to make chrome on windows use svg, which renders better */
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: "wagtail";
-        src: url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg");
-    }
-}

wagtail/wagtailadmin/static/wagtailadmin/js/userbar_embed.js → wagtail/wagtailadmin/static_src/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));