A new, cleaner, tilde interface.

Author: ojame

.eslintrc

@@ -7,8 +7,8 @@
  "no-extra-parens": [2],
  "no-unused-vars": [2],
  "no-loop-func": [0],
+ "no-eval": [0],
  "key-spacing": [0],
- "max-len": [2, 200],
  "strict": [0],
  "indent": [2],
  "quotes": [2, "single", "avoid-escape"],

README.md

@@ -6,17 +6,24 @@
 [ci-img]: https://travis-ci.org/ojame/postcss-local-vars.svg
 [ci]: https://travis-ci.org/ojame/postcss-local-vars
 
-```css
-/* var.css */
-local.primaryGreen: #8EE7D3;
+**vars.json**
+```js
+[{
+ colors: {
+ primary: '#8EE7D3',
+ },
+}]
 ```
 
+**input**
 ```css
+~colors: "./vars.json";
 .foo {
- color: import local.primaryGreen from './vars.css';
+ color: primary from ~colors;
 }
 ```
 
+**output**
 ```css
 .foo {
  color: #8EE7D3;
@@ -25,36 +32,52 @@ local.primaryGreen: #8EE7D3;
 
 #### Within static values
 
-```css
-/* var.css */
-local.primaryGreen: #8EE7D3;
+**vars.json**
+```js
+[{
+ borders: {
+ weight: '2px',
+ style: 'solid',
+ },
+}]
 ```
 
+**input**
 ```css
+~borders: "./vars.json";
 .foo {
- border: 2px solid import local.primaryGreen from './vars.css';
+ border: weight from ~borders style from ~borders black;
 }
 ```
 
+**output**
 ```css
 .foo {
- border: 2px solid #8EE7D3;
+ border: 2px solid black;
 }
 ```
 
 #### @ Rules
 
-```css
-/* var.css */
-local.query: 200px;
+**vars.json**
+```js
+[{
+ queries: {
+ maxWidth: '200px',
+ },
+}]
 ```
 
+**input**
 ```css
-@media (max-width: import local.query from './vars.css') {
+~queries: "./vars.json";
+
+@media (max-width: maxWidth from ~queries) {
  color: blue;
 }
 ```
 
+**output**
 ```css
 @media (max-width: 200px) {
  color: blue;

index.js

@@ -2,42 +2,53 @@ var postcss = require('postcss');
 var fs = require('fs');
 
 module.exports = postcss.plugin('postcss-local-vars', function () {
- var importRegex = /((import)(\s+)(local)(\.))((?:[A-z]+))( )(from)( )(".*?"|'.*?')/g;
- var nameRegex = /.*?((local)(\.))((?:[A-z]+))/g;
+ var sets = {};
+ var regex = /((?:[A-z]+))( )(from)(\s+)(~)((?:[A-z]+))/g;
 
  var readFile = function(file) {
  return fs.readFileSync(file, 'utf8');
  };
 
- var requiresAction = function(context) {
- return context.indexOf('import local.') !== -1;
+ var getVariables = function(name, path) {
+ var file = readFile(path.replace(/'|"/g, ''));
+ var requiredSet = name.replace(/~/g, '');
+ var variableSets = eval(file)[0];
+ sets[requiredSet] = variableSets[requiredSet];
  };
 
- var getPath = function(context) {
- var pathMatches = importRegex.exec(context);
- return pathMatches[pathMatches.length - 1].replace(/'|"/g, '');
+ var requiresAction = function(context) {
+ return context.indexOf(' ~') !== -1;
  };
 
- var getName = function(context) {
- var nameMatches = nameRegex.exec(context);
- return nameMatches[nameMatches.length - 1];
+ var getValue = function(variable, parent) {
+ return sets[parent][variable];
  };
 
  var strip = function(context) {
  if (!requiresAction(context)) {
  return context;
  }
 
- var variablesFile = readFile(getPath(context));
- var variablesRegex = new RegExp('(local\.' + getName(context) + ')(:).*?(.*?)(;)', 'g');
- var variables = variablesRegex.exec(variablesFile);
- var value = variables[variables.length - 2].trim();
+ var requires = context.match(regex);
 
- return context.replace(importRegex, value);
+ requires.forEach(function(require) {
+ var matches = regex.exec(require);
+ regex.lastIndex = 0;
+ var variable = matches[1];
+ var variableSet = matches[matches.length - 1];
+
+ context = context.replace(require, getValue(variable, variableSet));
+ });
+
+ return context;
  };
 
  return function (css) {
  css.eachInside(function (node) {
+ if (node.prop && node.prop.indexOf('~') > -1) {
+ getVariables(node.prop, node.value);
+ }
+
  if (node.type === 'decl') {
  node.value = strip(node.value);
  }

test/test.js

@@ -19,30 +19,38 @@ describe('postcss-local-vars', function () {
  });
 
  it('replaces variables in values', function (done) {
- test('a{color: import local.green from "./test/vars.css"}', 'a{color: #8EE7D3}', { }, done);
+ test('~colors: "test/vars.json"; a{color: primary from ~colors;}', '~colors: "test/vars.json"; a{color: #8EE7D3;}', { }, done);
  });
 
- it('replaces variables in values with semi-colons', function (done) {
- test('a{color: import local.green from "./test/vars.css";}', 'a{color: #8EE7D3;}', { }, done);
+ it('replaces variables in values without semi-colons', function (done) {
+ test('~colors: "test/vars.json"; a{background: blue; color: primary from ~colors}', '~colors: "test/vars.json"; a{background: blue; color: #8EE7D3}', { }, done);
  });
 
  it('replaces variables in values with single quotes', function (done) {
- test('a{color: import local.green from \'./test/vars.css\';}', 'a{color: #8EE7D3;}', { }, done);
+ test('~colors: \'test/vars.json\'; a{color: primary from ~colors;}', '~colors: \'test/vars.json\'; a{color: #8EE7D3;}', { }, done);
  });
 
  it('replaces variables at start of value', function (done) {
- test('a{border: import local.borderWeight from "./test/vars.css" solid #8EE7D3;}', 'a{border: 2px solid #8EE7D3;}', { }, done);
+ test('~borders: "test/vars.json"; a{border: weight from ~borders solid #8EE7D3;}', '~borders: "test/vars.json"; a{border: 2px solid #8EE7D3;}', { }, done);
  });
 
  it('replaces variables in middle of value', function (done) {
- test('a{border: 2px import local.borderStyle from "./test/vars.css" #8EE7D3;}', 'a{border: 2px solid #8EE7D3;}', { }, done);
+ test('~borders: "test/vars.json"; a{border: 2px style from ~borders #8EE7D3;}', '~borders: "test/vars.json"; a{border: 2px solid #8EE7D3;}', { }, done);
  });
 
  it('replaces variables at end of value', function (done) {
- test('a{border: 2px solid import local.green from "./test/vars.css";}', 'a{border: 2px solid #8EE7D3;}', { }, done);
+ test('~colors: "test/vars.json"; a{border: 2px solid primary from ~colors;}', '~colors: "test/vars.json"; a{border: 2px solid #8EE7D3;}', { }, done);
  });
 
  it('replaces variables in @ rules', function (done) {
- test('@media (max-width: import local.mediaQuery from "./test/vars.css") {color: red;}', '@media (max-width: 200px) {color: red;}', { }, done);
+ test('~queries: "test/vars.json"; @media (max-width: maxWidth from ~queries) {color: red;}', '~queries: "test/vars.json"; @media (max-width: 200px) {color: red;}', { }, done);
+ });
+
+ it('multiple sources', function (done) {
+ test('~colors: "test/vars.json"; ~borders: "test/vars.json"; a{color: primary from ~colors; border: 2px style from ~borders black}', '~colors: "test/vars.json"; ~borders: "test/vars.json"; a{color: #8EE7D3; border: 2px solid black}', { }, done);
+ });
+
+ it('multiple variables in a single value', function (done) {
+ test('~borders: "test/vars.json"; a{border: weight from ~borders style from ~borders black}', '~borders: "test/vars.json"; a{border: 2px solid black}', { }, done);
  });
 });

test/vars.css

@@ -0,0 +1,14 @@
+[{
+ colors: {
+ primary: '#8EE7D3',
+ },
+
+ queries: {
+ maxWidth: '200px',
+ },
+
+ borders: {
+ weight: '2px',
+ style: 'solid',
+ },
+}]