jspm

JSPM integration

jspm is a package manager for the SystemJS universal module loader. This folder contains an example of CSSX transpilation using jspm build process.

How to make jspm compiling CSSX properly

The CSSX transpiler is distributed as a bundle produced by browserify. As such the resolving of the require calls inside is handled by browserify. However, when we import cssx-transpiler.js as a dependency SystemJS tries dealing with the requires in the bundle and we get an ENOENT error. I didn't find any sensible solution of the issue so I decided to copy cssx-transpiler.js in the project and don't declare it as a jspm (npm) dependency.

The input files are:

// lib/index.js
import styles from './styles.js!cssx';

function init() {
  document.querySelector('body').innerHTML = '<pre>' + JSON.stringify(styles, null, 2) + '<pre>';
}

init();

// lib/styles.js
module.exports = <style>
  body {
    font-size: 18px;
  }
</style>;

which after running jspm bundle lib/index leads to:

System.registerDynamic("lib/styles.js!cssx.js", [], true, function($__require, exports, module) {
  ;
  var define,
      global = this,
      GLOBAL = this;
  module.exports = (function() {
    var _1 = {},
        _2 = {};
    _2['font-size'] = '18px';
    _1['body'] = _2;
    return _1;
  }.apply(this));
  return module.exports;
});

System.register('lib/index.js', ['lib/styles.js!cssx.js'], function (_export) {
  'use strict';

  var styles;

  function init() {
    document.querySelector('body').innerHTML = '<pre>' + JSON.stringify(styles, null, 2) + '<pre>';
  }

  return {
    setters: [function (_libStylesJsCssxJs) {
      styles = _libStylesJsCssxJs['default'];
    }],
    execute: function () {
      init();
    }
  };
});
//# sourceMappingURL=build.js.map

So, every file that contains CSSX code should be processed by a plugin. For example:

import styles from './styles.js!cssx';

(Notice the !cssx at the end of the import)

The plugin is really simple. It's a file in the main project directory

// cssx.js
var cssxTranspiler = require('./vendor/cssx-transpiler');

exports.translate = function (load) {
  return cssxTranspiler(load.source);
};

and vendor/cssx-transpiler is a direct copy of cssx-transpiler.js file.