From 7963a8b71d62165b176f0528fccf0a4f4bb8873d Mon Sep 17 00:00:00 2001 From: Jason Fleetwood-Boldt Date: Sat, 3 Dec 2022 09:43:22 -0500 Subject: [PATCH 1/3] Update README.md --- README.md | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index ff12ef5..d6d29b0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CSS Bundling for Rails -Use [Tailwind CSS](https://tailwindcss.com), [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org), or [Dart Sass](https://sass-lang.com/) to bundle and process your CSS, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default). +Use [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org), or [Dart Sass](https://sass-lang.com/) to bundle and process your CSS, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default). You develop using this approach by running the bundler in watch mode in a terminal with `yarn build:css --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the CSS build watcher (along with a JS build watcher, if you're also using `jsbundling-rails`). @@ -22,16 +22,30 @@ You can configure your bundler options in the `build:css` script in `package.jso You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then: 1. Run `./bin/bundle add cssbundling-rails` -2. Run `./bin/rails css:install:[tailwind|bootstrap|bulma|postcss|sass]` +2. Run `./bin/rails css:install:[bootstrap|bulma|postcss|sass]` -Or, in Rails 7+, you can preconfigure your new application to use a specific bundler with `rails new myapp --css [tailwind|bootstrap|bulma|postcss|sass]`. + +For Tailwind: +Also run: +`./bin/bundle add tailwindcss-rails` +`./bin/rails tailwindcss:install` + +For Dart: +Also run: +`./bin/bundle add dartcss-rails` +`./bin/rails dartcss:install` + + +(If starting a new app in Rails 7, you can preconfigure your new application to use a specific bundler with `rails new myapp --css [tailwind|bootstrap|bulma|postcss|sass]`. For Tailwind when you create a new Rails app you will get only tailwindcss-rails with no Node-maanged packages.) ## FAQ ### How does this compare to tailwindcss-rails and dartsass-rails? -If you're already relying on Node to process your JavaScript, this gem is the way to go. But if you're using [the default import map setup in Rails 7+](https://github.com/rails/importmap-rails/), you can avoid having to deal with Node at all by using the standalone versions of Tailwind CSS and Dart Sass that are available through [tailwindcss-rails](https://github.com/rails/tailwindcss-rails/) and [dartsass-rails](https://github.com/rails/dartsass-rails/). It's simpler, fewer moving parts, and still has all the functionality. +If you're using [the default import map setup in Rails 7+](https://github.com/rails/importmap-rails/), you can avoid having Node-managed packages by using the standalone versions of Tailwind CSS and Dart Sass that are available through [tailwindcss-rails](https://github.com/rails/tailwindcss-rails/) and [dartsass-rails](https://github.com/rails/dartsass-rails/). + +Becuase they require a build task inside of those Gem, even apps with Node-managed packages (like you will get with JSBundling or CSSBundling) will need the additional Gems present. ### How do I import relative CSS files with Tailwind? From 3e8296a984fed207b6dc4603d04a560a1ba4cae3 Mon Sep 17 00:00:00 2001 From: Jason Fleetwood-Boldt Date: Sat, 3 Dec 2022 09:45:09 -0500 Subject: [PATCH 2/3] Update README.md --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d6d29b0..af46053 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CSS Bundling for Rails -Use [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org), or [Dart Sass](https://sass-lang.com/) to bundle and process your CSS, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default). +Use [Tailwind](https://tailwindcss.com/), [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org), or [Dart Sass](https://sass-lang.com/) to bundle and process your CSS, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default). You develop using this approach by running the bundler in watch mode in a terminal with `yarn build:css --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the CSS build watcher (along with a JS build watcher, if you're also using `jsbundling-rails`). @@ -20,18 +20,16 @@ You can configure your bundler options in the `build:css` script in `package.jso ## Installation You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then: +Run `./bin/bundle add cssbundling-rails` -1. Run `./bin/bundle add cssbundling-rails` -2. Run `./bin/rails css:install:[bootstrap|bulma|postcss|sass]` - +For Bootstrap, Bulma, Postcss, or SASS: +Run `./bin/rails css:install:[bootstrap|bulma|postcss|sass]` For Tailwind: -Also run: `./bin/bundle add tailwindcss-rails` `./bin/rails tailwindcss:install` For Dart: -Also run: `./bin/bundle add dartcss-rails` `./bin/rails dartcss:install` From 54a3f895d9f3780c2be278f49efdaebd7ea031f2 Mon Sep 17 00:00:00 2001 From: Jason Fleetwood-Boldt Date: Sat, 3 Dec 2022 09:47:18 -0500 Subject: [PATCH 3/3] Update README.md --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index af46053..939770f 100644 --- a/README.md +++ b/README.md @@ -12,25 +12,29 @@ This also happens in testing where the bundler attaches to the `test:prepare` ta If your test framework does not define a `test:prepare` Rake task, ensure that your test framework runs `css:build` to bundle stylesheets before testing commences. If your setup uses [jsbundling-rails](https://github.com/rails/jsbundling-rails) (ie, esbuild + tailwind), you will also need to run `javascript:build`. -That's it! - You can configure your bundler options in the `build:css` script in `package.json` or via the installer-generated `tailwind.config.js` for Tailwind or `postcss.config.js` for PostCSS. ## Installation You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then: + Run `./bin/bundle add cssbundling-rails` For Bootstrap, Bulma, Postcss, or SASS: + Run `./bin/rails css:install:[bootstrap|bulma|postcss|sass]` For Tailwind: + `./bin/bundle add tailwindcss-rails` + `./bin/rails tailwindcss:install` For Dart: + `./bin/bundle add dartcss-rails` + `./bin/rails dartcss:install`