[Question] Dynamic values and class repetition

[juanbiberretta]

Hello!

I was hoping to clear up something that seems like a bug to me. I was under the impression, that when you had a, say, React component with dynamic values as the button in the docs example: https://cssinjs.org/react-jss/?v=v10.8.2#dynamic-values, that it generated a classname that other instances of the same button with the same dynamic values would reuse.

What I mean by that is that if I have multiple components that use the default prop values, since the css values at the end of the day are the same, it'll just reuse the classname and not generate another one.

If we take the following example based off of the Dynamic Values docs:

import * as React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  myButton: {
    padding: (props) => props.spacing,
  },
});

const Button = ({ children, ...props }) => {
  const classes = useStyles(props);

  return <button className={classes.myButton} />;
};

Button.defaultProps = {
  spacing: 10,
};

const IndexPage = () => {
  return (
    <>
      <Button />
      <Button />
      <Button />
    </>
  );
};

export default IndexPage;

and take a look at the generated styles:

.myButton-0-2-1 {}
.myButton-d0-0-2-2 {
  padding: 10px;
}
.myButton-d1-0-2-3 {
  padding: 10px;
}
.myButton-d2-0-2-4 {
  padding: 10px;
}

I fail to understand why myButton-d0-0-2-2, myButton-d1-0-2-3 and myButton-d2-0-2-4 are all separated out, as well as why .myButton-0-2-1 is empty?

Am I misunderstanding some core tenant of JSS? How can I reuse the same classname across all my components?

Thank you!

[aDarcy99]

Have you found an answer to this yet?

[juanbiberretta]

Have you found an answer to this yet?

Nope :/ you dealing with something similar?

[aDarcy99]

Yea noticed the same thing in one of my personal projects. I've switched to emotionJS for now, they have very similiar syntax if you use object styles. Main reason why I made the switch is it seems like theres a lot more community support and answers. Although you might not be in a situation where you can switch.

[seiyab]

For .myButton-0-2-1, it is a class name for static rules. In your example, it is empty because byButton doesn't have any static rules. If you add a static rule, it will be appear in .myButton-0-2-1 . https://codesandbox.io/s/goofy-forest-2z6g9?file=/src/App.tsx

For .myButton-d0-0-2-2, .myButton-d0-0-2-3, .myButton-d0-0-2-4, each of them is for each of Button. If a Button have different spacing, it is applied independently. Though some packages might reuse classes well comparing props, it is not straightforward. As far as I know, JSS just have classes for each component if you write dynamic style.

And, for some situation, JSS might cause memory leak for another reason https://github.com/cssinjs/jss/issues/1360 . I hope recent PR resolved it partly, but it might still happen.