* { all: initial; } in css is breaking the react app

[Rutulpatel7077]

Hey guys,
I have one problem working with any and even simple app of react.

Here is the link of jsfield

https://jsfiddle.net/rutul7077/3qjy7xyp/

anywhere when you use!

 * {
 all:initial;
 all: unset; 
}

Output || Error

* { all:initial; } body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } .done { color: rgba(0, 0, 0, 0.3); text-decoration: line-through; } input { margin-right: 5px; } React window.onload=function(){ class TodoApp extends React.Component { constructor(props) { super(props) this.state = { items: [ { text: "Learn JavaScript", done: false }, { text: "Learn React", done: false }, { text: "Play around in JSFiddle", done: true }, { text: "Build something awesome", done: true } ] } } render() { return ( <div> <h2>Todos:</h2> <ol> {this.state.items.map(item => ( <li key={item.id}> <label> <input type="checkbox" disabled readOnly checked={item.done} /> <span className={item.done ? "done" : ""}>{item.text}</span> </label> </li> ))} </ol> </div> ) } } ReactDOM.render(<TodoApp />, document.querySelector("#app")) } window.onload = function () { let TodoApp = class TodoApp extends React.Component { constructor(props) { super(props); this.state = { items: [{ text: "Learn JavaScript", done: false }, { text: "Learn React", done: false }, { text: "Play around in JSFiddle", done: true }, { text: "Build something awesome", done: true }] }; } render() { return React.createElement( "div", null, React.createElement( "h2", null, "Todos:" ), React.createElement( "ol", null, this.state.items.map(item => React.createElement( "li", { key: item.id }, React.createElement( "label", null, React.createElement("input", { type: "checkbox", disabled: true, readOnly: true, checked: item.done }), React.createElement( "span", { className: item.done ? "done" : "" }, item.text ) ) )) ) ); } }; ReactDOM.render(React.createElement(TodoApp, null), document.querySelector("#app")); }; //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZSBCYWJlbCBzY3JpcHQiXSwibmFtZXMiOlsid2luZG93Iiwib25sb2FkIiwiVG9kb0FwcCIsIlJlYWN0IiwiQ29tcG9uZW50IiwiY29uc3RydWN0b3IiLCJwcm9wcyIsInN0YXRlIiwiaXRlbXMiLCJ0ZXh0IiwiZG9uZSIsInJlbmRlciIsIm1hcCIsIml0ZW0iLCJpZCIsIlJlYWN0RE9NIiwiZG9jdW1lbnQiLCJxdWVyeVNlbGVjdG9yIl0sIm1hcHBpbmdzIjoiOztBQU9BQSxPQUFPQyxNQUFQLEdBQWMsWUFBVTtBQUFBLE1BTWxCQyxPQU5rQixHQU14QixNQUFNQSxPQUFOLFNBQXNCQyxNQUFNQyxTQUE1QixDQUFzQztBQUNwQ0MsZ0JBQVlDLEtBQVosRUFBbUI7QUFDakIsWUFBTUEsS0FBTjtBQUNBLFdBQUtDLEtBQUwsR0FBYTtBQUNaQyxlQUFPLENBQ0wsRUFBRUMsTUFBTSxrQkFBUixFQUE0QkMsTUFBTSxLQUFsQyxFQURLLEVBRUosRUFBRUQsTUFBTSxhQUFSLEVBQXVCQyxNQUFNLEtBQTdCLEVBRkksRUFHSixFQUFFRCxNQUFNLHlCQUFSLEVBQW1DQyxNQUFNLElBQXpDLEVBSEksRUFJSixFQUFFRCxNQUFNLHlCQUFSLEVBQW1DQyxNQUFNLElBQXpDLEVBSkk7QUFESyxPQUFiO0FBUUQ7O0FBRURDLGFBQVM7QUFDUCxhQUNFO0FBQUE7QUFBQTtBQUNFO0FBQUE7QUFBQTtBQUFBO0FBQUEsU0FERjtBQUVFO0FBQUE7QUFBQTtBQUNDLGVBQUtKLEtBQUwsQ0FBV0MsS0FBWCxDQUFpQkksR0FBakIsQ0FBcUJDLFFBQ3BCO0FBQUE7QUFBQSxjQUFJLEtBQUtBLEtBQUtDLEVBQWQ7QUFDRTtBQUFBO0FBQUE7QUFDRSw2Q0FBTyxNQUFLLFVBQVosRUFBdUIsY0FBdkIsRUFBZ0MsY0FBaEMsRUFBeUMsU0FBU0QsS0FBS0gsSUFBdkQsR0FERjtBQUVFO0FBQUE7QUFBQSxrQkFBTSxXQUFXRyxLQUFLSCxJQUFMLEdBQVksTUFBWixHQUFxQixFQUF0QztBQUEyQ0cscUJBQUtKO0FBQWhEO0FBRkY7QUFERixXQUREO0FBREQ7QUFGRixPQURGO0FBZUQ7QUE3Qm1DLEdBTmQ7OztBQXNDeEJNLFdBQVNKLE1BQVQsQ0FBZ0Isb0JBQUMsT0FBRCxPQUFoQixFQUE2QkssU0FBU0MsYUFBVCxDQUF1QixNQUF2QixDQUE3QjtBQU1DLENBNUNEIiwiZmlsZSI6IklubGluZSBCYWJlbCBzY3JpcHQiLCJzb3VyY2VzQ29udGVudCI6WyJcblxuXG5cblxuXG5cbndpbmRvdy5vbmxvYWQ9ZnVuY3Rpb24oKXtcblxuXG5cblxuXG5jbGFzcyBUb2RvQXBwIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcylcbiAgICB0aGlzLnN0YXRlID0ge1xuICAgIFx0aXRlbXM6IFtcbiAgICAgIFx0eyB0ZXh0OiBcIkxlYXJuIEphdmFTY3JpcHRcIiwgZG9uZTogZmFsc2UgfSxcbiAgICAgICAgeyB0ZXh0OiBcIkxlYXJuIFJlYWN0XCIsIGRvbmU6IGZhbHNlIH0sXG4gICAgICAgIHsgdGV4dDogXCJQbGF5IGFyb3VuZCBpbiBKU0ZpZGRsZVwiLCBkb25lOiB0cnVlIH0sXG4gICAgICAgIHsgdGV4dDogXCJCdWlsZCBzb21ldGhpbmcgYXdlc29tZVwiLCBkb25lOiB0cnVlIH1cbiAgICAgIF1cbiAgICB9XG4gIH1cbiAgXG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAgPGgyPlRvZG9zOjwvaDI+XG4gICAgICAgIDxvbD5cbiAgICAgICAge3RoaXMuc3RhdGUuaXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxsaSBrZXk9e2l0ZW0uaWR9PlxuICAgICAgICAgICAgPGxhYmVsPlxuICAgICAgICAgICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgZGlzYWJsZWQgcmVhZE9ubHkgY2hlY2tlZD17aXRlbS5kb25lfSAvPiBcbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPXtpdGVtLmRvbmUgPyBcImRvbmVcIiA6IFwiXCJ9PntpdGVtLnRleHR9PC9zcGFuPlxuICAgICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICApKX1cbiAgICAgICAgPC9vbD5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFRvZG9BcHAgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIjYXBwXCIpKVxuXG5cblxuXG5cbn1cblxuIl19 Todos:Learn JavaScriptLearn ReactPlay around in JSFiddleBuild something awesome // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "None" }], "*") }

[nmain]

There's nothing React specific about this, and it can be easily reproduced with the CSS inspector in Chrome and Firefox on all sites, including those that don't use React at all.

Among other things, * { all: initial } makes the content in <script> and <style> tags visible, and that's what you're seeing.

I don't know if this is a bug, but if it is, it's in browsers, not React.

[Rutulpatel7077]

@nmain How do I prevent this?

[nmain]

Don't use * { all: initial }. I wasn't familiar with the syntax so I looked it up; MDN has a straightforward write-up and it's most certainly not what you want anywhere, ever. When you use it, then you must supply everything that would normally be UA styles, such as div { display: block } and script { display: none }. You'd be better off working from one of the standard CSS resets that you can find on various websites.