From ed2cc87c6e2980b1d3b67ead3717f1ab4694c58c Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 6 Sep 2023 16:06:47 +0100 Subject: [PATCH] update typescript-eslint/parser + lint --- .storybook/main.ts | 2 +- __test__/e2e/theming.spec.ts | 4 +- components/Button/Button.test.tsx | 2 +- components/JobSummary/JobSummary.spec.tsx | 4 +- components/JobSummary/JobSummary.tsx | 4 +- components/Layout/Layout.spec.tsx | 10 +- components/PostCard/PostCard.spec.tsx | 4 +- components/PostLayout/PostLayout.tsx | 2 +- components/PostTitle/PostTitle.spec.tsx | 16 +-- components/PostTitle/PostTitle.tsx | 2 +- components/Search/Search.spec.tsx | 2 +- components/Tag/Tag.spec.tsx | 4 +- .../ThemeToggle/ThemeToggle.module.scss | 21 ++-- components/ThemeToggle/ThemeToggle.spec.tsx | 6 +- .../WordlePoem/CharacterTile.module.scss | 4 +- components/WordlePoem/CharacterTile.spec.tsx | 2 +- .../CharacterTileIntersectionContext.tsx | 4 +- components/WordlePoem/WordlePoem.spec.tsx | 6 +- package-lock.json | 108 ++++++++++++++++-- package.json | 2 +- pages/_app.tsx | 2 +- pages/about.tsx | 2 +- pages/posts.tsx | 2 +- pages/posts/bye-bye-popups.mdx | 4 +- styles/About.module.scss | 4 +- styles/mixins.scss | 4 +- 26 files changed, 164 insertions(+), 63 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index bbd048e5..9341356a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -24,7 +24,7 @@ const config: StorybookConfig = { (rule) => typeof rule !== 'string' && rule.test instanceof RegExp && - rule.test.test('.svg') + rule.test.test('.svg'), ) if (imageRule && typeof imageRule !== 'string') { imageRule.exclude = /\.svg$/ diff --git a/__test__/e2e/theming.spec.ts b/__test__/e2e/theming.spec.ts index 9dadb1b7..151a1f4f 100644 --- a/__test__/e2e/theming.spec.ts +++ b/__test__/e2e/theming.spec.ts @@ -12,8 +12,8 @@ test.describe('theming', () => { }) => { const mainPage = page.locator('[role="main"]') await expect(mainPage).toBeVisible() - await page.evaluate(() => - document.querySelector('[role="main"]')?.scrollTo(0, 100) + await page.evaluate( + () => document.querySelector('[role="main"]')?.scrollTo(0, 100), ) expect(await page.isChecked(themeToggleSelector)).toEqual(false) diff --git a/components/Button/Button.test.tsx b/components/Button/Button.test.tsx index 11af84a8..569842db 100644 --- a/components/Button/Button.test.tsx +++ b/components/Button/Button.test.tsx @@ -12,7 +12,7 @@ describe('Button', () => { render( + , ) }) diff --git a/components/JobSummary/JobSummary.spec.tsx b/components/JobSummary/JobSummary.spec.tsx index adc92eb4..2bfc6172 100644 --- a/components/JobSummary/JobSummary.spec.tsx +++ b/components/JobSummary/JobSummary.spec.tsx @@ -23,7 +23,7 @@ describe('JobSummary', () => { website={mockWebsite} > {mockSummary} - + , ) }) @@ -65,7 +65,7 @@ describe('JobSummary', () => { website={mockWebsite} > {mockSummary} - + , ) const dateRange = screen.getByText('January 2020 - Present') expect(dateRange).toBeInTheDocument() diff --git a/components/JobSummary/JobSummary.tsx b/components/JobSummary/JobSummary.tsx index 9f51933c..81da8ebc 100644 --- a/components/JobSummary/JobSummary.tsx +++ b/components/JobSummary/JobSummary.tsx @@ -35,7 +35,7 @@ const JobSummary = forwardRef( endDate, website, }, - ref + ref, ) => { return (
( {children}
) - } + }, ) export default JobSummary diff --git a/components/Layout/Layout.spec.tsx b/components/Layout/Layout.spec.tsx index 72ccd9a1..f2cffe41 100644 --- a/components/Layout/Layout.spec.tsx +++ b/components/Layout/Layout.spec.tsx @@ -30,7 +30,7 @@ describe('Layout', () => { component = render( {mockChild} - + , ) // need to wait for the theme toggle to render @@ -53,7 +53,7 @@ describe('Layout', () => { metaDescription={mockMetaDescription} > {mockChild} - + , ) const link = screen.getByTestId(foregroundId) expect(link).toBeInTheDocument() @@ -67,7 +67,7 @@ describe('Layout', () => { metaDescription={mockMetaDescription} > {mockChild} - + , ) const link = screen.getByTestId(backgroundId) expect(link).toBeInTheDocument() @@ -99,7 +99,7 @@ describe('Layout', () => { metaDescription={mockMetaDescription} > {mockChild} - + , ) // need to wait for the theme toggle to render @@ -148,7 +148,7 @@ describe('Layout', () => { metaDescription={mockMetaDescription} > {mockChild} - + , ) // need to wait for the theme toggle to render diff --git a/components/PostCard/PostCard.spec.tsx b/components/PostCard/PostCard.spec.tsx index 2c4b0afe..d625b258 100644 --- a/components/PostCard/PostCard.spec.tsx +++ b/components/PostCard/PostCard.spec.tsx @@ -17,7 +17,7 @@ describe('PostCard', () => { slug={mockSlug} tags={mockTags} title={mockTitle} - /> + />, ) }) @@ -56,7 +56,7 @@ describe('PostCard', () => { const link = screen.getByTestId('PostCard-image') expect(link).toHaveAttribute( 'style', - `background-image: url(${mockCoverImage});` + `background-image: url(${mockCoverImage});`, ) }) }) diff --git a/components/PostLayout/PostLayout.tsx b/components/PostLayout/PostLayout.tsx index 78df32fb..87f35145 100644 --- a/components/PostLayout/PostLayout.tsx +++ b/components/PostLayout/PostLayout.tsx @@ -43,7 +43,7 @@ export default function PostLayout({ children, metadata }: Props) { scriptElement.setAttribute('src', 'https://utteranc.es/client.js') scriptElement.setAttribute( 'repo', - 'ashharrison90/ashharrison90.github.io' + 'ashharrison90/ashharrison90.github.io', ) scriptElement.setAttribute('issue-term', 'pathname') scriptElement.setAttribute('label', 'post-comments') diff --git a/components/PostTitle/PostTitle.spec.tsx b/components/PostTitle/PostTitle.spec.tsx index 74d384db..1aabf6e2 100644 --- a/components/PostTitle/PostTitle.spec.tsx +++ b/components/PostTitle/PostTitle.spec.tsx @@ -24,7 +24,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) const title = screen.getByText(mockTitle) expect(title).toBeInTheDocument() @@ -37,7 +37,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) const date = screen.getByText(mockDate) expect(date).toBeInTheDocument() @@ -50,7 +50,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) const excerpt = screen.getByText(mockExcerpt) expect(excerpt).toBeInTheDocument() @@ -63,7 +63,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) mockTags.forEach((mockTag) => { const tag = screen.getByText(mockTag) @@ -78,7 +78,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) const link = screen.getByRole('link', { name: 'Share to LinkedIn' }) expect(link).toBeInTheDocument() @@ -91,7 +91,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) const link = screen.getByRole('link', { name: 'Share to Reddit' }) expect(link).toBeInTheDocument() @@ -104,7 +104,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) const link = screen.getByRole('link', { name: 'Share to Twitter' }) expect(link).toBeInTheDocument() @@ -119,7 +119,7 @@ describe('PostTitle', () => { excerpt={mockExcerpt} tags={mockTags} title={mockTitle} - /> + />, ) const button = screen.getByRole('button', { name: 'Share' }) expect(button).toBeInTheDocument() diff --git a/components/PostTitle/PostTitle.tsx b/components/PostTitle/PostTitle.tsx index f89c784c..b8e58482 100644 --- a/components/PostTitle/PostTitle.tsx +++ b/components/PostTitle/PostTitle.tsx @@ -96,7 +96,7 @@ export default function PostTitle({ date, excerpt, tags, title }: Props) { ariaLabel={`Share to ${shareData[item].label}`} href={shareData[item].getShareLink( encodeURIComponent(pageUrl), - encodeURIComponent(title) + encodeURIComponent(title), )} kind={ButtonType.Icon} > diff --git a/components/Search/Search.spec.tsx b/components/Search/Search.spec.tsx index eacea4e6..9bee9c50 100644 --- a/components/Search/Search.spec.tsx +++ b/components/Search/Search.spec.tsx @@ -16,7 +16,7 @@ describe('Search', () => { className={mockClassName} placeholder={mockPlaceholder} onChange={mockOnChange} - /> + />, ) }) diff --git a/components/Tag/Tag.spec.tsx b/components/Tag/Tag.spec.tsx index 56eef06b..63743d02 100644 --- a/components/Tag/Tag.spec.tsx +++ b/components/Tag/Tag.spec.tsx @@ -23,7 +23,7 @@ describe('Tag', () => { render( - + , ) const tag = screen.getByTestId('tag') const label = screen.getByText(mockLabel) @@ -39,7 +39,7 @@ describe('Tag', () => { render( - + , ) const tag = screen.getByTestId('tag') const label = screen.getByText(mockLabel) diff --git a/components/ThemeToggle/ThemeToggle.module.scss b/components/ThemeToggle/ThemeToggle.module.scss index 8d55e126..383c4e09 100644 --- a/components/ThemeToggle/ThemeToggle.module.scss +++ b/components/ThemeToggle/ThemeToggle.module.scss @@ -21,20 +21,23 @@ left: calc(100% - 30px); line-height: 24px; position: absolute; - text-rendering: optimizeLegibility; // handle a weird bug in safari with emojis not aligning correctly + text-rendering: optimizelegibility; // handle a weird bug in safari with emojis not aligning correctly transform: rotate(120deg); top: 4px; - transition: left, opacity, 0.5s ease; + transition: + left, + opacity, + 0.5s ease; } .lightIcon { filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 95%)); - opacity: 0%; + opacity: 0; } .darkIcon { filter: drop-shadow(1px -1px 1px rgb(0 0 0 / 95%)); - opacity: 100%; + opacity: 1; } .toggleButton { @@ -50,13 +53,15 @@ top: 4px; left: 4px; width: 24px; - transition: transform 0.5s ease, left 0.5s ease; + transition: + transform 0.5s ease, + left 0.5s ease; } .input { height: 0; margin: 0; - opacity: 0%; + opacity: 0; width: 0; } @@ -73,11 +78,11 @@ } .lightIcon { - opacity: 100%; + opacity: 1; } .darkIcon { - opacity: 0%; + opacity: 0; } } diff --git a/components/ThemeToggle/ThemeToggle.spec.tsx b/components/ThemeToggle/ThemeToggle.spec.tsx index 54b601c0..10e12e3b 100644 --- a/components/ThemeToggle/ThemeToggle.spec.tsx +++ b/components/ThemeToggle/ThemeToggle.spec.tsx @@ -16,7 +16,7 @@ describe('ThemeToggle', () => { render( - + , ) }) @@ -44,14 +44,14 @@ describe('ThemeToggle', () => { await user.click(toggle) expect(toggle.checked).toEqual(false) expect(document.documentElement.getAttribute('data-theme')).toEqual( - Theme.LIGHT + Theme.LIGHT, ) expect(localStorage.getItem('theme')).toEqual(Theme.LIGHT) await user.click(toggle) expect(toggle.checked).toEqual(true) expect(document.documentElement.getAttribute('data-theme')).toEqual( - Theme.DARK + Theme.DARK, ) expect(localStorage.getItem('theme')).toEqual(Theme.DARK) }) diff --git a/components/WordlePoem/CharacterTile.module.scss b/components/WordlePoem/CharacterTile.module.scss index 3588032e..1f020a6e 100644 --- a/components/WordlePoem/CharacterTile.module.scss +++ b/components/WordlePoem/CharacterTile.module.scss @@ -8,7 +8,9 @@ font-size: 30px; justify-content: center; text-transform: uppercase; - transition: transform 0.5s ease-in-out, color 0.25s step-end; + transition: + transform 0.5s ease-in-out, + color 0.25s step-end; width: 60px; } diff --git a/components/WordlePoem/CharacterTile.spec.tsx b/components/WordlePoem/CharacterTile.spec.tsx index de1d37be..da4de4e3 100644 --- a/components/WordlePoem/CharacterTile.spec.tsx +++ b/components/WordlePoem/CharacterTile.spec.tsx @@ -11,7 +11,7 @@ describe('CharacterTile', () => { it('changes the class correctly based on the matchType', () => { const { rerender } = render( - + , ) const characterTile = screen.getByText('f') expect(characterTile).toHaveClass('matchNone') diff --git a/components/WordlePoem/CharacterTileIntersectionContext.tsx b/components/WordlePoem/CharacterTileIntersectionContext.tsx index 06ae10d7..e4733af5 100644 --- a/components/WordlePoem/CharacterTileIntersectionContext.tsx +++ b/components/WordlePoem/CharacterTileIntersectionContext.tsx @@ -26,8 +26,8 @@ export const CharacterTileIntersectionContextProvider = ({ }, { threshold: 1, - } - ) + }, + ), ) useEffect(() => { diff --git a/components/WordlePoem/WordlePoem.spec.tsx b/components/WordlePoem/WordlePoem.spec.tsx index 63200c41..c858b530 100644 --- a/components/WordlePoem/WordlePoem.spec.tsx +++ b/components/WordlePoem/WordlePoem.spec.tsx @@ -34,7 +34,7 @@ describe('WordlePoem', () => { + />, ) expect(screen.getByText(customMatcher('tread'))).toBeInTheDocument() expect(screen.getByText(customMatcher('feign'))).toBeInTheDocument() @@ -50,7 +50,7 @@ describe('WordlePoem', () => { + />, ) const characterTiles = screen.getAllByTestId('wordle-character') @@ -65,7 +65,7 @@ describe('WordlePoem', () => { + />, ) const characterTiles = screen.getAllByTestId('wordle-character') diff --git a/package-lock.json b/package-lock.json index a94e225e..a00bfb15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,7 @@ "@types/react": "^18.0.17", "@types/react-highlight-words": "^0.16.4", "@typescript-eslint/eslint-plugin": "^6.6.0", - "@typescript-eslint/parser": "^5.54.0", + "@typescript-eslint/parser": "^6.6.0", "babel-loader": "^9.0.0", "classnames": "^2.3.1", "css-loader": "^6.7.1", @@ -10284,25 +10284,26 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "5.54.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.54.0.tgz", - "integrity": "sha512-aAVL3Mu2qTi+h/r04WI/5PfNWvO6pdhpeMRWk9R7rEV4mwJNzoWf5CCU5vDKBsPIFQFjEq1xg7XBI2rjiMXQbQ==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.6.0.tgz", + "integrity": "sha512-setq5aJgUwtzGrhW177/i+DMLqBaJbdwGj2CPIVFFLE0NCliy5ujIdLHd2D1ysmlmsjdL2GWW+hR85neEfc12w==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "5.54.0", - "@typescript-eslint/types": "5.54.0", - "@typescript-eslint/typescript-estree": "5.54.0", + "@typescript-eslint/scope-manager": "6.6.0", + "@typescript-eslint/types": "6.6.0", + "@typescript-eslint/typescript-estree": "6.6.0", + "@typescript-eslint/visitor-keys": "6.6.0", "debug": "^4.3.4" }, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^16.0.0 || >=18.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + "eslint": "^7.0.0 || ^8.0.0" }, "peerDependenciesMeta": { "typescript": { @@ -10310,6 +10311,95 @@ } } }, + "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz", + "integrity": "sha512-pT08u5W/GT4KjPUmEtc2kSYvrH8x89cVzkA0Sy2aaOUIw6YxOIjA8ilwLr/1fLjOedX1QAuBpG9XggWqIIfERw==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.6.0", + "@typescript-eslint/visitor-keys": "6.6.0" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.6.0.tgz", + "integrity": "sha512-CB6QpJQ6BAHlJXdwUmiaXDBmTqIE2bzGTDLADgvqtHWuhfNP3rAOK7kAgRMAET5rDRr9Utt+qAzRBdu3AhR3sg==", + "dev": true, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.6.0.tgz", + "integrity": "sha512-hMcTQ6Al8MP2E6JKBAaSxSVw5bDhdmbCEhGW/V8QXkb9oNsFkA4SBuOMYVPxD3jbtQ4R/vSODBsr76R6fP3tbA==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.6.0", + "@typescript-eslint/visitor-keys": "6.6.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.6.0.tgz", + "integrity": "sha512-L61uJT26cMOfFQ+lMZKoJNbAEckLe539VhTxiGHrWl5XSKQgA0RTBZJW2HFPy5T0ZvPVSD93QsrTKDkfNwJGyQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.6.0", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/parser/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/@typescript-eslint/scope-manager": { "version": "5.54.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.54.0.tgz", diff --git a/package.json b/package.json index fbd452d0..3e06286d 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "@types/react": "^18.0.17", "@types/react-highlight-words": "^0.16.4", "@typescript-eslint/eslint-plugin": "^6.6.0", - "@typescript-eslint/parser": "^5.54.0", + "@typescript-eslint/parser": "^6.6.0", "babel-loader": "^9.0.0", "classnames": "^2.3.1", "css-loader": "^6.7.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index 6d5d8607..71adbae9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,7 +7,7 @@ const ThemeContextProvider = dynamic( () => import('../context/ThemeContext/ThemeContext'), { ssr: false, - } + }, ) function MyApp({ Component, pageProps }: AppProps) { diff --git a/pages/about.tsx b/pages/about.tsx index 28bb59b0..2ad3919e 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -57,7 +57,7 @@ export default function About() { }, { threshold: 0.5, - } + }, ) ;[grafanaRef, ibmRef, qinetiqRef, durhamRef].forEach((ref) => { if (ref.current) { diff --git a/pages/posts.tsx b/pages/posts.tsx index cf65f45e..d2911877 100644 --- a/pages/posts.tsx +++ b/pages/posts.tsx @@ -20,7 +20,7 @@ export default function Posts({ allPosts }: Props) { post.title.toLowerCase().includes(searchString.toLowerCase()) || post.excerpt.toLowerCase().includes(searchString.toLowerCase()) || post.tags.some((tag) => - tag.toLowerCase().includes(searchString.toLowerCase()) + tag.toLowerCase().includes(searchString.toLowerCase()), ) ) } diff --git a/pages/posts/bye-bye-popups.mdx b/pages/posts/bye-bye-popups.mdx index 442fca91..94e5199d 100644 --- a/pages/posts/bye-bye-popups.mdx +++ b/pages/posts/bye-bye-popups.mdx @@ -26,10 +26,10 @@ describe('sticky header and breadcrumbs', () => { cy.get('.expression-editor-popup-next__source-heading-title').should( 'have.attr', 'title', - 'Workday / Operation / Operation' + 'Workday / Operation / Operation', ) const titleParts = cy.get( - '.expression-editor-popup-next__source-heading-title-part' + '.expression-editor-popup-next__source-heading-title-part', ) titleParts.should('have.length', 3) titleParts.eq(0).should('have.text', 'Workday') diff --git a/styles/About.module.scss b/styles/About.module.scss index e8724c68..96c68c00 100644 --- a/styles/About.module.scss +++ b/styles/About.module.scss @@ -2,7 +2,9 @@ margin-top: 3em; opacity: 0; transform: translateX(-10%); - transition: opacity 0.5s ease-out, transform 0.5s ease-out; + transition: + opacity 0.5s ease-out, + transform 0.5s ease-out; } .typewriter { diff --git a/styles/mixins.scss b/styles/mixins.scss index d540d966..2e8fb55c 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -1,6 +1,8 @@ @mixin interactive { box-shadow: var(--shadow); - transition: box-shadow 0.05s ease-in-out, transform 0.05s ease-in-out; + transition: + box-shadow 0.05s ease-in-out, + transform 0.05s ease-in-out; outline-offset: 0; // Need to keep this separate from focus-visible else this won't work on safari