@primer/stylelint-config 13.0.0-rc.6ef7302 → 13.0.0-rc.980b8d0

package/README.md

@@ -30,10 +30,6 @@ Primer Stylelint Config extends the [stylelint-config-standard](https://github.c
 - [stylelint-order](https://github.com/hudochenkov/stylelint-order): Order-related linting rules for stylelint. Properties must be [sorted according to this list](https://github.com/primer/stylelint-config/blob/main/property-order.js).
 - [stylelint-scss](https://github.com/kristerkari/stylelint-scss): A collection of SCSS specific linting rules for stylelint
   - [scss/selector-no-redundant-nesting-selector](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/selector-no-redundant-nesting-selector/README.md): Disallow redundant nesting selectors (`&`).
-- [primer/no-override](./plugins/#primerno-override): Prohibits custom styles that target Primer CSS selectors.
-- [primer/no-unused-vars](./plugins/#primerno-unused-vars): Warns about SCSS variables that are declared by not used in your local files.
-- [primer/no-undefined-vars](./plugins/#primerno-undefined-vars): Prohibits usage of undefined CSS variables.
-- [primer/no-scale-colors](./plugins/#primerno-scale-colors): Prohibits the use of [non-functional scale CSS variables](https://primer.style/css/support/color-system#color-palette)
 - [primer/colors](./plugins/#primercolors): Enforces the use of certain color variables.
 - [primer/spacing](./plugins/#primerspacing): Enforces the use of spacing variables for margin and padding.
 - [primer/typography](./plugins/#primertypography): Enforces the use of typography variables for certain CSS properties.

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "13.0.0-rc.6ef7302",
+  "version": "13.0.0-rc.980b8d0",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "author": "GitHub, Inc.",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "dist/index.cjs",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
   },
@@ -47,7 +47,6 @@
     "@primer/css": "^21.0.8",
     "@primer/primitives": "^7.16.0",
     "anymatch": "^3.1.1",
-    "globby": "^11.0.1",
     "postcss-scss": "^4.0.2",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-value-parser": "^4.0.2",
@@ -57,6 +56,7 @@
     "stylelint-no-unsupported-browser-features": "^8.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.2.0",
+    "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "tap-map": "^1.0.0"
   },
   "prettier": "@github/prettier-config",

package/plugins/README.md

@@ -7,11 +7,6 @@ This directory contains all of our custom stylelint plugins, each of which provi
 - [Primer stylelint plugins](#primer-stylelint-plugins)
     - [Rules](#rules)
   - [Usage](#usage)
-  - [`primer/no-override`](#primerno-override)
-  - [`primer/no-unused-vars`](#primerno-unused-vars)
-  - [`primer/no-deprecated-colors`](#primerno-deprecated-colors)
-  - [`primer/no-undefined-vars`](#primerno-undefined-vars)
-  - [`primer/no-scale-colors`](#primerno-scale-colors)
   - [`primer/colors`](#primercolors)
   - [`primer/spacing`](#primerspacing)
   - [`primer/typography`](#primertypography)
@@ -33,131 +28,7 @@ If you're _not_ using or extending `@primer/stylelint-config`, you can still ref
 ```js
 // stylelint.config.js
 module.exports = {
-  plugins: ['@primer/stylelint-config/plugins/no-override', '@primer/stylelint-config/plugins/no-unused-vars']
-}
-```
-
-## `primer/no-override`
-
-This rule prohibits "overriding" class selectors defined in [Primer CSS]. By default, it will only fail selectors that target utility classes:
-
-```scss
-// FAIL
-.mt-0 {
-  /* literally anything */
-}
-```
-
-You can further constrain overrides to exclude _any_ class selector in Primer by providing additional names in the `bundles` option:
-
-```js
-// stylelint.config.js
-module.exports = {
-  // ...
-  rules: {
-    'primer/no-override': [
-      true,
-      {
-        bundles: ['utilities', core', 'product', 'marketing']
-      }
-    ]
-  }
-}
-```
-
-## `primer/no-unused-vars`
-
-This rule helps you find SCSS variables that _may_ not be used, and can be safely deleted. It works by scanning all of the SCSS files in your project and looking for anything that appears to be either a Sass variable declaration or reference:
-
-```scss
-    $name: value;
-/**      ↑
- *  The colon is what makes this a declaration */
-
-/* Anything starting with a $ and followed by word chars or hyphens
- * and _not_ followed by a colon is considered a reference: */
-
-    margin: $value;
-/**               ↑
- *                Not a colon */
-    padding: $value 1px;
-/**                ↑
- *                 Not a colon */
-
-@media screen and (max-width: $break-lg) {
-/**                                    ↑
- *                                     Also not a colon */
-```
-
-Equipped with a list of all the variable declarations and references, the linting rule walks all of the declarations in the
-file being linted, finds any that look like declarations (using the same pattern as the project-wide scan), and generates a warning for any that have zero references in the files it's scanned.
-
-Because there isn't any good way for a stylelint plugin to know all of the files being linted, it needs to be told where to find all of the declarations and references in its options:
-
-- `files` is a single path, glob, or array of paths and globs, that tells the plugin which files to scan relative to the current working directory. The default is `['**/*.scss', '!node_modules']`, which tells [globby] to find all the `.scss` files recursively and ignore the `node_modules` directory.
-
-- `variablePattern` is a regular expression that matches a single variable in either a source file string or the `prop` of a postcss Declaration node (`{type: 'decl'}`). The default matches Sass/SCSS variables: `/\$[-\w]/g`. Note that the `g` ("global") flag is _required_ to match multiple variable references on a single line.
-
-- `verbose` is a boolean that enables chatty `console.warn()` messages telling you what the plugin found, which can aid in debugging more complicated project layouts.
-
-## `primer/no-deprecated-colors`
-
-This rule identifies deprecated color variables from [primer/primitives]](https://github.com/primer/primitives) deprecated.json file and suggests replacements.
-
-```scss
-body {
-  color: var(--color-fg-default);
-}
-/**          ↑
- *           OK: --color-text-primary is defined */
-
-body {
-  color: var(--color-text-primary);
-}
-/**          ↑
- *           FAIL: --color-text-primary is deprecated. */
-```
-
-## `primer/no-undefined-vars`
-
-This rule prohibits any usages of undefined CSS variables.
-
-```scss
-:root {
-  --color-text-primary: #000;
-}
-
-body {
-  color: var(--color-text-primary);
-}
-/**          ↑
- *           OK: --color-text-primary is defined */
-
-body {
-  color: var(--color-foo);
-}
-/**          ↑
- *           FAIL: --color-foo is not defined */
-```
-
-For the purposes of this rule, a CSS variable declaration is any text starting with `--` and immediately followed by a colon.
-
-Because there isn't a good way for a stylelint plugin to know what CSS variables are defined, it needs to be told where to look for declarations in its options:
-
-- `files` is a single path, glob, or array of paths and globs, that tells the plugin which files (relative to the current working directory) to scan for CSS variable declarations. The default is `['**/*.scss', '!node_modules']`, which tells [globby] to find all the `.scss` files recursively and ignore the `node_modules` directory.
-- `verbose` is a boolean that enables chatty `console.warn()` messages telling you what the plugin found, which can aid in debugging more complicated project layouts.
-
-## `primer/no-scale-colors`
-
-This rule prohibits the use of [non-functional scale CSS variables](https://primer.style/css/support/color-system#color-palette) like `var(--color-scale-blue-1)` in all cases except the `color-variables` mixin.
-
-```scss
-// Okay; using scale colors while defining new variables
-@include color-scale-var('new-var-name', var(--color-scale-blue-1), var(--color-scale-blue-2))
-
-// Fail; using scale colors directly as a property value
-.selector {
-  color: var(--color-scale-blue-1)
+  plugins: ['@primer/stylelint-config/plugins/colors']
 }
 ```
 
@@ -377,5 +248,4 @@ module.exports = {
 - `disableFix` is a boolean that can disable auto-fixing of this rule when running `stylelint --fix` to auto-fix other rules.
 
 [primer css]: https://primer.style/css
-[globby]: https://www.npmjs.com/package/globby
 [glob patterns]: http://tldp.org/LDP/GNU-Linux-Tools-Summary/html/x11655.htm

package/plugins/new-color-vars-have-fallback.js

@@ -1,35 +0,0 @@
-import stylelint from 'stylelint'
-import variables from './lib/new-color-css-vars-map.json' with {type: 'json'}
-
-export const ruleName = 'primer/new-color-vars-have-fallback'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  expectedFallback: variable =>
-    `Expected a fallback value for CSS variable ${variable}. New color variables fallbacks, check primer.style/primitives to find the correct value`,
-})
-
-export default stylelint.createPlugin(ruleName, enabled => {
-  if (!enabled) {
-    return noop
-  }
-
-  return (root, result) => {
-    root.walkDecls(node => {
-      for (const variable of variables) {
-        if (node.value.includes(`var(${variable})`)) {
-          // Check if the declaration uses a CSS variable from the JSON
-          const match = node.value.match(new RegExp(`var\\(${variable},(.*)\\)`))
-          if (!match || match[1].trim() === '') {
-            stylelint.utils.report({
-              ruleName,
-              result,
-              node,
-              message: messages.expectedFallback(variable),
-            })
-          }
-        }
-      }
-    })
-  }
-})
-
-function noop() {}

package/plugins/no-deprecated-colors.js

@@ -1,97 +0,0 @@
-import stylelint from 'stylelint'
-import matchAll from 'string.prototype.matchall'
-import variableChecks from './lib/primitives-v8.json' with {type: 'json'}
-export const ruleName = 'primer/no-deprecated-colors'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: (varName, replacement, property) => {
-    if (replacement === null) {
-      return `Variable ${varName} is deprecated for property ${property}. Please consult the primer color docs for a replacement. https://primer.style/primitives/storybook/?path=/story/migration-tables`
-    }
-
-    return `Variable ${varName} is deprecated for property ${property}. Please use the replacement ${replacement}.`
-  },
-})
-
-// Match CSS variable references (e.g var(--color-text-primary))
-// eslint-disable-next-line no-useless-escape
-const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
-
-const replacedVars = {}
-const newVars = {}
-
-export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
-  const {inlineFallback = false} = options
-
-  if (!enabled) {
-    return noop
-  }
-
-  const {verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-
-  // Keep track of declarations we've already seen
-  const seen = new WeakMap()
-
-  const lintResult = (root, result) => {
-    // Walk all declarations
-    root.walk(node => {
-      if (seen.has(node)) {
-        return
-      } else {
-        seen.set(node, true)
-      }
-
-      // walk these nodes
-      if (node.type !== 'decl') {
-        return
-      }
-
-      for (const [, variableName] of matchAll(node.value, variableReferenceRegex)) {
-        if (variableName in variableChecks) {
-          let replacement = variableChecks[variableName]
-          if (typeof replacement === 'object') {
-            if (node.prop) {
-              for (const prop of replacement) {
-                // Check if node.prop starts with one of the props array elements
-                if (prop['props'].some(p => node.prop.startsWith(p))) {
-                  replacement = prop['replacement']
-                  break
-                }
-              }
-            }
-            if (typeof replacement === 'object') {
-              replacement = null
-            }
-          }
-
-          if (context.fix && replacement !== null) {
-            replacement = `${replacement}${inlineFallback ? `, var(${variableName})` : ''}`
-            replacedVars[variableName] = true
-            newVars[replacement] = true
-            if (node.type === 'atrule') {
-              node.params = node.params.replace(variableName, replacement)
-            } else {
-              node.value = node.value.replace(variableName, replacement)
-            }
-            continue
-          }
-
-          stylelint.utils.report({
-            message: messages.rejected(variableName, replacement, node.prop),
-            node,
-            ruleName,
-            result,
-          })
-        }
-      }
-    })
-  }
-
-  log(
-    `${Object.keys(replacedVars).length} deprecated variables replaced with ${Object.keys(newVars).length} variables.`,
-  )
-  return lintResult
-})
-
-function noop() {}

package/plugins/no-override.js

@@ -1,98 +0,0 @@
-import stylelint from 'stylelint'
-import primerJson from '@primer/css/dist/stats/primer.json' with {type: 'json'}
-
-const ruleName = 'primer/no-override'
-const CLASS_PATTERN = /(\.[-\w]+)/
-const CLASS_PATTERN_ALL = new RegExp(CLASS_PATTERN, 'g')
-const CLASS_PATTERN_ONLY = /^\.[-\w]+(:{1,2}[-\w]+)?$/
-
-export default stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {ignoreSelectors = []} = options
-
-  const isSelectorIgnored =
-    typeof ignoreSelectors === 'function'
-      ? ignoreSelectors
-      : selector => {
-          return ignoreSelectors.some(pattern => {
-            return pattern instanceof RegExp ? pattern.test(selector) : selector.includes(pattern)
-          })
-        }
-
-  // These map selectors to the bundle in which they're defined.
-  // If there's no entry for a given selector, it means that it's not defined
-  // in one of the *specified* bundles, since we're iterating over the list of
-  // bundle names in the options.
-  const immutableSelectors = new Set()
-  const immutableClassSelectors = new Set()
-
-  const selectors = primerJson.selectors.values
-  for (const selector of selectors) {
-    immutableSelectors.add(selector)
-    for (const classSelector of getClassSelectors(selector)) {
-      immutableClassSelectors.add(classSelector)
-    }
-  }
-
-  const messages = stylelint.utils.ruleMessages(ruleName, {
-    rejected: ({rule, selector}) => {
-      const ruleSelector = collapseWhitespace(rule.selector)
-      const context = selector === rule.selector ? '' : ` in "${ruleSelector}"`
-      return `Primer CSS class "${collapseWhitespace(selector)}" should not be overridden${context}.`
-    },
-  })
-
-  return (root, result) => {
-    const report = subject =>
-      stylelint.utils.report({
-        message: messages.rejected(subject),
-        node: subject.rule,
-        result,
-        ruleName,
-      })
-
-    root.walkRules(rule => {
-      const {selector} = rule
-      if (immutableSelectors.has(selector)) {
-        if (isClassSelector(selector)) {
-          if (!isSelectorIgnored(selector)) {
-            return report({
-              rule,
-              selector,
-            })
-          }
-        } else {
-          // console.log(`not a class selector: "${selector}"`)
-        }
-      }
-      for (const classSelector of getClassSelectors(selector)) {
-        if (immutableClassSelectors.has(classSelector)) {
-          if (!isSelectorIgnored(classSelector)) {
-            return report({
-              rule,
-              selector: classSelector,
-            })
-          }
-        }
-      }
-    })
-  }
-})
-
-function getClassSelectors(selector) {
-  const match = selector.match(CLASS_PATTERN_ALL)
-  return match ? [...match] : []
-}
-
-function isClassSelector(selector) {
-  return CLASS_PATTERN_ONLY.test(selector)
-}
-
-function collapseWhitespace(str) {
-  return str.trim().replace(/\s+/g, ' ')
-}
-
-function noop() {}

package/plugins/no-scale-colors.js

@@ -1,51 +0,0 @@
-import stylelint from 'stylelint'
-import matchAll from 'string.prototype.matchall'
-
-export const ruleName = 'primer/no-scale-colors'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: varName =>
-    `${varName} is a non-functional scale color and cannot be used without being wrapped in the color-variables mixin`,
-})
-
-// Match CSS variable references (e.g var(--color-text-primary))
-// eslint-disable-next-line no-useless-escape
-const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
-
-export default stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-
-  // Keep track of declarations we've already seen
-  const seen = new WeakMap()
-
-  return (root, result) => {
-    root.walkRules(rule => {
-      rule.walkDecls(decl => {
-        if (seen.has(decl)) {
-          return
-        } else {
-          seen.set(decl, true)
-        }
-
-        for (const [, variableName] of matchAll(decl.value, variableReferenceRegex)) {
-          log(`Found variable reference ${variableName}`)
-          if (variableName.match(/^--color-(scale|auto)-/)) {
-            stylelint.utils.report({
-              message: messages.rejected(variableName),
-              node: decl,
-              result,
-              ruleName,
-            })
-          }
-        }
-      })
-    })
-  }
-})
-
-function noop() {}

package/plugins/no-undefined-vars.js

@@ -1,118 +0,0 @@
-import fs from 'fs'
-import stylelint from 'stylelint'
-import matchAll from 'string.prototype.matchall'
-import globby from 'globby'
-import TapMap from 'tap-map'
-
-export const ruleName = 'primer/no-undefined-vars'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: varName => `${varName} is not defined`,
-})
-
-// Match CSS variable definitions (e.g. --color-text-primary:)
-const variableDefinitionRegex = /^\s*(--[\w|-]+):/gm
-
-// Match CSS variables defined with the color-variables mixin
-const colorModeVariableDefinitionRegex = /^[^/\n]*\(["']?([^'"\s,]+)["']?,\s*\(light|dark:/gm
-
-// Match CSS variable references (e.g var(--color-text-primary))
-// eslint-disable-next-line no-useless-escape
-const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
-
-export default stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {files = ['**/*.scss', '!node_modules'], verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-  const globalDefinedVariables = getDefinedVariables(files, log)
-  // Keep track of declarations we've already seen
-  const seen = new WeakMap()
-
-  return (root, result) => {
-    const fileDefinedVariables = new Set()
-
-    function checkVariable(variableName, node, allowed) {
-      if (!allowed.has(variableName)) {
-        stylelint.utils.report({
-          message: messages.rejected(variableName),
-          node,
-          result,
-          ruleName,
-        })
-      }
-    }
-
-    root.walkAtRules(rule => {
-      if (rule.name === 'include' && rule.params.startsWith('color-variables')) {
-        const innerMatch = [...matchAll(rule.params, variableReferenceRegex)]
-        if (!innerMatch.length) {
-          return
-        }
-
-        for (const [, variableName] of innerMatch) {
-          checkVariable(variableName, rule, new Set([...globalDefinedVariables, ...fileDefinedVariables]))
-        }
-      }
-    })
-
-    root.walkRules(rule => {
-      const scopeDefinedVaribles = new Set()
-
-      rule.walkDecls(decl => {
-        // Add CSS variable declarations within the source text to the list of allowed variables
-        if (decl.prop.startsWith('--')) {
-          scopeDefinedVaribles.add(decl.prop)
-          if (decl.parent.selector === ':root' || decl.parent.selector === ':host') {
-            fileDefinedVariables.add(decl.prop)
-          }
-        }
-
-        if (seen.has(decl)) {
-          return
-        } else {
-          seen.set(decl, true)
-        }
-
-        for (const [, variableName] of matchAll(decl.value, variableReferenceRegex)) {
-          checkVariable(
-            variableName,
-            decl,
-            new Set([...globalDefinedVariables, ...fileDefinedVariables, ...scopeDefinedVaribles]),
-          )
-        }
-      })
-    })
-  }
-})
-
-const cwd = process.cwd()
-const cache = new TapMap()
-
-function getDefinedVariables(globs, log) {
-  const cacheKey = JSON.stringify({globs, cwd})
-  return cache.tap(cacheKey, () => {
-    const definedVariables = new Set()
-
-    const files = globby.sync(globs)
-    log(`Scanning ${files.length} SCSS files for CSS variables`)
-    for (const file of files) {
-      log(`==========\nLooking for CSS variable definitions in ${file}`)
-      const css = fs.readFileSync(file, 'utf-8')
-      for (const [, variableName] of matchAll(css, variableDefinitionRegex)) {
-        log(`${variableName} defined in ${file}`)
-        definedVariables.add(variableName)
-      }
-      for (const [, variableName] of matchAll(css, colorModeVariableDefinitionRegex)) {
-        log(`--color-${variableName} defined via color-variables in ${file}`)
-        definedVariables.add(`--color-${variableName}`)
-      }
-    }
-
-    return definedVariables
-  })
-}
-
-function noop() {}

package/plugins/no-unused-vars.js

@@ -1,96 +0,0 @@
-import TapMap from 'tap-map'
-import globby from 'globby'
-import matchAll from 'string.prototype.matchall'
-import stylelint from 'stylelint'
-import {readFileSync} from 'fs'
-
-export const ruleName = 'primer/no-unused-vars'
-
-const cwd = process.cwd()
-const COLON = ':'
-const SCSS_VARIABLE_PATTERN = /(\$[-\w]+)/g
-
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: name => `The variable "${name}" is not referenced.`,
-})
-
-const cache = new TapMap()
-
-export default stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {files = ['**/*.scss', '!node_modules'], variablePattern = SCSS_VARIABLE_PATTERN, verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-  const cacheOptions = {files, variablePattern, cwd}
-  const {refs} = getCachedVariables(cacheOptions, log)
-
-  return (root, result) => {
-    root.walkDecls(decl => {
-      for (const [name] of matchAll(decl.prop, variablePattern)) {
-        if (!refs.has(name)) {
-          stylelint.utils.report({
-            message: messages.rejected(name),
-            node: decl,
-            result,
-            ruleName,
-          })
-        } else {
-          const path = stripCwd(decl.source.input.file)
-          log(`${name} declared in ${path} ref'd in ${pluralize(refs.get(name).size, 'file')}`)
-        }
-      }
-    })
-  }
-})
-
-function getCachedVariables(options, log) {
-  const key = JSON.stringify(options)
-  return cache.tap(key, () => {
-    const {files, variablePattern} = options
-    const decls = new TapMap()
-    const refs = new TapMap()
-
-    log(`Looking for variables in ${files} ...`)
-    for (const file of globby.sync(files)) {
-      const css = readFileSync(file, 'utf8')
-      for (const match of matchAll(css, variablePattern)) {
-        const after = css.substr(match.index + match[0].length)
-        const name = match[0]
-        if (after.startsWith(COLON)) {
-          decls.tap(name, set).add(file)
-        } else {
-          refs.tap(name, set).add(file)
-        }
-      }
-    }
-    log(`Found ${decls.size} declarations, ${pluralize(refs.size, 'reference')}.`)
-
-    for (const [name, filesList] of decls.entries()) {
-      const fileRefs = refs.get(name)
-      if (fileRefs) {
-        log(`variable "${name}" declared in ${pluralize(filesList.size, 'file')}, ref'd in ${fileRefs.size}`)
-      } else {
-        log(`[!] variable "${name}" declared in ${Array.from(filesList)[0]} is not referenced`)
-      }
-    }
-
-    return {decls, refs}
-  })
-}
-
-function noop() {}
-
-function set() {
-  return new Set()
-}
-
-function stripCwd(path) {
-  return path.startsWith(cwd) ? path.substr(cwd.length + 1) : path
-}
-
-function pluralize(num, str, plural = `${str}s`) {
-  return num === 1 ? `${num} ${str}` : `${num} ${plural}`
-}