css/deprecations.js

/*
 * This object's keys are (semver) version numbers, and the
 * values are arrays of objects each with a "selectors"
 * array and a "message" string.
 */
const versionDeprecations = {
  '15.0.0': [
    {
      selectors: [
        '.btn-outline:active .Counter',
        '.btn-outline.selected .Counter',
        '.btn-outline[aria-selected=true] .Counter',
        '.tabnav .Counter',
        '.SideNav-item:hover::before',
        '.SideNav-item:focus::before',
        '.UnderlineNav-item:hover .UnderlineNav-octicon',
        '.UnderlineNav-item:focus .UnderlineNav-octicon',
        '.UnderlineNav--right .UnderlineNav-item',
        '.pagination::before',
        '.pagination::after',
        '.pagination a:first-child',
        '.pagination span:first-child',
        '.pagination em:first-child',
        '.pagination a:last-child',
        '.pagination span:last-child',
        '.pagination em:last-child',
        '.pagination .selected',
        '.IssueLabel--big .g-emoji',
        '.IssueLabel--big:hover',
        '.SelectMenu-item[aria-checked="true"]',
        '.SelectMenu-item[aria-checked="true"] .SelectMenu-icon--check',
        '.SelectMenu-tab:not([aria-checked="true"]):hover',
        '.SelectMenu-tab:not([aria-checked="true"]):active',
        '.SelectMenu-tab:not([aria-selected="true"]):hover'
      ],
      message: `This selector is not available in Primer CSS 15.0.0. Please refer to the documentation.`
    }
  ],
  '14.4.0': [
    {
      selectors: [
        '.breadcrumb-item[aria-current]',
        '.breadcrumb-item[aria-current]::after',
        '.menu-item[aria-current]',
        '.menu-item[aria-current]::before',
        '.tabnav-tab[aria-current]',
        '.filter-item[aria-current]',
        '.SideNav-item[aria-current="page"]',
        '.SideNav-item[aria-current="page"]::before',
        '.SideNav-subItem[aria-current="page"]',
        '.subnav-item[aria-current]',
        '.UnderlineNav-item[aria-current]',
        '.UnderlineNav-item[aria-current] .UnderlineNav-octicon',
        '.pagination [aria-current]',
        '.pagination [aria-current]:hover'
      ],
      message: `These selectors are not needed anymore.`
    }
  ],
  '14.0.0': [
    {
      selectors: [
        '.SelectMenu-item+.SelectMenu-item',
        '.SelectMenu-divider:first-child',
        '.SelectMenu-divider:last-child',
        '.SelectMenu--hasFilter .SelectMenu-item:last-child',
        '.SelectMenu-item[aria-checked="true"] .SelectMenu-icon'
      ],
      message: `These selectors are deprecated and not used anymore.`
    },
    {
      selectors: [
        '.flex-item-equal',
        '.flex-sm-item-equal',
        '.flex-md-item-equal',
        '.flex-lg-item-equal',
        '.flex-xl-item-equal'
      ],
      message: `This variable is deprecated. Use "flex-1" instead.`
    },
    {
      selectors: ['.UnderlineNav-item.selected', '.UnderlineNav-item.selected .UnderlineNav-octicon'],
      message: `Please use aria-selected="true" to indicate the selected state of an UnderlineNav item.`
    },
    {
      variables: ['$status-pending'],
      message: `This variable is deprecated.`
    },
    {
      variables: ['$highlight-yellow'],
      message: `This variable is deprecated.`
    },
    {
      variables: ['$repo-private-text', '$repo-private-bg', '$repo-private-icon'],
      message: `These variables are deprecated.`
    },
    {
      variables: ['$marketingSpacers', '$allSpacers'],
      message: `Please use the $marketing-spacers and $marketing-all-spacers variables.`
    },
    {
      variables: ['$exploregrid-item-border-radius'],
      message: `This variable is deprecated. Use "4px" instead.`
    },
    {
      variables: ['$stats-switcher-py', '$stats-viewport-height'],
      message: `These variables are deprecated.`
    },
    {
      variables: ['$min_tab_size', '$max_tab_size'],
      message: `These variables are deprecated.`
    }
  ],
  '13.0.0': [
    {
      selectors: [
        '.btn-purple',
        '.btn-purple:focus',
        '.btn-purple.focus',
        '.btn-purple:hover',
        '.btn-purple.hover',
        '.btn-purple:active',
        '.btn-purple.selected',
        '[open]>.btn-purple',
        '.btn-purple:disabled',
        '.btn-purple.disabled',
        '.btn-purple .Counter'
      ],
      message: `Please don't make purple buttons.`
    },
    {
      selectors: ['.text-pending'],
      message: `Please use the "text-yellow" class instead of "text-pending".`
    },
    {
      selectors: ['.bg-pending'],
      message: `Please use the "bg-yellow-dark" class instead of "bg-pending".`
    },
    {
      selectors: [
        '.container',
        '.container::before',
        '.container::after',
        '.columns',
        '.columns::before',
        '.columns::after',
        '.column',
        '.one-third',
        '.two-thirds',
        '.one-fourth',
        '.one-half',
        '.three-fourths',
        '.one-fifth',
        '.four-fifths'
      ],
      message: `Please use [grid classes](https://primer.style/css/objects/grid).`
    },
    {
      selectors: ['.centered'],
      message: `You can use the "mx-auto" class to center any element.`
    },
    {
      selectors: [
        '.dropdown-menu-content',
        '.dropdown.active .dropdown-menu-content',
        '.dropdown-menu-content.anim-scale-in'
      ],
      message: `The "dropdown-menu-content" class is unnecessary.`
    }
  ]
}

const {version: CURRENT_VERSION} = require('./package.json')
const semver = require('semver')

// map selectors to the version and message of their deprecation
const selectorDeprecations = new Map()
const variableDeprecations = new Map()
for (const [version, deps] of Object.entries(versionDeprecations)) {
  for (const {selectors = [], variables = [], message} of deps) {
    for (const selector of selectors) {
      selectorDeprecations.set(selector, {version, message})
    }
    for (const variable of variables) {
      variableDeprecations.set(variable, {version, message})
    }
  }
}

function isSelectorDeprecated(selector, version = CURRENT_VERSION) {
  const deprecation = selectorDeprecations.get(selector)
  return deprecation ? semver.gte(deprecation.version, version) : false
}

function isVariableDeprecated(variable, version = CURRENT_VERSION) {
  const deprecation = variableDeprecations.get(variable)
  return deprecation ? semver.gte(deprecation.version, version) : false
}

module.exports = {
  versionDeprecations,
  selectorDeprecations,
  variableDeprecations,
  isSelectorDeprecated,
  isVariableDeprecated
}