Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Better classnames for development mode

See original GitHub issue

At the moment the classnames are mangled into base64 hash or something:

e.g.

class="sc-jAaTju kAxljF sc-bdVaJa iHZvIS"

It would be nice to somehow allow rebass to pass the folder_file_componentName:base64 for development mode. The same as how css-loader does it.

Issue Analytics

State:
Created 5 years ago
Comments:12 (1 by maintainers)

Top GitHub Comments

2reactions

MartinDawsoncommented, Jul 8, 2018

@johnmcdowall babel-plugin-styled-components seems to work for styled-components but not rebass components. Is their anything for rebass as well?

1reaction

clarkkozakcommented, Apr 1, 2020

@baddox I believe your code demonstrates what is the desired output and what is the immediate issue. Well done!

Seems like this has been mentioned to the emotion team as well:

https://github.com/emotion-js/emotion/issues/756

The issue above suggests a way to create a solid headstart on where a PR could be made to make sure that the autoLabel feature can work for rebass components. Due to the nature of abstracting components, it may be quite the undertaking.

Maybe even a fork of babel-plugin-emotion to babel-plugin-rebass? I’m unsure. I’m still learning this system. I’m here because wanted to see how good code is maintained, and perhaps I could help

@jxnblk and anyone else; please correct me if I’m wrong about anything.

Top Results From Across the Web

More meaningful/semantic class names during development ...

Is it possible to use class names similar to styled components names. Maybe with random prefix like: const Wrapper = styled.div` ...

Material UI class names in production do not resolve correctly

Class names generated by makeStyles in production break functionalty that apparently works correctly in development mode.

6 Tips for Tailwind CSS Development (with resources!)

Let's start with something that is highly recommended for every project: using clsx for joining class names. Clsx is a simple JavaScript utility ......

How to configure CSS Modules for webpack - LogRocket Blog

This is achieved by creating a unique class name for CSS selectors, ... mode: "development", devServer: { static: path.resolve(__dirname, ".

Element.getElementsByClassName() - Web APIs | MDN

A string containing one or more class names to match on, separated by whitespace ... Note: In quirks mode, the class names are...