styled-components / styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
https://styled-components.com
MIT License
40.12k stars 2.48k forks source link

Fix plain NodeJS usage #4268

Open gabriel-naressi opened 2 months ago

gabriel-naressi commented 2 months ago

Environment

## System:
 - OS: macOS 14.3.1
 - CPU: (8) arm64 Apple M1
 - Memory: 91.42 MB / 8.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
 - Yarn: 3.5.1 - ~/.nvm/versions/node/v16.20.2/bin/yarn
 - npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
## npmPackages:
 - styled-components: ^6.1.8 => 6.1.8

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-mt2ebd?file=repro.mjs

Steps to reproduce

The reproduction is on the stackblitz link

Expected Behavior

NodeJS usage should be possible. This became an issue following a comment from one of the vite maintainers in this thread: https://github.com/vitest-dev/vitest/discussions/5286#discussioncomment-8624346.

Another useful link that shows the problem: https://publint.dev/styled-components@6.1.8

Actual Behavior

import styled from 'styled-components';

console.log('keys:', Object.keys(styled));
console.log('styled.h1', styled.h1); // undefined
console.log('styled.default.h1', styled.default.h1); // function
shayvt commented 6 days ago

I came here from the issue on vitest repo. The NodeJS usage is important for vitest to run with styled-components, since vitest run in the context of node.

The workaround from the vitest issue that worked also for me is to add the private package that depends on styled-components to test.server.deps.inline:

// vite.config.ts
export default defineConfig({
  test: {
    server: {
      deps: {
        inline: ["replace-with-your-package"],
      }
    }
  },
});