Improove style isolation

packages/donate-button-v4/package.json

@@ -33,7 +33,6 @@
 		"@babel/preset-typescript": "^7.13.0",
 		"@testing-library/react": "^11.2.5",
 		"@types/big.js": "^6.2.2",
-		"@types/cxs": "^6.2.1",
 		"ava": "^3.15.0",
 		"babel-core": "^7.0.0-bridge.0",
 		"babel-plugin-jsx-pragmatic": "^1.0.2",
@@ -61,7 +60,6 @@
 	"dependencies": {
 		"@stripe/stripe-js": "^1.53.0",
 		"big.js": "^6.2.1",
-		"cxs": "^6.2.0",
 		"fuzzy": "^0.1.3",
 		"preact": "^10.17.1"
 	}

packages/donate-button-v4/src/autoPlayMode.tsx

@@ -5,7 +5,6 @@ import {parseDonateUrl} from 'src/helpers/parseDonateUrl';
 import shouldApplyEveryStyleForAllLinks from 'src/helpers/shouldApplyEveryStyleForAllLinks';
 import {loadFonts} from 'src/loadFonts';
 import {WidgetLoader} from 'src/loaders/Widgetloader';
-import resetcss from 'src/resetCss';
 
 const OBSERVER_OPTIONS = {
 	childList: true,
@@ -83,20 +82,10 @@ function mountWidgetContainer() {
 	widgetContainer.id = 'widget-container';
 	shadowRoot.append(widgetContainer);
 
-	const everyStyles: HTMLStyleElement | null =
-		document.querySelector('#every-styles');
+	const everyShadowStyles = document.createElement('style');
+	everyShadowStyles.id = 'every-shadow-styles';
 
-	if (everyStyles) {
-		const rules = Object.values(everyStyles.sheet?.cssRules ?? {})
-			.map((rule) => rule.cssText)
-			.join('\n');
-
-		const everyShadowStyles = document.createElement('style');
-		everyShadowStyles.id = 'every-shadow-styles';
-		everyShadowStyles.innerHTML = resetcss + rules;
-
-		widgetContainer.append(everyShadowStyles);
-	}
+	widgetContainer.append(everyShadowStyles);
 }
 
 function createWidget(options: CreateWidgetProps, urlString: string) {

packages/donate-button-v4/src/components/embed-button/styles.ts

@@ -1,9 +1,7 @@
-import cxs from 'cxs';
 import {FontFamily} from 'src/components/widget/theme/font-family';
+import {cssButton} from 'src/helpers/css';
 
-cxs.prefix('every-embedded-');
-
-export const buttonCss = cxs({
+export const buttonCss = cssButton({
 	display: 'flex',
 	alignItems: 'center',
 	width: 'max-content',
@@ -25,13 +23,13 @@ export const buttonCss = cxs({
 	'&:hover': {backgroundColor: '#2F806D'}
 });
 
-export const logoCss = cxs({
+export const logoCss = cssButton({
 	width: '16px',
 	height: '16px',
 	fill: '#fff',
 	marginRight: '8px'
 });
 
-export const verticalCenterTextCss = cxs({
+export const verticalCenterTextCss = cssButton({
 	transform: 'translateY(0.08em)'
 });

packages/donate-button-v4/src/components/widget/components/Checkbox/styles.ts

@@ -1,10 +1,10 @@
-import cxs from 'cxs';
 import {COLORS} from 'src/components/widget/theme/colors';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
 /* Hide checkbox visually but remain accessible to screen readers.
   Source: https://polished.js.org/docs/#hidevisually */
-export const hiddenCheckboxCss = cxs({
+export const hiddenCheckboxCss = css({
 	border: 0,
 	clip: 'rect(0 0 0 0)',
 	clipPath: 'inset(50%)',
@@ -24,7 +24,7 @@ export const checkboxCss = ({
 	checked?: boolean;
 	primaryColor: string;
 }) =>
-	cxs({
+	css({
 		cursor: 'pointer',
 		width: '24px',
 		minWidth: '24px',
@@ -37,7 +37,7 @@ export const checkboxCss = ({
 		...(checked ? {background: primaryColor} : {})
 	});
 
-export const checkMarkIconCss = cxs({
+export const checkMarkIconCss = css({
 	width: '16px',
 	height: '16px',
 	'& > path': {
@@ -46,11 +46,11 @@ export const checkMarkIconCss = cxs({
 	}
 });
 
-export const checkboxLabelTextCss = cxs({
+export const checkboxLabelTextCss = css({
 	cursor: 'pointer'
 });
 
-export const checkboxLabelContainerCss = cxs({
+export const checkboxLabelContainerCss = css({
 	display: 'flex',
 	alignItems: 'center',
 	gap: Spacing.XS

packages/donate-button-v4/src/components/widget/components/ErrorMessage/index.tsx

@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {CloseIcon} from 'src/components/widget/icons/CloseIcon';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-const errorMessageCss = cxs({
+const errorMessageCss = css({
 	display: 'flex',
 	alignItems: 'center',
 	gap: Spacing.XXS,

packages/donate-button-v4/src/components/widget/components/Faq/styles.ts

@@ -1,34 +1,34 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {COLORS} from 'src/components/widget/theme/colors';
 import {textSize} from 'src/components/widget/theme/font-sizes';
 import {horizontalStackCss, Spacing} from 'src/components/widget/theme/spacing';
+import css, {CSSObject} from 'src/helpers/css';
 
-export const faqListCss = cxs({
+export const faqListCss = css({
 	display: 'flex',
 	flexDirection: 'column',
 	gap: Spacing.M
 });
 
-export const rotateCss: cxs.CSSObject = {
+export const rotateCss: CSSObject = {
 	position: 'relative',
 	top: '-1px',
 	transform: 'rotate(180deg)'
 };
 
-export const descriptionBaseCss: cxs.CSSObject = {
+export const descriptionBaseCss: CSSObject = {
 	'> p': {
 		marginBottom: Spacing.XS
 	}
 };
-export const descriptionOpen = cxs({
+export const descriptionOpen = css({
 	...descriptionBaseCss,
 	maxHeight: '1000px',
 	transition: 'all 1s',
 	opacity: '1'
 });
 
-export const descriptionClose = cxs({
+export const descriptionClose = css({
 	...descriptionBaseCss,
 	opacity: '0',
 	overflow: 'hidden',
@@ -37,7 +37,7 @@ export const descriptionClose = cxs({
 });
 
 export const faqItemConateinerCss = (mobileOnly?: boolean) =>
-	cxs({
+	css({
 		...textSize.xs,
 		...(mobileOnly
 			? {
@@ -49,8 +49,8 @@ export const faqItemConateinerCss = (mobileOnly?: boolean) =>
 	});
 
 export const faqItemButtonCss = (isOpen: boolean) =>
-	cxs({
-		...horizontalStackCss.cxs(Spacing.S),
+	css({
+		...horizontalStackCss.css(Spacing.S),
 		...textSize.xs,
 		alignItems: 'center',
 		justifyContent: 'space-between',
@@ -75,7 +75,7 @@ export const faqItemButtonCss = (isOpen: boolean) =>
 			  })
 	});
 
-export const faqLinkCss = cxs({
+export const faqLinkCss = css({
 	color: COLORS.Text,
 	fontWeight: 500,
 	textDecoration: 'none',

packages/donate-button-v4/src/components/widget/components/Footer/styles.ts

@@ -1,10 +1,10 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {COLORS} from 'src/components/widget/theme/colors';
 import {textSize} from 'src/components/widget/theme/font-sizes';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const footerCardCss = cxs({
+export const footerCardCss = css({
 	padding: `${Spacing.XL} ${Spacing.XL} 0px`,
 	backgroundColor: 'unset',
 
@@ -23,7 +23,7 @@ export const footerCardCss = cxs({
 	}
 });
 
-export const footerLinkCss = cxs({
+export const footerLinkCss = css({
 	color: COLORS.TextGray,
 	fontWeight: 500,
 	textDecoration: 'none',

packages/donate-button-v4/src/components/widget/components/FundraiserLink/styles.ts

@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
+import css from 'src/helpers/css';
 
 export const linkCss = (primaryColor: string) =>
-	cxs({
+	css({
 		color: primaryColor,
 		fontWeight: 500,
 		textDecoration: 'none',
@@ -11,7 +11,7 @@ export const linkCss = (primaryColor: string) =>
 		}
 	});
 
-export const cardCss = cxs({
+export const cardCss = css({
 	display: 'none',
 	[BREAKPOINTS.TabletLandscapeUp]: {
 		display: 'block'

packages/donate-button-v4/src/components/widget/components/Grid/index.tsx

@@ -1,9 +1,9 @@
-import cxs from 'cxs';
 import {FunctionalComponent} from 'preact';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-const gridCss = cxs({
+const gridCss = css({
 	display: 'grid',
 	gridGap: 0,
 	gridTemplateColumns: '1fr',

packages/donate-button-v4/src/components/widget/components/GridCard/styles.ts

@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const cardCss = cxs({
+export const cardCss = css({
 	backgroundColor: 'white',
 	padding: `${Spacing.XL} ${Spacing.XL} 0px`,
 	borderRadius: 'unset',

packages/donate-button-v4/src/components/widget/components/Header/CloseButton/styles.ts

@@ -1,9 +1,9 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {FontFamily} from 'src/components/widget/theme/font-family';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const buttonCss = cxs({
+export const buttonCss = css({
 	cursor: 'pointer',
 	display: 'inline-flex',
 	alignItems: 'center',
@@ -14,14 +14,14 @@ export const buttonCss = cxs({
 	fontFamily: FontFamily.BasisGrotesque
 });
 
-export const smallScreenCloseButtonCss = cxs({
+export const smallScreenCloseButtonCss = css({
 	display: 'block',
 	[BREAKPOINTS.TabletLandscapeUp]: {
 		display: 'none'
 	}
 });
 
-export const largeScreenCloseButtonCss = cxs({
+export const largeScreenCloseButtonCss = css({
 	position: 'absolute',
 	right: Spacing.XL,
 	top: Spacing.XL,

packages/donate-button-v4/src/components/widget/components/Header/styles.ts

@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const containerCss = cxs({
+export const containerCss = css({
 	display: 'flex',
 	justifyContent: 'flex-end',
 	alignItems: 'center',

packages/donate-button-v4/src/components/widget/components/NonprofitInfo/FundraiserCard.tsx

@@ -1,4 +1,3 @@
-import cxs from 'cxs';
 import {Fragment} from 'preact/jsx-runtime';
 import {GridCard} from 'src/components/widget/components/GridCard';
 import {
@@ -13,11 +12,12 @@ import {
 import {useNonprofitOrError} from 'src/components/widget/hooks/useNonprofit';
 import {Fundraiser} from 'src/components/widget/types/Fundraiser';
 import {LOGO_IMAGE_PLACEHOLDER_ID} from 'src/constants/placeholders';
+import css from 'src/helpers/css';
 import {getCloudinaryUrl} from 'src/helpers/getCloudinaryUrl';
 import joinClassNames from 'src/helpers/joinClassNames';
 
 const coverImageCss = (url: string) =>
-	cxs({
+	css({
 		backgroundImage: `url(${url})`,
 		backgroundSize: 'cover',
 		width: 'calc(100% + 25px + 25px)',