Support for @import directive

dougludlow · Sep 1, 2015 · 373d567 · 373d567
1 parent 4f560f1
commit 373d567
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,7 @@
-# plugin-sass [![Build Status](https://travis-ci.org/screendriver/plugin-sass.svg?branch=master)](https://travis-ci.org/screendriver/plugin-sass)
+# plugin-sass
+
+[![Build Status](https://travis-ci.org/screendriver/plugin-sass.svg?branch=master)](https://travis-ci.org/screendriver/plugin-sass)
+[![Dependency Status](https://david-dm.org/screendriver/plugin-sass.svg)](https://david-dm.org/screendriver/plugin-sass)
 
 [SystemJS](https://github.com/systemjs/systemjs)
 [SASS](http://sass-lang.com) loader plugin. Can easily be installed with

diff --git a/config.js b/config.js
@@ -20,6 +20,7 @@ System.config({
  "fetch": "npm:[email protected]",
  "sass.js": "npm:[email protected]",
  "scss": "src/sass.js",
+ "url": "github:jspm/[email protected]",
  "github:jspm/[email protected]": {
  "assert": "npm:[email protected]"
  },
@@ -44,6 +45,9 @@ System.config({
  "github:jspm/[email protected]": {
  "stream-browserify": "npm:[email protected]"
  },
+ "github:jspm/[email protected]": {
+ "url": "npm:[email protected]"
+ },
  "github:jspm/[email protected]": {
  "util": "npm:[email protected]"
  },
@@ -201,6 +205,9 @@ System.config({
  "parse-asn1": "npm:[email protected]",
  "randombytes": "npm:[email protected]"
  },
+ "npm:[email protected]": {
+ "process": "github:jspm/[email protected]"
+ },
  "npm:[email protected]": {
  "buffer": "github:jspm/[email protected]",
  "crypto": "github:jspm/[email protected]",
@@ -241,6 +248,12 @@ System.config({
  "npm:[email protected]": {
  "buffer": "github:jspm/[email protected]"
  },
+ "npm:[email protected]": {
+ "assert": "github:jspm/[email protected]",
+ "punycode": "npm:[email protected]",
+ "querystring": "npm:[email protected]",
+ "util": "github:jspm/[email protected]"
+ },
  "npm:[email protected]": {
  "inherits": "npm:[email protected]",
  "process": "github:jspm/[email protected]"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "plugin-sass",
- "version": "0.0.1",
+ "version": "0.0.2",
  "description": "SystemJS SASS loader plugin",
  "registry": "jspm",
  "main": "./src/sass.js",
@@ -36,7 +36,8 @@
  "directories": {},
  "dependencies": {
  "fetch": "npm:whatwg-fetch@^0.9.0",
- "sass.js": "npm:sass.js@^0.9.2"
+ "sass.js": "npm:sass.js@^0.9.2",
+ "url": "github:jspm/nodelibs-url@^0.1.0"
  },
  "devDependencies": {
  "babel": "npm:babel-core@^5.8.22",

diff --git a/src/sass.js b/src/sass.js
@@ -1,6 +1,17 @@
 import 'fetch';
+import url from 'url';
 import sass from 'sass.js';
 
+let urlBase;
+
+// intercept file loading requests (@import directive) from libsass
+sass.importer((request, done) => {
+ const importUrl = url.resolve(urlBase, `${request.current}.scss`);
+ fetch(importUrl)
+ .then(response => response.text())
+ .then(content => done({ content }));
+});
+
 const compile = scss => {
  return new Promise((resolve, reject) => {
  sass.compile(scss, result => {
@@ -11,14 +22,16 @@ const compile = scss => {
  document.getElementsByTagName('head')[0].appendChild(style);
  resolve('');
  } else {
- reject();
+ reject(result.formatted);
  }
  });
  });
 };
 
 const scssFetch = load => {
- return fetch(load.address)
+ urlBase = load.address;
+ // fetch initial scss file
+ return fetch(urlBase)
  .then(response => response.text())
  .then(compile);
 };

diff --git a/test/test.html b/test/test.html
@@ -15,7 +15,7 @@
 </head>
 
 <body>
- <h1>Background should become green</h1>
+ <h1>I should become blue and background should become green</h1>
  <h2>Loading...</h2>
 </body>
 

diff --git a/test/test.scss b/test/test.scss
@@ -1,5 +1,7 @@
-$color: green;
+@import 'headings';
+
+$bodyColor: green;
 
 body {
- background-color: $color;
+ background-color: $bodyColor;
 }