Skip to content

Commit f9fbb7d

Browse files
hasparushasparus
authored
Merge pull request #2519 from system-ui/fix-root-styles
fix(color-modes): make useRootStyles=false work with useCustomProperties
2 parents 0e356f5 + e4e2b70 commit f9fbb7d

File tree

32 files changed

+16434
-11898
lines changed

32 files changed

+16434
-11898
lines changed

‎.github/workflows/ci.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717

1818
- uses: pnpm/action-setup@v2
1919
with:
20-
version: 8
20+
version: 9.12.1
2121

2222
- uses: actions/setup-node@v3
2323
with:
@@ -81,7 +81,7 @@ jobs:
8181

8282
- uses: pnpm/action-setup@v2
8383
with:
84-
version: 8
84+
version: 9.12.1
8585

8686
- uses: actions/setup-node@v3
8787
with:
@@ -90,7 +90,7 @@ jobs:
9090
registry-url: 'https://registry.npmjs.org'
9191

9292
- name: Install
93-
run: pnpm install --no-optional --no-frozen-lockfile
93+
run: pnpm install --no-optional
9494

9595
- name: Queue in release turnstile
9696
id: turnstyle

‎.github/workflows/e2e.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ jobs:
2323

2424
- uses: pnpm/action-setup@v2
2525
with:
26-
version: 7
26+
version: 9.12.1
2727

2828
- uses: actions/setup-node@v2
2929
with:

‎auto.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const conventionalCommitsOptions: ConventionalCommitsOptions = {
1313
defaultReleaseType: 'none',
1414
}
1515

