start porting js-to-less-var-loader

Author: tompascall

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015"]
+}

.gitignore

@@ -0,0 +1,32 @@
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Temporary files
+*.swp
+*.swo
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+coverage.data
+.coveralls.yml
+
+# Dependency directories
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+      - "4.0"
+script:
+      - npm run test:coverage

README.md

@@ -0,0 +1,90 @@
+![Build Status](https://travis-ci.org/tompascall/js-to-sass-var-loader.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/tompascall/js-to-sass-var-loader/badge.svg?branch=master)](https://coveralls.io/github/tompascall/js-to-sass-var-loader?branch=master)
+
+## js-to-sass-var-loader
+
+### A [Webpack]() loader to share data for sass variables between javascript modules and sass files
+
+This loader is for that special case when you would like to import data from a javascript module into a sass file. The [sass loader](https://github.com/webpack-contrib/sass-loader) complains, because importing js module is not a valid sass instruction.
+
+##### The loader only handles the case when you want to inject sass variables into a sass file via a javascript module.
+
+#### Prerequisites
+
+- Nodejs >= 4.0
+- [sass](http://sass-lang.com/) for css pre-processing
+- Webpack for module bundle
+
+
+#### Setting up Webpack config
+
+Probably you use [sass-loader](https://github.com/webpack-contrib/sass-loader) with Webpack. The usage in this case is pretty simple: just put this loader before sass-loader in your webpack config:
+
+```js
+{
+  rules: [
+    test: /\.sass$/,
+    use: [
+      {
+        loader: "style-loader"
+      },
+      {
+        loader: "css-loader"
+      },
+      {
+        loader: "sass-loader"
+      },
+      {
+        loader: "js-to-sass-var-loader"
+      }
+    ]
+  ]
+}
+```
+
+#### Usage
+
+Let's assume we would like to store some variable data in a module like this:
+
+```js
+// colors.js
+
+const colors = {
+  'fancy-white': '#FFFFFE',
+  'fancy-black': '#000001'
+};
+
+module.exports = colors;
+```
+
+You can use this module in your favorite templates / frameworks etc., and you don't want to repeat yourself when using these colors in a sass file as variable (e.g. `$fancy-white: #FFFFFE; /*...*/ background-color: $fancy-white`). In this situation just require your module in the beginning of your sass module:
+```js
+require('relative/path/to/colors.js');
+
+// ...
+.some-class {
+  background-color: $fancy-white
+}
+// ...
+```
+
+**The form of the required data is important**: it must be an object with key/values pair, the key will be the name of the sass variable.
+
+#### Misc
+
+You can use other require form (`require('relative/path/to/module').someProperty`), too.  
+
+#### Demo
+
+You can try the loader via a small fake app in the `demo` folder:  
+```sh
+cd demo
+npm i
+npm run demo
+```
+The webpack dev server serves the app on `localhost:8030`. In the app we share data between js and sass modules.
+
+#### Development
+
+Run tests with `npm test` or `npm run test:watch`.  
+
+The transformer is developed with tdd, so if you would like to contribute, please, write your tests for your new functionality, and send pull request to integrate your changes.

__tests__/index.spec.js

@@ -0,0 +1,116 @@
+import path from 'path';
+const loader = require('../index').default;
+const { operator } = require('../index');
+
+describe('js-to-sass-vars-loader', () => {
+
+    describe('module', () => {
+        const context = {
+            context: path.resolve()
+        };
+
+        it('exports a function', () => {
+            expect(typeof loader).toEqual('function');
+        });
+
+        it('calls operator.mergeVarsToContent with content and loader context', () => {
+            spyOn(operator, 'mergeVarsToContent');
+            loader.call(context, 'asdf');
+            expect(operator.mergeVarsToContent).toHaveBeenCalledWith('asdf', context);
+
+        });
+
+        it('returns the result of mergeVarsToContent', () => {
+            const content = 'require("./mocks/colors.js")\n' + '.someClass {\ncolor: $nice;\n}';
+            const merged = operator.mergeVarsToContent(content, context);
+            const result = loader.call(context, content);
+            expect(result).toEqual(merged);
+        });
+    });
+
+    describe('divideContent', () => {
+        it('divides the require (if it exists) from the content', () => {
+            const content = "require('colors.js');\n" +
+                ".someClass { color: #fff;}";
+            expect(operator.divideContent(content)[0]).toEqual("require('colors.js');");
+            expect(operator.divideContent(content)[1]).toEqual("\n.someClass { color: #fff;}");
+        });
+
+        it('gives back content if there is no require in content', () => {
+            const content = ".someClass { color: #fff;}";
+            expect(operator.divideContent(content)[0]).toEqual("");
+            expect(operator.divideContent(content)[1]).toEqual(content);
+        });
+
+        it('handles more requires when divide', () => {
+            const content = "require('colors.js');\n" +
+                "require('sizes.js');\n" +
+                ".someClass { color: #fff;}";
+            expect(operator.divideContent(content)[0]).toEqual("require('colors.js');\n" + "require('sizes.js');");
+            expect(operator.divideContent(content)[1]).toEqual("\n.someClass { color: #fff;}");
+        });
+
+        it('handles the form of request("asdf").someProp', () => {
+            const content = "require('corners.js').typeOne;\n" + ".someClass { color: #fff;}";
+            expect(operator.divideContent(content)[0]).toEqual("require('corners.js').typeOne;");
+        });
+    });
+
+    describe('getModulePath', () => {
+        it('extracts module paths and methodName into an array', () => {
+            expect(operator.getModulePath('require("./mocks/colors.js");\n')).toEqual([{path: "./mocks/colors.js"}]);
+
+            expect(operator.getModulePath('require("./mocks/colors.js");\n' + 'require("./mocks/sizes.js");')).toEqual([{path: "./mocks/colors.js"}, {path:"./mocks/sizes.js"}]);
+
+            expect(operator.getModulePath('require("./mocks/corners.js").typeTwo;\n')).toEqual([{path: "./mocks/corners.js", methodName: 'typeTwo'}]);
+        });
+    });
+
+    describe('getVarData', () => {
+        const context = { context: path.resolve()};
+
+        it('gets variable data by modulePath with context', () => {
+            const varData = operator.getVarData([{path: './mocks/colors.js' }], context);
+            expect(varData).toEqual({ white: '#fff', black: '#000'});
+        });
+
+        it('merges module data if there are more requests', () => {
+            const varData = operator.getVarData([{path:'./mocks/colors.js'}, {path:'./mocks/sizes.js'}], context);
+            expect(varData).toEqual({ white: '#fff', black: '#000', small: '10px', large: '50px'});
+        });
+
+        it('handles methodName if it is given', () => {
+            const varData = operator.getVarData([{ path:'./mocks/corners.js', methodName: 'typeOne'}], context);
+            expect(varData).toEqual({ tiny: '1%', medium: '3%'});
+        });
+    });
+
+    describe('transformToSassVars', () => {
+        it('takes a hash object and transforms it to sass variables', () => {
+            const colors = require('../mocks/colors.js');
+            expect(operator.transformToSassVars(colors)).toEqual('$white: #fff;\n$black: #000;\n');
+        });
+    });
+
+    describe('mergeVarsToContent', () => {
+        const context = {
+            context: path.resolve()
+        };
+
+        it('inserst vars to sass content', () => {
+            const content = "require('./mocks/colors.js');\n" +
+                ".someClass { color: #fff;}";
+            const [ moduleData, sassContent ] = operator.divideContent(content);
+            const modulePath = operator.getModulePath(moduleData);
+            const varData = operator.getVarData(modulePath, context);
+            const sassVars = operator.transformToSassVars(varData);
+
+            expect(operator.mergeVarsToContent(content, context)).toEqual(sassVars + sassContent);
+        });
+
+        it('gives back content as is if there is no requre', () => {
+            const content = ".someClass { color: #fff;}";
+            expect(operator.mergeVarsToContent(content, context)).toEqual(content);
+        });
+    });
+});

demo/colors.js

@@ -0,0 +1,10 @@
+module.exports = {
+    'fancy-red': '#db0f3b',
+    'fancy-blue': '#0f9adb',
+    'fancy-yellow': '#e5c63b',
+    'fancy-green': '#4fdd59',
+    'fancy-white': '#fcfff7',
+    'fancy-black': '#1f2120',
+    'fancy-pink': '#d326c8',
+    'fancy-lilac': '#941ece'
+};

demo/index.html

@@ -0,0 +1,14 @@
+<html>
+    <head>
+        <title>Loader Demo</title>
+        <meta charset="UTF-8">
+    </head>
+    <body>
+        <div id="selected-squares-container"></div>
+        <span style="font-family: monospace; font-size: small">Choose color:</span>
+        <select name="colors"></select>
+        <button id="add-square-button">Add square</button>
+
+        <script src="bundle.js"></script>
+    </body>
+</html>

demo/index.js

@@ -0,0 +1,36 @@
+import './style.scss';
+import colors from './colors';
+
+const select = document.querySelector('select');
+const container = document.getElementById('selected-squares-container');
+
+function createOptions () {
+    const fragment = document.createDocumentFragment();
+    for (let key in colors) {
+        const option = document.createElement('option');
+        option.textContent = key;
+        option.setAttribute('value', colors[key]);
+        fragment.appendChild(option);
+    }
+    select.appendChild(fragment);
+}
+
+function createSquare (type) {
+    const square = document.createElement('div');
+    square.className = `square ${type}`;
+    return square;
+}
+
+function addSquare (e) {
+    e.preventDefault();
+    const type = select.options[select.selectedIndex].text;
+    container.appendChild(createSquare(type));
+}
+
+function setupButtonHandler () {
+    document.getElementById('add-square-button')
+        .addEventListener('click', addSquare);
+}
+
+createOptions();
+setupButtonHandler();

demo/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "js-to-sass-var-loader-demo",
+  "version": "1.0.1",
+  "description": "Demo for js-to-sass-var-loader",
+  "main": "index.js",
+  "scripts": {
+    "demo": "./node_modules/.bin/webpack-dev-server --config webpack.config.js"
+  },
+  "keywords": [
+    "demo"
+  ],
+  "author": "tompascall",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-env": "^1.3.2",
+    "css-loader": "^0.28.0",
+    "js-to-sass-var-loader": "^1.0.0",
+    "node-sass": "^4.5.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "webpack": "^2.3.2",
+    "webpack-dev-server": "^2.4.2"
+  }
+}

demo/style.scss

@@ -0,0 +1,40 @@
+require('./colors.js');
+
+.square {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+}
+
+.fancy-blue {
+  background-color: $fancy-blue;
+}
+
+.fancy-red {
+  background-color: $fancy-red;
+}
+
+.fancy-yellow {
+  background-color: $fancy-yellow;
+}
+
+.fancy-green {
+  background-color: $fancy-green;
+}
+
+.fancy-white {
+  background-color: $fancy-white;
+}
+
+.fancy-black {
+  background-color: $fancy-black;
+}
+
+.fancy-lilac {
+  background-color: $fancy-lilac;
+}
+
+.fancy-pink {
+  background-color: $fancy-pink;
+}
+

demo/webpack.config.js

@@ -0,0 +1,36 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: './index.js',
+    output: {
+      filename: 'bundle.js',
+        //path: path.resolve(__dirname)
+    },
+    module: {
+        rules: [
+            { test: /\.(js)$/, use: 'babel-loader' },
+            {
+                test: /\.scss$/,
+                use: [{
+                    loader: "style-loader"
+                }, {
+                    loader: "css-loader"
+                }, {
+                    loader: "sass-loader"
+                },
+                {
+                    loader: "js-to-sass-var-loader"
+                }]
+            }
+        ]
+    },
+    devServer: {
+        inline: true,
+        hot: true,
+        port: 8030
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ]
+}

index.js

@@ -0,0 +1,72 @@
+const path = require('path');
+
+const requireReg = /require\s*\(['|"](.+)['|"]\)(?:\.([^;\s]+))?[;\s]/g;
+
+const operator = {
+    divideContent (content) {
+        let match;
+        let lastIndex;
+        const reg = new RegExp(requireReg);
+        while (match = reg.exec(content)) {
+            lastIndex = reg.lastIndex;
+        }
+        if (typeof lastIndex !== 'undefined') {
+            return [
+                content.slice(0, lastIndex),
+                content.slice(lastIndex)
+            ];
+        }
+        else {
+            return ['', content];
+        }
+    },
+
+    getModulePath (modulePart) {
+        const reg = new RegExp(requireReg);
+        const modulePaths = [];
+        let match;
+        while (match = reg.exec(modulePart)) {
+            modulePaths.push({
+                path: match[1],
+                methodName: match[2]
+            });
+        }
+        return modulePaths;
+    },
+
+    getVarData (modulePath, webpackContext) {
+        return modulePath.reduce( (accumulator, currentPath) => {
+            const moduleData = (currentPath.methodName)? require(path.join(webpackContext.context, currentPath.path))[currentPath.methodName] : require(path.join(webpackContext.context, currentPath.path));
+            return Object.assign(accumulator, moduleData);
+        }, {});
+    },
+
+    transformToSassVars (varData) {
+        const keys = Object.keys(varData);
+        return keys.reduce( (result, key) => {
+            result += `$${key}: ${varData[key]};\n`;
+            return result;
+        }, '');
+    },
+
+    mergeVarsToContent (content, webpackContext) {
+        const [ moduleData, sassContent ] = this.divideContent(content);
+        if (moduleData) {
+            const modulePath = this.getModulePath(moduleData);
+            const varData = this.getVarData(modulePath, webpackContext);
+            const sassVars = this.transformToSassVars(varData);
+            return sassVars + sassContent;
+        }
+        else return content;
+    }
+};
+
+exports.operator = operator;
+
+const loader = function (content) {
+    const webpackContext = this;
+    const merged = operator.mergeVarsToContent(content, webpackContext);
+    return merged;
+};
+
+exports.default = loader;

jest.config

@@ -0,0 +1,3 @@
+{
+    "verbose": true
+}

mocks/colors.js

@@ -0,0 +1,6 @@
+const colors = {
+    white: '#fff',
+    black: '#000'
+};
+
+module.exports = colors;

mocks/corners.js

@@ -0,0 +1,9 @@
+exports.typeOne = {
+    tiny: '1%',
+    medium: '3%'
+};
+
+exports.typeTwo = {
+    tiny: '2%',
+    medium: '5%'
+};

mocks/sizes.js

@@ -0,0 +1,7 @@
+
+const sizes = {
+    large: '50px',
+    small: '10px'
+};
+
+module.exports = sizes;

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "js-to-styles-var-loader",
+  "version": "0.0.1",
+  "description": "Webpack loader for sharing data amongst (sass || less) && javascript modules",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest --config jest.config",
+    "test:coverage": "jest --config jest.config --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+    "test:watch": "jest --watch --config jest.config"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tompascall/js-to-styles-var-loader.git"
+  },
+  "keywords": [
+    "webpack",
+    "loader",
+    "sass",
+    "less",
+    "variables",
+    "DRY"
+  ],
+  "author": "tompascall",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/tompascall/js-to-styles-var-loader/issues"
+  },
+  "homepage": "https://github.com/tompascall/js-to-styles-var-loader#readme",
+  "devDependencies": {
+    "babel-jest": "^19.0.0",
+    "babel-preset-es2015": "^6.24.0",
+    "coveralls": "^2.12.0",
+    "jest": "^19.0.2"
+  }
+}