Additional closing brackets result in globally applied css rules - Githubissues

styled-components / styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

https://styled-components.com

MIT License

40.11k stars 2.48k forks source link

Additional closing brackets result in globally applied css rules #4253

Open jzaeske opened 3 months ago

jzaeske commented 3 months ago

Environment

System:

OS: macOS 14.2.1
CPU: (12) arm64 Apple M2 Pro
Memory: 106.66 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
npmPackages:
styled-components: ^6.0.0 => 6.1.6

but also in provided stackblitz with version 6.1.8

Reproduction

see Stackblitz https://react-ts-3sywqk.stackblitz.io

InnerContainerError applies the rule for h1 globally, so the h1 outside the component is also rendered green.

Steps to reproduce

Add additional } after a ${...}block.

Expected Behavior

error message for wrong bracket closing
css rules only applied in components scope

Actual Behavior

no error message
css rules that follow the wrong } are applied to global scope