16-
const allContributorsOptions: IAllContributorsPluginOptions = {
16+
const _allContributorsOptions: IAllContributorsPluginOptions = {
1717
exclude: [
1818
'dependabot',
1919
'dependabot[bot]',
@@ -61,7 +61,7 @@ export default function config(): AutoRc {
6161
['conventional-commits', conventionalCommitsOptions],
6262
'first-time-contributor',
6363
'released',
64-
['all-contributors', allContributorsOptions],
64+
// ['all-contributors', allContributorsOptions],
6565
['omit-commits', omitCommitsOptions],
6666
// 'magic-zero',
6767
],

‎examples/gatsby-plugin/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"build": "gatsby build"
1313
},
1414
"dependencies": {
15-
"@emotion/react": "^11.11.1",
15+
"@emotion/react": "^11.13.3",
1616
"gatsby": "^5",
1717
"gatsby-plugin-mdx": "^5",
1818
"gatsby-plugin-theme-ui": "workspace:^",

‎examples/gatsby/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"build": "gatsby build"
1313
},
1414
"dependencies": {
15-
"@emotion/react": "^11.11.1",
15+
"@emotion/react": "^11.13.3",
1616
"@mdx-js/react": "^2.3.0",
1717
"@theme-ui/mdx": "workspace:^",
1818
"gatsby": "^5",

‎examples/next/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"typecheck": "tsc --noEmit"
1313
},
1414
"dependencies": {
15-
"@emotion/react": "^11.11.1",
15+
"@emotion/react": "^11.13.3",
1616
"@mdx-js/loader": "^2.3.0",
1717
"@mdx-js/react": "^2.3.0",
1818
"@next/mdx": "^14.0.4",

‎package.json

+23-22
Original file line numberDiff line numberDiff line change
@@ -63,56 +63,57 @@
6363
}
6464
},
6565
"dependencies": {
66-
"@auto-it/all-contributors": "^10.46.0",
67-
"@auto-it/conventional-commits": "^10.46.0",
68-
"@auto-it/core": "^10.46.0",
69-
"@auto-it/first-time-contributor": "^10.46.0",
70-
"@auto-it/magic-zero": "^10.46.0",
71-
"@auto-it/npm": "^10.46.0",
72-
"@auto-it/omit-commits": "^11.0.4",
73-
"@auto-it/released": "^10.46.0",
66+
"@auto-it/all-contributors": "^11.2.1",
67+
"@auto-it/conventional-commits": "^11.2.1",
68+
"@auto-it/core": "^11.2.1",
69+
"@auto-it/first-time-contributor": "^11.2.1",
70+
"@auto-it/magic-zero": "^11.2.1",
71+
"@auto-it/npm": "^11.2.1",
72+
"@auto-it/omit-commits": "^11.2.1",
73+
"@auto-it/released": "^11.2.1",
7474
"@babel/cli": "^7.22.5",
7575
"@babel/helper-string-parser": "^7.22.5",
7676
"@babel/helper-validator-identifier": "^7.22.5",
7777
"@babel/plugin-transform-runtime": "^7.24.3",
7878
"@babel/preset-env": "^7.22.5",
7979
"@babel/preset-react": "^7.22.5",
8080
"@babel/preset-typescript": "^7.22.5",
81-
"@babel/runtime": "^7.22.5",
81+
"@babel/runtime": "^7.25.7",
8282
"@codechecks/build-size-watcher": "^0.1.0",
8383
"@codechecks/client": "0.1.12",
84-
"@emotion/jest": "^11.11.0",
85-
"@jest/types": "^29.5.0",
86-
"@preconstruct/cli": "^2.7.0",
84+
"@emotion/jest": "^11.13.0",
85+
"@jest/types": "^29.6.3",
86+
"@preconstruct/cli": "^2.8.9",
8787
"@testing-library/react": "^14.2.1",
8888
"@types/eslint": "8.56.2",
89-
"@types/jest": "^29.5.2",
89+
"@types/jest": "^29.5.13",
9090
"@types/node": "^20.3.1",
9191
"@types/react-dom": "^18.2.5",
9292
"@types/react-test-renderer": "^18.3.0",
9393
"@types/semver": "^7.5.0",
9494
"@typescript-eslint/eslint-plugin": "^5.59.11",
9595
"@typescript-eslint/parser": "^5.59.11",
96-
"auto": "^11.0.4",
96+
"auto": "^11.2.1",
9797
"babel-jest": "^29.7.0",
98-
"babel-preset-gatsby": "^3.10.0",
98+
"babel-preset-gatsby": "^3.13.2",
9999
"cross-env": "^7.0.3",
100100
"egzek": "^1.2.0",
101101
"eslint": "^8.56.0",
102102
"eslint-config-react-app": "^7.0.1",
103-
"jest": "^29.5.0",
104-
"jest-canvas-mock": "^2.5.1",
105-
"jest-environment-jsdom": "^29.5.0",
103+
"jest": "^29.7.0",
104+
"jest-canvas-mock": "^2.5.2",
105+
"jest-environment-jsdom": "^29.7.0",
106106
"jest-mock-console": "^2.0.0",
107107
"jest-ts-webcompat-resolver": "^1.0.0",
108108
"postinstall-postinstall": "^2.1.0",
109109
"prettier": "^2.8.8",
110110
"react-test-renderer": "^18.3.1",
111111
"rimraf": "^5.0.1",
112-
"semver": "^7.5.1",
113-
"ts-jest": "^29.1.0",
112+
"semver": "^7.6.3",
113+
"ts-jest": "^29.2.5",
114114
"ts-toolbelt": "^9.6.0",
115115
"typecov": "^0.2.3",
116-
"typescript": "^5"
117-
}
116+
"typescript": "^5.6.3"
117+
},
118+
"packageManager": "[email protected]+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
118119
}

