feat(SkipLink): added styles as scss modules

src/components/skip-links/index.module.scss

@@ -0,0 +1,51 @@
+:global(.fdz-css-skip-links__item),
+.item {
+	--skip-link-background: #111;
+	--skip-link-color: #fff;
+	--skip-link-font-family: sans-serif;
+	--skip-link-font-size: 0.875rem;
+	--skip-link-left: 2rem;
+	--skip-link-line-height: 2rem;
+	--skip-link-top: 1rem;
+	--skip-link-opacity: 1;
+	--skip-link-outline-color: var(--skip-link-background);
+
+	position: absolute;
+	top: var(--skip-link-top);
+	left: var(--skip-link-left);
+	right: auto;
+	font-size: var(--skip-link-font-size);
+	font-family: var(--skip-link-font-family);
+	background: var(--skip-link-background);
+	color: var(--skip-link-color);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	letter-spacing: 0.5px;
+	line-height: var(--skip-link-line-height);
+	padding: 0 1rem;
+	appearance: none;
+	text-align: center;
+	text-decoration: none;
+	height: 2rem;
+	min-width: 10rem;
+	z-index: 100;
+	outline-width: 2px;
+	outline-style: solid;
+	outline-color: var(--skip-link-outline-color);
+	outline-offset: 2px;
+}
+
+:global(.fdz-css-skip-links__item):not(:focus),
+.item:not(:focus) {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: auto;
+	margin: 0;
+	overflow: hidden;
+	opacity: var(--skip-link-opacity);
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	white-space: nowrap;
+}

src/components/skip-links/link.tsx

@@ -12,7 +12,8 @@
  * @since 1.0.0
  */
 import React, { FunctionComponent, useCallback, KeyboardEvent } from "react";
-import "./styles.css";
+import { classNames, useConstant } from "@feedzai/js-utilities";
+import styles from "./index.module.scss";
 
 export const SKIP_LINK_DEFAULT_PROPS: ISkipLink = {
 	target: "#content",
@@ -33,6 +34,10 @@ export interface ISkipLink {
  * @returns {JSX.Element}
  */
 export const SkipLink: FunctionComponent<ISkipLink> = ({ target, text, as }) => {
+	const CSS_CLASS = useConstant(() => {
+		return classNames(styles.item, "fdz-css-skip-links__item");
+	});
+
 	const onKeyUp = useCallback(
 		(event: KeyboardEvent<HTMLButtonElement>) => {
 			if (event.key === "Enter" || event.key === " ") {
@@ -50,15 +55,15 @@ export const SkipLink: FunctionComponent<ISkipLink> = ({ target, text, as }) =>
 				role="link"
 				type="button"
 				onKeyUp={onKeyUp}
-				className="fdz-css-skip-links__item"
+				className={CSS_CLASS}
 				data-testid="fdz-js-skip-link"
 			>
 				{text}
 			</button>
 		);
 	}
 	return (
-		<a href={target} className="fdz-css-skip-links__item" data-testid="fdz-js-skip-link">
+		<a href={target} className={CSS_CLASS} data-testid="fdz-js-skip-link">
 			{text}
 		</a>
 	);

src/global.d.ts

@@ -13,6 +13,7 @@
  * @since 1.0.0
  */
 declare module "*.css";
+declare module "*.module.scss";
 
 declare interface Navigator extends NavigatorUA {}
 declare interface WorkerNavigator extends NavigatorUA {}

vite.config.ts

@@ -53,6 +53,11 @@ export default defineConfig({
 		}),
 		react(),
 	],
+	css: {
+		modules: {
+			generateScopedName: "fdz-css-[hash:base64:8]",
+		},
+	},
 	build: {
 		minify: true,
 		lib: {