123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- import parseObjectStyles from '../src/util/parseObjectStyles'
- import postcss from 'postcss'
- function css(nodes) {
- return postcss.root({ nodes }).toString()
- }
- test('it parses simple single class definitions', () => {
- const result = parseObjectStyles({
- '.foobar': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- },
- })
- expect(css(result)).toMatchCss(`
- .foobar {
- background-color: red;
- color: white;
- padding: 1rem
- }
- `)
- })
- test('it parses multiple class definitions', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- },
- '.bar': {
- width: '200px',
- height: '100px',
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem
- }
- .bar {
- width: 200px;
- height: 100px
- }
- `)
- })
- test('it parses nested pseudo-selectors', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- ':hover': {
- backgroundColor: 'orange',
- },
- ':focus': {
- backgroundColor: 'blue',
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem;
- }
- .foo:hover {
- background-color: orange;
- }
- .foo:focus {
- background-color: blue;
- }
- `)
- })
- test('it parses top-level media queries', () => {
- const result = parseObjectStyles({
- '@media (min-width: 200px)': {
- '.foo': {
- backgroundColor: 'orange',
- },
- },
- })
- expect(css(result)).toMatchCss(`
- @media (min-width: 200px) {
- .foo {
- background-color: orange
- }
- }
- `)
- })
- test('it parses nested media queries', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- '@media (min-width: 200px)': {
- backgroundColor: 'orange',
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem;
- }
- @media (min-width: 200px) {
- .foo {
- background-color: orange;
- }
- }
- `)
- })
- test('it bubbles nested screen rules', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- '@screen sm': {
- backgroundColor: 'orange',
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem;
- }
- @screen sm {
- .foo {
- background-color: orange;
- }
- }
- `)
- })
- test('it parses pseudo-selectors in nested media queries', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- ':hover': {
- '@media (min-width: 200px)': {
- backgroundColor: 'orange',
- },
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem;
- }
- @media (min-width: 200px) {
- .foo:hover {
- background-color: orange;
- }
- }
- `)
- })
- test('it parses descendant selectors', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- '.bar': {
- backgroundColor: 'orange',
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem;
- }
- .foo .bar {
- background-color: orange;
- }
- `)
- })
- test('it parses nested multi-class selectors', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- '&.bar': {
- backgroundColor: 'orange',
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem;
- }
- .foo.bar {
- background-color: orange;
- }
- `)
- })
- test('it parses nested multi-class selectors in media queries', () => {
- const result = parseObjectStyles({
- '.foo': {
- backgroundColor: 'red',
- color: 'white',
- padding: '1rem',
- '@media (min-width: 200px)': {
- '&.bar': {
- backgroundColor: 'orange',
- },
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: red;
- color: white;
- padding: 1rem;
- }
- @media (min-width: 200px) {
- .foo.bar {
- background-color: orange;
- }
- }
- `)
- })
- test('it strips empty selectors when nesting', () => {
- const result = parseObjectStyles({
- '.foo': {
- '.bar': {
- backgroundColor: 'orange',
- },
- },
- })
- expect(css(result)).toMatchCss(`
- .foo .bar {
- background-color: orange
- }
- `)
- })
- test('it can parse an array of styles', () => {
- const result = parseObjectStyles([
- {
- '.foo': {
- backgroundColor: 'orange',
- },
- },
- {
- '.bar': {
- backgroundColor: 'red',
- },
- },
- {
- '.foo': {
- backgroundColor: 'blue',
- },
- },
- ])
- expect(css(result)).toMatchCss(`
- .foo {
- background-color: orange
- }
- .bar {
- background-color: red
- }
- .foo {
- background-color: blue
- }
- `)
- })
- test('custom properties preserve their case', () => {
- const result = parseObjectStyles({
- ':root': {
- '--colors-aColor-500': '0',
- },
- })
- expect(css(result)).toMatchCss(`
- :root {
- --colors-aColor-500: 0;
- }
- `)
- })
|