sourcemap !

Close #9

Author: MoOx

README.md

@@ -98,23 +98,12 @@ cssnext accept 2 arguments: a css string and an object of options.
 
 #### Node.js options
 
-_For now, options are passed to all postcss plugins._ This mean you should be able to any specific plugin option.
-
-##### `from` (default: `null`)
-
-Source of the file. Need to be provided to enable sourcemap.
-
-```js
-var cssnext = require("cssnext")
-var fs = require("fs")
-var source = "./index.css"
-var output = cssnext(fs.readFileSync(source, "utf8"), {from: source})
-fs.writeFileSync("dist/index.css", output)
-```
+_For now, all options are passed to all postcss plugins._ This mean you should be able to any specific plugin options.
 
 ##### `features` (default: all features)
 
-Object containing key of features to enable. _No key means feature is enabled_
+Object containing key of features to enable/disable.  
+_No key means feature is enabled_.
 
 ```js
 //eg: disable color support
@@ -141,6 +130,30 @@ See [autoprefixer documentation of this option for more details](https://github.
 
 Default to something like `["> 1%", "last 2 versions", "Firefox ESR"]`.
 
+##### `sourcemap` (default: `false`)
+
+**If you want a accurate sourcemap, please use instead the `from` option.**
+
+This option is a shortcut to enable inlined sourcemap in the output.  
+Just pass `true` to get the sourcemap at the end of the output.  
+If you want better control on sourcemap, use [postcss `map` option](https://github.com/postcss/postcss#source-map-1) directly.
+
+##### `from` (default: `null`)
+
+Source of the file. **Enable `sourcemap` option automatically** (except if you provide both `from` & `sourcemap`).
+
+```js
+var cssnext = require("cssnext")
+var fs = require("fs")
+
+var source = "./index.css"
+var output = cssnext(
+  fs.readFileSync(source, "utf8"),
+  {from: source}
+)
+fs.writeFileSync("dist/index.css", output)
+```
+
 ### Usage with other tools
 
 Here are some tools that will help you to use cssnext in your current workflow

index.js

@@ -31,6 +31,20 @@ function cssnext(string, options) {
   options = options || {}
   var features = options.features || {}
 
+  // default sourcemap
+  // if `map` option is passed, sourcemap option is ignored
+  // if `sourcemap` option is passed, a default map is used (insert content in the output)
+  // if `from` option is passed, we assume sourcemap is wanted
+  options.map = options.map ||
+    (
+      (options.sourcemap || (options.sourcemap !== false && options.from)) ?
+        {
+          inline: true,
+          sourcesContent: true
+        } :
+        null
+    )
+
   var postcss = Postcss()
 
   Object.keys(cssnext.features).forEach(function(key) {

test/index.js

@@ -8,6 +8,9 @@ test("cssnext", function(t) {
   t.end()
 })
 
+/**
+ * Features tests
+ */
 var toSlug = require("to-slug-case")
 Object.keys(cssnext.features).forEach(function(name) {
   var slug = toSlug(name)
@@ -16,18 +19,40 @@ Object.keys(cssnext.features).forEach(function(name) {
   var expected = read("features/" + slug + ".expected")
 
   test(slug, function(t) {
-    t.equal(cssnext(input, {from: source}), expected, "should add " + slug + " support")
+    var options = {from: source, sourcemap: false, features: {}}
+
+    // disable all features
+    Object.keys(cssnext.features).forEach(function(key) { options.features[key] = false })
 
-    var options = {from: source, features: {}}
-    options.features[name] = false
     var css = cssnext(input, options)
     t.notEqual(css, expected, "should not add " + slug + " support if disabled")
     t.equal(css, input,  "should not modify input if  " + slug + " is disabled")
 
+    // enable only the one we want to test
+    options.features[name] = true
+    t.equal(cssnext(input, options), expected, "should add " + slug + " support")
+
     t.end()
   })
 })
 
+/**
+ * Sourcemap tests
+ */
+
+test("sourcemap", function(t) {
+  t.equal(
+    cssnext(
+      read("sourcemap/input"),
+      {from: "./test/sourcemap/input.css"}
+    ),
+    read("sourcemap/expected"),
+    "should contain a correct sourcemap"
+  )
+
+  t.end()
+})
+
 /**
  * Resolve a fixture by `filename`.
  *

test/sourcemap/expected.css

@@ -0,0 +1,3 @@
+html {
+  background: blue;
+}

test/sourcemap/imported.css

@@ -0,0 +1,3 @@
+<!doctype>
+<link rel="stylesheet" href="out.css" />
+<h1>Please view source &amp; check sourcemap</h1>

test/sourcemap/index.html

@@ -0,0 +1,5 @@
+@import "imported.css";
+
+body {
+  color: red
+}