search

cerner / terra-core

Terra offers a set of configurable React components designed to help build scalable and modular application UIs. This UI library was created to solve real-world issues in projects we work on day to day.
http://terra-ui.com
Apache License 2.0
183 stars 165 forks source link

Update how project handles stylelint warnings #2299

Closed bjankord closed 5 years ago

bjankord commented 5 years ago

Feature Request

Description

Currently, our stylelint script logs a lot of warnings around browser compatibility of styles we're using. All of these are known and intended styles.

With the amount of warnings we see from the browser compat plugin when using stylelint, it can be easy to miss actual errors.

For example, here was build output from a recent contribution in the framework repo.

> stylelint 'packages/**/src/**/*.scss' --syntax scss
packages/terra-dialog-modal/src/DialogModal.module.scss
 60:5  ⚠  Unexpected browser feature "viewport-units" is only partially supported by IE 10,11   plugin/no-unsupported-browser-features
packages/terra-notification-dialog/src/NotificationDialog.module.scss
 31:5  ⚠  Unexpected browser feature "viewport-units" is only partially supported by IE 10,11   plugin/no-unsupported-browser-features
packages/terra-popup/src/PopupContent.module.scss
 36:7  ⚠  Unexpected browser feature "viewport-units" is only partially supported by IE 10,11   plugin/no-unsupported-browser-features
 37:7  ⚠  Unexpected browser feature "viewport-units" is only partially supported by IE 10,11   plugin/no-unsupported-browser-features
packages/terra-slide-panel/src/SlidePanel.module.scss
 121:7  ✖  Expected empty line before rule   rule-empty-line-before
packages/terra-tabs/src/ModularTabs.module.scss
  60:7  ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
  72:9  ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
 101:7  ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
packages/terra-tabs/src/StructuralTabs.module.scss
  91:7   ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
 107:9   ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
 126:11  ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
 148:9   ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
 165:7   ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
packages/terra-time-input/src/TimeInput.module.scss
 84:7  ⚠  Unexpected browser feature "pointer-events" is not supported by IE 10   plugin/no-unsupported-browser-features
packages/terra-application-layout/src/user/UserData.module.scss
 25:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features
 33:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features
packages/terra-application-links/src/tabs/ApplicationTabs.module.scss
 174:9  ⚠  Unexpected browser feature "css-gradients" is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1   plugin/no-unsupported-browser-features
 199:5  ⚠  Unexpected browser feature "pointer-events" is not supported by IE 10                                                                               plugin/no-unsupported-browser-features
 223:5  ⚠  Unexpected browser feature "css-unset-value" is not supported by IE 10,11, Android Browser 4.4.3-4.4.4                                              plugin/no-unsupported-browser-features
packages/terra-application-utility/src/utility/_UtilityMenu.module.scss
 59:5  ⚠  Unexpected browser feature "css-initial-value" is not supported by IE 10,11              plugin/no-unsupported-browser-features
 61:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features
 66:5  ⚠  Unexpected browser feature "css-initial-value" is not supported by IE 10,11              plugin/no-unsupported-browser-features
 68:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features
 73:5  ⚠  Unexpected browser feature "css-initial-value" is not supported by IE 10,11              plugin/no-unsupported-browser-features
 75:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features
 80:5  ⚠  Unexpected browser feature "css-initial-value" is not supported by IE 10,11              plugin/no-unsupported-browser-features
 82:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features
packages/terra-application-utility/src/utility/_UtilityMenuItem.module.scss
  12:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features
 103:5  ⚠  Unexpected browser feature "wordwrap" is only partially supported by IE 10,11, Edge 17   plugin/no-unsupported-browser-features

I have some concerns that people may be missing the errors, the things that will actually fail the build. There are a couple ways to resolve it. I think we could go through and disable the linter on the individual styles that are throwing warnings. Either line by line that has issues or see if we can configure the linter to not warning on use of things like word-wrap and css-gradients. The other option would be to run stylelint with a --quite flag so it only reports errors instead of warnings.

I have some concerns with the --quite flag as I'm not sure if there are actually any warnings that would be helpful that we'd start to miss out on. Currently, the output of warnings we see from the browser compat plugin is not too helpful in my opinion.

bjankord commented 5 years ago

For this, it looks like there is an option to ignore specific styles. The warnings we have so far are non-issues for us and I'd recommend add the following to our ignore list

'viewport-units', is only partially supported by IE 10,11
'css-gradients', is only partially supported by Safari 12,11.1, iOS Safari 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1
'wordwrap', is only partially supported by IE 10,11, Edge 17