Docs: Make CSS ordering in DocsContainer more predictable

code/addons/docs/src/blocks/components/DocsPage.tsx

@@ -26,7 +26,8 @@ const toGlobalSelector = (element: string): string =>
 
 const breakpoint = 600;
 
-export const Title = styled.h1(withReset, ({ theme }) => ({
+export const Title = styled.h1(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
   fontWeight: theme.typography.weight.bold,
@@ -39,7 +40,8 @@ export const Title = styled.h1(withReset, ({ theme }) => ({
   },
 }));
 
-export const Subtitle = styled.h2(withReset, ({ theme }) => ({
+export const Subtitle = styled.h2(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   fontWeight: theme.typography.weight.regular,
   fontSize: theme.typography.size.s3,
   lineHeight: '20px',

code/addons/docs/src/blocks/components/Title.tsx

@@ -1,10 +1,12 @@
 import { withReset } from 'storybook/internal/components';
 
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 const breakpoint = 600;
 
-export const Title = styled.h1(withReset, ({ theme }) => ({
+export const Title = styled.h1(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
   fontWeight: theme.typography.weight.bold,

code/core/src/components/components/typography/elements/A.tsx

@@ -1,9 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withReset } from '../lib/common';
 import { Link } from './Link';
 
-export const A = styled(Link)(withReset, ({ theme }) => ({
+export const A = styled(Link)(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   fontSize: 'inherit',
   lineHeight: '24px',
 

code/core/src/components/components/typography/elements/Blockquote.tsx

@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Blockquote = styled.blockquote(withReset, withMargin, ({ theme }) => ({
+export const Blockquote = styled.blockquote(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   borderLeft: `4px solid ${theme.color.medium}`,
   padding: '0 15px',
   color: theme.color.dark,

code/core/src/components/components/typography/elements/Code.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'react';
 import React, { Children } from 'react';
 
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter';
@@ -10,20 +11,18 @@ import { isReactChildString } from '../lib/isReactChildString';
 
 const isInlineCodeRegex = /[\n\r]/g;
 
-const DefaultCodeBlock = styled.code(
-  ({ theme }) => ({
-    // from reset
-    fontFamily: theme.typography.fonts.mono,
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    display: 'inline-block',
-    paddingLeft: 2,
-    paddingRight: 2,
-    verticalAlign: 'baseline',
-    color: 'inherit',
-  }),
-  codeCommon
-);
+const DefaultCodeBlock = styled.code(({ theme }) => ({
+  // from reset
+  fontFamily: theme.typography.fonts.mono,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  display: 'inline-block',
+  paddingLeft: 2,
+  paddingRight: 2,
+  verticalAlign: 'baseline',
+  color: 'inherit',
+  ...(codeCommon({ theme }) as CSSObject),
+}));
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
   // DocBlocks-specific styling and overrides

code/core/src/components/components/typography/elements/DL.tsx

@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const DL = styled.dl(withReset, withMargin, {
+export const DL = styled.dl(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   padding: 0,
   '& dt': {
     fontSize: '14px',
@@ -34,4 +37,4 @@ export const DL = styled.dl(withReset, withMargin, {
   '& dd > :last-child': {
     marginBottom: 0,
   },
-});
+}));

code/core/src/components/components/typography/elements/H1.tsx

@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H1 = styled.h1(withReset, headerCommon, ({ theme }) => ({
+export const H1 = styled.h1(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.l1}px`,
   fontWeight: theme.typography.weight.bold,
 }));

code/core/src/components/components/typography/elements/H2.tsx

@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H2 = styled.h2(withReset, headerCommon, ({ theme }) => ({
+export const H2 = styled.h2(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.m2}px`,
   paddingBottom: 4,
   borderBottom: `1px solid ${theme.appBorderColor}`,

code/core/src/components/components/typography/elements/H3.tsx

@@ -1,7 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H3 = styled.h3(withReset, headerCommon, ({ theme }) => ({
+export const H3 = styled.h3(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.m1}px`,
 }));

code/core/src/components/components/typography/elements/H4.tsx

@@ -1,7 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H4 = styled.h4(withReset, headerCommon, ({ theme }) => ({
+export const H4 = styled.h4(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.s3}px`,
 }));

code/core/src/components/components/typography/elements/H5.tsx

@@ -1,7 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H5 = styled.h5(withReset, headerCommon, ({ theme }) => ({
+export const H5 = styled.h5(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.s2}px`,
 }));

code/core/src/components/components/typography/elements/H6.tsx

@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H6 = styled.h6(withReset, headerCommon, ({ theme }) => ({
+export const H6 = styled.h6(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.s2}px`,
   color: theme.color.dark,
 }));

code/core/src/components/components/typography/elements/LI.tsx

@@ -3,7 +3,8 @@ import { styled } from 'storybook/theming';
 
 import { codeCommon, withReset } from '../lib/common';
 
-export const LI = styled.li(withReset, ({ theme }) => ({
+export const LI = styled.li(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   fontSize: theme.typography.size.s2,
   color: theme.color.defaultText,
   lineHeight: '24px',

code/core/src/components/components/typography/elements/OL.tsx

@@ -1,9 +1,9 @@
-import type { Interpolation } from 'storybook/theming';
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-const listCommon: Interpolation = {
+const listCommon = {
   paddingLeft: 30,
   '& :first-of-type': {
     marginTop: 0,
@@ -13,6 +13,9 @@ const listCommon: Interpolation = {
   },
 };
 
-export const OL = styled.ol(withReset, withMargin, listCommon, {
+export const OL = styled.ol(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
+  ...listCommon,
   listStyle: 'decimal',
-});
+}));

code/core/src/components/components/typography/elements/P.tsx

@@ -3,7 +3,9 @@ import { styled } from 'storybook/theming';
 
 import { codeCommon, withMargin, withReset } from '../lib/common';
 
-export const P = styled.p(withReset, withMargin, ({ theme }) => ({
+export const P = styled.p(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   fontSize: theme.typography.size.s2,
   lineHeight: '24px',
   color: theme.color.defaultText,

code/core/src/components/components/typography/elements/Pre.tsx

@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Pre = styled.pre(withReset, withMargin, ({ theme }) => ({
+export const Pre = styled.pre(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   // reset
   fontFamily: theme.typography.fonts.mono,
   WebkitFontSmoothing: 'antialiased',

code/core/src/components/components/typography/elements/Span.tsx

@@ -1,8 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withReset } from '../lib/common';
 
-export const Span = styled.span(withReset, ({ theme }) => ({
+export const Span = styled.span(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   '&.frame': {
     display: 'block',
     overflow: 'hidden',

code/core/src/components/components/typography/elements/Table.tsx

@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Table = styled.table(withReset, withMargin, ({ theme }) => ({
+export const Table = styled.table(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   fontSize: theme.typography.size.s2,
   lineHeight: '24px',
   padding: 0,

code/core/src/components/components/typography/elements/UL.tsx

@@ -1,9 +1,9 @@
-import type { Interpolation } from 'storybook/theming';
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-const listCommon: Interpolation = {
+const listCommon = {
   paddingLeft: 30,
   '& :first-of-type': {
     marginTop: 0,
@@ -13,4 +13,9 @@ const listCommon: Interpolation = {
   },
 };
 
-export const UL = styled.ul(withReset, withMargin, listCommon, { listStyle: 'disc' });
+export const UL = styled.ul(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
+  ...listCommon,
+  listStyle: 'disc',
+}));