mirror of
https://github.com/primer/css.git
synced 2024-12-26 23:54:28 +03:00
661 lines
18 KiB
JavaScript
661 lines
18 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': [
|
|
{
|
|
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
|
|
}
|