diff --git a/README.md b/README.md index 265753633..9fce8e834 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +
+Get ready for the next release of Style Dictionary! 🚀 ++ [![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'); diff --git a/__tests__/formats/__snapshots__/all.test.js.snap b/__tests__/formats/__snapshots__/all.test.js.snap index 86f5b33de..29158e447 100644 --- a/__tests__/formats/__snapshots__/all.test.js.snap +++ b/__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 + } +}" +`; diff --git a/__tests__/formats/typeScriptEs6Declarations.test.js b/__tests__/formats/typeScriptEs6Declarations.test.js new file mode 100644 index 000000000..dc0e327a6 --- /dev/null +++ b/__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); + }); + }); + }); + +}); diff --git a/__tests__/formats/typeScriptModuleDeclarations.test.js b/__tests__/formats/typeScriptModuleDeclarations.test.js new file mode 100644 index 000000000..ddcf25f50 --- /dev/null +++ b/__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); + }); + }); + }); + +}); diff --git a/docs/_coverpage.md b/docs/_coverpage.md index de5495c6e..c226e7218 100644 --- a/docs/_coverpage.md +++ b/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) diff --git a/docs/assets/styles.css b/docs/assets/styles.css index 7cf32a6ca..35a24813c 100644 --- a/docs/assets/styles.css +++ b/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; diff --git a/docs/formats.md b/docs/formats.md index 0fa1aba81..d9a5492a1 100644 --- a/docs/formats.md +++ b/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 diff --git a/docs/index.html b/docs/index.html index 3de26b658..c78a4a0eb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -37,6 +37,7 @@ +