styled-components-bug.md

Using square brackets and escapes in rule names generates null style

https://github.com/styled-components/styled-components/tree/legacy-v5

Description

Using classes like grid-cols-[minmax(300px,_1fr)_3fr] from https://tailwindcss.com/docs/grid-template-columns#arbitrary-values causes silent failure with classes not being applied properly.

When debugging, I can see that Styled Components generate style rules such as .hHkAEe{null;} signaling there is some bug inside which stops processing all styles for a component if such class rule exists.

Environment

System:

• OS: macOS 13.2
• CPU: (12) arm64 Apple M2 Pro
• Memory: 71.45 MB / 32.00 GB
• Shell: 5.2.15 - /opt/homebrew/bin/bash

Binaries:

• Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
• Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
• npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm

npmPackages:

• styled-components: ^5.3.8 => 5.3.8

Reproduction

See codesandbox here https://codesandbox.io/p/sandbox/styled-components-minmax-bug-5gtzn0 for a full reproduction.

Steps to reproduce

1. Create styled component:

const TestStyledComponents = styled.div`
  border: 1px solid black;
  width: 400px;
  height: 400px;
  
  .grid {
    display: grid;
  }
  
  .grid-cols-\[minmax\(300px\2c _1fr\)_3fr\] {
      grid-template-columns: minmax(300px, 1fr) 3fr
  }
`;

2. Use it in your component code, i.e. <TestStyledComponents />
3. No styles for that element will be generated. If you remove .grid-cols-\[minmax\(300px\2c _1fr\)_3fr\] rule, it will work normally.

Expected Behavior

Rules should be processed properly, if I call component with <TestStyledComponents><div className="grid gap-2 grid-cols-[minmax(300px,_1fr)_3fr]">Test</div></TestStyledComponents> grid rules should be applied.

Actual Behavior

No styles applied.

Debugging leftovers

import { ServerStyleSheet, StyleSheetManager, StylisPlugin } from "styled-components";

const styles = {
  hasNameForId: (...args) => {
    logger.info("hasNameForId", ...args);
    return false;
  },
  insertRules: (...args) => {
    logger.info("insertRules", ...args);
  },
  reconstructWithOptions: (...args) => {
    logger.info("Reconstructing", ...args);
    return styles;
  }
} as unknown as ServerStyleSheet;

const p: StylisPlugin = (
  context: number,
  selector: string[],
  parent: string[],
  content: string,
  line: number,
  column: number,
  length: number
) => {
  logger.info("StylisPlugin", context, selector, parent, content, line, column, length);
  return;
};

<StyleSheetManager disableCSSOMInjection sheet={styles} stylisPlugins={[p]}>
<GlobalStyle enabled>xxxx</GlobalStyle>
</StyleSheetManager>