fixed the naming for Sass/Scss in documentation, tests, formats

README.md

@@ -227,7 +227,7 @@ While not exactly necessary, we feel this classification structure of style prop
 
  Structuring style properties in this manner gives us consistent naming and accessing of these properties. You don't need to remember if it is button_color_error or error_button_color, it is color_background_button_error!
 
- Technically, you can organize and name your style properties however you want, there are no restrictions. But we have a good amount of helpers if you do use this structure, like the 'attribute/cti' transform which adds attributes to the property of its CTI based on the path in the object. There are a lot of name transforms as well for when you want a flat structure like for sass variables.
+ Technically, you can organize and name your style properties however you want, there are no restrictions. But we have a good amount of helpers if you do use this structure, like the 'attribute/cti' transform which adds attributes to the property of its CTI based on the path in the object. There are a lot of name transforms as well for when you want a flat structure like for Sass variables.
 
  Also, the CTI structure provides a good mechanism to target transforms for specific kinds of properties. All of the transforms provided by the framework use the CTI of a property to know if it should be applied. For instance, the 'color/hex' transform only applies to properties of the category 'color'.
 

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

@@ -554,6 +554,37 @@ exports[`formats all should match scss/icons snapshot 1`] = `
 "
 `;
 
+exports[`formats all should match scss/map-deep snapshot 1`] = `
+"
+/*
+  Do not edit directly
+  Generated on Sat, 01 Jan 2000 00:00:00 GMT
+*/
+
+$color_red: #FF0000 !default; // comment
+
+$tokens: (
+  'color': (
+    'red': $color_red
+  )
+);
+"
+`;
+
+exports[`formats all should match scss/map-flat snapshot 1`] = `
+"
+/*
+  Do not edit directly
+  Generated on Sat, 01 Jan 2000 00:00:00 GMT
+*/
+
+$tokens: (
+  // comment
+  'color_red': #FF0000
+);
+"
+`;
+
 exports[`formats all should match scss/variables snapshot 1`] = `
 "/**
  * Do not edit directly

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`formats sass/map-deep sass/map-deep snapshot 1`] = `
+exports[`formats scss/map-deep scss/map-deep snapshot 1`] = `
 "
 /*
   Do not edit directly
@@ -29,7 +29,7 @@ $tokens: (
 "
 `;
 
-exports[`formats sass/map-flat sass/map-flat snapshot 1`] = `
+exports[`formats scss/map-flat scss/map-flat snapshot 1`] = `
 "
 /*
   Do not edit directly

__tests__/formats/scssMaps.test.js

@@ -167,7 +167,7 @@ var dictionary = {
 };
 
 describe('formats', () => {
-  _.each(['sass/map-flat', 'sass/map-deep'], function(key) {
+  _.each(['scss/map-flat', 'scss/map-deep'], function(key) {
 
     describe(key, () => {
 

docs/formats.md

@@ -102,10 +102,10 @@ Creates a CSS file with variable definitions based on the style dictionary
 
 * * *
 
-### sass/map-flat
+### scss/map-flat
 
 
-Creates a Sass file with a flat map based on the style dictionary
+Creates a SCSS file with a flat map based on the style dictionary
 
 **Example**
 ```scss
@@ -117,10 +117,10 @@ $tokens: (
 
 * * *
 
-### sass/map-deep
+### scss/map-deep
 
 
-Creates a Sass file with a deep map based on the style dictionary
+Creates a SCSS file with a deep map based on the style dictionary
 
 **Example**
 ```scss

docs/properties.md

@@ -105,7 +105,7 @@ The CTI is implicit in the structure, the category is 'size' and the type is 'fo
 
 Structuring style properties in this manner gives us consistent naming and accessing of these properties. You don't need to remember if it is `button_color_error` or `error_button_color`, it is `color_background_button_error`!
 
-You can organize and name your style properties however you want, **there are no restrictions**. But there are a good amount of helpers if you do use this structure, like the 'attribute/cti' transform which adds attributes to the property of its CTI based on the path in the object. There are a lot of name transforms as well for when you want a flat structure like for sass variables.
+You can organize and name your style properties however you want, **there are no restrictions**. But there are a good amount of helpers if you do use this structure, like the 'attribute/cti' transform which adds attributes to the property of its CTI based on the path in the object. There are a lot of name transforms as well for when you want a flat structure like for Sass variables.
 
 Also, the CTI structure provides a good mechanism to target transforms for specific kinds of properties. All of the transforms provided by the framework use the CTI structure to know if it should be applied. For instance, the 'color/hex' transform only applies to properties of the category 'color'.
 

examples/advanced/custom-formats-with-templates/README.md

@@ -49,7 +49,7 @@ Now open the `build.js` script and look at how these custom formats are declared
 
 Finally, look at the different template files in the `templates` folder and see how they are built to generate custom file formats in output:
 
-* **web-scss.template**: this is a template that uses [Lodash](https://lodash.com/docs/4.17.10#template), and shows how you can create a custom format for Sass/Scss files. The same approach can be used if you need other custom formats for the web (or other platforms too).
+* **web-scss.template**: this is a template that uses [Lodash](https://lodash.com/docs/4.17.10#template), and shows how you can create a custom format for Sass ".scss" files. The same approach can be used if you need other custom formats for the web (or other platforms too).
 * **android-xml.template**: this template too uses Lodash, and shows how to create a custom XML format for Android, that can be read as "resource file". This is just one of the many possible formats for Android, so if you need to create one speak with your developers to agree on the format they want.
 * **android-xml_alt.hbs**: this is an alternative example of custom XML format for Android, that uses [Handlebar](https://handlebarsjs.com) as templating language.
 * **ios-plist.template**: this template too uses Lodash, and shows how to create a custom PLIST format for iOS, that can be read as "resource file". This is just one of the many possible formats for iOS, so if you need to create one speak with your developers to agree on the format they want.

index.js

@@ -14,6 +14,7 @@ var chalk = require('chalk');
 var GroupMessages = require('./lib/utils/groupMessages');
 var TEMPLATE_DEPRECATION_WARNINGS = GroupMessages.GROUP.TemplateDeprecationWarnings;
 var REGISTER_TEMPLATE_DEPRECATION_WARNINGS = GroupMessages.GROUP.RegisterTemplateDeprecationWarnings;
+var SASS_MAP_FORMAT_DEPRECATION_WARNINGS = GroupMessages.GROUP.SassMapFormatDeprecationWarnings;
 
 /**
  * Style Dictionary module
@@ -78,7 +79,7 @@ After:
     "format": "android/colors"
   }]
 
-Your current config used the following templates:
+Your current config uses the following templates:
   ${template_warnings}
 `));
   }
@@ -115,4 +116,29 @@ custom templates:
   ${register_template_warnings}`));
   }
 
+  if(GroupMessages.count(SASS_MAP_FORMAT_DEPRECATION_WARNINGS) > 0) {
+    var sass_map_format_warnings = GroupMessages.flush(SASS_MAP_FORMAT_DEPRECATION_WARNINGS).join('\n  ');
+    console.log(chalk.bold.cyan(`
+🔔 NOTICE 🔔
+The formats 'sass/map-***' have been renamed to 'scss/map-***', please update your config.
+In the future 'sass/map-***' formats may output actual Sass instead of SCSS, which may break your current configuration.
+This is an example of how to update your config.json:
+
+Before:
+  "files": [{
+    "destination": "tokens_map-flat.scss",
+    "format": "sass/map-flat"
+  }]
+
+After:
+  "files": [{
+    "destination": "tokens_map-flat.scss",
+    "format": "scss/map-flat"
+  }]
+
+Your current config uses the following formats:
+  ${sass_map_format_warnings}
+`));
+  }
+
 });

lib/common/formats.js

@@ -12,7 +12,10 @@
  */
 
 var fs = require('fs'),
