Declaration file parsing error

[Trevor Rice]

Describe the bug
There appears to be a parsing error in the theme-ui declaration file:

// node_modules/theme-ui/dist/declarations/src/index.d.ts

import { ThemeUIJSX, type ThemeUIStyleObject } from '@theme-ui/core';
import React from 'react';
export { __ThemeUIContext, merge, useThemeUI, createElement, } from '@theme-ui/core';
export type { ThemeUIContextValue, SxProp, ColorMode, ColorModesScale, CSSObject, CSSProperties, CSSPseudoSelectorProps, ResponsiveStyleValue, ThemeUICSSProperties, ThemeUIStyleObject, ThemeUICSSObject, Theme, ThemeStyles, TLengthStyledSystem, StylePropertyValue, } from '@theme-ui/core';
export { useColorMode, InitializeColorMode } from '@theme-ui/color-modes';
export { ThemeProvider } from '@theme-ui/theme-provider';
export { default as Global } from '@theme-ui/global';
export * from '@theme-ui/components';
export { css, get } from '@theme-ui/css';
export declare const BaseStyles: (props: Record<string, unknown> & {
    sx?: ThemeUIStyleObject;
}) => JSX.Element;
export declare const jsx: typeof React.createElement;
export declare namespace jsx {
    namespace JSX {
        interface Element extends ThemeUIJSX.Element {
        }
        interface ElementClass extends ThemeUIJSX.ElementClass {
        }
        interface ElementAttributesProperty extends ThemeUIJSX.ElementAttributesProperty {
        }
        interface ElementChildrenAttribute extends ThemeUIJSX.ElementChildrenAttribute {
        }
        type LibraryManagedAttributes<C, P> = ThemeUIJSX.LibraryManagedAttributes<C, P>;
        interface IntrinsicAttributes extends ThemeUIJSX.IntrinsicAttributes {
        }
        interface IntrinsicClassAttributes<T> extends ThemeUIJSX.IntrinsicClassAttributes<T> {
        }
        interface IntrinsicElements extends ThemeUIJSX.IntrinsicElements {
        }
    }
}

Which results in the following error when trying to compile our project using ThemeUIStyleObject:

../../node_modules/theme-ui/dist/declarations/src/index.d.ts:1:27 - error TS1005: ',' expected.

1 import { ThemeUIJSX, type ThemeUIStyleObject } from '@theme-ui/core';

To Reproduce
Steps to reproduce the behavior:

1. Install theme-ui
2. View the declaration file from node_modules/theme-ui/dist/src/index.d.ts
3. Notice type is used within the import {}s

Expected behavior
I believe I'd expect for type to be used outside of the {}s. In other words:

- import { ThemeUIJSX, type ThemeUIStyleObject } from '@theme-ui/core';
+ import type { ThemeUIJSX, ThemeUIStyleObject } from '@theme-ui/core';
  import React from 'react';
  ...

Forgive my TS ignorance if that's not the case!

Additional context
Using:

• theme-ui: 0.15.5
• typescript: 4.3.2

[Lachlan Campbell]

Intriguing! Either of those syntaxes should work, but since both are types we should do it consistently. Seems odd this could be built & shipped correctly & only erroring on usage, but trying the suggested fix.

[Trevor Rice]

Appreciate the quick follow-up and PR, @lachlanjc! Let me know if there's anything I can do to help verify.

Is there any documentation around using type in this way? I only ask because I don't think I've ever seen this in the wild before.

[Lachlan Campbell]

For sure @TrevorRice! Lmk if using that develop release fixes the issue.

The feature is part of TypeScript 4.5, which explains why it wasn't working for you on 4.3: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#type-modifiers-on-import-names

[Piotr Monwid-Olechnowicz]

🚀 Issue was released in v0.15.6 🚀