Merge pull request #2519 from system-ui/fix-root-styles

fix(color-modes): make useRootStyles=false work with useCustomProperties
system-ui · Oct 17, 2024 · f9fbb7d · f9fbb7d
2 parents 0e356f5 + e4e2b70
commit f9fbb7d
Show file tree

Hide file tree

Showing 32 changed files with 16,434 additions and 11,898 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -17,7 +17,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9.12.1
 
       - uses: actions/setup-node@v3
         with:
@@ -81,7 +81,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9.12.1
 
       - uses: actions/setup-node@v3
         with:
@@ -90,7 +90,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install
-        run: pnpm install --no-optional --no-frozen-lockfile
+        run: pnpm install --no-optional
 
       - name: Queue in release turnstile
         id: turnstyle

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -23,7 +23,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 9.12.1
 
       - uses: actions/setup-node@v2
         with:

diff --git a/auto.config.ts b/auto.config.ts
@@ -13,7 +13,7 @@ const conventionalCommitsOptions: ConventionalCommitsOptions = {
   defaultReleaseType: 'none',
 }
 
-const allContributorsOptions: IAllContributorsPluginOptions = {
+const _allContributorsOptions: IAllContributorsPluginOptions = {
   exclude: [
     'dependabot',
     'dependabot[bot]',
@@ -61,7 +61,7 @@ export default function config(): AutoRc {
       ['conventional-commits', conventionalCommitsOptions],
       'first-time-contributor',
       'released',
-      ['all-contributors', allContributorsOptions],
+      // ['all-contributors', allContributorsOptions],
       ['omit-commits', omitCommitsOptions],
       // 'magic-zero',
     ],

diff --git a/examples/gatsby-plugin/package.json b/examples/gatsby-plugin/package.json
@@ -12,7 +12,7 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "gatsby": "^5",
     "gatsby-plugin-mdx": "^5",
     "gatsby-plugin-theme-ui": "workspace:^",

diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -12,7 +12,7 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "@mdx-js/react": "^2.3.0",
     "@theme-ui/mdx": "workspace:^",
     "gatsby": "^5",

diff --git a/examples/next/package.json b/examples/next/package.json
@@ -12,7 +12,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^14.0.4",

diff --git a/package.json b/package.json
@@ -63,56 +63,57 @@
     }
   },
   "dependencies": {
-    "@auto-it/all-contributors": "^10.46.0",
-    "@auto-it/conventional-commits": "^10.46.0",
-    "@auto-it/core": "^10.46.0",
-    "@auto-it/first-time-contributor": "^10.46.0",
-    "@auto-it/magic-zero": "^10.46.0",
-    "@auto-it/npm": "^10.46.0",
-    "@auto-it/omit-commits": "^11.0.4",
-    "@auto-it/released": "^10.46.0",
+    "@auto-it/all-contributors": "^11.2.1",
+    "@auto-it/conventional-commits": "^11.2.1",
+    "@auto-it/core": "^11.2.1",
+    "@auto-it/first-time-contributor": "^11.2.1",
+    "@auto-it/magic-zero": "^11.2.1",
+    "@auto-it/npm": "^11.2.1",
+    "@auto-it/omit-commits": "^11.2.1",
+    "@auto-it/released": "^11.2.1",
     "@babel/cli": "^7.22.5",
     "@babel/helper-string-parser": "^7.22.5",
     "@babel/helper-validator-identifier": "^7.22.5",
     "@babel/plugin-transform-runtime": "^7.24.3",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.22.5",
+    "@babel/runtime": "^7.25.7",
     "@codechecks/build-size-watcher": "^0.1.0",
     "@codechecks/client": "0.1.12",
-    "@emotion/jest": "^11.11.0",
-    "@jest/types": "^29.5.0",
-    "@preconstruct/cli": "^2.7.0",
+    "@emotion/jest": "^11.13.0",
+    "@jest/types": "^29.6.3",
+    "@preconstruct/cli": "^2.8.9",
     "@testing-library/react": "^14.2.1",
     "@types/eslint": "8.56.2",
-    "@types/jest": "^29.5.2",
+    "@types/jest": "^29.5.13",
     "@types/node": "^20.3.1",
     "@types/react-dom": "^18.2.5",
     "@types/react-test-renderer": "^18.3.0",
     "@types/semver": "^7.5.0",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
-    "auto": "^11.0.4",
+    "auto": "^11.2.1",
     "babel-jest": "^29.7.0",
-    "babel-preset-gatsby": "^3.10.0",
+    "babel-preset-gatsby": "^3.13.2",
     "cross-env": "^7.0.3",
     "egzek": "^1.2.0",
     "eslint": "^8.56.0",
     "eslint-config-react-app": "^7.0.1",
-    "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.5.1",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-mock-console": "^2.0.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^5.0.1",
-    "semver": "^7.5.1",
-    "ts-jest": "^29.1.0",
+    "semver": "^7.6.3",
+    "ts-jest": "^29.2.5",
     "ts-toolbelt": "^9.6.0",
     "typecov": "^0.2.3",
-    "typescript": "^5"
-  }
+    "typescript": "^5.6.3"
+  },
+  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
 }
