feat: preprocessor data option to prepend shared styles (#73)

tonimc · znck · commit 5a817490baf5 · 2018-06-25T00:05:29.000+05:30
* Add data option in preprocessOption to allow define env variable in styles

* Add test for data preprocessOptions in scss

* refactor: Use new line character
diff --git a/src/compiler.ts b/src/compiler.ts
@@ -168,20 +168,22 @@ export class SFCCompiler {
     ]
       .concat(this.style.postcssPlugins)
       .filter(Boolean)
+    const preprocessOptions =
+      (style.lang &&
+        this.style.preprocessOptions &&
+        this.style.preprocessOptions[style.lang]) ||
+      {}
+    const source = style.src ? this.read(style.src, filename) : style.content
     const result = compileStyle(<any>{
-      source: style.src ? this.read(style.src, filename) : style.content,
+      source: preprocessOptions.data ? `${preprocessOptions.data}\n${source}` : source,
       filename,
       id: scopeId,
       map: style.map,
       scoped: style.scoped || false,
       postcssPlugins,
       postcssOptions: this.style.postcssOptions,
       preprocessLang: style.lang,
-      preprocessOptions:
-        (style.lang &&
-          this.style.preprocessOptions &&
-          this.style.preprocessOptions[style.lang]) ||
-        {},
+      preprocessOptions,
       trim: this.style.trim
     })
 
diff --git a/test/compile.spec.ts b/test/compile.spec.ts
@@ -0,0 +1,18 @@
+import {createDefaultCompiler} from "../src"
+
+it('should prepend data scss option to actual style', () => {
+  const compiler = createDefaultCompiler({
+    style: {
+      preprocessOptions : {
+        scss: {
+          data: `$testColor: red;`
+        }
+      }
+    }
+  })
+  const result = compiler.compileStyle('foo.vue', 'foo',
+    {type: 'style', lang: 'scss', content: '.foo_0{ color: $testColor }', map: undefined, attrs: {}, start: 1, end: 1}
+  );
+
+  expect(result.code).toEqual(expect.stringContaining('color: red'))
+})
