From c579f4854d6e1c412c1dde70708197db9631e0a2 Mon Sep 17 00:00:00 2001 From: Paul Bob Date: Fri, 19 Jan 2024 13:48:12 +0200 Subject: [PATCH 1/2] fix: tailwind integration --- docs/3.0/tailwindcss-integration.md | 10 +++++----- docs/3.0/upgrade.md | 13 ++++++++++++- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/docs/3.0/tailwindcss-integration.md b/docs/3.0/tailwindcss-integration.md index cd0de75c..215266c6 100644 --- a/docs/3.0/tailwindcss-integration.md +++ b/docs/3.0/tailwindcss-integration.md @@ -16,26 +16,26 @@ That command will: - generate Avo's tailwind config.js `config/avo/tailwind.config.js` - generate tailwind `base`, `components` and `utilities` under `app/assets/stylesheets/avo/tailwind` directory (workaround to import avo's base css after tailwind's base) - create a custom `app/assets/stylesheets/avo/tailwind.css` file where you can further customize your Avo space; -- generate or enhance your `Procfile.dev` with the required compile `yarn avo:tailwind:css --watch` command, as per default `tailwindcss-rails` practices; +- generate or enhance your `Procfile.dev` with the required compile `yarn avo:tailwindcss --watch` command, as per default `tailwindcss-rails` practices; - enhance your `package.json` file with the build script. **Make sure `package.json` is present, `npm init` will generate one if your project does'n have it**. - enhance your `Rake` file with the following code: ```ruby # When running `rake assets:precompile` this is the order of events: # 1 - Task `avo:yarn_install` # 2 - Task `avo:sym_link` -# 3 - Cmd `yarn avo:tailwind:css` +# 3 - Cmd `yarn avo:tailwindcss` # 4 - Task `assets:precompile` Rake::Task["assets:precompile"].enhance(["avo:sym_link"]) Rake::Task["avo:sym_link"].enhance(["avo:yarn_install"]) Rake::Task["avo:sym_link"].enhance do - `yarn avo:tailwind:css` + `yarn avo:tailwindcss` end ``` Now, instead of running `bin/rails server`, you can run that Procfile with `bin/dev`. :::info -You mileage may vary when running these tasks depending with your setup. The gist is that you need to run `yarn avo:tailwind:css` on deploy0time to compile the css file and `yarn avo:tailwind:css --watch` to watch for changes in development. +You mileage may vary when running these tasks depending with your setup. The gist is that you need to run `yarn avo:tailwindcss` on deploy0time to compile the css file and `yarn avo:tailwindcss --watch` to watch for changes in development. ::: Inside `app/assets/stylesheets/avo` you'll have a new `tailwind.css` file that's waiting for you to customize. The default `config/avo/tailwind.config.js` file should have the proper paths set up for purging and should be ready to go. Notice that it utilizes an preset that we manage, that preset is essential to build all avo's styles. @@ -43,7 +43,7 @@ Inside `app/assets/stylesheets/avo` you'll have a new `tailwind.css` file that's ```css @import 'tailwindcss/base'; /* Have all of Avo's custom and plugins styles available. */ -@import '../../../../tmp/avo/base.css'; +@import '../../../../tmp/avo/avo.base.css'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; diff --git a/docs/3.0/upgrade.md b/docs/3.0/upgrade.md index 7bccfed4..47b45d9d 100644 --- a/docs/3.0/upgrade.md +++ b/docs/3.0/upgrade.md @@ -6,7 +6,7 @@ If you're looking for the Avo 2 to Avo 3 upgrade guide, please visit [the dedica ## Upgrade from 3.2.2 to 3.3.0 :::option `may_download_file` deprecated -Actions now fully operate with turbo leading to the deprecation of `may_download_file` option. It can be safelly removed from all actions. +Actions now fully operate with turbo leading to the deprecation of `may_download_file` option. It can be safely removed from all actions. ::: :::option Status field `failed_when` and `loading_when` default to and empty array @@ -26,6 +26,17 @@ field :status, Scopes changed namespace from `Avo::Pro::Scopes` to `Avo::Advanced::Scopes`. ::: +:::option TailwindCSS integration +The symlink generated by `avo:sym_link` task was renamed from `tmp/avo/base.css` to `tmp/avo/avo.base.css`. If your application have TailwindCSS integration before Avo `3.3.0` you should replace `@import '../../../../tmp/avo/base.css';` with `'../../../../tmp/avo/avo.base.css';` on `app/assets/stylesheets/avo/avo.tailwind.css` file. + +```css +/* app/assets/stylesheets/avo/avo.tailwind.css */ + +@import '../../../../tmp/avo/base.css'; /* X */ +@import '../../../../tmp/avo/avo.base.css'; /* ✓ */ +``` +::: + ## Upgrade from 3.1.3 to 3.1.4 :::option `Avo::Filters::BaseFilter.decode_filters` From 66ca935d0fda421979011f9a1b4c88e8675b5381 Mon Sep 17 00:00:00 2001 From: Adrian Marin Date: Fri, 19 Jan 2024 22:01:16 +0200 Subject: [PATCH 2/2] Apply suggestions from code review --- docs/3.0/upgrade.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/3.0/upgrade.md b/docs/3.0/upgrade.md index 47b45d9d..f5b07d76 100644 --- a/docs/3.0/upgrade.md +++ b/docs/3.0/upgrade.md @@ -27,13 +27,13 @@ Scopes changed namespace from `Avo::Pro::Scopes` to `Avo::Advanced::Scopes`. ::: :::option TailwindCSS integration -The symlink generated by `avo:sym_link` task was renamed from `tmp/avo/base.css` to `tmp/avo/avo.base.css`. If your application have TailwindCSS integration before Avo `3.3.0` you should replace `@import '../../../../tmp/avo/base.css';` with `'../../../../tmp/avo/avo.base.css';` on `app/assets/stylesheets/avo/avo.tailwind.css` file. +The symlink generated by `avo:sym_link` task was renamed from `tmp/avo/base.css` to `tmp/avo/avo.base.css`. If your application has the TailwindCSS integration generated before Avo `3.3.0` you should replace `@import '../../../../tmp/avo/base.css';` with `'../../../../tmp/avo/avo.base.css';` in `app/assets/stylesheets/avo/avo.tailwind.css`. ```css /* app/assets/stylesheets/avo/avo.tailwind.css */ -@import '../../../../tmp/avo/base.css'; /* X */ -@import '../../../../tmp/avo/avo.base.css'; /* ✓ */ +@import '../../../../tmp/avo/base.css'; // [!code --] +@import '../../../../tmp/avo/avo.base.css'; // [!code ++] ``` :::