New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix ben-eb/cssnano/448 don't remove fallbacks for custom css properties #486

Merged
merged 6 commits into from Jun 15, 2018

Conversation

Projects
None yet
6 participants
@karapetyan
Contributor

karapetyan commented Jun 2, 2018

@ai could you check, please.
Thanks.

fixes #448

@ai

This comment has been minimized.

Collaborator

ai commented Jun 2, 2018

@coveralls

This comment has been minimized.

coveralls commented Jun 2, 2018

Coverage Status

Coverage decreased (-0.03%) to 99.454% when pulling 659f9ae on karapetyan:save-fallbacks-for-custom-props into ce52717 on ben-eb:master.

'should not break unmergeable fallbacks with custom props (2)',
processCss,
'h1{padding:10em;padding:var(--variable)}',
'h1{padding:var(--variable);padding:10em}'

This comment has been minimized.

@andyjansson

andyjansson Jun 4, 2018

Collaborator

This looks wrong. Surely the output should be the same as the input..?

This comment has been minimized.

@karapetyan

karapetyan Jun 4, 2018

Contributor

As described in issue #448
cssnano shouldn't remove fallbacks for custom CSS properties.

As far i understand that exactly what fix should do.

This comment has been minimized.

@andyjansson

andyjansson Jun 4, 2018

Collaborator

Yes, but the correct order should be:

h1{padding:10em;padding:var(--variable)}

var(--variable) wouldn't be understood by browsers not supporting it, thus falling back on 10em. In your version, you overwrite var(--variable) with 10em in all cases.

This comment has been minimized.

@evilebottnawi

evilebottnawi Jun 4, 2018

Member

@karapetyan yep, we should have h1{padding:10em;padding:var(--variable)} here

This comment has been minimized.

@karapetyan

karapetyan Jun 4, 2018

Contributor

@andyjansson @evilebottnawi understood, thanks for review :) I’ll fix it soon.

This comment has been minimized.

@karapetyan

karapetyan Jun 5, 2018

Contributor

@evilebottnawi friendly ping

'should merge custom props and dont remove fallbacks',
processCss,
'h1{padding-top:10px;padding-right:15px;padding-bottom:20px;padding-left:25px;padding-top:var(--variable);padding-right:var(--variable);padding-bottom:var(--variable);padding-left:var(--variable)}',
'h1{padding:var(--variable);padding:10px 15px 20px 25px}'

This comment has been minimized.

@andyjansson

andyjansson Jun 4, 2018

Collaborator

Shouldn't it be:

 h1{padding:10px 15px 20px 25px;padding:var(--variable)}

?

This comment has been minimized.

@karapetyan

karapetyan Jun 4, 2018

Contributor

If we look at many other tests that contain more than one unmegable rule, they have similar behavior.

Here is some examples from same test file (postcss-merge-longhand.js) :

test(
    'should not merge padding values with mixed !important',
    processCss,
    'h1{padding-top:10px!important;padding-right:20px;padding-bottom:30px!important;padding-left:40px}',
    'h1{padding-bottom:30px!important;padding-left:40px;padding-right:20px;padding-top:10px!important}',
);

test(
    'should not merge identical border values with mixed !important',
    processCss,
    'h1{border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000!important;border-right:1px solid #000!important}',
    'h1{border-bottom:1px solid #000;border-left:1px solid #000!important;border-right:1px solid #000!important;border-top:1px solid #000}',
);

so I guess this is correct behavior

This comment has been minimized.

@andyjansson

andyjansson Jun 4, 2018

Collaborator

I disagree, the semantics have fundamentally changed. See my other comment.

This comment has been minimized.

@karapetyan

karapetyan Jun 5, 2018

Contributor

@andyjansson done, thanks for help!

getRulesWithoutCustomProps(props, properties),
getRulesWithCustomProps(props, properties)
);
}

This comment has been minimized.

@evilebottnawi

evilebottnawi Jun 4, 2018

Member

Looks we should rename this file to utils.js

@andyjansson

This comment has been minimized.

Collaborator

andyjansson commented Jun 5, 2018

