Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix utility props value type about override the Theme interface #345

Closed
wants to merge 13 commits into from
Closed

fix utility props value type about override the Theme interface #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7a430a9
fix ThemeNamespaceValue type
strozw Jan 11, 2022
1dbec76
fix `index.test.ts` type warning
strozw Jan 11, 2022
def25d8
add `@types/react-dom`
strozw Jan 11, 2022
7aaa6d3
update `packages/styled-components` tests
strozw Jan 11, 2022
e0942c5
update `packages/emotion` tests
strozw Jan 11, 2022
ecd00c2
remove unnecessary comment
strozw Jan 12, 2022
2fad6a9
update typescript document for emotion
strozw Jan 12, 2022
038f3bc
Revert "fix ThemeNamespaceValue type"
strozw Jan 17, 2022
57d1abf
update package-lock.json
strozw Jan 17, 2022
ddf9537
Update SystemProps to able to use values not defined in the theme wit…
strozw Jan 17, 2022
09ea4eb
Fixed `ThemeGetter` type to match the implementation of `themeGetter`
strozw Jan 17, 2022
b46291d
Fixed `ColProps` and, `col` props implementation when `false` are pa…
strozw Jan 17, 2022
5375b4c
Fixed `RowProps` and, `row` props implementation when `false` are pa…
strozw Jan 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.2",
"@types/react": "^17.0.33",
"@types/react-dom": "^17.0.11",
"@types/styled-components": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^4.32.0",
"@typescript-eslint/parser": "^4.32.0",
Expand Down
33 changes: 7 additions & 26 deletions packages/emotion/src/colorModes.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,18 @@
/* eslint-env browser */
import * as React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render, cleanup } from '@testing-library/react'
import { th } from '@xstyled/system'
import { x, ThemeProvider, ColorModeProvider } from '.'
import { cleanup } from '@testing-library/react'
import { x, ColorModeProvider } from '.'
import { renderWithTheme } from './theme.test'

afterEach(cleanup)

describe('colorModes', () => {
it('supports color modes', () => {
const theme = {
defaultColorModeName: 'dark',
colors: {
black: '#000',
white: '#fff',
red: '#ff0000',
danger: th.color('red'),
text: th.color('black'),
modes: {
dark: {
red: '#ff4400',
text: th.color('white'),
},
},
},
}

render(
<ThemeProvider theme={theme}>
<ColorModeProvider>
<x.div color="text">Hello</x.div>
</ColorModeProvider>
</ThemeProvider>,
renderWithTheme(
<ColorModeProvider>
<x.div color="text">Hello</x.div>
</ColorModeProvider>
)
expect(document.body).toHaveClass('xstyled-color-mode-dark')
})
Expand Down
19 changes: 6 additions & 13 deletions packages/emotion/src/createGlobalStyle.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import * as React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render, cleanup } from '@testing-library/react'
import { createGlobalStyle, ThemeProvider } from '.'
import { cleanup } from '@testing-library/react'
import { createGlobalStyle } from '.'
import { renderWithTheme } from './theme.test'

afterEach(cleanup)

const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
return (
<ThemeProvider theme={{ space: { 1: 4, 2: 8 } }}>{children}</ThemeProvider>
)
}

describe('#createGlobalStyle', () => {
it('injects global styles', () => {
const GlobalStyle = createGlobalStyle`
.margin {
margin: 2;
}
`
const { container } = render(
const { container } = renderWithTheme(
<>
<SpaceTheme>
<GlobalStyle />
<div className="margin" />
</SpaceTheme>
<GlobalStyle />
<div className="margin" />
</>,
)
expect(container.firstChild).toHaveStyle(`
Expand Down
51 changes: 10 additions & 41 deletions packages/emotion/src/css.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import * as React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render, cleanup } from '@testing-library/react'
import { cleanup } from '@testing-library/react'
import styled from '@emotion/styled'
import { css, ThemeProvider } from '.'
import { css } from '.'
import { renderWithTheme } from './theme.test'

afterEach(cleanup)

describe('#css', () => {
const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
return (
<ThemeProvider theme={{ space: { 1: 4, 2: 8 } }}>
{children}
</ThemeProvider>
)
}

it('transforms rules', () => {
const Dummy = styled.div`
${css`
Expand All @@ -23,11 +16,7 @@ describe('#css', () => {
margin-top: 2px;
`}
`
const { container } = render(
<SpaceTheme>
<Dummy />
</SpaceTheme>,
)
const { container } = renderWithTheme(<Dummy />)
expect(container.firstChild).toHaveStyle(`
margin: 2px 8px 8px 8px;
padding: 4px;
Expand All @@ -40,11 +29,7 @@ describe('#css', () => {
margin: 1 2;
`}
`
const { container } = render(
<SpaceTheme>
<Dummy />
</SpaceTheme>,
)
const { container } = renderWithTheme(<Dummy />)
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})

Expand All @@ -55,11 +40,7 @@ describe('#css', () => {
margin: 1 ${two};
`}
`
const { container } = render(
<SpaceTheme>
<Dummy />
</SpaceTheme>,
)
const { container } = renderWithTheme(<Dummy />)
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})

Expand All @@ -69,25 +50,17 @@ describe('#css', () => {
margin: '1 2',
})}
`
const { container } = render(
<SpaceTheme>
<Dummy />
</SpaceTheme>,
)
const { container } = renderWithTheme(<Dummy />)
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})

it('accepts function', () => {
const Dummy = styled.div`
${css((p) => ({
${css((_p) => ({
margin: '1 2',
}))}
`
const { container } = render(
<SpaceTheme>
<Dummy />
</SpaceTheme>,
)
const { container } = renderWithTheme(<Dummy />)
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})

Expand All @@ -99,11 +72,7 @@ describe('#css', () => {
styles: 'margin: 1 2;label:x;',
})}
`
const { container } = render(
<SpaceTheme>
<Dummy />
</SpaceTheme>,
)
const { container } = renderWithTheme(<Dummy />)
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})
})
55 changes: 23 additions & 32 deletions packages/emotion/src/cx.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,11 @@
import { jsx } from '@emotion/react'
import '@testing-library/jest-dom/extend-expect'
import { render, cleanup } from '@testing-library/react'
import { css, cx, ThemeProvider } from '.'
import { css, cx } from '.'
import { renderWithTheme } from './theme.test'

afterEach(cleanup)

const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
return (
<ThemeProvider theme={{ space: { 1: 4, 2: 8 } }}>{children}</ThemeProvider>
)
}

describe('#cx', () => {
it('throws with string value', () => {
// @ts-expect-error Strings are not allowed
Expand All @@ -21,18 +16,16 @@ describe('#cx', () => {
})

it('handles css values', () => {
const { container } = render(
<SpaceTheme>
<div
css={cx(
css`
margin: 2;
padding: 1;
margin-top: 2px;
`,
)}
/>
</SpaceTheme>,
const { container } = renderWithTheme(
<div
css={cx(
css`
margin: 2;
padding: 1;
margin-top: 2px;
`,
)}
/>
)
expect(container.firstChild).toHaveStyle(`
margin: 2px 8px 8px 8px;
Expand All @@ -41,19 +34,17 @@ describe('#cx', () => {
})

it('handles multiple css values', () => {
const { container } = render(
<SpaceTheme>
<div
css={cx([
css`
margin: 2;
`,
css`
padding: 1;
`,
])}
/>
</SpaceTheme>,
const { container } = renderWithTheme(
<div
css={cx([
css`
margin: 2;
`,
css`
padding: 1;
`,
])}
/>
)
expect(container.firstChild).toHaveStyle(`
margin: 8px;
Expand Down
Loading