systemjs/plugin-css

CSS loader plugin

css

CSS loading plugin

Installation

For installing with JSPM run:

jspm install css

For use with SystemJS natively, use:

npm install systemjs-plugin-css

Then add the configuration:

SystemJS.config({
  map: {
    css: 'node_modules/systemjs-plugin-css/css.js'
  }
});

Setup

To configure css files to load with the plugin set:

SystemJS.config({
  meta: {
    '*.css': { loader: 'css' }
  }
});

Or via package configuration as well:

SystemJS.config({
  packages: {
    'src/': {
      meta: {
        '*.css': { loader: 'css' }
      }
    }
  }
});

Modular CSS Concepts

CSS in the dependency tree implies a CSS modularisation where styles can be scoped directly to the render code that they are bundled with.

Just like JS requires, the order of CSS injection can't be guaranteed. The idea here is that whenever there are style overrides, they should be based on using a more specific selector with an extra id or class at the base, and not assuming a CSS load order. Reset and global styles are a repeated dependency of all modular styles that build on top of them.

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.

Builder Support

When building with SystemJS Builder, by default CSS will be inlined into the JS bundle and injected on execution.

To alter this behaviour use the SystemJS configuration options:

• separateCSS: true / false whether to build a CSS file at the same output name as the bundle itself to be included with a link tag. Defaults to false.
• buildCSS: true / false whether to bundle CSS files or leave as separate requests. Defaults to true.
• rootURL: Optional, local path that when set normalizes all CSS URLs to be absolute to this path.

Build Example

  var builder = require('systemjs-builder');

  // `builder.loadConfig` will load config from a file
  builder.loadConfig('./cfg.js')
  .then(function() {
    // additional config can also be set through `builder.config`
    builder.config({
      separateCSS: true,
      rootURL: './public'

      // to disable css optimizations
      // cssOptimize: false
    });

    return builder.build('myModule', 'bundle.js');
  });

Will generate bundle.js containing the JS files and bundle.css containing the compressed CSS for the bundle.

License

MIT

plugin-css's Issues

Support builds for non-jspm users

Using System._nodeRequire('clean-css') for example as an npm dependency.

Would go with publishing to npm.

throw exception when minifying font-awesome V4.3.0 css

Using bundle-sfx on an app that includes font-awesome.

underlying issue is probably related to
clean-css/clean-css#524.

