Tailwind Setup: Use fully specified paths

[Tobbe]

Fixes #1643

[github-actions]

📦 PR Packages

Click to Show Package Download Links

https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/create-redwood-app-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-api-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-api-server-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-auth-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-cli-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-core-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-dev-server-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-eslint-config-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-eslint-plugin-redwood-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-forms-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-internal-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-router-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-structure-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-testing-0.23.0-0a14ca4.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/1648/redwoodjs-web-0.23.0-0a14ca4.tgz

Install this PR by running yarn rw upgrade --pr 1648:0.23.0-0a14ca4

[Tobbe]

tobbe@XPS9550 MINGW64 ~/dev/redwood/tailwindpathspr/web/src/pages/TestPage
$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\tailwindpathspr\node_modules\.bin\rw setup tailwind
  √ Installing packages...
  √ Configuring PostCSS...
  √ Initializing Tailwind CSS...
  √ Adding imports to index.css...
  √ One more thing...

           Tailwind configured with "upcoming change" opt-in enabled

           See this doc for info: https://tailwindcss.com/docs/upcoming-changes

Done in 95.67s.

[Tobbe]

Fixing this uncovered another bug with the tailwind setup. --force isn't working as it should.

tobbe@XPS9550 MINGW64 ~/dev/redwood/tailwindpaths/web/src/pages/TestPage
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\tailwindpaths\node_modules\.bin\rw setup tailwind --force
  √ 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
   � tailwind.config.js already exists.
error Command failed with exit code 1.
$ C:\Users\tobbe\dev\redwood\tailwindpaths\node_modules\.bin\tailwindcss init

   @tailwindcss/postcss7-compat 2.0.2


info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Done in 99.95s.

I'll try to fix that once this PR is merged

[thedavidprice]

Fixing this uncovered another bug with the tailwind setup. --force isn't working as it should.

@Tobbe please do take a look at the original PR addressing --force with this command. I seem to recall needing to fail the overwrite if/when there was a case where manual changes to the tailwind config existed. Maybe? Anyway, it might not be more output messaging confusion vs. command not working. Will defer to you.

[thedavidprice]

LGTM! Let me know if you need a Mac use to test first before merging. Otherwise 🚀

[Tobbe]

Let me know if you need a Mac use to test first before merging.

That would be great! This is how I tested it:

yarn create redwood-app twpath
cd twpath
yarn rw upgrade --pr 1648:0.23.0-8487f8c
yarn rw g page test
cd web/src/pages/TestPage
yarn rw setup tailwind

[Tobbe]

I went back and took another look at this. What a mess the tailwind installation is! I have two installations! One in ~/.../twpaths/node_modules and another one in ~/.../twpaths/web/node_modules

So if I'm running the setup command in ~/.../twpaths it will use the installation in ~/.../twpaths/node_modules, and files will be created relative to that path. If I'm somewhere inside web/, like ~/.../twpaths/web/src/pages, it will use the installation in ~/.../twpaths/web/node_modules and files will be created relative to that path instead.

[Tobbe]

please do take a look at the original PR addressing --force

You mean this one? #1301 I don't see anything in there about blocking --force. What am I missing?

Here's my understanding of the issue I found:

Scenario 1 (works)

~/.../twpath $ yarn rw setup tailwind

yarn tailwindcss init is executed. It creates ~/.../twpath/tailwind.config.js

At this point, if you were to run yarn tailwindcss init again it would fail, complaining about the existence of tailwind.config.js

Our setup command moves the config file to web/tailwind.config.js

~/.../twpath $ yarn rw setup tailwind --force

web/tailwind.config.js exists, but because --force is specified we continue
yarn tailwindcss init is executed. It doesn't find any config file (because we previously moved it into web/), and so it happily creates a new one in ~/.../twpath. We will move it into web/, overwriting the existing file

Scenario 2 (fails)

~/.../twpath/web/src/pages/TestPage $ yarn rw setup tailwind

yarn tailwindcss init is executed. cwd() is now ~/.../twpath/web, so it creates ~/.../twpath/web/tailwind.config.js

At this point, if you were to run yarn tailwindcss init again it would fail, complaining about the existence of tailwind.config.js

