Set of add-ons for django-compressor that simply enables SCSS and ES6 in your Django project.

pip install django-compressor-toolkit

// settings.py INSTALLED_APPS += ('compressor_toolkit',)

SCSS is a great language that saves your time and brings joy to CSS development.

The add-on does next: SCSS → ( node-sass + Autoprefixer ) → CSS.

It also enables Django static imports in SCSS, see the example below.

// settings.py COMPRESS_PRECOMPILERS = ( ('text/x-scss', 'compressor_toolkit.precompilers.SCSSCompiler'), )

{# Django template #} {% load compress %} {% compress css %} <link rel="stylesheet" type="text/x-scss" href="{% static 'app/layout.scss' %}"> {% endcompress %}

/* app/static/app/layout.scss */ @import "base/variables"; .title { font: bold $title-size Arial, sans-serif; }

/* base/static/base/variables.scss */ $title-size: 30px;

You need node-sass, postcss-cli and autoprefixer to be installed. Quick install:

npm install node-sass postcss-cli autoprefixer

Or you can install them globally (you need to set COMPRESS_LOCAL_NPM_INSTALL = False):

npm install -g node-sass postcss-cli autoprefixer

ES6 is a new standard for JavaScript that brings great new features.

The standard was approved in July 2015 and not all modern browsers fully support it for now. But there is a way to use it: transpilers that compile ES6 into good old ES5 syntax.

The add-on does next: ES6 → ( Browserify + Babelify ) → ES5.

It also enables Django static imports in ES6, see the example below.

// settings.py COMPRESS_PRECOMPILERS = ( ('module', 'compressor_toolkit.precompilers.ES6Compiler'), )

{# Django template #} {% load compress %} {% compress js %} <script type="module" src="{% static 'app/scripts.js' %}"></script> {% endcompress %}

// app/static/app/scripts.js import Framework from 'base/framework'; new Framework; new Framework('1.0.1');

// base/static/base/framework.js export let version = '1.0'; export default class { constructor(customVersion) { console.log(`Framework v${customVersion || version} initialized`); } }

You need browserify, babelify and babel-preset-es2015 to be installed. Quick install:

npm install browserify babelify babel-preset-es2015

Or you can install them globally (you need to set COMPRESS_LOCAL_NPM_INSTALL = False):

npm install -g browserify babelify babel-preset-es2015

Whether you install required NPM packages locally.

Default: True.

Path to node_modules where babelify, autoprefixer, etc, libs are installed.

Default: ./node_modules if COMPRESS_LOCAL_NPM_INSTALL else /usr/lib/node_modules.

node-sass executable. It may be just the executable name (if it's on PATH) or the executable path.

Default: ./node_modules/.bin/node-sass if COMPRESS_LOCAL_NPM_INSTALL else node-sass.

postcss executable. It may be just the executable name (if it's on PATH) or the executable path.

Default: ./node_modules/.bin/postcss if COMPRESS_LOCAL_NPM_INSTALL else postcss.

Browser versions config for Autoprefixer.

Default: ie >= 9, > 5%.

Command that will be executed to transform SCSS into CSS code.

Default:

'{node_sass_bin} --output-style expanded {paths} "{infile}" "{outfile}" && ' '{postcss_bin} --use "{node_modules}/autoprefixer" --autoprefixer.browsers "{autoprefixer_browsers}" -r "{outfile}"'

Placeholders (i.e. they can be re-used in custom COMPRESS_SCSS_COMPILER_CMD string):

• {node_sass_bin} - value from COMPRESS_NODE_SASS_BIN
• {postcss_bin} - value from COMPRESS_POSTCSS_BIN
• {infile} - input file path
• {outfile} - output file path
• {paths} - specially for node-sass, include all Django app static folders: --include-path=/path/to/app-1/static/ --include-path=/path/to/app-2/static/ ...
• {node_modules} - see COMPRESS_NODE_MODULES setting
• {autoprefixer_browsers} - value from COMPRESS_AUTOPREFIXER_BROWSERS

browserify executable. It may be just the executable name (if it's on PATH) or the executable path.

Default: ./node_modules/.bin/browserify if COMPRESS_LOCAL_NPM_INSTALL else browserify.

Command that will be executed to transform ES6 into ES5 code.

Default:

'export NODE_PATH="{paths}" && ' '{browserify_bin} "{infile}" -o "{outfile}" ' '-t [ "{node_modules}/babelify" --presets="{node_modules}/babel-preset-es2015" ]'

Placeholders:

• {browserify_bin} - value from COMPRESS_BROWSERIFY_BIN
• {infile} - input file path
• {outfile} - output file path
• {paths} - specially for browserify, include all Django app static folders: /path/to/app-1/static/:/path/to/app-2/static/:... (like PATH variable)
• {node_modules} - see COMPRESS_NODE_MODULES setting

git clone https://github.com/kottenator/django-compressor-toolkit.git cd django-compressor-toolkit pip install -e '.[test]' npm install py.test