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 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..372a2d2 --- /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 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" 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.mjs b/lib/install/unocss/postcss.config.mjs new file mode 100644 index 0000000..2890f33 --- /dev/null +++ b/lib/install/unocss/postcss.config.mjs @@ -0,0 +1,7 @@ +import UnoCSS from '@unocss/postcss' + +export default { + plugins: [ + UnoCSS(), + ], +} diff --git a/lib/install/unocss/uno.config.mjs b/lib/install/unocss/uno.config.mjs new file mode 100644 index 0000000..e349440 --- /dev/null +++ b/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(), + ] +}) 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