Fixing es6 format example and adding a js transformGroup (#110)

amzn · Aug 5, 2018 · b7b36f7 · b7b36f7
1 parent 83a9d6e
commit b7b36f7
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 18 deletions.
diff --git a/docs/formats.md b/docs/formats.md
@@ -42,7 +42,7 @@ Formats are better if there is little to no boilerplate code like a flat SCSS va
 
 Creates a CSS file with variable definitions based on the style dictionary
 
-**Example**  
+**Example**
 ```css
 :root {
   --color-background-base: #f0f0f0;
@@ -57,7 +57,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;
@@ -70,7 +70,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; }
@@ -83,7 +83,7 @@ $content-icon-email: '\E001';
 
 Creates a LESS file with variable definitions based on the style dictionary
 
-**Example**  
+**Example**
 ```less
 @color-background-base: #f0f0f0;
 @color-background-alt: #eeeeee;
@@ -96,7 +96,7 @@ Creates a LESS file with variable definitions based on the style dictionary
 
 Creates a LESS file with variable definitions and helper classes for icons
 
-**Example**  
+**Example**
 ```less
 @content-icon-email: '\E001';
 .icon.email:before { content:@content-icon-email; }
@@ -109,7 +109,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: {
@@ -130,7 +130,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: {
@@ -152,7 +152,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) {
@@ -188,12 +188,15 @@ file object in the config.
 {
   "platforms": {
     "js": {
+      "transformGroup": "js",
       "files": [
         {
           "format": "javascript/es6",
           "destination": "colors.js",
           "filter": {
-            "category": "color"
+            "attributes": {
+              "category": "color"
+            }
           }
         }
       ]
@@ -202,10 +205,10 @@ file object in the config.
 }
 ```
 
-**Example**  
+**Example**
 ```js
-export const BackgroundBase = '#ffffff';
-export const BackgroundAlt = '#fcfcfcfc';
+export const ColorBackgroundBase = '#ffffff';
+export const ColorBackgroundAlt = '#fcfcfcfc';
 ```
 
 * * *
@@ -215,7 +218,7 @@ export const BackgroundAlt = '#fcfcfcfc';
 
 Creates a JSON file of the style dictionary.
 
-**Example**  
+**Example**
 ```json
 {
   "color": {
@@ -235,7 +238,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": {
@@ -255,7 +258,7 @@ Creates a JSON file of just the assets defined in the style dictionary.
 
 Creates a sketchpalette file of all the base colors
 
-**Example**  
+**Example**
 ```json
 {
   "compatibleVersion": "1.0",

diff --git a/docs/transform_groups.md b/docs/transform_groups.md
@@ -32,6 +32,19 @@ Transforms:
 [color/css](transforms.md#colorcss)
 
 
+* * *
+
+### js 
+
+
+Transforms:
+
+[attribute/cti](transforms.md#attributecti)
+[name/cti/pascal](transforms.md#namectipascal)
+[size/rem](transforms.md#sizerem)
+[color/hex](transforms.md#colorhex)
+
+
 * * *
 
 ### scss 

diff --git a/lib/common/formats.js b/lib/common/formats.js
@@ -236,10 +236,16 @@ module.exports = {
    * {
    *   "platforms": {
    *     "js": {
+   *       "transformGroup": "js",
    *       "files": [
    *         {
    *           "format": "javascript/es6",
-   *           "destination": "colors.js"
+   *           "destination": "colors.js",
+   *           "filter": {
+   *             "attributes": {
+   *               "category": "color"
+   *             }
+   *           }
    *         }
    *       ]
    *     }
@@ -251,8 +257,8 @@ module.exports = {
    * @kind member
    * @example
    * ```js
-   * export const BackgroundBase = '#ffffff';
-   * export const BackgroundAlt = '#fcfcfcfc';
+   * export const ColorBackgroundBase = '#ffffff';
+   * export const ColorBackgroundAlt = '#fcfcfcfc';
    * ```
    */
   'javascript/es6': function(dictionary) {

diff --git a/lib/common/transformGroups.js b/lib/common/transformGroups.js
@@ -34,6 +34,23 @@ module.exports = {
     'color/css'
   ],
 
+  /**
+   * Transforms:
+   *
+   * [attribute/cti](transforms.md#attributecti)
+   * [name/cti/pascal](transforms.md#namectipascal)
+   * [size/rem](transforms.md#sizerem)
+   * [color/hex](transforms.md#colorhex)
+   *
+   * @memberof TransformGroups
+   */
+  'js': [
+    'attribute/cti',
+    'name/cti/pascal',
+    'size/rem',
+    'color/hex'
+  ],
+
   /**
    * Transforms:
    *