Initial commit

Author: xzyfer

.appveyor.yml

@@ -0,0 +1,15 @@
+environment:
+  matrix:
+    - nodejs_version: "6"
+    - nodejs_version: "8"
+    - nodejs_version: "10"
+
+install:
+  - npm install
+
+test_script:
+  - node --version
+  - npm --version
+  - npm test
+
+build: off

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "6"
+  - "8"
+  - "10"

README.md

@@ -0,0 +1,92 @@
+[![Build Status](https://travis-ci.org/sasstools/json-importer.svg?branch=master)](https://travis-ci.org/sasstools/json-importer)
+
+# json-importer
+
+>Node Sass importer for for importing JSON files as maps
+
+## Disclaimer
+
+This is ALPHA software.
+
+It's messy. It's probably slow. It's probably buggy.
+
+Give it a shot. File bugs. Be patient.
+
+## Support
+
+- Node >= 6
+- node-sass >= 4.9.0
+
+## Install
+
+This package has a peer dependency on Node Sass for ensure import API compatibility.
+
+```sh
+npm install @node-sass/json-importer node-sass
+```
+
+## Usage
+
+Create a JSON file you want to import.
+```json
+// config.json
+{
+  "colors": {
+    "red": "#f00",
+    "blue": "#00f"
+  },
+  "sizes": ["16px", "20px", "24px"],
+}
+```
+
+When Node Sass parses an `@import` for a `.json` URL it will try load the file from disk. If found the JSON object will be imported as a Sass map named after the `.json` file.
+
+```scss
+@import "config.json";
+
+$colors: map-get($config, "colors");
+$sizes: map-get($config, "sizes");
+
+.button {
+  color: map-get($color, "red");
+  size: nth($sizes, 2);
+}
+```
+
+Produces the following CSS output
+
+```css
+.button {
+  color: "#f00";
+  size: "medium";
+}
+```
+
+### Node Sass API
+
+```js
+var sass = require('node-sass');
+var jsonImporter = require('@node-sass/json-importer');
+
+sass.render({
+  file: 'index.scss',
+  importer: [jsonImporter],
+}, function (err, result) {
+  if (err) throw err;
+  console.log(result.css.toString());
+});
+```
+
+### Node Sass CLI
+
+```sh
+$ node-sass index.scss --importer node_modules/@node-sass/json-importer/index.js
+```
+
+## Caveats
+
+### Everything is a String
+
+Sass has many types. `Number` which represent CSS numbers values with optional unit like `16px`. `Color` which represents CSS colour values like `red`, or `#f00`. These are structurally different from `String` like `"hello"`, `"16px"`, `"red"`, or `"#f00`.
+
+To reduce complexity the values produced by this importer are always `String`. As a result you may need to `unquote()` the values to cast them into their intended types if for example you wanted to do math on them.

index.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+
+const exists = (file) => {
+  try {
+    fs.accessSync(file, fs.constants.F_OK);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+const buildSassValue = (value) => {
+  if (Array.isArray(value)) {
+    return `(${value.reduce((prev, cur) => prev + `"${cur}",`, '')})`;
+  }
+  if (typeof value === "object") {
+    return `(${buildSassMap(value)})`;
+  }
+  return `"${value}"`;
+}
+
+const buildSassMap = (json) => {
+  return Object.keys(json).reduce((prev, cur) => {
+    return prev + `"${cur}": ${buildSassValue(json[cur])},`;
+  }, '');
+}
+
+const end = (done) => (value) => {
+  return done ? done(value) : value;
+}
+
+module.exports = function(url, prev, done) {
+  done = end(done);
+  if (!url) return done(null);
+
+  const parts = url.split('/');
+  const name = path.basename(parts.pop(), '.json');
+  const cwd = process.cwd();
+  const resolved = path.join(cwd, url);
+
+  try {
+    var json = require(resolved);
+  } catch(err) {
+    return done(err);
+  }
+
+  return done({ contents: `$${name}: (${buildSassMap(json)});` });
+};

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@node-sass/json-importer",
+  "version": "1.2.3",
+  "description": "Node Sass importer for importing JSON files as maps",
+  "repository": "https://github.com/sasstools/json-importer",
+  "keywords": [
+    "node-sass",
+    "sass",
+    "importer",
+    "json"
+  ],
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "engines": {
+    "node": ">=6"
+  },
+  "author": "xzyfer",
+  "license": "ISC",
+  "peerDependencies": {
+    "node-sass": "^4"
+  },
+  "devDependencies": {
+    "jest": "^23.4.0",
+    "node-sass": "^4.9.2"
+  }
+}

tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json-importer async should resolve flat json strings as Sass map 1`] = `
+"output {
+  contents: (\\"color\\": \\"red\\", \\"size\\": \\"small\\"); }
+"
+`;
+
+exports[`json-importer async should resolve json array values as Sass lists 1`] = `
+"output {
+  contents: (\\"colors\\": \\"red green blue\\", \\"sizes\\": (\\"small\\", \\"medium\\", \\"big\\")); }
+"
+`;
+
+exports[`json-importer async should resolve nested json strings as Sass map 1`] = `
+"output {
+  contents: (\\"colors\\": (\\"red\\": \\"#f00\\", \\"blue\\": \\"#00f\\"), \\"sizes\\": (\\"small\\": \\"16px\\", \\"big\\": \\"30px\\")); }
+"
+`;
+
+exports[`json-importer sync should resolve flat json strings as Sass map 1`] = `
+"output {
+  contents: (\\"color\\": \\"red\\", \\"size\\": \\"small\\"); }
+"
+`;
+
+exports[`json-importer sync should resolve json array values as Sass lists 1`] = `
+"output {
+  contents: (\\"colors\\": \\"red green blue\\", \\"sizes\\": (\\"small\\", \\"medium\\", \\"big\\")); }
+"
+`;
+
+exports[`json-importer sync should resolve nested json strings as Sass map 1`] = `
+"output {
+  contents: (\\"colors\\": (\\"red\\": \\"#f00\\", \\"blue\\": \\"#00f\\"), \\"sizes\\": (\\"small\\": \\"16px\\", \\"big\\": \\"30px\\")); }
+"
+`;

tests/fixtures/flat.json

@@ -0,0 +1,4 @@
+{
+  "color": "red",
+  "size": "small"
+}

tests/fixtures/list.json

@@ -0,0 +1,4 @@
+{
+  "colors": "red green blue",
+  "sizes": ["small", "medium", "big"]
+}

tests/fixtures/nested.json

@@ -0,0 +1,10 @@
+{
+  "colors": {
+    "red": "#f00",
+    "blue": "#00f"
+  },
+  "sizes": {
+    "small": "16px",
+    "big": "30px"
+  }
+}

tests/index.test.js

@@ -0,0 +1,47 @@
+const path = require('path');
+const sass = require('node-sass');
+const importer = require('../');
+
+const generate = (file) => `
+@import "${file}";
+output { contents: inspect($${path.basename(file, '.json')}) }
+`;
+
+const compile = function(data) {
+  return new Promise((yeah, nah) => {
+    return sass.render(
+      { data, importer },
+      (err, results) => err ? nah(err) : yeah(results.css.toString()),
+    );
+  });
+}
+
+const compileSync = function(data) {
+  return new Promise((yeah, nah) => {
+    try {
+      const results = sass.renderSync({ data, importer });
+      yeah(results.css.toString());
+    } catch (err) {
+      nah(err);
+    }
+  });
+}
+
+describe('json-importer', () => {
+  [[ 'async', compile ], [ 'sync', compileSync ]].forEach(([ label, func ]) => {
+    describe(label, () => {
+      it('should resolve flat json strings as Sass map', () => (
+        func(generate('tests/fixtures/flat.json'))
+          .then(result => expect(result).toMatchSnapshot())
+      ));
+      it('should resolve nested json strings as Sass map', () => (
+        func(generate('tests/fixtures/nested.json'))
+          .then(result => expect(result).toMatchSnapshot())
+      ));
+      it('should resolve json array values as Sass lists', () => (
+        func(generate('tests/fixtures/list.json'))
+          .then(result => expect(result).toMatchSnapshot())
+      ));
+    });
+  });
+});