Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Document postcss-flexbugs-fixes in declaration-block-no-redundant-longhand-properties #3144

Closed
AlexWayfer opened this issue Jan 25, 2018 · 5 comments
Closed

Document postcss-flexbugs-fixes in declaration-block-no-redundant-longhand-properties #3144

AlexWayfer opened this issue Jan 25, 2018 · 5 comments
Labels
good first issue is good for newcomers status: ready to implement is ready to be worked on by someone

Comments

@AlexWayfer
Copy link

Describe the issue. Is it a bug or a feature request (new rule, new option, etc.)?

A dangerous behavior (a bug, I guess, or false positive): declaration-block-no-redundant-longhand-properties triggers for flex, where flex-basis is calc(), which doesn't work correctly in IE 10–11.

Which rule, if any, is this issue related to?

declaration-block-no-redundant-longhand-properties

What CSS is needed to reproduce this issue?

e.g.

.foo {
  flex-basis: calc(100% / 3);
  flex-grow: 1;
  flex-shrink: 0;
}

What stylelint configuration is needed to reproduce this issue?

e.g.

{
  "rules": {
    "declaration-block-no-redundant-longhand-properties": true
  }
}

Which version of stylelint are you using?

8.4.0

How are you running stylelint: CLI, PostCSS plugin, Node API?

CLI with yarn run stylelint --config .stylelintrc path/to/file.scss"

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

No. It's reproducable with regular CSS.

What did you expect to happen?

No warnings to be flagged.

What actually happened (e.g. what warnings or errors you are getting)?

The following warnings were flagged:

 4:2  ✖  Expected shorthand property "flex"                                                                      declaration-block-no-redundant-longhand-properties
@alexander-akait
Copy link
Member

@AlexWayfer Thanks for issue, i think we can add option and/or look in browserslist config to avoid this problem. If you don't want support IE10-11 rule works as expected.

@alexander-akait alexander-akait added status: needs discussion triage needs further discussion type: bug subtype: new option a new option for an existing rule labels Jan 25, 2018
@AlexWayfer
Copy link
Author

i think we can add option and/or look in browserslist config to avoid this problem

Yes, I'm adding IE 11 into browserslist with stylelint-no-unsupported-browser-features plugin and this issue is still here.

@CAYdenberg
Copy link
Contributor

I believe the rule is behaving as expected.

According to the specification, that CSS need not be written longhand, and the rule is correctly stating that. In effect, writing out these declarations is a hack to avoid IE's shoddy implementation of flexbox.

I think this could be avoided with e.g. ignoreShorthands: ["/flex-/"] - possibly we could expand documentation to suggest that?

@AlexWayfer
Copy link
Author

According to the specification, that CSS need not be written longhand

But may be.

writing out these declarations is a hack to avoid IE's shoddy implementation of flexbox

Or work-around. "Hack" is something unregular, offending.

ignoreShorthands: ["/flex-/"] - possibly we could expand documentation to suggest that?

Maybe. But can the stylelint-no-unsupported-browser-features plugin do something similar automatically with IE 11 in browserslist?

@jeddy3
Copy link
Member

jeddy3 commented Feb 7, 2018

I agree with @CAYdenberg.

The philosophy of stylelint is to help authors write the nicest code possible because, in this day and age, there is a lot of tooling to help transform this nice code into not so nice code that works around browser issues.

This is why we have all the *-no-vendor-prefix rules... as stylelint encourages the use of autoprefixer.

In this instance, I recommend using postcss-flexbugs-fixes to transform your nicely authored code into something that is compatible with IE11.

This is very much the happy path here. However, you can, as @CAYdenberg suggested, make use of the ignoreShorthands secondary option if you want to managed this IE bug by hand.

I suggest we add a link to postcss-flexbugs-fixes in the declaration-block-no-redundant-longhand-properties rule documentation to help other users that run into this issue.

@jeddy3 jeddy3 changed the title declaration-block-no-redundant-longhand-properties for flex with IE 11 Document postcss-flexbugs-fixes in declaration-block-no-redundant-longhand-properties Feb 7, 2018
@jeddy3 jeddy3 added status: ready to implement is ready to be worked on by someone type: documentation good first issue is good for newcomers and removed status: needs discussion triage needs further discussion type: bug subtype: new option a new option for an existing rule labels Feb 7, 2018
@CAYdenberg CAYdenberg mentioned this issue Feb 12, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue is good for newcomers status: ready to implement is ready to be worked on by someone
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jeddy3 @CAYdenberg @alexander-akait @AlexWayfer