Enable relative imports when filename is provided (giuseppeg#11)

Author: MarcPorciuncula

fixtures/entry.scss

@@ -0,0 +1,5 @@
+@import './import-target.scss';
+
+p {
+  color: red;
+}

fixture.css renamed to fixtures/fixture.css

@@ -0,0 +1,5 @@
+$font: 'Comic Sans MS';
+
+* {
+  font-family: $font !important;
+}

fixtures/import-target.scss

@@ -1,4 +1,5 @@
 const sass = require('node-sass')
+const path = require('path')
 
 module.exports = (css, settings) => {
   const cssWithPlaceholders = css
@@ -9,9 +10,16 @@ module.exports = (css, settings) => {
       `/*%%styled-jsx-placeholder-${id}%%*/`
     )
 
+  // Add the directory containing the current file to includePaths to enable relative
+  // imports, only works when the filename is provided
+  const includePaths = settings.sassOptions && settings.sassOptions.includePaths || []
+  if (settings.babel && settings.babel.filename) {
+    includePaths.push(path.dirname(settings.babel.filename));
+  }
+
   const preprocessed = sass.renderSync(Object.assign({
     data: cssWithPlaceholders
-  }, settings.sassOptions)).css.toString()
+  }, settings.sassOptions, { includePaths })).css.toString()
 
   return preprocessed
     .replace(/styled-jsx-placeholder-(\d+)-(\w*\s*[),;{])/g, (_, id, p1) =>

index.js

@@ -1,4 +1,6 @@
 const assert = require('assert')
+const path = require('path')
+const fs = require('fs')
 const stripIndent = require('strip-indent')
 const plugin = require('./')
 
@@ -51,7 +53,7 @@ describe('styled-jsx-plugin-sass', () => {
           border-bottom: 1px solid %%styled-jsx-placeholder-0%%; }
           p img {
             display: block; }
-        
+
         %%styled-jsx-placeholder-1%%
       `)
     )
@@ -60,9 +62,9 @@ describe('styled-jsx-plugin-sass', () => {
   it('works with media queries placeholders', () => {
     assert.equal(
       plugin(`
-        p { 
-          display: block; 
-          @media %%styled-jsx-placeholder-0%% { color: red; } 
+        p {
+          display: block;
+          @media %%styled-jsx-placeholder-0%% { color: red; }
           @media (min-width: %%styled-jsx-placeholder-0%%px) { color: blue; }
           @media (min-width: %%styled-jsx-placeholder-0%%) { color: yellow; }
         }`,
@@ -79,7 +81,7 @@ describe('styled-jsx-plugin-sass', () => {
               color: blue; } }
           @media (min-width: %%styled-jsx-placeholder-0%%) {
             p {
-              color: yellow; } }  
+              color: yellow; } }
       `)
     )
   })
@@ -98,7 +100,7 @@ describe('styled-jsx-plugin-sass', () => {
 
   it('works with @import', () => {
     assert.equal(
-      plugin('@import "fixture"; p { color: red }', {}).trim(),
+      plugin('@import "fixtures/fixture"; p { color: red }', {}).trim(),
       cleanup(`
         div {
           color: red; }
@@ -109,6 +111,22 @@ describe('styled-jsx-plugin-sass', () => {
     )
   })
 
+  it('works with relative @import', () => {
+    const filename = 'fixtures/entry.scss'
+    const file = fs.readFileSync(path.join(__dirname, filename))
+
+    assert.equal(
+      plugin(file.toString(), { babel: { filename } }).trim(),
+      cleanup(`
+        * {
+          font-family: "Comic Sans MS" !important; }
+
+        p {
+          color: red; }
+      `)
+    )
+  });
+
   it('applies sassOptions', () => {
     assert.equal(
       plugin('div { padding: (1 / 3) * 1em }', {