CSS Library: Generate the react-native token files

[jamigibbs]

Description

Reference discovery ticket: #1837

The mobile team will need token files generated with some custom treatments:

• rem values converted to pixel (base font size)
• no units appended to the value (ie. fontSize: 1rem would be fontSize: 16)
• they also need both js and json formats.

A working example of this has been added to the discovery PR which includes two custom transforms in combination with some pre-made style dictionary transforms:

https://github.com/department-of-veterans-affairs/component-library/pull/766/files#diff-79ccf6c33f36bac9578b5a05b5b76e3b80ae31b308d1ee41f941bb8fd449ebb0

StyleDictionary.registerTransform({
  name: 'size/base-font-16',
  type: 'value',
  matcher: function(token) {
      return token.value.toString().includes('rem');
  },
  transformer: function(token) {
    return parseFloat(token.value) * 16;
  }
});

StyleDictionary.registerTransform({
  name: 'size/remove-px-unit',
  type: 'value',
  matcher: function(token) {
    return token.value.toString().includes('px');
  },
  transformer: function(token) {
    return token.value.replace('px', '');
  }
});

    "react-native-json": {
      transforms: ["size/base-font-16", "size/remove-px-unit"],
      buildPath: 'dist/react-native/',
      files: [
        {
          destination: 'tokens.json',
          format: 'json/nested'
        }
      ]
    },
    "react-native-js": {
      transforms: ["name/cti/camel", "size/object", "color/css", "size/base-font-16", "size/remove-px-unit"],
      buildPath: 'dist/react-native/',
      files: [
        {
          destination: 'tokens.js',
          format: 'javascript/es6'
        }
      ]
    },

Tasks

• Update the style dictionary config file so that a json and js format for the mobile team will be generated
• Run yarn build and commit the new files

Acceptance Criteria

• There exists two token files (js and json) for the mobile team that meet the criteria they need.