Merge pull request #73 from sormy/master

CSS URL Rewrite and CSS Asset Copier

.eslintignore

@@ -1,3 +1,4 @@
 src/config.js
-src/modernizr.js
-src/jspm_packages
+jspm_packages
+node_modules
+.tmp

.eslintrc

@@ -9,15 +9,14 @@
  "node": true
  }
  },
+ "plugins": [
+ "mocha"
+ ],
  "globals": {
- "describe": false,
- "before": false,
- "beforeEach": false,
- "after": false,
- "afterEach": false,
- "it": false
+ "__moduleName": true
  },
  "rules": {
- "strict": 0
+ "strict": 0,
+ "import/no-unresolved": 0
  }
 }

.gitignore

@@ -1,14 +1,5 @@
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
-
-# Transpiled JavaScript
-lib
-
-# JSPM
 jspm_packages
-
 npm-debug.log
 .tmp
-
-.vscode/
+.vscode

README.md

@@ -1,4 +1,4 @@
-# plugin-sass
+# JSPM SASS/SCSS Plugin
 
 [![Build Status](https://travis-ci.org/mobilexag/plugin-sass.svg?branch=master)](https://travis-ci.org/mobilexag/plugin-sass)
 [![Dependency Status](https://david-dm.org/mobilexag/plugin-sass.svg)](https://david-dm.org/mobilexag/plugin-sass)
@@ -9,30 +9,51 @@
 [jspm](http://jspm.io) package manager.
 
 ```sh
-$ jspm install scss=sass
+$ jspm install sass --dev
+```
+
+Recommended plugin usage configuration is:
+
+```js
+SystemJS.config({
+ meta: {
+ "*.scss": { "loader": "sass" },
+ "*.sass": { "loader": "sass" }
+ }
+});
 ```
 
 To apply your SASS styles to your current page asynchronously:
 
 ```js
-System.import('./style.scss!');
+System.import('./style.scss');
 ```
 
 or synchronously
 
 ```js
-import './style.scss!';
+import './style.scss';
 ```
 
 You can also use the [older syntax](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax)
 , known as the indented syntax (or sometimes just "_Sass_")
 
 ```js
-System.import('./style.sass!scss');
+System.import('./style.sass');
 ```
 
 **Note**: if you use a different transpiler as Babel, like [TypeScript](http://www.typescriptlang.org), the plugin does not work by default. This is because this plugin and jspm / SystemJS is based on ES2015 syntax. All code is written with the Babel transpiler so you have to use the transpiler first before you can use the plugin. Please have a look at issue [#25](https://github.com/mobilexag/plugin-sass/issues/25#issuecomment-179704867) for a solution.
 
+## Features
+
+- sass, scss
+- @import supported
+- "jspm:" prefix to refer jspm package files
+- url rewrite and asset copier
+- autoprefixer with custom configuration
+- minified and non minified build
+- bundle css separately or inline into build
+
 ## Importing from jspm
 
 You can import scss files from jspm packages *from within scss files* using the `jspm:` prefix. For example, if you have jspm installed `twbs/bootstrap-sass`:
@@ -41,6 +62,22 @@ You can import scss files from jspm packages *from within scss files* using the
 @import 'jspm:bootstrap-sass/assets/stylesheets/bootstrap';
 ```
 
+## Legacy options
+
+Some legacy `plugin-css` options are supported:
+
+```js
+System.config({
+ separateCSS: false, // change to true to separate css from js bundle
+ buildCSS: true, // change to false to not build css and process it manually
+});
+```
+
+- `separateCSS`: true|false, default to false, set to true to separate css from
+ js bundle, works well if `plugin-css` is not used, otherwise both plugins will
+ try to save css in the same file and one will overwrite results of another one.
+- `buildCSS`: true|false, defalt to true, set to to not build css and process it manually.
+
 ## Configuring the plugin
 
 You can configure some options how the plugin should behave. Just add a new
@@ -63,6 +100,16 @@ sassPluginOptions: {
 }
 ```
 
+or
+
+```js
+sassPluginOptions: {
+ "autoprefixer": {
+ "browsers": ["last 2 versions"]
+ }
+}
+```
+
 ### SASS options
 
 To add SASS [options](https://github.com/medialize/sass.js/#using-the-sassjs-api)
@@ -75,6 +122,23 @@ sassPluginOptions: {
 }
 ```
 
+## URL rewriter and asset copier
+
+Options `rewriteUrl` enables rewrite scss URLs to use correct path from SystemJS base URL.
+
+Option `copyAssets` enables copy CSS-related assets into destination folder.
+
+```sh
+jspm build app dist/app.js --format global --minify --skip-source-maps
+```
+
+```js
+sassPluginOptions: {
+ "copyAssets": true,
+ "rewriteUrl": true
+}
+```
+
 ## Testing the plugin
 
 ```sh

package.json

@@ -18,14 +18,13 @@
  "clean": "rimraf .tmp",
  "lint": "eslint src test/**/*-test.js",
  "pug": "pug -o .tmp test/**/*.pug",
- "modernizr": "modernizr -c modernizr-config.json -d src",
  "bundle": "cp-cli src/config.js .tmp/config.js && cp-cli src/jspm_packages/system.js .tmp/system.js && jspm bundle test/browser/bundleme .tmp/bundle.js",
  "bundleSfx": "jspm bundle-sfx test/browser/bundleme .tmp/bundle.js",
  "test": "mocha --compilers js:babel-register test/**/*-test.js",
- "test:runtime": "npm run pug && npm run modernizr && browser-sync start -s '.tmp' --index runtime-test.html --ss 'src' --ss 'test/browser'",
- "test:bundle": "npm run pug && npm run modernizr && npm run bundle && browser-sync start -s '.tmp' --index bundle-test.html --ss 'test/browser'",
- "test:bundleSfx": "npm run pug && npm run modernizr && npm run bundleSfx && browser-sync start -s '.tmp' --index bundle-sfx-test.html --ss 'test/browser'",
- "prepublish": "npm run modernizr && npm run lint && npm run test"
+ "test:runtime": "npm run pug && browser-sync start -s '.tmp' --index runtime-test.html --ss 'src' --ss 'test/browser'",
+ "test:bundle": "npm run pug && npm run bundle && browser-sync start -s '.tmp' --index bundle-test.html --ss 'test/browser'",
+ "test:bundleSfx": "npm run pug && npm run bundleSfx && browser-sync start -s '.tmp' --index bundle-sfx-test.html --ss 'test/browser'",
+ "prepublish": "npm run lint && npm run test"
  },
  "devDependencies": {
  "babel-eslint": "^6.0.4",
@@ -41,22 +40,24 @@
  "eslint": "^2.9.0",
  "eslint-config-airbnb-base": "^3.0.1",
  "eslint-import-resolver-jspm": "^2.1.0",
- "eslint-plugin-import": "^1.7.0",
+ "eslint-import-resolver-node": "^0.2.3",
+ "eslint-plugin-import": "^1.16.0",
+ "eslint-plugin-mocha": "^4.7.0",
  "jspm": "^0.16.34",
  "mocha": "^2.4.5",
- "modernizr": "^3.3.1",
  "pug-cli": "^1.0.0-alpha1",
  "rimraf": "^2.5.2",
  "systemjs": "^0.19.27"
  },
- "dependencies": {},
  "jspm": {
  "directories": {
  "baseURL": "src",
  "lib": "src"
  },
  "dependencies": {
  "autoprefixer": "npm:autoprefixer@^6.3.3",
+ "css-asset-copier": "npm:css-asset-copier@^1.0.1",
+ "css-url-rewriter-ex": "npm:css-url-rewriter-ex@^1.0.4",
  "fs": "github:jspm/nodelibs-fs@^0.1.2",
  "lodash": "npm:lodash@^4.6.1",
  "path": "github:jspm/nodelibs-path@^0.1.0",