Adds postcss-import plugin + fixes import for react phone styles #456
+73
−43
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
New dependencies detected. Learn more about Socket for GitHub ↗︎
|
|
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. |
|
Let's make this high prio and patch release asap |
moe-dev
approved these changes
Dec 19, 2024
| @@ -60,7 +64,7 @@ interface AuthProps { | |||
| facebookEnabled: boolean; | |||
| googleEnabled: boolean; | |||
| }; | |||
| configOrder: string[]; | |||
| configOrder: AuthSection[]; | |||
There was a problem hiding this comment.
let's make these changes in another PR - this breaks example build since this type is not exported and will not be consistent with our docs at the moment
moe-dev
force-pushed
the
taylor/fix-css-imports
branch
from
6ede7e1 to
eaf3e20
Compare
turnekybc
approved these changes
Dec 19, 2024
andrewkmin
reviewed
Dec 19, 2024
| import url from "@rollup/plugin-url"; | ||
| import alias from "@rollup/plugin-alias"; | ||
| import copy from "rollup-plugin-copy"; | ||
| import typescript from '@rollup/plugin-typescript'; |
There was a problem hiding this comment.
would expect these to be double quotes
There was a problem hiding this comment.
from all the package READMES it shows single quotes actually. It seems like we were incorrect before
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary & Motivation
CSS Import Rules Error
After importing
import '@turnkey/sdk-react/styles';in thelayout.tsxfile and runningnpm run dev, an error occurred. When bundling CSS with Rollup usingrollup-plugin-postcss,@importrules are not being correctly placed at the top of the final CSS bundle. This violates CSS specifications, which require@importstatements to precede all other rules (except@charsetand@layer).Solution
Add
postcss-importplugin to the PostCSS configuration to the Rollup setup.The
postcss-importplugin processes@import rulesand ensures they appear at the top of the CSS file. By including this in the PostCSS plugins array, all@importrules are handled correctly before other CSS rules are processed, preventing build errors.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-importcannot resolve the CSS import from thenode_modulesdirectory when it's imported within a CSS file.Solution
Instead of importing the styles in
PhoneInput.css:Move the import to the React component file (
PhoneInput.tsx) directly: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 changesetwill 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.