css/docs/content/tools/deprecations.md

title
Deprecation data

As of version 12.7.0, we publish CSS selector and SCSS variable deprecation data (as of 14.0.0) with @primer/css. You can access the data via the Node API or as JSON.

To deprecate a class, variable, or mixin, add the element to the deprecations.js file with it's replacement value.

The replacement can be:

• A String for a direct replacement.
• An Array for multiple replacement options.
• null to indicate there is no replacement.

This could look something like this:

const deprecations = {
  "deprecated-1": "replacement",
  "deprecated-2": ["replacement-1", "replacement-2"],
  "deprecated-3": null
}

JSON

The JSON data is available in the unpacked node module's dist/deprecations.json, and is an object with the following structure:

{
  "selectors" {...},
  "variables": {...},
  "mixins": {...}
}

• selectors is an object mapping CSS selectors to their replacements. If the replacement is an Array, then there's multiple options. If the replacement is null then there are no replacements.

  {
    "selectors": {
      "deprecated-class": "replacement-class"
    }
  }
  

• variables is an object mapping SCSS variables to their replacement SCSS variable.

  {
    "variables": {
      "$deprecated-variable": "$replacement-variable"
    }
  }
  

• mixins is an object mapping SCSS mixins to their replacement SCSS mixins.

  {
    "mixins": {
      "deprecated-mixin": "replacement-mixin"
    }
  }
  

Node

The Node API for selector deprecations is available at @primer/css/deprecations.

Example:

const {
  deprecatedSelectors,
  deprecatedSassVariables,
  deprecatedSassMixins
} = require('@primer/css/deprecations')