Can you add a test where the properties are mixed up to demonstrate its correctness? E.g.:

h1{
  padding-top:10px;
  padding-right:var(--variable);
  padding-right:15px;
  padding-bottom:var(--variable);
  padding-bottom:20px;
  padding-left:25px;
  padding-top:var(--variable);
  padding-left:var(--variable)
}
@karapetyan

This comment has been minimized.

Contributor

karapetyan commented Jun 5, 2018

@andyjansson

This comment has been minimized.

Collaborator

andyjansson commented Jun 5, 2018

@karapetyan okay, looking at the final test, I don't think the implementation is correct. padding-right and padding-bottom should be overwritten by concrete values, while the rest should not.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Jun 5, 2018

@andyjansson can you explain what tests we should add more?

@andyjansson

This comment has been minimized.

Collaborator

andyjansson commented Jun 5, 2018

The correct minification should be something like:

h1{
  padding: 10px 15px 20px 25px;
  padding-left:var(--variable)
  padding-top:var(--variable);
}
@karapetyan

This comment has been minimized.

Contributor

karapetyan commented Jun 8, 2018

@andyjansson previous implementation was overcoded and awful, thank you for review. What you think about new one?

@evilebottnawi

Very good work, let's wait @andyjansson review 👍

@andyjansson

This comment has been minimized.

Collaborator

andyjansson commented Jun 8, 2018

I'll be off this weekend, so I won't be able to properly review this until Monday. But at first glance, it seems good.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Jun 8, 2018

@andyjansson 👍 i will close other problems for cssnano@4 and Monday after review we can merge this and release rc.3, when two-three week look cssnano@rc.3in wild and release stable 4 version

@andyjansson

This comment has been minimized.

Collaborator

andyjansson commented Jun 11, 2018

Alright, the implementation looks good. I was a bit confused by the odd ordering of the properties in the tests until I realised I was looking at integration tests (the reordering is due to css-declaration-sorter).

I'd like some unit tests where we test the plugin in isolation as well, if you don't mind (under /packages/postcss-merge-longhand/src/__tests__). The other thing that caught my eye was isCustomProp which could possibly be written so that false-positives are less likely to happen.

Apart from that, it looks really good. Good job!

@karapetyan

This comment has been minimized.

Contributor

karapetyan commented Jun 13, 2018

@andyjansson @evilebottnawi great review, thank you guys. It was review driven development, actually)

@@ -0,0 +1,2 @@
export default node =>
~node.value.search(/var(\s+\(|\()(\s+--|--)/i);

This comment has been minimized.

@andyjansson

andyjansson Jun 13, 2018

Collaborator

this could be simplified a bit. E.g.:

~node.value.search(/var\s*\(\s*--/i);

Last nitpick, I promise!

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Jun 15, 2018

@evilebottnawi evilebottnawi merged commit 348dcfa into cssnano:master Jun 15, 2018

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Jun 15, 2018

@karapetyan Thanks!

@YozhikM

This comment has been minimized.

Contributor

YozhikM commented Jun 15, 2018

/home/stanislav/projects/cssnano/packages/postcss-merge-longhand/src/__tests__/borders.js
  316:5  error  'processCss' is not defined  no-undef
  323:5  error  'processCss' is not defined  no-undef
  330:5  error  'processCss' is not defined  no-undef
/home/stanislav/projects/cssnano/packages/postcss-merge-longhand/src/__tests__/columns.js
  75:5  error  'processCss' is not defined  no-undef

Change it to processCSS instead

@YozhikM

This comment has been minimized.

Contributor

YozhikM commented Jun 15, 2018

@karapetyan @evilebottnawi
I actually came for someone else, I think it's necessary to fix it, but not in my PR

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Jun 15, 2018

@YozhikM PR welcome 👍

YozhikM added a commit to YozhikM/cssnano that referenced this pull request Jun 15, 2018

@YozhikM YozhikM referenced this pull request Jun 15, 2018

Merged

Fixes of pull #486 #519

andyjansson added a commit that referenced this pull request Jun 15, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment