Play well with Custom Syntax

index.js

@@ -4,6 +4,7 @@ var postcss = require("postcss")
 var joinMedia = require("./lib/join-media")
 var resolveId = require("./lib/resolve-id")
 var loadContent = require("./lib/load-content")
+var processContent = require("./lib/process-content")
 var parseStatements = require("./lib/parse-statements")
 var promiseEach = require("promise-each")
 
@@ -314,11 +315,12 @@ function loadImportContent(
       return
     }
 
-    return postcss(options.plugins).process(content, {
-      from: filename,
-      syntax: result.opts.syntax,
-      parser: result.opts.parser,
-    })
+    return processContent(
+      result,
+      content,
+      filename,
+      options
+    )
     .then(function(importedResult) {
       var styles = importedResult.root
       result.messages = result.messages.concat(importedResult.messages)

lib/process-content.js

@@ -0,0 +1,61 @@
+var path = require("path")
+var postcss = require("postcss")
+var sugarss
+
+module.exports = function processContent(
+  result,
+  content,
+  filename,
+  options
+) {
+  var plugins = options.plugins
+  var ext = path.extname(filename)
+
+  var parserList = []
+
+  // SugarSS support:
+  if (ext === ".sss") {
+    if (!sugarss) {
+      try {
+        sugarss = require("sugarss")
+      }
+      catch (e) {
+        // Ignore
+      }
+    }
+    if (sugarss) return runPostcss(content, filename, plugins, [ sugarss ])
+  }
+
+  // Syntax support:
+  if (result.opts.syntax && result.opts.syntax.parse) {
+    parserList.push(result.opts.syntax.parse)
+  }
+
+  // Parser support:
+  if (result.opts.parser) parserList.push(result.opts.parser)
+  // Try the default as a last resort:
+  parserList.push(null)
+
+  return runPostcss(content, filename, plugins, parserList)
+}
+
+function runPostcss(
+  content,
+  filename,
+  plugins,
+  parsers,
+  index
+) {
+  if (!index) index = 0
+  return postcss(plugins).process(content, {
+    from: filename,
+    parser: parsers[index],
+  })
+  .catch(function(err) {
+    // If there's an error, try the next parser
+    index++
+    // If there are no parsers left, throw it
+    if (index === parsers.length) throw err
+    return runPostcss(content, filename, plugins, parsers, index)
+  })
+}

package.json

@@ -30,7 +30,8 @@
     "eslint": "^1.10.3",
     "eslint-config-i-am-meticulous": "^2.0.0",
     "npmpub": "^3.0.1",
-    "postcss-scss": "^0.1.3"
+    "postcss-scss": "^0.1.3",
+    "sugarss": "^0.2.0"
   },
   "jspm": {
     "name": "postcss-import",

test/custom-syntax-parser.js

@@ -0,0 +1,43 @@
+import test from "ava"
+import scss from "postcss-scss"
+import sugarss from "sugarss"
+import compareFixtures from "./helpers/compare-fixtures"
+import compareFixturesExt from "./helpers/compare-fixtures-ext"
+
+test("should process custom syntax", t => {
+  return compareFixtures(t, "scss-syntax", null, {
+    syntax: scss,
+  })
+})
+
+test("should process custom syntax by parser", t => {
+  return compareFixtures(t, "scss-parser", null, {
+    parser: scss,
+  })
+})
+
+test(".css importing .sss should work", t => {
+  return compareFixtures(t, "import-sss")
+})
+
+test(".sss importing .sss should work", t => {
+  return compareFixturesExt(t, "sugar", ".sss", null, {
+    parser: sugarss,
+  })
+})
+
+test(".sss importing .css should work", t => {
+  return compareFixturesExt(t, "sugar-import-css", ".sss", null, {
+    parser: sugarss,
+  })
+})
+
+test(".css importing .sss importing .css should work", t => {
+  return compareFixtures(t, "import-sss-css")
+})
+
+test(".sss importing .css importing .sss should work", t => {
+  return compareFixturesExt(t, "import-css-sss", ".sss", null, {
+    parser: sugarss,
+  })
+})

test/fixtures/import-css-sss.expected.css

@@ -0,0 +1,9 @@
+.sugarbar{
+  color: blue
+}
+
+import.sugarbar{}
+
+.sugar{
+  color: white
+}

test/fixtures/import-css-sss.sss

@@ -0,0 +1,4 @@
+@import "import-sugarbar.css"
+
+.sugar
+  color: white

test/fixtures/import-sss-css.css

@@ -0,0 +1 @@
+@import "foo-recursive.sss";

test/fixtures/import-sss-css.expected.css

@@ -0,0 +1,5 @@
+bar{}
+
+foo.recursive{
+  color: red
+}

test/fixtures/import-sss.css

@@ -0,0 +1 @@
+@import "sugarbar.sss";

test/fixtures/import-sss.expected.css

@@ -0,0 +1,3 @@
+.sugarbar {
+  color: blue
+}

test/fixtures/imports/foo-recursive.sss

@@ -0,0 +1,4 @@
+@import "bar.css"
+
+foo.recursive
+  color: red

test/fixtures/imports/import-sugarbar.css

@@ -0,0 +1,3 @@
+@import "sugarbar.sss";
+
+import.sugarbar{}

test/fixtures/imports/sugarbar.sss

@@ -0,0 +1,2 @@
+.sugarbar
+  color: blue

test/fixtures/sugar-import-css.expected.css

@@ -0,0 +1,4 @@
+bar{}
+.sugar{
+  color: white
+}

test/fixtures/sugar-import-css.sss

@@ -0,0 +1,3 @@
+@import "bar.css"
+.sugar
+  color: white

test/fixtures/sugar.expected.css

@@ -0,0 +1,6 @@
+.sugarbar {
+  color: blue
+}
+.sugar {
+  color: white
+}

test/fixtures/sugar.sss

@@ -0,0 +1,3 @@
+@import "sugarbar.sss"
+.sugar
+  color: white

test/helpers/compare-fixtures-ext.js

@@ -0,0 +1,32 @@
+var fs = require("fs")
+var postcss = require("postcss")
+var assign = require("object-assign")
+var atImport = require("../..")
+
+function read(name, ext) {
+  if (!ext) ext = ".css"
+  return fs.readFileSync("fixtures/" + name + ext, "utf8")
+}
+
+module.exports = function(t, name, ext, opts, postcssOpts, warnings) {
+  opts = assign({ path: "fixtures/imports" }, opts)
+  return postcss(atImport(opts))
+    .process(read(name, ext), postcssOpts || {})
+    .then(function(result) {
+      var actual = result.css
+      var expected = read(name + ".expected")
+      // handy thing: checkout actual in the *.actual.css file
+      fs.writeFile("fixtures/" + name + ".actual.css", actual)
+      t.is(actual, expected)
+      if (!warnings) {
+        warnings = []
+      }
+      result.warnings().forEach(function(warning, index) {
+        t.is(
+          warning.text,
+          warnings[index],
+          "unexpected warning: \"" + warning.text + "\""
+        )
+      })
+    })
+}

test/plugins.js

@@ -1,6 +1,5 @@
 import test from "ava"
 import postcss from "postcss"
-import scss from "postcss-scss"
 import atImport from ".."
 import compareFixtures from "./helpers/compare-fixtures"
 
@@ -51,15 +50,3 @@ test("should remain silent when value is an empty array", () => {
     }))
     .process("")
 })
-
-test("should process custom syntax", t => {
-  return compareFixtures(t, "scss-syntax", null, {
-    syntax: scss,
-  })
-})
-
-test("should process custom syntax by parser", t => {
-  return compareFixtures(t, "scss-parser", null, {
-    parser: scss,
-  })
-})