Move type-only imports (w/ verbatimModuleSyntax) (#746)

packages/react-identicon/src/Identicon.tsx

@@ -6,23 +6,13 @@ import type { IdentityProps as Props, Props as ComponentProps } from './types.js
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styledComponents, { StyledInterface } from 'styled-components';
 
 import { ICON_DEFAULT_HOST, settings } from '@polkadot/ui-settings';
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress, ethereumEncode } from '@polkadot/util-crypto';
 
 import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons/index.js';
-
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
+import { styled } from './styled.js';
 
 const Fallback = Beachball;
 

packages/react-identicon/src/icons/Ethereum.tsx

@@ -5,17 +5,8 @@ import type { Props } from '../types.js';
 
 import makeBlockie from 'ethereum-blockies-base64';
 import React, { useMemo } from 'react';
-import styledComponents, { StyledInterface } from 'styled-components';
 
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
+import { styled } from '../styled.js';
 
 interface ImgProps {
   size: number;

packages/react-identicon/src/styled.ts

@@ -0,0 +1,16 @@
+// Copyright 2017-2023 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StyledInterface } from 'styled-components';
+
+import styledComponents from 'styled-components';
+
+// In styled-components v6, there is a named export which can be used
+// directly, i.e. "import { styled } from ..." with no more magic. Until
+// such time the cjs vs esm import here is problematic, so we hack around
+// the various shapes below
+export const styled = (
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
+);

packages/react-qr/src/Display.tsx

@@ -2,24 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styledComponents, { StyledInterface } from 'styled-components';
 
 import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
 import { qrcode } from './qrcode.js';
+import { styled } from './styled.js';
 import { createFrames, createImgSize } from './util.js';
 
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
-
 interface Props {
   className?: string;
   size?: string | number;

packages/react-qr/src/Scan.tsx

@@ -3,20 +3,10 @@
 
 import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
-import styledComponents, { StyledInterface } from 'styled-components';
 
+import { styled } from './styled.js';
 import { createImgSize } from './util.js';
 
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);
-
 interface Props {
   className?: string;
   delay?: number;

packages/react-qr/src/styled.ts

@@ -0,0 +1,16 @@
+// Copyright 2017-2023 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StyledInterface } from 'styled-components';
+
+import styledComponents from 'styled-components';
+
+// In styled-components v6, there is a named export which can be used
+// directly, i.e. "import { styled } from ..." with no more magic. Until
+// such time the cjs vs esm import here is problematic, so we hack around
+// the various shapes below
+export const styled = (
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
+);

packages/vue-identicon/src/Identicon.ts

@@ -1,9 +1,10 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { VNode } from 'vue';
 import type { Prefix } from '@polkadot/util-crypto/address/types';
 
-import { defineComponent, VNode } from 'vue';
+import { defineComponent } from 'vue';
 
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';

packages/vue-identicon/src/icons/Beachball.ts

@@ -1,7 +1,9 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { defineComponent, VNode } from 'vue';
+import type { VNode } from 'vue';
+
+import { defineComponent } from 'vue';
 
 import { beachballIcon } from '@polkadot/ui-shared';
 

packages/vue-identicon/src/icons/Jdenticon.ts

@@ -1,8 +1,10 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { VNode } from 'vue';
+
 import * as jdenticon from 'jdenticon';
-import { defineComponent, VNode } from 'vue';
+import { defineComponent } from 'vue';
 
 type PropsType = {
   publicKey: string,

packages/vue-identicon/src/icons/Polkadot.ts

@@ -1,7 +1,9 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { defineComponent, VNode } from 'vue';
+import type { VNode } from 'vue';
+
+import { defineComponent } from 'vue';
 
 import { polkadotIcon } from '@polkadot/ui-shared';