styled-components 6.3.10-prerelease.0 → 6.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constants.d.ts +2 -0
- package/dist/styled-components.browser.cjs.js +1 -1
- package/dist/styled-components.browser.cjs.js.map +1 -1
- package/dist/styled-components.browser.esm.js +1 -1
- package/dist/styled-components.browser.esm.js.map +1 -1
- package/dist/styled-components.cjs.js +1 -1
- package/dist/styled-components.cjs.js.map +1 -1
- package/dist/styled-components.esm.js +1 -1
- package/dist/styled-components.esm.js.map +1 -1
- package/dist/styled-components.js +15 -118
- package/dist/styled-components.js.map +1 -1
- package/dist/styled-components.min.js +1 -1
- package/dist/styled-components.min.js.map +1 -1
- package/native/dist/constants.d.ts +2 -0
- package/native/dist/dist/constants.d.ts +2 -0
- package/native/dist/styled-components.native.cjs.js +1 -1
- package/native/dist/styled-components.native.cjs.js.map +1 -1
- package/native/dist/styled-components.native.esm.js +1 -1
- package/native/dist/styled-components.native.esm.js.map +1 -1
- package/package.json +17 -18
- package/native/dist/bench/run.d.ts +0 -5
- package/native/dist/dist/bench/run.d.ts +0 -5
- package/native/dist/dist/test/globals.d.ts +0 -2
- package/native/dist/dist/test/utils.d.ts +0 -163
- package/native/dist/dist/test/veryLargeUnionType.d.ts +0 -1
- package/native/dist/dist/utils/rawElement.d.ts +0 -11
- package/native/dist/test/globals.d.ts +0 -2
- package/native/dist/test/utils.d.ts +0 -163
- package/native/dist/test/veryLargeUnionType.d.ts +0 -1
- package/native/dist/utils/rawElement.d.ts +0 -11
|
@@ -10,14 +10,9 @@
|
|
|
10
10
|
'data-styled';
|
|
11
11
|
var SC_ATTR_ACTIVE = 'active';
|
|
12
12
|
var SC_ATTR_VERSION = 'data-styled-version';
|
|
13
|
-
var SC_VERSION = "6.3.10
|
|
13
|
+
var SC_VERSION = "6.3.10";
|
|
14
14
|
var SPLITTER = '/*!sc*/\n';
|
|
15
15
|
var IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
|
|
16
|
-
/**
|
|
17
|
-
* Detect if we're running in a React Server Component environment.
|
|
18
|
-
* RSC environments lack createContext, making this a reliable indicator.
|
|
19
|
-
*/
|
|
20
|
-
var IS_RSC = typeof React.createContext === 'undefined';
|
|
21
16
|
var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
|
|
22
17
|
? SC_DISABLE_SPEEDY
|
|
23
18
|
: typeof process !== 'undefined' &&
|
|
@@ -1037,38 +1032,18 @@
|
|
|
1037
1032
|
stylis: mainStylis,
|
|
1038
1033
|
};
|
|
1039
1034
|
// Create context only if createContext is available, otherwise create a fallback
|
|
1040
|
-
var StyleSheetContext =
|
|
1041
|
-
|
|
1042
|
-
: {
|
|
1043
|
-
Provider: function (_a) {
|
|
1044
|
-
var children = _a.children;
|
|
1045
|
-
return children;
|
|
1046
|
-
},
|
|
1047
|
-
Consumer: function (_a) {
|
|
1048
|
-
var children = _a.children;
|
|
1049
|
-
return children(defaultContextValue);
|
|
1050
|
-
},
|
|
1051
|
-
};
|
|
1035
|
+
var StyleSheetContext = React.createContext(defaultContextValue)
|
|
1036
|
+
;
|
|
1052
1037
|
var StyleSheetConsumer = StyleSheetContext.Consumer;
|
|
1053
|
-
var StylisContext =
|
|
1054
|
-
|
|
1055
|
-
: {
|
|
1056
|
-
Provider: function (_a) {
|
|
1057
|
-
var children = _a.children;
|
|
1058
|
-
return children;
|
|
1059
|
-
},
|
|
1060
|
-
Consumer: function (_a) {
|
|
1061
|
-
var children = _a.children;
|
|
1062
|
-
return children(undefined);
|
|
1063
|
-
},
|
|
1064
|
-
};
|
|
1038
|
+
var StylisContext = React.createContext(undefined)
|
|
1039
|
+
;
|
|
1065
1040
|
function useStyleSheetContext() {
|
|
1066
1041
|
// Skip useContext if we're in an RSC environment without context support
|
|
1067
|
-
return
|
|
1042
|
+
return React.useContext(StyleSheetContext) ;
|
|
1068
1043
|
}
|
|
1069
1044
|
function StyleSheetManager(props) {
|
|
1070
1045
|
// In RSC environments without context support, StyleSheetManager becomes a no-op
|
|
1071
|
-
if (
|
|
1046
|
+
if (!React.useMemo) {
|
|
1072
1047
|
return props.children;
|
|
1073
1048
|
}
|
|
1074
1049
|
var styleSheet = useStyleSheetContext().styleSheet;
|
|
@@ -1394,18 +1369,8 @@
|
|
|
1394
1369
|
}());
|
|
1395
1370
|
|
|
1396
1371
|
// Create context only if createContext is available, otherwise create a fallback
|
|
1397
|
-
var ThemeContext =
|
|
1398
|
-
|
|
1399
|
-
: {
|
|
1400
|
-
Provider: function (_a) {
|
|
1401
|
-
var children = _a.children;
|
|
1402
|
-
return children;
|
|
1403
|
-
},
|
|
1404
|
-
Consumer: function (_a) {
|
|
1405
|
-
var children = _a.children;
|
|
1406
|
-
return children(undefined);
|
|
1407
|
-
},
|
|
1408
|
-
};
|
|
1372
|
+
var ThemeContext = React.createContext(undefined)
|
|
1373
|
+
;
|
|
1409
1374
|
var ThemeConsumer = ThemeContext.Consumer;
|
|
1410
1375
|
function mergeTheme(theme, outerTheme) {
|
|
1411
1376
|
if (!theme) {
|
|
@@ -1433,7 +1398,7 @@
|
|
|
1433
1398
|
*/
|
|
1434
1399
|
function useTheme() {
|
|
1435
1400
|
// Skip useContext if we're in an RSC environment without context support
|
|
1436
|
-
var theme =
|
|
1401
|
+
var theme = React.useContext(ThemeContext) ;
|
|
1437
1402
|
if (!theme) {
|
|
1438
1403
|
throw throwStyledComponentsError(18);
|
|
1439
1404
|
}
|
|
@@ -1443,10 +1408,6 @@
|
|
|
1443
1408
|
* Provide a theme to an entire react component tree via context
|
|
1444
1409
|
*/
|
|
1445
1410
|
function ThemeProvider(props) {
|
|
1446
|
-
// In RSC environments without context support, ThemeProvider becomes a no-op
|
|
1447
|
-
if (IS_RSC) {
|
|
1448
|
-
return props.children;
|
|
1449
|
-
}
|
|
1450
1411
|
var outerTheme = React.useContext(ThemeContext);
|
|
1451
1412
|
var themeContext = React.useMemo(function () { return mergeTheme(props.theme, outerTheme); }, [props.theme, outerTheme]);
|
|
1452
1413
|
if (!props.children) {
|
|
@@ -1459,12 +1420,6 @@
|
|
|
1459
1420
|
var seen = new Set();
|
|
1460
1421
|
var checkDynamicCreation = function (displayName, componentId) {
|
|
1461
1422
|
{
|
|
1462
|
-
// Skip check in RSC environments where:
|
|
1463
|
-
// 1. Components are always module-level (can't be in render functions)
|
|
1464
|
-
// 2. Hook detection is unreliable due to different module evaluation context
|
|
1465
|
-
if (IS_RSC) {
|
|
1466
|
-
return;
|
|
1467
|
-
}
|
|
1468
1423
|
var parsedIdString = componentId ? " with the id of \"".concat(componentId, "\"") : '';
|
|
1469
1424
|
var message_1 = "The component ".concat(displayName).concat(parsedIdString, " has been created dynamically.\n") +
|
|
1470
1425
|
"You may see this warning because you've called styled inside another component.\n" +
|
|
@@ -1593,7 +1548,7 @@
|
|
|
1593
1548
|
var instanceMap = new WeakMap();
|
|
1594
1549
|
var GlobalStyleComponent = function (props) {
|
|
1595
1550
|
var ssc = useStyleSheetContext();
|
|
1596
|
-
var theme =
|
|
1551
|
+
var theme = React.useContext(ThemeContext) ;
|
|
1597
1552
|
// Get or create instance ID for this stylesheet
|
|
1598
1553
|
var instance = instanceMap.get(ssc.styleSheet);
|
|
1599
1554
|
if (instance === undefined) {
|
|
@@ -1614,7 +1569,7 @@
|
|
|
1614
1569
|
}
|
|
1615
1570
|
// Client-side lifecycle: render styles in effect and clean up on unmount.
|
|
1616
1571
|
// false and IS_RSC are build/module-level constants, so this doesn't violate rules of hooks.
|
|
1617
|
-
|
|
1572
|
+
{
|
|
1618
1573
|
React.useLayoutEffect(function () {
|
|
1619
1574
|
// Re-render styles on every effect run to self-heal after any cleanup
|
|
1620
1575
|
// (e.g. StrictMode's simulated unmount/remount, error recovery).
|
|
@@ -1629,22 +1584,6 @@
|
|
|
1629
1584
|
};
|
|
1630
1585
|
}, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
|
|
1631
1586
|
}
|
|
1632
|
-
// RSC mode: output style tag.
|
|
1633
|
-
// Unlike regular styled components, global styles must NOT use React 19's
|
|
1634
|
-
// `precedence` attribute because it makes style tags persist as permanent
|
|
1635
|
-
// resources even after unmount. Global styles need lifecycle-based cleanup
|
|
1636
|
-
// for conditional rendering (e.g. body lock on modal open/close).
|
|
1637
|
-
if (IS_RSC) {
|
|
1638
|
-
var id = styledComponentId + instance;
|
|
1639
|
-
var css_1 = typeof window === 'undefined' ? ssc.styleSheet.getTag().getGroup(getGroupForId(id)) : '';
|
|
1640
|
-
if (css_1) {
|
|
1641
|
-
return React.createElement('style', {
|
|
1642
|
-
key: "".concat(styledComponentId, "-").concat(instance),
|
|
1643
|
-
'data-styled-global': styledComponentId,
|
|
1644
|
-
children: css_1,
|
|
1645
|
-
});
|
|
1646
|
-
}
|
|
1647
|
-
}
|
|
1648
1587
|
return null;
|
|
1649
1588
|
};
|
|
1650
1589
|
function renderStyles(instance, props, styleSheet, theme, stylis) {
|
|
@@ -1781,7 +1720,7 @@
|
|
|
1781
1720
|
|
|
1782
1721
|
function withTheme(Component) {
|
|
1783
1722
|
var WithTheme = React.forwardRef(function (props, ref) {
|
|
1784
|
-
var theme =
|
|
1723
|
+
var theme = React.useContext(ThemeContext) ;
|
|
1785
1724
|
var themeProp = determineTheme(props, theme, Component.defaultProps);
|
|
1786
1725
|
if (themeProp === undefined) {
|
|
1787
1726
|
console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"".concat(getComponentName(Component), "\""));
|
|
@@ -2285,7 +2224,7 @@
|
|
|
2285
2224
|
var seenUnknownProps = new Set();
|
|
2286
2225
|
function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
|
|
2287
2226
|
var componentAttrs = forwardedComponent.attrs, componentStyle = forwardedComponent.componentStyle, defaultProps = forwardedComponent.defaultProps, foldedComponentIds = forwardedComponent.foldedComponentIds, styledComponentId = forwardedComponent.styledComponentId, target = forwardedComponent.target;
|
|
2288
|
-
var contextTheme =
|
|
2227
|
+
var contextTheme = React.useContext(ThemeContext) ;
|
|
2289
2228
|
var ssc = useStyleSheetContext();
|
|
2290
2229
|
var shouldForwardProp = forwardedComponent.shouldForwardProp || ssc.shouldForwardProp;
|
|
2291
2230
|
if (React.useDebugValue) {
|
|
@@ -2294,7 +2233,7 @@
|
|
|
2294
2233
|
// NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
|
|
2295
2234
|
// but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
|
|
2296
2235
|
// should be an immutable value, but behave for now.
|
|
2297
|
-
var theme = determineTheme(props, contextTheme, defaultProps) || (
|
|
2236
|
+
var theme = determineTheme(props, contextTheme, defaultProps) || (EMPTY_OBJECT);
|
|
2298
2237
|
var context = resolveContext(componentAttrs, props, theme);
|
|
2299
2238
|
var elementToBeCreated = context.as || target;
|
|
2300
2239
|
var propsForElement = {};
|
|
@@ -2343,48 +2282,6 @@
|
|
|
2343
2282
|
propsForElement.ref = forwardedRef;
|
|
2344
2283
|
}
|
|
2345
2284
|
var element = React.createElement(elementToBeCreated, propsForElement);
|
|
2346
|
-
// RSC mode: emit a <style> tag per inheritance level so React 19 can
|
|
2347
|
-
// deduplicate shared base styles across sibling components (#5663).
|
|
2348
|
-
// Each tag's href includes registered names (CSS content hashes) so that
|
|
2349
|
-
// dynamic prop variations produce distinct hrefs and aren't incorrectly deduped.
|
|
2350
|
-
if (IS_RSC) {
|
|
2351
|
-
var styleTags = [];
|
|
2352
|
-
var cs = componentStyle;
|
|
2353
|
-
var _loop_1 = function () {
|
|
2354
|
-
var groupCss = ssc.styleSheet.getTag().getGroup(getGroupForId(cs.componentId));
|
|
2355
|
-
if (groupCss) {
|
|
2356
|
-
// Build content-aware href from the registered names for this group.
|
|
2357
|
-
// Names are generated from CSS content hashes, so identical CSS always
|
|
2358
|
-
// produces the same href (enabling dedup) while different CSS produces
|
|
2359
|
-
// different hrefs (preventing incorrect dedup of dynamic variants).
|
|
2360
|
-
var nameKey_1 = '';
|
|
2361
|
-
var names = ssc.styleSheet.names.get(cs.componentId);
|
|
2362
|
-
if (names) {
|
|
2363
|
-
names.forEach(function (n) {
|
|
2364
|
-
if (nameKey_1)
|
|
2365
|
-
nameKey_1 += '_';
|
|
2366
|
-
nameKey_1 += n;
|
|
2367
|
-
});
|
|
2368
|
-
}
|
|
2369
|
-
styleTags.push(React.createElement('style', {
|
|
2370
|
-
key: "sc-".concat(cs.componentId),
|
|
2371
|
-
precedence: 'styled-components',
|
|
2372
|
-
href: "sc-".concat(cs.componentId, "-").concat(nameKey_1),
|
|
2373
|
-
children: groupCss,
|
|
2374
|
-
}));
|
|
2375
|
-
}
|
|
2376
|
-
cs = cs.baseStyle;
|
|
2377
|
-
};
|
|
2378
|
-
while (cs) {
|
|
2379
|
-
_loop_1();
|
|
2380
|
-
}
|
|
2381
|
-
if (styleTags.length) {
|
|
2382
|
-
// Reverse so base styles appear before extended styles in the document,
|
|
2383
|
-
// matching GroupedTag's group ordering for correct CSS specificity.
|
|
2384
|
-
styleTags.reverse();
|
|
2385
|
-
return React.createElement.apply(React, __spreadArray(__spreadArray([React.Fragment, null], styleTags, false), [element], false));
|
|
2386
|
-
}
|
|
2387
|
-
}
|
|
2388
2285
|
return element;
|
|
2389
2286
|
}
|
|
2390
2287
|
function createStyledComponent(target, options, rules) {
|