while investigating this (I haven't read the code closely) I thought it might be useful if the css plugin checked if the file referenced was already minified. This would allow imports statements like:

import 'font-awesome/css/font-awesome.min.css!';

Aidan

Support import 'packagename' automatic resolution.

Note: I am using Aurelia and I am unclear where the line between what Aurelia is doing and what JSPM is doing and what plugin-css is doing, so I apologize if this isn't a plugin-css issue.

In my application root, I can do jspm install font-awesome.
In my JavaScript files, I can do import '[email protected]/css/font-awesome.css!'.
Aurelia or JSPM does some magic and when that JavaScript is run the CSS is applied.

I would very much prefer it if I could instead do import 'font-awesome!css', just like I can do with import 'bootstrap'. In the case of bootstrap, I am actually pulling in the bootstrap JavaScript and that JavaScript pulls in the bootstrap css. However, in both cases JSPM/SystemJS is doing the resolution of bootstrap to jspm_packages/github/twbs/[email protected]. Unfortunately, the resolution doesn't happen automatically for CSS files so I am forced to put not only the path, but also the version number of the CSS package.

It is the addition of the version number that is the biggest pain point because it means I can't easily update my CSS dependencies via JSPM alone. I have to also update the version number in every file in my project that uses that CSS file as well.

If this is a matter of the css files not being packaged in a well defined location, at the least it would be nice if the css plugin did a best-guess. In many cases (e.g., bootstrap, font-awesome), the css file has a name matching the package name and sitting inside of a css folder. Perhaps it could at least look for any of the following when resolving the dependency:

• <package-name>.css
• <package-name>.min.css
• css/<package-name>.css
• css/<package-name>.min.css

I believe this would catch many of the common cases and allow me to create my own CSS npm/github packages in such a way as to allow the plugin to resolve them.

Bundle throws clean-css "Broken @import declaration" errors

We have a standard bundle-sfx task running to get a production bundle out of our JSPM/SystemJS driven project which works great on Macs however seems to have started failing on Windows computers now.

Trying to track this down seems to point at the origin of the error coming from the clean-css module.

The breaking import statement in out app.js file is the standard: import 'styles.css!'; (also tried import './styles.css!'; to no avail)

The file is available at the desired/expected location (process runs fine on Mac) but the following error occurs on Windows computers/build servers:

err  Error: CSS Plugin:
     Broken @import declaration of "styles.css"
     Broken @import declaration of "jspm_packages\github\angular\[email protected]\angular-material.css"
         at Loader.bundle (evalmachine.<anonymous>:48:11)
         at evalmachine.<anonymous>:83:22
         at tryCatchReject (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-load
er.src.js:1183:30)
         at runContinuation1 (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-lo
ader.src.js:1142:4)
         at Fulfilled.when (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-load
er.src.js:930:4)
         at Pending.run (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.
src.js:821:13)
         at Scheduler._drain (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-lo
ader.src.js:97:19)
         at Scheduler.drain (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loa
der.src.js:62:9)
         at process._tickCallback (node.js:419:13)
[09:56:14] 'bundle-shell-build' errored after 7.47 s
[09:56:14] Error in plugin 'gulp-shell'
Message:
    Command failed:
Details:
    killed: false
    code: 1
    signal: null
    stdout:      Building the single-file sfx bundle for app...

err  Error: CSS Plugin:
     Broken @import declaration of "styles.css"
     Broken @import declaration of "jspm_packages\github\angular\[email protected]\angular-material.css"
         at Loader.bundle (evalmachine.<anonymous>:48:11)
         at evalmachine.<anonymous>:83:22
         at tryCatchReject (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-load
er.src.js:1183:30)
         at runContinuation1 (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-lo
ader.src.js:1142:4)
         at Fulfilled.when (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-load
er.src.js:930:4)
         at Pending.run (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.
src.js:821:13)
         at Scheduler._drain (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-lo
ader.src.js:97:19)
         at Scheduler.drain (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loa
der.src.js:62:9)
         at process._tickCallback (node.js:419:13)

    stderr:
[09:56:14] 'bundle' errored after 32 s
[09:56:14] Error: [object Object]
    at formatError (C:\Program Files (x86)\nodejs\node_modules\gulp\bin\gulp.js:169:10)
    at Gulp.<anonymous> (C:\Program Files (x86)\nodejs\node_modules\gulp\bin\gulp.js:195:15)
    at Gulp.emit (events.js:117:20)
    at Gulp.Orchestrator._emitTaskDone (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\gulp\node_modules\orchestrator\index.js:264:8)
    at C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\gulp\node_modules\orchestrator\index.js:275:23
    at finish (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:21:8)
    at cb (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:29:3)
    at finish (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\run-sequence\index.js:53:5)
    at Gulp.onError (C:\ProjectsGit\Investigator-Blackbird-UI\node_modules\run-sequence\index.js:60:4)
    at Gulp.emit (events.js:117:20)

The project's package.json is below:

{
  "name": "Blackbird",
  "version": "0.4.0",
  "repository": {
    "url": "(private)"
  },
  "description": "",
  "main": "gulpfile.js",
  "directories": {
    "test": "test",
    "baseURL": "src",
    "lib": "src",
    "packages": "src/jspm_packages"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "jspm install",
    "start": "gulp watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^2.0.0",
    "browser-sync": "^2.2.1",
    "connect-modrewrite": "^0.7.11",
    "del": "^1.1.1",
    "eslint": "^0.16.2",
    "esprima": "^2.1.0",
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.2.0",
    "gulp-bump": "^0.3.0",
    "gulp-cached": "^1.0.2",
    "gulp-debug": "^2.0.1",
    "gulp-eslint": "^0.7.0",
    "gulp-file": "^0.2.0",
    "gulp-filter": "^2.0.2",
    "gulp-ftp": "^1.0.3",
    "gulp-inject": "^1.2.0",
    "gulp-load-plugins": "^0.8.1",
    "gulp-print": "^1.1.0",
    "gulp-protractor": "^1.0.0",
    "gulp-replace": "^0.5.3",
    "gulp-sass": "^1.3.3",
    "gulp-shell": "^0.3.0",
    "gulp-sourcemaps": "^1.5.0",
    "gulp-traceur": "^0.17.0",
    "gulp-util": "^3.0.4",
    "jasmine-screenshot-reporter": "0.0.6",
    "jasmine-spec-reporter": "^2.2.3",
    "jspm": "^0.15.6",
    "karma": "^0.12.31",
    "karma-chrome-launcher": "^0.1.7",
    "karma-clear-screen-reporter": "0.0.1",
    "karma-htmlfile-reporter": "^0.1.2",
    "karma-jasmine": "^0.3.5",
    "karma-jspm": "^1.1.4",
    "karma-logcapture-reporter": "0.0.1",
    "karma-nyan-reporter": "0.0.60",
    "karma-traceur-preprocessor": "^0.4.0",
    "protractor": "^2.0.0",
    "protractor-html-screenshot-reporter": "0.0.19",
    "protractor-jasmine2-screenshot-reporter": "^0.1.5",
    "rtts-assert": "angular/assert#dist",
    "run-sequence": "^1.0.2",
    "systemjs-builder": "^0.9.1",
    "through2": "^0.6.3",
    "traceur": "0.0.85",
    "yargs": "^3.7.0"
  },
  "jspm": {
    "directories": {
      "baseURL": "src",
      "lib": "src",
      "test": "test"
    },
    "configFile": "src/jspm.config.js",
    "dependencies": {
      "angular": "github:angular/bower-angular@^1.3.15",
      "angular-i18n": "github:angular/bower-angular-i18n@^1.4.0-rc",
      "angular-material": "github:angular/bower-material@^0.9.8",
      "angular-messages": "github:angular/bower-angular-messages@^1.4.0",
      "angular-mocks": "github:angular/bower-angular-mocks@^1.4.0",
      "angular-recursion": "github:marklagendijk/angular-recursion@^1.0.5",
      "angular-touch": "github:angular/bower-angular-touch@^1.4.0",
      "angular-ui-router": "github:angular-ui/ui-router@^0.2.13",
      "angular-ui-utils": "github:angular-ui/ui-utils@^0.2.3",
      "auth0/angular-jwt": "github:auth0/angular-jwt@^0.0.6",
      "auth0/angular-storage": "github:auth0/angular-storage@^0.0.9",
      "chenzhenxi/md-date-time": "github:chenzhenxi/md-date-time@^0.0.18",
      "chenzhenxi/moment-timezone": "github:chenzhenxi/moment-timezone@^0.3.3",
      "css": "github:systemjs/plugin-css@^0.1.6",
      "daviferreira/medium-editor": "github:yabwe/medium-editor@^4.12.1",
      "grevory/angular-local-storage": "github:grevory/angular-local-storage@^0.1.5",
      "lodash": "npm:lodash@^3.3.1",
      "moment": "github:moment/moment@^2.9.0",
      "text": "github:systemjs/plugin-text@^0.0.2",
      "through2": "npm:through2@^1.1.1"
    },
    "devDependencies": {
      "traceur": "github:jmcriffey/[email protected]",
      "traceur-runtime": "github:jmcriffey/[email protected]"
    }
  },
  "dependencies": {
    "gulp-rename": "^1.2.2"
  }
}

bundling css does not respect order

if i have app.js which includes import ',/wap.css!`` and home.jswhich includesimport ',/home.css!``

the bundled css file puts home.css content above wap.css

what i did is
jspm bundle app + main bundle.js --inject

i thought bundling respect order, this causes styling nightmare, as css rules priority is important

thanks in advanced.

Missing dependencies

As of 0.1.13 (also on master) the dependencies are missing from package.json, so running jspm install followed by a bundle after doing a clean of my JSPM is giving me a [Error: Install Clean CSS viajspm install npm:clean-cssfor CSS build support. Set System.buildCSS = false to skip CSS builds.] error.

Promise never rejected on missing files

The following call to load a file that does not exist always results in the System.import Promise to be fulfilled. But since something bad happened it should be rejected!

System.import('./styles/does-not-exist.css!').then(
  function(){console.log('ok');},    // onFulfilled
  function(){console.log('oh no');}  // onRejected
);
// => 'ok'

If the promise would be rejected, I could try something else or notify the user or whatever. But as it is now I do not even know that it failed at all.

Need option to avoid minification

Currently, even if the minify flag is false in jspm.bundleSFX(...), the CSS gets minified.
It would be better to have minfication optional or inferred based on bundling options.

Bug in css minification process

While creating bundle with JSPM with options "buildCSS": true, it seems that css plugin cuts out too many characters which leads to broken styles.
For example:

#todo-list li .toggle:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}

is minified into this:

#todo-list li .toggle:after{content:url(data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg width=40 height=40 viewBox=-10 -18 100 135><circle cx=50 cy=50 r=50 fill=none stroke=#ededed stroke-width=3/></svg>)}

Can't use `css` as folder name.

After css plugin installed by running jspm install css, we will have a new item added in config.js:

"css": "github:systemjs/[email protected]",

According to SystemJS Map Configuration, css is a module name, github:systemjs/[email protected] is a location.

Then here comes the problem, I had a app.css file under a folder named css beside index.html, the tree described as below:

+ index.html
+ css
  + app.css

In index.html file, I would like to import the app.css file:

System.import('css/app.css!css');

Refresh the index.html file in web browser, I would get a http request for http://localhost:3001/jspm_packages/github/systemjs/[email protected]/app.css. Because SystemJS took the css in import as the module name we defined in map in config.js file.

Now I need workarounds.

1. Rename the css folder name to mycss or whatever else, just make sure it won't be conflicted with any keys defined in map. Now I can import the app.css file in index.html:

   System.import('mycss/app.css!css');
   

   or

   System.import('./mycss/app.css!css');
   

   Right, the relative path works too.

2. Define a new paths in config.js file.

   System.paths["mycss/*"] = "css/*.css";
   

   Then we can import the app.css file in index.html:

   System.import('mycss/app!css');
   

3. Rename the css key to other one in map.

   For example:

   "style": "github:systemjs/[email protected]",
   

   Then we can import the app.css file in index.html:

   System.import('css/app.css!style');
   

All these workarounds work, but, it's ugly, and it's weird that we can't name a folder as css.

Ensure in-script CSS bundling blocks on requires

Would be good to write in this behaviour somehow.

border short-hand breaks when using rgba(…) color

This:

.viewport .download a {
    border: rgba(255, 255, 255, .6) solid 1px;
    border-radius: 9999px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    padding: 10px 20px;
    text-decoration: none;
}

Gets turned into this:

.viewport .download a{border:rgba(255,255,255,.6) solid;border-radius:9999px;color:#fff;display:inline-block;font-size:18px;padding:10px 20px;text-decoration:none}

Note how the 1px was dropped from the border short-hand. This causes the border to have the wrong width.

uglify-js parsing error when run on bundle that includes angular-material.css

just using angular-material.css and piping through gulp-uglify (leaving out own app specific CSS, which probably is better for error reproduction):

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error
    at new JS_Parse_Error (/home/me/foo/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:189:18)

and if, from the bundle .js file, I remove

System.register('github:angular/[email protected]/angular-material.css!github:systemjs/[email protected]', [], false, function() {});
(function(c){var d=document,a='appendChild',i='styleSheet',s=d.createElement('style');s.type='text/css';d.getElementsByTagName('head')[0][a](s);s[i]?s[i].cssText=c:s[a](d.createTextNode(c));})
('/*!\n * Angular Material Design\n * https://github.com/angular/material\n * @license MIT\n * v0.7.1\n */*,:after,:before{box-sizing:border-box}:focus{outline:0}     .............. and so on
...')

... uglifying works again.

CSS "load" order inconsistency between on-the-fly/dev mode and (sfx)bundle mode.

using the non-bundling, on-the-fly transpilation mode, changing the order of explicit CSS import statements, changes the load order accordingly (which can be observed in DevTools' Network tab). For instance

import 'bootstrap/css/bootstrap.css!css';
import 'bootstrap/css/bootstrap-theme.css!css';
import 'angular-xeditable/dist/css/xeditable.css!css';

loads/applies xeditable.css after the bootstrap CSS was loaded and applied, whereas

import 'angular-xeditable/dist/css/xeditable.css!css';
import 'bootstrap/css/bootstrap.css!css';
import 'bootstrap/css/bootstrap-theme.css!css';

would do it vice versa.

But as soon as you bundle, you can't rely on that order anymore.

For all the CSS you have control over, you of course would not need to rely on CSS load order but rather implement your CSS overrides by applying CSS specificity.
But it's a different use case when you want to use a vendor lib that relies on CSS load order to override CSS from another vendor lib (instead of using CSS specificity).

Building of css should rewrite paths

When building css-files, url(...) should be rewritten. Same goes for @import.

Control imports and url() rewriting in CSS

When I make sfx bundle (with separate CSS) I get from this in source files:

url('../fonts/fontawesome-webfont.eot?v=4.3.0')

to this in bundled CSS:

url(jspm_packages/npm/[email protected]/fonts/fontawesome-webfont.eot?v=4.3.0)

This obviously doesn't work in production. Can please someone give me an advice, how to change my bundle task, so it keeps the urls intact or at least I can override the root path?

gulp.task('bundle', function (cb) {
  var Builder = require('systemjs-builder');
  var builder = new Builder();
  builder.loadConfig('./jspm.conf.js').then(function() {
    builder.buildSFX('src/bootstrap', PATHS.tmp.scripts + 'build.js', { sourceMaps: false, config: {sourceRoot: PATHS.tmp.scripts} })
      .then(function() {
        return cb();
      })
      .catch(function(ex) {
        cb(new Error(ex));
      });
  });
});

jspm.config.js:

System.config({
  "baseUrl": "./",
  "paths": {
    "*": "*.js",
    "travelis": "src/*.js",
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js"
  },
  "buildCSS": true,
  "separateCSS": true
});
...

A modular CSS proposal

An idea..

component-style.mcss (modular css)

/* $ allows us to define "CSS class name placeholders" */
${base} {
  font-size: 16px;
  color: #444;
}
${base} p {
  font-size: 12px;
}

component.js

import {base} from './component-style.mcss!';

// etc for whatever framework we're in
export function render(opts) {
  return `
    <div class="${base}">
      <p>stuff</p>
    </div>
  `;
}

That is, the className of base is a dynamic name that is shared as an export of the CSS module, which itself then generates the CSS class names for us.

Say in development, the className could be generated as component-style-base-0, with uniqueness managed, and then in production it could be reduced to z2d on build / bundle.

In this way we get around the biggest modularity hurdle in CSS - the global namespacing of classes.

The syntax may need revising, but it would be great to see something like this if anyone is keen on working on it please let me know!

The other cool thing is it could be done in a way that is backwards compatible with the CSS plugin here, in which case we could ship it in this default CSS plugin with jspm.

How can I avoid adding all the CSS Plugin dependencies to my config.js

I've posted this as a question in StackOverflow so we can start improving Q&A on JSPM:

http://stackoverflow.com/questions/28889066/how-to-avoid-adding-the-dependencies-to-config-js-when-installing-jspm-plugins

Loading order

This might be a more general systemjs feature/question: is it possible to ensure that CSS gets loaded before the main page loads?

I.e., to replace the need for hard coded package links in the header:

<link rel="stylesheet" href="/res/packages/github/twbs/[email protected]/css/bootstrap.css">

With something like this (which works, but loads asynchronously -- so you see the raw HTML for half a second before the CSS loads):

<script type="application/javascript">
  System.import('bootstrap/css/bootstrap.css!');
  System.import('app/test/js/bootstrap.js');
</script>

Preprocessor files loader

Do you think would be worth to transform this from plugin-css to plugin-style?
It would be great if it could automatically handle most common preprocessor files (styl, sass, less...)

Basic usage

Since the "docs" are pretty light, are there any examples of how to use systemjs with css? E.g., supposing I need to load the main Bootstrap CSS (installed via JSPM): should I Use System.import in the root script of the page, or use "import" in one of the modules?

If I try the following:

  System.import('bootstrap/css/bootstrap.css!');

Then I get a 404:

GET http://127.0.0.1:5000/res/css.js 404 (NOT FOUND)M 
Uncaught (in promise) Error: XHR error (404 NOT FOUND) loading    
http://127.0.0.1:5000/res/css.js
Error loading http://127.0.0.1:5000/res/css.js
Error loading 
http://127.0.0.1:5000/res/packages/github/twbs/[email protected]/css/bootstrap.css!http://127.0.0.1:5000/res/css.js
at r (http://127.0.0.1:5000/res/packages/system.js:4:10674)
at XMLHttpRequest.o.onreadystatechange (http://127.0.0.1:5000/res/packages/system.js:4:11228)

Copy assets for SFX bundles

Copy all used assets into a folder by the same name as the bundle, with the extension removed and prefixed with _assets.

CSS URL prefix option

When bundling, URLs in CSS files are output as baseURL-relative. It can be worth having an option to set a custom prefix here - say System.clientBaseURL or something like that to inject during the build.

Perhaps the simplest is just to call it basePrefix?

Getting the name right is probably the hardest part.

plugin requires standard node modules

Hi
When I'm trying to build my project with css, I've got this error
Error: Error: ENOENT, open '/Users/username/Documents/dev/module-example/fs.js'
My current versions are

"systemjs": "^0.17.1",
"jspm": "^0.16.0-beta",

This is strange, because I have all dependencies for this plugin

"github:systemjs/[email protected]": {
      "clean-css": "npm:[email protected]",
      "fs": "github:jspm/[email protected]",
      "path": "github:jspm/[email protected]"
},

Not sure if i'm doing smth wrong.

Bundling not working

I'm sure I'm doing something stupid but I just can't see it.

I have "css": "github:systemjs/plugin-css@^0.1.13", in my deps and I include some css files here and there, e.g. import 'leaflet/dist/leaflet.css!'.

When I run jspm bundle app/main --inject (same with bundle-sfx) it creates the bundled js but the CSS is not bundled and when I run the app it tries to request css files from the jspm_packages/ folder hierarchy. I haven't set any css-related options in the package.json as the defaults seem to be enough (?).

Apart from that, what happens with images referenced from CSS files? In the end, what I want is a single command that creates the minimum set of files to run my app and that I have to deploy.

determine css location on serverside

@guybedford
I got a weird use case:
Suppose I want to use nomarlize.css. I installed it via jspm, imported as a module, so that css plugin loads it up on the client.
I make the web application to be isomorphic, so most of the html content would be rendered on the server for the initial load. The user experience kinda sucks as normalize only kicks in after javascript starts running.
So I thought perhaps we can list normalize.css to the header and have it loaded first... But the versioning is killing me. Plus if this system is used as a framework.. there may be more than normalize.css that should be loaded, right?
Currently I solved the issue by loading system.js in node, then loads the jspm config file so get all the maps. Then I hacked the plugin-css to return the file path of the module when I do import on the server side:

System.import('normalize.css/normalize.css!').then(function (filePath) {...});

This way I can dynamically list the css files to the html head, without manually book-keeping the versions.
What do you think of the use case here? Cuz currently it feels so much like a hack that could break someday...

btw, how does System.locate work? I can't seem to find any documentation on it.

Allow bundle traceability

The document code included for CSS injection makes tracing of the build file no longer possible. We should make sure this code will still run without errors in Node.

Site root option

When doing the normalizing of CSS imports, it would be useful to be able to have a siteRoot input to ensure correct normalization.

CSS does not refresh

I am facing an issue when using the systemjs-angularjs-seed project https://github.com/Swimlane/angular-systemjs-seed
The issue which I am facing is when I define 2 seperate .less files on each of my route in ui-router and when I navigate from one route to another , I do not find the page updating the css , for more on this issue please refer :swimlane/angular1-systemjs-seed#34

Not installable via `npm`

I tried installing this via npm as GitHub repo dependency and it fails. I think it's down to the fact that the package.json file is not complete/standard. Is this repo meant to be an npm package?

Proper reduction

When the next release of clean-css comes out with hash support, we can do:

module.exports = function bundle(loads, opts) {
  var stubDefines = loads.map(function(load) {
    return "System\.register('" + load.name + "', [], false, function() {});";
  }).join('\n');

  var inputs = {};
  loads.forEach(function(load) {
    inputs[load.address.substr('file:'.length)] = {
      styles: load.source
    };
  });

  var cssOutput = new CleanCSS({
    target: this.separateCSS ? opts.outFile : '.'
  }).minify(inputs).styles;

  // write a separate CSS file if necessary
  if (this.separateCSS) {
    fs.writeFileSync(opts.outFile.replace(/\.js$/, '.css'), cssOutput);
    return stubDefines;
  }

  return [stubDefines, cssInject, '("' + escape(cssOutput) + '");'].join('\n');
}

Which will ensure CSS duplication is properly handled.

Integrate with postcss by default

Can we integrate this plugin with some css processor like postcss (autoprefixer). At this point dealing just with prefixes, no only this, is kind a pain so will be very valuable have this by default.

copyAssets option

An option that copies all CSS assets into the build folder and renormalizes them in the bundled stylesheet.

We could also allow customizing the output folder within the build folder (build/styles) etc.

Memory-based bundling support

The bundle hook can see that opts.outFile doesn't exist and then somehow we need to get access to a shared output object.

Use PostCSS over cleanCSS

We can then enable an architecture based on CSS "processors", and offer the ability to configure custom processing steps for builds like auto-prefixing.

pass options to clean-css

hi, i want just to use the url rewrite of clean-css , and i dont want it to minify the code or do any other optimizations, how can we pass options for that?

thanks in advanced.

error "missing path" when trying to build sfx bundle with css plugin

Hi,
Im using jspm version: 0.16.0-beta.3
with an extremely simple test project:

my src/app.js looks like this:

require("styles/myTest.css!");

var tools = require("./tools");

tools.doSomething();

Everything works in dev and if I use: jspm bundle src/app target/app-bundle.js

however, when I try:jspm bundle**-sfx** src/app target/app-bundle.js
I get this error: "missing path"

err AssertionError: missing path
at Module.require (module.js:363:3)
at require (module.js:384:17)
at c:\Dropbox\Projects\jtv\tests\systemjs\node_modules\jspm\node_modules\systemjs-builder\lib\compile.js:157:16

Its failing on line

 compiler = require(compilerMap[format]);

with format = "defined". which as far as i understand, it should not be trying to do since intentionally there isnt a compiler for that type.

Im guessing im missing some configuration or something?
thanks.

URL rewriting in CSS

Hi, I have a bundle that includes the following CSS

url('../fonts/fontawesome-webfont.eot?v=4.3.0')

and the following JSPM config

System.config({
  "baseURL": "/assets"
});

The CSS in the bundle is rewritten as

url(jspm_packages/npm/[email protected]/fonts/fontawesome-webfont.eot?v=4.3.0)

It is not taking into account the baseURL. I'm expecting the URL to be

url(assets/jspm_packages/npm/[email protected]/fonts/fontawesome-webfont.eot?v=4.3.0)

@guybedford This is very similar to #11 with the only difference that baseURL is ignored.

import css doesn't bundle file in production

I have this line in my code

import './styles/material.css!css'

and everything works perfect in develpoment but it doesn't bundled in my production file with this command:

jspm bundle app/bootstrap www/bundle/bunde.js --inject --minify

Not sure is it a bug, but my console shows:

Resource interpreted as Stylesheet but transferred with MIME type text/html

Installing npm:clean-css loader import fails in Gulp

When attempting to bundle css in a gulp task you'll receive an error that you must install:

 Clean CSS via `jspm install npm:clean-css` for CSS build support.

Once you've done so and build via CLI you'll find that your css is bundled correctly however when attempting to run an automated task via Gulp you'll be prompted on each attempted build with the above error, complaining that it cannot load;

css-builder.js

If however you install the following you will then be able to run your gulp task and everything is happy.

npm:[email protected]

Once you've install the above forcing the version everything plays nice. So I'm posting this here in case someone else runs across this issue. Not entirely certain if this problem resides in the clean-css lib or in the systemjs builder consuming it.

Reusing substack/insert-css

Was getting started on my postcss loader just to get a feel for how to write a loader. Came up with this, which in dev mode seems to work just like plugin-css:

import insertCss from 'insert-css'

export var translate = (load) => {
  insertCss(load.source)
  load.source = ''
}

The biggest change I can see is that cross-domain CSS can be loaded from a link[href] but the default fetch var uses XHR which would blow up. Is that a big deal?

Anyway, I wanted to start a thread about whether it'd be worth rewriting plugin-css to reuse as much already out there as possible. It was the first thing I read when I tried to understand the plugin system, and it lead me astray a bit. I didn't realise you could write plugins in ES6, for instance.

Support features of Duo

I have found that Duo/Component actually have the best css bundling support and I thought it may be helpful to list a couple of their features which could be incorporated into plugin-css:

• auto-prefixing

Automatically applies vendor prefixes. Actually this is a duo plugin and could be a separate plugin in systemjs or included as part of plugin-css

• Symbolic linking of assets

When bundling, Duo identifies all assets it finds in the css files, creates symbolic links from the bundle output directory to the original asset file, and rewrites the urls to point there. This means in production you wouldn't have to deliver the jspm_packages folder you just deliver the build folder and it contains everything needed to run the app.

• following imports

When deciding what to include in a bundle, Duo follows imports in css in the same way as it follows requires in javascript. This means you can control what goes in the css bundle entirely in the css files and there is clean separation of css & javascript.

Thanks

Support old IE etc

Port all the hoops implemented in https://github.com/guybedford/require-css/blob/master/css.js#L49 into this project for comprehensive browser support.

error "Please check the validity of the CSS block ..." when bundling CSS with "@font-face"

In my main CSS file starting from line 1 I have

@font-face {
  font-family: 'foo';
  src: url('bar');
...
  font-weight: normal;
  font-style: normal;
}

Now when bundling with jspm I got the following error:

Please check the validity of the CSS block starting from the line #1

If I remove @font-face it works just fine.

SCSS plugin

I use node-sass. Would like the ability to import scss directly.

Ideally I would like JSPM/SystemJS to handle importing html partials (angular, SCSS, and Typescript) for me. So I wouldn't need an intermediary compilation step.

Bower package

It would be helpful to have this supported for bower.
Let me know if you want a pull request to setup the bower.json (http://bower.io/docs/creating-packages/)

Duplicate CSS properties get removed erroneously

I just noticed that when I create a bundle, it automatically minimizes the css. With this as input:

display: -webkit-flex;
display: flex;

The resulting CSS is just this:

display: flex;

@guybedford Can you disable advanced stuff (advanced: false) of clean-css by default? I'd be nice if it were opt-in. I didn't expect that a jspm bundle alters how my CSS works. It should work the same whether I bundle or not. These optimizations are a tricky business.

CSS bundling broken with current package dependencies

After running jspm update, bundling CSS seems to have broken. SystemJS in the browser continues to work as expected, but jspm bundle generates the following exception:

err  TypeError: Arguments to path.join must be strings
         at path.js:360:15
         at Array.filter (native)
         at Object.exports.join (path.js:358:36)
         at originalPositionIn (evalmachine.<anonymous>:120:140)
         at InputSourceMapStore.originalPositionFor (evalmachine.<anonymous>:189:12)
         at snapshot (evalmachine.<anonymous>:55:41)
         at track (evalmachine.<anonymous>:111:5)
         at Object.context.track (evalmachine.<anonymous>:23:16)
         at Object.Extractors.properties (evalmachine.<anonymous>:37:46)
         at tokenize (evalmachine.<anonymous>:177:26)

After fiddling with the testlibs project in jspm-cli, it seems traceable to the 3.2.x release of clean-css:

• clone jspm-cli
• cd into testlibs
• jspm install
• jspm update npm:clean-css (installs 3.2.x)
• jspm bundle main

The bundle command throws the above exception. Downgrading to clean-css ~3.1.x seemed to fix the issue.

Loading external css?

I'm new to systemjs. I'm unsure how to load a stylesheet from an external domain? The paths option described at https://github.com/ModuleLoader/es6-module-loader/wiki/Configuring-the-Loader#paths-implementation doesn't seem to work for css. Is there an example anywhere for loading external css?

Using plugin-css with systemjs-csp

Hi,

we are in the process of activating CSP for our application but we are struggling with plugin-css as it is only a CJS module and does not work with systemjs-csp.

What would be the correct way to handle this problem? Should we convert the plugin to a UMD module?

cheers,
Kris