Dark theme broken with snowpack

[vikigenius]

Current Behavior

Dark theme does not work in a snowpack project.

1. npx create-snowpack-app baseuiexample --template @snowpack/app-template-react-typescript
2. npm install baseui styletron-engine-atomic styletron-react
3. npm install @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic
4. Use the App.tsx from below

import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import { BaseProvider, DarkTheme } from 'baseui';
import {
  ALIGN,
  HeaderNavigation,
  StyledNavigationItem as NavigationItem,
  StyledNavigationList as NavigationList,
} from 'baseui/header-navigation';
import React from 'react';

const engine = new Styletron();


function App(): React.ReactElement {
  // Return the App component.
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={DarkTheme}>
        <HeaderNavigation>
          <NavigationList $align={ALIGN.left}>
            <NavigationItem>DarkTheme</NavigationItem>
          </NavigationList>
        </HeaderNavigation>
      </BaseProvider>
    </StyletronProvider>
  );
}

export default App;

The above code should produce a dark navigation bar. However snowpack produces

Expected Behavior

Dark theme should work in a snowpack project.

Your Environment

Tech	Version
Base UI	v9.116.0
React	17.0.2
browser	Firefox

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[tajo]

Looks good to me. We actually use snowpack for https://baseweb.netlify.app/ and dark theme works fine. Can you create a repro?

[vikigenius]

@tajo Here you go: https://codesandbox.io/s/happy-dawn-qfqfw

Also the package produces some errors like: I am not sure if it's related though.

[18:56:47] [@snowpack/plugin-typescript] 5:55:47 PM - Starting compilation in watch mode...
[18:56:48] [@snowpack/plugin-typescript] node_modules/baseui/overrides.ts(1,1): error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
[18:56:48] [@snowpack/plugin-typescript] node_modules/baseui/overrides.ts(2,1): error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
[18:56:48] [@snowpack/plugin-typescript] node_modules/baseui/overrides.ts(3,1): error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
[18:56:48] [@snowpack/plugin-typescript]
[18:56:48] [@snowpack/plugin-typescript] 5:55:48 PM - Found 3 errors. Watching for file changes.

[tajo]

For some reason, can't see any changes in CodeSandbox. Can you try to add a baseui/button to your example? Wonder, if it is just component related.

[vikigenius]

Just added a button, and it seems to work correctly with the dark theme. I think for some reason, the changes only appear after save and refresh on this sandbox, I am not sure why. But you can do the same if you want to make, see any changes

[vikigenius]

@tajo were you able to isolate the issue. I think it's specific to the Navigation component, since the button looks ok.

[williamernest]

The button is also broken for me.