Svg not render when added css all:revert

Question

I'm using 3rd party UI library, which is includes such rule:

* {all: revert;}

then I add svg, but it's not renders, since width and height of is equal to 0. I have no ability to remove all: revert; in code (only override).

Here is demo: https://codesandbox.io/s/suspicious-cori-4pgfh

What style need to add to to make it visible?

UPD: Here code snippet

body {
  font-family: sans-serif;
}

/* this cannot be removed  */
body * {
  all: revert; /* this added by 3-rd party library */
}

.svg-wrapper * {
  display: block;
  width: 100px;
  height: 100px;
}

.svg-wrapper path {
  display: block;
  width: 100px;
  height: 100px;
}



  
    Parcel Sandbox

UPD: When override with body * { all: initial; } - doesn't work

user_1869660 · Answer

It's the d data (which is also a CSS property now) that gets reset by all: revert;, and because CSS properties always override SVG attributes, your doesn't contain a shape anymore.

The only fix I could find is to run a script that copies the d SVG attribute into the d CSS property on all elments:

document.querySelectorAll('path').forEach(path => {
  const data = path.getAttribute('d').replace(/\s+/g, ' '),
        cssData = `path("${data}")`;
  path.style.d = cssData;
});

document.querySelectorAll('path').forEach(path => {
  const data = path.getAttribute('d').replace(/\s+/g, ' '),
        cssData = `path("${data}")`;
  path.style.d = cssData;
});

body {
  font-family: sans-serif;
}

/* this cannot be removed  */
body * {
  all: revert; /* this added by 3-rd party library */
}

.svg-wrapper * {
  display: block;
  width: 100px;
  height: 100px;
}

.svg-wrapper path {
  display: block;
  width: 100px;
  height: 100px;
}



  
    Parcel Sandbox

user_2322869 · Answer

*:not(path) {all: revert;} will apply the revert but keep the SVG path intact

Svg not render <path> when added css all:revert

2 Answers