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;
+}
+