@primer/css 0.0.0-2021897830 → 0.0.0-20219128133

package/deprecations.js

@@ -1,749 +1,24 @@
-import fs from 'fs'
-
-/*
- * 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.6.1': [
-    {
-      selectors: [
-        '.break-word'
-      ],
-      message: 'The .break-word class has been deprecated, use .wb-break-word instead.'
-    }
-  ],
-  '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.`
-    }
-  ]
-}
+/**
+    Deprecated Selectors
+    -------------------------
+    These are deprecated selectors and should not be used. They include a replacement value,
+    which can be an array or null.
 
-import semver from 'semver'
-const pkg = JSON.parse(fs.readFileSync('./package.json'))
-const {version: CURRENT_VERSION} = pkg
+      * 'deprecated-selector': 'replacement-selector'               <-- Replace with this selector.
+      * 'deprecated-selector': ['replacement-1', 'replacement-2']   <-- Replace with one of these selectors.
+      * 'deprecated-selector': null                                 <-- No option available, remove selector.
+*/
 
-// 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})
-    }
-  }
-}
+import fs from 'fs'
 
-function isSelectorDeprecated(selector, version = CURRENT_VERSION) {
-  const deprecation = selectorDeprecations.get(selector)
-  return deprecation ? semver.gte(deprecation.version, version) : false
-}
+const deprecations = JSON.parse(fs.readFileSync('./dist/deprecations.json'))
 
-function isVariableDeprecated(variable, version = CURRENT_VERSION) {
-  const deprecation = variableDeprecations.get(variable)
-  return deprecation ? semver.gte(deprecation.version, version) : false
-}
+const deprecatedSelectors = deprecations['selectors']
+const deprecatedSassVariables = deprecations['variables']
+const deprecatedSassMixins = deprecations['mixins']
 
 export {
-  versionDeprecations,
-  selectorDeprecations,
-  variableDeprecations,
-  isSelectorDeprecated,
-  isVariableDeprecated
+  deprecatedSelectors,
+  deprecatedSassVariables,
+  deprecatedSassMixins
 }