diff --git a/docs/formats.md b/docs/formats.md index 7dfe3528c..91eef1561 100644 --- a/docs/formats.md +++ b/docs/formats.md @@ -92,7 +92,7 @@ You created a format and think it should be included? [Send us a PR](https://git Creates a CSS file with variable definitions based on the style dictionary -**Example** +**Example** ```css :root { --color-background-base: #f0f0f0; @@ -107,7 +107,7 @@ Creates a CSS file with variable definitions based on the style dictionary Creates a SCSS file with variable definitions based on the style dictionary -**Example** +**Example** ```scss $color-background-base: #f0f0f0; $color-background-alt: #eeeeee; @@ -120,7 +120,7 @@ $color-background-alt: #eeeeee; Creates a SCSS file with variable definitions and helper classes for icons -**Example** +**Example** ```scss $content-icon-email: '\E001'; .icon.email:before { content:$content-icon-email; } @@ -133,13 +133,12 @@ $content-icon-email: '\E001'; Creates a LESS file with variable definitions based on the style dictionary -**Color-background-base:**: #f0f0f0; -**Color-background-alt:**: #eeeeee; -``` -**Example** +**Example** ```less @color-background-base: #f0f0f0; @color-background-alt: #eeeeee; +``` + * * * ### less/icons @@ -147,11 +146,11 @@ Creates a LESS file with variable definitions based on the style dictionary Creates a LESS file with variable definitions and helper classes for icons -**Content-icon-email:**: '\E001'; -.icon.email:before { content:@content-icon-email; } -``` -**Example** +**Example** ```less +@content-icon-email: '\E001'; +.icon.email:before { content:@content-icon-email; } +``` * * * @@ -160,7 +159,7 @@ Creates a LESS file with variable definitions and helper classes for icons Creates a CommonJS module with the whole style dictionary -**Example** +**Example** ```js module.exports = { color: { @@ -181,7 +180,7 @@ module.exports = { Creates a JS file a global var that is a plain javascript object of the style dictionary. Name the variable by adding a 'name' attribute on the file object in your config. -**Example** +**Example** ```js var StyleDictionary = { color: { @@ -203,7 +202,7 @@ Creates a [UMD](https://github.com/umdjs/umd) module of the style dictionary. Name the module by adding a 'name' attribute on the file object in your config. -**Example** +**Example** ```js (function(root, factory) { if (typeof module === "object" && module.exports) { @@ -254,7 +253,7 @@ Creates a ES6 module of the style dictionary. } ``` -**Example** +**Example** ```js export const ColorBackgroundBase = '#ffffff'; export const ColorBackgroundAlt = '#fcfcfcfc'; @@ -267,7 +266,7 @@ export const ColorBackgroundAlt = '#fcfcfcfc'; Creates a color resource xml file with all the colors in your style dictionary. -**Example** +**Example** ```xml @@ -283,7 +282,7 @@ Creates a color resource xml file with all the colors in your style dictionary. Creates a dimen resource xml file with all the sizes in your style dictionary. -**Example** +**Example** ```xml @@ -299,7 +298,7 @@ Creates a dimen resource xml file with all the sizes in your style dictionary. Creates a dimen resource xml file with all the font sizes in your style dictionary. -**Example** +**Example** ```xml @@ -320,7 +319,7 @@ style properties by `prop.attributes.category === 'time'` - Update the filter on this. -**Example** +**Example** ```xml @@ -337,7 +336,7 @@ style properties by `prop.attributes.category === 'time'` Creates a resource xml file with all the strings in your style dictionary. Filters your style properties by `prop.attributes.category === 'content'` -**Example** +**Example** ```xml @@ -353,7 +352,7 @@ style properties by `prop.attributes.category === 'content'` Creates an Objective-C header file with macros for style properties -**Example** +**Example** ```objectivec #import #import @@ -501,7 +500,7 @@ Creates a generic static html page Creates a JSON file of the style dictionary. -**Example** +**Example** ```json { "color": { @@ -521,7 +520,7 @@ Creates a JSON file of the style dictionary. Creates a JSON file of just the assets defined in the style dictionary. -**Example** +**Example** ```js { "asset": { @@ -559,7 +558,7 @@ Creates a JSON that contains the original structure of the object without the va Creates a sketchpalette file of all the base colors -**Example** +**Example** ```json { "compatibleVersion": "1.0", diff --git a/index.js b/index.js index 70c3ae770..4bad70a0f 100644 --- a/index.js +++ b/index.js @@ -58,53 +58,59 @@ module.exports = StyleDictionary; process.on('exit', function () { if(GroupMessages.count(TEMPLATE_DEPRECATION_WARNINGS) > 0) { - var template_warnings = GroupMessages.flush(TEMPLATE_DEPRECATION_WARNINGS).join('\n '); - console.log(chalk.bold.red(` - Templates will be removed in the future, please change your config to use formats. - This is an example of how to update your config.json: - - Before: - "files": [{ - "destination": "colors.xml", - "template": "android/colors" - }] - - After: - "files": [{ - "destination": "colors.xml", - "format": "android/colors" - }] - - Your current config used the following templates: - ${template_warnings} - `)); + var template_warnings = GroupMessages.flush(TEMPLATE_DEPRECATION_WARNINGS).join('\n '); + console.log(chalk.bold.yellow(` +⚠️ DEPRECATION WARNING ️️️️️⚠️ +Templates will be removed in 3.0, please update your config to use formats. +This is an example of how to update your config.json: + +Before: + "files": [{ + "destination": "colors.xml", + "template": "android/colors" + }] + +After: + "files": [{ + "destination": "colors.xml", + "format": "android/colors" + }] + +Your current config used the following templates: + ${template_warnings} +`)); } if(GroupMessages.count(REGISTER_TEMPLATE_DEPRECATION_WARNINGS) > 0) { - var register_template_warnings = GroupMessages.flush(REGISTER_TEMPLATE_DEPRECATION_WARNINGS).join('\n '); - console.log(chalk.bold.red(` - registerTemplate will be removed in the future, please migrate to registerFormat. - You can use any templating engine you would like, you just need to require/import it. - This is an example of how to update your code using a lodash template (the tempalte engine previously used by registerTemplate): - - Before: - registerTemplate({ - name: 'template/name', - template: templateFile, - }); - - After: - registerFormat({ - name: 'template/name', - formatter: _.template( fs.readFileSync( templateFile ) ), - }); - - Note that formatter is a function that takes in a style dictionary and returns a string with the formatted output. - There is a second argument available that contains the configuration being used to process the style dictionary. - - Calls to registerTemplate included the registration of the following custom templates: - ${register_template_warnings} - `)); + var register_template_warnings = GroupMessages.flush(REGISTER_TEMPLATE_DEPRECATION_WARNINGS).join('\n '); + console.log(chalk.bold.yellow(` +⚠️ DEPRECATION WARNING ️️️️️⚠️ +The registerTemplate method will be removed in 3.0, please +migrate to registerFormat. You can use any templating engine you would +like, you just need to require/import it. This is an example of how to +update your code using a lodash template (the template engine previously +used by registerTemplate): + +Before: + registerTemplate({ + name: 'template/name', + template: templateFile, + }); + +After: + registerFormat({ + name: 'template/name', + formatter: _.template( fs.readFileSync( templateFile ) ), + }); + +Note that formatter is a function that takes in a style dictionary +and returns a string with the formatted output. There is a second +argument available that contains the configuration being used to +process the style dictionary. + +Calls to registerTemplate included the registration of the following +custom templates: + ${register_template_warnings}`)); } });