SVG Modules Update

Previously, the svgs command would source svg files from a single directory, optimize them with SVGO, and create a sprite using svgstore. This release allows the specification of multiple modules with their own SVGO, svgstore, input, and output settings as well as some additional configuration options.

The previous format for the svgs command configuration.

/** 
 * @type {Object}
 */
module.exports = {
  /** 
   * A custom prefix for svg files and sprite IDs.
   * 
   * @type {String}
   */
  prefix: '{{ ... }}',

  /** 
   * Plugin options for SVGO @source https://github.com/svg/svgo#built-in-plugins 
   * 
   * @type {Array}
   */
  plugins: [
    '{{ svgo plugins @source https://github.com/svg/svgo#built-in-plugins }}'
  ],

  /** 
   * The file relative to the global dist directory to write the sprite to.
   * 
   * @type {String}
   */
  svgstore: {
    file: '{{ file relative to the global dist directory to write the sprite to }}'
  }
}

The updated configuration.

/** 
 * @type {Array}
 */
module.exports = [
  /** 
   * A svgs module
   * 
   * @type {Object}
   */
  {
    /** 
     * The source directory for the svg files. Defaults to './src/svg/'.
     * 
     * @type {String}
     */
    source: '{{ ... }}',

    /** 
     * The output directory for the svg files. Defaults to './dist/svg/'.
     * 
     * @type {String}
     */
    dist: '{{ ... }}',

    /** 
     * A custom prefix for svg files and sprite IDs. Defaults to 'pttrn-'.
     * 
     * @type {String}
     */
    prefix: '{{ ... }}',

    /** 
     * The file relative to the global dist directory to write the sprite to. Defaults to 'svgs.svg'.
     * 
     * @type {String}
     */
    file: '{{ ... }}',

    /** 
     * Plugin options for SVGO @source https://github.com/svg/svgo#built-in-plugins. Defaults to configuration described below.
     * 
     * @type {Array}
     */
    svgo: [
      '{{ ... }}'
    ],

    /** 
     * Plugin options for svgstore @source https://github.com/svgstore/svgstore#options.
     * 
     * @type {Object}
     */
    svgstore: {
      '{{ ... }}'
    },

    /** 
     * A list of svgs to limit which will be compiled from the source directory and included in the sprite.
     * 
     * @type {Array}
     */
    restrict: [  
      '{{ ... }}' 
    ],

    /** 
     * Prevent writing of individually optimized svgs into the distribution directory.
     * 
     * @type {Array}
     */
    write: { 
      source: false
    },
  }
]

Default SVGO configuration.

const svgo = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertPathData: false,
          inlineStyles: false,
          cleanupIDs: false
        }
      }
    }
  ]
};

svgs command configuration example.

const svgo = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertPathData: false,
          inlineStyles: false,
          cleanupIDs: false
        }
      }
    }
  ]
};

const restrict = [
  'arrow-', 'chevron-', 'help-circle.svg', 'calendar.svg', 'users.svg', 
  'award.svg', 'x.svg', 'copy.svg', 'check.svg', 'facebook.svg', 'twitter.svg', 
  'menu.svg', 'translate.svg', 'search.svg', 'info.svg', 'alert-', 
  'external-link.svg', 'share-2.svg'
];

module.exports = [
  {
    source: './src/svg',
    dist: './assets/svg',
    prefix: '',
    file: 'svgs.svg',
    svgo: svgo
  },
  {
    source: './node_modules/feather-icons/dist/icons',
    dist: './assets/svg',
    prefix: 'feather-',
    file: 'feather.svg',
    svgo: svgo,
    restrict: restrict,
    write: {
      source: false
    }
  }
];

Custom default command and restoring SVGO configuration

v1.3.0

1.3.0

Expose default command configuration

v1.2.0

Dependency Updates

Migration notes. These are only applicable if you are using custom configurations for the following files.

Lint

Updates to config/lint.js:

