diff --git a/README.md b/README.md
index a2c228b..55ee21c 100755
--- a/README.md
+++ b/README.md
@@ -440,6 +440,14 @@ $prop-name: PROP_VALUE
```
+###### aura.tokens
+
+```xml
+
+
+
+```
+
###### common.js
```js
diff --git a/package.json b/package.json
index 5d484b9..59765cf 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "theo",
- "version": "4.0.1",
+ "version": "4.1.0",
"description": "A set of Gulp plugins for transforming and formatting Design Properties",
"keywords": [
"css",
diff --git a/src/props/index.js b/src/props/index.js
index c5b3b82..ec80af3 100755
--- a/src/props/index.js
+++ b/src/props/index.js
@@ -318,6 +318,36 @@ registerFormat('aura.theme', json => {
return cleanOutput(xml);
});
+registerFormat('aura.tokens', json => {
+ let auraImports = _.toArray(json.auraImports).map(theme => {
+ return ``;
+ }).join('\n ');
+ let auraExtends = _.isString(json.auraExtends) ? json.auraExtends : null;
+ let props = _.map(json.props, prop => {
+ let name = camelCase(prop.name);
+ let cssProperties = (() => {
+ if (_.isString(prop.cssProperties)) {
+ return `property="${prop.cssProperties}"`;
+ }
+ if (_.isArray(prop.cssProperties)) {
+ return `property="${prop.cssProperties.join(',')}"`;
+ }
+ return ''
+ })()
+ return ``;
+ }).join('\n ');
+ let openTag = auraExtends
+ ? ``
+ : ``;
+ let xml = `
+ ${openTag}
+ ${auraImports}
+ ${props}
+
+ `;
+ return cleanOutput(xml);
+});
+
registerFormat('html', require('./formats/html'));
registerFormat('common.js', json => {
diff --git a/test/props/index.js b/test/props/index.js
index 4dec581..cde9338 100644
--- a/test/props/index.js
+++ b/test/props/index.js
@@ -773,12 +773,12 @@ describe('$props:formats', function() {
it('has aura:var nodes', function() {
assert(_.has(result['aura:theme'], 'aura:var'));
});
- it('var nodes have a "name" attribute', function() {
+ it('aura:var nodes have a "name" attribute', function() {
result['aura:theme']['aura:var'].forEach(function(n) {
assert(_.has(n.$, 'name'));
});
});
- it('valueMatchers nodes have a "category" attribute', function() {
+ it('aura:var nodes have a "value" attribute', function() {
result['aura:theme']['aura:var'].forEach(function(n) {
assert(_.has(n.$, 'value'));
});
@@ -793,6 +793,52 @@ describe('$props:formats', function() {
});
});
+ describe('aura.tokens', function() {
+ before($format('raw', 'aura.tokens', paths.sample, $toXML));
+ it('has a top level aura:tokens node', function() {
+ assert(_.has(result, 'aura:tokens'));
+ });
+ it('adds the "extends" attribute', function() {
+ assert(_.has(result['aura:tokens'].$, 'extends'));
+ assert(result['aura:tokens'].$.extends === 'one:theme');
+ });
+ it('has aura:token nodes', function() {
+ assert(_.has(result['aura:tokens'], 'aura:token'));
+ });
+ it('aura:token nodes have a "name" attribute', function() {
+ result['aura:tokens']['aura:token'].forEach(function(n) {
+ assert(_.has(n.$, 'name'));
+ });
+ });
+ it('aura:token nodes have a "value" attribute', function() {
+ result['aura:tokens']['aura:token'].forEach(function(n) {
+ assert(_.has(n.$, 'value'));
+ });
+ });
+ it('aura:token nodes have a "property" attribute if the token has a "cssProperties" key (array)', function() {
+ var token = _.find(result['aura:tokens']['aura:token'], function(n) {
+ return n.$.name === 'spacingNone';
+ });
+ assert(_.has(token, '$.property'));
+ assert(token.$.property === 'width,height,padding,margin');
+ });
+ it('aura:token nodes have a "property" attribute if the token has a "cssProperties" key (string)', function() {
+ var token = _.find(result['aura:tokens']['aura:token'], function(n) {
+ return n.$.name === 'stageLeftWidth';
+ });
+ assert(_.has(token, '$.property'));
+ assert(token.$.property === 'width');
+ });
+ it('has aura:import nodes', function() {
+ assert(_.has(result['aura:tokens'], 'aura:import'));
+ });
+ it('aura:import nodes have a "name" attribute', function() {
+ result['aura:tokens']['aura:import'].forEach(function(n) {
+ assert(_.has(n.$, 'name'));
+ });
+ });
+ });
+
describe('html', function() {
before($format('raw', 'html', paths.sink));
it('outputs html', function() {
diff --git a/test/props/mock/sample.json b/test/props/mock/sample.json
index cc809fa..be0218b 100644
--- a/test/props/mock/sample.json
+++ b/test/props/mock/sample.json
@@ -17,7 +17,8 @@
"spacing_none": {
"value": "0",
"label": "n",
- "type": "number"
+ "type": "number",
+ "cssProperties": ["width","height","padding","margin"]
},
"spacing_xx_small": {
"value": "0.25em",
@@ -34,7 +35,8 @@
},
"stage_left_width": {
"value": "25%",
- "type": "number"
+ "type": "number",
+ "cssProperties": "width"
},
"font": {
"value": "'Arial Black', 'Arial Bold', Gadget, sans-serif",
diff --git a/test/props/mock/sample.yml b/test/props/mock/sample.yml
index fa6f59a..5a1d596 100644
--- a/test/props/mock/sample.yml
+++ b/test/props/mock/sample.yml
@@ -12,6 +12,7 @@
value: "0"
label: "n"
type: "number"
+ cssProperties: ['width','height','padding','margin']
spacing_xx_small:
value: "0.25em"
label: "xxs"
@@ -22,6 +23,7 @@
opportunity:
value: "rgba(255, 255, 0)"
type: "color"
+ cssProperties: 'background-color'
stage_left_width:
value: "25%"
type: "number"