fix: data option for indentedSyntax and variables

Author: martonlederer

README.md

@@ -7,6 +7,7 @@ This is a fixed/updated version of [styled-jsx-plugin-sass](https://github.com/g
 ## What's the difference?
 
 This plugin works with [indented sass](#indented-syntax) and [dart sass](#dart-sass) too, neither of those were possible with the old package. It also includes code from pull requests that weren't merged in the original repo.
+
 Credits to [@giuseppeg](https://github.com/giuseppeg), [@xhuz](https://github.com/xhuz) and [@jamestalmage](https://github.com/jamestalmage).
 
 ## Usage

index.js

@@ -19,7 +19,8 @@ module.exports = (css, settings) => {
   // Prepend option data to cssWithPlaceholders
   const optionData = settings.sassOptions && settings.sassOptions.data || ''
   // clean up extra indent (indentedSyntax is not compatible with extra indenting)
-  let data = stripIndent(optionData + '\n' + cssWithPlaceholders)
+  // they need to be cleaned up separately, and than concated
+  const data = stripIndent(optionData) + '\n' + stripIndent(cssWithPlaceholders)
 
   const preprocessed = sass
     .renderSync(Object.assign({}, settings.sassOptions, { data }))

test.js

@@ -185,4 +185,24 @@ describe('styled-jsx-plugin-sass', () => {
       `)
     )
   })
+
+  it('works with data option', () => {
+    assert.equal(
+      plugin(`
+          div
+            display: block
+            color: $test-color
+      `, {
+        sassOptions: {
+          indentedSyntax: true,
+          data: `$test-color: #ff0000`
+        }
+      }).trim(),
+      cleanup(`
+        div {
+          display: block;
+          color: #ff0000; }
+      `)
+    )
+  })
 })