Add Failing CSS Test Case (#10590)

* Add Failing CSS Test Case * update tests
vercel · Feb 19, 2020 · c58f45f · c58f45f
1 parent 56a45f0
commit c58f45f
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 10 deletions.
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -119,7 +119,7 @@
     "ora": "3.4.0",
     "path-to-regexp": "6.1.0",
     "pnp-webpack-plugin": "1.5.0",
-    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-flexbugs-fixes": "4.2.0",
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.7.0",
     "prop-types": "15.7.2",

diff --git a/test/integration/css-fixtures/compilation-and-prefixing/styles/global.css b/test/integration/css-fixtures/compilation-and-prefixing/styles/global.css
@@ -3,3 +3,7 @@
     color: green;
   }
 }
+
+.flex-parsing {
+  flex: 0 0 calc(50% - var(--vertical-gutter));
+}
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
@@ -163,7 +163,7 @@ describe('CSS Support', () => {
       expect(
         cssContent.replace(/\/\*.*?\*\//g, '').trim()
       ).toMatchInlineSnapshot(
-        `"@media (min-width:480px) and (max-width:767px){::-webkit-input-placeholder{color:green}::-moz-placeholder{color:green}:-ms-input-placeholder{color:green}::-ms-input-placeholder{color:green}::placeholder{color:green}}"`
+        `"@media (min-width:480px) and (max-width:767px){::-webkit-input-placeholder{color:green}::-moz-placeholder{color:green}:-ms-input-placeholder{color:green}::-ms-input-placeholder{color:green}::placeholder{color:green}}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
       )
 
       // Contains a source map
@@ -184,13 +184,17 @@ describe('CSS Support', () => {
       const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
       expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
         Object {
-          "mappings": "AAAA,+CACE,4BACE,WACF,CAFA,mBACE,WACF,CAFA,uBACE,WACF,CAFA,wBACE,WACF,CAFA,cACE,WACF,CACF",
+          "mappings": "AAAA,+CACE,4BACE,WACF,CAFA,mBACE,WACF,CAFA,uBACE,WACF,CAFA,wBACE,WACF,CAFA,cACE,WACF,CACF,CAEA,cACE,2CACF",
           "sourcesContent": Array [
             "@media (480px <= width < 768px) {
           ::placeholder {
             color: green;
           }
         }
+
+        .flex-parsing {
+          flex: 0 0 calc(50% - var(--vertical-gutter));
+        }
         ",
           ],
           "version": 3,

diff --git a/test/integration/scss-fixtures/compilation-and-prefixing/styles/global.scss b/test/integration/scss-fixtures/compilation-and-prefixing/styles/global.scss
@@ -4,3 +4,7 @@ $var: red;
     color: $var;
   }
 }
+
+.flex-parsing {
+  flex: 0 0 calc(50% - var(--vertical-gutter));
+}
diff --git a/test/integration/scss/test/index.test.js b/test/integration/scss/test/index.test.js
@@ -163,7 +163,7 @@ describe('SCSS Support', () => {
       expect(
         cssContent.replace(/\/\*.*?\*\//g, '').trim()
       ).toMatchInlineSnapshot(
-        `".redText ::-webkit-input-placeholder{color:red}.redText ::-moz-placeholder{color:red}.redText :-ms-input-placeholder{color:red}.redText ::-ms-input-placeholder{color:red}.redText ::placeholder{color:red}"`
+        `".redText ::-webkit-input-placeholder{color:red}.redText ::-moz-placeholder{color:red}.redText :-ms-input-placeholder{color:red}.redText ::-ms-input-placeholder{color:red}.redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
       )
 
       // Contains a source map
@@ -184,14 +184,18 @@ describe('SCSS Support', () => {
       const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
       expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
         Object {
-          "mappings": "AACA,qCAEI,SAHK,CACT,4BAEI,SAHK,CACT,gCAEI,SAHK,CACT,iCAEI,SAHK,CACT,uBAEI,SAHK",
+          "mappings": "AACA,qCAEI,SAHK,CACT,4BAEI,SAHK,CACT,gCAEI,SAHK,CACT,iCAEI,SAHK,CACT,uBAEI,SAHK,CAIN,cAID,2CAA4C",
           "sourcesContent": Array [
             "$var: red;
         .redText {
           ::placeholder {
             color: $var;
           }
         }
+
+        .flex-parsing {
+          flex: 0 0 calc(50% - var(--vertical-gutter));
+        }
         ",
           ],
           "version": 3,

diff --git a/yarn.lock b/yarn.lock
@@ -12486,12 +12486,12 @@ postcss-filter-plugins@^2.0.0:
   dependencies:
     postcss "^5.0.4"
 
-postcss-flexbugs-fixes@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.1.0.tgz#e094a9df1783e2200b7b19f875dcad3b3aff8b20"
-  integrity sha512-jr1LHxQvStNNAHlgco6PzY308zvLklh7SJVYuWUwyUQncofaAlD2l+P/gxKHOdqWKe7xJSkVLFF/2Tp+JqMSZA==
+postcss-flexbugs-fixes@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.0.tgz#662b3dcb6354638b9213a55eed8913bcdc8d004a"
+  integrity sha512-QRE0n3hpkxxS/OGvzOa+PDuy4mh/Jg4o9ui22/ko5iGYOG3M5dfJabjnAZjTdh2G9F85c7Hv8hWcEDEKW/xceQ==
   dependencies:
-    postcss "^7.0.0"
+    postcss "^7.0.26"
 
 postcss-focus-visible@^4.0.0:
   version "4.0.0"