[quantizor]

Summary

The theme declaration was importing @xstyled/system and augmenting that module. @xstyled/styled-components and @xstyled/emotion already re-export Theme, so that sample does not need a direct @xstyled/system dependency. The declaration file now augments the binding the app installed. colors is omitted and then intersected with the extra token, because replacing the default palette outright is a type error.

Install lines for the styled-components and Emotion getting-started samples stay on the packages those samples import. @xstyled/system's own install stays npm install @xstyled/system. The readme example, which imports styled-components, has that install next to the example.

The prop-types sample imports styled, compose, space, and color from @xstyled/styled-components. prop-types is a peer of @xstyled/prop-types. npm and pnpm install it. Yarn 1 does not, and the note says so.

The Emotion Babel preset still pins @babel/core@^7. Babel 8 breaks the preset with path.hoist is not a function.

Test plan

Fresh projects, published packages, Node 22.23.4, npm 10.9.9, pnpm 10.33.0, Yarn 1.22.22. TypeScript 7.0.2 and 5.9.3, moduleResolution: Node16, skipLibCheck: true.

• styled-components plus @xstyled/styled-components: the providers load on npm and pnpm (x object, defaultTheme object, ThemeProvider function, Preflight object). The import typechecks. pnpm require.resolve('@xstyled/system') is MODULE_NOT_FOUND. The new styled.d.ts still typechecks on npm, pnpm, and Yarn 1, on TypeScript 7.0.2 and 5.9.3. ThemeColor and SystemProps['color'] accept blue-500 and brand and reject zzz-not-a-color. useTheme().colors.brand is string. Yarn 1 needs react and react-dom before the binding loads. That peer is outside this change.
• Emotion install: same shape. jsx is a function. x.button's color rejects zzz-not-a-color.
• @xstyled/system alone: import { system } prints function on npm, pnpm, and Yarn 1. After adding styled-components, styled.div(system) returns an object through styled-components/dist/styled-components.esm.js. The package's default import under Node is the CJS namespace, so styled.div is undefined. Yarn 1 also needs react before that file loads.
• Prop types, documented install, no direct prop-types: require('@xstyled/prop-types') plus compose(space, color) from the binding returns the margin, padding, and color keys on npm and pnpm. styled.div is a function. pnpm nests prop-types and does not link it at the top of node_modules. The sample typechecks. Yarn 1 without prop-types throws Cannot find module 'prop-types' from the CommonJS entry and Cannot find package 'prop-types' from the ESM entry. With prop-types and react installed, the CommonJS call returns the same keys.
• node --input-type=module importing getSystemPropTypes throws SyntaxError: Named export 'bool' not found on npm and pnpm. Left unfixed.
• On the styled-components binding, React.ComponentProps<typeof x.button>['color'] accepts zzz-not-a-color after the augmentation. Left unfixed. Emotion's x.button color is strict.
• Babel preset plus @babel/core@^7: npm, pnpm, and Yarn 1 transform a css prop with Babel 7.29.7. Yarn 1 with an unpinned @babel/core gets 8.0.10 and throws path.hoist is not a function.

  

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4b9dd77

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR