chore(components): make the changes to modular css with global overrides

Author: ari-launchdarkly

packages/components/src/Snippet.tsx

@@ -1,3 +1,4 @@
+import { cx } from 'classix';
 import Prism from 'prismjs';
 import { type JSX, useLayoutEffect, useRef } from 'react';
 
@@ -44,7 +45,7 @@ import { CopyToClipboard } from './CopyToClipboard';
 
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 
-import './styles/Snippet.css';
+import styles from './styles/Snippet.module.css';
 
 export const languages = [
 	'bash',
@@ -146,16 +147,19 @@ export function Snippet({
 	return (
 		<>
 			{withHeader && (
-				<div className="header">
+				<div className={styles.header}>
 					{label && <span>{label}</span>}
 					{lang && <span>{lang}</span>}
 				</div>
 			)}
 			<div
-				className={`snippet ${className ?? ''} ${withCopyButton ? 'copyable' : ''} ${useDefaultHighlighting ? 'useDefaultHighlighting' : ''}`}
+				className={cx(styles.snippet, className, {
+					[styles.copyable]: withCopyButton,
+					[styles.useDefaultHighlighting]: useDefaultHighlighting,
+				})}
 			>
 				<pre
-					className={withLineNumbers ? 'line-numbers' : ''}
+					className={withLineNumbers ? styles['line-numbers'] : ''}
 					data-start={1}
 					data-line-offset={highlightOffset ? highlightOffset.toString() : ''}
 					data-line={highlightRange}
@@ -166,7 +170,7 @@ export function Snippet({
 					{withCopyButton && (
 						<CopyToClipboard text={children as string} showTooltip={false}>
 							<IconButton
-								className="copyButton"
+								className={styles.copyButton}
 								aria-label="Copy code snippet"
 								variant="minimal"
 								icon="copy-code"

packages/components/src/styles/Snippet.css renamed to packages/components/src/styles/Snippet.module.css

@@ -83,7 +83,7 @@
 	background: #3c4200;
 }
 
-.snippet pre[class*='language-'].line-numbers {
+.snippet :global(pre[class*='language-'].line-numbers) {
 	line-height: 0.625rem;
 	padding-bottom: var(--lp-spacing-400);
 	padding-top: var(--lp-spacing-400);
@@ -92,36 +92,36 @@
 	z-index: var(--stacking-above-new-context);
 }
 
-.snippet .line-numbers .line-numbers-rows {
+.snippet :global(.line-numbers .line-numbers-rows) {
 	border: none;
 	left: -3em;
 	width: 2em;
 }
 
-.snippet .token.operator,
-.snippet .token.punctuation {
+.snippet :global(.token.operator),
+.snippet :global(.token.punctuation) {
 	color: var(--lp-color-text-ui-primary-base);
 }
 
-.snippet .token.function {
+.snippet :global(.token.function) {
 	color: var(--lp-color-text-code-function);
 	font-weight: var(--lp-font-weight-regular);
 }
 
-.snippet .token.tag {
+.snippet :global(.token.tag) {
 	color: var(--lp-color-text-code-tag);
 }
 
-.token.attr-value,
-.token.string {
+.snippet :global(.token.attr-value),
+.snippet :global(.token.string) {
 	color: var(--lp-color-text-code-string);
 }
 
-.snippet .token.property {
+.snippet :global(.token.property) {
 	color: var(--lp-color-text-code-keyword);
 }
 
-.snippet .token.keyword {
+.snippet :global(.token.keyword) {
 	color: var(--lp-color-text-code-keyword);
 }