Repository: postcss/autoprefixer
Pull request #1097 (2018-08-07 08:51:41)

[css-grid] fix bug when searching areas
PR should fix this issue:  #1096 

@gisu Can you please try this forked version of autoprefixer to make sure the bug is fixed? You can install it like this:

```npm i --save-dev bogdan0083/autoprefixer#add-span-fix```

If the bug is fixed and everything is fine then we can merge :smile:

Dan503: You should be able to leave off the `-g`. That's the "global" flag :/
bogdan0083: Whoops, you right :)
gisu: Well, I installed it, but it throws errors. I can't say exactly why, because the project I'm trying is quite complex (vue, webpack, gulp, tailwind). 

```bash
events.js:165
      throw er; // Unhandled 'error' event
      ^
Error: Loading PostCSS Plugin failed: Unexpected token =

(@/Users/saschafuchs/Develop/private/gastrocard/site/postcss.config.js)
    at load (/Users/saschafuchs/Develop/private/gastrocard/site/node_modules/gulp-postcss/node_modules/postcss-load-config/src/plugins.js:27:13)
    at Object.keys.filter.map (/Users/saschafuchs/Develop/private/gastrocard/site/node_modules/gulp-postcss/node_modules/postcss-load-config/src/plugins.js:53:16)
    at Array.map (<anonymous>)
    at plugins (/Users/saschafuchs/Develop/private/gastrocard/site/node_modules/gulp-postcss/node_modules/postcss-load-config/src/plugins.js:52:8)
    at config.load.then (/Users/saschafuchs/Develop/private/gastrocard/site/node_modules/gulp-postcss/node_modules/postcss-load-config/src/index.js:72:18)
    at <anonymous>
Emitted 'error' event at:
    at Transform.onerror (/Users/saschafuchs/Develop/private/gastrocard/site/node_modules/readable-stream/lib/_stream_readable.js:640:52)
    at Transform.emit (events.js:180:13)
    at onwriteError (_stream_writable.js:431:12)
    at onwrite (_stream_writable.js:453:5)
    at Transform.afterTransform (_stream_transform.js:89:3)
    at Immediate.<anonymous> (/Users/saschafuchs/Develop/private/gastrocard/site/node_modules/gulp-postcss/index.js:93:9)
    at runCallback (timers.js:763:18)
    at tryOnImmediate (timers.js:734:5)
    at processImmediate (timers.js:716:5)
```

`gulp-postcss` I reloaded for test purposes has not changed. I also disabled Autoprefixer to see if it is due to Gulp-PostCSS, then everything runs without errors. I'm testing this again on a fresh project.
gisu: Tested with a fresh project. Unfortunately, the same problem.

```bash
/Users/saschafuchs/Develop/private/prefixerKittn/node_modules/autoprefixer/lib/transition.js:6
    props = ['transition', 'transition-property'];
          ^

SyntaxError: Unexpected token =
    at new Script (vm.js:51:7)
    at createScript (vm.js:136:10)
    at Object.runInThisContext (vm.js:197:10)
    at Module._compile (internal/modules/cjs/loader.js:618:28)
    at Module._compile (/Users/saschafuchs/Develop/private/prefixerKittn/node_modules/pirates/lib/index.js:83:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at newLoader (/Users/saschafuchs/Develop/private/prefixerKittn/node_modules/pirates/lib/index.js:88:7)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/saschafuchs/Develop/private/prefixerKittn/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
Emitted 'error' event at:
    at /Users/saschafuchs/Develop/private/prefixerKittn/node_modules/gulp-stylelint/dist/index.js:188:15
    at process._tickCallback (internal/process/next_tick.js:176:11)
```
bogdan0083: @ai how should we handle this PR? I reproduced the bug and fixed it but @gisu can't seem to test it on his project (installed fork outputs errors of some sort, I don't know why)
gisu: Here is the testing Repo https://github.com/gisu/autoprefixer-test 

```bash
yarn
npm run dev
```

Starts the Testserver. The sass file `src/style/application/components/_testgrid.scss`

bogdan0083: @gisu Alright, I finally figured out how we can test this PR (stupid but quick way):

1. Clone my branch:
```git clone https://github.com/bogdan0083/autoprefixer.git -b add-span-fix```