‎packages/color-modes/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
"deepmerge": "^4.2.2"
2020
},
2121
"peerDependencies": {
22-
"@emotion/react": "^11.11.1",
22+
"@emotion/react": "^11.13.3",
2323
"react": ">=18"
2424
},
2525
"devDependencies": {
26-
"@emotion/react": "^11.11.1",
26+
"@emotion/react": "^11.13.3",
2727
"@theme-ui/test-utils": "workspace:^",
2828
"@types/react": "^18.2.12",
2929
"react": "^18.1.0"

‎packages/color-modes/src/custom-properties.ts

+37-28
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { ColorMode, ColorModesScale, css, Theme } from '@theme-ui/css'
1+
import {
2+
ColorMode,
3+
ColorModesScale,
4+
css,
5+
Theme,
6+
ThemeUICSSObject,
7+
} from '@theme-ui/css'
28

39
const toVarName = (key: string) => `--theme-ui-${key.replace('-__default', '')}`
410
const toVarValue = (key: string) => `var(${toVarName(key)})`
@@ -75,40 +81,43 @@ export const __createColorStyles = (theme: Theme = {}) => {
7581
} = theme.config || theme || {}
7682
const colors = theme.rawColors || theme.colors
7783

78-
if (!colors || useRootStyles === false) return {}
79-
if (useCustomProperties === false) {
80-
return css({
81-
color: 'text',
82-
bg: 'background',
83-
})(theme)
84-
}
85-
86-
const modes = colors.modes || {}
84+
if (!colors) return {}
8785

88-
const styles = __createColorProperties(colors, modes)
86+
const res: ThemeUICSSObject = {}
8987

90-
if (printColorModeName) {
91-
let printMode = modes[printColorModeName]
92-
if (!printMode && printColorModeName === initialColorModeName)
93-
printMode = colors
94-
95-
if (printMode) {
96-
styles['@media print'] = __objectToVars('colors', printMode)
88+
if (useRootStyles !== false) {
89+
if (useCustomProperties === false) {
90+
res.color = 'text'
91+
res.bg = 'background'
9792
} else {
98-
console.error(
99-
`Theme UI \`printColorModeName\` was not found in colors scale`,
100-
{ colors, printColorModeName }
101-
)
93+
res.color = toVarValue('colors-text')
94+
res.bg = toVarValue('colors-background')
10295
}
10396
}
10497

105-
const colorToVarValue = (color: string) => toVarValue(`colors-${color}`)
98+
if (useCustomProperties !== false) {
99+
const modes = colors.modes || {}
100+
const styles = __createColorProperties(colors, modes)
101+
102+
if (printColorModeName) {
103+
let printMode = modes[printColorModeName]
104+
if (!printMode && printColorModeName === initialColorModeName)
105+
printMode = colors
106+
107+
if (printMode) {
108+
styles['@media print'] = __objectToVars('colors', printMode)
109+
} else {
110+
console.error(
111+
`Theme UI \`printColorModeName\` was not found in colors scale`,
112+
{ colors, printColorModeName }
113+
)
114+
}
115+
}
116+
117+
Object.assign(res, styles)
118+
}
106119

107-
return css({
108-
...styles,
109-
color: colorToVarValue('text'),
110-
bg: colorToVarValue('background'),
111-
})(theme)
120+
return css(res)(theme)
112121
}
113122

114123
/**

‎packages/color-modes/test/index.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -903,12 +903,11 @@ test('colorMode accepts function from previous state to new one', () => {
903903
test('warns when localStorage is disabled', () => {
904904
const restoreConsole = mockConsole()
905905

906-
const localStorage = window.localStorage
907-
Object.defineProperty(window, 'localStorage', {
908-
get: jest.fn(() => {
906+
const spy = jest
907+
.spyOn(Storage.prototype, 'getItem')
908+
.mockImplementation(() => {
909909
throw new Error('SecurityError: The operation is insecure.')
910-
}),
911-
})
910+
})
912911

913912
let mode = ''
914913
const Consumer = () => {
@@ -927,8 +926,6 @@ test('warns when localStorage is disabled', () => {
927926

928927
expect(mode).toBe(undefined)
929928

930-
Object.defineProperty(window, 'localStorage', { value: localStorage })
931-
932929
expect((console.warn as jest.Mock).mock.calls[0]).toMatchInlineSnapshot(`
933930
[
934931
"localStorage is disabled and color mode might not work as expected.",
@@ -937,6 +934,7 @@ test('warns when localStorage is disabled', () => {
937934
]
938935
`)
939936

937+
spy.mockClear()
940938
restoreConsole()
941939
})
942940

‎packages/components/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
"@types/styled-system": "^5.1.13"
1616
},
1717
"peerDependencies": {
18-
"@emotion/react": "^11.11.1",
18+
"@emotion/react": "^11.13.3",
1919
"@theme-ui/theme-provider": "workspace:^",
2020
"react": ">=18"
2121
},
2222
"devDependencies": {
23-
"@emotion/react": "^11.11.1",
23+
"@emotion/react": "^11.13.3",
2424
"@theme-ui/test-utils": "workspace:^",
2525
"@types/react": "^18.2.12",
2626
"react": "^18.1.0"

‎packages/core/jsx-dev-runtime/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"sideEffects": false,
1111
"dependencies": {
12-
"@emotion/react": "^11.11.1",
12+
"@emotion/react": "^11.13.3",
1313
"react": "^18"
1414
},
1515
"devDependencies": {

‎packages/core/jsx-runtime/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"sideEffects": false,
1111
"dependencies": {
12-
"@emotion/react": "^11.11.1",
12+
"@emotion/react": "^11.13.3",
1313
"react": "^18"
1414
},
1515
"devDependencies": {

‎packages/core/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@
4848
"deepmerge": "^4.2.2"
4949
},
5050
"peerDependencies": {
51-
"@emotion/react": "^11.11.1",
51+
"@emotion/react": "^11.13.3",
5252
"react": ">=18"
5353
},
5454
"devDependencies": {
55-
"@emotion/react": "^11.11.1",
55+
"@emotion/react": "^11.13.3",
5656
"@theme-ui/test-utils": "workspace:^",
5757
"@types/react": "^18.2.12",
5858
"react": "^18.1.0"

‎packages/css/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"access": "public"
3636
},
3737
"dependencies": {
38-
"csstype": "^3.0.10"
38+
"csstype": "3.0.10"
3939
},
4040
"peerDependencies": {
4141
"@emotion/react": "^11.11.1"

‎packages/css/test/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -728,8 +728,11 @@ test('supports vendor properties', () => {
728728
test('omits empty values', () => {
729729
expect(
730730
css({
731+
// @ts-ignore TS2873
731732
color: false && 'blue',
733+
// @ts-ignore TS2873
732734
backgroundColor: undefined && 'whitesmoke',
735+
// @ts-ignore TS2873
733736
textDecoration: null && 'underline',
734737
border: '1px solid black',
735738
})(theme)

‎packages/docs/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
"icon": "npx repng src/components/logo.js -d static -f icon.png -w=32 -h=32 --props='{\"size\":32}'"
1919
},
2020
"dependencies": {
21-
"unist-util-visit-2": "npm:unist-util-visit@^2.0.2",
21+
"unist-util-visit-2": "npm:[email protected].3",
2222
"@babel/helper-string-parser": "^7.22.5",
23-
"@emotion/react": "^11.11.1",
23+
"@emotion/react": "^11.13.3",
2424
"@mdx-js/loader": "^2.3.0",
2525
"@mdx-js/react": "^2.3.0",
2626
"@theme-ui/color": "workspace:^",
@@ -58,7 +58,7 @@
5858
"react-dom": "^18",
5959
"react-helmet": "^6.1.0",
6060
"react-live": "^2.1.2",
61-
"remark-gfm-1": "npm:remark-gfm@^1.0.0",
61+
"remark-gfm-1": "npm:[email protected]",
6262
"remark-slug": "^6",
6363
"stringify-object": "^3",
6464
"theme-ui": "workspace:^",

‎packages/docs/src/components/sidenav.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,9 @@ export const AccordionButton = (props: {
123123
onClick: EventHandler<MouseEvent<HTMLButtonElement>>
124124
}) => {
125125
const transform = props.open ? 'rotate(-180 8 8)' : 'rotate(0 8 8)'
126-
const disabled = props.pathname ? props.pathname.includes(props.href) : false
126+
const disabled = props.pathname
127+
? props.href.startsWith(props.pathname)
128+
: false
127129

128130
return (
129131
<button

0 commit comments

Comments
 (0)