Our setup command moves the config file to web/tailwind.config.js (which is a no-op, since that's where it already is)

~/.../twpath/web/src/pages/TestPage $ yarn rw setup tailwind --force

web/tailwind.config.js exists, but because --force is specified we continue
yarn tailwindcss init is executed. It now finds web/tailwind.config.js because cwd() is ~/.../twpath/web. The command fails, complaining about the existing config file.

[Tobbe]

@thedavidprice If you could run a quick test on your (mac) computer, that would be awesome!

yarn create redwood-app twpath
cd twpath
yarn rw upgrade --pr 1648:0.23.0-7e8ddfc
yarn rw g page test
cd web/src/pages/TestPage
yarn rw setup tailwind

[thedavidprice]

@Tobbe this is working (almost) 💯 on Mac! From root, install and --force work correctly. From a sub-directory, install works correctly but --force runs into an issue with Tailwind yarn tailwindcss init that fails if tailwind.config.js exists. This is the reason why we added the "Sync ..." step that runs yarn install --check-files, which avoids Tailwind throwing. Here's the error:

Command failed with exit code 1: yarn tailwindcss init
   🚫 tailwind.config.js already exists.
error Command failed with exit code 1.
$ /Users/price/Repos/xx-delete/node_modules/.bin/tailwindcss init

   @tailwindcss/postcss7-compat 2.0.2

To run --force successfully from any directory, I think we need to set the Execa working directory to root on this line:

redwood/packages/cli/src/commands/setup/tailwind/tailwind.js

Line 89 in ab1b722

await execa('yarn', ['install', '--check-files'])

[peterp]

@Tobbe Thinking out loud here, maybe we can pass cwd to execa and always make it use getPaths().web.base, then we can remove the "move" code, since we would always init the tailwind in the right place.

[Tobbe]

@Tobbe this is working (almost) 💯 on Mac!

Thanks for the thorough testing. You're seeing the exact same thing as I'm seeing on Windows. You can compare your output with what I posted in a previou comment #1648 (comment)

As I also said in that comment, my plan was to merge this fix, and then write a separate fix for the --force stuff. But I guess I can do it all here.

My plan for fixing --force was to just manually delete tailwind.config.js first, before running yarn tailwindcss init.

To run --force successfully from any directory, I think we need to set the Execa working directory to root on this line:
await execa('yarn', ['install', '--check-files'])
@thedavidprice We get "tailwind.config.js already exists." from tailwindcss init. Will yarn install --check-files help with that?

[thedavidprice]

Ah, roger that @Tobbe I (falsely) assumed you were ready to go and skipped over:

You're seeing the exact same thing as I'm seeing on Windows. You can compare your output with what I posted in a previous comment #1648 (comment)

Yes, yarn install --check-files handles the "previously installed" error. This is why --force works when run from root. So my vote would be to go with @peterp suggestion to set cwd.

Thanks! 'Cause this week you are:

[Tobbe]

This is why --force works when run from root.

I don't think that's true. The reason it works from root is that there is no tailwind.config.js file there that yarn tailwindcss init can find. You can try it yourself by manually running yarn tailwindcss init in root. It will work just fine. Then go in to web/ and run it from there, and it will give you that same error message as you get when running yarn rw setup tailwind --force

my vote would be to go with @peterp suggestion to set cwd

I will. But I don't think it'll help with --force (Give me a few minutes and we'll know for sure 😉)

[Tobbe]

@thedavidprice As I expected, now, when I specify cwd to be web/ it doesn't even work with --force in root anymore, because now yarn tailwindcss init finds tailwind.config.js in web/, even if we stand in root.

tobbe@XPS9550 MINGW64 ~/dev/redwood/tailwindpathspr
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\tailwindpathspr\node_modules\.bin\rw setup tailwind --force
  √ 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
   � tailwind.config.js already exists.
error Command failed with exit code 1.
$ C:\Users\tobbe\dev\redwood\tailwindpathspr\node_modules\.bin\tailwindcss init

   @tailwindcss/postcss7-compat 2.0.2


info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Done in 115.82s.

[Tobbe]

Now that I delete the config file first it works

tobbe@XPS9550 MINGW64 ~/dev/redwood/tailwindpathspr
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\tailwindpathspr\node_modules\.bin\rw setup tailwind --force
  √ Installing packages...
  √ Configuring PostCSS...
  √ Initializing Tailwind CSS...
  ↓ Adding imports to index.css... [skipped]
    → Imports already exist in index.css
  √ One more thing...

           Tailwind configured with "upcoming change" opt-in enabled

           See this doc for info: https://tailwindcss.com/docs/upcoming-changes

Done in 113.02s.

[Tobbe]

Next problem to handle: Paths with spaces!

tobbe@XPS9550 MINGW64 ~/dev/redwood/tail wind pathspr
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ "C:\Users\tobbe\dev\redwood\tail wind pathspr\node_modules\.bin\rw" setup tailwind --force
  √ Installing packages...
  √ Configuring PostCSS...
  × Initializing Tailwind CSS...
    → spawn C:\WINDOWS\system32\cmd.exe ENOENT
    Adding imports to index.css...
    One more thing...
Command failed with ENOENT: yarn tailwindcss init
spawn C:\WINDOWS\system32\cmd.exe ENOENT
Done in 102.09s.

[Tobbe]

🎉

tobbe@XPS9550 MINGW64 ~/dev/redwood/tail wind pathspr
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ "C:\Users\tobbe\dev\redwood\tail wind pathspr\node_modules\.bin\rw" setup tailwind --force
  √ Installing packages...
  √ Configuring PostCSS...
  √ Initializing Tailwind CSS...
  ↓ Adding imports to index.css... [skipped]
    → Imports already exist in index.css
  √ One more thing...

           Tailwind configured with "upcoming change" opt-in enabled

           See this doc for info: https://tailwindcss.com/docs/upcoming-changes

Done in 128.52s.

tobbe@XPS9550 MINGW64 ~/dev/redwood/tail wind pathspr
$ cd web/src/pages/

tobbe@XPS9550 MINGW64 ~/dev/redwood/tail wind pathspr/web/src/pages
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ "C:\Users\tobbe\dev\redwood\tail wind pathspr\node_modules\.bin\rw" setup tailwind --force
  √ Installing packages...
  √ Configuring PostCSS...
  √ Initializing Tailwind CSS...
  ↓ Adding imports to index.css... [skipped]
    → Imports already exist in index.css
  √ One more thing...

           Tailwind configured with "upcoming change" opt-in enabled

           See this doc for info: https://tailwindcss.com/docs/upcoming-changes

Done in 118.56s.

Works with spaces in the path, and both at root level and deep inside web/

[thedavidprice]

As I expected, now, when I specify cwd to be web/ it doesn't even work with --force in root anymore...

Ah, understood. I was suggesting to set the cwd to be root. All good.

There were two reasons (if I recall correctly) why we had to run the --check-file, which were both related to tailwind already being installed. I'm going to re-test now --> there's a chance with you new code we don't need the "Sync" step and can remove the --check-file process, which takes way too long anyway.

Testing now.

[thedavidprice]

Testing looks good ✅

@Tobbe We don't need this step anymore. Can you remove starting L82?

{
            title: 'Sync yarn.lock and node_modules',
            task: async () => {
              /**
               * Sync yarn.lock file and node_modules folder.
               * Refer https://github.com/redwoodjs/redwood/issues/1301 for more details.
               */
              await execa('yarn', ['install', '--check-files'])
            },
          },

[Tobbe]

@thedavidprice I actually already tried that, but just by manually editing the setup command inside node_modules. This is what I got

$ yarn rw setup tailwind --force
yarn run v1.22.4
$ "C:\Users\tobbe\dev\redwood\tail wind pathspr\node_modules\.bin\rw" setup tailwind --force
  √ 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 29.75s.

But since you say it'll work without it I'm going to build a proper new package to test with

[Tobbe]

Same error with the PR package

tobbe@XPS9550 MINGW64 ~/dev/redwood/tail wind pathspr
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ "C:\Users\tobbe\dev\redwood\tail wind pathspr\node_modules\.bin\rw" setup tailwind --force
  √ 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.39s.

[thedavidprice]

Super weird. I tested first locally by removing it from my installed package.

Well then, let's ship this as you had it! Thanks for trying it out.

And, oh my, it's unreal how much time and attention this specific Setup command has required. This is either round 3 or 4 of a deep dive. We must really ❤️ Tailwind...

did not work on Windows ¯_(ツ)_/¯

[Tobbe]

We must really ❤️ Tailwind...

Haha. I don't even use tailwind. I just wanted to do the community a service 🤷‍♂️

I'm running the latest PR package again, on a fresh install, just to rule out my manual changes as the source of the error. Will report back in a bit.

[Tobbe]

First run without yarn install --check-files works fine. Second one (with --force) throws the error

tobbe@XPS9550 MINGW64 ~/dev/redwood/twpath
$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\twpath\node_modules\.bin\rw setup tailwind
  √ Installing packages...
  √ Configuring PostCSS...
  √ Initializing Tailwind CSS...
  √ Adding imports to index.css...
  √ One more thing...

           Tailwind configured with "upcoming change" opt-in enabled

           See this doc for info: https://tailwindcss.com/docs/upcoming-changes

Done in 27.78s.

tobbe@XPS9550 MINGW64 ~/dev/redwood/twpath
$ yarn rw setup tailwind --force
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\twpath\node_modules\.bin\rw setup tailwind --force
  √ 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 21.98s.

[thedavidprice]

🚀