substrate-light-ui

substrate-light-ui copied to clipboard

After implementing styled-components into the Fether project in this PR https://github.com/paritytech/fether/pull/357, I found that when I tried went to debug in Dev Tools > Elements, it displays the CSS class name value of HTML elements as a hash of the styled-component name i.e. <div class="sc-EHOje dGUdfn">, whereas previously it showed the class name.

To solve the issue I installed relevant tooling (see https://www.styled-components.com/docs/tooling) 'babel-plugin-styled-components' plugin that displays the style-component name that we specified instead of just the hash that's meaningless to me i.e. <div class="App__DivContent-sc-1l7hwf9-0 jhbGUD">, where DivContent is the name of the styled-component that we created.

However in this project we are using TypeScript, so we'd need this plugin https://www.styled-components.com/docs/tooling#typescript-plugin

I wish we could use this plugin right now, however, AFAICT, the plugin maintainers currently only have an integration path through webpack, which we can't touch without ejecting our CRA app.

I'd prefer not to eject and wait for them to bring a direct integration option through tsc compiler https://github.com/Microsoft/TypeScript/issues/16607 into production on their end before integrating the plugin with this repo.

Option 2 is to Rewire - https://github.com/timarney/react-app-rewired - though they warn very clearly: As of Create React App 2.0 this repo is "lightly" maintained mostly by the community at this point.

FWIW we're using craco with CRA2 in fether