2. Go to the folder of cloned repo and run ```yarn``` and then ```gulp``` (if it says that gulp is not installed run ```npm i -g gulp-cli```

3. Take the contents of ```build``` folder of cloned repo and paste to ```${yourProjectFolder}/node_modules/autoprefixer/```

Now it should compile just fine. I tried to compile the test case from your issue and here's the result (with cssnano disabled):

<details>
 <summary>Before</summary>

```css
.container {
  &__inner {
    display: grid;
    grid-gap: 0;
    grid-template:
      'oct log qu1 qu1 qu1' 65px
      'slo slo slo slo slo' auto /
        65px 65px 1fr 1fr 1fr;

    @include break('m') {
      grid-gap: 10px 20px;
      grid-template:
        'log met qu2' 20px
        'log lin lin' auto
        'log nav nav' auto /
          200px 1fr 110px;
    }

    @include break('l') {
      grid-gap: 10px 50px;
      grid-template:
        'log met soc' 20px
        'log lin lin' auto
        'log nav qu2' auto /
        290px 1fr 110px;
    }
  }

  &__log { grid-area: log; }

  &__met { grid-area: met; }

  .c-pageSlogan { grid-area: slo; }

  &__lin { grid-area: lin; }

  .c-offCanvasTrigger {
    grid-area: oct;
    @include break('m') {
      display: none;
    }
  }

  .c-quicklinksMobile {
    grid-area: qu1;
    @include break('m') {
      display: none;
    }
  }

  .c-quicklinksDesktop {
    display: none;
    grid-area: qu2;
    @include break('m') {
      display: flex;
    }
  }

  .c-mainnav {
    display: none;
    grid-area: nav;
    @include break('m') {
      display: block;
    }
  }

  .c-socialNetworks {
    display: none;
    grid-area: soc;
    @include break('l') {
      display: flex;
    }
  }
}

```
</details>
<details>
 <summary>After</summary>

```css
.container__inner {
  display: -ms-grid;
  display: grid;
  grid-gap: 0;
  -ms-grid-rows: 65px 0 auto;
  -ms-grid-columns: 65px 0 65px 0 1fr 0 1fr 0 1fr;
  grid-template: 'oct log qu1 qu1 qu1' 65px 'slo slo slo slo slo' auto / 65px 65px 1fr 1fr 1fr; }
  @media screen and (min-width: 768px) {
    .container__inner {
      grid-gap: 10px 20px;
      -ms-grid-rows: 20px 10px auto 10px auto;
      -ms-grid-columns: 200px 20px 1fr 20px 110px;
      grid-template: 'log met qu2' 20px 'log lin lin' auto 'log nav nav' auto / 200px 1fr 110px; } }
  @media screen and (min-width: 1180px) {
    .container__inner {
      grid-gap: 10px 50px;
      -ms-grid-rows: 20px 10px auto 10px auto;
      -ms-grid-columns: 290px 50px 1fr 50px 110px;
      grid-template: 'log met soc' 20px 'log lin lin' auto 'log nav qu2' auto / 290px 1fr 110px; } }

.container__log {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: log; }

.container__met {
  grid-area: met; }

.container .c-pageSlogan {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 9;
  grid-area: slo; }

.container__lin {
  grid-area: lin; }

.container .c-offCanvasTrigger {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: oct; }
  @media screen and (min-width: 768px) {
    .container .c-offCanvasTrigger {
      display: none; } }

.container .c-quicklinksMobile {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  -ms-grid-column-span: 5;
  grid-area: qu1; }
  @media screen and (min-width: 768px) {
    .container .c-quicklinksMobile {
      display: none; } }

.container .c-quicklinksDesktop {
  display: none;
  grid-area: qu2; }
  @media screen and (min-width: 768px) {
    .container .c-quicklinksDesktop {
      display: flex; } }

.container .c-mainnav {
  display: none;
  grid-area: nav; }

@media screen and (min-width: 768px) {
    .container__log {
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    -ms-grid-column: 1; }
    .container__met {
    -ms-grid-row: 1;
    -ms-grid-column: 3; }
    .container__lin {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3; }
    .container .c-quicklinksDesktop {
    -ms-grid-row: 1;
    -ms-grid-column: 5; }
    .container .c-mainnav {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3; } }
  @media screen and (min-width: 768px) {
    .container .c-mainnav {
      display: block; } }

.container .c-socialNetworks {
  display: none;
  grid-area: soc; }

@media screen and (min-width: 1180px) {
    .container__log {
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    -ms-grid-column: 1; }
    .container__met {
    -ms-grid-row: 1;
    -ms-grid-column: 3; }
    .container__lin {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3; }
    .container .c-quicklinksDesktop {
    -ms-grid-row: 5;
    -ms-grid-column: 5; }
    .container .c-mainnav {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1; }
    .container .c-socialNetworks {
    -ms-grid-row: 1;
    -ms-grid-column: 5; } }
  @media screen and (min-width: 1180px) {
    .container .c-socialNetworks {
      display: flex; } }

```
</details>

Patch:
diff --git a/lib/hacks/grid-utils.js b/lib/hacks/grid-utils.js
index f3461b7..1af799f 100644
--- a/lib/hacks/grid-utils.js
+++ b/lib/hacks/grid-utils.js
@@ -405,9 +405,16 @@ function shouldAddSpan (decl, area, areaName) {
     node.walkDecls('grid-template', d => {
       const template = parseTemplate({ decl: d, gap: getGridGap(d) })
       const comparedArea = template.areas[areaName]
+
+      if (!comparedArea) {
+        return true
+      }
+
       if (area.row.span !== comparedArea.row.span) {
         overrideValues[0] = true
-      } else if (area.column.span !== comparedArea.column.span) {
+      }
+
+      if (area.column.span !== comparedArea.column.span) {
         overrideValues[1] = true
       }
 
@@ -430,11 +437,8 @@ function shouldAddSpan (decl, area, areaName) {
 function getLastNextSimilarMedia (rule, selectors) {
   if (!rule) {
     return false
-  } else if (
-    rule.type !== 'atrule' &&
-    rule.name !== 'media'
-  ) {
-    return false
+  } else if (rule.type !== 'atrule' && rule.name !== 'media') {
+    return rule.prev()
   }
 
   let selectorsToCompare = []


Test patch:
diff --git a/test/cases/grid-area-media-sequence.css b/test/cases/grid-area-media-sequence.css
index 5c2885f..2e34974 100644
--- a/test/cases/grid-area-media-sequence.css
+++ b/test/cases/grid-area-media-sequence.css
@@ -28,7 +28,7 @@
 @media (min-width: 900px) {
   .grid-template-sequence {
     grid-template:
-      "foo foo"
+      "x foo"
       "foo foo"
       "bar bar" 20px
       / 1fr 1fr;
@@ -43,6 +43,10 @@
   grid-area: bar;
 }
 
+.x {
+  grid-area: x;
+}
+
 @media (max-width: 900px) {
   .grid-2 {
     grid-template:
diff --git a/test/cases/grid-area-media-sequence.out.css b/test/cases/grid-area-media-sequence.out.css
index 0c09bd8..731fb49 100644
--- a/test/cases/grid-area-media-sequence.out.css
+++ b/test/cases/grid-area-media-sequence.out.css
@@ -37,7 +37,7 @@
     -ms-grid-rows: auto auto 20px;
     -ms-grid-columns: 1fr 1fr;
     grid-template:
-      "foo foo"
+      "x foo"
       "foo foo"
       "bar bar" 20px
       / 1fr 1fr;
@@ -84,6 +84,10 @@
   }
 }
 
+.x {
+  grid-area: x;
+}
+
 @media (min-width: 900px) {
   .foo {
     -ms-grid-row: 1;
@@ -96,6 +100,10 @@
     -ms-grid-column: 1;
     -ms-grid-column-span: 2;
   }
+  .x {
+    -ms-grid-row: 1;
+    -ms-grid-column: 1;
+  }
 }
 
 @media (max-width: 900px) {
diff --git a/test/cases/grid-template.out.css b/test/cases/grid-template.out.css
index d15afa8..0931dd2 100644
--- a/test/cases/grid-template.out.css
+++ b/test/cases/grid-template.out.css
@@ -380,24 +380,25 @@
 @media (min-width: 600px) {
   .k-1 {
     -ms-grid-row: 1;
+    -ms-grid-row-span: 1;
     -ms-grid-column: 1;
+    -ms-grid-column-span: 1;
   }
   .k-2 {
     -ms-grid-row: 1;
     -ms-grid-column: 3;
+    -ms-grid-column-span: 1;
   }
 }
 
 @media (min-width: 600px) {
   .k-1 {
     -ms-grid-row: 1;
-    -ms-grid-row-span: 1;
     -ms-grid-column: 1;
   }
   .k-2 {
     -ms-grid-row: 1;
     -ms-grid-column: 3;
-    -ms-grid-column-span: 1;
   }
 }
 
@@ -413,24 +414,24 @@
   grid-area: j;
 }
 
-@media (min-width: 900px) {
+@media (max-width: 600px) {
   .k-3 {
     -ms-grid-row: 1;
     -ms-grid-column: 1;
   }
   .k-4 {
-    -ms-grid-row: 3;
+    -ms-grid-row: 2;
     -ms-grid-column: 1;
   }
 }
 
-@media (max-width: 600px) {
+@media (min-width: 900px) {
   .k-3 {
     -ms-grid-row: 1;
     -ms-grid-column: 1;
   }
   .k-4 {
-    -ms-grid-row: 2;
+    -ms-grid-row: 3;
     -ms-grid-column: 1;
   }
 }
@@ -443,7 +444,7 @@
   grid-area: m;
 }
 
-@media (max-width: 600px) {
+@media (min-width: 601px) {
   .k-6 {
     -ms-grid-row: 1;
     -ms-grid-column: 1;
@@ -454,7 +455,7 @@
   }
 }
 
-@media (min-width: 601px) {
+@media (max-width: 600px) {
   .k-6 {
     -ms-grid-row: 1;
     -ms-grid-column: 1;