fix: update EUI and add autoprefixer

[markov00]

Summary

This PR updates EUI to the latest version 12.3.1 fixing the legend shadow problem described in #249

before

after

Test
Change the playground background color of #root to a different color than white on the index.html file. Add a set of lines series to have a scrolling legend to notice the effect:

{
  new Array(60).fill(0).map((d,i) => <LineSeries
    id={getSpecId('dataset ' + i)}
    key={i}
    xScaleType={ScaleType.Time}
    yScaleType={ScaleType.Linear}
    data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
    xAccessor={0}
    yAccessors={[1]}
    stackAccessors={[0]}
  />)
}

Minor issue unsolved:
The PR add the missing autoprefixer plugin for postcss to enable prefixing css styles like mask-image. It works correctly on the playground and on built bundle (I've checked the compiled css code and seems that all the required styles are correctly prefixed). The missing task is to add the autoprefixer on storybook: @nickofthyme @emmacunningham or @chandlerprall do you have any idea on what I'm doing wrong here?

fix #249

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• [ ] Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility, including a check against IE11
  note: mask-image used on the legend shadow is not available in IE11. it gracefully fallback to a legend without that shadow
• [ ] Proper documentation or storybook story was added for features that require explanation or tutorials
• [ ] Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention

[codecov-io]

Codecov Report

Merging #267 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master     #267   +/-   ##
=======================================
  Coverage   98.05%   98.05%           
=======================================
  Files          37       37           
  Lines        2671     2671           
  Branches      613      628   +15     
=======================================
  Hits         2619     2619           
  Misses         47       47           
  Partials        5        5

Impacted Files	Coverage Δ
src/specs/settings.tsx	96.34% <ø> (ø)	⬆️
src/chart_types/xy_chart/store/chart_state.ts	97.44% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8ebe600...4a5b45a. Read the comment docs.

[nickofthyme]

It looks to me like the autoprefixer is working in storybook. 🤔

I changed .storybook/styles.scss to...

#root {
  background-color: blanchedalmond;
+  transition: transform 1s;
}

and the .out bundle output with the plugin was...

#root {
  background-color: blanchedalmond;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

and without the plugin the output is...

#root {
  background-color: blanchedalmond;
  transition: transform 1s;
}

Is there something specific that you noticed that it isn't working?

[markov00]

@nickofthyme so if you open storybook and look a chart with a legend, inspect the legend and find the .echLegendListContainer class. You will see that the mask-image style is not autoprefixed with -webkit. On the playground instead if works correctly

[nickofthyme]

See markov00#3

[markov00]

🎉 This PR is included in version 8.1.3 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