framework/test/postcss.test.js at f26774b60560eebd89aa8ae55242aa02d4fe7470 · maizzle/framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import { describe, expect, test } from 'vitest'
import { process as posthtml } from '../src/posthtml/index.js'

const cleanString = (str) => str.replace(/\s+/g, ' ').trim()

describe.concurrent('PostCSS', () => {
  test('resolveProps', async () => {
    // Default: resolves CSS variables
    posthtml(`
      <style>
        :root {
          --color: red;
        }
        .foo {
          color: var(--color);
        }
      </style>
      <p class="foo">test</p>
    `).then(({ html }) => {
      expect(cleanString(html)).toBe(`<style> .foo { color: red; } </style> <p class="foo">test</p>`)
    })

    // Passing options
    posthtml(`
      <style>
        .foo {
          font-weight: var(--font-weight);
        }
      </style>
      <p class="foo">test</p>
    `, {
      css: {
        resolveProps: {
          variables: {
            '--font-weight': 'bold',
          }
        },
      }
    }).then(({ html }) => {
      expect(cleanString(html)).toBe(`<style>.foo { font-weight: bold; } </style> <p class="foo">test</p>`)
    })

    // Disabling `resolveProps`
    posthtml(`
      <style>
        :root {
          --color: red;
        }
        .foo {
          color: var(--color);
        }
      </style>
      <p class="foo">test</p>
    `, {
      css: {
        resolveProps: false,
      }
    }).then(({ html }) => {
      expect(cleanString(html)).toBe(`<style> :root { --color: red; } .foo { color: var(--color); } </style> <p class="foo">test</p>`)
    })
  })

  test('resolveCalc', async () => {
    const html = `
      <style>
        .foo {
          width: calc(16px * 1.5569);
        }
      </style>
    `

    posthtml(html)
      .then(({ html }) => {
        expect(cleanString(html)).toBe('<style> .foo { width: 24.91px; } </style>')
      })

    posthtml(html, {
      css: {
        resolveCalc: {
          precision: 1,
        },
      }
    }).then(({ html }) => {
      expect(cleanString(html)).toBe('<style> .foo { width: 24.9px; } </style>')
    })
  })

  test('functional color notation', async () => {
    const html = `
      <style>
        .bg-black\/80 {
          background-color: rgb(0 0 1 / 0.8);
        }
        .text-white\/20 {
          color: rgb(255 255 254 / 0.2);
        }
      </style>
    `

    posthtml(html)
      .then(({ html }) => {
        expect(cleanString(html))
          .toBe(
            cleanString(`
              <style>
                .bg-black/80 { background-color: rgba(0, 0, 1, 0.8); }
                .text-white/20 { color: rgba(255, 255, 254, 0.2); }
              </style>`
            )
          )
      })
  })
})