Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing formats.md and console formatting #184

Merged
merged 1 commit into from
Oct 31, 2018
Merged

Fixing formats.md and console formatting #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 23 additions & 24 deletions docs/formats.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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; }
Expand All @@ -133,25 +133,24 @@ $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


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; }
```

* * *

Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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) {
Expand Down Expand Up @@ -254,7 +253,7 @@ Creates a ES6 module of the style dictionary.
}
```

**Example**
**Example**
```js
export const ColorBackgroundBase = '#ffffff';
export const ColorBackgroundAlt = '#fcfcfcfc';
Expand All @@ -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
<?xml version="1.0" encoding="UTF-8"?>
<resources>
Expand All @@ -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
<?xml version="1.0" encoding="UTF-8"?>
<resources>
Expand All @@ -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
<?xml version="1.0" encoding="UTF-8"?>
<resources>
Expand All @@ -320,7 +319,7 @@ style properties by `prop.attributes.category === 'time'`

- Update the filter on this.

**Example**
**Example**
```xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
Expand All @@ -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
<?xml version="1.0" encoding="UTF-8"?>
<resources>
Expand All @@ -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 <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
Expand Down Expand Up @@ -501,7 +500,7 @@ Creates a generic static html page

Creates a JSON file of the style dictionary.

**Example**
**Example**
```json
{
"color": {
Expand All @@ -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": {
Expand Down Expand Up @@ -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",
Expand Down
94 changes: 50 additions & 44 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`));
}

});