From 13f1d0381cec935bb9728170a5859485d9d308f4 Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Fri, 23 Feb 2024 22:17:00 +0000 Subject: [PATCH 1/8] Add UnoCSS --- lib/install/unocss/application.uno.css | 1 + lib/install/unocss/install.rb | 15 +++++++++++++++ lib/install/unocss/package.json | 7 +++++++ lib/install/unocss/postcss.config.js | 5 +++++ lib/install/unocss/uno.config.js | 15 +++++++++++++++ lib/tasks/cssbundling/install.rake | 6 ++++++ 6 files changed, 49 insertions(+) create mode 100644 lib/install/unocss/application.uno.css create mode 100644 lib/install/unocss/install.rb create mode 100644 lib/install/unocss/package.json create mode 100644 lib/install/unocss/postcss.config.js create mode 100644 lib/install/unocss/uno.config.js diff --git a/lib/install/unocss/application.uno.css b/lib/install/unocss/application.uno.css new file mode 100644 index 0000000..4612250 --- /dev/null +++ b/lib/install/unocss/application.uno.css @@ -0,0 +1 @@ +@unocss; diff --git a/lib/install/unocss/install.rb b/lib/install/unocss/install.rb new file mode 100644 index 0000000..ab4b2c2 --- /dev/null +++ b/lib/install/unocss/install.rb @@ -0,0 +1,15 @@ +require_relative "../helpers" +self.extend Helpers + +apply "#{__dir__}/../install.rb" + +say "Install UnoCSS (via PostCSS + Autoprefixer)" +copy_file "#{__dir__}/application.uno.css", "app/assets/stylesheets/application.uno.css" +copy_file "#{__dir__}/uno.config.js", "uno.config.js" +copy_file "#{__dir__}/postcss.config.js", "postcss.config.js" +run "#{bundler_cmd} add @unocss/postcss@latest postcss@latest postcss-cli@latest autoprefixer@latest" + + +say "Add build:css script" +add_package_json_script "build:css", + "postcss ./app/assets/stylesheets/application.uno.css -o ./app/assets/builds/application.css" diff --git a/lib/install/unocss/package.json b/lib/install/unocss/package.json new file mode 100644 index 0000000..bd77fde --- /dev/null +++ b/lib/install/unocss/package.json @@ -0,0 +1,7 @@ +{ + "name": "app", + "private": "true", + "scripts": { + "build:css": "postcss ./app/assets/stylesheets/application.uno.css -o ./app/assets/builds/application.css" + } +} diff --git a/lib/install/unocss/postcss.config.js b/lib/install/unocss/postcss.config.js new file mode 100644 index 0000000..6be15b2 --- /dev/null +++ b/lib/install/unocss/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + '@unocss/postcss': {}, + }, +} diff --git a/lib/install/unocss/uno.config.js b/lib/install/unocss/uno.config.js new file mode 100644 index 0000000..e349440 --- /dev/null +++ b/lib/install/unocss/uno.config.js @@ -0,0 +1,15 @@ +import { defineConfig, presetUno } from 'unocss' + +export default defineConfig({ + content: { + filesystem: [ + './app/views/**/*.html.erb', + './app/helpers/**/*.rb', + './app/assets/stylesheets/**/*.css', + './app/javascript/**/*.js' + ] + }, + presets: [ + presetUno(), + ] +}) diff --git a/lib/tasks/cssbundling/install.rake b/lib/tasks/cssbundling/install.rake index ba1df4c..e016c61 100644 --- a/lib/tasks/cssbundling/install.rake +++ b/lib/tasks/cssbundling/install.rake @@ -24,5 +24,11 @@ namespace :css do task :bulma do system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/bulma/install.rb", __dir__)}" end + + desc "Install UnoCSS" + task :unocss do + system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/unocss/install.rb", __dir__)}" + end + end end From 9e513c965d1a9708af5cfc6198c3780f838cf2fe Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Fri, 23 Feb 2024 22:25:39 +0000 Subject: [PATCH 2/8] Update README for UnoCSS --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9e7c24f..33476b0 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 [Tailwind CSS](https://tailwindcss.com), [Bootstrap](https://getbootstrap.com/), [Bulma](https://bulma.io/), [PostCSS](https://postcss.org), [Dart Sass](https://sass-lang.com/), or [UnoCSS](https://unocss.dev/) 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`). @@ -12,7 +12,7 @@ This also happens in testing where the bundler attaches to the `test:prepare` ta 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. +You can configure your bundler options in the `build:css` script in `package.json` or via the installer-generated `tailwind.config.js` for Tailwind, `postcss.config.js` for PostCSS, or `uno.config.js` for UnoCSS. ## Installation @@ -20,9 +20,9 @@ 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:[tailwind|bootstrap|bulma|postcss|sass|unocss]` -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]`. +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|unocss]`. ## FAQ From e66e2a26d0bdd5d0c887b7ab5a68f5c126dbf989 Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Sun, 21 Apr 2024 18:35:50 -0500 Subject: [PATCH 3/8] UnoCSS switch to ESM postcss config --- lib/install/unocss/postcss.config.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/install/unocss/postcss.config.js b/lib/install/unocss/postcss.config.js index 6be15b2..2890f33 100644 --- a/lib/install/unocss/postcss.config.js +++ b/lib/install/unocss/postcss.config.js @@ -1,5 +1,7 @@ -module.exports = { - plugins: { - '@unocss/postcss': {}, - }, +import UnoCSS from '@unocss/postcss' + +export default { + plugins: [ + UnoCSS(), + ], } From 49702f46f7f4303cb6ad3f4cbac11c7650dc5d9c Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Sun, 21 Apr 2024 18:37:40 -0500 Subject: [PATCH 4/8] Update package.json to use ESM for UnoCSS --- lib/install/unocss/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/install/unocss/package.json b/lib/install/unocss/package.json index bd77fde..2dd22ef 100644 --- a/lib/install/unocss/package.json +++ b/lib/install/unocss/package.json @@ -1,6 +1,7 @@ { "name": "app", "private": "true", + "type": "module", "scripts": { "build:css": "postcss ./app/assets/stylesheets/application.uno.css -o ./app/assets/builds/application.css" } From f0f4bb8f194d8ffb3d29d856e00b1e186d6f0efb Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Sun, 21 Apr 2024 18:41:02 -0500 Subject: [PATCH 5/8] Undo type:module package.json UnoCSS --- lib/install/unocss/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/install/unocss/package.json b/lib/install/unocss/package.json index 2dd22ef..bd77fde 100644 --- a/lib/install/unocss/package.json +++ b/lib/install/unocss/package.json @@ -1,7 +1,6 @@ { "name": "app", "private": "true", - "type": "module", "scripts": { "build:css": "postcss ./app/assets/stylesheets/application.uno.css -o ./app/assets/builds/application.css" } From 9873ca757e47c8a5d490c7264215335b4e4d2b28 Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Sun, 21 Apr 2024 18:41:21 -0500 Subject: [PATCH 6/8] Rename uno.config.js to uno.config.mjs --- lib/install/unocss/{uno.config.js => uno.config.mjs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename lib/install/unocss/{uno.config.js => uno.config.mjs} (100%) diff --git a/lib/install/unocss/uno.config.js b/lib/install/unocss/uno.config.mjs similarity index 100% rename from lib/install/unocss/uno.config.js rename to lib/install/unocss/uno.config.mjs From b5fdae878e7cc3c3dbda04cdfde138e67ddefd3f Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Sun, 21 Apr 2024 18:41:34 -0500 Subject: [PATCH 7/8] Rename postcss.config.js to postcss.config.mjs --- lib/install/unocss/{postcss.config.js => postcss.config.mjs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename lib/install/unocss/{postcss.config.js => postcss.config.mjs} (100%) diff --git a/lib/install/unocss/postcss.config.js b/lib/install/unocss/postcss.config.mjs similarity index 100% rename from lib/install/unocss/postcss.config.js rename to lib/install/unocss/postcss.config.mjs From f1ac8ec24f3d82f5f4af625741ee1b0f9978fc68 Mon Sep 17 00:00:00 2001 From: Reese Armstrong Date: Sun, 21 Apr 2024 18:42:45 -0500 Subject: [PATCH 8/8] Update install.rb --- lib/install/unocss/install.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/install/unocss/install.rb b/lib/install/unocss/install.rb index ab4b2c2..372a2d2 100644 --- a/lib/install/unocss/install.rb +++ b/lib/install/unocss/install.rb @@ -7,7 +7,7 @@ copy_file "#{__dir__}/application.uno.css", "app/assets/stylesheets/application.uno.css" copy_file "#{__dir__}/uno.config.js", "uno.config.js" copy_file "#{__dir__}/postcss.config.js", "postcss.config.js" -run "#{bundler_cmd} add @unocss/postcss@latest postcss@latest postcss-cli@latest autoprefixer@latest" +run "#{bundler_cmd} add @unocss/postcss@latest unocss@latest postcss@latest postcss-cli@latest autoprefixer@latest" say "Add build:css script"