systemjs-plugin-css - npm Package Compare versions

Comparing version 0.1.23 to 0.1.24

css.js

@@ -18,8 +18,8 @@ if (typeof window !== 'undefined') {
 
-  var cssIsReloadable = function cssIsReloadable(links){
+  var cssIsReloadable = function cssIsReloadable(links) {
     // Css loaded on the page initially should be skipped by the first
     // systemjs load, and marked for reload
     var reloadable = true;
-    forEach(links, function(link){
-      if(!link.hasAttribute('data-systemjs-css')){
+    forEach(links, function(link) {
+      if(!link.hasAttribute('data-systemjs-css')) {
         reloadable = false;
@@ -87,3 +87,3 @@ link.setAttribute('data-systemjs-css', '');
     // dont reload styles loaded in the head
-    var links = findExistingCSS(load.address)
+    var links = findExistingCSS(load.address);
     if(!cssIsReloadable(links))
@@ -95,35 +95,49 @@ return '';
 else {
+  var builderPromise;
   function getBuilder(loader) {
-    return loader['import']('./css-builder' + (System.version ? '.js' : ''), { name: module.id });
+    if (builderPromise)
+      return builderPromise;
+    
+    return builderPromise = System['import']('./css-plugin-base.js', module.id)
+    .then(function(CSSPluginBase) {
+      return new CSSPluginBase(function compile(source, address) {
+        return {
+          css: source,
+          map: null,
+          moduleSource: null,
+          moduleFormat: null
+        };
+      });
+    });
   }
 
   exports.cssPlugin = true;
-  exports.fetch = function(load) {
-    // individually mark loads as not built for buildCSS false
-    if (this.buildCSS === false)
-      load.metadata.build = false;
-    // setting format = 'defined' means we're managing our own output
-    load.metadata.format = 'defined';
-    // don't load the CSS at all until build time
-    return Promise.resolve('');
+  exports.translate = function(load, opts) {
+    var loader = this;
+    return getBuilder(loader).then(function(builder) {
+      return builder.translate.call(loader, load, opts);
+    });
   };
-  exports.instantiate = function() {};
-  exports.bundle = function(loads, opts) {
+  exports.instantiate = function(load, opts) {
     var loader = this;
-    if (loader.buildCSS === false)
-      return '';
     return getBuilder(loader).then(function(builder) {
-      return builder.bundle.call(loader, loads, opts);
+      return builder.instantiate.call(loader, load, opts);
     });
   };
-  exports.listAssets = function(loads, compileOpts, outputOpts) {
+  exports.bundle = function(loads, compileOpts, outputOpts) {
     var loader = this;
     return getBuilder(loader).then(function(builder) {
-      return builder.listAssets.call(loader, loads, compileOpts, outputOpts);
+      return builder.bundle.call(loader, loads, compileOpts, outputOpts);
     });
   };
+  exports.listAssets = function(loads, opts) {
+    var loader = this;
+    return getBuilder(loader).then(function(builder) {
+      return builder.listAssets.call(loader, loads, opts);
+    });
+  };
 }
 
 // Because IE8?
-function filter(arrayLike, func){
+function filter(arrayLike, func) {
   var arr = []
@@ -130,0 +144,0 @@ forEach(arrayLike, function(item){

package.json

 {
   "name": "systemjs-plugin-css",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "main": "css",
@@ -5,0 +5,0 @@ "registry": "jspm",

README.md

@@ -8,2 +8,3 @@ css
 ---
+
 For installing with JSPM run:
@@ -15,12 +16,44 @@
 
-Basic Use
+For use with SystemJS natively, use:
+
+```
+npm install systemjs-plugin-css
+```
+
+Then add the configuration:
+
+```javascript
+SystemJS.config({
+  map: {
+    css: 'node_modules/systemjs-plugin-css/css.js'
+  }
+});
+```
+
+Setup
 ---
 
+To configure css files to load with the plugin set:
+
 ```javascript
-import './style.css!'
+SystemJS.config({
+  meta: {
+    '*.css': { loader: css }
+  }
+});
 ```
 
-Currently CSS bundling is only supported in jspm, please post an issue if you would like support outside of jspm.
+Or via package configuration as well:
 
-If not using jspm, set `System.buildCSS = false` to disable the builds.
+```javascript
+SystemJS.config({
+  packages: {
+    'src/': {
+      meta: {
+        '*.css': { loader: 'css' }
+      }
+    }
+  }
+});
+```
 
@@ -34,2 +67,8 @@ Modular CSS Concepts
 
+### CSS Transpilation
+
+This plugin also acts as a base class that can be extended to author other CSS plugins such as LESS, modular CSS etc.
+
+For example, see the [plugin-less project](http://github.com/systemjs/plugin-less).
+
 Builder Support
@@ -44,3 +83,3 @@ ---
 * `buildCSS`: true / false whether to bundle CSS files or leave as separate requests. Defaults to true.
-* `rootURL`: Optional, address that when set normalizes all CSS URLs to be absolute relative to this path.
+* `rootURL`: Optional, local path that when set normalizes all CSS URLs to be absolute to this path.
 
@@ -57,5 +96,4 @@ ### Build Example
     builder.config({
-      baseURL: 'file:' + process.cwd(),
       separateCSS: true,
-      rootURL: 'file:' + process.cwd(),
+      rootURL: './public'
 
@@ -72,8 +110,4 @@ // to disable css optimizations
 
-### Source Maps
-
-CSS source maps are supported when using the `separateCSS` output option.
-
 ### License
 
 MIT

test/css.builder.spec.js

@@ -11,6 +11,15 @@ var fs = require('fs')
 			return builder.bundle('test/data/test.css!', {minify: false}).then((results) =>{
-				return expect(results.source.endsWith("(\"body{background-color:red}\");")).to.equal(true)
+				return expect(results.source).to.contain("body{background-color:red;background-image:url(/data/x.png)}");
 			})
-		})
+		});
+
+		it('Should compile css', function(){
+			// Run the happy path
+			var builder = new Builder();
+			builder.config(System)
+			return builder.compile('test/data/test.css!', {minify: false}).then((results) =>{
+				return expect(results.source).to.contain("body{background-color:red;background-image:url(/data/x.png)}");
+			})
+		});
 	})
 })

test/systemjs-config.js

 module.exports = function(System){
 	System.config({
 		transpiler: false,
+		rootURL: './test',
 		paths: {
@@ -5,0 +6,0 @@ "npm:*": "node_modules/*"

No alert changes

Improved metrics

Total package byte prevSize

318745

0.94%

Number of package files

16

6.67%

Lines of code

8294

1.11%

Number of lines in readme file

108

45.95%

No dependency changes