From 0e8b5470553c8fb104bfb8637102fb5f629dfe10 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 23 Sep 2024 23:59:17 +0000 Subject: [PATCH 01/26] Convert AvatarStack to CSS modules behind primer_react_css_modules_team feature flag --- .../src/AvatarStack/AvatarStack.module.css | 178 +++++++++++ .../react/src/AvatarStack/AvatarStack.tsx | 288 ++++++++++-------- .../internal/utils/toggleStyledComponent.tsx | 13 +- 3 files changed, 357 insertions(+), 122 deletions(-) create mode 100644 packages/react/src/AvatarStack/AvatarStack.module.css diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css new file mode 100644 index 00000000000..5814ac4ef2b --- /dev/null +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -0,0 +1,178 @@ +/* stylelint-disable max-nesting-depth */ +/* stylelint-disable selector-max-specificity */ +.AvatarStack { + --avatar-border-width: 1px; + --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); + --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); + + position: relative; + display: flex; + min-width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + + &:where([data-responsive]) { + @media screen and (--viewportRange-narrow) { + --avatar-stack-size: var(--stackSize-narrow); + } + + @media screen and (--viewportRange-regular) { + --avatar-stack-size: var(--stackSize-regular); + } + + @media screen and (--viewportRange-wide) { + --avatar-stack-size: var(--stackSize-wide); + } + } + + &:where([data-avatar-count='1']) { + .AvatarItem { + box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); + } + } + + &:where([data-avatar-count='2']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the border widths of the first two avatars;thiscalcexplained */ + min-width: calc( + var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) + ); + } + + &:where([data-avatar-count='3']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the non-overlapping part of the third avatar;thiscalcexplained */ + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) + ) + ); + } + + &:where([data-avatar-count='3+']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the non-overlapping part of the third and fourth avatar;thiscalcexplained */ + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 + ) + ); + } + + &:where([data-align-right]) { + justify-content: flex-end; + + .AvatarItem { + margin-left: 0 !important; + + &:first-child { + margin-right: 0; + } + + &:nth-child(n + 2) { + margin-right: var(--avatar-two-margin); + } + + &:nth-child(n + 3) { + margin-right: var(--avatar-three-margin); + } + } + + .AvatarStackBody { + flex-direction: row-reverse; + + &:not([data-disable-expand]):hover { + .AvatarItem { + margin-right: var(--base-size-4) !important; + margin-left: 0 !important; + + &:first-child { + margin-right: 0 !important; + } + } + } + } + } +} + +.AvatarStackBody { + position: absolute; + display: flex; + + &:where([data-disable-expand]) { + position: relative; + } +} + +.AvatarItem { + --avatarSize-regular: var(--avatar-stack-size); + + position: relative; + width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + overflow: hidden; + flex-shrink: 0; + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); + + &:first-child { + z-index: 10; + margin-left: 0; + } + + &:nth-child(n + 2) { + z-index: 9; + margin-left: var(--avatar-two-margin); + } + + &:nth-child(n + 3) { + z-index: 8; + margin-left: var(--avatar-three-margin); + opacity: 0.55; + } + + &:nth-child(n + 4) { + z-index: 7; + opacity: 0.4; + } + + &:nth-child(n + 5) { + z-index: 6; + opacity: 0.25; + } + + &:nth-child(n + 6) { + visibility: hidden; + opacity: 0; + } +} + +.AvatarStackBody:not([data-disable-expand]):hover { + width: auto; + + .AvatarItem { + margin-left: var(--base-size-4); + visibility: visible; + opacity: 1; + transition: + margin 0.2s ease-in-out, + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + box-shadow 0.1s ease-in-out; + + &:first-child { + margin-left: 0; + } + } +} diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 24667bbb69c..e4f420d6f9c 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -12,169 +12,176 @@ import {isResponsiveValue} from '../hooks/useResponsiveValue' import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations' import {defaultSxProp} from '../utils/defaultSxProp' import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys' +import classes from './AvatarStack.module.css' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' type StyledAvatarStackWrapperProps = { count?: number } & SxProp -const AvatarStackWrapper = styled.span` - --avatar-border-width: 1px; - --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); - --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); +const AvatarStackWrapper = toggleStyledComponent( + 'primer_react_css_modules_team', + styled.span` + --avatar-border-width: 1px; + --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); + --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); - display: flex; - position: relative; - height: var(--avatar-stack-size); - min-width: var(--avatar-stack-size); - - .pc-AvatarStackBody { display: flex; - position: absolute; - } - - .pc-AvatarItem { - --avatar-size: var(--avatar-stack-size); - flex-shrink: 0; - height: var(--avatar-stack-size); - width: var(--avatar-stack-size); - box-shadow: 0 0 0 var(--avatar-border-width) - ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; position: relative; - overflow: hidden; + height: var(--avatar-stack-size); + min-width: var(--avatar-stack-size); - &:first-child { - margin-left: 0; - z-index: 10; + .pc-AvatarStackBody { + display: flex; + position: absolute; } - &:nth-child(n + 2) { - margin-left: var(--avatar-two-margin); - z-index: 9; - } + .pc-AvatarItem { + --avatar-size: var(--avatar-stack-size); + flex-shrink: 0; + height: var(--avatar-stack-size); + width: var(--avatar-stack-size); + box-shadow: 0 0 0 var(--avatar-border-width) + ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; + position: relative; + overflow: hidden; - &:nth-child(n + 3) { - margin-left: var(--avatar-three-margin); - opacity: ${100 - 3 * 15}%; - z-index: 8; - } + &:first-child { + margin-left: 0; + z-index: 10; + } - &:nth-child(n + 4) { - opacity: ${100 - 4 * 15}%; - z-index: 7; - } + &:nth-child(n + 2) { + margin-left: var(--avatar-two-margin); + z-index: 9; + } - &:nth-child(n + 5) { - opacity: ${100 - 5 * 15}%; - z-index: 6; - } + &:nth-child(n + 3) { + margin-left: var(--avatar-three-margin); + opacity: ${100 - 3 * 15}%; + z-index: 8; + } + + &:nth-child(n + 4) { + opacity: ${100 - 4 * 15}%; + z-index: 7; + } - &:nth-child(n + 6) { - opacity: 0; - visibility: hidden; + &:nth-child(n + 5) { + opacity: ${100 - 5 * 15}%; + z-index: 6; + } + + &:nth-child(n + 6) { + opacity: 0; + visibility: hidden; + } } - } - &.pc-AvatarStack--two { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the border widths of the first two avatars - min-width: calc( - var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) - ); - } + &.pc-AvatarStack--two { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the border widths of the first two avatars + min-width: calc( + var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + var(--avatar-border-width) + ); + } - &.pc-AvatarStack--three { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the non-overlapping part of the third avatar - min-width: calc( - var(--avatar-stack-size) + - calc( - calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + - calc(var(--avatar-stack-size) + var(--avatar-three-margin)) - ) - ); - } + &.pc-AvatarStack--three { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the non-overlapping part of the third avatar + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) + ) + ); + } - &.pc-AvatarStack--three-plus { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the non-overlapping part of the third and fourth avatar - min-width: calc( - var(--avatar-stack-size) + - calc( - calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + - calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 - ) - ); - } + &.pc-AvatarStack--three-plus { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the non-overlapping part of the third and fourth avatar + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 + ) + ); + } - &.pc-AvatarStack--right { - justify-content: flex-end; - .pc-AvatarItem { - margin-left: 0 !important; + &.pc-AvatarStack--right { + justify-content: flex-end; + .pc-AvatarItem { + margin-left: 0 !important; - &:first-child { - margin-right: 0; - } + &:first-child { + margin-right: 0; + } - &:nth-child(n + 2) { - margin-right: var(--avatar-two-margin); - } + &:nth-child(n + 2) { + margin-right: var(--avatar-two-margin); + } - &:nth-child(n + 3) { - margin-right: var(--avatar-three-margin); + &:nth-child(n + 3) { + margin-right: var(--avatar-three-margin); + } } - } - .pc-AvatarStackBody { - flex-direction: row-reverse; + .pc-AvatarStackBody { + flex-direction: row-reverse; - &:not(.pc-AvatarStack--disableExpand):hover { - .pc-AvatarItem { - margin-right: ${get('space.1')}!important; - margin-left: 0 !important; + &:not(.pc-AvatarStack--disableExpand):hover { + .pc-AvatarItem { + margin-right: ${get('space.1')}!important; + margin-left: 0 !important; - &:first-child { - margin-right: 0 !important; + &:first-child { + margin-right: 0 !important; + } } } } } - } - .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover { - width: auto; + .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover { + width: auto; - .pc-AvatarItem { - margin-left: ${get('space.1')}; - opacity: 100%; - visibility: visible; - ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)} - transition: + .pc-AvatarItem { + margin-left: ${get('space.1')}; + opacity: 100%; + visibility: visible; + ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)} + transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, box-shadow 0.1s ease-in-out; - &:first-child { - margin-left: 0; + &:first-child { + margin-left: 0; + } } } - } - .pc-AvatarStack--disableExpand { - position: relative; - } + .pc-AvatarStack--disableExpand { + position: relative; + } - ${sx}; -` -const transformChildren = (children: React.ReactNode) => { + ${sx}; + `, +) +const transformChildren = (children: React.ReactNode, enabled: boolean) => { return React.Children.map(children, child => { if (!React.isValidElement(child)) return child return React.cloneElement(child, { ...child.props, - className: clsx(child.props.className, 'pc-AvatarItem'), + className: clsx(child.props.className, 'pc-AvatarItem', {[classes.AvatarItem]: enabled}), }) }) } @@ -187,6 +194,7 @@ export type AvatarStackProps = { } & SxProp const AvatarStack = ({children, alignRight, disableExpand, size, sx: sxProp = defaultSxProp}: AvatarStackProps) => { + const enabled = useFeatureFlag('primer_react_css_modules_team') const count = React.Children.count(children) const wrapperClassNames = clsx({ 'pc-AvatarStack--two': count === 2, @@ -237,12 +245,21 @@ const AvatarStack = ({children, alignRight, disableExpand, size, sx: sxProp = de }, ) } + const childSizes = getAvatarChildSizes() const getResponsiveAvatarSizeStyles = () => { // if there is no size set on the AvatarStack, use the `size` props of the Avatar children to set the `--avatar-stack-size` CSS variable if (!size) { + if (enabled) { + return { + '--stackSize-narrow': `${childSizes.narrow}px`, + '--stackSize-regular': `${childSizes.regular}px`, + '--stackSize-wide': `${childSizes.wide}px`, + } + } + return getBreakpointDeclarations( - getAvatarChildSizes(), + childSizes, '--avatar-stack-size' as keyof React.CSSProperties, value => `${value}px`, ) @@ -250,6 +267,14 @@ const AvatarStack = ({children, alignRight, disableExpand, size, sx: sxProp = de // if the `size` prop is set and responsive, set the `--avatar-stack-size` CSS variable for each viewport if (isResponsiveValue(size)) { + if (enabled) { + return { + '--stackSize-narrow': `${size.narrow || DEFAULT_AVATAR_SIZE}px`, + '--stackSize-regular': `${size.regular || DEFAULT_AVATAR_SIZE}px`, + '--stackSize-wide': `${size.wide || DEFAULT_AVATAR_SIZE}px`, + } + } + return getBreakpointDeclarations( size, '--avatar-stack-size' as keyof React.CSSProperties, @@ -266,9 +291,32 @@ const AvatarStack = ({children, alignRight, disableExpand, size, sx: sxProp = de sxProp as SxProp, ) + const AvatarStackBody = ({children}: React.ComponentPropsWithoutRef<'div'>) => { + if (enabled) { + return ( +
+ {children} +
+ ) + } + return {children} + } + return ( - - {transformChildren(children)} + 3 ? '3+' : count) : undefined} + data-align-right={enabled && alignRight ? '' : undefined} + data-responsive={enabled && (!size || isResponsiveValue(size)) ? '' : undefined} + className={clsx(wrapperClassNames, {[classes.AvatarStack]: enabled})} + // @ts-ignore - it's not allowing CSS properties here + style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined} + sx={enabled ? undefined : avatarStackSx} + > + {transformChildren(children, enabled)} ) } diff --git a/packages/react/src/internal/utils/toggleStyledComponent.tsx b/packages/react/src/internal/utils/toggleStyledComponent.tsx index 4a9bbd0e00a..7b366cb0eb0 100644 --- a/packages/react/src/internal/utils/toggleStyledComponent.tsx +++ b/packages/react/src/internal/utils/toggleStyledComponent.tsx @@ -1,9 +1,12 @@ import React from 'react' import {useFeatureFlag} from '../../FeatureFlags' +import Box from '../../Box' +import {defaultSxProp} from '../../utils/defaultSxProp' type CSSModulesProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any as?: string | React.ComponentType + sx?: React.CSSProperties } /** @@ -18,12 +21,18 @@ type CSSModulesProps = { * is disabled */ export function toggleStyledComponent(flag: string, Component: React.ComponentType

) { - const Wrapper = React.forwardRef(function Wrapper({as: BaseComponent = 'div', ...rest}, ref) { + const Wrapper = React.forwardRef(function Wrapper( + {as: BaseComponent = 'div', sx: sxProp = defaultSxProp, ...rest}, + ref, + ) { const enabled = useFeatureFlag(flag) if (enabled) { + if (sxProp !== defaultSxProp) { + return + } return } - return + return }) return Wrapper From 6f6fbd1aae08a0030e31cc640d1f6a76b73c58d6 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 24 Sep 2024 00:04:47 +0000 Subject: [PATCH 02/26] Updating the tests to run with the feature flag on --- e2e/components/AvatarStack.test.ts | 584 ++++++++++++++++------------- 1 file changed, 323 insertions(+), 261 deletions(-) diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts index 4d814a808bf..f9596901649 100644 --- a/e2e/components/AvatarStack.test.ts +++ b/e2e/components/AvatarStack.test.ts @@ -3,309 +3,371 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('AvatarStack', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--default', - globals: { - colorScheme: theme, - }, - }) + for (const featureFlagOn of [true, false]) { + test.describe(`Feature flag ${featureFlagOn ? 'enabled' : 'disabled'}`, () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--default', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Default.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Default.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--default', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) + } }) - } - }) - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--playground', - globals: { - colorScheme: theme, - }, - }) + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--playground', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Playground.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Playground.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--playground', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--playground', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + } }) - } - }) - test.describe('Align Left', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-left', - globals: { - colorScheme: theme, - }, - }) + test.describe('Align Left', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-left', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Left.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Left.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-left', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-left', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + } }) - } - }) - test.describe('Align Right', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-right', - globals: { - colorScheme: theme, - }, - }) + test.describe('Align Right', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-right', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Right.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Right.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-right', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-right', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + } }) - } - }) - test.describe('Disable Expand On Hover', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--disable-expand-on-hover', - globals: { - colorScheme: theme, - }, - }) + test.describe('Disable Expand On Hover', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--disable-expand-on-hover', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Disable Expand On Hover.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Disable Expand On Hover.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--disable-expand-on-hover', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--disable-expand-on-hover', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + } }) - } - }) - test.describe('Custom Size On Parent', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent', - globals: { - colorScheme: theme, - }, - }) + test.describe('Custom Size On Parent', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) + } }) - } - }) - test.describe('Custom Size On Parent Responsive', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent-responsive', - globals: { - colorScheme: theme, - }, - }) + test.describe('Custom Size On Parent Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent-responsive', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent Responsive.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot( + `AvatarStack.Custom Size On Parent Responsive.${theme}.png`, + ) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent-responsive', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent-responsive', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) + } }) - } - }) - test.describe('Custom Size On Children', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children', - globals: { - colorScheme: theme, - }, - }) + test.describe('Custom Size On Children', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) + } }) - } - }) - test.describe('Custom Size On Children Responsive', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children-responsive', - globals: { - colorScheme: theme, - }, - }) + test.describe('Custom Size On Children Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children-responsive', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children Responsive.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot( + `AvatarStack.Custom Size On Children Responsive.${theme}.png`, + ) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children-responsive', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children-responsive', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: featureFlagOn, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) + } }) - } - }) + }) + } }) From 4f1c26399b8252e0a30fac06e7477bac1ff5ae16 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 23 Sep 2024 17:06:50 -0700 Subject: [PATCH 03/26] Create hot-chicken-tickle.md --- .changeset/hot-chicken-tickle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hot-chicken-tickle.md diff --git a/.changeset/hot-chicken-tickle.md b/.changeset/hot-chicken-tickle.md new file mode 100644 index 00000000000..faad81b088b --- /dev/null +++ b/.changeset/hot-chicken-tickle.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team From 53f29dfb5a03434a69cb073bc8bbb5877bb94413 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 24 Sep 2024 16:59:14 +0000 Subject: [PATCH 04/26] Fix tests --- packages/react/src/AvatarStack/AvatarStack.module.css | 6 ++++++ .../src/__tests__/__snapshots__/AvatarStack.test.tsx.snap | 5 ++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 5814ac4ef2b..3859c56b84d 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -26,6 +26,7 @@ &:where([data-avatar-count='1']) { .AvatarItem { + /* stylelint-disable-next-line primer/box-shadow */ box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); } } @@ -82,10 +83,12 @@ } &:nth-child(n + 2) { + /* stylelint-disable-next-line primer/spacing */ margin-right: var(--avatar-two-margin); } &:nth-child(n + 3) { + /* stylelint-disable-next-line primer/spacing */ margin-right: var(--avatar-three-margin); } } @@ -124,6 +127,7 @@ height: var(--avatar-stack-size); overflow: hidden; flex-shrink: 0; + /* stylelint-disable-next-line primer/box-shadow */ box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); &:first-child { @@ -133,11 +137,13 @@ &:nth-child(n + 2) { z-index: 9; + /* stylelint-disable-next-line primer/spacing */ margin-left: var(--avatar-two-margin); } &:nth-child(n + 3) { z-index: 8; + /* stylelint-disable-next-line primer/spacing */ margin-left: var(--avatar-three-margin); opacity: 0.55; } diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index f3c1df84433..0be12c44696 100644 --- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -140,13 +140,12 @@ exports[`Avatar respects alignRight props 1`] = ` position: relative; } -

-
- + `; From 57feba31ccaabb365d72e21b0daee8ed27c143f8 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 24 Sep 2024 12:33:55 -0700 Subject: [PATCH 05/26] Update hot-chicken-tickle.md Co-authored-by: Josh Black --- .changeset/hot-chicken-tickle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/hot-chicken-tickle.md b/.changeset/hot-chicken-tickle.md index faad81b088b..d09a216a5a4 100644 --- a/.changeset/hot-chicken-tickle.md +++ b/.changeset/hot-chicken-tickle.md @@ -1,5 +1,5 @@ --- -"@primer/react": patch +"@primer/react": minor --- Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team From 885837027d3a334cd5801c046e63bf22c43d7cf9 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 24 Sep 2024 12:40:56 -0700 Subject: [PATCH 06/26] Quiet warnings --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 042e9767d4b..169afdcfcc2 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview", "build:components.json": "npm run build:components.json -w @primer/react", "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0", - "lint:css": "stylelint '**/*.css'", + "lint:css": "stylelint --rd -q '**/*.css'", "lint:css:fix": "stylelint --fix '**/*.css'", "lint:fix": "npm run lint -- --fix", "lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!**/node_modules/**\" \"!**/CHANGELOG.md\"", From c34264f319a44ed4dc53cb5615350a34b176c064 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 24 Sep 2024 20:01:36 +0000 Subject: [PATCH 07/26] Update CSS disables --- package-lock.json | 1294 +++-------------- package.json | 4 +- packages/react/src/Avatar/Avatar.module.css | 2 - packages/react/src/Banner/Banner.module.css | 2 - .../src/Blankslate/Blankslate.module.css | 1 - .../react/src/Button/ButtonBase.module.css | 3 - .../react/src/Checkbox/Checkbox.module.css | 3 - 7 files changed, 218 insertions(+), 1091 deletions(-) diff --git a/package-lock.json b/package-lock.json index 476efa55d32..7c492565bf5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@mdx-js/react": "1.6.22", "@playwright/test": "1.43.0", "@prettier/sync": "0.5.1", - "@primer/stylelint-config": "^13.0.1-rc.5358628", + "@primer/stylelint-config": "13.0.1", "@size-limit/preset-big-lib": "11.0.2", "@types/jest": "29.5.12", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -49,7 +49,7 @@ "prettier": "3.0.3", "rimraf": "5.0.5", "size-limit": "11.1.5", - "stylelint": "^16.8.1", + "stylelint": "16.9.0", "typescript": "5.4.5" }, "engines": { @@ -2667,8 +2667,9 @@ } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "2.7.1", - "dev": true, + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz", + "integrity": "sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==", "funding": [ { "type": "github", @@ -2679,17 +2680,17 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^2.4.1" + "@csstools/css-tokenizer": "^3.0.1" } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.4.1", - "dev": true, + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz", + "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==", "funding": [ { "type": "github", @@ -2700,14 +2701,14 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" } }, "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.13", - "dev": true, + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz", + "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==", "funding": [ { "type": "github", @@ -2718,13 +2719,12 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.7.1", - "@csstools/css-tokenizer": "^2.4.1" + "@csstools/css-parser-algorithms": "^3.0.1", + "@csstools/css-tokenizer": "^3.0.1" } }, "node_modules/@csstools/postcss-cascade-layers": { @@ -2751,26 +2751,6 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-cascade-layers/node_modules/@csstools/selector-specificity": { - "version": "4.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.1.0" - } - }, "node_modules/@csstools/postcss-color-function": { "version": "4.0.0", "funding": [ @@ -2798,43 +2778,6 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-color-function/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-color-function/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, "node_modules/@csstools/postcss-color-mix-function": { "version": "3.0.0", "funding": [ @@ -2862,639 +2805,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-color-mix-function/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-color-mix-function/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, "node_modules/@csstools/postcss-content-alt-text": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-content-alt-text/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-content-alt-text/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/@csstools/postcss-exponential-functions": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-calc": "^2.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-exponential-functions/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-exponential-functions/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/@csstools/postcss-font-format-keywords": { - "version": "4.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/utilities": "^2.0.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-gamut-mapping": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-color-parser": "^3.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-gamut-mapping/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-gamut-mapping/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/@csstools/postcss-global-data": { - "version": "2.1.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-gradients-interpolation-method": { - "version": "5.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-color-parser": "^3.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-gradients-interpolation-method/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-gradients-interpolation-method/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/@csstools/postcss-hwb-function": { - "version": "4.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-color-parser": "^3.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-hwb-function/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-hwb-function/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/@csstools/postcss-ic-unit": { - "version": "4.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-initial": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-is-pseudo-class": { - "version": "5.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/selector-specificity": "^4.0.0", - "postcss-selector-parser": "^6.1.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-is-pseudo-class/node_modules/@csstools/selector-specificity": { - "version": "4.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.1.0" - } - }, - "node_modules/@csstools/postcss-light-dark-function": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-light-dark-function/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/@csstools/postcss-light-dark-function/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/@csstools/postcss-logical-float-and-clear": { - "version": "3.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-logical-overflow": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-logical-overscroll-behavior": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-logical-resize": { - "version": "3.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-logical-viewport-units": { - "version": "3.0.0", + "version": "2.0.0", "funding": [ { "type": "github", @@ -3507,7 +2819,9 @@ ], "license": "MIT-0", "dependencies": { + "@csstools/css-parser-algorithms": "^3.0.0", "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -3517,8 +2831,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-logical-viewport-units/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", + "node_modules/@csstools/postcss-exponential-functions": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3529,13 +2843,21 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/css-calc": "^2.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0" + }, "engines": { "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-minmax": { - "version": "2.0.0", + "node_modules/@csstools/postcss-font-format-keywords": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -3546,12 +2868,10 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", "dependencies": { - "@csstools/css-calc": "^2.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/media-query-list-parser": "^3.0.0" + "@csstools/utilities": "^2.0.0", + "postcss-value-parser": "^4.2.0" }, "engines": { "node": ">=18" @@ -3560,8 +2880,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-minmax/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", + "node_modules/@csstools/postcss-gamut-mapping": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3572,16 +2892,21 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^3.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0" + }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-minmax/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", + "node_modules/@csstools/postcss-global-data": { + "version": "2.1.1", "funding": [ { "type": "github", @@ -3592,13 +2917,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", "engines": { - "node": ">=18" + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-minmax/node_modules/@csstools/media-query-list-parser": { - "version": "3.0.1", + "node_modules/@csstools/postcss-gradients-interpolation-method": { + "version": "5.0.0", "funding": [ { "type": "github", @@ -3609,17 +2937,23 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^3.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" + }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.1", - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { - "version": "3.0.0", + "node_modules/@csstools/postcss-hwb-function": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -3632,9 +2966,11 @@ ], "license": "MIT-0", "dependencies": { + "@csstools/css-color-parser": "^3.0.0", "@csstools/css-parser-algorithms": "^3.0.0", "@csstools/css-tokenizer": "^3.0.0", - "@csstools/media-query-list-parser": "^3.0.0" + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" }, "engines": { "node": ">=18" @@ -3643,8 +2979,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", + "node_modules/@csstools/postcss-ic-unit": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -3655,16 +2991,21 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0", + "postcss-value-parser": "^4.2.0" + }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", + "node_modules/@csstools/postcss-initial": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3675,13 +3016,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", "engines": { "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values/node_modules/@csstools/media-query-list-parser": { - "version": "3.0.1", + "node_modules/@csstools/postcss-is-pseudo-class": { + "version": "5.0.0", "funding": [ { "type": "github", @@ -3692,17 +3036,20 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/selector-specificity": "^4.0.0", + "postcss-selector-parser": "^6.1.0" + }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.1", - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-nested-calc": { - "version": "4.0.0", + "node_modules/@csstools/postcss-light-dark-function": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3715,8 +3062,10 @@ ], "license": "MIT-0", "dependencies": { - "@csstools/utilities": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" }, "engines": { "node": ">=18" @@ -3725,8 +3074,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-normalize-display-values": { - "version": "4.0.0", + "node_modules/@csstools/postcss-logical-float-and-clear": { + "version": "3.0.0", "funding": [ { "type": "github", @@ -3738,9 +3087,6 @@ } ], "license": "MIT-0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, "engines": { "node": ">=18" }, @@ -3748,8 +3094,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-oklab-function": { - "version": "4.0.0", + "node_modules/@csstools/postcss-logical-overflow": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3761,13 +3107,6 @@ } ], "license": "MIT-0", - "dependencies": { - "@csstools/css-color-parser": "^3.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, "engines": { "node": ">=18" }, @@ -3775,8 +3114,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-oklab-function/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", + "node_modules/@csstools/postcss-logical-overscroll-behavior": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3787,16 +3126,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-oklab-function/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", + "node_modules/@csstools/postcss-logical-resize": { + "version": "3.0.0", "funding": [ { "type": "github", @@ -3807,13 +3146,19 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, "engines": { "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-progressive-custom-properties": { - "version": "4.0.0", + "node_modules/@csstools/postcss-logical-viewport-units": { + "version": "3.0.0", "funding": [ { "type": "github", @@ -3826,7 +3171,8 @@ ], "license": "MIT-0", "dependencies": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/utilities": "^2.0.0" }, "engines": { "node": ">=18" @@ -3835,8 +3181,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-relative-color-syntax": { - "version": "3.0.0", + "node_modules/@csstools/postcss-media-minmax": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3847,13 +3193,12 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", + "license": "MIT", "dependencies": { - "@csstools/css-color-parser": "^3.0.0", + "@csstools/css-calc": "^2.0.0", "@csstools/css-parser-algorithms": "^3.0.0", "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" + "@csstools/media-query-list-parser": "^3.0.0" }, "engines": { "node": ">=18" @@ -3862,8 +3207,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-relative-color-syntax/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", + "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { + "version": "3.0.0", "funding": [ { "type": "github", @@ -3874,16 +3219,21 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/media-query-list-parser": "^3.0.0" + }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-relative-color-syntax/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", + "node_modules/@csstools/postcss-nested-calc": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -3894,12 +3244,19 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/utilities": "^2.0.0", + "postcss-value-parser": "^4.2.0" + }, "engines": { "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-scope-pseudo-class": { + "node_modules/@csstools/postcss-normalize-display-values": { "version": "4.0.0", "funding": [ { @@ -3913,7 +3270,7 @@ ], "license": "MIT-0", "dependencies": { - "postcss-selector-parser": "^6.1.0" + "postcss-value-parser": "^4.2.0" }, "engines": { "node": ">=18" @@ -3922,7 +3279,7 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-stepped-value-functions": { + "node_modules/@csstools/postcss-oklab-function": { "version": "4.0.0", "funding": [ { @@ -3936,9 +3293,11 @@ ], "license": "MIT-0", "dependencies": { - "@csstools/css-calc": "^2.0.0", + "@csstools/css-color-parser": "^3.0.0", "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0" + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" }, "engines": { "node": ">=18" @@ -3947,8 +3306,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-stepped-value-functions/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", + "node_modules/@csstools/postcss-progressive-custom-properties": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -3959,16 +3318,19 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-stepped-value-functions/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", + "node_modules/@csstools/postcss-relative-color-syntax": { + "version": "3.0.0", "funding": [ { "type": "github", @@ -3979,12 +3341,22 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^3.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" + }, "engines": { "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-text-decoration-shorthand": { + "node_modules/@csstools/postcss-scope-pseudo-class": { "version": "4.0.0", "funding": [ { @@ -3998,8 +3370,7 @@ ], "license": "MIT-0", "dependencies": { - "@csstools/color-helpers": "^4.2.1", - "postcss-value-parser": "^4.2.0" + "postcss-selector-parser": "^6.1.0" }, "engines": { "node": ">=18" @@ -4008,7 +3379,7 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-trigonometric-functions": { + "node_modules/@csstools/postcss-stepped-value-functions": { "version": "4.0.0", "funding": [ { @@ -4033,8 +3404,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-trigonometric-functions/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", + "node_modules/@csstools/postcss-text-decoration-shorthand": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -4045,16 +3416,20 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/color-helpers": "^4.2.1", + "postcss-value-parser": "^4.2.0" + }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" + "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-trigonometric-functions/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", + "node_modules/@csstools/postcss-trigonometric-functions": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -4065,9 +3440,17 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", + "dependencies": { + "@csstools/css-calc": "^2.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0" + }, "engines": { "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" } }, "node_modules/@csstools/postcss-unset-value": { @@ -4111,8 +3494,9 @@ } }, "node_modules/@csstools/selector-specificity": { - "version": "3.1.1", - "dev": true, + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-4.0.0.tgz", + "integrity": "sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==", "funding": [ { "type": "github", @@ -4123,12 +3507,11 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" }, "peerDependencies": { - "postcss-selector-parser": "^6.0.13" + "postcss-selector-parser": "^6.1.0" } }, "node_modules/@csstools/utilities": { @@ -6276,11 +5659,10 @@ "link": true }, "node_modules/@primer/stylelint-config": { - "version": "13.0.1-rc.5358628", - "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-13.0.1-rc.5358628.tgz", - "integrity": "sha512-Mxmu78NTe09LuHvuJDybP/qTrw/89BNTK1MTLLLoMml3gD2cwhlf7R7FNow+nQfwERc+7J32mlji1JPgVsHDfg==", + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-13.0.1.tgz", + "integrity": "sha512-DU/JqGa8jYV6EK3z7WruY/L22pbXcjAuIUe8S3euEA8gkH8zY4iSqj2BbSopHSFfTVPBNu1Bq5PwRVSP4B0J+g==", "dev": true, - "license": "MIT", "dependencies": { "@github/browserslist-config": "^1.0.0", "@primer/css": "^21.0.8", @@ -11921,26 +11303,6 @@ "postcss": "^8.4" } }, - "node_modules/css-has-pseudo/node_modules/@csstools/selector-specificity": { - "version": "4.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.1.0" - } - }, "node_modules/css-prefers-color-scheme": { "version": "10.0.0", "funding": [ @@ -23047,43 +22409,6 @@ "postcss": "^8.4" } }, - "node_modules/postcss-color-functional-notation/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/postcss-color-functional-notation/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, "node_modules/postcss-color-hex-alpha": { "version": "10.0.0", "funding": [ @@ -23190,64 +22515,6 @@ "postcss": "^8.4" } }, - "node_modules/postcss-custom-media/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/postcss-custom-media/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/postcss-custom-media/node_modules/@csstools/media-query-list-parser": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.1", - "@csstools/css-tokenizer": "^3.0.1" - } - }, "node_modules/postcss-custom-properties": { "version": "14.0.0", "funding": [ @@ -23287,43 +22554,6 @@ "postcss": "^8.0.0" } }, - "node_modules/postcss-custom-properties/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/postcss-custom-properties/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, "node_modules/postcss-custom-selectors": { "version": "8.0.0", "funding": [ @@ -23350,43 +22580,6 @@ "postcss": "^8.4" } }, - "node_modules/postcss-custom-selectors/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/postcss-custom-selectors/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, "node_modules/postcss-dir-pseudo-class": { "version": "9.0.0", "funding": [ @@ -23624,43 +22817,6 @@ "postcss": "^8.4" } }, - "node_modules/postcss-lab-function/node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" - } - }, - "node_modules/postcss-lab-function/node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": ">=18" - } - }, "node_modules/postcss-load-config": { "version": "3.1.4", "dev": true, @@ -23943,26 +23099,6 @@ "postcss": "^8.4" } }, - "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": { - "version": "4.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.1.0" - } - }, "node_modules/postcss-normalize-charset": { "version": "7.0.0", "dev": true, @@ -24322,9 +23458,10 @@ } }, "node_modules/postcss-resolve-nested-selector": { - "version": "0.1.4", - "dev": true, - "license": "MIT" + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz", + "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==", + "dev": true }, "node_modules/postcss-safe-parser": { "version": "7.0.0", @@ -27465,7 +26602,9 @@ } }, "node_modules/stylelint": { - "version": "16.8.1", + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.9.0.tgz", + "integrity": "sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==", "dev": true, "funding": [ { @@ -27477,12 +26616,11 @@ "url": "https://github.com/sponsors/stylelint" } ], - "license": "MIT", "dependencies": { - "@csstools/css-parser-algorithms": "^2.7.1", - "@csstools/css-tokenizer": "^2.4.1", - "@csstools/media-query-list-parser": "^2.1.13", - "@csstools/selector-specificity": "^3.1.1", + "@csstools/css-parser-algorithms": "^3.0.1", + "@csstools/css-tokenizer": "^3.0.1", + "@csstools/media-query-list-parser": "^3.0.1", + "@csstools/selector-specificity": "^4.0.0", "@dual-bundle/import-meta-resolve": "^4.1.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", @@ -27497,24 +26635,24 @@ "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^5.3.1", + "ignore": "^5.3.2", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", "known-css-properties": "^0.34.0", "mathml-tag-names": "^2.1.3", "meow": "^13.2.0", - "micromatch": "^4.0.7", + "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "picocolors": "^1.0.1", - "postcss": "^8.4.40", - "postcss-resolve-nested-selector": "^0.1.4", + "postcss": "^8.4.41", + "postcss-resolve-nested-selector": "^0.1.6", "postcss-safe-parser": "^7.0.0", - "postcss-selector-parser": "^6.1.1", + "postcss-selector-parser": "^6.1.2", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", "strip-ansi": "^7.1.0", - "supports-hyperlinks": "^3.0.0", + "supports-hyperlinks": "^3.1.0", "svg-tags": "^1.0.0", "table": "^6.8.2", "write-file-atomic": "^5.0.1" diff --git a/package.json b/package.json index 613986d8a4c..1859bbaae4d 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@mdx-js/react": "1.6.22", "@playwright/test": "1.43.0", "@prettier/sync": "0.5.1", - "@primer/stylelint-config": "^13.0.1-rc.5358628", + "@primer/stylelint-config": "13.0.1", "@size-limit/preset-big-lib": "11.0.2", "@types/jest": "29.5.12", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -78,7 +78,7 @@ "prettier": "3.0.3", "rimraf": "5.0.5", "size-limit": "11.1.5", - "stylelint": "^16.8.1", + "stylelint": "16.9.0", "typescript": "5.4.5" }, "optionalDependencies": { diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index f20124dedfa..0c2ba159271 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/packages/react/src/Avatar/Avatar.module.css @@ -1,5 +1,3 @@ -/* stylelint-disable csstools/value-no-unknown-custom-properties */ - :where(.Avatar) { display: inline-block; width: var(--avatarSize-regular); diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index b70b03114b1..057b89a68b7 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -159,7 +159,6 @@ /* Layout ------------------------------------------------------------------- */ -/* stylelint-disable-next-line plugin/no-unsupported-browser-features */ @container banner (max-width: 500px) { .BannerContainer { display: grid; @@ -179,7 +178,6 @@ } } -/* stylelint-disable-next-line plugin/no-unsupported-browser-features */ @container banner (min-width: 500px) { .BannerContainer { display: grid; diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css index 397e84f426e..05fa2c0a442 100644 --- a/packages/react/src/Blankslate/Blankslate.module.css +++ b/packages/react/src/Blankslate/Blankslate.module.css @@ -57,7 +57,6 @@ } /* At the time these styles were written, 34rem was our "small" breakpoint width */ -/* stylelint-disable-next-line plugin/no-unsupported-browser-features */ @container blankslate (max-width: 34rem) { .Blankslate { --blankslate-outer-padding-block: var(--base-size-20); diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 8f8efabbda4..2502c1950b1 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -28,7 +28,6 @@ transition-duration: 80ms; } - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible { @mixin focusOutline; } @@ -300,7 +299,6 @@ border-color: var(--button-primary-borderColor-hover); } - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible { @mixin focusOutlineOnEmphasis; } @@ -463,7 +461,6 @@ text-decoration: underline; } - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible, &:focus { outline-offset: 2px; diff --git a/packages/react/src/Checkbox/Checkbox.module.css b/packages/react/src/Checkbox/Checkbox.module.css index f202558ca7c..a6006910b6e 100644 --- a/packages/react/src/Checkbox/Checkbox.module.css +++ b/packages/react/src/Checkbox/Checkbox.module.css @@ -14,7 +14,6 @@ background-color: var(--fgColor-onEmphasis); transition: visibility 0s linear 230ms; clip-path: inset(var(--base-size-16) 0 0 0); - /* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); mask-size: 75%; mask-repeat: no-repeat; @@ -70,13 +69,11 @@ background: var(--control-checked-bgColor-rest); &::before { - /* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); visibility: visible; } } - /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible:not(:disabled) { @mixin focusOutline 2px; } From 70f83e325b81f0bf4e52c1962917d12994acf7ca Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 8 Oct 2024 18:35:19 +0000 Subject: [PATCH 08/26] Remove feature flag change --- e2e/components/AvatarStack.test.ts | 584 +++++++++++++---------------- 1 file changed, 261 insertions(+), 323 deletions(-) diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts index f9596901649..4d814a808bf 100644 --- a/e2e/components/AvatarStack.test.ts +++ b/e2e/components/AvatarStack.test.ts @@ -3,371 +3,309 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('AvatarStack', () => { - for (const featureFlagOn of [true, false]) { - test.describe(`Feature flag ${featureFlagOn ? 'enabled' : 'disabled'}`, () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--default', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Default.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Default.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--playground', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Playground.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Playground.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack--playground', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Align Left', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-left', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Align Left', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-left', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Left.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Left.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-left', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-left', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Align Right', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-right', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Align Right', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-right', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Right.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Align Right.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--align-right', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--align-right', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Disable Expand On Hover', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--disable-expand-on-hover', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Disable Expand On Hover', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--disable-expand-on-hover', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Disable Expand On Hover.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Disable Expand On Hover.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--disable-expand-on-hover', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--disable-expand-on-hover', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Custom Size On Parent', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Custom Size On Parent', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) - test.describe('Custom Size On Parent Responsive', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent-responsive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Custom Size On Parent Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent-responsive', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot( - `AvatarStack.Custom Size On Parent Responsive.${theme}.png`, - ) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent Responsive.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-parent-responsive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent-responsive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) - test.describe('Custom Size On Children', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Custom Size On Children', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) - test.describe('Custom Size On Children Responsive', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children-responsive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) + test.describe('Custom Size On Children Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children-responsive', + globals: { + colorScheme: theme, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot( - `AvatarStack.Custom Size On Children Responsive.${theme}.png`, - ) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children Responsive.${theme}.png`) + }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-avatarstack-features--custom-size-on-children-responsive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children-responsive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) - }) - } + } + }) }) From cdd6c7942fd35eb146656cb501a7d7c82f46f91c Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 8 Oct 2024 18:35:55 +0000 Subject: [PATCH 09/26] Revert package changes --- package-lock.json | 1288 +++++++++++++++++++++++++++++++++++++-------- package.json | 6 +- 2 files changed, 1078 insertions(+), 216 deletions(-) diff --git a/package-lock.json b/package-lock.json index 840392382ed..e22de925de1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@mdx-js/react": "1.6.22", "@playwright/test": "1.43.0", "@prettier/sync": "0.5.1", - "@primer/stylelint-config": "13.0.1", + "@primer/stylelint-config": "^13.0.1-rc.5358628", "@size-limit/preset-big-lib": "11.0.2", "@types/jest": "29.5.12", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -49,7 +49,7 @@ "prettier": "3.0.3", "rimraf": "5.0.5", "size-limit": "11.1.5", - "stylelint": "16.9.0", + "stylelint": "^16.8.1", "typescript": "5.4.5" }, "engines": { @@ -2667,9 +2667,8 @@ } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz", - "integrity": "sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==", + "version": "2.7.1", + "dev": true, "funding": [ { "type": "github", @@ -2680,17 +2679,17 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "engines": { - "node": ">=18" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.1" + "@csstools/css-tokenizer": "^2.4.1" } }, "node_modules/@csstools/css-tokenizer": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz", - "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==", + "version": "2.4.1", + "dev": true, "funding": [ { "type": "github", @@ -2701,14 +2700,14 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "engines": { - "node": ">=18" + "node": "^14 || ^16 || >=18" } }, "node_modules/@csstools/media-query-list-parser": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz", - "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==", + "version": "2.1.13", + "dev": true, "funding": [ { "type": "github", @@ -2719,12 +2718,13 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "engines": { - "node": ">=18" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.1", - "@csstools/css-tokenizer": "^3.0.1" + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1" } }, "node_modules/@csstools/postcss-cascade-layers": { @@ -2751,7 +2751,7 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-color-function": { + "node_modules/@csstools/postcss-cascade-layers/node_modules/@csstools/selector-specificity": { "version": "4.0.0", "funding": [ { @@ -2764,22 +2764,15 @@ } ], "license": "MIT-0", - "dependencies": { - "@csstools/css-color-parser": "^3.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, "engines": { "node": ">=18" }, "peerDependencies": { - "postcss": "^8.4" + "postcss-selector-parser": "^6.1.0" } }, - "node_modules/@csstools/postcss-color-mix-function": { - "version": "3.0.0", + "node_modules/@csstools/postcss-color-function": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -2805,34 +2798,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-content-alt-text": { - "version": "2.0.0", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/@csstools/postcss-exponential-functions": { - "version": "2.0.0", + "node_modules/@csstools/postcss-color-function/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -2843,21 +2810,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-calc": "^2.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0" - }, + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "postcss": "^8.4" + "@csstools/css-tokenizer": "^3.0.1" } }, - "node_modules/@csstools/postcss-font-format-keywords": { - "version": "4.0.0", + "node_modules/@csstools/postcss-color-function/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -2868,20 +2830,13 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "@csstools/utilities": "^2.0.0", - "postcss-value-parser": "^4.2.0" - }, + "license": "MIT", "engines": { "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-gamut-mapping": { - "version": "2.0.0", + "node_modules/@csstools/postcss-color-mix-function": { + "version": "3.0.0", "funding": [ { "type": "github", @@ -2896,7 +2851,9 @@ "dependencies": { "@csstools/css-color-parser": "^3.0.0", "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0" + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" }, "engines": { "node": ">=18" @@ -2905,8 +2862,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-global-data": { - "version": "2.1.1", + "node_modules/@csstools/postcss-color-mix-function/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -2917,16 +2874,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", + "license": "MIT", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=18" }, "peerDependencies": { - "postcss": "^8.4" + "@csstools/css-tokenizer": "^3.0.1" } }, - "node_modules/@csstools/postcss-gradients-interpolation-method": { - "version": "5.0.0", + "node_modules/@csstools/postcss-color-mix-function/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -2937,23 +2894,13 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-color-parser": "^3.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, + "license": "MIT", "engines": { "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-hwb-function": { - "version": "4.0.0", + "node_modules/@csstools/postcss-content-alt-text": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -2966,7 +2913,6 @@ ], "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.0", "@csstools/css-parser-algorithms": "^3.0.0", "@csstools/css-tokenizer": "^3.0.0", "@csstools/postcss-progressive-custom-properties": "^4.0.0", @@ -2979,8 +2925,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-ic-unit": { - "version": "4.0.0", + "node_modules/@csstools/postcss-content-alt-text/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -2991,21 +2937,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0", - "postcss-value-parser": "^4.2.0" - }, + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "postcss": "^8.4" + "@csstools/css-tokenizer": "^3.0.1" } }, - "node_modules/@csstools/postcss-initial": { - "version": "2.0.0", + "node_modules/@csstools/postcss-content-alt-text/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -3016,16 +2957,13 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", + "license": "MIT", "engines": { "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-is-pseudo-class": { - "version": "5.0.0", + "node_modules/@csstools/postcss-exponential-functions": { + "version": "2.0.0", "funding": [ { "type": "github", @@ -3038,8 +2976,9 @@ ], "license": "MIT-0", "dependencies": { - "@csstools/selector-specificity": "^4.0.0", - "postcss-selector-parser": "^6.1.0" + "@csstools/css-calc": "^2.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0" }, "engines": { "node": ">=18" @@ -3048,8 +2987,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-light-dark-function": { - "version": "2.0.0", + "node_modules/@csstools/postcss-exponential-functions/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -3060,22 +2999,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/utilities": "^2.0.0" - }, + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "postcss": "^8.4" + "@csstools/css-tokenizer": "^3.0.1" } }, - "node_modules/@csstools/postcss-logical-float-and-clear": { - "version": "3.0.0", + "node_modules/@csstools/postcss-exponential-functions/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -3086,16 +3019,13 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", + "license": "MIT", "engines": { "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-logical-overflow": { - "version": "2.0.0", + "node_modules/@csstools/postcss-font-format-keywords": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -3107,6 +3037,10 @@ } ], "license": "MIT-0", + "dependencies": { + "@csstools/utilities": "^2.0.0", + "postcss-value-parser": "^4.2.0" + }, "engines": { "node": ">=18" }, @@ -3114,7 +3048,7 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-logical-overscroll-behavior": { + "node_modules/@csstools/postcss-gamut-mapping": { "version": "2.0.0", "funding": [ { @@ -3127,6 +3061,11 @@ } ], "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^3.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0" + }, "engines": { "node": ">=18" }, @@ -3134,8 +3073,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-logical-resize": { - "version": "3.0.0", + "node_modules/@csstools/postcss-gamut-mapping/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -3146,19 +3085,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "postcss": "^8.4" + "@csstools/css-tokenizer": "^3.0.1" } }, - "node_modules/@csstools/postcss-logical-viewport-units": { - "version": "3.0.0", + "node_modules/@csstools/postcss-gamut-mapping/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -3169,20 +3105,13 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/utilities": "^2.0.0" - }, + "license": "MIT", "engines": { "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-minmax": { - "version": "2.0.0", + "node_modules/@csstools/postcss-global-data": { + "version": "2.1.1", "funding": [ { "type": "github", @@ -3193,22 +3122,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", - "dependencies": { - "@csstools/css-calc": "^2.0.0", - "@csstools/css-parser-algorithms": "^3.0.0", - "@csstools/css-tokenizer": "^3.0.0", - "@csstools/media-query-list-parser": "^3.0.0" - }, + "license": "MIT-0", "engines": { - "node": ">=18" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { - "version": "3.0.0", + "node_modules/@csstools/postcss-gradients-interpolation-method": { + "version": "5.0.0", "funding": [ { "type": "github", @@ -3221,9 +3144,11 @@ ], "license": "MIT-0", "dependencies": { + "@csstools/css-color-parser": "^3.0.0", "@csstools/css-parser-algorithms": "^3.0.0", "@csstools/css-tokenizer": "^3.0.0", - "@csstools/media-query-list-parser": "^3.0.0" + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" }, "engines": { "node": ">=18" @@ -3232,8 +3157,8 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-nested-calc": { - "version": "4.0.0", + "node_modules/@csstools/postcss-gradients-interpolation-method/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -3244,20 +3169,16 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "@csstools/utilities": "^2.0.0", - "postcss-value-parser": "^4.2.0" - }, + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "postcss": "^8.4" + "@csstools/css-tokenizer": "^3.0.1" } }, - "node_modules/@csstools/postcss-normalize-display-values": { - "version": "4.0.0", + "node_modules/@csstools/postcss-gradients-interpolation-method/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", "funding": [ { "type": "github", @@ -3268,18 +3189,12 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT-0", - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, + "license": "MIT", "engines": { "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-oklab-function": { + "node_modules/@csstools/postcss-hwb-function": { "version": "4.0.0", "funding": [ { @@ -3306,8 +3221,599 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-progressive-custom-properties": { - "version": "4.0.0", + "node_modules/@csstools/postcss-hwb-function/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-hwb-function/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/postcss-ic-unit": { + "version": "4.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-initial": { + "version": "2.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-is-pseudo-class": { + "version": "5.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/selector-specificity": "^4.0.0", + "postcss-selector-parser": "^6.1.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-is-pseudo-class/node_modules/@csstools/selector-specificity": { + "version": "4.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.1.0" + } + }, + "node_modules/@csstools/postcss-light-dark-function": { + "version": "2.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-light-dark-function/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-light-dark-function/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/postcss-logical-float-and-clear": { + "version": "3.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-logical-overflow": { + "version": "2.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-logical-overscroll-behavior": { + "version": "2.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-logical-resize": { + "version": "3.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-logical-viewport-units": { + "version": "3.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/utilities": "^2.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-logical-viewport-units/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/postcss-media-minmax": { + "version": "2.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "dependencies": { + "@csstools/css-calc": "^2.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/media-query-list-parser": "^3.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-media-minmax/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-media-minmax/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/postcss-media-minmax/node_modules/@csstools/media-query-list-parser": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^3.0.1", + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { + "version": "3.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/media-query-list-parser": "^3.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values/node_modules/@csstools/media-query-list-parser": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^3.0.1", + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-nested-calc": { + "version": "4.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/utilities": "^2.0.0", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-normalize-display-values": { + "version": "4.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-oklab-function": { + "version": "4.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^3.0.0", + "@csstools/css-parser-algorithms": "^3.0.0", + "@csstools/css-tokenizer": "^3.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/utilities": "^2.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-oklab-function/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-oklab-function/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@csstools/postcss-progressive-custom-properties": { + "version": "4.0.0", "funding": [ { "type": "github", @@ -3356,6 +3862,43 @@ "postcss": "^8.4" } }, + "node_modules/@csstools/postcss-relative-color-syntax/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-relative-color-syntax/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/@csstools/postcss-scope-pseudo-class": { "version": "4.0.0", "funding": [ @@ -3404,6 +3947,43 @@ "postcss": "^8.4" } }, + "node_modules/@csstools/postcss-stepped-value-functions/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-stepped-value-functions/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/@csstools/postcss-text-decoration-shorthand": { "version": "4.0.0", "funding": [ @@ -3448,9 +4028,46 @@ }, "engines": { "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.4" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-trigonometric-functions/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/@csstools/postcss-trigonometric-functions/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" } }, "node_modules/@csstools/postcss-unset-value": { @@ -3494,9 +4111,8 @@ } }, "node_modules/@csstools/selector-specificity": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-4.0.0.tgz", - "integrity": "sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==", + "version": "3.1.1", + "dev": true, "funding": [ { "type": "github", @@ -3507,11 +4123,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { - "node": ">=18" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "postcss-selector-parser": "^6.1.0" + "postcss-selector-parser": "^6.0.13" } }, "node_modules/@csstools/utilities": { @@ -5661,10 +6278,11 @@ "link": true }, "node_modules/@primer/stylelint-config": { - "version": "13.0.1", - "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-13.0.1.tgz", - "integrity": "sha512-DU/JqGa8jYV6EK3z7WruY/L22pbXcjAuIUe8S3euEA8gkH8zY4iSqj2BbSopHSFfTVPBNu1Bq5PwRVSP4B0J+g==", + "version": "13.0.1-rc.5358628", + "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-13.0.1-rc.5358628.tgz", + "integrity": "sha512-Mxmu78NTe09LuHvuJDybP/qTrw/89BNTK1MTLLLoMml3gD2cwhlf7R7FNow+nQfwERc+7J32mlji1JPgVsHDfg==", "dev": true, + "license": "MIT", "dependencies": { "@github/browserslist-config": "^1.0.0", "@primer/css": "^21.0.8", @@ -11300,6 +11918,26 @@ "postcss": "^8.4" } }, + "node_modules/css-has-pseudo/node_modules/@csstools/selector-specificity": { + "version": "4.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.1.0" + } + }, "node_modules/css-prefers-color-scheme": { "version": "10.0.0", "funding": [ @@ -22411,6 +23049,43 @@ "postcss": "^8.4" } }, + "node_modules/postcss-color-functional-notation/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/postcss-color-functional-notation/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/postcss-color-hex-alpha": { "version": "10.0.0", "funding": [ @@ -22517,6 +23192,64 @@ "postcss": "^8.4" } }, + "node_modules/postcss-custom-media/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/postcss-custom-media/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/postcss-custom-media/node_modules/@csstools/media-query-list-parser": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^3.0.1", + "@csstools/css-tokenizer": "^3.0.1" + } + }, "node_modules/postcss-custom-properties": { "version": "14.0.0", "funding": [ @@ -22556,6 +23289,43 @@ "postcss": "^8.0.0" } }, + "node_modules/postcss-custom-properties/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/postcss-custom-properties/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/postcss-custom-selectors": { "version": "8.0.0", "funding": [ @@ -22582,6 +23352,43 @@ "postcss": "^8.4" } }, + "node_modules/postcss-custom-selectors/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/postcss-custom-selectors/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/postcss-dir-pseudo-class": { "version": "9.0.0", "funding": [ @@ -22819,6 +23626,43 @@ "postcss": "^8.4" } }, + "node_modules/postcss-lab-function/node_modules/@csstools/css-parser-algorithms": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^3.0.1" + } + }, + "node_modules/postcss-lab-function/node_modules/@csstools/css-tokenizer": { + "version": "3.0.1", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/postcss-load-config": { "version": "3.1.4", "dev": true, @@ -23101,6 +23945,26 @@ "postcss": "^8.4" } }, + "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": { + "version": "4.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.1.0" + } + }, "node_modules/postcss-normalize-charset": { "version": "7.0.0", "dev": true, @@ -23460,10 +24324,9 @@ } }, "node_modules/postcss-resolve-nested-selector": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz", - "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==", - "dev": true + "version": "0.1.4", + "dev": true, + "license": "MIT" }, "node_modules/postcss-safe-parser": { "version": "7.0.0", @@ -26604,9 +27467,7 @@ } }, "node_modules/stylelint": { - "version": "16.9.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.9.0.tgz", - "integrity": "sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==", + "version": "16.8.1", "dev": true, "funding": [ { @@ -26618,11 +27479,12 @@ "url": "https://github.com/sponsors/stylelint" } ], + "license": "MIT", "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.1", - "@csstools/css-tokenizer": "^3.0.1", - "@csstools/media-query-list-parser": "^3.0.1", - "@csstools/selector-specificity": "^4.0.0", + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1", + "@csstools/media-query-list-parser": "^2.1.13", + "@csstools/selector-specificity": "^3.1.1", "@dual-bundle/import-meta-resolve": "^4.1.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", @@ -26637,24 +27499,24 @@ "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^5.3.2", + "ignore": "^5.3.1", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", "known-css-properties": "^0.34.0", "mathml-tag-names": "^2.1.3", "meow": "^13.2.0", - "micromatch": "^4.0.8", + "micromatch": "^4.0.7", "normalize-path": "^3.0.0", "picocolors": "^1.0.1", - "postcss": "^8.4.41", - "postcss-resolve-nested-selector": "^0.1.6", + "postcss": "^8.4.40", + "postcss-resolve-nested-selector": "^0.1.4", "postcss-safe-parser": "^7.0.0", - "postcss-selector-parser": "^6.1.2", + "postcss-selector-parser": "^6.1.1", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", "strip-ansi": "^7.1.0", - "supports-hyperlinks": "^3.1.0", + "supports-hyperlinks": "^3.0.0", "svg-tags": "^1.0.0", "table": "^6.8.2", "write-file-atomic": "^5.0.1" diff --git a/package.json b/package.json index 1859bbaae4d..63a3c2fbc27 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview", "build:components.json": "npm run build:components.json -w @primer/react", "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0", - "lint:css": "stylelint --rd -q '**/*.css'", + "lint:css": "stylelint '**/*.css' --max-warnings=0", "lint:css:fix": "stylelint --fix '**/*.css'", "lint:fix": "npm run lint -- --fix", "lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!**/node_modules/**\" \"!**/CHANGELOG.md\"", @@ -50,7 +50,7 @@ "@mdx-js/react": "1.6.22", "@playwright/test": "1.43.0", "@prettier/sync": "0.5.1", - "@primer/stylelint-config": "13.0.1", + "@primer/stylelint-config": "^13.0.1-rc.5358628", "@size-limit/preset-big-lib": "11.0.2", "@types/jest": "29.5.12", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -78,7 +78,7 @@ "prettier": "3.0.3", "rimraf": "5.0.5", "size-limit": "11.1.5", - "stylelint": "16.9.0", + "stylelint": "^16.8.1", "typescript": "5.4.5" }, "optionalDependencies": { From 6d02573e844c461be6813a972e91772282ee7218 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 8 Oct 2024 18:37:31 +0000 Subject: [PATCH 10/26] Revert module changes --- packages/react/src/Avatar/Avatar.module.css | 2 ++ packages/react/src/Banner/Banner.module.css | 2 ++ packages/react/src/Blankslate/Blankslate.module.css | 1 + packages/react/src/Button/ButtonBase.module.css | 3 +++ packages/react/src/Checkbox/Checkbox.module.css | 3 +++ .../src/__tests__/__snapshots__/AvatarStack.test.tsx.snap | 5 +++-- 6 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index fc67531b9a7..9edbe1cbdce 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/packages/react/src/Avatar/Avatar.module.css @@ -1,3 +1,5 @@ +/* stylelint-disable csstools/value-no-unknown-custom-properties */ + :where(.Avatar) { display: inline-block; width: var(--avatarSize-regular); diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index c836dc042c8..2bef4bbe4ed 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -159,6 +159,7 @@ /* Layout ------------------------------------------------------------------- */ +/* stylelint-disable-next-line plugin/no-unsupported-browser-features */ @container banner (max-width: 500px) { .BannerContainer { display: grid; @@ -178,6 +179,7 @@ } } +/* stylelint-disable-next-line plugin/no-unsupported-browser-features */ @container banner (min-width: 500px) { .BannerContainer { display: grid; diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css index 05fa2c0a442..397e84f426e 100644 --- a/packages/react/src/Blankslate/Blankslate.module.css +++ b/packages/react/src/Blankslate/Blankslate.module.css @@ -57,6 +57,7 @@ } /* At the time these styles were written, 34rem was our "small" breakpoint width */ +/* stylelint-disable-next-line plugin/no-unsupported-browser-features */ @container blankslate (max-width: 34rem) { .Blankslate { --blankslate-outer-padding-block: var(--base-size-20); diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index c4a77c840ec..ee184dec98b 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -28,6 +28,7 @@ transition-duration: 80ms; } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible { @mixin focusOutline; } @@ -299,6 +300,7 @@ border-color: var(--button-primary-borderColor-hover); } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible { @mixin focusOutlineOnEmphasis; } @@ -461,6 +463,7 @@ text-decoration: underline; } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible, &:focus { outline-offset: 2px; diff --git a/packages/react/src/Checkbox/Checkbox.module.css b/packages/react/src/Checkbox/Checkbox.module.css index a6006910b6e..f202558ca7c 100644 --- a/packages/react/src/Checkbox/Checkbox.module.css +++ b/packages/react/src/Checkbox/Checkbox.module.css @@ -14,6 +14,7 @@ background-color: var(--fgColor-onEmphasis); transition: visibility 0s linear 230ms; clip-path: inset(var(--base-size-16) 0 0 0); + /* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); mask-size: 75%; mask-repeat: no-repeat; @@ -69,11 +70,13 @@ background: var(--control-checked-bgColor-rest); &::before { + /* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); visibility: visible; } } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible:not(:disabled) { @mixin focusOutline 2px; } diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index 0be12c44696..f3c1df84433 100644 --- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -140,12 +140,13 @@ exports[`Avatar respects alignRight props 1`] = ` position: relative; } -
+
-
+ `; From dbf680032d0eb0a45435faf20b066d195482f293 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 8 Oct 2024 13:17:28 -0700 Subject: [PATCH 11/26] Add span element to AvatarStackWrapper --- packages/react/src/AvatarStack/AvatarStack.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index e4f420d6f9c..cd2f7d08b56 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -22,6 +22,7 @@ type StyledAvatarStackWrapperProps = { const AvatarStackWrapper = toggleStyledComponent( 'primer_react_css_modules_team', + 'span', styled.span` --avatar-border-width: 1px; --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); From ba9b70a62b4e68032f15014c4ad5f6d86bbdb077 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 8 Oct 2024 21:13:18 +0000 Subject: [PATCH 12/26] Update snapshot --- .../react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index f3c1df84433..0d32a2b45c7 100644 --- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -146,7 +146,6 @@ exports[`Avatar respects alignRight props 1`] = `
- Date: Mon, 28 Oct 2024 21:10:01 +0000 Subject: [PATCH 13/26] Fix weird merge problem --- packages/react/src/AvatarStack/AvatarStack.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index a9ff67d6c18..f6e99b81910 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -31,13 +31,15 @@ const AvatarStackWrapper = toggleStyledComponent( --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); display: flex; - position: absolute; - - ${getGlobalFocusStyles('1px')} + position: relative; + height: var(--avatar-stack-size); + min-width: var(--avatar-stack-size); .pc-AvatarStackBody { display: flex; position: absolute; + + ${getGlobalFocusStyles('1px')} } .pc-AvatarItem { @@ -48,8 +50,7 @@ const AvatarStackWrapper = toggleStyledComponent( box-shadow: 0 0 0 var(--avatar-border-width) ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; position: relative; - height: var(--avatar-stack-size); - min-width: var(--avatar-stack-size); + overflow: hidden; &:first-child { margin-left: 0; @@ -184,6 +185,7 @@ const AvatarStackWrapper = toggleStyledComponent( ${sx}; `, ) + const transformChildren = (children: React.ReactNode, enabled: boolean) => { return React.Children.map(children, child => { if (!React.isValidElement(child)) return child From 3c77e04e3aaf534153acb0dd3d9e4f3647d4de93 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 28 Oct 2024 21:10:55 +0000 Subject: [PATCH 14/26] important on the box shadow until avatar removes sx --- packages/react/src/AvatarStack/AvatarStack.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 11769ab475e..5ebe9926dd0 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -27,7 +27,7 @@ &:where([data-avatar-count='1']) { .AvatarItem { /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); + box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor) !important; } } @@ -129,7 +129,7 @@ overflow: hidden; flex-shrink: 0; /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default) !important; &:first-child { z-index: 10; From 62725ceea50358efca348960e60158e961346e73 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 28 Oct 2024 21:12:16 +0000 Subject: [PATCH 15/26] Update snapshot --- .../react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index cc28e33c219..8f68da6c108 100644 --- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -188,6 +188,7 @@ exports[`Avatar respects alignRight props 1`] = ` className="pc-AvatarStackBody" tabIndex={0} > + Date: Mon, 28 Oct 2024 21:14:35 +0000 Subject: [PATCH 16/26] Reduce diff --- packages/react/src/AvatarStack/AvatarStack.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index f6e99b81910..b01b28bf34b 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -215,6 +215,7 @@ const AvatarStack = ({ const enabled = useFeatureFlag('primer_react_css_modules_team') const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false) const stackContainer = useRef(null) + const count = React.Children.count(children) const wrapperClassNames = clsx( { @@ -342,6 +343,7 @@ const AvatarStack = ({ tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined} ref={stackContainer} > + {' '} {children}
) @@ -352,6 +354,7 @@ const AvatarStack = ({ tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined} ref={stackContainer} > + {' '} {children} ) @@ -368,7 +371,7 @@ const AvatarStack = ({ style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined} sx={enabled ? undefined : avatarStackSx} > - {transformChildren(children, enabled)} + {transformChildren(children, enabled)} ) } From dcb115d7d9933268973cee5195da79128c076437 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 30 Oct 2024 19:44:49 +0000 Subject: [PATCH 17/26] Move AvatarStackBody out of AvatarStack --- .../react/src/AvatarStack/AvatarStack.tsx | 83 ++++++++++++------- 1 file changed, 51 insertions(+), 32 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index b01b28bf34b..6f809dd3845 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -22,8 +22,10 @@ type StyledAvatarStackWrapperProps = { count?: number } & SxProp +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + const AvatarStackWrapper = toggleStyledComponent( - 'primer_react_css_modules_team', + CSS_MODULES_FEATURE_FLAG, 'span', styled.span` --avatar-border-width: 1px; @@ -204,6 +206,46 @@ export type AvatarStackProps = { children: React.ReactNode } & SxProp +const AvatarStackBody = ({ + disableExpand, + hasInteractiveChildren, + stackContainer, + children, +}: { + disableExpand: boolean | undefined + hasInteractiveChildren: boolean | undefined + stackContainer: React.RefObject +} & React.ComponentPropsWithoutRef<'div'>) => { + const bodyClassNames = clsx('pc-AvatarStackBody', { + 'pc-AvatarStack--disableExpand': disableExpand, + }) + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + if (enabled) { + return ( +
+ {' '} + {children} +
+ ) + } + return ( + + {' '} + {children} + + ) +} + const AvatarStack = ({ children, alignRight, @@ -212,7 +254,7 @@ const AvatarStack = ({ className, sx: sxProp = defaultSxProp, }: AvatarStackProps) => { - const enabled = useFeatureFlag('primer_react_css_modules_team') + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false) const stackContainer = useRef(null) @@ -226,9 +268,6 @@ const AvatarStack = ({ }, className, ) - const bodyClassNames = clsx('pc-AvatarStackBody', { - 'pc-AvatarStack--disableExpand': disableExpand, - }) const getAvatarChildSizes = () => { const avatarSizeMap: Record = { @@ -334,32 +373,6 @@ const AvatarStack = ({ sxProp as SxProp, ) - const AvatarStackBody = ({children}: React.ComponentPropsWithoutRef<'div'>) => { - if (enabled) { - return ( -
- {' '} - {children} -
- ) - } - return ( - - {' '} - {children} - - ) - } - return ( - {transformChildren(children, enabled)} + + {transformChildren(children, enabled)} + ) } From 81665ea997c9fd0c25ea651474e6b5efd5e386d5 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 19 Nov 2024 18:19:06 +0000 Subject: [PATCH 18/26] Move space --- packages/react/src/AvatarStack/AvatarStack.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 6f809dd3845..4b9f4525068 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -229,7 +229,6 @@ const AvatarStackBody = ({ tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined} ref={stackContainer} > - {' '} {children} ) @@ -240,7 +239,6 @@ const AvatarStackBody = ({ tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined} ref={stackContainer} > - {' '} {children} ) @@ -389,6 +387,7 @@ const AvatarStack = ({ hasInteractiveChildren={hasInteractiveChildren} stackContainer={stackContainer} > + {' '} {transformChildren(children, enabled)} From 9892c116190213a4b287a1395172faa1b8128470 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 19 Nov 2024 19:03:36 +0000 Subject: [PATCH 19/26] Fix to make sure sx prop is being passed in --- packages/react/src/AvatarStack/AvatarStack.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 4b9f4525068..43841d4816e 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -367,7 +367,7 @@ const AvatarStack = ({ } const avatarStackSx = merge( - getResponsiveAvatarSizeStyles(), + !enabled && getResponsiveAvatarSizeStyles(), sxProp as SxProp, ) @@ -380,7 +380,7 @@ const AvatarStack = ({ className={clsx(wrapperClassNames, {[classes.AvatarStack]: enabled})} // @ts-ignore - it's not allowing CSS properties here style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined} - sx={enabled ? undefined : avatarStackSx} + sx={avatarStackSx} > Date: Tue, 19 Nov 2024 20:17:34 +0000 Subject: [PATCH 20/26] Not important --- .../react/src/AvatarStack/AvatarStack.module.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 5ebe9926dd0..94640bbe0dc 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -27,7 +27,7 @@ &:where([data-avatar-count='1']) { .AvatarItem { /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor) !important; + box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); } } @@ -76,7 +76,7 @@ justify-content: flex-end; .AvatarItem { - margin-left: 0 !important; + margin-left: 0; &:first-child { margin-right: 0; @@ -99,11 +99,11 @@ &:not([data-disable-expand]):hover, &:not([data-disable-expand]):focus-within { .AvatarItem { - margin-right: var(--base-size-4) !important; - margin-left: 0 !important; + margin-right: var(--base-size-4); + margin-left: 0; &:first-child { - margin-right: 0 !important; + margin-right: 0; } } } @@ -129,7 +129,7 @@ overflow: hidden; flex-shrink: 0; /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default) !important; + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); &:first-child { z-index: 10; From b1ce61bfe943f9ccc8ff5e0edc3d85ab05f9a415 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 19 Nov 2024 22:01:09 +0000 Subject: [PATCH 21/26] Add a link wrapper test --- e2e/components/AvatarStack.test.ts | 4 ++++ .../AvatarStack/AvatarStack.dev.stories.tsx | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts index 8a3332d9371..066f1f3ff6c 100644 --- a/e2e/components/AvatarStack.test.ts +++ b/e2e/components/AvatarStack.test.ts @@ -43,6 +43,10 @@ const stories: Array<{title: string; id: string}> = [ title: 'SX Prop', id: 'components-avatarstack-dev--sx-prop', }, + { + title: 'With Link Wrappers', + id: 'components-avatarstack-dev--with-link-wrappers', + }, ] test.describe('AvatarStack', () => { diff --git a/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx index e1da2e33122..ed132a155ed 100644 --- a/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx @@ -2,6 +2,7 @@ import React from 'react' import type {Meta} from '@storybook/react' import AvatarStack from './AvatarStack' import Avatar from '../Avatar' +import Link from '../Link' export default { title: 'Components/AvatarStack/Dev', @@ -21,3 +22,20 @@ export const SxProp = () => ( ) + +export const WithLinkWrappers = () => ( + + + + + + + + + + + + + + +) From 5ba219dc6bd1acf14ec1e24bb0685631a88e6db8 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 19 Nov 2024 22:01:40 +0000 Subject: [PATCH 22/26] Adjust css for when link wrapper occurs --- .../react/src/AvatarStack/AvatarStack.module.css | 16 ++++++++++------ packages/react/src/AvatarStack/AvatarStack.tsx | 8 ++++++-- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 94640bbe0dc..36c00416348 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -76,7 +76,7 @@ justify-content: flex-end; .AvatarItem { - margin-left: 0; + margin-left: 0 !important; &:first-child { margin-right: 0; @@ -99,11 +99,11 @@ &:not([data-disable-expand]):hover, &:not([data-disable-expand]):focus-within { .AvatarItem { - margin-right: var(--base-size-4); - margin-left: 0; + margin-right: var(--base-size-4) !important; + margin-left: 0 !important; &:first-child { - margin-right: 0; + margin-right: 0 !important; } } } @@ -124,12 +124,16 @@ --avatarSize-regular: var(--avatar-stack-size); position: relative; + display: flex; width: var(--avatar-stack-size); height: var(--avatar-stack-size); overflow: hidden; flex-shrink: 0; - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); + + &:is(img) { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); + } &:first-child { z-index: 10; diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 43841d4816e..15bda4307f5 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -49,10 +49,14 @@ const AvatarStackWrapper = toggleStyledComponent( flex-shrink: 0; height: var(--avatar-stack-size); width: var(--avatar-stack-size); - box-shadow: 0 0 0 var(--avatar-border-width) - ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; position: relative; overflow: hidden; + display: flex; + + &:is(img) { + box-shadow: 0 0 0 var(--avatar-border-width) + ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; + } &:first-child { margin-left: 0; From 1c7c2619962b2a5ef579e1ba3d0351e194e17d98 Mon Sep 17 00:00:00 2001 From: jonrohan Date: Tue, 19 Nov 2024 22:11:18 +0000 Subject: [PATCH 23/26] test(vrt): update snapshots --- ...-With-Link-Wrappers-dark-colorblind-linux.png | Bin 0 -> 6044 bytes ...tack-With-Link-Wrappers-dark-dimmed-linux.png | Bin 0 -> 6037 bytes ...th-Link-Wrappers-dark-high-contrast-linux.png | Bin 0 -> 6145 bytes ...AvatarStack-With-Link-Wrappers-dark-linux.png | Bin 0 -> 6044 bytes ...-With-Link-Wrappers-dark-tritanopia-linux.png | Bin 0 -> 6044 bytes ...With-Link-Wrappers-light-colorblind-linux.png | Bin 0 -> 6034 bytes ...h-Link-Wrappers-light-high-contrast-linux.png | Bin 0 -> 6092 bytes ...vatarStack-With-Link-Wrappers-light-linux.png | Bin 0 -> 6034 bytes ...With-Link-Wrappers-light-tritanopia-linux.png | Bin 0 -> 6034 bytes 9 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png create mode 100644 .playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f8d78736e978663743a12271f8d972706386f9bb GIT binary patch literal 6044 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..09f712714496c2129fff80146d394a6f855cbc64 GIT binary patch literal 6037 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 KlzBMn@BaqxNx!N9 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f8d78736e978663743a12271f8d972706386f9bb GIT binary patch literal 6044 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f8d78736e978663743a12271f8d972706386f9bb GIT binary patch literal 6044 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1f11f61e963541c6b0c0f0a25078019218a76d37 GIT binary patch literal 6034 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 BB;)`9 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1f11f61e963541c6b0c0f0a25078019218a76d37 GIT binary patch literal 6034 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 Date: Tue, 19 Nov 2024 22:26:02 +0000 Subject: [PATCH 24/26] Update snap --- .../__tests__/__snapshots__/AvatarStack.test.tsx.snap | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index 8f68da6c108..8b0b980e5d3 100644 --- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -46,9 +46,16 @@ exports[`Avatar respects alignRight props 1`] = ` flex-shrink: 0; height: var(--avatar-stack-size); width: var(--avatar-stack-size); - box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default,#ffffff)); position: relative; overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 .pc-AvatarItem:is(img) { + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default,#ffffff)); } .c0 .pc-AvatarItem:first-child { From f7f982a6f643119eb24a5598b121c0bec7fa98cf Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 19 Nov 2024 22:30:34 +0000 Subject: [PATCH 25/26] Remove box-shadow --- .../react/src/experimental/Skeleton/SkeletonAvatar.module.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css b/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css index 2f2d0c20915..02c869f1078 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css +++ b/packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css @@ -6,8 +6,6 @@ /* stylelint-disable-next-line primer/typography */ line-height: 1; border-radius: 50%; - /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 1px var(--avatar-borderColor); } &:where([data-square]) { From 276bd5f53ccd4bf9817fe4f2b8c60d81e289fe09 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 25 Nov 2024 07:53:34 -0800 Subject: [PATCH 26/26] Apply suggestions from code review Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Hussam Ghazzi --- packages/react/src/AvatarStack/AvatarStack.module.css | 6 +++--- packages/react/src/AvatarStack/AvatarStack.tsx | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 36c00416348..ea13c99ecae 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -36,7 +36,7 @@ /* 1. avatar size + the non-overlapping part of the second avatar */ - /* 2. + the border widths of the first two avatars;thiscalcexplained */ + /* 2. + the border widths of the first two avatars */ min-width: calc( var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) ); @@ -47,7 +47,7 @@ /* 1. avatar size + the non-overlapping part of the second avatar */ - /* 2. + the non-overlapping part of the third avatar;thiscalcexplained */ + /* 2. + the non-overlapping part of the third avatar */ min-width: calc( var(--avatar-stack-size) + calc( @@ -62,7 +62,7 @@ /* 1. avatar size + the non-overlapping part of the second avatar */ - /* 2. + the non-overlapping part of the third and fourth avatar;thiscalcexplained */ + /* 2. + the non-overlapping part of the third and fourth avatar */ min-width: calc( var(--avatar-stack-size) + calc( diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 15bda4307f5..78856581e62 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -382,8 +382,7 @@ const AvatarStack = ({ data-align-right={enabled && alignRight ? '' : undefined} data-responsive={enabled && (!size || isResponsiveValue(size)) ? '' : undefined} className={clsx(wrapperClassNames, {[classes.AvatarStack]: enabled})} - // @ts-ignore - it's not allowing CSS properties here - style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined} + style={enabled ? getResponsiveAvatarSizeStyles() : undefined} sx={avatarStackSx} >