diff --git a/.changeset/hot-chicken-tickle.md b/.changeset/hot-chicken-tickle.md new file mode 100644 index 00000000000..d09a216a5a4 --- /dev/null +++ b/.changeset/hot-chicken-tickle.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team 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', + }, + }, + }) + }) }) - }) + } }) - } - }) + }) + } }) 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 63a3c2fbc27..1859bbaae4d 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' --max-warnings=0", + "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\"", @@ -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/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css new file mode 100644 index 00000000000..3859c56b84d --- /dev/null +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -0,0 +1,184 @@ +/* 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 { + /* stylelint-disable-next-line primer/box-shadow */ + 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) { + /* 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); + } + } + + .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; + /* stylelint-disable-next-line primer/box-shadow */ + 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; + /* 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; + } + + &: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/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; } 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; } -
-
- + `; 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