Test That Custom Properties Are Not Compiled (#9984)

* Fix Browserslist Loading

* Fix Browserslist Integration for CSS

* Add missing file

* Test That Custom Properties Are Not Compiled

* Disable custom properties transform

packages/next/build/webpack/config/blocks/css/plugins.ts

@@ -95,6 +95,9 @@ function getDefaultPlugins(
         // Enable CSS features that have shipped to the
         // web platform, i.e. in 2+ browsers unflagged.
         stage: 3,
+        features: {
+          'custom-properties': false,
+        },
       },
     ],
   ]

test/integration/css-features/fixtures/cp-ie-11/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "ie 11"
+  ]
+}

test/integration/css-features/fixtures/cp-ie-11/pages/_app.js

@@ -0,0 +1,12 @@
+import App from 'next/app'
+import React from 'react'
+import './styles.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-features/fixtures/cp-ie-11/pages/index.js

@@ -0,0 +1,3 @@
+export default function() {
+  return <div />
+}

test/integration/css-features/fixtures/cp-ie-11/pages/styles.css

@@ -0,0 +1,7 @@
+:root {
+  --color: red;
+}
+
+h1 {
+  color: var(--color);
+}

test/integration/css-features/fixtures/cp-modern/package.json

@@ -0,0 +1,5 @@
+{
+  "browserslist": [
+    "chrome 78"
+  ]
+}

test/integration/css-features/fixtures/cp-modern/pages/_app.js

@@ -0,0 +1,12 @@
+import App from 'next/app'
+import React from 'react'
+import './styles.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-features/fixtures/cp-modern/pages/index.js

@@ -0,0 +1,3 @@
+export default function() {
+  return <div />
+}

test/integration/css-features/fixtures/cp-modern/pages/styles.css

@@ -0,0 +1,7 @@
+:root {
+  --color: red;
+}
+
+h1 {
+  color: var(--color);
+}

test/integration/css-features/test/index.test.js

@@ -53,3 +53,49 @@ describe('Browserslist: New', () => {
     )
   })
 })
+
+describe('Custom Properties: Pass-Through IE11', () => {
+  const appDir = join(fixturesDir, 'cp-ie-11')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    await nextBuild(appDir)
+  })
+
+  it(`should've emitted a single CSS file`, async () => {
+    const cssFolder = join(appDir, '.next/static/css')
+
+    const files = await readdir(cssFolder)
+    const cssFiles = files.filter(f => /\.css$/.test(f))
+
+    expect(cssFiles.length).toBe(1)
+    const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+
+    expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
+      `":root{--color:red}h1{color:var(--color)}"`
+    )
+  })
+})
+
+describe('Custom Properties: Pass-Through Modern', () => {
+  const appDir = join(fixturesDir, 'cp-modern')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    await nextBuild(appDir)
+  })
+
+  it(`should've emitted a single CSS file`, async () => {
+    const cssFolder = join(appDir, '.next/static/css')
+
+    const files = await readdir(cssFolder)
+    const cssFiles = files.filter(f => /\.css$/.test(f))
+
+    expect(cssFiles.length).toBe(1)
+    const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+
+    expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
+      `":root{--color:red}h1{color:var(--color)}"`
+    )
+  })
+})