Adds postcss-import plugin + fixes import for react phone styles

[taylorjdawson]

Summary & Motivation

CSS Import Rules Error

After importing import '@turnkey/sdk-react/styles'; in the layout.tsx file and running npm run dev, an error occurred. When bundling CSS with Rollup using rollup-plugin-postcss, @import rules are not being correctly placed at the top of the final CSS bundle. This violates CSS specifications, which require @import statements to precede all other rules (except @charset and @layer).

Solution

Add postcss-import plugin to the PostCSS configuration to the Rollup setup.

The postcss-import plugin processes @import rules and ensures they appear at the top of the CSS file. By including this in the PostCSS plugins array, all @import rules are handled correctly before other CSS rules are processed, preventing build errors.

@import rules must precede all rules aside from @charset and @layer statements at [project]/node_modules/@turnkey/sdk-react/dist/styles.esm.css:0:6309

Additional Build Error with postcss-import

When using postcss-import, I encountered a build error related to importing CSS from external packages:

postcss-import: Failed to find 'react-international-phone/style.css'

This occurs because postcss-import cannot resolve the CSS import from the node_modules directory when it's imported within a CSS file.

Solution

Instead of importing the styles in PhoneInput.css:

@import "react-international-phone/style.css";

Move the import to the React component file (PhoneInput.tsx) directly:

import "react-international-phone/style.css";

This approach allows the bundler to correctly resolve the CSS import from node_modules, fixing the build error.

How I Tested These Changes

Did you add a changeset?

If updating one of our packages, you'll likely need to add a changeset to your PR. To do so, run pnpm changeset. pnpm changeset will generate a file where you should write a human friendly message about the changes. Note how this (example) includes the package name (should be auto added by the command) along with the type of semver change (major.minor.patch) (which you should set).

These changes will be used at release time to determine what packages to publish and how to bump their version. For more context see this comment.

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	Transitive: filesystem	+4	76.1 kB	ryanzim

View full report↗︎

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.