styled-components 6.3.13-prerelease.0 → 6.4.0-prerelease.0

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.
Files changed (52) hide show
  1. package/README.md +35 -104
  2. package/dist/constructors/constructWithOptions.d.ts +6 -6
  3. package/dist/constructors/css.d.ts +1 -1
  4. package/dist/constructors/styled.d.ts +1 -1
  5. package/dist/models/ServerStyleSheet.d.ts +3 -1
  6. package/dist/models/StyleSheetManager.d.ts +6 -0
  7. package/dist/native/index.d.ts +1 -1
  8. package/dist/sheet/Sheet.d.ts +1 -0
  9. package/dist/sheet/Tag.d.ts +3 -3
  10. package/dist/sheet/dom.d.ts +1 -1
  11. package/dist/sheet/types.d.ts +1 -0
  12. package/dist/styled-components.browser.cjs.js +1 -1
  13. package/dist/styled-components.browser.cjs.js.map +1 -1
  14. package/dist/styled-components.browser.esm.js +1 -1
  15. package/dist/styled-components.browser.esm.js.map +1 -1
  16. package/dist/styled-components.cjs.js +1 -1
  17. package/dist/styled-components.cjs.js.map +1 -1
  18. package/dist/styled-components.esm.js +1 -1
  19. package/dist/styled-components.esm.js.map +1 -1
  20. package/dist/styled-components.js +48 -38
  21. package/dist/styled-components.js.map +1 -1
  22. package/dist/styled-components.min.js +1 -1
  23. package/dist/styled-components.min.js.map +1 -1
  24. package/dist/types.d.ts +15 -3
  25. package/dist/utils/nonce.d.ts +3 -1
  26. package/native/dist/constructors/constructWithOptions.d.ts +6 -6
  27. package/native/dist/constructors/css.d.ts +1 -1
  28. package/native/dist/constructors/styled.d.ts +1 -1
  29. package/native/dist/dist/constructors/constructWithOptions.d.ts +6 -6
  30. package/native/dist/dist/constructors/css.d.ts +1 -1
  31. package/native/dist/dist/constructors/styled.d.ts +1 -1
  32. package/native/dist/dist/models/ServerStyleSheet.d.ts +3 -1
  33. package/native/dist/dist/models/StyleSheetManager.d.ts +6 -0
  34. package/native/dist/dist/native/index.d.ts +1 -1
  35. package/native/dist/dist/sheet/Sheet.d.ts +1 -0
  36. package/native/dist/dist/sheet/Tag.d.ts +3 -3
  37. package/native/dist/dist/sheet/dom.d.ts +1 -1
  38. package/native/dist/dist/sheet/types.d.ts +1 -0
  39. package/native/dist/dist/types.d.ts +15 -3
  40. package/native/dist/dist/utils/nonce.d.ts +3 -1
  41. package/native/dist/models/ServerStyleSheet.d.ts +3 -1
  42. package/native/dist/models/StyleSheetManager.d.ts +6 -0
  43. package/native/dist/native/index.d.ts +1 -1
  44. package/native/dist/sheet/Sheet.d.ts +1 -0
  45. package/native/dist/sheet/Tag.d.ts +3 -3
  46. package/native/dist/sheet/dom.d.ts +1 -1
  47. package/native/dist/sheet/types.d.ts +1 -0
  48. package/native/dist/styled-components.native.cjs.js.map +1 -1
  49. package/native/dist/styled-components.native.esm.js.map +1 -1
  50. package/native/dist/types.d.ts +15 -3
  51. package/native/dist/utils/nonce.d.ts +3 -1
  52. package/package.json +8 -3
package/dist/styled-components.js CHANGED
@@ -10,7 +10,7 @@
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.13-prerelease.0";
13
+ var SC_VERSION = "6.4.0-prerelease.0";
14
14
  var SPLITTER = '/*!sc*/\n';
15
15
  var IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
16
16
  var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -390,8 +390,30 @@
390
390
  }
391
391
  };
392
392
 