diff --git a/packages/color-modes/package.json b/packages/color-modes/package.json
@@ -19,11 +19,11 @@
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "react": ">=18"
   },
   "devDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "@theme-ui/test-utils": "workspace:^",
     "@types/react": "^18.2.12",
     "react": "^18.1.0"

diff --git a/packages/color-modes/src/custom-properties.ts b/packages/color-modes/src/custom-properties.ts
@@ -1,4 +1,10 @@
-import { ColorMode, ColorModesScale, css, Theme } from '@theme-ui/css'
+import {
+  ColorMode,
+  ColorModesScale,
+  css,
+  Theme,
+  ThemeUICSSObject,
+} from '@theme-ui/css'
 
 const toVarName = (key: string) => `--theme-ui-${key.replace('-__default', '')}`
 const toVarValue = (key: string) => `var(${toVarName(key)})`
@@ -75,40 +81,43 @@ export const __createColorStyles = (theme: Theme = {}) => {
   } = theme.config || theme || {}
   const colors = theme.rawColors || theme.colors
 
-  if (!colors || useRootStyles === false) return {}
-  if (useCustomProperties === false) {
-    return css({
-      color: 'text',
-      bg: 'background',
-    })(theme)
-  }
-
-  const modes = colors.modes || {}
+  if (!colors) return {}
 
-  const styles = __createColorProperties(colors, modes)
+  const res: ThemeUICSSObject = {}
 
