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.

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

Add CSS autoprefixer (resolves #255) #266

merged 1 commit into from Apr 15, 2019


Copy link

@bregenspan bregenspan commented Apr 14, 2019

This adds autoprefixer for CSS prefixing. (Which is a follow-up re: PR review feedback in #246 (comment) / #255).

As part of making this change, I moved the browserslist config that was specified inline in the Webpack config out to a .browserslistrc file (it could just as well be added as a browserslist key to package.json -- could go either way on that personally), so that the same browser list will be used by babel-preset-env and autoprefixer / other postcss plugins.

This build config change currently only results in a tiny difference to the generated browser JS bundle: it adds prefixes to the two places user-select CSS rules are used (it turns out no other rules need prefixing currently).

-     (t = e.exports = n(2)(!1)).push([e.i, ".ContextMenuItem__item{cursor:pointer;margin:0;padding:8px 14px;user-select:none}.ContextMenuItem__item:hover{background:#ffefd7}.ContextMenuItem__disabled{cursor:default;color:grey}.ContextMenuItem__item.ContextMenuItem__disabled:hover{background:transparent}", ""]), t.locals = {
+     (t = e.exports = n(2)(!1)).push([e.i, ".ContextMenuItem__item{cursor:pointer;margin:0;padding:8px 14px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ContextMenuItem__item:hover{background:#ffefd7}.ContextMenuItem__disabled{cursor:default;color:grey}.ContextMenuItem__item.ContextMenuItem__disabled:hover{background:transparent}", ""]), t.locals = {
-     (e.exports = n(2)(!1)).push([e.i, ":root{--main-font:normal 11px Verdana}#app,body,html{height:100%;margin:0;overflow:hidden;padding:0;width:100%}body.resizing{user-select:none!important}body.resizing *{pointer-events:none}body.resizing.col{cursor:col-resize!important}", ""])
+     (e.exports = n(2)(!1)).push([e.i, ":root{--main-font:normal 11px Verdana}#app,body,html{height:100%;margin:0;overflow:hidden;padding:0;width:100%}body.resizing{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}body.resizing *{pointer-events:none}body.resizing.col{cursor:col-resize!important}", ""])

(If you use Glitch you can visit!/comparewebpackbuildoutput? to quickly generate a diff like the above to confirm that only the two lines above are affected; the non-CSS JS build output remains the same, showing that nothing seems to have broken when moving around the browserslist config, and that the prefixing is not overly aggressive)

@bregenspan bregenspan changed the title Add autoprefixer; move supported browser list to .browserslistrc (resolves #255) Add CSS autoprefixer (resolves #255) Apr 14, 2019
@th0r th0r merged commit c90cd75 into webpack-contrib:master Apr 15, 2019
@bregenspan bregenspan deleted the issue-255-autoprefixer branch April 15, 2019 14:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

2 participants