I am migrating an old Rails codebase from sprockets to webpacker and without changing a single line of CSS, just migrating the bundling part, i was breaking a lot of tests. Just spend a full day bashing my head against the screen trying to figure out what have i done, as everything was working before.
The issue was that my new autoprefixer config had this subtle difference: flexbox: no-2009. Which made total sense: we're in 2019, browser support as per .browserlistrc of the project is last 4 version, not ie < 10 so why add "garbage" css to my bundles?
A quick google search for WebKit: 538.1 lead me to believe that we're taking about a circa 2013/2014 engine which matches to something like Safari 8 kind of browser according to this table
The comment also states:
Which CSS properties are supported will depend on the version of Qt you have installed.
We can't have a one size fits all, be we can advise sensible defaults. Based on all this i think adding a section to readme would be really helpful, here's a sample:
Flexbox
For testing bundles, use the oldest flexbox syntax possible. If you're using autoprefixer make sure that, for test environment, that's last 8 versions as browser targets and also make sure you haven't set flex: 'no-2019' config property
Happy to make a PR if you guys agree!
Thanks for the work on this!
Cheers ✌️
Hello! There's already a couple of issues (https://github.com/thoughtbot/capybara-webkit/issues/822, https://github.com/thoughtbot/capybara-webkit/issues/1056) related with the problematic usage of
flexbox
. We're in 2019 and now everyone either uses it ordisplay: grid
for creating layouts (floats are dead).I am migrating an old Rails codebase from sprockets to webpacker and without changing a single line of CSS, just migrating the bundling part, i was breaking a lot of tests. Just spend a full day bashing my head against the screen trying to figure out what have i done, as everything was working before.
The issue was that my new
autoprefixer
config had this subtle difference:flexbox: no-2009
. Which made total sense: we're in 2019, browser support as per.browserlistrc
of the project islast 4 version, not ie < 10
so why add "garbage" css to my bundles?According to Autoprefixer
Which is not enough to make correct tests rendering.
Proposal
Using this https://github.com/thoughtbot/capybara-webkit/issues/822#issuecomment-125331289, I got the following output:
A quick google search for
WebKit: 538.1
lead me to believe that we're taking about a circa 2013/2014 engine which matches to something like Safari 8 kind of browser according to this tableThe comment also states:
We can't have a one size fits all, be we can advise sensible defaults. Based on all this i think adding a section to readme would be really helpful, here's a sample:
Flexbox
For testing bundles, use the oldest flexbox syntax possible. If you're using
autoprefixer
make sure that, for test environment, that'slast 8 versions
as browser targets and also make sure you haven't setflex: 'no-2019'
config propertyHappy to make a PR if you guys agree! Thanks for the work on this! Cheers ✌️