From 87ccee28669999078a51cb4d1aa49284c08afcc9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 2 Sep 2023 23:54:58 +0200 Subject: [PATCH] [docs] Fix e.g. typo (#38748) --- CHANGELOG.md | 2 +- CHANGELOG.old.md | 2 +- .../components/autocomplete/FreeSoloCreateOptionDialog.js | 2 +- .../components/autocomplete/FreeSoloCreateOptionDialog.tsx | 2 +- .../components/autocomplete/FreeSoloCreateOptionDialog.js | 2 +- .../components/autocomplete/FreeSoloCreateOptionDialog.tsx | 2 +- .../minimizing-bundle-size/minimizing-bundle-size-pt.md | 2 +- .../minimizing-bundle-size/minimizing-bundle-size-zh.md | 2 +- .../guides/minimizing-bundle-size/minimizing-bundle-size.md | 2 +- docs/pages/blog/callback-support-in-style-overrides.md | 2 +- docs/src/modules/sandbox/Dependencies.ts | 2 +- .../api-docs/circular-progress/circular-progress-pt.json | 2 +- .../api-docs/circular-progress/circular-progress-zh.json | 2 +- .../api-docs/circular-progress/circular-progress.json | 2 +- packages/mui-joy/src/Button/Button.tsx | 4 ++-- packages/mui-joy/src/Chip/Chip.tsx | 6 +++--- packages/mui-joy/src/IconButton/IconButton.tsx | 4 ++-- packages/mui-joy/src/ListItem/ListItem.tsx | 2 +- packages/mui-joy/src/styles/styleUtils.ts | 2 +- .../mui-material/src/CircularProgress/CircularProgress.d.ts | 2 +- .../mui-material/src/CircularProgress/CircularProgress.js | 2 +- packages/typescript-to-proptypes/src/injector.ts | 2 +- packages/zero-tag-processor/src/utils/sxObjectExtractor.ts | 2 +- scripts/generateProptypes.ts | 2 +- test/README.md | 2 +- test/utils/initMatchers.ts | 2 +- 26 files changed, 30 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e5a0f62210d306..7b30ed05a9c9cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10720,7 +10720,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som - [Avatar] Fix usage of srcset property (#23286) @matheuspiment - [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23315) @eps1lon - [core] Allow React 17 (#23311) @eps1lon -- [Icon] Fix translation, e.g Google Translate (#23237) @cbeltrangomez84 +- [Icon] Fix translation, e.g. Google Translate (#23237) @cbeltrangomez84 - [LinearProgress] Fix Safari's bug during composition of different paint (#23293) @montogeek - [Radio] Fix dot misalignment in Safari (#23239) @anasufana - [styled-engine] Fix tagged template syntax with multiple expressions (#23269) @eps1lon diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index 816fa38fd39b72..a0f4ca75ea0322 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -5540,7 +5540,7 @@ you to add them up quickly in your head without having to worry about decimals. - [docs] Fix search suggestions on dark mode (#13874) @rfbotto - [docs] Add accessibility section to selection-controls with demo (#13896) @wyseguyonline -- [docs] Add support for multiple demo variants e.g JS or Hooks (#13873) @adeelibr +- [docs] Add support for multiple demo variants e.g. JS or Hooks (#13873) @adeelibr - [docs] Remove the withRoot HOC (#13909) @oliviertassinari - [docs] Add material-ui-pickers in pickers page (#13697) @dmtrKovalenko - [docs] Continue #13806 and port back some fix from @system (#13917) @oliviertassinari diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js index ccc540e804c1f1..9035d29c01b11d 100644 --- a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -80,7 +80,7 @@ export default function FreeSoloCreateOptionDialog() { }} options={top100Films} getOptionLabel={(option) => { - // e.g value selected with enter, right from the input + // e.g. value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx index 0c7439a1936bdc..f0931094d3d28c 100644 --- a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx @@ -80,7 +80,7 @@ export default function FreeSoloCreateOptionDialog() { }} options={top100Films} getOptionLabel={(option) => { - // e.g value selected with enter, right from the input + // e.g. value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js index 26e2712743606b..47e51826760a40 100644 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -75,7 +75,7 @@ export default function FreeSoloCreateOptionDialog() { id="free-solo-dialog-demo" options={top100Films} getOptionLabel={(option) => { - // e.g value selected with enter, right from the input + // e.g. value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx index cb8682ab4302bc..429d3dedc6bde3 100644 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx @@ -75,7 +75,7 @@ export default function FreeSoloCreateOptionDialog() { id="free-solo-dialog-demo" options={top100Films} getOptionLabel={(option) => { - // e.g value selected with enter, right from the input + // e.g. value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md index 5e30e68f7368ff..306ecfd30497c1 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md @@ -206,7 +206,7 @@ Finalmente, você pode converter sua base de código existente com esse [codemod The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/). -⚠️ Para minimizar a duplicação de código nos pacotes de usuários, autores de biblioteca são **fortemente desencorajados** a importar de qualquer um dos outros pacotes. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): +⚠️ Para minimizar a duplicação de código nos pacotes de usuários, autores de biblioteca são **fortemente desencorajados** a importar de qualquer um dos outros pacotes. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g. [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): ```js { diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md index 974981f086463b..5b90347af78206 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md @@ -206,7 +206,7 @@ module.exports = override(useBabelRc()); The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/). -⚠️ 为了尽量减少用户捆绑包中的重复代码，库作者 **非常不鼓励** 从任何其他捆绑包中导入。 Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): +⚠️ 为了尽量减少用户捆绑包中的重复代码，库作者 **非常不鼓励** 从任何其他捆绑包中导入。 Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. Instead, use these bundles at the bundler level with e.g. [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): ```js { diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md index bdc3eda53d8b5e..6fc64b54b7549c 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md @@ -213,7 +213,7 @@ The package published on npm is **transpiled**, with [Babel](https://github.com/ ⚠️ Developers are **strongly discouraged** to import from any of the other bundles directly. Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. -Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): +Instead, use these bundles at the bundler level with e.g. [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): ```js { diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md index b7e25bc17cd95d..72304620b71c41 100644 --- a/docs/pages/blog/callback-support-in-style-overrides.md +++ b/docs/pages/blog/callback-support-in-style-overrides.md @@ -68,7 +68,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles'; The callback is type-safe. -- `ownerState`: `ComponentProps` interface, eg. `ButtonProps`, `ChipProps`, etc. +- `ownerState`: `ComponentProps` interface, e.g. `ButtonProps`, `ChipProps`, etc. - `theme`: `Theme` interface from `@mui/material/styles`. ```tsx diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts index cfb952c223256f..c4c618a7f3f081 100644 --- a/docs/src/modules/sandbox/Dependencies.ts +++ b/docs/src/modules/sandbox/Dependencies.ts @@ -128,7 +128,7 @@ export default function SandboxDependencies( deps[name] = versions[name] ? versions[name] : 'latest'; } - // e.g date-fns + // e.g. date-fns const dateAdapterMatch = fullName.match( /^@mui\/(lab|x-date-pickers)\/(?Adapter.*)/, ) as RegExpMatchArrayWithGroups<{ adapterName: string }>; diff --git a/docs/translations/api-docs/circular-progress/circular-progress-pt.json b/docs/translations/api-docs/circular-progress/circular-progress-pt.json index 8fb837cdcd4302..d1071e225ef3b6 100644 --- a/docs/translations/api-docs/circular-progress/circular-progress-pt.json +++ b/docs/translations/api-docs/circular-progress/circular-progress-pt.json @@ -4,7 +4,7 @@ "classes": "Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "disableShrink": "If true, the shrink animation is disabled. This only works if variant is indeterminate.", - "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'.", + "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g. '3rem'.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "thickness": "The thickness of the circle.", "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.", diff --git a/docs/translations/api-docs/circular-progress/circular-progress-zh.json b/docs/translations/api-docs/circular-progress/circular-progress-zh.json index aed68973841ecd..2b1f8128fdbfc5 100644 --- a/docs/translations/api-docs/circular-progress/circular-progress-zh.json +++ b/docs/translations/api-docs/circular-progress/circular-progress-zh.json @@ -4,7 +4,7 @@ "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "disableShrink": "If true, the shrink animation is disabled. This only works if variant is indeterminate.", - "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'.", + "size": "The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g. '3rem'.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "thickness": "The thickness of the circle.", "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.", diff --git a/docs/translations/api-docs/circular-progress/circular-progress.json b/docs/translations/api-docs/circular-progress/circular-progress.json index 534bd39fa8a3ca..e587a33ff03b54 100644 --- a/docs/translations/api-docs/circular-progress/circular-progress.json +++ b/docs/translations/api-docs/circular-progress/circular-progress.json @@ -9,7 +9,7 @@ "description": "If true, the shrink animation is disabled. This only works if variant is indeterminate." }, "size": { - "description": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'." + "description": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g. '3rem'." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 4c34ea7161aea3..4c5ab66482fb96 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -132,8 +132,8 @@ export const getButtonStyles = ({ paddingInline: '1.5rem', }), WebkitTapHighlightColor: 'transparent', - borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input - margin: `var(--Button-margin)`, // to be controlled by other components, eg. Input + borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input + margin: `var(--Button-margin)`, // to be controlled by other components, e.g. Input border: 'none', backgroundColor: 'transparent', cursor: 'pointer', diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx index 4ec4d5882133cc..3d6d99d0dea6fd 100644 --- a/packages/mui-joy/src/Chip/Chip.tsx +++ b/packages/mui-joy/src/Chip/Chip.tsx @@ -184,7 +184,7 @@ const ChipStartDecorator = styled('span', { '--IconButton-margin': '0 0 0 calc(var(--Chip-decoratorChildOffset) * -1)', '--Icon-margin': '0 0 0 calc(var(--Chip-paddingInline) / -4)', display: 'inherit', - // set zIndex to 1 with order to stay on top of other controls, eg. Checkbox, Radio + // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio order: 0, zIndex: 1, pointerEvents: 'none', @@ -198,7 +198,7 @@ const ChipEndDecorator = styled('span', { '--IconButton-margin': '0 calc(var(--Chip-decoratorChildOffset) * -1) 0 0', '--Icon-margin': '0 calc(var(--Chip-paddingInline) / -4) 0 0', display: 'inherit', - // set zIndex to 1 with order to stay on top of other controls, eg. Checkbox, Radio + // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio order: 2, zIndex: 1, pointerEvents: 'none', @@ -313,7 +313,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { {clickable && } - {/* label is always the first element for integrating with other controls, eg. Checkbox, Radio. Use CSS order to rearrange position */} + {/* label is always the first element for integrating with other controls, e.g. Checkbox, Radio. Use CSS order to rearrange position */} {children} diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 02964cb2752023..4f58b7cc481afa 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -76,8 +76,8 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt paddingBlock: 0, fontFamily: theme.vars.fontFamily.body, fontWeight: theme.vars.fontWeight.md, - margin: `var(--IconButton-margin)`, // to be controlled by other components, eg. Input - borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input + margin: `var(--IconButton-margin)`, // to be controlled by other components, e.g. Input + borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input border: 'none', boxSizing: 'border-box', backgroundColor: 'transparent', diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx index 372def438710d2..8378666d75fdd5 100644 --- a/packages/mui-joy/src/ListItem/ListItem.tsx +++ b/packages/mui-joy/src/ListItem/ListItem.tsx @@ -64,7 +64,7 @@ export const StyledListItem = styled('li')<{ ownerState: ListItemOwnerState }>( } as const), // Base styles { - // Integration with control elements, eg. Checkbox, Radio. + // Integration with control elements, e.g. Checkbox, Radio. '--unstable_actionRadius': 'calc(var(--ListItem-radius) - var(--variant-borderWidth, 0px))', ...(ownerState.startAction && { '--unstable_startActionWidth': '2rem', // to add sufficient padding-left on ListItemButton diff --git a/packages/mui-joy/src/styles/styleUtils.ts b/packages/mui-joy/src/styles/styleUtils.ts index 8f6971f77608e4..e2ad445fe31f64 100644 --- a/packages/mui-joy/src/styles/styleUtils.ts +++ b/packages/mui-joy/src/styles/styleUtils.ts @@ -4,7 +4,7 @@ import { Theme, SxProps } from './types'; * internal utility * * Why? to read `sx` values and attach component's CSS variables - * eg. should attach + * e.g. should attach * `--Card-radius: 0px` so that developers don't have to remember * * Why not reuse `styleFunctionSx`? diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts index d48f65edde9e6c..5d73c7bdfd21ca 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts +++ b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts @@ -31,7 +31,7 @@ export interface CircularProgressProps /** * The size of the component. * If using a number, the pixel unit is assumed. - * If using a string, you need to provide the CSS unit, e.g '3rem'. + * If using a string, you need to provide the CSS unit, e.g. '3rem'. * @default 40 */ size?: number | string; diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index e41d81b2207be9..8cd7cac96025b3 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -238,7 +238,7 @@ CircularProgress.propTypes /* remove-proptypes */ = { /** * The size of the component. * If using a number, the pixel unit is assumed. - * If using a string, you need to provide the CSS unit, e.g '3rem'. + * If using a string, you need to provide the CSS unit, e.g. '3rem'. * @default 40 */ size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/typescript-to-proptypes/src/injector.ts b/packages/typescript-to-proptypes/src/injector.ts index f4f29ba9b3bf67..e637a581f4b2c3 100644 --- a/packages/typescript-to-proptypes/src/injector.ts +++ b/packages/typescript-to-proptypes/src/injector.ts @@ -387,7 +387,7 @@ function plugin( if (babelTypes.isArrowFunctionExpression(arg) || babelTypes.isFunctionExpression(arg)) { getFromProp(arg.params[0]); } else if ((nodeInit.callee as babel.types.Identifier)?.name?.match(/create[A-Z].*/)) { - // Any components that are created by a factory function, eg. System Box | Container | Grid. + // Any components that are created by a factory function, e.g. System Box | Container | Grid. getFromProp(node); } } diff --git a/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts b/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts index cb41022a13abda..48b7f1020897f8 100644 --- a/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts +++ b/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts @@ -128,7 +128,7 @@ export function sxObjectExtractor(nodePath: NodePath ({color: 'red'}). You can accept theme object in the params if required.", + "sx prop only supports arrow functions that directly return an object, e.g. () => ({color: 'red'}). You can accept theme object in the params if required.", ); } traverseObjectExpression(body, nodePath); diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 003be07d9d3be9..85d03c5c1c685f 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -177,7 +177,7 @@ async function generateProptypes( return; } - // exclude internal slot components, eg. ButtonRoot + // exclude internal slot components, e.g. ButtonRoot proptypes.body = proptypes.body.filter((data) => { if (data.propsFilename?.endsWith('.tsx')) { // only check for .tsx diff --git a/test/README.md b/test/README.md index 15e3e58a82e21e..7fd8d0c11e063c 100644 --- a/test/README.md +++ b/test/README.md @@ -248,7 +248,7 @@ Possible values for `version`: - default: `stable` (minimum supported React version) - a tag on npm e.g. `next`, `experimental` or `latest` -- an older version e.g `^17.0.0` +- an older version e.g. `^17.0.0` #### CI diff --git a/test/utils/initMatchers.ts b/test/utils/initMatchers.ts index 4c4b0a3cacf080..845ff04244bd49 100644 --- a/test/utils/initMatchers.ts +++ b/test/utils/initMatchers.ts @@ -163,7 +163,7 @@ chai.use((chaiAPI, utils) => { // `CSSStyleDeclaration` is not constructable // https://stackoverflow.com/a/52732909/3406963 // this is not equivalent to the declaration from `getComputedStyle` - // e.g `getComputedStyle` would return a readonly declaration + // e.g. `getComputedStyle` would return a readonly declaration // let's hope this doesn't get passed around until it's no longer clear where it comes from const declaration = document.createElement('span').style;