add typescript declarations formats

README.md

@@ -1,3 +1,7 @@
+<pre>
+<a href="https://amzn.github.io/style-dictionary/#/version_3">Get ready for the next release of Style Dictionary! 🚀</a>
+</pre>
+
 <img src="docs/assets/logo.png" alt="Style Dictionary logo and mascot" title="&quot;Pascal&quot;" width="100" align="right" />
 
 [![npm version](https://img.shields.io/npm/v/style-dictionary.svg?style=flat-square)](https://badge.fury.io/js/style-dictionary)
@@ -63,7 +67,7 @@ Call this in the root directory of your project. The only thing needed is a `con
 | --version | -v | Display the version |
 
 ### Node
-You can also use the style dictionary build system in node if you want to [extend](#extend) the functionality or use it in another build system like Grunt or Gulp.
+You can also use the style dictionary build system in node if you want to [extend](#extending) the functionality or use it in another build system like Grunt or Gulp.
 ```javascript
 const StyleDictionary = require('style-dictionary').extend('config.json');
 

__tests__/formats/__snapshots__/all.test.js.snap

@@ -670,3 +670,27 @@ exports[`formats all should match sketch/palette/v2 snapshot 1`] = `
   ]
 }"
 `;
+
+exports[`formats all should match typescript/es6-declarations snapshot 1`] = `
+"/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+export const color_red : string; // comment"
+`;
+
+exports[`formats all should match typescript/module-declarations snapshot 1`] = `
+"/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+export default tokens;
+declare interface DesignToken { value: string; name?: string; path?: string[]; comment?: string; attributes?: any; original?: any; }
+declare const tokens: {
+  \\"color\\": {
+    \\"red\\": DesignToken
+  }
+}"
+`;

__tests__/formats/typeScriptEs6Declarations.test.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+var fs = require('fs-extra');
+var helpers = require('../__helpers');
+var formats = require('../../lib/common/formats');
+
+var file = {
+  "destination": "__output/",
+  "format": "typescript/es6-declarations",
+  "filter": {
+    "attributes": {
+      "category": "color"
+    }
+  }
+};
+
+var dictionary = {
+  "allProperties": [{
+    "name": "red",
+    "value": "#EF5350",
+    "original": {
+      "value": "#EF5350"
+    },
+    "attributes": {
+      "category": "color",
+      "type": "base",
+      "item": "red",
+      "subitem": "400"
+    },
+    "path": [
+      "color",
+      "base",
+      "red",
+      "400"
+    ]
+  }]
+};
+
+var formatter = formats['typescript/es6-declarations'].bind(file);
+
+describe('formats', () => {
+  describe('typescript/es6-declarations', () => {
+    beforeEach(() => {
+      helpers.clearOutput();
+    });
+
+    afterEach(() => {
+      helpers.clearOutput();
+    });
+
+    it('should be a valid TS file', () => {
+      const declarations = './__tests__/__output/output.d.ts';
+      fs.writeFileSync(declarations, formatter(dictionary) );
+
+      // get all lines that begin with export
+      const lines = fs.readFileSync(declarations, 'utf-8')
+        .split('\n')
+        .filter(l => l.indexOf('export') >= 0);
+
+      // assert that any lines have a string type definition
+      lines.forEach(l => {
+        expect(l.match(/^export.* : string;$/g).length).toEqual(1);
+      });
+    });
+  });
+
+});

__tests__/formats/typeScriptModuleDeclarations.test.js

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+var fs = require('fs-extra');
+var helpers = require('../__helpers');
+var formats = require('../../lib/common/formats');
+
+var file = {
+  "destination": "__output/",
+  "format": "typescript/module-declarations",
+  "filter": {
+    "attributes": {
+      "category": "color"
+    }
+  }
+};
+
+var dictionary = {
+  "properties": {
+    "color": {
+      "red": {"value": "#FF0000"}
+    }
+  }
+};
+
+
+var formatter = formats['typescript/module-declarations'].bind(file);
+
+describe('formats', () => {
+  describe('typescript/module-declarations', () => {
+    beforeEach(() => {
+      helpers.clearOutput();
+    });
+
+    afterEach(() => {
+      helpers.clearOutput();
+    });
+
+    it('should be a valid TS file', () => {
+      const declarations = './__tests__/__output/output-module.d.ts';
+      fs.writeFileSync(declarations, formatter(dictionary) );
+
+      // get all lines that have DesignToken
+      const lines = fs.readFileSync(declarations, 'utf-8')
+        .split('\n')
+        .filter(l => l.indexOf(': DesignToken') >= 0);
+
+      // assert that any lines have a DesignToken type definition
+      lines.forEach(l => {
+        expect(l.match(/^.*: DesignToken$/g).length).toEqual(1);
+      });
+    });
+  });
+
+});

docs/_coverpage.md

@@ -9,4 +9,6 @@
 [GitHub](https://github.com/amzn/style-dictionary)
 [Get Started](README.md)
 
+[Get ready for the next version of Style Dictionary!](version_3.md)
+
 ![color](#D9F8F5)

docs/assets/styles.css

@@ -197,24 +197,36 @@ section.cover .cover-main blockquote {
   color: #868C91;
 }
 
-section.cover .cover-main>p:last-child a:first-child {
+section.cover.show div.cover-main > p a {
+  border-style: solid;
+  border-radius: 2rem;
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 1.05rem;
+  letter-spacing: .1rem;
+  margin: .5rem 1rem;
+  padding: .75em 2rem;
+  text-decoration: none;
+  transition: all .15s ease;
+
   border-width: 0.2rem;
   color: var(--theme-color-secondary);
   border-color: var(--theme-color-secondary);
 }
 
-section.cover .cover-main>p:last-child a:last-child {
+section.cover.show div.cover-main>p a:last-child {
   background-color: var(--theme-color-secondary);
   border-color: var(--theme-color-secondary);
+  color: #fff;
 }
 
-section.cover .cover-main>p:last-child a:hover {
+section.cover.show div.cover-main>p a:hover {
   color: var(--theme-color-secondary-dark);
   border-color: var(--theme-color-secondary-dark);
   opacity: 1;
 }
 
-section.cover .cover-main>p:last-child a:last-child:hover {
+section.cover.show div.cover-main>p a:last-child:hover {
   background-color: var(--theme-color-secondary-dark);
   border-color: var(--theme-color-secondary-dark);
   color: #fff;

docs/formats.md

@@ -353,6 +353,77 @@ export const ColorBackgroundAlt = '#fcfcfcfc';
 
 * * *
 
+### typescript/es6-declarations 
+
+
+Creates TypeScript declarations for ES6 modules
+
+```json
+{
+  "platforms": {
+    "ts": {
+      "transformGroup": "js",
+      "files": [
+        {
+          "format": "javascript/es6",
+          "destination": "colors.js"
+        },
+        {
+          "format": "typescript/es6-declarations",
+          "destination": "colors.d.ts"
+        }
+      ]
+    }
+  }
+}
+```
+
+**Example**  
+```typescript
+export const ColorBackgroundBase : string;
+export const ColorBackgroundAlt : string;
+```
+
+* * *
+
+### typescript/module-declarations 
+
+
+Creates TypeScript declarations for CommonJS module
+
+```json
+{
+  "platforms": {
+    "ts": {
+      "transformGroup": "js",
+      "files": [
+        {
+          "format": "javascript/module",
+          "destination": "colors.js"
+        },
+        {
+          "format": "typescript/module-declarations",
+          "destination": "colors.d.ts"
+        }
+      ]
+    }
+  }
+}
+```
+
+**Example**  
+```typescript
+export default tokens;
+declare interface DesignToken { value: string; name?: string; path?: string[]; comment?: string; attributes?: any; original?: any; }
+declare const tokens: {
+ "color": {
+   "red": DesignToken
+ }
+}
+```
+
+* * *
+
 ### android/colors 
 
 

docs/index.html

@@ -37,6 +37,7 @@
   <script src="//unpkg.com/prismjs/components/prism-json.min.js"></script>
   <script src="//unpkg.com/prismjs/components/prism-c.min.js"></script>
   <script src="//unpkg.com/prismjs/components/prism-objectivec.min.js"></script>
+  <script src="//unpkg.com/prismjs/components/prism-json5.min.js"></script>
   <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
 </body>
 </html>