styled-components 6.3.12 → 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 (62) 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 -20
  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/bench/run.d.ts +5 -0
  27. package/native/dist/constructors/constructWithOptions.d.ts +6 -6
  28. package/native/dist/constructors/css.d.ts +1 -1
  29. package/native/dist/constructors/styled.d.ts +1 -1
  30. package/native/dist/dist/bench/run.d.ts +5 -0
  31. package/native/dist/dist/constructors/constructWithOptions.d.ts +6 -6
  32. package/native/dist/dist/constructors/css.d.ts +1 -1
  33. package/native/dist/dist/constructors/styled.d.ts +1 -1
  34. package/native/dist/dist/models/ServerStyleSheet.d.ts +3 -1
  35. package/native/dist/dist/models/StyleSheetManager.d.ts +6 -0
  36. package/native/dist/dist/native/index.d.ts +1 -1
  37. package/native/dist/dist/sheet/Sheet.d.ts +1 -0
  38. package/native/dist/dist/sheet/Tag.d.ts +3 -3
  39. package/native/dist/dist/sheet/dom.d.ts +1 -1
  40. package/native/dist/dist/sheet/types.d.ts +1 -0
  41. package/native/dist/dist/test/globals.d.ts +2 -0
  42. package/native/dist/dist/test/utils.d.ts +163 -0
  43. package/native/dist/dist/test/veryLargeUnionType.d.ts +1 -0
  44. package/native/dist/dist/types.d.ts +15 -3
  45. package/native/dist/dist/utils/nonce.d.ts +3 -1
  46. package/native/dist/dist/utils/rawElement.d.ts +11 -0
  47. package/native/dist/models/ServerStyleSheet.d.ts +3 -1
  48. package/native/dist/models/StyleSheetManager.d.ts +6 -0
  49. package/native/dist/native/index.d.ts +1 -1
  50. package/native/dist/sheet/Sheet.d.ts +1 -0
  51. package/native/dist/sheet/Tag.d.ts +3 -3
  52. package/native/dist/sheet/dom.d.ts +1 -1
  53. package/native/dist/sheet/types.d.ts +1 -0
  54. package/native/dist/styled-components.native.cjs.js.map +1 -1
  55. package/native/dist/styled-components.native.esm.js.map +1 -1
  56. package/native/dist/test/globals.d.ts +2 -0
  57. package/native/dist/test/utils.d.ts +163 -0
  58. package/native/dist/test/veryLargeUnionType.d.ts +1 -0
  59. package/native/dist/types.d.ts +15 -3
  60. package/native/dist/utils/nonce.d.ts +3 -1
  61. package/native/dist/utils/rawElement.d.ts +11 -0
  62. package/package.json +23 -17
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.12";
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
  };
@@ -436,20 +458,20 @@
436
458
 
437
459
  /** Create a CSSStyleSheet-like tag depending on the environment */
438
460
  var makeTag = function (_a) {
439
- var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target;
461
+ var isServer = _a.isServer, useCSSOMInjection = _a.useCSSOMInjection, target = _a.target, nonce = _a.nonce;
440
462
  if (isServer) {
441
463
  return new VirtualTag(target);
442
464
  }
443
465
  else if (useCSSOMInjection) {
444
- return new CSSOMTag(target);
466
+ return new CSSOMTag(target, nonce);
445
467
  }
446
468
  else {
447
- return new TextTag(target);
469
+ return new TextTag(target, nonce);
448
470
  }
449
471
  };
450
472
  var CSSOMTag = /** @class */ (function () {
451
- function CSSOMTag(target) {
452
- this.element = makeStyleTag(target);
473
+ function CSSOMTag(target, nonce) {
474
+ this.element = makeStyleTag(target, nonce);
453
475
  // Avoid Edge bug where empty style elements don't create sheets
454
476
  this.element.appendChild(document.createTextNode(''));
455
477
  this.sheet = getSheet(this.element);
@@ -483,8 +505,8 @@
483
505
  }());
484
506
  /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
485
507
  var TextTag = /** @class */ (function () {
486
- function TextTag(target) {
487
- this.element = makeStyleTag(target);
508
+ function TextTag(target, nonce) {
509
+ this.element = makeStyleTag(target, nonce);
488
510
  this.nodes = this.element.childNodes;
489
511
  this.length = 0;
490
512
  }
@@ -1319,13 +1341,16 @@
1319
1341
  sheet = props.sheet;
1320
1342
  }
1321
1343
  else if (props.target) {
1322
- 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 });
1323
1348
  }
1324
1349
  if (props.disableCSSOMInjection) {
1325
1350
  sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });
1326
1351
  }
1327
1352
  return sheet;
1328
- }, [props.disableCSSOMInjection, props.sheet, props.target, styleSheet]);
1353
+ }, [props.disableCSSOMInjection, props.nonce, props.sheet, props.target, styleSheet]);
1329
1354
  var stylis = React.useMemo(function () {
1330
1355
  return createStylisInstance({
1331
1356
  options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },
@@ -1722,13 +1747,14 @@
1722
1747
  }
1723
1748
 
1724
1749
  var ServerStyleSheet = /** @class */ (function () {
1725
- function ServerStyleSheet() {
1750
+ function ServerStyleSheet(_a) {
1751
+ var _b = _a === void 0 ? {} : _a, nonce = _b.nonce;
1726
1752
  var _this = this;
1727
1753
  this._emitSheetCSS = function () {
1728
1754
  var css = _this.instance.toString();
1729
1755
  if (!css)
1730
1756
  return '';
1731
- var nonce = getNonce();
1757
+ var nonce = _this.instance.options.nonce || getNonce();
1732
1758
  var attrs = [
1733
1759
  nonce && "nonce=\"".concat(nonce, "\""),
1734
1760
  "".concat(SC_ATTR, "=\"true\""),
@@ -1758,7 +1784,7 @@
1758
1784
  __html: css,
1759
1785
  },
1760
1786
  _a);
1761
- var nonce = getNonce();
1787
+ var nonce = _this.instance.options.nonce || getNonce();
1762
1788
  if (nonce) {
1763
1789
  props.nonce = nonce;
1764
1790
  }
@@ -1768,7 +1794,7 @@
1768
1794
  this.seal = function () {
1769
1795
  _this.sealed = true;
1770
1796
  };
1771
- this.instance = new StyleSheet({ isServer: true });
1797
+ this.instance = new StyleSheet({ isServer: true, nonce: nonce });
1772
1798
  this.sealed = false;
1773
1799
  }
1774
1800
  ServerStyleSheet.prototype.collectStyles = function (children) {
@@ -2192,7 +2218,9 @@
2192
2218
  var attrDef;
2193
2219
  for (var i = 0; i < attrs.length; i += 1) {
2194
2220
  attrDef = attrs[i];
2195
- 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;
2196
2224
  for (var key in resolvedAttrDef) {
2197
2225
  if (key === 'className') {
2198
2226
  context.className = joinStrings(context.className, resolvedAttrDef[key]);