Dynamic styles applied when it shouldn't be

[arackaf]

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown

System:

• OS: macOS 14.2
• CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
• Memory: 383.27 MB / 16.00 GB
• Shell: 5.9 - /bin/zsh

  Binaries:

• Node: 18.19.0 - /usr/local/Cellar/nvm/0.38.0/versions/node/v18.19.0/bin/node
• Yarn: 1.22.19 - /usr/local/Cellar/nvm/0.38.0/versions/node/v18.14.0/bin/yarn
• npm: 10.2.3 - /usr/local/Cellar/nvm/0.38.0/versions/node/v18.19.0/bin/npm
• pnpm: 8.6.12 - /usr/local/Cellar/nvm/0.38.0/versions/node/v18.14.0/bin/pnpm

  npmPackages:

• styled-components: ^6.1.3 => 6.1.3

Reproduction

Full Repo:

https://github.com/arackaf/styled-components-repro/blob/main/src/pages/index.tsx

import { useEffect, useRef, useState } from "react";
import styled, { css } from "styled-components";

type Props = {
  $active?: boolean;
};

const red = css`
  &,
  &:hover {
    color: red;
  }
`;

const Junk = styled.div<Props>`
  ${(props) => (props.$active ? red : null)}
`;

export default function Home() {
  const [active, setActive] = useState(false);

  const strictModeCrap = useRef(true);
  useEffect(() => {
    strictModeCrap.current &&
      setInterval(() => {
        setActive((val) => (val ? false : true));
      }, 2000);
    strictModeCrap.current = false;
  }, []);

  return (
    <main>
      <Junk $active={active}>Hello World - should be read {active ? "Yes" : "No"}</Junk>
    </main>
  );
}

Once the $active prop is ever true, the colors stick. This is probably closely related to

https://github.com/styled-components/styled-components/issues/4194

since removing the & removes the bug.

Steps to reproduce

See above

Expected Behavior

$active prop should be respected

Actual Behavior

It is not

[quantizor]

This is likely the same bug as https://github.com/styled-components/styled-components/issues/4224 which originates in stylis v4 (issue opened there.) unrelated, see followup comment

[quantizor]

Ok, after looking at this a bit more deeply I think there's a misunderstanding at play. https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

A single & refers to the static class of the styled component, meaning any instance of that component. Combining & with a selector, e.g. &:hover creates a prop-instance style that only applies when the related prop is applied. This prop-instance style can also be triggered without a selector by doubling it up && as a "precedence boost". I will admit this is confusing.

The only styles that get unmounted after injection are global styles, that's why the & style persists after it's first mounted. The reason for this is to avoid having to reference count every single styled component...

[quantizor]

Hmm although looking at v5 behavior we didn't target the static class when using & which is why this worked previously. Maybe we need to undo that change.

[arackaf]

@quantizor does your fix also solve

https://github.com/styled-components/styled-components/issues/4194

?

[quantizor]

Yup!