Add UnoCSS

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,17 +12,17 @@ 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
 
 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

lib/install/unocss/application.uno.css

@@ -0,0 +1 @@
+@unocss;

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 unocss@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"

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"
+  }
+}

lib/install/unocss/postcss.config.mjs

@@ -0,0 +1,7 @@
+import UnoCSS from '@unocss/postcss'
+
+export default {
+  plugins: [
+    UnoCSS(),
+  ],
+}

lib/install/unocss/uno.config.mjs

@@ -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(),
+  ]
+})

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