feat(BaseStyles): Convert BaseStyles to CSS modules behind team feature flag

.changeset/grumpy-numbers-eat.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert BaseStyles to CSS modules behind team feature flag

e2e/components/SelectPanel.test.ts

@@ -76,27 +76,47 @@ test.describe('SelectPanel', () => {
     })
   }
 
-  test(`Default @vrt forced-colors .modern-action-list--true`, async ({page}) => {
+  test(`Default @vrt forced-colors light .modern-action-list--true`, async ({page}) => {
     await visit(page, {
       id: 'components-selectpanel--default',
       globals: {featureFlags: {primer_react_select_panel_with_modern_action_list: true}},
     })
 
+    // windows high contrast mode: light
+    await page.emulateMedia({forcedColors: 'active', colorScheme: 'light'})
+    await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)
+
     // Open select panel
-    const isPanelOpen = await page.isVisible('[role="listbox"]')
+    const isPanelOpen = await page.getByRole('listbox').isVisible()
     if (!isPanelOpen) {
       await page.keyboard.press('Tab')
       await page.keyboard.press('Enter')
     }
+    await expect(page.getByRole('listbox')).toBeVisible()
 
-    // windows high contrast mode: light
-    await page.emulateMedia({forcedColors: 'active', colorScheme: 'light'})
     expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
       `SelectPanel-Default-forced-colors-light-modern-action-list--true.png`,
     )
+  })
+
+  test(`Default @vrt forced-colors dark .modern-action-list--true`, async ({page}) => {
+    await visit(page, {
+      id: 'components-selectpanel--default',
+      globals: {featureFlags: {primer_react_select_panel_with_modern_action_list: true}},
+    })
 
     // windows high contrast mode: dark
     await page.emulateMedia({forcedColors: 'active', colorScheme: 'dark'})
+    await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)
+
+    // Open select panel
+    const isPanelOpen = await page.getByRole('listbox').isVisible()
+    if (!isPanelOpen) {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    }
+    await expect(page.getByRole('listbox')).toBeVisible()
+
     expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
       `SelectPanel-Default-forced-colors-dark-modern-action-list--true.png`,
     )

packages/react/src/BaseStyles.module.css

@@ -0,0 +1,50 @@
+/* stylelint-disable selector-max-specificity */
+/* stylelint-disable selector-type-no-unknown */
+
+/* -------------------------------- 
+ *           Global Styles         
+ *--------------------------------- */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+table {
+  /* stylelint-disable-next-line primer/borders */
+  border-collapse: collapse;
+}
+
+[role='button']:focus:not(:focus-visible):not(.focus-visible),
+[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(.focus-visible),
+button:focus:not(:focus-visible):not(.focus-visible),
+summary:focus:not(:focus-visible):not(.focus-visible),
+a:focus:not(:focus-visible):not(.focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+[tabindex='0']:focus:not(:focus-visible):not(.focus-visible),
+details-dialog:focus:not(:focus-visible):not(.focus-visible) {
+  outline: none;
+}
+
+/* -------------------------------------------------------------------------- */
+
+.BaseStyles {
+  /* Global styles for light mode */
+  &:has([data-color-mode='light']) {
+    input & {
+      color-scheme: light;
+    }
+  }
+
+  /* Global styles for dark mode */
+  &:has([data-color-mode='dark']) {
+    input & {
+      color-scheme: dark;
+    }
+  }
+}

packages/react/src/BaseStyles.tsx

@@ -1,13 +1,19 @@
 import React from 'react'
+import {clsx} from 'clsx'
 import styled, {createGlobalStyle} from 'styled-components'
 import type {SystemCommonProps, SystemTypographyProps} from './constants'
 import {COMMON, TYPOGRAPHY} from './constants'
 import {useTheme} from './ThemeProvider'
 import type {ComponentProps} from './utils/types'
+import {useFeatureFlag} from './FeatureFlags'
+// import {toggleStyledComponent} from './internal/utils/toggleStyledComponent'
+import classes from './BaseStyles.module.css'
 
 // load polyfill for :focus-visible
 import 'focus-visible'
 
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
 const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   * { box-sizing: border-box; }
   body { margin: 0; }
@@ -34,22 +40,29 @@ const Base = styled.div<SystemTypographyProps & SystemCommonProps>`
   ${COMMON};
 `
 
-export type BaseStylesProps = ComponentProps<typeof Base>
+export type BaseStylesProps = ComponentProps<typeof Base> & {
+  style?: React.CSSProperties
+}
 
 function BaseStyles(props: BaseStylesProps) {
-  const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props
+  const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', className, ...rest} = props
 
   const {colorScheme, dayScheme, nightScheme} = useTheme()
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
+  const stylingProps = enabled ? {className: clsx(classes.BaseStyles, className)} : {className}
+
+  // const StyledDiv = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', Base)
 
   /**
    * We need to map valid primer/react color modes onto valid color modes for primer/primitives
    * valid color modes for primer/primitives: auto | light | dark
    * valid color modes for primer/primer: auto | day | night | light | dark
    */
-
   return (
     <Base
       {...rest}
+      {...stylingProps}
       color={color}
       fontFamily={fontFamily}
       lineHeight={lineHeight}
@@ -58,7 +71,7 @@ function BaseStyles(props: BaseStylesProps) {
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
     >
-      <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
+      {!enabled && <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />}
       {children}
     </Base>
   )

packages/react/src/__tests__/BaseStyles.test.tsx

@@ -30,4 +30,16 @@ describe('BaseStyles', () => {
     const {container} = render(<BaseStyles {...styles}></BaseStyles>)
     expect(container.children[0]).toHaveStyle({color: '#f00', 'font-family': 'Arial', 'line-height': '3.5'})
   })
+
+  it('accepts className and style props', () => {
+    const styles = {
+      style: {margin: '10px'},
+      className: 'test-classname',
+      sx: {},
+    }
+
+    const {container} = render(<BaseStyles {...styles}></BaseStyles>)
+    expect(container.children[0]).toHaveClass('test-classname')
+    expect(container.children[0]).toHaveStyle({margin: '10px'})
+  })
 })

packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AnchoredOverlay should render consistently when open 1`] = `
-.c0 {
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-  line-height: 1.5;
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-}
-
 .c2 {
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
 
+.c0 {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  line-height: 1.5;
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+}
+
 .c1 {
   border-radius: 6px;
   border: 1px solid;
@@ -340,14 +340,14 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
     font-family="normal"
   >
     <button
-      aria-describedby=":rj:-loading-announcement"
+      aria-describedby=":rn:-loading-announcement"
       aria-expanded="true"
       aria-haspopup="true"
       class="c1"
       data-loading="false"
       data-no-visuals="true"
       data-size="medium"
-      id=":rj:"
+      id=":rn:"
       tabindex="0"
       type="button"
     >