├── .gitignore ├── test ├── json │ ├── emptyObject.json │ ├── emptyString.json │ ├── numbers.json │ ├── strings.json │ ├── lists.json │ └── objects.json └── test.js ├── .npmignore ├── package.json ├── README.md └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /test/json/emptyObject.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /test/json/emptyString.json: -------------------------------------------------------------------------------- 1 | "" 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | node_modules 3 | test 4 | .idea 5 | -------------------------------------------------------------------------------- /test/json/numbers.json: -------------------------------------------------------------------------------- 1 | { 2 | "zIndex":100, 3 | "opacity":0.5 4 | } 5 | -------------------------------------------------------------------------------- /test/json/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "localNavHeight":"50px", 3 | "fontSize":"16px" 4 | } 5 | -------------------------------------------------------------------------------- /test/json/lists.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultMargin":["10px", 0, "5px", 0], 3 | "deepList": [ 4 | [1,2,3], 5 | [4,5,6] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /test/json/objects.json: -------------------------------------------------------------------------------- 1 | { 2 | "breakpoints":{ 3 | "portraitS": "320px", 4 | "portraitM": "360px", 5 | "portraitL": "414px" 6 | }, 7 | "deepObject":{ 8 | "a":{ 9 | "b":"c" 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsontosass-loader", 3 | "version": "0.1.8", 4 | "author": { 5 | "name": "Edward Irby @edwardirby" 6 | }, 7 | "description": "jsonToSass loader module for webpack", 8 | "files": [ 9 | "index.js" 10 | ], 11 | "scripts": { 12 | "test": "mocha --reporter spec" 13 | }, 14 | "dependencies": { 15 | "loader-utils": "~0.2.11" 16 | }, 17 | "devDependencies": { 18 | "mocha": "2.5.3", 19 | "should": "9.0.0", 20 | "should-sinon": "0.0.5", 21 | "sinon": "1.17.4" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/EdwardIrby/jsontosass-loader.git" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/EdwardIrby/jsontosass-loader.git/issues" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # NO LONGER SUPPORTED. IF YOU WOULD LIKE TO TAKE OVER THIS PACKAGE SEND ME A MESSAGE. 3 | --- 4 | # json to sass loader for webpack 5 | 6 | ### 0.1.8 Changes 7 | - **Flagged as cacheable** 8 | - **Simpler implementation** (See Example Config) 9 | - **Marked dependencies** (triggers build on webpack watch and webpack-dev-server when vars file is changed) 10 | 11 | 12 | ### Installation 13 | 14 | `npm install jsontosass-loader --save-dev` 15 | 16 | ## Usage 17 | 18 | [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html) 19 | 20 | ### Example config 21 | 22 | ``` javascript 23 | var sassVars = 'path/to/your/vars.json'; 24 | var webpackConfig = { 25 | module: { 26 | loaders:[ 27 | {test: /.scss$/, loader: "style!css!sass!jsontosass?path="+ sassVars} 28 | ] 29 | }, 30 | } 31 | 32 | ``` 33 | 34 | **Input [YourVars.json file]** 35 | ``` json 36 | { 37 | "breakpoints":{ 38 | "portraitS": "320px", 39 | "portraitM": "360px", 40 | "portraitL": "414px", 41 | }, 42 | "localNavHeight":"50px", 43 | } 44 | ``` 45 | 46 | **Output SCSS** 47 | ``` scss 48 | $breakpoints:(portraitS:320px,portraitM:360px,portraitL:414px); 49 | $localNavHeight:50px; 50 | ``` 51 | 52 | 53 | Forked from gist: [jsonToSassVars](https://gist.github.com/Kasu/ea4f4861a81e626ea308) and [prepend-loader](https://gist.github.com/Kasu/29452051023ff5337bd7) 54 | 55 | ## License 56 | 57 | MIT (http://www.opensource.org/licenses/mit-license.php) 58 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var loaderUtils = require("loader-utils"); 4 | var fs = require('fs'); 5 | var path = require("path"); 6 | module.exports = function(content) { 7 | var query = loaderUtils.parseQuery(this.query).path; 8 | var queryString = JSON.stringify(query); 9 | var varPath = queryString.replace(/["']/g, ''); 10 | this.cacheable(); 11 | var contentPath = path.resolve(varPath); 12 | this.addDependency(contentPath); 13 | var obj = JSON.parse(fs.readFileSync(contentPath, 'utf8')); 14 | 15 | 16 | function jsonToSassVars (obj, indent) { 17 | // Make object root properties into sass variables 18 | var sass = ""; 19 | for (var key in obj) { 20 | sass += "$" + key + ":" + JSON.stringify(obj[key], null, indent) + ";\n"; 21 | } 22 | 23 | if (!sass) { 24 | return sass 25 | } 26 | 27 | // Store string values (so they remain unaffected) 28 | var storedStrings = []; 29 | sass = sass.replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, function (str) { 30 | 31 | var id = "___JTS" + storedStrings.length; 32 | storedStrings.push({id: id, value: str}); 33 | return id; 34 | }); 35 | 36 | // Convert js lists and objects into sass lists and maps 37 | sass = sass.replace(/[{\[]/g, "(").replace(/[}\]]/g, ")"); 38 | 39 | // Put string values back (now that we're done converting) 40 | storedStrings.forEach(function (str) { 41 | str.value = str.value.replace(/["']/g, ''); 42 | sass = sass.replace(str.id, str.value); 43 | }); 44 | 45 | return sass; 46 | } 47 | 48 | 49 | var sass = jsonToSassVars(obj); 50 | 51 | return sass ? sass + '\n' + content : content; 52 | } 53 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var sinon = require('sinon'); 2 | var should = require('should'); 3 | require('should-sinon'); 4 | 5 | var loader = require('../'); 6 | var context; 7 | var someSass = '$primary-color: #333;' 8 | 9 | describe('loader', function() { 10 | beforeEach(function() { 11 | context = { 12 | cacheable: sinon.spy(), 13 | addDependency: sinon.spy() 14 | } 15 | }); 16 | 17 | it('should convert JSON numbers to Sass', function() { 18 | context.query = '?path=test/json/numbers.json' 19 | loader.call(context, someSass) 20 | .should.be.eql('$zIndex:100;\n$opacity:0.5;\n\n$primary-color: #333;'); 21 | 22 | context.cacheable.should.have.callCount(1) 23 | context.addDependency.should.have.callCount(1) 24 | }); 25 | 26 | it('should convert JSON strings to Sass', function() { 27 | context.query = '?path=test/json/strings.json' 28 | loader.call(context, someSass) 29 | .should.be.eql('$localNavHeight:50px;\n$fontSize:16px;\n\n$primary-color: #333;'); 30 | 31 | context.cacheable.should.have.callCount(1) 32 | context.addDependency.should.have.callCount(1) 33 | }); 34 | 35 | it('should convert JSON lists to Sass lists', function() { 36 | context.query = '?path=test/json/lists.json' 37 | loader.call(context, someSass) 38 | .should.be.eql('$defaultMargin:(10px,0,5px,0);\n$deepList:((1,2,3),(4,5,6));\n\n$primary-color: #333;'); 39 | 40 | context.cacheable.should.have.callCount(1) 41 | context.addDependency.should.have.callCount(1) 42 | }); 43 | 44 | it('should convert JSON objects to Sass maps', function() { 45 | context.query = '?path=test/json/objects.json' 46 | loader.call(context, someSass) 47 | .should.be.eql('$breakpoints:(portraitS:320px,portraitM:360px,portraitL:414px);\n$deepObject:(a:(b:c));\n\n$primary-color: #333;'); 48 | 49 | context.cacheable.should.have.callCount(1) 50 | context.addDependency.should.have.callCount(1) 51 | }); 52 | 53 | it('should convert empty string JSON to Sass', function() { 54 | context.query = '?path=test/json/emptyString.json' 55 | loader.call(context, someSass) 56 | .should.be.eql(someSass); 57 | 58 | context.cacheable.should.have.callCount(1) 59 | context.addDependency.should.have.callCount(1) 60 | }); 61 | 62 | it('should convert empty object JSON to Sass', function() { 63 | context.query = '?path=test/json/emptyObject.json' 64 | loader.call(context, someSass) 65 | .should.be.eql(someSass); 66 | 67 | context.cacheable.should.have.callCount(1) 68 | context.addDependency.should.have.callCount(1) 69 | }); 70 | }); 71 | --------------------------------------------------------------------------------