Home / styled-components / styled-components
Repository Analysis

styled-components/styled-components

Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one API.

2.3 Likely human-written View on GitHub
2.3
Adjusted Score
2.3
Raw Score
100%
Time Factor
2026-05-30
Last Push
41,019
Stars
TypeScript
Language
127,448
Lines of Code
620
Files
182
Pattern Hits
2026-05-31
Scan Date

Score History

Severity Breakdown

CRITICAL 0HIGH 0MEDIUM 48LOW 134

Pattern Findings

182 matches across 6 categories. Click a row to expand file-level details.

Decorative Section Separators46 hits · 150 pts
SeverityFileLineSnippet
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts29// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts31// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts66// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts68// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts80// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts82// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts173// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts175// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts177// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts180// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts278// ────────────────────────────────────────────────────────────────────
MEDIUM…kages/styled-components/src/native/profile-pipeline.ts280// ────────────────────────────────────────────────────────────────────
MEDIUM…ages/styled-components/src/native/profile-animation.ts36// ── Color parse / serialize ────────────────────────────────────────
MEDIUM…ages/styled-components/src/native/profile-animation.ts101// ── Transform parse ────────────────────────────────────────────────
MEDIUM…ages/styled-components/src/native/profile-animation.ts112// ── Additive combine ───────────────────────────────────────────────
MEDIUMpackages/styled-components/src/native/polyfills.ts19// ──────────────────────────────────────────────────────────────────
MEDIUMpackages/styled-components/src/native/polyfills.ts21// ──────────────────────────────────────────────────────────────────
MEDIUMpackages/styled-components/src/native/polyfills.ts69// ──────────────────────────────────────────────────────────────────
MEDIUMpackages/styled-components/src/native/polyfills.ts71// ──────────────────────────────────────────────────────────────────
MEDIUMpackages/styled-components/src/native/polyfills.ts84// ── background-blend-mode ─────────────────────────────────────────
MEDIUMpackages/styled-components/src/native/polyfills.ts297// ──────────────────────────────────────────────────────────────────
MEDIUMpackages/styled-components/src/native/polyfills.ts299// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx12// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx14// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx24// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx26// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx344// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx346// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx369// ──────────────────────────────────────────────────────────────────
MEDIUM…s/styled-components/src/native/test/polyfills.test.tsx371// ──────────────────────────────────────────────────────────────────
MEDIUM…ed-components/src/native/transform/test/stress.test.ts87 // ─── compileNative cache-layer stress ─────────────────────────────────
MEDIUM…components/src/native/transform/polyfills/colorMath.ts436// ─── Inverse conversions (linear sRGB → wide-gamut space) ─────────────
MEDIUM…/src/native/transform/polyfills/test/resolvers.test.ts813// ──────────────────────────────────────────────────────────────────────
MEDIUM…/src/native/transform/polyfills/test/resolvers.test.ts831// ──────────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx122// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx125// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx197// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx199// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx354// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx356// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx389// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx394// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx451// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx456// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx553// ───────────────────────────────────────────────────────────────────
MEDIUMpackages/sandbox/app/container-queries/harness.tsx560// ───────────────────────────────────────────────────────────────────
Hyper-Verbose Identifiers73 hits · 77 pts
SeverityFileLineSnippet
LOWscripts/release-notes/build-prerelease-release-notes.ts29function changelogOptionsFromChangesetConfig(cwd: string): ChangelogOptions {
LOWscripts/release-notes/build-prerelease-release-notes.ts45function repoSlugFromRootPackageJson(cwd: string): string | undefined {
LOWscripts/release-notes/build-prerelease-release-notes.ts77export function resolveChangelogOptionsForBuild(
LOWscripts/release-notes/build-prerelease-release-notes.ts110export async function buildPrereleaseReleaseNotes(options: {
LOWscripts/release-notes/prerelease-grouping.ts26export function shouldSkipChangesetForPrevTag(
LOWscripts/release-notes/changelog.ts11function githubChangesetHistoryUrl(id: string, repo: string, branch: string): string {
LOWpackages/styled-components/src/native/polyfills.ts132export function applyBackgroundBlendModePolyfill(
LOW…ents/src/native/reanimated/mapDescriptorsToCSSLayer.ts80function offsetToReanimatedSelector(offset: number): string {
LOW…ents/src/native/reanimated/mapDescriptorsToCSSLayer.ts92export function compiledKeyframesToReanimatedKeyframes(
LOW…ents/src/native/reanimated/mapDescriptorsToCSSLayer.ts180function applyReduceMotionToCssLayer(out: Record<string, unknown>, reduceMotion: boolean): void {
LOW…/src/native/reanimated/mergeReanimatedResolvedStyle.ts11export function mergeReanimatedResolvedStyle(
LOW…led-components/src/native/animation/parse-shorthand.ts337export function animationDurationLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts345export function animationTimingFunctionLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts358export function animationIterationCountLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts371export function animationDirectionLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts375export function animationFillModeLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts379export function animationPlayStateLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts383export function animationCompositionLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts387export function transitionPropertyLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts393export function transitionDurationLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts401export function transitionTimingFunctionLonghand(tokens: Token[]): Dict<any> | null {
LOW…led-components/src/native/animation/parse-shorthand.ts405export function transitionBehaviorLonghand(tokens: Token[]): Dict<any> | null {
LOW…ckages/styled-components/src/native/animation/index.ts1402function buildSegmentedInterpolation(
LOW…ckages/styled-components/src/native/animation/index.ts1585function buildKeyframeInterpolations(
LOW…ages/styled-components/src/native/web-bridge/index.tsx759function applyBridgeRewritesToRules(rules: string[]): void {
LOW…mponents/src/native/transform/boxShadowSystemColors.ts79export function maybeExpandBoxShadowSystemColors(rawValue: string): string | Dict<any>[] {
LOW…/styled-components/src/native/transform/passthrough.ts145function isNonNegativeLengthPercentageToken(t: Token): boolean {
LOW…/styled-components/src/native/transform/passthrough.ts179function isValidEdgeOffsetPosition(tokens: Token[]): boolean {
LOW…/styled-components/src/native/transform/passthrough.ts208function isValidBackgroundPositionLayer(layer: string): boolean {
LOW…/styled-components/src/native/transform/passthrough.ts219function isValidBackgroundSizeLayer(layer: string): boolean {
LOW…/styled-components/src/native/transform/passthrough.ts235function isValidBackgroundRepeatLayer(layer: string): boolean {
LOW…/styled-components/src/native/transform/passthrough.ts257export function isValidLayeredBackgroundValue(camel: string, value: string): boolean {
LOW…/styled-components/src/native/transform/passthrough.ts264function normalizeBackgroundPositionLayer(layer: string): string {
LOW…/styled-components/src/native/transform/passthrough.ts282export function normalizeBackgroundPositionValue(value: string): string {
LOW…/styled-components/src/native/transform/passthrough.ts348export function substituteBackgroundSizeKeywordsForNative(value: string): string {
LOW…-components/src/native/transform/filterSystemColors.ts111export function maybeExpandFilterDropShadowSystemColors(rawValue: string): string | Dict<any>[] {
LOW…ed-components/src/native/transform/shorthandHelpers.ts110export function cssColorRawToRnStyleValue(raw: string): unknown {
LOW…nents/src/native/transform/backgroundGradientNative.ts29function directionKeywordToDirectionField(direction: string): string | null {
LOW…nents/src/native/transform/backgroundGradientNative.ts67function parseColorStopsSystemColors(
LOW…nents/src/native/transform/backgroundGradientNative.ts196export function maybeExpandBackgroundImageSystemColors(rawValue: string): string | Dict<any>[] {
LOW…d-components/src/native/transform/polyfills/mathFns.ts28export function resolveStaticMathFunction(
LOW…d-components/src/native/transform/polyfills/mathFns.ts298function readCommaOperandsWithLeadingKeyword(
LOW…ponents/src/native/transform/polyfills/systemColors.ts133export function getSystemColorPlatformColor(keyword: string): unknown | null {
LOW…components/src/native/transform/polyfills/colorMath.ts1080function colorChannelsToLinearSrgb(
LOW…components/src/native/transform/polyfills/colorMath.ts1226function rgbSpaceTripleFromOperand(
LOW…ed-components/src/native/transform/polyfills/scroll.ts9function overscrollBehaviorShorthand(tokens: Token[]): Dict<any> | null {
LOW…components/src/native/transform/polyfills/resolvers.ts650function embeddedLightDarkResolver(value: string): Resolver | null {
LOW…components/src/native/transform/polyfills/resolvers.ts1009function minMaxClampResolverFromFn(name: string, fn: Token, opts?: BuildOpts): Resolver | null {
LOW…-components/src/native/transform/polyfills/textWrap.ts17function warnIosTextWrapBalancePretty(style: string): void {
LOW…led-components/src/native/transform/handlers/border.ts36function warnUnsupportedBorderStyle(name: string): void {
LOW…led-components/src/native/transform/handlers/border.ts58function normalizeNativeBorderStyle(name: string): Dict<any> | null {
LOW…tyled-components/src/native/transform/handlers/text.ts136export function textDecorationLineShorthand(tokens: Token[]): Dict<any> | null {
LOW…tyled-components/src/native/transform/handlers/text.ts174export function textShadowOffsetShorthand(tokens: Token[]): Dict<any> | null {
LOW…components/src/native/transform/handlers/background.ts376export function backgroundAttachmentLonghand(tokens: Token[]): Dict<any> | null {
LOW…ed-components/src/native/transform/handlers/spacing.ts97function collapseCircularSlashRadius(tokens: Token[]): Dict<any> | null {
LOWpackages/styled-components/src/utils/error.ts28export default function throwStyledComponentsError(
LOWpackages/styled-components/src/models/compileNative.ts142function isNonPseudoConditionalStyle(entry: ConditionalStyle): entry is NonPseudoConditionalStyle {
LOWpackages/styled-components/src/models/compileNative.ts906function stripSpecialCasesFromConditional(styles: Dict<any>, entry: ConditionalStyle): Dict<any> {
LOW…/styled-components/src/models/StyledNativeComponent.ts438function mergeCustomPropertiesIntoCascade(
LOW…/styled-components/src/models/StyledNativeComponent.ts701function nthChildOfSelectorMatches(
13 more matches not shown…
Over-Commented Block54 hits · 54 pts
SeverityFileLineSnippet
LOWpackages/styled-components/tsconfig.json21 "target": "ES2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES20
LOWpackages/styled-components/tsconfig.json41
LOWpackages/styled-components/tsconfig.json61 // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
LOWpackages/styled-components/src/types.ts301> extends React.ForwardRefExoticComponent<
LOW…led-components/src/native/test/important-spec.test.tsx1// CSS Cascade and Inheritance Module Level 4 — `!important` semantics
LOW…components/src/native/test/css-variables-spec.test.tsx321 // Strict spec result for the chain below would be `color:
LOW…ckages/styled-components/src/native/animation/index.ts1761
LOW…ckages/styled-components/src/native/animation/index.ts1781 // loop(remaining)])` so the adapter resumes at the captured
LOW…ckages/styled-components/src/native/animation/index.ts1921 const partial = isReverse ? makeReverse(partialDuration, 0) : makeForward(partialDuration, 0);
LOW…ckages/styled-components/src/native/animation/index.ts1961 //
LOW…ckages/styled-components/src/native/animation/index.ts2061 } else {
LOW…ckages/styled-components/src/native/animation/index.ts2161 // never restart (`!animS.finished` guard). Stale completions after a
LOW…ts/src/native/animation/test/animated-adapter.test.tsx301 expect(config.duration).toBe(280);
LOW…ts/src/native/animation/test/animated-adapter.test.tsx1301 // combination is direct; same-unit strings (`'10px'`) parse,
LOW…ts/src/native/animation/test/animated-adapter.test.tsx1321 // paint mix.
LOW…ages/styled-components/src/native/web-bridge/index.tsx21 * @see ../../test/rn-web-contract.test.tsx — locks the $$css contract
LOW…ages/styled-components/src/native/web-bridge/index.tsx741 cls + ':not(textarea):not(input) { display: flex; align-items: ' + flexValue + '; }',
LOW…ckages/styled-components/src/native/transform/index.ts141 if (passthroughKeys.length === 1) {
LOW…ckages/styled-components/src/native/transform/index.ts221 // modern function forms get stripped to `undefined` (transparent)
LOW…onents/src/native/transform/polyfills/genericFamily.ts21 // No clean serif system face; Times New Roman ships on iOS since 2.0.
LOW…components/src/native/transform/polyfills/resolvers.ts121// viewport size; on RN small/large/dynamic all collapse to env.media
LOW…components/src/native/transform/polyfills/resolvers.ts201 // through to the browser's CSS engine, which resolves `%` against the
LOW…components/src/native/transform/polyfills/resolvers.ts241 if (c0 === 0x72 /* r */ && value.startsWith('round(line-width,')) {
LOW…/src/native/transform/polyfills/test/resolvers.test.ts821//
LOW…/src/native/transform/polyfills/test/resolvers.test.ts1621 });
LOW…/src/native/transform/polyfills/test/resolvers.test.ts1841});
LOW…/src/native/transform/polyfills/test/resolvers.test.ts1981});
LOW…/src/native/transform/polyfills/test/polyfills.test.ts1421 });
LOW…/src/native/transform/polyfills/test/polyfills.test.ts1841 // text-wrap-mode = wrap | nowrap
LOW…/src/native/transform/polyfills/test/polyfills.test.ts2041 // Initial: manual
LOW…/src/native/transform/polyfills/test/polyfills.test.ts2681});
LOW…/src/native/transform/polyfills/test/polyfills.test.ts2701 // visible vs. no effect at all). A one-time informational warn
LOW…/src/native/transform/polyfills/test/polyfills.test.ts3161 describe('§4.1 alpha clamp (Color 5 §4.1)', () => {
LOWpackages/styled-components/src/test/treeshake.test.ts421 // / objectToTemplate + Phase C TemplateValue + interpolation-sentinel
LOWpackages/styled-components/src/models/compileNative.ts381 // auto` reaches Android's system hyphenator instead of being dropped as
LOWpackages/styled-components/src/models/compileNative.ts401 // `interactivity: inert` on rn-web: a single HTML `inert` attribute
LOWpackages/styled-components/src/models/compileNative.ts561 // never sees the prop change.
LOWpackages/styled-components/src/models/compileNative.ts1741 node.prop + ':' + v
LOWpackages/styled-components/src/parser/parser.test.ts361
LOWpackages/styled-components/src/parser/parser.test.ts401});
LOWpackages/styled-components/src/parser/nativePlan.ts141 const notCls = detectNot(selectors);
LOWpackages/ios-benchmark/ios/iosbench/SCProfiler.h1#import <React/RCTBridgeModule.h>
LOWpackages/native-showcase/babel.config.js1// Substitutes styled-components' build-time constants so Metro can
LOW…se/ios/NativeShowcase/NativeShowcase-Bridging-Header.h1//
LOW…ages/native-showcase/src/components/ScreenScaffold.tsx21
LOW…ages/native-showcase/src/components/ScreenScaffold.tsx361 // deliberately do NOT pass `initialScrollIndex` to FlatList. Without
LOW…ges/native-showcase/src/widgets/ContainerQueryCard.tsx81// Positioning shell + container host. Owns the controlled width and
LOW…ckages/native-showcase/src/widgets/GradientPalette.tsx41// Stars-and-stripes:
LOW…ckages/native-showcase/src/widgets/GradientPalette.tsx61// platform without any extra runtime prop.
LOWpackages/native-showcase/src/widgets/PlatonicLogo.tsx541// Component - hero variant. Auto-cycles through all 5 solids while idle,
LOWpackages/native-showcase/src/widgets/PlatonicLogo.tsx701 // Pointer-equivalent angular velocity in (dx, dy) per frame. Initialized
LOWpackages/native-showcase/src/widgets/PlatonicLogo.tsx821 // per-frame deltas are scaled by `dt * 60` so visual rate is constant
LOWpackages/sandbox/next-env.d.ts1/// <reference types="next" />
LOW.github/workflows/codeql-analysis.yml1# For most projects, this workflow file will not need changing; you simply need
Verbosity Indicators5 hits · 8 pts
SeverityFileLineSnippet
LOW…/src/native/transform/polyfills/test/polyfills.test.ts1760 // Step 2: "If the last control point lacks an input progress value,
LOW…/src/native/transform/polyfills/test/polyfills.test.ts1767 // Step 3: "If any control point has an input progress value that is
LOW…/src/native/transform/polyfills/test/polyfills.test.ts1781 // Step 4: "If any control point still lacks an input progress
LOW…ges/sandbox/app/global-style-test/autopilot-client.tsx82 // Step 4: Mount conditional style
LOW…ges/sandbox/app/global-style-test/autopilot-client.tsx106 // Step 5: Unmount conditional style
AI Slop Vocabulary2 hits · 5 pts
SeverityFileLineSnippet
MEDIUMpackages/ios-benchmark/src/app/Benchmark/index.tsx90 trimmedMean: number; // 5% trimmed each side, robust to GC spikes
MEDIUMpackages/ios-benchmark/src/app/Benchmark/math.ts33// Inter-quartile range (Q3 - Q1). A robust spread metric.
Fake / Example Data2 hits · 2 pts
SeverityFileLineSnippet
LOWpackages/sandbox/app/perf/lib/data-generators.ts237 preview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.',
LOWpackages/sandbox/app/perf/lib/data-generators.ts237 preview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.',