Merge pull request #83 from igor-ribeiro/master

Fixes #12: Add `extensions` config to support other css file extensions

src/plugin.js

@@ -52,12 +52,20 @@ const launchServer = () => {
   process.on('exit', stopServer);
 };
 
-const extensions = ['.css'];
-
-const getStylesFromStylesheet = (stylesheetPath: string, file: any,
-  config: any): any => {
+const defaultExtensions = ['.css'];
+
+const getStylesFromStylesheet = (
+  stylesheetPath: string,
+  file: any,
+  config: any,
+  configExtensions: string[],
+): any => {
   const stylesheetExtension = extname(stylesheetPath);
 
+  const extensions = Array.isArray(configExtensions)
+    ? configExtensions
+    : defaultExtensions;
+
   if (extensions.indexOf(stylesheetExtension) !== -1) {
     launchServer();
     const requiringFile = file.opts.filename;
@@ -88,8 +96,13 @@ export default function transformPostCSS({ types: t }: any): any {
         }
 
         const [{ value: stylesheetPath }] = args;
-        const { config } = this.opts;
-        const tokens = getStylesFromStylesheet(stylesheetPath, file, config);
+        const { config, extensions } = this.opts;
+        const tokens = getStylesFromStylesheet(
+          stylesheetPath,
+          file,
+          config,
+          extensions
+        );
 
         if (tokens !== undefined) {
           const expression = path.findParent((test) => (
@@ -118,8 +131,13 @@ export default function transformPostCSS({ types: t }: any): any {
           return;
         }
 
-        const { config } = this.opts;
-        const tokens = getStylesFromStylesheet(stylesheetPath, file, config);
+        const { config, extensions } = this.opts;
+        const tokens = getStylesFromStylesheet(
+          stylesheetPath,
+          file,
+          config,
+          extensions
+        );
 
         if (tokens) {
           const styles = t.objectExpression(

test/fixtures/import.scss.expected.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var styles = {
+  "simple": "_simple_jvai8_1"
+}; // @related-file ./simple.scss
+
+console.log(styles);

test/fixtures/import.scss.js

@@ -0,0 +1,3 @@
+import styles from "./simple.scss";
+
+console.log(styles);

test/fixtures/simple.scss

@@ -0,0 +1,3 @@
+.simple {
+  color: magenta;
+}

test/helpers.js

@@ -13,6 +13,7 @@ export const babelNoModules = {
 export const transform = (
   filename: string,
   babelOptionOverrides: ?{ [string]: mixed },
+  extensions: ?string[],
 ): Promise<string> => {
   const file = path.join(fixtures, filename);
 
@@ -22,6 +23,7 @@ export const transform = (
     plugins: [
       ['../../src/plugin.js', {
         config: 'fixtures/postcss.config.js',
+        extensions,
       }],
     ],
   }, babelOptionOverrides);

test/plugin.js

@@ -118,6 +118,26 @@ describe('babel-plugin-transform-postcss', () => {
     shouldBehaveLikeSeverIsRunning();
   });
 
+  describe('when transforming import.scss.js', () => {
+    let result;
+
+    beforeEach(async() => {
+      result = await transform(
+        'import.scss.js',
+        null,
+        ['.scss']
+      );
+    });
+
+    it('launches the server', testServerLaunched);
+    it('launches a client', () => testClientLaunched('simple.scss'));
+    it('compiles correctly', async() => {
+      expect(result).to.eql((await read('import.scss.expected.js')).trim());
+    });
+
+    shouldBehaveLikeSeverIsRunning();
+  });
+
   describe('when transforming nocss.js', () => {
     beforeEach(() => transform('nocss.js'));