test(unit): add cases for cssnano simple (#46862)

Continues from #46380. The PR migrates the unit test cases from the original repo into the Next.js repo.

package.json

@@ -180,6 +180,7 @@
     "pixrem": "5.0.0",
     "playwright-chromium": "1.28.1",
     "plop": "3.0.5",
+    "postcss": "8.4.14",
     "postcss-nested": "4.2.1",
     "postcss-pseudoelements": "5.0.0",
     "postcss-short-size": "4.0.0",

test/unit/cssnano-simple/cssnano-preset-simple/issue-1.test.ts

@@ -0,0 +1,8 @@
+import cssnanoPresetSimple from 'next/src/bundles/cssnano-simple/cssnano-preset-simple'
+
+// https://github.com/Timer/cssnano-preset-simple/issues/1
+describe('https://github.com/Timer/cssnano-preset-simple/issues/1', () => {
+  test('evaluates without error', () => {
+    cssnanoPresetSimple()
+  })
+})

test/unit/cssnano-simple/cssnano-preset-simple/plugin-config.test.ts

@@ -0,0 +1,40 @@
+import postcss from 'postcss'
+
+import mod from './plugin'
+import css from '../noop-template'
+
+describe('accepts plugin configuration', () => {
+  test('should not remove all comments', async () => {
+    const input = css`
+      p {
+        /*! heading */
+        color: yellow;
+      }
+    `
+
+    const res = await postcss([mod({ discardComments: {} })]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).not.toBe('p{color:#ff0}')
+  })
+
+  test('should remove all comments', async () => {
+    const input = css`
+      p {
+        /*! heading */
+        color: yellow;
+      }
+    `
+
+    const res = await postcss([
+      mod({ discardComments: { removeAll: true } }),
+    ]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).toBe('p{color:#ff0}')
+  })
+})

test/unit/cssnano-simple/cssnano-preset-simple/plugin.ts

@@ -0,0 +1,31 @@
+// https://github.com/Timer/cssnano-preset-simple/blob/master/test/plugin.js
+import postcss from 'postcss'
+import type { PluginCreator } from 'postcss'
+
+// Since the cssnano-preset-simple.js will be bundled into cssnano-simple
+// during pre-compilation, we need to test against the source file directly
+import cssnanoPresetSimple from 'next/src/bundles/cssnano-simple/cssnano-preset-simple'
+
+const cssnanoPlugin = (options = {}) => {
+  const plugins: any[] = []
+  const nanoPlugins = cssnanoPresetSimple(options).plugins
+  for (const nanoPlugin of nanoPlugins) {
+    if (Array.isArray(nanoPlugin)) {
+      let [processor, opts] = nanoPlugin
+      processor = processor.default || processor
+      if (
+        typeof opts === 'undefined' ||
+        (typeof opts === 'object' && !opts.exclude) ||
+        (typeof opts === 'boolean' && opts === true)
+      ) {
+        plugins.push(processor(opts))
+      }
+    } else {
+      plugins.push(nanoPlugin)
+    }
+  }
+  return postcss(plugins)
+}
+
+cssnanoPlugin.postcss = true
+export default cssnanoPlugin as PluginCreator<any>

test/unit/cssnano-simple/cssnano-preset-simple/property-sorting.test.ts

@@ -0,0 +1,24 @@
+import postcss from 'postcss'
+import mod from './plugin'
+import css from '../noop-template'
+
+describe('property sorting', () => {
+  test('should result in correct border width', async () => {
+    const input = css`
+      p {
+        border: 1px solid var(--test);
+        border-radius: var(--test);
+        border-width: 0;
+      }
+    `
+
+    const res = await postcss([mod]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).toMatchInlineSnapshot(
+      `"p{border-width:1px;border-radius:var(--test);border:0 solid var(--test)}"`
+    )
+  })
+})

test/unit/cssnano-simple/cssnano-preset-simple/with-escaped-selector.ts

@@ -0,0 +1,19 @@
+import postcss from 'postcss'
+import mod from './plugin'
+
+describe('with escaped selector', () => {
+  test('should not misplace the backslash', async () => {
+    const input = `
+      .foo\\,2 {
+        background: blue;
+      }
+    `
+
+    const res = await postcss([mod]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).toMatchInlineSnapshot(`".foo\\\\,2{background:blue}"`)
+  })
+})

test/unit/cssnano-simple/cssnano-simple/basic.test.ts

@@ -0,0 +1,21 @@
+import postcss from 'postcss'
+
+import mod from 'next/src/bundles/cssnano-simple/index'
+import css from '../noop-template'
+
+describe('basic test', () => {
+  test('should minify css', async () => {
+    const input = css`
+      p {
+        color: yellow;
+      }
+    `
+
+    const res = await postcss([mod()]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).toBe('p{color:#ff0}')
+  })
+})

test/unit/cssnano-simple/cssnano-simple/exclude-all.test.ts

@@ -0,0 +1,71 @@
+import postcss from 'postcss'
+
+import mod from 'next/src/bundles/cssnano-simple/index'
+import css from '../noop-template'
+
+describe('exclude all test', () => {
+  test('should not transform css', async () => {
+    const input = css`
+      p {
+        /* test */
+        color: yellow;
+      }
+    `
+
+    const res = await postcss([mod({ excludeAll: true })]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).toBe(input)
+  })
+
+  test('should strip comments and spaces from css', async () => {
+    const input = css`
+      p {
+        /* test */
+        color: yellow;
+      }
+      .empty {
+      }
+    `
+
+    const res = await postcss([
+      mod({
+        excludeAll: true,
+        discardComments: true,
+        normalizeWhitespace: { exclude: false },
+      }),
+    ]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).toMatchInlineSnapshot(`"p{color:yellow}.empty{}"`)
+  })
+
+  test('should enable rule with empty object', async () => {
+    const input = css`
+      p {
+        /* test */
+        color: yellow;
+      }
+      .empty {
+      }
+    `
+
+    const res = await postcss([
+      mod({
+        excludeAll: true,
+        discardComments: true,
+        normalizeWhitespace: { exclude: false },
+        discardEmpty: {},
+      }),
+    ]).process(input, {
+      from: 'input.css',
+      to: 'output.css',
+    })
+
+    expect(res.css).toMatchInlineSnapshot(`"p{color:yellow}"`)
+  })
+})