update tests and loader to recognize preprop type

Author: tompascall

__tests__/index.spec.js

@@ -2,27 +2,43 @@ import path from 'path';
 const loader = require('../index').default;
 const { operator } = require('../index');
 
-describe('js-to-sass-vars-loader', () => {
+describe('js-to-styles-vars-loader', () => {
 
     describe('module', () => {
         const context = {
-            context: path.resolve()
+            context: path.resolve(),
+            _module: {
+                resource: 'fakeResource.scss'
+            }
         };
 
         it('exports a function', () => {
             expect(typeof loader).toEqual('function');
         });
 
-        it('calls operator.mergeVarsToContent with content and loader context', () => {
+        it('calls getResource with context', () => {
+            spyOn(operator, 'getResource').and.callThrough();
+            loader.call(context, 'asdf');
+            expect(operator.getResource).toHaveBeenCalledWith(context);
+
+        });
+
+        it('calls getPreprocessorType with resource', () => {
+            spyOn(operator, 'getPreprocessorType');
+            loader.call(context, 'asdf');
+            expect(operator.getPreprocessorType).toHaveBeenCalledWith({ resource: context._module.resource });
+        });
+
+        it('calls operator.mergeVarsToContent with content and loader context, and preprocessor type', () => {
             spyOn(operator, 'mergeVarsToContent');
             loader.call(context, 'asdf');
-            expect(operator.mergeVarsToContent).toHaveBeenCalledWith('asdf', context);
+            expect(operator.mergeVarsToContent).toHaveBeenCalledWith('asdf', context, 'sass');
 
         });
 
         it('returns the result of mergeVarsToContent', () => {
             const content = 'require("./mocks/colors.js")\n' + '.someClass {\ncolor: $nice;\n}';
-            const merged = operator.mergeVarsToContent(content, context);
+            const merged = operator.mergeVarsToContent(content, context, 'sass');
             const result = loader.call(context, content);
             expect(result).toEqual(merged);
         });
@@ -92,25 +108,73 @@ describe('js-to-sass-vars-loader', () => {
         });
     });
 
+    describe('transformToLessVars', () => {
+        it('takes a hash object and transforms it to less variables', () => {
+            const colors = require('../mocks/colors.js');
+            expect(operator.transformToLessVars(colors)).toEqual('@white: #fff;\n@black: #000;\n');
+        });
+    });
+
     describe('mergeVarsToContent', () => {
         const context = {
             context: path.resolve()
         };
 
-        it('inserst vars to sass content', () => {
+        it('inserts vars to styles content', () => {
             const content = "require('./mocks/colors.js');\n" +
                 ".someClass { color: #fff;}";
-            const [ moduleData, sassContent ] = operator.divideContent(content);
+            const [ moduleData, stylesContent ] = operator.divideContent(content);
             const modulePath = operator.getModulePath(moduleData);
             const varData = operator.getVarData(modulePath, context);
-            const sassVars = operator.transformToSassVars(varData);
+            const vars = operator.transformToStyleVars(varData);
 
-            expect(operator.mergeVarsToContent(content, context)).toEqual(sassVars + sassContent);
+            expect(operator.mergeVarsToContent(content, context)).toEqual(vars + stylesContent);
         });
 
         it('gives back content as is if there is no requre', () => {
             const content = ".someClass { color: #fff;}";
             expect(operator.mergeVarsToContent(content, context)).toEqual(content);
         });
     });
+
+    describe('getResource', () => {
+        it('gets module.resource', () => {
+        const context = {
+            _module: {
+                resource: 'fakeResource'
+            }
+        };
+
+        expect(operator.getResource(context)).toEqual(context._module.resource);
+        });
+    });
+
+    describe('getPreprocessorType', () => {
+        it('should recognise sass resource', () => {
+            expect(operator.getPreprocessorType({ resource: '/path/to/resource.scss'})).toEqual('sass');
+        });
+
+        it('should recognise less resource', () => {
+            expect(operator.getPreprocessorType({ resource: '/path/to/resource.less'})).toEqual('less');
+        });
+
+        it('throw error if proprocessor type is unknown', () => {
+            const caller = () => {
+                operator.getPreprocessorType({ resource: 'unknown.extension'});
+            };
+            expect(caller).toThrow();
+        });
+    });
+
+    describe('transformToStyleVars', () => {
+        it('calls the proper transformer by type', () => {
+            spyOn(operator, 'transformToSassVars');
+            spyOn(operator, 'transformToLessVars');
+            operator.transformToStyleVars({ type: 'sass', varData: {} });
+            expect(operator.transformToSassVars).toHaveBeenCalled();
+
+            operator.transformToStyleVars({ type: 'less', varData: {} });
+            expect(operator.transformToLessVars).toHaveBeenCalled();
+        });
+    });
 });

demo/webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
                     loader: "sass-loader"
                 },
                 {
-                    loader: "js-to-sass-var-loader"
+                    loader: "../index.js"
                 }]
             }
         ]

index.js

@@ -49,23 +49,64 @@ const operator = {
         }, '');
     },
 
-    mergeVarsToContent (content, webpackContext) {
-        const [ moduleData, sassContent ] = this.divideContent(content);
+    transformToLessVars (varData) {
+        const keys = Object.keys(varData);
+        return keys.reduce( (result, key) => {
+            result += `@${key}: ${varData[key]};\n`;
+            return result;
+        }, '');
+    },
+
+    transformToStyleVars ({ type, varData } = {}) {
+        switch (type) {
+            case 'sass':
+                return this.transformToSassVars(varData);
+            case 'less':
+                return this.transformToLessVars(varData);
+
+        }
+    },
+
+    mergeVarsToContent (content, webpackContext, preprocessorType) {
+        const [ moduleData, styleContent ] = this.divideContent(content);
         if (moduleData) {
             const modulePath = this.getModulePath(moduleData);
             const varData = this.getVarData(modulePath, webpackContext);
-            const sassVars = this.transformToSassVars(varData);
-            return sassVars + sassContent;
+            const vars = this.transformToStyleVars({ type: preprocessorType, varData });
+            return vars + styleContent;
         }
         else return content;
+    },
+
+    getResource (context) {
+        return context._module.resource;
+    },
+
+    getPreprocessorType ( { resource } ={}) {
+        const preProcs = [
+            {
+                type: 'sass',
+                reg: /\.scss$/
+            },
+            {
+                type: 'less',
+                reg: /\.less$/
+            }
+        ];
+
+        const result = preProcs.find( item => item.reg.test(resource));
+        if (result) return result.type;
+        throw Error(`Unknown preprocesor type for ${resource}`);
     }
 };
 
 exports.operator = operator;
 
 const loader = function (content) {
     const webpackContext = this;
-    const merged = operator.mergeVarsToContent(content, webpackContext);
+    const resource = operator.getResource(webpackContext);
+    const preprocessorType = operator.getPreprocessorType({ resource });
+    const merged = operator.mergeVarsToContent(content, webpackContext, preprocessorType);
     return merged;
 };