1
1
mirror of https://github.com/primer/css.git synced 2024-11-10 07:58:36 +03:00
css/deprecations.js

739 lines
20 KiB
JavaScript

/*
* 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 = {
'17.0.0': [
{
variables: ['$h000-size', '$h000-size-mobile'],
message: `This variable is deprecated, please refer to the Marketing Typography documentation.`
},
{
selectors: ['.h000-mktg', '.h00-mktg', '.lead-mktg'],
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
},
{
selectors: [
'.p-7',
'.p-8',
'.p-9',
'.p-10',
'.p-11',
'.p-12',
'.p-sm-7',
'.p-sm-8',
'.p-sm-9',
'.p-sm-10',
'.p-sm-11',
'.p-sm-12',
'.p-md-7',
'.p-md-8',
'.p-md-9',
'.p-md-10',
'.p-md-11',
'.p-md-12',
'.p-lg-7',
'.p-lg-8',
'.p-lg-9',
'.p-lg-10',
'.p-lg-11',
'.p-lg-12',
'.p-xl-7',
'.p-xl-8',
'.p-xl-9',
'.p-xl-10',
'.p-xl-11',
'.p-xl-12'
],
message: `This selector is deprecated, please use pt-X, pr-X, pb-X, and pl-X to set paddings on all sides above spacing level 6.`
},
{
selectors: [
'.top-n0',
'.right-n0',
'.bottom-n0',
'.left-n0',
'.top-md-n0',
'.right-md-n0',
'.bottom-md-n0',
'.left-md-n0',
'.top-lg-n0',
'.right-lg-n0',
'.bottom-lg-n0',
'.left-lg-n0',
'.mt-n0',
'.mb-n0',
'.mt-sm-n0',
'.mb-sm-n0',
'.mt-md-n0',
'.mb-md-n0',
'.mt-lg-n0',
'.mb-lg-n0',
'.mt-xl-n0',
'.mb-xl-n0'
],
message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0).`
},
{
selectors: ['.bg-shade-gradient'],
message: `This selector is deprecated, please use "color-bg-secondary" instead of "bg-shade-gradient".`
},
{
selectors: ['.color-border-overlay'],
message: `Please use the ".color-border-primary" class instead of ".color-border-overlay".`
},
{
selectors: [':-ms-input-placeholder'],
message: 'Browserslist update to match github has removed the need for this pseudoselector'
}
],
'16.0.0': [
{
selectors: [
'.btn-blue',
'.btn-blue:focus',
'.btn-blue.focus',
'.btn-blue:hover',
'.btn-blue.hover',
'.btn-blue:active',
'.btn-blue.selected',
'.btn-blue[aria-selected=true]',
'[open]>.btn-blue',
'.btn-blue:disabled',
'.btn-blue.disabled',
'.btn-blue[aria-disabled=true]',
'.btn-blue .Counter',
'.markdown-body li',
'.input-dark',
'.input-dark:-ms-input-placeholder',
'.input-dark::-ms-input-placeholder',
'.input-dark::placeholder',
'.input-dark.focus',
'.input-dark:focus',
'::-ms-input-placeholder',
'.border-blue',
'.border-blue-light',
'.border-green',
'.border-green-light',
'.border-red',
'.border-red-light',
'.border-purple',
'.border-yellow',
'.border-gray-light',
'.border-gray-dark',
'.border-black-fade',
'.border-white-fade',
'.border-white-fade-15',
'.border-white-fade-30',
'.border-white-fade-50',
'.border-white-fade-70',
'.border-white-fade-85',
'.box-shadow',
'.box-shadow-medium',
'.box-shadow-large',
'.box-shadow-extra-large',
'.bg-white',
'.bg-blue',
'.bg-blue-light',
'.bg-gray-dark',
'.bg-gray',
'.bg-gray-light',
'.bg-green',
'.bg-green-light',
'.bg-red',
'.bg-red-light',
'.bg-yellow',
'.bg-yellow-light',
'.bg-yellow-dark',
'.bg-purple',
'.bg-pink',
'.bg-purple-light',
'.bg-orange',
'.color-gray-0',
'.bg-gray-0',
'.color-gray-1',
'.bg-gray-1',
'.color-gray-2',
'.bg-gray-2',
'.color-gray-3',
'.bg-gray-3',
'.color-gray-4',
'.bg-gray-4',
'.color-gray-5',
'.bg-gray-5',
'.color-gray-6',
'.bg-gray-6',
'.color-gray-7',
'.bg-gray-7',
'.color-gray-8',
'.bg-gray-8',
'.color-gray-9',
'.bg-gray-9',
'.color-blue-0',
'.bg-blue-0',
'.color-blue-1',
'.bg-blue-1',
'.color-blue-2',
'.bg-blue-2',
'.color-blue-3',
'.bg-blue-3',
'.color-blue-4',
'.bg-blue-4',
'.color-blue-5',
'.bg-blue-5',
'.color-blue-6',
'.bg-blue-6',
'.color-blue-7',
'.bg-blue-7',
'.color-blue-8',
'.bg-blue-8',
'.color-blue-9',
'.bg-blue-9',
'.color-green-0',
'.bg-green-0',
'.color-green-1',
'.bg-green-1',
'.color-green-2',
'.bg-green-2',
'.color-green-3',
'.bg-green-3',
'.color-green-4',
'.bg-green-4',
'.color-green-5',
'.bg-green-5',
'.color-green-6',
'.bg-green-6',
'.color-green-7',
'.bg-green-7',
'.color-green-8',
'.bg-green-8',
'.color-green-9',
'.bg-green-9',
'.color-yellow-0',
'.bg-yellow-0',
'.color-yellow-1',
'.bg-yellow-1',
'.color-yellow-2',
'.bg-yellow-2',
'.color-yellow-3',
'.bg-yellow-3',
'.color-yellow-4',
'.bg-yellow-4',
'.color-yellow-5',
'.bg-yellow-5',
'.color-yellow-6',
'.bg-yellow-6',
'.color-yellow-7',
'.bg-yellow-7',
'.color-yellow-8',
'.bg-yellow-8',
'.color-yellow-9',
'.bg-yellow-9',
'.color-orange-0',
'.bg-orange-0',
'.color-orange-1',
'.bg-orange-1',
'.color-orange-2',
'.bg-orange-2',
'.color-orange-3',
'.bg-orange-3',
'.color-orange-4',
'.bg-orange-4',
'.color-orange-5',
'.bg-orange-5',
'.color-orange-6',
'.bg-orange-6',
'.color-orange-7',
'.bg-orange-7',
'.color-orange-8',
'.bg-orange-8',
'.color-orange-9',
'.bg-orange-9',
'.color-red-0',
'.bg-red-0',
'.color-red-1',
'.bg-red-1',
'.color-red-2',
'.bg-red-2',
'.color-red-3',
'.bg-red-3',
'.color-red-4',
'.bg-red-4',
'.color-red-5',
'.bg-red-5',
'.color-red-6',
'.bg-red-6',
'.color-red-7',
'.bg-red-7',
'.color-red-8',
'.bg-red-8',
'.color-red-9',
'.bg-red-9',
'.color-purple-0',
'.bg-purple-0',
'.color-purple-1',
'.bg-purple-1',
'.color-purple-2',
'.bg-purple-2',
'.color-purple-3',
'.bg-purple-3',
'.color-purple-4',
'.bg-purple-4',
'.color-purple-5',
'.bg-purple-5',
'.color-purple-6',
'.bg-purple-6',
'.color-purple-7',
'.bg-purple-7',
'.color-purple-8',
'.bg-purple-8',
'.color-purple-9',
'.bg-purple-9',
'.color-pink-0',
'.bg-pink-0',
'.color-pink-1',
'.bg-pink-1',
'.color-pink-2',
'.bg-pink-2',
'.color-pink-3',
'.bg-pink-3',
'.color-pink-4',
'.bg-pink-4',
'.color-pink-5',
'.bg-pink-5',
'.color-pink-6',
'.bg-pink-6',
'.color-pink-7',
'.bg-pink-7',
'.color-pink-8',
'.bg-pink-8',
'.color-pink-9',
'.bg-pink-9',
'.text-blue',
'.text-red',
'.text-gray-light',
'.text-gray',
'.text-gray-dark',
'.text-green',
'.text-yellow',
'.text-orange',
'.text-orange-light',
'.text-purple',
'.text-pink',
'.text-white',
'.link-gray',
'.link-gray:hover',
'.link-gray-dark',
'.link-gray-dark:hover',
'.link-hover-blue:hover',
'.muted-link',
'.muted-link:hover',
'.text-shadow-dark',
'.text-shadow-light',
'.dropdown-menu-dark',
'.dropdown-menu-dark::before',
'.dropdown-menu-dark::after',
'.dropdown-menu-dark .dropdown-header',
'.dropdown-menu-dark .dropdown-divider',
'.dropdown-menu-dark .dropdown-item',
'.dropdown-menu-dark.dropdown-menu-w::before',
'.dropdown-menu-dark.dropdown-menu-w::after',
'.dropdown-menu-dark.dropdown-menu-e::before',
'.dropdown-menu-dark.dropdown-menu-e::after',
'.dropdown-menu-dark.dropdown-menu-ne::before',
'.dropdown-menu-dark.dropdown-menu-ne::after',
'.Label--outline',
'.Label--gray',
'.Label--gray-darker',
'.Label--yellow',
'.Label--orange',
'.Label--red',
'.Label--outline-green',
'.Label--green',
'.Label--blue',
'.Label--purple',
'.Label--pink',
'.State--green',
'.State--red',
'.State--purple',
'.Counter--gray-light',
'.Counter--gray',
'.btn-transparent:active'
],
message: `This selector is not available in Primer CSS 16.0.0. Please refer to the documentation.`
},
{
variables: [
'$bg-black',
'$bg-black-fade',
'$bg-blue',
'$bg-blue-light',
'$bg-diffstat-added',
'$bg-diffstat-deleted',
'$bg-diffstat-neutral',
'$bg-gray',
'$bg-gray-dark',
'$bg-gray-light',
'$bg-green',
'$bg-green-light',
'$bg-orange',
'$bg-pink',
'$bg-purple',
'$bg-purple-light',
'$bg-red',
'$bg-red-light',
'$bg-white',
'$bg-yellow',
'$bg-yellow-dark',
'$bg-yellow-light',
'$black',
'$black-fade-15',
'$black-fade-30',
'$black-fade-50',
'$black-fade-70',
'$black-fade-85',
'$blue',
'$blue-000',
'$blue-100',
'$blue-200',
'$blue-300',
'$blue-400',
'$blue-500',
'$blue-600',
'$blue-700',
'$blue-800',
'$blue-900',
'$border-black-fade',
'$border-blue',
'$border-blue-light',
'$border-color',
'$border-color-button',
'$border-gray',
'$border-gray-dark',
'$border-gray-darker',
'$border-gray-light',
'$border-green',
'$border-green-light',
'$border-purple',
'$border-red',
'$border-red-light',
'$border-white',
'$border-white-fade',
'$border-yellow',
'$box-shadow',
'$box-shadow-extra-large',
'$box-shadow-focus',
'$box-shadow-highlight',
'$box-shadow-inset',
'$box-shadow-large',
'$box-shadow-medium',
'$btn-active-shadow',
'$btn-input-focus-shadow',
'$form-control-shadow',
'$gray',
'$gray-000',
'$gray-100',
'$gray-200',
'$gray-300',
'$gray-400',
'$gray-500',
'$gray-600',
'$gray-700',
'$gray-800',
'$gray-900',
'$gray-dark',
'$gray-light',
'$green',
'$green-000',
'$green-100',
'$green-200',
'$green-300',
'$green-400',
'$green-500',
'$green-600',
'$green-700',
'$green-800',
'$green-900',
'$orange',
'$orange-000',
'$orange-100',
'$orange-200',
'$orange-300',
'$orange-400',
'$orange-500',
'$orange-600',
'$orange-700',
'$orange-800',
'$orange-900',
'$pink-000',
'$pink-100',
'$pink-200',
'$pink-300',
'$pink-400',
'$pink-500',
'$pink-600',
'$pink-700',
'$pink-800',
'$pink-900',
'$purple',
'$purple-000',
'$purple-100',
'$purple-200',
'$purple-300',
'$purple-400',
'$purple-500',
'$purple-600',
'$purple-700',
'$purple-800',
'$purple-900',
'$red',
'$red-000',
'$red-100',
'$red-200',
'$red-300',
'$red-400',
'$red-500',
'$red-600',
'$red-700',
'$red-800',
'$red-900',
'$text-black',
'$text-blue',
'$text-gray',
'$text-gray-dark',
'$text-gray-light',
'$text-green',
'$text-orange',
'$text-orange-light',
'$text-pink',
'$text-purple',
'$text-red',
'$text-white',
'$text-yellow',
'$tooltip-background-color',
'$tooltip-text-color',
'$white',
'$white-fade-15',
'$white-fade-30',
'$white-fade-50',
'$white-fade-70',
'$white-fade-85',
'$yellow',
'$yellow-000',
'$yellow-100',
'$yellow-200',
'$yellow-300',
'$yellow-400',
'$yellow-500',
'$yellow-600',
'$yellow-700',
'$yellow-800',
'$yellow-900',
'$blue-mktg',
'$green-mktg'
],
message: `This variable is not available in Primer CSS 16.0.0. Please refer to the documentation.`
}
],
'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
}