redwood: `yarn rw setup tailwind` fails if packages already installed or if imports exist in `index.css`

Continued from https://github.com/redwoodjs/redwood/issues/1223

Note: --force option does not resolve the issue

Error output:

$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw setup tailwind
  √ Installing packages...
  √ Configuring PostCSS...
  × Initializing Tailwind CSS...
    → info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    Adding imports to index.css...
    One more thing...
Command failed with exit code 1: yarn tailwindcss init
error Command "tailwindcss" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Done in 25.85s.

What’s happening is that either:

the installed packages are already present …and/or…
the tailwind imports already exist in index.css

Note: if either of the config files exist, the error output makes sense and states the issue accurately. But the error given above is confusing and inaccurate.

Way to reproduce:

Successfully run yarn rw setup tailwind
Remove the postcss config file rm web/config/postcss.config.js
Remove the tailwind config file rm web/tailwind.config.js
Run yarn rw setup tailwind again

From @Tobbe

Now it might seem like a strange/contrived thing to do to remove the config files. But say you’re new, and screw something up with the config. You decide to delete the config files to try to start over again. It won’t work.

So I think yarn rw setup tailwind should re-create any missing config files (it does for the postcss config file already). And it could also have a --force option to recreate/override config files even if they already exist

How to improve

In case of only packages already existing but no files or imports present, this command should work
In case of imports already present, the command should fail but give accurate explanation
Using --force should allow the command to run regardless of what is present

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 26 (26 by maintainers)

Most upvoted comments

@thedavidprice, created PR https://github.com/redwoodjs/redwood/pull/1407. This is just to show you the work. Feel free to suggest any kind of changes. Would be more than happy to work on them.

mohinderps on Oct 27, 2020

Yes, makes sense @thedavidprice. Thank you.

mohinderps on Oct 23, 2020

Here are some ideas:

do use auth.js for reference as there’s similar steps/logic and perhaps an available helper that will be useful
I don’t think you need to be concerned about parsing the entire string; just approach this as “all or none”
- using regex, check if all three imports already exist
- IF all three exist, skip step
- Else if, run the step (which will result in redundancy for edge cases, but it won’t continue to add this code string on sequential runs)

I think there is also an option for checking the imports and, in the case there is one or two but not all three, you could output a message about that step failing and user needs to manually 1) remove existing or 2) add all three before trying again. But that might be more work than it’s worth.

thedavidprice on Oct 13, 2020

Cool ! Will do that.

For some reason, if no files exists but the packages are already installed, the command fails with a strange, unhelpful error. You can duplicate this by running the command, reverts files and file changes, and then trying to run again. I do not know what’s going on here. One possible workaround is to check if packages are already installed and then just not re-install. Note: it’s important the packages are pinned for compatibility, so this should be a part of the “check” if you implement this way.

“do files/code already exist?” check isn’t working correctly for each step. So this needs to be fixed.

–force isn’t working correctly for each step

The “adding imports to index.css” step will keep adding the same code to the file on additional runs, which creates redundancy and breaks things.

This will fix Point 1. Will take on rest of the points as the next steps.

mohinderps on Oct 13, 2020

^^ To make sure I understand, you’re first running the yarn add …packages … and then running yarn --checkfiles. And, in this case, if the packages already exist, things are working correctly. Yes?

Yes.

^^ Tailwind will install at the most recent version. And upgrading is the same for any installed packages in package.json — the developer will be manually managing package versions and upgrades. (Redwood does not manage 3rd party packages.) Does that make sense?

Makes Sense.

mohinderps on Oct 13, 2020

Sounds good!

Should I go ahead and check yarn v2 ?

^^ no, unfortunately. Yarn 2 is a beast and not supported much at all. For reference see:

thedavidprice on Oct 12, 2020

@thedavidprice , I noticed something very strange going on right now which may be the root cause of this entire thing.

Create a fresh redwood app: yarn create redwood-app redwood-test.
Install tailwindcss: yarn workspace web add -D tailwindcss. This adds tailwind in the node_modules folder.
Repeat step 2 i.e. reinstall tailwindcss what yarn rw setup tailwind command does internally.

Step 3 actually removes the tailwindcss from node_modules, which is really strange.

Now if we connect the dots here, whenever we rerun the yarn rw setup tailwind command, it tries to reinstall the tailwindcss package, which actually removes the tailwindcss package. Hence the setup command fails stating ‘tailwindcss not found’.

mohinderps on Oct 12, 2020

Great! Happy to help. And do keep me posted.

thedavidprice on Oct 11, 2020

Thank you @thedavidprice for helping me get started on this. Yes please, you can assign the issue to me.

mohinderps on Oct 11, 2020