Skip to content

Remove styled-components #192

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Remove styled-components #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c73eb71
Remove styled-components
jxnblk Jun 19, 2018
365f107
Merge branch 'master' into remove-styled-components
jxnblk Jun 19, 2018
967e29b
Update snapshots
jxnblk Jun 19, 2018
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
12 changes: 6 additions & 6 deletions core/__tests__/Cartesian.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import styled from 'styled-components'
import styled from 'nano-style'
import { render } from 'react-testing-library'
import { color, space, fontSize } from 'styled-system'

Expand All @@ -12,11 +12,11 @@ const buttonProps = {
backgroundColor: ['pink', 'tomato', 'purple']
}

const Button = styled.a`
${color}
${fontSize}
${space}
`
const Button = styled('a')(
color,
fontSize,
space,
)

test('Cartesian renders all examples', () => {
const { container } = render(<Cartesian {...buttonProps} component={Button} />)
Expand Down
6 changes: 2 additions & 4 deletions core/__tests__/Colorable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import React from 'react'
import styled from 'styled-components'
import styled from 'nano-style'
import { render } from 'react-testing-library'
import { color } from 'styled-system'

import { Colorable } from '../src'

const colors = ['black', 'white', 'pink', 'tomato', 'purple']

const Button = styled.a`
${color}
`
const Button = styled('a')(color)

test('Colorable returns all possible colors', () => {
const { container } = render(
Expand Down
5 changes: 3 additions & 2 deletions core/__tests__/Matrix.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react'
import { render } from 'react-testing-library'
import { Donut } from 'rebass'

import styled from 'nano-style'
import { Matrix } from '../src'

const Donut = styled('progress')(props => ({ color: props.color }))

test('Matrix renders all examples', () => {
const { container } = render(
<Matrix
Expand Down
126 changes: 108 additions & 18 deletions core/__tests__/__snapshots__/Cartesian.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,112 +3,202 @@
exports[`Cartesian renders all examples 1`] = `
<div>
<a
class="sc-bdVaJa ikbxON"
backgroundcolor="pink"
class="nano1kwchfs"
font-size="1"
px="2"
>
Hello, world!
</a>
<style>
.nano1kwchfs{font-size:14px}.nano1kwchfs{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa ikbxON"
backgroundcolor="tomato"
class="nano1kwchfs"
font-size="1"
px="2"
>
Hello, world!
</a>
<style>
.nano1kwchfs{font-size:14px}.nano1kwchfs{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa ikbxON"
backgroundcolor="purple"
class="nano1kwchfs"
font-size="1"
px="2"
>
Hello, world!
</a>
<style>
.nano1kwchfs{font-size:14px}.nano1kwchfs{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa cSmzEW"
backgroundcolor="pink"
class="nanoxw9r4l"
font-size="1"
px="3"
>
Hello, world!
</a>
<style>
.nanoxw9r4l{font-size:14px}.nanoxw9r4l{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa cSmzEW"
backgroundcolor="tomato"
class="nanoxw9r4l"
font-size="1"
px="3"
>
Hello, world!
</a>
<style>
.nanoxw9r4l{font-size:14px}.nanoxw9r4l{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa cSmzEW"
backgroundcolor="purple"
class="nanoxw9r4l"
font-size="1"
px="3"
>
Hello, world!
</a>
<style>
.nanoxw9r4l{font-size:14px}.nanoxw9r4l{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa hFxVwo"
backgroundcolor="pink"
class="nano1cf2zn1"
font-size="2"
px="2"
>
Hello, world!
</a>
<style>
.nano1cf2zn1{font-size:16px}.nano1cf2zn1{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa hFxVwo"
backgroundcolor="tomato"
class="nano1cf2zn1"
font-size="2"
px="2"
>
Hello, world!
</a>
<style>
.nano1cf2zn1{font-size:16px}.nano1cf2zn1{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa hFxVwo"
backgroundcolor="purple"
class="nano1cf2zn1"
font-size="2"
px="2"
>
Hello, world!
</a>
<style>
.nano1cf2zn1{font-size:16px}.nano1cf2zn1{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa hPCeld"
backgroundcolor="pink"
class="nanowuhht0"
font-size="2"
px="3"
>
Hello, world!
</a>
<style>
.nanowuhht0{font-size:16px}.nanowuhht0{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa hPCeld"
backgroundcolor="tomato"
class="nanowuhht0"
font-size="2"
px="3"
>
Hello, world!
</a>
<style>
.nanowuhht0{font-size:16px}.nanowuhht0{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa hPCeld"
backgroundcolor="purple"
class="nanowuhht0"
font-size="2"
px="3"
>
Hello, world!
</a>
<style>
.nanowuhht0{font-size:16px}.nanowuhht0{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa hJuUIp"
backgroundcolor="pink"
class="nanoxcuqpe"
font-size="3"
px="2"
>
Hello, world!
</a>
<style>
.nanoxcuqpe{font-size:20px}.nanoxcuqpe{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa hJuUIp"
backgroundcolor="tomato"
class="nanoxcuqpe"
font-size="3"
px="2"
>
Hello, world!
</a>
<style>
.nanoxcuqpe{font-size:20px}.nanoxcuqpe{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa hJuUIp"
backgroundcolor="purple"
class="nanoxcuqpe"
font-size="3"
px="2"
>
Hello, world!
</a>
<style>
.nanoxcuqpe{font-size:20px}.nanoxcuqpe{padding-left:8px;padding-right:8px}
</style>
<a
class="sc-bdVaJa fGNklA"
backgroundcolor="pink"
class="nano1ahjv9n"
font-size="3"
px="3"
>
Hello, world!
</a>
<style>
.nano1ahjv9n{font-size:20px}.nano1ahjv9n{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa fGNklA"
backgroundcolor="tomato"
class="nano1ahjv9n"
font-size="3"
px="3"
>
Hello, world!
</a>
<style>
.nano1ahjv9n{font-size:20px}.nano1ahjv9n{padding-left:16px;padding-right:16px}
</style>
<a
class="sc-bdVaJa fGNklA"
backgroundcolor="purple"
class="nano1ahjv9n"
font-size="3"
px="3"
>
Hello, world!
</a>
<style>
.nano1ahjv9n{font-size:20px}.nano1ahjv9n{padding-left:16px;padding-right:16px}
</style>
</div>
`;
Loading