diff --git a/.changeset/hot-chicken-tickle.md b/.changeset/hot-chicken-tickle.md deleted file mode 100644 index d09a216a5a4..00000000000 --- a/.changeset/hot-chicken-tickle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@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 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', + }, + }, }) - } + }) }) - }) - } + } + }) }) diff --git a/package-lock.json b/package-lock.json index ddabd822c40..17cb868d1f7 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": { @@ -5659,10 +6276,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", @@ -11303,6 +11921,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": [ @@ -22414,6 +23052,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": [ @@ -22520,6 +23195,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": [ @@ -22559,6 +23292,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": [ @@ -22585,6 +23355,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": [ @@ -22822,6 +23629,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, @@ -23104,6 +23948,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, @@ -23463,10 +24327,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", @@ -26607,9 +27470,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": [ { @@ -26621,11 +27482,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", @@ -26640,24 +27502,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": { diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index 0c2ba159271..f20124dedfa 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/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css deleted file mode 100644 index 3859c56b84d..00000000000 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ /dev/null @@ -1,184 +0,0 @@ -/* 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 e4f420d6f9c..24667bbb69c 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -12,176 +12,169 @@ 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 = 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); +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); + display: flex; + position: relative; + height: var(--avatar-stack-size); + min-width: var(--avatar-stack-size); + + .pc-AvatarStackBody { display: flex; - position: relative; + position: absolute; + } + + .pc-AvatarItem { + --avatar-size: var(--avatar-stack-size); + flex-shrink: 0; height: var(--avatar-stack-size); - min-width: 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; - .pc-AvatarStackBody { - display: flex; - position: absolute; + &:first-child { + margin-left: 0; + z-index: 10; } - .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; - - &:first-child { - margin-left: 0; - z-index: 10; - } - - &:nth-child(n + 2) { - margin-left: var(--avatar-two-margin); - z-index: 9; - } - - &: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 + 5) { - opacity: ${100 - 5 * 15}%; - z-index: 6; - } + &:nth-child(n + 2) { + margin-left: var(--avatar-two-margin); + z-index: 9; + } - &:nth-child(n + 6) { - opacity: 0; - visibility: hidden; - } + &:nth-child(n + 3) { + margin-left: var(--avatar-three-margin); + opacity: ${100 - 3 * 15}%; + z-index: 8; } - &.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) - ); + &:nth-child(n + 4) { + opacity: ${100 - 4 * 15}%; + z-index: 7; } - &.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)) - ) - ); + &:nth-child(n + 5) { + opacity: ${100 - 5 * 15}%; + z-index: 6; } - &.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 - ) - ); + &:nth-child(n + 6) { + opacity: 0; + visibility: hidden; } + } - &.pc-AvatarStack--right { - justify-content: flex-end; - .pc-AvatarItem { - margin-left: 0 !important; + &.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) + ); + } - &:first-child { - margin-right: 0; - } + &.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)) + ) + ); + } - &:nth-child(n + 2) { - margin-right: var(--avatar-two-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 + ) + ); + } - &:nth-child(n + 3) { - margin-right: var(--avatar-three-margin); - } + &.pc-AvatarStack--right { + justify-content: flex-end; + .pc-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); } + } - .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, enabled: boolean) => { + ${sx}; +` +const transformChildren = (children: React.ReactNode) => { 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', {[classes.AvatarItem]: enabled}), + className: clsx(child.props.className, 'pc-AvatarItem'), }) }) } @@ -194,7 +187,6 @@ 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, @@ -245,21 +237,12 @@ 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( - childSizes, + getAvatarChildSizes(), '--avatar-stack-size' as keyof React.CSSProperties, value => `${value}px`, ) @@ -267,14 +250,6 @@ 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, @@ -291,32 +266,9 @@ 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 ( - 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)} + + {transformChildren(children)} ) } diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index 8b153e965d6..5e20ad6cb73 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 2502c1950b1..8f8efabbda4 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; } -
+
-
+ `; diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.module.css b/packages/react/src/experimental/IssueLabel/IssueLabel.module.css index 5cef2654fd2..6b62fd45428 100644 --- a/packages/react/src/experimental/IssueLabel/IssueLabel.module.css +++ b/packages/react/src/experimental/IssueLabel/IssueLabel.module.css @@ -30,6 +30,7 @@ background-color: var(--label-bgColor-active); } + /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ &:focus-visible { @mixin focusOutline 2px; } diff --git a/packages/react/src/internal/utils/toggleStyledComponent.tsx b/packages/react/src/internal/utils/toggleStyledComponent.tsx index 7b366cb0eb0..4a9bbd0e00a 100644 --- a/packages/react/src/internal/utils/toggleStyledComponent.tsx +++ b/packages/react/src/internal/utils/toggleStyledComponent.tsx @@ -1,12 +1,9 @@ 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 } /** @@ -21,18 +18,12 @@ type CSSModulesProps = { * is disabled */ export function toggleStyledComponent(flag: string, Component: React.ComponentType

) { - const Wrapper = React.forwardRef(function Wrapper( - {as: BaseComponent = 'div', sx: sxProp = defaultSxProp, ...rest}, - ref, - ) { + const Wrapper = React.forwardRef(function Wrapper({as: BaseComponent = 'div', ...rest}, ref) { const enabled = useFeatureFlag(flag) if (enabled) { - if (sxProp !== defaultSxProp) { - return - } return } - return + return }) return Wrapper