From 6fb7118342726067e48c42be1dfc68313c230bd9 Mon Sep 17 00:00:00 2001 From: Florian Mounier Date: Thu, 5 Nov 2015 11:44:36 +0100 Subject: [PATCH] Support sass indented syntax --- README.md | 19 +++++++++++-------- sass-builder.js | 3 ++- sass.js | 3 ++- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index b6bc0e6..4c7507c 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ A [Sass](http://sass-lang.com/) loader plugin for [SystemJS](https://github.com/systemjs/systemjs), based on [sass.js](https://github.com/medialize/sass.js). -This plugin allows importing SCSS files from SystemJS and have them +This plugin allows importing Sass files from SystemJS and have them dynamically compiled to CSS and loaded into the page from within the -browser. Alternatively, the SCSS files can also be converted to CSS +browser. Alternatively, the sass/scss files can also be converted to CSS statically by creating bundles with [JSPM](https://github.com/jspm/jspm-cli). @@ -17,23 +17,26 @@ mechanism yet and has some blocking bugs (see Issues). ## Installation ``` -$ jspm install scss=github:theefer/plugin-sass +$ jspm install sass=github:theefer/plugin-sass ``` ## Usage -Add a dependency to a `.scss` file from within your JavaScript files, -followed by a `!` to trigger the use of this plugin: +Add a dependency to a `.sass` file or a `.scss` file from within your +JavaScript files, followed by a `!` to trigger the use of this plugin: ``` js // ES6 -import 'styles.scss!'; +import 'styles.sass!'; +import 'styles.scss!sass'; // For scss syntax // or AMD -define(['styles.scss!'], function(){ ... }); +define(['styles.sass!'], function(){ ... }); +define(['styles.scss!sass'], function(){ ... }); // For scss syntax // or CommonJS -require('styles.scss!'); +require('styles.sass!'); +require('styles.scss!sass'); // For scss syntax ``` The corresponding compiled CSS should be injected into the `` of diff --git a/sass-builder.js b/sass-builder.js index 990d1a3..df9e22d 100644 --- a/sass-builder.js +++ b/sass-builder.js @@ -46,7 +46,8 @@ var cssInject = "(function(c){var d=document,a='appendChild',i='styleSheet',s=d. function compileSass(source, url) { return new Promise(function(resolve, reject) { Sass.compile(source, { - inputPath: url.replace('file://', '') + inputPath: url.replace('file://', ''), + indentedSyntax: url.split('.').slice(-1)[0] == 'sass' }, function(result) { var successful = result.status === 0; if (successful) { diff --git a/sass.js b/sass.js index 66b1a79..a328a07 100644 --- a/sass.js +++ b/sass.js @@ -122,7 +122,8 @@ function loadStyle(url) { return fetchText(url).then(function(data) { return new Promise(function(resolve, reject) { sass.compile(data, { - inputPath: url + inputPath: url, + indentedSyntax: url.split('.').slice(-1)[0] == 'sass' }, function(result) { var successful = result.status === 0; if (successful) {