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

Autoprefixer doesn't backfill flexbox rules #564

Open
davatron5000 opened this issue Oct 3, 2018 · 1 comment

Comments

@davatron5000
Copy link

commented Oct 3, 2018

  • I tried updating to the latest version.
    • I can't, there is an issue.
  • I Am on Windows
    • Ubuntu Bash on Windows
    • Fedora Bash on Windows
    • Other Bash on Windows
  • I Am on Linux
    • Ubuntu
    • Fedora
  • I Am on macOS
  • I'm on Docker
    • I understand Docker may be unsupported.

Description

We recently identified that Jekyll-Assets with Autoprefixer wasn't spitting out the proper flex-definitions for older browsers like IE10 or Safari 6.

I followed the advice in PR #315 and this also relates (maybe duplicates) #549. But specifically, Jekyll Assets isn't autoprefixing flexbox. Other prefixes appear to work as expected.

Steps

I've created a repo that reproduces the issue that hopefully makes it more easier:

https://github.com/davatron5000/jekyll-assets-test

I've tried with both 3.0.11 and the 4.0.alpha

  • Step 1: Create a stylesheet with a rule that uses display: flex

      .foo{
        appearance:none;
        display:flex
      }
  • Step 2: Run that through Jekyll Assets with autoprefixer-rails gem and the browser list set to last 50 versions

    # https://github.com/envygeeks/jekyll-assets/issues/549
    assets:
      autoprefixer:
        browsers: ["last 50 versions"]
      plugins:
        css: { autoprefixer: {}}
  • Step 3: Inspect the CSS output

Output

.foo{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:flex
}

Expected

When I run this same CSS through autoprefixer.github.io, I get a different result using last 50 versions.

.foo{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex
}

I tried creating various .browserlistrc files and autoprefixer.yml configs and putting them in every directory possible but nothing seemed to work. It seems either the browsers config isn't being passed to autoprefixer-rails or it's being overridden by something somewhere.

Thanks for taking a look at this. 🙏

@seansean

This comment has been minimized.

Copy link

commented Dec 8, 2018

I am experiencing the exact same issue:display: flex and display: grid properties aren't being prefixed, though others such as appearance and transform are.

Same set up as @davatron5000

Any ideas? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.