393
+ /**
394
+ * Resolve a CSP nonce from available sources (in priority order):
395
+ * 1. <meta property="csp-nonce"> (Vite puts nonce in the `nonce` attr)
396
+ * 2. <meta name="sc-nonce"> (SC convention, nonce in `content` attr)
397
+ * 3. __webpack_nonce__ global (legacy)
398
+ *
399
+ * For Next.js/Remix, pass nonces explicitly via StyleSheetManager or
400
+ * ServerStyleSheet instead—auto-detection doesn't apply to header-based nonces.
401
+ */
402
+ var cached = false;
393
403
  function getNonce() {
394
- return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
404
+ if (cached !== false)
405
+ return cached;
406
+ if (typeof document !== 'undefined') {
407
+ // Vite sets the nonce in the `nonce` attribute. Browsers expose this via
408
+ // the .nonce DOM property but return "" from getAttribute('nonce').
409
+ var viteMeta = document.head.querySelector('meta[property="csp-nonce"]');
410
+ if (viteMeta)
411
+ return (cached = viteMeta.nonce || viteMeta.getAttribute('content') || undefined);
412
+ var scMeta = document.head.querySelector('meta[name="sc-nonce"]');
413
+ if (scMeta)
414
+ return (cached = scMeta.getAttribute('content') || undefined);
415
+ }
416
+ return (cached = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : undefined);
395
417
  }
396
418
 
397
419
  /** Find last style element if any inside target */
@@ -400,7 +422,7 @@
400
422
  return arr[arr.length - 1];
401
423
  };
402
424
  /** Create a style element inside `target` or <head> after the last */
403
- var makeStyleTag = function (target) {
425
+ var makeStyleTag = function (target, nonce) {
404
426
  var head = document.head;
405
427
  var parent = target || head;
406
428
  var style = document.createElement('style');
@@ -408,9 +430,9 @@
408
430
  var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
409
431
  style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
410
432
  style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
411
- var nonce = getNonce();
412
- if (nonce)
413
- style.setAttribute('nonce', nonce);
433
+ var resolvedNonce = nonce || getNonce();
434
+ if (resolvedNonce)
435
+ style.setAttribute('nonce', resolvedNonce);
414
436
  parent.insertBefore(style, nextSibling);
415
437
  return style;
416
438
  };
@@ -433,31 +455,23 @@
433
455
  }
434
456
  throw throwStyledComponentsError(17);
435
457
  };
436
- /** Remove a GlobalStyle's SSR-rendered inline style tag(s) from the DOM */
437
- var removeGlobalStyleTag = function (componentId, target) {
438
- if (typeof document === 'undefined')
439
- return;
440
- var container = target !== null && target !== void 0 ? target : document;
441
- var styleTags = container.querySelectorAll("style[data-styled-global=\"".concat(componentId, "\"]"));
442
- styleTags.forEach(function (tag) { return tag.remove(); });
443
- };
444
458
 
445
459
  /** Create a CSSStyleSheet-like tag depending on the environment */
446
460
  var makeTag = function (_a) {
447
- var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target;
461
+ var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target, nonce = _a.nonce;
448
462
  if (isServer) {
449
463
  return new VirtualTag(target);
450
464
  }
451
465
  else if (useCSSOMInjection) {
452
- return new CSSOMTag(target);
466
+ return new CSSOMTag(target, nonce);
453
467
  }
454
468
  else {
455
- return new TextTag(target);
469
+ return new TextTag(target, nonce);
456
470
  }
457
471
  };