• Update eslint by wrapping existing config in overrideConfig.

eslint: {
  ...
}

Becomes

eslint: {
  overrideConfig: {
    ...
  }
}

• Update stylelint by adding `custom-syntax: 'postcss-scss'.

stylelint: {
    customSyntax: 'postcss-scss',
    ...
}

Rollup

Add 'preventAssignment': true, to the replace() plugin configuration.

replace({
  'preventAssignment': true,
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
...

More notes may be added.

v1

When migrating from a v1 pre-release (pre-release 15):

package.json

• Uninstall the previous @nycopportunity/patterns-framework and install the new CLI package @nycopportunity/pttrn

• Install @nycopportunity/pttrn-scripts if using any of the utility ES modules previously in the directory @nycopportunity/patterns-framework/src/utilities.

• Install @nycopportunity/pttrn-docs if using any of the prewritten documentation, such as the installation guide or Tailwindcss guide in the directory @nycopportunity/patterns-framework/docs.

• Install Rollup plugins @rollup/plugin-buble or @rollup/plugin-babel if using them in your ./config/rollup.js configuration for IE11 support.

Tailwindcss v2

Tailwindcss has a few changes but notably requires PostCSS 8. This may be fine in some cases, however, at the time of release another helpful PostCSS plugin cssnano does not yet support PostCSS 8.

You may install Tailwindcss v1 as a peer dependency in your project to maintain compatibility with PostCSS 7 and other used plugins...

... or...

... update and install other peer dependencies in your project, particularly PostCSS 8 (alternatively, you may be able to just run npm update --depth=1 if the dependency is already installed by another package) and can be updated but including the latest version as a dependency will ensure it's installed.

cssnano will still not be fully supported this way so you will need to stop using it (comment it out) until it's supported or find an alternative.

Configuration

• Tailwindcss. Update Tailwindcss configuration name from ./config/tailwind.js to ./config/tailwindcss.js and any other config dependency references to it (such as in the ./config/slm.js and ./config/postcss.js configurations).

• Rollup. Rollup Plugin Node Resolve has a different implementation in this latest update;

const nodeResolve = require('@rollup/plugin-node-resolve');

...

const plugins = [
  nodeResolve.nodeResolve({
    browser: true,
    moduleDirectories: [
      'node_modules'
    ]
  }),

...

• Svgs. The new ./config/svgs.js configuration file adds a prefix and changes the location of the default sprite distribution by default. To retain compatibility with the old configuration this configuration can be placed in your project if you do not use an svgs configuration.

module.exports = {
  prefix: '', // omit prefix
  svgo: {
    convertPathData: false,
  },
  svgstore: {
    file: 'svg/icons.svg' // sprite destination
  }
};

Scripts

• Once the new @nycopportunity/pttrn-scripts package is installed, replace import statement paths in JavaScript files with from @nycopportunity/patterns-framework/src/utilities/ to @nycopportunity/pttrn-scripts/src/

Styles

• Once the new @nycopportunity/pttrn-scripts package is installed, replace @forward or @use import statement paths in Sass files with from @nycopportunity/patterns-framework/src/utilities/ to @nycopportunity/pttrn-scripts/src/

Other migration issues may be submitted and added to this list.

Toggle Utility; trigger toggle event from a select element

This release creates support for using <select> elements to toggle other elements. See src/utilities/toggle/readme.md for details.

Window vh Utility

This Utility creates a workaround for an iOS issue where 100vh doesn't take into account Safari's nav bar height. It will set a CSS variable --100vh to the true pixel height of the window that can be used in stylesheets where you would use 100vh

Newsletter Utility

Official utility release with documentation. See src/utilities/newsletter/readme.md for details.

Slm updates

Interpolate variables with dashes and underscores.

Configuration Watching

This release will observe changes on configuration files and run the commands they manage when changed. Currently, supports watching config/slm.js, config/tokens.js, and config/rollup.js.