Add waring to align/justify-items in IE #1123

janczer · 2018-09-20T16:48:53Z

Fix #1123

ai · 2018-09-20T17:56:46Z

Did you show this warning only if IE is selected in Browserslist?

janczer · 2018-09-20T19:33:29Z

I think I don't. Can you please tell me where I can check if IE is selected?

ai · 2018-09-20T19:34:04Z

I am right now on conference. Check other Grid warnings.

…dd tips to waring to align/justify-items/content.

janczer · 2018-09-21T13:42:55Z

@Dan503 I added a tips and a test to almost all properties. Thanks for your descriptions.
But unfortunatly I found the bug #1127 and I cannot add to grid.css propertie align-content because two tests are conflicts.

@ai I was trying to find how I can add warning if specific browser is add, but I'm failing. When you will have some time, can you please describe me how I can do it? Thanks

Now I see that tests on Node 10.11.0 are failing because size of the package is too big. Should I cut it off somehow?

ai · 2018-09-21T13:51:04Z

How to check IE is here:
https://github.com/postcss/autoprefixer/blob/master/lib/processor.js#L101

Just increase size limit

ai · 2018-09-21T13:51:47Z

let grid = this.prefixes.add['grid-area']
if (this.prefixes.options.grid && grid) {

Dan503 · 2018-09-21T13:52:12Z

@janczer I'm making some alterations to it and I'll submit it as a pull request against your branch.

Dan503 · 2018-09-21T14:19:07Z

let grid = this.prefixes.add['grid-area']
if (this.prefixes.options.grid && grid) {

@ai was that for testing if the declaration is in a grid element?

ai · 2018-09-21T14:21:27Z

@Dan503 it tests that we have a browsers which needs Grid prefixes

- Triggers on more than just "display: grid" - Personalizes the "align/justify-self" suggestion based on what the user entered - Splits the warning message into multiple lines to make the warning easier to read

janczer · 2018-09-21T16:18:19Z

@Dan503 Looks like your commits affected the old tests. Can you check it?

Dan503 · 2018-09-21T16:57:42Z

Yeah autoprefixer.test.js needs updating to match the new output. I'm not sure how to generate the result to match it to.

I mentioned that in the pull request.

ai · 2018-09-21T18:19:34Z

@Dan503 only by hands 😅

janczer · 2018-09-21T21:54:29Z

I fixed the tests in the last commit. But I have to remove some rules about grid. Is it correct?

cc @ai @Dan503

Dan503 · 2018-09-21T23:27:00Z

only by hands 😅

@ai how do you know what line number and character number the test is looking for then? Those are incredibly difficult to figure out manually.

Is it correct?

@janczer Not at all.

You can't remove any of the auto stuff
The align/justify-items warnings need to remain multi-line. It's too hard to read otherwise.
Why did you remove the .warn_ie_align_content test?

For testing multi-line, you can replicate a new line by using \n.

This is line one
  This is line 2

=

"This is line one\n  This is line 2"

I recommend reverting that last commit completely and trying again.

ai · 2018-09-22T01:49:10Z

Sorry, I am drunk after a conference 😄😄😄

Will answer in next few days

janczer · 2018-09-22T07:10:10Z

@ai how do you know what line number and character number the test is looking for then? Those are incredibly difficult to figure out manually.

You can just run the test and check what exactly line has warning.

@janczer Not at all.

1. You can't remove any of the `auto` stuff

Ok, looks like it's problem with code that you added.

2. The `align/justify-items` warnings need to remain multi-line. It's too hard to read otherwise.

Autoprefixer has no warnings with new line. I think we can just change warning style.

3. Why did you remove the `.warn_ie_align_content` test?

Because here is a bug #1127.

I recommend reverting that last commit completely and trying again.

Looks like that problem with your commits, can you check it? Or I just revert it.

Dan503 · 2018-09-22T09:08:57Z

You can just run the test and check what exactly line has warning.

Ahh right I get it now, it refers to the line numbers in test\cases\grid.css

looks like it's problem with code that you added.

I think I might figured out what the main problem was but I'm still getting these weird test fails even though they look like they match up perfectly. Does anyone have any idea what is going on here?

Autoprefixer has no warnings with new line.

There was a multi-line warning at one point 😕 I can't remember what the multi-line warning was for though. @ai @bogdan0083 Did you change it to a single line warning or remove it?

It would be a lot nicer if the warning could stay multi-line.

Because here is a bug

It looks like it's just a case of the rules being inconsistent. Since we write the test output manually I don't see why the rule can't be included. It just means that that particular rule has its properties the other way around.

When I tried to replicate it using the playground it didn't seem to have that issue. I needed to set the playground to "last 5 version" to get it to output the prefixes.

bogdan0083 · 2018-09-22T09:20:55Z

I think I might figured out what the main problem was but I'm still getting these weird test fails even though they look like they match up perfectly. Does anyone have any idea what is going on here?

Try to remove the indentation and indent the lines by hand. It might be tabs/spaces problem 🤔.

There was a multi-line warning at one point 😕 I can't remember what the multi-line warning was for though. @ai @bogdan0083 Did you change it to a single line warning or remove it?

Yep, I removed it as we no longer needed warnings for duplicate area names. You can see an example of multiline warning here.

Dan503 · 2018-09-22T09:30:46Z

Try to remove the indentation and indent the lines by hand. It might be tabs/spaces problem 🤔.

Nope :(

Yep, I removed it as we no longer needed warnings for multiple area names.

Ahh ok, yeah that makes sense.

Dan503 · 2018-09-22T09:34:11Z

@bogdan0083 if you want to take a look at the error, you will find it on my feature/align-justify-grid-warnings branch.

bogdan0083 · 2018-09-22T09:34:37Z

Thanks! Just wanted to ask 😀

janczer · 2018-09-22T09:37:21Z

@ai @bogdan0083 @Dan503 In the latest commit I fixed all test. Can we merge it now? Or I should change it?

Dan503 · 2018-09-22T09:40:31Z

Well yeah... you fixed the errors but you did it by removing important functionality. You also got rid of the multi-line aspect. So no, we aren't merging yet.

I created a pull request against your branch with some updates but it has test errors in it. That's what we are figuring out now.

janczer · 2018-09-22T09:47:55Z

you fixed the errors but you did it by removing important functionality

What exactly functionality you mean? Can you please explain it here and I can add it.

I created a pull request against your branch with some updates but it has test errors in it.

I'm sorry. But you should fix your pull request.

Dan503 · 2018-09-22T09:52:25Z

What exactly functionality you mean?

You removed all the warnings that Autoprefixer produces when people try to use grid auto properties like grid-auto-rows.

bogdan0083 · 2018-09-22T09:54:18Z

Try to remove the indentation and indent the lines by hand. It might be tabs/spaces problem 🤔.
Nope :(

I've just checked your branch and I have no strange errors 🤔

Dan503 · 2018-09-22T09:55:31Z

Really? so you run npm run test and it came back with zero errors?

janczer · 2018-09-22T09:56:08Z

You removed all the warnings that Autoprefixer produces when people try to use grid auto properties like grid-auto-rows.

It's not true. You can see it in the last commit: 25ba8a2

Dan503 · 2018-09-22T10:00:23Z

Oh... sorry, yeah looks like it was altered rather than removed.

I still think the multi-line aspect is important though.

bogdan0083 · 2018-09-22T10:00:53Z

Really? so you run npm run test and it came back with zero errors?

I have one error about the warning message, one about selector namings of this sort:

    - .warn_ei_align {
    + .warn_ie_align {

and one more:

      .warn_ie_align_content {
    +   -ms-flex-line-pack: center;
        -webkit-align-content: center;
    -   -ms-flex-line-pack: center;
        align-content: center;
        display: -ms-grid;
        display: grid;
      }

These are the only errors I get.

janczer · 2018-09-22T10:03:48Z

@bogdan0083 the second one related to #1127

Dan503 · 2018-09-22T10:06:58Z

Ah ok, I'll fix up those 2 errors. My console is drowned in bogus errors for whatever reason so I couldn't see them.

Dan503 · 2018-09-22T10:10:57Z

@bogdan0083 I've pushed theoretical fixes for those 2 issues. Can you test?

bogdan0083 · 2018-09-22T10:21:08Z

Oh crap, I'm sorry. The first error is a little longer, I sent only a part of a diff to show you that my errors are different. Here's the full diff of 1 error:

    @@ -121,22 +121,28 @@
      /* Emit warning if grid enabled */
      .warn-display-contents .grid {
        display: contents;
      }

    - .warn_ei_align {
    + .warn_ie_align {
        -ms-flex-align: center;
            align-items: center;
        display: grid;
      }

    - .warn_ei_justify {
    + .warn_ie_justify {
        justify-items: center;
        display: grid;
      }

    - .warn_ei_justify_content {
    + .warn_ie_align_content {
    +   -ms-flex-line-pack: center;
    +       align-content: center;
    +   display: grid;
    + }
    +
    + .warn_ie_justify_content {
        -ms-flex-pack: center;
            justify-content: center;
        display: grid;
      }

And the error about the warning message:

@@ -14,16 +14,16 @@
        "autoprefixer: <css input>:102:3: grid-auto-rows is not supported by IE",
        "autoprefixer: <css input>:103:3: grid-auto-flow is not supported by IE",
        "autoprefixer: <css input>:104:33: auto-fill value is not supported by IE",
        "autoprefixer: <css input>:105:30: auto-fit value is not supported by IE",
        "autoprefixer: <css input>:121:3: Please do not use display: contents; if you have grid setting enabled",
    -   "autoprefixer: <css input>:125:3:
    +   "autoprefixer: <css input>:125:3:
        IE does not support align-items on grid containers.
        Try using align-self on child elements instead.
        Example: .grid > * { align-self: center }
      ",
    -   "autoprefixer: <css input>:130:3:
    +   "autoprefixer: <css input>:130:3:
        IE does not support justify-items on grid containers.
        Try using justify-self on child elements instead.
        Example: .grid > * { justify-self: center }
      ",
        "autoprefixer: <css input>:135:3: IE does not support align-content on grid containers.",

You will need to remove the trailing spaces on these lines

bogdan0083 · 2018-09-22T10:23:14Z

If you want to omit those bogus errors you can try to run a single test by using jest -t 'test-name'

Dan503 · 2018-09-22T10:25:03Z

Do you know what the test names go by?

bogdan0083 · 2018-09-22T10:28:21Z

the first is

has disabled grid options by default

and the second is

supports grid layout

bogdan0083 · 2018-09-22T10:30:20Z

Did you try to remove the fork and set it up again and then use some other editor? I don't know, something is breaking your tests 🤔

Dan503 · 2018-09-22T10:32:44Z

There were other alterations that I made in my version as well in case people were thinking it's not worth the hassle.

I personalised the warning messages further so that it only mentions the property that the user used rather than all the properties.
I included place-items/content in the warning message
I moved the code into the area that the rest of the "grid-must-be-enabled" tests were in.

Dan503 · 2018-09-22T10:36:18Z

If you want to omit those bogus errors you can try to run a single test by using jest -t 'test-name'

Using Jest directly worked 😊

Did you try to remove the fork and set it up again and then use some other editor?

umm... I didn't try that, I did try deleting node_modules and re-intalling though.

bogdan0083 · 2018-09-22T10:37:08Z

Using Jest directly worked 😊

That's cool! Glad it helped.

Dan503 · 2018-09-22T10:57:05Z

Ok I'll delete the align-content test. It is more difficult to solve that I was expecting 😕

Dan503 · 2018-09-22T11:21:41Z

@janczer this is what I meant when I said it looked like you removed auto functionality

Found in this git commit: a353ef6

Or is there extra context around that which I'm missing? I don't see any replacement for that code in that commit.

Dan503 · 2018-09-22T11:24:27Z

Our branches got out of sync and it was too difficult to merge so I just created a separate pull request instead #1129

Add waring to align/justify-items in IE

6241b4c

Split align/justify-items/content to two different warning and also a…

c6dcab7

…dd tips to waring to align/justify-items/content.

Dan503 and others added 4 commits September 21, 2018 17:47

putting the "i" and the "e" the right way around

dafad68

Adding missing align-content test

0ddcddb

Making warning message clearer

e4eb250

- Triggers on more than just "display: grid" - Personalizes the "align/justify-self" suggestion based on what the user entered - Splits the warning message into multiple lines to make the warning easier to read

Increase size limit and fix function to arrow

933f118

Fix tests

25ba8a2

janczer force-pushed the add/wargnings-grid-ie branch from a353ef6 to 25ba8a2 Compare September 22, 2018 07:57

Dan503 mentioned this pull request Sep 22, 2018

[Updated] Add warning to align/justify-items/content in IE #1129

Merged

ai closed this in #1129 Sep 23, 2018

Add waring to align/justify-items in IE #1123

Add waring to align/justify-items in IE #1123

Conversation

janczer commented Sep 20, 2018 • edited Loading

ai commented Sep 20, 2018 • edited Loading

janczer commented Sep 20, 2018

ai commented Sep 20, 2018

janczer commented Sep 21, 2018 • edited Loading

ai commented Sep 21, 2018

ai commented Sep 21, 2018

Dan503 commented Sep 21, 2018 • edited Loading

Dan503 commented Sep 21, 2018

ai commented Sep 21, 2018

janczer commented Sep 21, 2018

Dan503 commented Sep 21, 2018

ai commented Sep 21, 2018

janczer commented Sep 21, 2018

Dan503 commented Sep 21, 2018 • edited Loading

ai commented Sep 22, 2018

janczer commented Sep 22, 2018

Dan503 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018 • edited Loading

Dan503 commented Sep 22, 2018

Dan503 commented Sep 22, 2018 • edited Loading

bogdan0083 commented Sep 22, 2018

janczer commented Sep 22, 2018

Dan503 commented Sep 22, 2018

janczer commented Sep 22, 2018

Dan503 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018

Dan503 commented Sep 22, 2018

janczer commented Sep 22, 2018

Dan503 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018 • edited Loading

janczer commented Sep 22, 2018

Dan503 commented Sep 22, 2018

Dan503 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018

Dan503 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018

Dan503 commented Sep 22, 2018 • edited Loading

Dan503 commented Sep 22, 2018

bogdan0083 commented Sep 22, 2018 • edited Loading

Dan503 commented Sep 22, 2018 • edited Loading

Dan503 commented Sep 22, 2018

Dan503 commented Sep 22, 2018

janczer commented Sep 20, 2018 •

edited

Loading

ai commented Sep 20, 2018 •

edited

Loading

janczer commented Sep 21, 2018 •

edited

Loading

Dan503 commented Sep 21, 2018 •

edited

Loading

Dan503 commented Sep 21, 2018 •

edited

Loading

bogdan0083 commented Sep 22, 2018 •

edited

Loading

Dan503 commented Sep 22, 2018 •

edited

Loading

bogdan0083 commented Sep 22, 2018 •

edited

Loading

Dan503 commented Sep 22, 2018 •

edited

Loading

bogdan0083 commented Sep 22, 2018 •

edited

Loading

Dan503 commented Sep 22, 2018 •

edited

Loading