458
472
  var CSSOMTag = /** @class */ (function () {
459
- function CSSOMTag(target) {
460
- this.element = makeStyleTag(target);
473
+ function CSSOMTag(target, nonce) {
474
+ this.element = makeStyleTag(target, nonce);
461
475
  // Avoid Edge bug where empty style elements don't create sheets
462
476
  this.element.appendChild(document.createTextNode(''));
463
477
  this.sheet = getSheet(this.element);
@@ -491,8 +505,8 @@
491
505
  }());
492
506
  /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
493
507
  var TextTag = /** @class */ (function () {
494
- function TextTag(target) {
495
- this.element = makeStyleTag(target);
508
+ function TextTag(target, nonce) {
509
+ this.element = makeStyleTag(target, nonce);
496
510
  this.nodes = this.element.childNodes;
497
511
  this.length = 0;
498
512
  }
@@ -1327,13 +1341,16 @@
1327
1341
  sheet = props.sheet;
1328
1342
  }
1329
1343
  else if (props.target) {
1330
- sheet = sheet.reconstructWithOptions({ target: props.target }, false);
1344
+ sheet = sheet.reconstructWithOptions({ target: props.target, nonce: props.nonce }, false);
1345
+ }
1346
+ else if (props.nonce !== undefined) {
1347
+ sheet = sheet.reconstructWithOptions({ nonce: props.nonce });
1331
1348
  }
1332
1349
  if (props.disableCSSOMInjection) {
1333
1350
  sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });
1334
1351
  }
1335
1352
  return sheet;
1336
- }, [props.disableCSSOMInjection, props.sheet, props.target, styleSheet]);
1353
+ }, [props.disableCSSOMInjection, props.nonce, props.sheet, props.target, styleSheet]);
1337
1354
  var stylis = React.useMemo(function () {
1338
1355
  return createStylisInstance({
1339
1356
  options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },
@@ -1543,25 +1560,15 @@
1543
1560
  if (rules.some(function (rule) { return typeof rule === 'string' && rule.indexOf('@import') !== -1; })) {
1544
1561
  console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.");
1545
1562
  }
1546
- // Render styles during component execution
1547
- var shouldRenderStyles = typeof window === 'undefined' || !ssc.styleSheet.server;
1548
- if (shouldRenderStyles) {
1549
- renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
1550
- }
1551
1563
  // Client-side lifecycle: render styles in effect and clean up on unmount.
1552
1564
  // false and IS_RSC are build/module-level constants, so this doesn't violate rules of hooks.
1553
1565
  {
1554
1566
  React.useLayoutEffect(function () {
1555
- // Re-render styles on every effect run to self-heal after any cleanup
1556
- // (e.g. StrictMode's simulated unmount/remount, error recovery).
1557
- // useLayoutEffect runs synchronously before paint, so the brief
1558
- // remove→re-add in cleanup→mount is never visible to the user.
1559
1567
  if (!ssc.styleSheet.server) {
1560
1568
  renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
1561
1569
  }
1562
1570
  return function () {
1563
1571
  globalStyle.removeStyles(instance, ssc.styleSheet);
1564
- removeGlobalStyleTag(styledComponentId, ssc.styleSheet.options.target);
1565
1572
  };
1566
1573
  }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
1567
1574
  }
@@ -1740,13 +1747,14 @@
1740
1747
  }
1741
1748
 
1742
1749
  var ServerStyleSheet = /** @class */ (function () {
1743
- function ServerStyleSheet() {
1750
+ function ServerStyleSheet(_a) {
1751
+ var _b = _a === void 0 ? {} : _a, nonce = _b.nonce;
1744
1752
  var _this = this;
1745
1753
  this._emitSheetCSS = function () {
1746
1754
  var css = _this.instance.toString();
1747
1755
  if (!css)
1748
1756
  return '';
1749
- var nonce = getNonce();
1757
+ var nonce = _this.instance.options.nonce || getNonce();
1750
1758
  var attrs = [
1751
1759
  nonce && "nonce=\"".concat(nonce, "\""),
1752
1760
  "".concat(SC_ATTR, "=\"true\""),
@@ -1776,7 +1784,7 @@
1776
1784
  __html: css,
1777
1785
  },
1778
1786
  _a);
1779
- var nonce = getNonce();
1787
+ var nonce = _this.instance.options.nonce || getNonce();
1780
1788
  if (nonce) {
1781
1789
  props.nonce = nonce;
1782
1790
  }
@@ -1786,7 +1794,7 @@
1786
1794
  this.seal = function () {
1787
1795
  _this.sealed = true;
1788
1796
  };
1789
- this.instance = new StyleSheet({ isServer: true });
1797
+ this.instance = new StyleSheet({ isServer: true, nonce: nonce });
1790
1798
  this.sealed = false;
1791
1799
  }
1792
1800
  ServerStyleSheet.prototype.collectStyles = function (children) {
@@ -2210,7 +2218,9 @@
2210
2218
  var attrDef;
2211
2219
  for (var i = 0; i < attrs.length; i += 1) {
2212
2220
  attrDef = attrs[i];
2213
- var resolvedAttrDef = isFunction(attrDef) ? attrDef(context) : attrDef;
2221
+ // Pass a shallow copy to function attrs so the callback's captured
2222
+ // reference isn't mutated by subsequent attrs processing (#3336).
2223
+ var resolvedAttrDef = isFunction(attrDef) ? attrDef(__assign({}, context)) : attrDef;
2214
2224
  for (var key in resolvedAttrDef) {
2215
2225
  if (key === 'className') {
2216
2226
  context.className = joinStrings(context.className, resolvedAttrDef[key]);