Duplicated styles, why?

[einar-hjortdal]

This simple component

const Box = styled.div`
  background-color: lightgray;
  color: black;
  & a {
    font-weight: bold;
    color: ${props => `${props.$color}`};
    @media (max-width: 800px) {
      color: red;
  }
`;

class App extends Component {
  render() {
    return (
      <>
      <Box $color='blue'>
        <a>blue</a>
      </Box>
      <Box $color='green'>
        <a>green</a>
      </Box>
      </>
    );
  }
}

results in

.biclYi {
  background-color: lightgray;
  color: black;
}

.biclYi a {
  font-weight: bold;
  color: blue;
}

@media (max-width:800px) {
  .biclYi a {
    color: red;
  }
}

.bLMHlz {
  background-color: lightgray;
  color: black;
}

.bLMHlz a {
  font-weight: bold;
  color: green;
}

@media (max-width:800px) {
  .bLMHlz a {
    color: red;
  }
}

The class biclYi is identical to bLMHlz.
Why are such duplicated classes generated? I would like to understand why this happens

[O-BERNARDOFOEGBU]

has this been fixed?

[einar-hjortdal]

I thought about this for a long time and I do not think it is something that should be fixed.
The way styles are generated is somewhat wasteful and dumb but it guarantees no weird conflicts and overrides due to generation order.

[O-BERNARDOFOEGBU]

I understand that the duplication ensures no conflicts or overrides in the styles due to generation order, which is indeed important for maintaining a consistent and conflict-free styling approach.

However, I am curious if there are any best practices or patterns we could adopt to minimize the redundancy while still ensuring the safety of styles. Perhaps using shared base styles or a different strategy for dynamic props?

Looking forward to any insights or suggestions you might have!

perhaps I might come up with a pull request

[einar-hjortdal]

I gave up trying to figure that out.
If you're concerned about server response size:

1. if the response is static or can be cached, use gzip
2. if the response must be generated on-demand, get a ryzen server with nvme storage and gzip on each request, or give up 🤷‍♂️

I do this and it's alright.

[O-BERNARDOFOEGBU]

Absolutely, Coachonko, sometimes it's just easier to embrace the "wasteful and dumb" approach for the sake of peace and harmony in our styles. 😄

I'll keep the gzip and server power advice in my back pocket. Who knows, maybe I'll have a lightbulb moment and find a way to minimize the redundancy without causing any chaos. If that happens, you might just see a pull request from me. 🤞

Thanks for the insights! Or, you know, I could just join the "give up and move on" club—seems like a very healthy and viable option. 😂