styled-components 6.3.12 → 6.3.13-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.
@@ -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.3.13-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'
@@ -433,6 +433,14 @@
433
433
  }
434
434
  throw throwStyledComponentsError(17);
435
435
  };
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
+ };
436
444
 
437
445
  /** Create a CSSStyleSheet-like tag depending on the environment */
438
446
  var makeTag = function (_a) {
@@ -1535,15 +1543,25 @@
1535
1543
  if (rules.some(function (rule) { return typeof rule === 'string' && rule.indexOf('@import') !== -1; })) {
1536
1544
  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.");
1537
1545
  }
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
+ }
1538
1551
  // Client-side lifecycle: render styles in effect and clean up on unmount.
1539
1552
  // false and IS_RSC are build/module-level constants, so this doesn't violate rules of hooks.
1540
1553
  {
1541
1554
  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.
1542
1559
  if (!ssc.styleSheet.server) {
1543
1560
  renderStyles(instance, props, ssc.styleSheet, theme, ssc.stylis);
1544
1561
  }
1545
1562
  return function () {
1546
1563
  globalStyle.removeStyles(instance, ssc.styleSheet);
1564
+ removeGlobalStyleTag(styledComponentId, ssc.styleSheet.options.target);
1547
1565
  };
1548
1566
  }, [instance, props, ssc.styleSheet, theme, ssc.stylis]);
1549
1567
  }