Install @tailwindcss/postcss next to tailwindcss
#14830
Conversation
| return { | ||
| async add(packages: string[], location: 'dependencies' | 'devDependencies' = 'dependencies') { | ||
| let packageManager = await detectPackageManager(base) | ||
| return packageManager.add(packages, location) | ||
| }, | ||
| async remove(packages: string[]) { | ||
| let packageManager = await detectPackageManager(base) | ||
| return packageManager.remove(packages) | ||
| }, |
There was a problem hiding this comment.
We could return the packageManager directly, but then the API usage would look like this:
- pkg(base).add(['@tailwindcss/postcss@next'])
+ pkg(base).then(pm => pm.add(['@tailwindcss/postcss@next']))Which isn't as nice to work with.
We want to install `@tailwindcss/postcss` next to `tailwindcss` (in either `dependencies` or `devDependencies`), so we want to verify that is the case. We also add an explicit test where we have `tailwindcss` in `dependencies` and one in `devDependencies`.
To make sure we are installing in the correct location (`dependencies` vs `devDependencies`) we need to provide some flags to the package manager. In a perfect world the flags used by npm, pnpm, bun and yarn would be the same but that's not the case. This abstraction allows us to use a consistent interface where we can add and remove files and point the location we want.
RobinMalfait
force-pushed
the
fix/update-dependency-location
branch
from
57a28f9 to
49ed09a
Compare
| class PackageManager { | ||
| constructor(private base: string) {} | ||
|
|
||
| async exec(command: string) { | ||
| return exec(command, { cwd: this.base }) | ||
| } | ||
|
|
||
| async add( | ||
| packages: string[], | ||
| location: 'dependencies' | 'devDependencies', | ||
| ): ReturnType<typeof this.exec> { | ||
| throw new Error('Method not implemented.') | ||
| } | ||
|
|
||
| async remove(packages: string[]): ReturnType<typeof this.exec> { | ||
| throw new Error('Method not implemented.') | ||
| } | ||
| } |
There was a problem hiding this comment.
Could we simplify all this subclassing stuff by just relying on the fact that {packageManager} add {library} -D works to save a dev dependency in npm, pnpm, yarn, and bun?
Then it's more like the old implementation which was a lot less code.
There was a problem hiding this comment.
Guess Bun doesn't support -D, sad.
There was a problem hiding this comment.
Yep was looking at the documentation for each and there are slight differences. But can still make it smaller and just encode the exceptions. Let me adjust.
There was a problem hiding this comment.
@adamwathan simplified it by just encoding the exception right now: a8f54dd
Co-authored-by: Adam Wathan <[email protected]>
Instead of being explicit, let's just encode the exceptions for now.
thecrypticace
left a comment
thecrypticace
left a comment
There was a problem hiding this comment.
Yeah this simplification is much nicer 👍
This PR improves the PostCSS migrations to make sure that we install
@tailwindcss/postcssin the same bucket astailwindcss.If
tailwindcssexists in thedependenciesbucket, we install@tailwindcss/postcssin the same bucket. Iftailwindcssexists in thedevDependenciesbucket, we install@tailwindcss/postcssin the same bucket.This also contains an internal refactor that normalizes the package manager to make sure we can install a package to the correct bucket depending on the package manager.