-    _  = require('lodash');
+    _  = require('lodash'),
+    GroupMessages = require('../utils/groupMessages');
+
+var SASS_MAP_FORMAT_DEPRECATION_WARNINGS = GroupMessages.GROUP.SassMapFormatDeprecationWarnings;
 
 function fileHeader(options) {
   var to_ret = '';
@@ -93,7 +96,7 @@ module.exports = {
   },
 
   /**
-   * Creates a Sass file with a flat map based on the style dictionary
+   * Creates a SCSS file with a flat map based on the style dictionary
    *
    * @memberof Formats
    * @kind member
@@ -105,12 +108,22 @@ module.exports = {
    * )
    * ```
    */
-  'sass/map-flat': _.template(
-    fs.readFileSync(__dirname + '/templates/sass/map-flat.template')
+  'scss/map-flat': _.template(
+    fs.readFileSync(__dirname + '/templates/scss/map-flat.template')
   ),
 
+  // This will soon be removed, is left here only for backwards compatibility
+  'sass/map-flat': function(dictionary, config) {
+    GroupMessages.add(SASS_MAP_FORMAT_DEPRECATION_WARNINGS, "sass/map-flat");
+    const templateMapFlat = _.template(fs.readFileSync(__dirname + '/templates/scss/map-flat.template'));
+    return templateMapFlat({
+      showFileHeader: config.showFileHeader,
+      allProperties: dictionary.allProperties
+    });
+  },
+
   /**
-   * Creates a Sass file with a deep map based on the style dictionary
+   * Creates a SCSS file with a deep map based on the style dictionary
    *
    * @memberof Formats
    * @kind member
@@ -129,10 +142,21 @@ module.exports = {
    * )
    * ```
    */
-  'sass/map-deep': _.template(
-    fs.readFileSync(__dirname + '/templates/sass/map-deep.template')
+  'scss/map-deep': _.template(
+    fs.readFileSync(__dirname + '/templates/scss/map-deep.template')
   ),
 
+  // This will soon be removed, is left here only for backwards compatibility
+  'sass/map-deep': function(dictionary, config) {
+    GroupMessages.add(SASS_MAP_FORMAT_DEPRECATION_WARNINGS, "sass/map-deep");
+    const templateMapDeep = _.template(fs.readFileSync(__dirname + '/templates/scss/map-deep.template'));
+    return templateMapDeep({
+      showFileHeader: config.showFileHeader,
+      properties: dictionary.properties,
+      allProperties: dictionary.allProperties
+    });
+  },
+
   /**
    * Creates a SCSS file with variable definitions based on the style dictionary
    *

lib/utils/groupMessages.js

@@ -18,6 +18,7 @@ var GroupMessages = {
     PropertyValueCollisions: 'Property Value Collisions',
     TemplateDeprecationWarnings: 'Template Deprecation Warnings',
     RegisterTemplateDeprecationWarnings: 'Register Template Deprecation Warnings',
+    SassMapFormatDeprecationWarnings: 'Sass Map Format Deprecation Warnings',
   },
 
   flush: function (messageGroup) {