Skip to content

Design Tokens, Async Styles and Chokidar, and Slm Chokidar

Compare
Choose a tag to compare
@devowhippit devowhippit released this 25 Feb 17:07

Design Tokens

The variables script and command have been renamed to tokens. The configuration for this script can be modified to for backwards compatibility by changing settings in the config/tokens.js opts object for the json-to-sass package (see the framework's config for a full list of options). In order to fully migrate, the following steps can be followed;

  • (required) Rename config/variables.js to config/tokens.js
  • (required) Replace const variables = require('./variables.js'); with const variables = require('./variables.js'); in config/tailwind.js
  • Replace const variables = with const tokens = in config/tailwind.js
  • Replace all instances of variables. with tokens. in config/tailwind.js
  • Replace all instances of @import 'config/variables'; with @import 'config/tokens'; in .scss files.
  • Replace all instances of $variables with $tokens in .scss files.
  • Replace all instances of this.variables with this.tokens in .slm files.

Async Styles

Styles have been refactored to be asynchronous, insuring that tokens, sass, and postcss tasks run in order. It may be necessary to update your Sass include paths from;

  includePaths: [
    './node_modules', './src'
  ]

to;

  includePaths: [
    './src/',
    './node_modules/@nycopportunity/',
    './node_modules/animate.scss/'
  ]

Chokidar

The Chokidar package has been implemented in the Styles and Slm --watch commands for running only on files that have changed. No steps to migrate are necessary.