-  if (printColorModeName) {
-    let printMode = modes[printColorModeName]
-    if (!printMode && printColorModeName === initialColorModeName)
-      printMode = colors
-
-    if (printMode) {
-      styles['@media print'] = __objectToVars('colors', printMode)
+  if (useRootStyles !== false) {
+    if (useCustomProperties === false) {
+      res.color = 'text'
+      res.bg = 'background'
     } else {
-      console.error(
-        `Theme UI \`printColorModeName\` was not found in colors scale`,
-        { colors, printColorModeName }
-      )
+      res.color = toVarValue('colors-text')
+      res.bg = toVarValue('colors-background')
     }
   }
 
-  const colorToVarValue = (color: string) => toVarValue(`colors-${color}`)
+  if (useCustomProperties !== false) {
+    const modes = colors.modes || {}
+    const styles = __createColorProperties(colors, modes)
+
+    if (printColorModeName) {
+      let printMode = modes[printColorModeName]
+      if (!printMode && printColorModeName === initialColorModeName)
+        printMode = colors
+
+      if (printMode) {
+        styles['@media print'] = __objectToVars('colors', printMode)
+      } else {
+        console.error(
+          `Theme UI \`printColorModeName\` was not found in colors scale`,
+          { colors, printColorModeName }
+        )
+      }
+    }
+
+    Object.assign(res, styles)
+  }
 
-  return css({
-    ...styles,
-    color: colorToVarValue('text'),
-    bg: colorToVarValue('background'),
-  })(theme)
+  return css(res)(theme)
 }
 
 /**

diff --git a/packages/color-modes/test/index.tsx b/packages/color-modes/test/index.tsx
@@ -903,12 +903,11 @@ test('colorMode accepts function from previous state to new one', () => {
 test('warns when localStorage is disabled', () => {
   const restoreConsole = mockConsole()
 
-  const localStorage = window.localStorage
-  Object.defineProperty(window, 'localStorage', {
-    get: jest.fn(() => {
+  const spy = jest
+    .spyOn(Storage.prototype, 'getItem')
+    .mockImplementation(() => {
       throw new Error('SecurityError: The operation is insecure.')
-    }),
-  })
+    })
 
   let mode = ''
   const Consumer = () => {
@@ -927,8 +926,6 @@ test('warns when localStorage is disabled', () => {
 
   expect(mode).toBe(undefined)
 
-  Object.defineProperty(window, 'localStorage', { value: localStorage })
-
   expect((console.warn as jest.Mock).mock.calls[0]).toMatchInlineSnapshot(`
     [
       "localStorage is disabled and color mode might not work as expected.",
@@ -937,6 +934,7 @@ test('warns when localStorage is disabled', () => {
     ]
   `)
 
+  spy.mockClear()
   restoreConsole()
 })
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -15,12 +15,12 @@
     "@types/styled-system": "^5.1.13"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "@theme-ui/theme-provider": "workspace:^",
     "react": ">=18"
   },
   "devDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "@theme-ui/test-utils": "workspace:^",
     "@types/react": "^18.2.12",
     "react": "^18.1.0"

diff --git a/packages/core/jsx-dev-runtime/package.json b/packages/core/jsx-dev-runtime/package.json
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "react": "^18"
   },
   "devDependencies": {

diff --git a/packages/core/jsx-runtime/package.json b/packages/core/jsx-runtime/package.json
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "react": "^18"
   },
   "devDependencies": {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -48,11 +48,11 @@
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "react": ">=18"
   },
   "devDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "@theme-ui/test-utils": "workspace:^",
     "@types/react": "^18.2.12",
     "react": "^18.1.0"

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -35,7 +35,7 @@
     "access": "public"
   },
   "dependencies": {
-    "csstype": "^3.0.10"
+    "csstype": "3.0.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1"

diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts
@@ -728,8 +728,11 @@ test('supports vendor properties', () => {
 test('omits empty values', () => {
   expect(
     css({
+      // @ts-ignore TS2873
       color: false && 'blue',
+      // @ts-ignore TS2873
       backgroundColor: undefined && 'whitesmoke',
+      // @ts-ignore TS2873
       textDecoration: null && 'underline',
       border: '1px solid black',
     })(theme)

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -18,9 +18,9 @@
     "icon": "npx repng src/components/logo.js -d static -f icon.png -w=32 -h=32 --props='{\"size\":32}'"
   },
   "dependencies": {
-    "unist-util-visit-2": "npm:unist-util-visit@^2.0.2",
+    "unist-util-visit-2": "npm:unist-util-visit@2.0.3",
     "@babel/helper-string-parser": "^7.22.5",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.13.3",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@theme-ui/color": "workspace:^",
@@ -58,7 +58,7 @@
     "react-dom": "^18",
     "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
-    "remark-gfm-1": "npm:remark-gfm@^1.0.0",
+    "remark-gfm-1": "npm:remark-gfm@1.0.0",
     "remark-slug": "^6",
     "stringify-object": "^3",
     "theme-ui": "workspace:^",

diff --git a/packages/docs/src/components/sidenav.tsx b/packages/docs/src/components/sidenav.tsx
@@ -123,7 +123,9 @@ export const AccordionButton = (props: {
   onClick: EventHandler<MouseEvent<HTMLButtonElement>>
 }) => {
   const transform = props.open ? 'rotate(-180 8 8)' : 'rotate(0 8 8)'
-  const disabled = props.pathname ? props.pathname.includes(props.href) : false
+  const disabled = props.pathname
+    ? props.href.startsWith(props.pathname)
+    : false
 
   return (
     <button