Is it possible to reference other assets such as images and fonts in CSS? In the asset pipeline you'd normally do image-url("image.png"), but from my understanding that is handled by sass-rails and requires an scss file.

Is there a recommended way for doing this through cssbundling-rails and the asset pipeline?

Thanks for your work on this gem!

It's common for JS bundlers like esbuild to output a CSS file as well due to imports of CSS files within the JavaScript dependency graph. Currently when using esbuild + PostCSS together in a Rails 7 app and there's any kind of CSS import within the JS files, esbuild will output to app/assets/builds/application.css…which is also where PostCSS outputs its bundle, and you can literally see the file get clobbered over and over depending on if PostCSS or esbuild got triggered last. I touch on this issue in an article here:

https://dev.to/jaredcwhite/how-to-install-shoelace-with-rails-7-esbuild-and-postcss-1cg9

I'm not sure what's the best approach here. My previous experience with PostCSS + esbuild is I run PostCSS bundling via a plugin within esbuild rather than have it as a separate sidecar process. But in this scenario, all I can think of is that the esbuild CSS output and the PostCSS output should be named differently and both stylesheet link tags included within the application layout.

What

I have created a fresh rails 7 app, with tailwind. Without changing any config at all, I started building the app, and running the server/foreman with ./bin/dev.
However, for some reason, some styles used in helpers are not properly bundled. Therefore those are not working when rendering the page (as they are not included in the final CSS)

Why

If you use tailwind CSS classes in rails helpers, they will be bundled unless they are dynamically generated.

If you do this:

# /helpers/application_helper.rb
def some_helper
  content_tag :span, "Foo", class: "bg-green-100"
end

It works fine, but if you render the styles by embedding a variable:

# /helpers/application_helper.rb
def some_helper
  color = "green"
  content_tag :span, "Foo", class: "bg-#{color}-100"
end

It doesn't work, and bg-green-100 is not included in the bundled styles.

Same thing happens with svgs. They are properly loaded if you pasted them in the HTML, but once you use a rails helper to embed it, they are not bundled anymore.

For svg's, I could fix it by adding the folder with the svgs to the tailwind.config.js file:

content: [
    './app/assets/images/svgs/**/*.svg'
]

But I am not sure what to do with tailwind css classes used in helpers. What is the best thing to do here?

Issue:
Form select element (form-select) are not rendering with Bootstrap 5 (BS) styling.

Spun up a brand new Rails 7 test application with the latest gem releases, pasted in some boiler plate BS styling and the select element are not being styled. It appears other styling properties of BS are working as expected. Tried this with two separate applications, both running Rails 7.

Boiler Plate BS5 Code

<div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>Test</option>
    </select>
</div>

I'm seeing a problem running rake --tasks in a rails 7 project which has cssbundling-rails as a dependency but not sprockets.

% ▶ rake --tasks
rake aborted!
Don't know how to build task 'assets:precompile' (See the list of available tasks with `rake --tasks`)
/Users/richardtowers/Projects/sop_mark_two/Rakefile:6:in `<top (required)>'
(See full trace by running task with --trace)

% ▶ rake --tasks --trace
rake aborted!
Don't know how to build task 'assets:precompile' (See the list of available tasks with `rake --tasks`)
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/task_manager.rb:59:in `[]'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/task.rb:405:in `[]'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/cssbundling-rails-1.0.0/lib/tasks/cssbundling/build.rake:10:in `<main>'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:60:in `load'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/bootsnap-1.9.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:60:in `load'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/engine.rb:661:in `block in run_tasks_blocks'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/engine.rb:661:in `each'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/engine.rb:661:in `run_tasks_blocks'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/application.rb:501:in `block in run_tasks_blocks'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/engine/railties.rb:15:in `each'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/engine/railties.rb:15:in `each'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/application.rb:501:in `run_tasks_blocks'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/railties-7.0.0/lib/rails/engine.rb:464:in `load_tasks'
/Users/richardtowers/Projects/sop_mark_two/Rakefile:6:in `<top (required)>'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/rake_module.rb:29:in `load'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/rake_module.rb:29:in `load_rakefile'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/application.rb:710:in `raw_load_rakefile'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/application.rb:104:in `block in load_rakefile'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/application.rb:186:in `standard_exception_handling'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/application.rb:103:in `load_rakefile'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/application.rb:82:in `block in run'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/application.rb:186:in `standard_exception_handling'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/application.rb:80:in `run'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/lib/ruby/gems/3.0.0/gems/rake-13.0.6/exe/rake:27:in `<top (required)>'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/bin/rake:23:in `load'
/Users/richardtowers/.asdf/installs/ruby/3.0.1/bin/rake:23:in `<main>'

Note: I'm not trying to run assets:precompile - the error is thrown by rake --tasks.

The trace calls out build.rake:10 which looks like it assumes the assets:precompile task will exist.

Adding gem "sprockets-rails" to my Gemfile fixes the issue, but a749ca2 suggests that "Sprockets is not a dependency", so I think this is a bug.

I can have a go at a PR...

So the package.json is tricked out with a build:css command in the scripts. Awesome.

The build script we like, is tailwindcss which is the CLI, and accept input, and produces output.

"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"

But here is the rub. That command requires tailwind.config.js, and that file is stored at config/tailwind.config.js

So now when the foreman job runs the Procfile.dev and then exectutes the build, the build complains, hey, I have no idea what you're doing, as it cannot find this crucial file.

If you place that file in the root of the App, it works fine. Is this somehow some kind of thing where I am missing something? Is this an error in the install, or is there a way to get Rails to build nicely in development and production, with the tailwind.config.js in the config/ directory?

Also, this gem mentions postcss. It installed postcss when I selected Tailwind. But it made no configuration file for postcss. Had this file been created, likely in the root, then yes, I could've visualized it being stocked with pointer to tailwind.config.js being in a strange place config/, but there is nothing like that going on.

It seems strange. All these necessary pieces just being thrown down, but then not wired up right?

Been trying out the new pipeline with sass as the --css option in Rails. It seems that Sprockets is still looking for sassc, which causes a Rails exception. Dart Sass is compiling fine to the build directory, so just looks like a legacy dependency issue.

I could get it working fine by uncommenting sassc-rails in the Gemfile, however this is obviously not needed with Dart Sass. I'm happy to open a PR on Rails main to remove the dependency if this is the agreed route.

I've created three different apps in last two days using css bundling, and can add external css with neither. It gives the same error whether I use rails new myapp --css bootstrap or run ./bin/rails css:install:bootstrap

I was able to reproduce the error on two other repos linked below, and on two separate machines.

Steps to reproduce:
ruby "3.1.2"
gem "rails", "~> 7.0.3", ">= 7.0.3.1"

• Either run rails new myapp --css bootstrap or do css:install:bootstrap after rails new runs.
• yarn add '@fortawesome/fontawesome-free
• add @import '@fortawesome/fontawesome-free' to ./app/assets/stylesheets/application.bootstrap.scss
• run rails assets:precompile or bin/dev or yarn build:css

get error:

$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
Error: Can't find stylesheet to import.
  ╷
3 │ @import '@fortawesome/fontawesome-free'
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 3:9  root stylesheet

two repos with this setup at:
https://github.com/gonzric1/css_test_1
https://github.com/gonzric1/css_test_2

I'm also using asdf to manage ruby, in case that is relevant?

Hello, I added cssbundling-rails to an existing rails project with the instructions provided. When I add styles via classes to my .html.erb files, they get added to the application.css after yarn build:css but when I start the rails server those changes don't reflect on the web.

html.erb file

assets/builds/application.css file

dev server

We use Cloud66 for deployment and the asset:precompile fails (silently) because we need to correctly set writing permission when the rake css:build is done.
How could we set those permissions as stated in this doc? We would need to set before running the rake task.

https://help.cloud66.com/rails/how-to-guides/deployment/setting-write-permissions.html#setting-permissions-for-your-writable-directory

Hi, I am cross posting this issue in hopes someone can help point me in the right direction. It seems relevant to either this repo, sprockets-rails, or jsbundling-rails

rails/sprockets-rails#500

Overview

I'm afraid the 0.2.5 patch introduced a bug with asset compilation both for local development and when deploying to Heroku in which the yarn binary can no longer be found.

Steps to Recreate

To recreate, run rails css:build locally and you'll now see the following output in your console:

/Users/bkuhlmann/.cache/frum/versions/3.0.2/bin/ruby: No such file or directory -- /Users/bkuhlmann/Engineering/Companies/demo/bin/yarn (LoadError)
/Users/bkuhlmann/.cache/frum/versions/3.0.2/bin/ruby: No such file or directory -- /Users/bkuhlmann/Engineering/Companies/demo/bin/yarn (LoadError)
yarn run v1.22.17
$ sass ./app/assets/stylesheets/application.sass.scss ./app/assets/stylesheets/application.css --no-source-map --load-path=node_modules
✨  Done in 0.56s.

While the above isn't a catastrophic failure locally, it does crash Heroku deployments (might affect other server too). Here's an example where you can see the above failure but via my CLI when talking to a Heroku Stage server:

Desired Behavior

I don't know if a revert of the above patch is necessary but maybe we need to split compilation between a development and production environment for deployment purposes? Either that or fix the root problem where Rake can't detect the yarn binary?

Environment

• Ruby: ruby 3.0.2p107
• Rails: 6.1.4.1
• CSS Bundling Rails: 0.2.5
• Heroku

Hello, I changed my rails application 6 to work with cssbundling instead webpacker. This is working perfectly on dev, but on prod, the link for images on style.scss is broken.

footer {
  background-image: url('ruby.png');
}

this works on dev, but in prod, I'm getting a 404 error. O noticed that the file is created in the /public/assets/ but for some reason the link returned is not the same. I mean without the hash in the name ruby-123a82sc347274ds63746a1wdhj32-png just https://mysite.com/assets/ruby.png

rails new TestApp

rails generate scaffold Posts

rails db:migrate

add <div data-controller="hello"></div> to anywhere

run rails s
Notice that the Stimulus controller works fine:

Now install cssbundling the following way:

add gem 'cssbundling-rails' and uncomment gem 'sassc-rials'

bundle install

now run the cssbundling installer with rails css:install:bootstrap

You will now have the new bin/dev rails command on your machine (it is not there before you installed cssbundling). Whether rails is started with rails s or bin/dev rails, I get the same result, the Stimulus controller dies:

There's also a strange console error, which I oddly I can't CLICK ON to see the line number. not sure why I can't click on it, usually Chrome lets me click into the line number where the error is and shows me the calling code, but in this error when I click it just does nothing.

I'm not sure if the problem here is that cssbundling must be used with jsbundling and/or if jsbundling is used in conjunction with or as a replacement to importmap. I've spoken to several people on the chat boards and slack channel who are also confused by this so I would strongly urge some clarity around this.

I will re-attempt now with both cssbundling and jsbundling (this ticket is specific to ONLY cssbundling on top of rails new) At the very least if this is the wrong strategy I would strongly recommend documenting it clearly because right now I would still put this in the no-happiness category.

I'd like

src: url("./fonts/icons.woff2");

to precompile to:

src: url("/myapp1/assets/fonts/icons.woff2");
          ^^^^^^^

We use a shared asset host so the full path includes the application name: assets.example.com/myapp1.

With webpacker we used the publicPath option to add the prefix. Is there an equivalent?

ASSET_HOST seems to assume a fully qualified url. We'd prefer to avoid host names (e.g. assets-staging.example.com) in our compiled assets so we can use the same docker image across environments.

When following the sass-rails to cssbundling-rails upgrade instructions (step 2 of the guide), the default build:css script fails for (legacy) imports of stylesheets embedded within Ruby gems (within their vendor/assets/stylesheets), e.g. @import "foundation/functions";. There is an error Error: Can't find stylesheet to import.

How can gem vendored Sass stylesheets be made available to the sass CLI?

Given a rails application that uses a gem like rails-assets-jstree.
After trying to execute rails css:install:sass, I get a "Can't find stylesheet to import." error per each css asset that is inside a gem. I can perfectly follow the @import statement to the gem's asset.

Is there a necessary extra step to set cssbundling to be able to lookup inside included gems?

• Command Executed: rails css:install:sass
• Output:

Error: Can't find stylesheet to import.
   ╷
29 │ @import 'jstree';
   │         ^^^^^^^^
   ╵
  app/assets/stylesheets/application.sass.scss 29:9  root stylesheet
error Command failed with exit code 65.

• application.sass.scss:

// something something
@import 'jstree';
// something more

• Gemfile

source 'https://rails-assets.org' do
  gem 'rails-assets-jstree'
end

• jstree gem structure
  

In clobber.rake, line 4 has a hardcoded path

rm_rf Dir["app/assets/builds/[^.]*.css"], verbose: false

I think this should actually iterate over the configured assets directory/directories.

Because rbenv uses shims, this line in the generated bin/dev script will always return true in an environment in which foreman has been installed in any gemset at any point, even if it's not in the current gemset:

if ! command -v foreman &> /dev/null

I've found this to be a viable alternative that I believe should work everywhere:

if [ $(gem list --local --no-details --quiet --exact foreman | grep foreman | wc -l) -eq 0 ]

(The use of grep is because when foreman isn't installed, gem list will produce an empty line of output.)

The bundle:css command bundles the app/assets/stylesheets/application.tailwind.css file. How to include relative css files to be bundled too?

File structure

|-- stylesheets
  |-- application.tailwind.css  
  |-- custom.css   

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "custom";  /* does not include the relative file.*/

With Rails 7.0.0.alpha2 I was expecting this would be the default gem for CSS processing and from this gem's README it seemed to suggest that it would get installed.

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].

But looking in my Gemfile it was tailwindcss-rails that got installed.

I'd prefer to use this one so that I can modify the tailwind.config.js and add the ability to use JIT compilation.

What is the correct way to include Tailwind and this gem when generating a new project, is it correct that this isn't the default behaviour?

Hey I just wanted to ask this query about starting with --css=bootstrap — it seems like when one does that (at least against 7.0.1), something else happens over in Stimulus (I know we're here in cssbundling-rails).

In particular, I noticed that javascript/controllers/index.js has something different and interesting...

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller.js"
application.register("hello", HelloController)

it seems to suggest that this explicit registration pattern to update this file using rails stimulus:manifest:update is needed where as the other index.js file (at the same location) generated by the 7.0.1 without --css=bootsstrap seems to do this other thing:

import { application } from "controllers/application"

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

just was curious if you could clarify the intention or maybe one is newer than the other? perhaps if the dynamic one is newer (seems smarter to me than a long list of registered controller names) it needs to be backported to the --css=bootstrap? or perhaps I'm missing something.

Thank you @dhh !

-Jason

The Tailwind docs specify that the CSS build can be minified to obtain the smallest possible CSS file.

You can minify your CSS by adding the --minify flag:

npx tailwindcss -o build.css --minify

If no preprocessor is being used (like sass), adding this flag would result in a smaller CSS file.

Unless rails has a css minifying step that I'm not aware of, we could add this to css-bundling-rails gem?

Hey!
I'm trying to make tailwindcss and scss work together, but I have some issues. I've tried 2 options

1 - rails new app_name -c tailwind - works fine, but I cannot use nested selectors, such as

p {
  h1.name {
     @apply text-9xl;
  }
}

2 - rails new app_name -c postcss - works almost fine, I can use nested selectors with my postcss config

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('tailwindcss/nesting'),
    require('autoprefixer')
  ]
}

but I cannot use @import statement wit taiwindcss code (basic CSS code works fine).

application.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "external";

external.scss

h1 {
  @apply text-9xl;
}

body {
  background: red;
}

In this example body is read, but text-9xl isn't applied to h1. How to fix it?

Hi there

When I try to install bootstrap using rails, I get the following error

D:\@UoA\sales_rep\stock>rails css:install:bootstrap
rails aborted!
LoadError: cannot load such file -- less-rails
D:/@UoA/sales_rep/stock/config/application.rb:7:in `<main>'
D:/@UoA/sales_rep/stock/Rakefile:4:in `<main>'
bin/rails:4:in `<main>'
(See full trace by running task with --trace)

I had already put gem 'cssbundling-rails' and did bundle install prior to this.
I am using the following versions
ruby 2.7.2
rails 6.1.4
node v16.13.1
yarn 1.22.5
npx 8.1.2

Hello,
I have started learning Ruby on Rails recently. I tried to install Bootstrap 5 with Rails 7 using this gem.
The bootstrap framework is installed, but JavaScript is not working and no dropdown menu is displayed. I tried with Navbar sample code from bootstrap website (https://getbootstrap.com/docs/5.1/components/navbar/ ), but drop-down in the Navbar does not work. Tried on Firefox browser and Google Chrome.

I did installation exactly as per instructions.

1. Added cssbundling-rails to Gemfile with gem 'cssbundling-rails'
2. Run $bundle install
3. Run $rails css:install:bootstrap

Google Chrome terminal gives this error.
Uncaught TypeError: Failed to resolve module specifier "bootstrap". Relative references must start with either "/", "./", or "../".

Thanks.

It would be great if cssbundling-rails could generate source maps.

For scss, the --no-source-map flag is in use, and if source maps are enabled, the source filename included in the map file is relative to the source directory, resulting in the browser not being able to find the source location. Not only that, but the scss source might not even be accessible from the client-side.

Sorry if this is not the right channel for questions.

I'm trying to integrate tailwind css into my rails app (6.1.4). I'm confuse about what's the best way to go taking into account that I'd like to upgrade to 7 as soon as possible. Do I need to move to css-bundling or is tailwindcss-rails preferable?

thanks in advance!

Hi,

How would we mix both SASS and PostCSS with cssbundling-rails? With wepacker it was pretty much automatic.

I tried splitting the npm command it 2 commands like this

"build:css": "npm run build:css:sass && npm run build:css:postcss",
"build:css:sass": "sass ...",
"build:css:postcss": "postcss ..."

but this break the watch feature.

Thank you!

The base installation for using the Tailwind builder works OK until you start trying to @import other CSS. Without imports that can be piped through @apply it's tough to compartmentalize your CSS. To get around this:

1. Add --postcss to the build:css directive in package.json:

  "scripts": {
    "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }

2. There's a few node modules that need to be added:

yarn add postcss-import
yarn add postcss-flexbugs-fixes
yarn add postcss
yarn add postcss-preset-env

3. And then a postcss.config.js needs to be added:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

4. Then put your imports at the start of application.tailwind.css

@import 'home.css';
@import 'foobar.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Notes: There may be a better way to do this, but this is what I arrived at to get it working. It's a little inconvenient having to manually list imports, but it works. This uses the standard Tailwind PostCSS configs. The Tailwind builder traverses the imports so if you change "foobar.css" it'll trigger a rebuild. The repo I'm working in is using:

gem 'importmap-rails'
gem 'turbo-rails'
gem 'stimulus-rails'
gem 'cssbundling-rails'

Using this with a fresh Rails 6.1 app, when deploying to Heroku using the default 'heroku/ruby' build pack, the asset pipeline hooks fail silently stating:

Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install

The app continues to deploy and then the follow 500 error happens when you try to load pages.

ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.

SSH’ing into the dyno and there are no files in the app/assets/builds directory.

All running fine using bin/dev locally. I’m not sure how complex it is, but it would be nice if it could fail hard when yarn is not installed.

To fix the issue adding heroku/nodejs as the primary buildpack makes it all work.

I know this is a heroku issue, in terms of making it work out of the box like it did with webpacker, but I think failing loudly might help diagnose the issue easier.

P.s. This gem is awesome! So much easier to work with than webpack and along with the jsbundling-rails + esbuild its so fast. Keep up the great work!!!!

Full logs of the failing heroku build:

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/ruby
-----> Ruby app detected
-----> Installing bundler 2.2.21
-----> Removing BUNDLED WITH version in the Gemfile.lock
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-3.0.0
-----> Installing dependencies using bundler 2.2.21
       Running: BUNDLE_WITHOUT='development:test' BUNDLE_PATH=vendor/bundle BUNDLE_BIN=vendor/bundle/bin BUNDLE_DEPLOYMENT=1 bundle install -j4
       Using rake 13.0.6
       Using concurrent-ruby 1.1.9
       Using i18n 1.8.10
       Using minitest 5.14.4
       Using tzinfo 2.0.4
       Using zeitwerk 2.4.2
       Using activesupport 6.1.4.1
       Using builder 3.2.4
       Using erubi 1.10.0
       Using racc 1.5.2
       Using nokogiri 1.12.4 (x86_64-linux)
       Using rails-dom-testing 2.0.3
       Using crass 1.0.6
       Using loofah 2.12.0
       Using rails-html-sanitizer 1.4.2
       Using actionview 6.1.4.1
       Using rack 2.2.3
       Using rack-test 1.1.0
       Using actionpack 6.1.4.1
       Using nio4r 2.5.8
       Using websocket-extensions 0.1.5
       Using websocket-driver 0.7.5
       Using actioncable 6.1.4.1
       Using globalid 0.5.2
       Using activejob 6.1.4.1
       Using activemodel 6.1.4.1
       Using activerecord 6.1.4.1
       Using marcel 1.0.2
       Using mini_mime 1.1.1
       Using activestorage 6.1.4.1
       Using mail 2.7.1
       Using actionmailbox 6.1.4.1
       Using actionmailer 6.1.4.1
       Using actiontext 6.1.4.1
       Using ast 2.4.2
       Using msgpack 1.4.2
       Using bootsnap 1.9.1
       Using bundler 2.2.21
       Using method_source 1.0.0
       Using thor 1.1.0
       Using railties 6.1.4.1
       Using cssbundling-rails 0.2.2
       Using faraday-em_http 1.0.0
       Using faraday-em_synchrony 1.0.0
       Using faraday-excon 1.1.0
       Using faraday-httpclient 1.0.1
       Using faraday-net_http 1.0.1
       Using faraday-net_http_persistent 1.2.0
       Using faraday-patron 1.0.0
       Using faraday-rack 1.0.0
       Using multipart-post 2.1.1
       Using ruby2_keywords 0.0.5
       Using faraday 1.8.0
       Using sprockets 4.0.2
       Using sprockets-rails 3.2.2
       Using rails 6.1.4.1
       Using stimulus-rails 0.6.0
       Using turbo-rails 0.8.1
       Using hotwire-rails 0.1.3
       Using jsbundling-rails 0.1.7
       Using parallel 1.21.0
       Using parser 3.0.2.0
       Using pg 1.2.3
       Using puma 5.5.0
       Using rainbow 3.0.0
       Using redis 4.4.0
       Using regexp_parser 2.1.1
       Using rexml 3.2.5
       Using rubocop-ast 1.11.0
       Using ruby-progressbar 1.11.0
       Using unicode-display_width 2.1.0
       Using rubocop 1.21.0
       Using rubocop-rails 2.12.2
       Using rubocop-rspec 2.5.0
       Using rubocop-shopify 2.2.0
       Using sentry-ruby-core 4.7.3
       Using sentry-rails 4.7.3
       Using sentry-ruby 4.7.3
       Bundle complete! 25 Gemfile dependencies, 78 gems now installed.
       Gems in the groups 'development' and 'test' were not installed.
       Bundled gems are installed into `./vendor/bundle`
       Bundle completed (0.56s)
       Cleaning up the bundler cache.
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       Yarn executable was not detected in the system.
       Download Yarn at https://yarnpkg.com/en/docs/install
       Yarn executable was not detected in the system.
       Download Yarn at https://yarnpkg.com/en/docs/install
       Yarn executable was not detected in the system.
       Download Yarn at https://yarnpkg.com/en/docs/install
       Yarn executable was not detected in the system.
       Download Yarn at https://yarnpkg.com/en/docs/install
       Asset precompilation completed (2.44s)
       Cleaning assets
       Running: rake assets:clean
-----> Detecting rails configuration
###### WARNING:
       There is a more recent Ruby version available for you to use:
       
       3.0.2
       
       The latest version will include security and bug fixes. We always recommend
       running the latest version of your minor release.
       
       Please upgrade your Ruby version.
       
       For all available Ruby versions see:
         https://devcenter.heroku.com/articles/ruby-support#supported-runtimes
-----> Discovering process types
       Procfile declares types     -> web
       Default types for buildpack -> console, rake
-----> Compressing...
       Done: 39M
-----> Launching...
       Released v10

Hello,
I have a new app. Installed the tailwind with this gem. I did a assets:precompile. I see the components but not color. What am I missing?
I can see that application.css has updated. But my application doesn't recognize new css. I clear cache but can't see any changes in colors.
It changes the application.css in my assets folder but not in public folder.
Thank you

edit:

I noticed rails didn't create app/assets/stylesheets/application.css file.
I created the file and it build application.css in public folder.
Problem solved for me but I think this is still an issue.

I found the similar error in the issue rails/rails#43677. It looks like it has been resolved but not in my case. I did exactly same thing that @dhh did in the YouTube video.

In order for new Tailwind classes to build when using JIT mode, a manual rebuild is required making development with JIT difficult.

There is some troubleshooting tips for this on in the Tailwind docs, but it's not clear how I can use their suggestions without having separate dev and build scripts.

   // package.json
  // ...
    "build:tailwind": "tailwindcss -i ./app/assets/stylesheets/v2.tailwind.css -o ./app/assets/builds/v2.css",
    "build:sass": "sass ./app/assets/stylesheets/v1.sass.scss ./app/assets/builds/v1.css --load-path=node_modules --embed-sources",
    "build:css": "yarn run build:tailwind & yarn run build:sass"

cssbundling-rails (0.1.7)
rails (6.1.3.2)

If I understand correctly, cssbundling-rails watches my css files as well as my view files and re-builds the application.css, to only included css properties that have been used in the templates.

This works well for html.erb views, but not with html.haml.

Example & How to reproduce

With HTML

Create any view file, e.g. new.html.erb and copy paste the HTML from the Tailwind example here https://play.tailwindcss.com/

Re-build application.css using yarn build:css

Open the view in a browser and it will look like its supposed to be:

With HAML

Now, install the haml Gem, rename your view to new.html.haml and use some html2haml converter to switch from HTML to HAML.

Re-build application.css using yarn build:css

If you open the view in a browser again, it will not look correctly as the corresponding css classes are missing in application.css:

Conclusion & Findings

When using HAML views, the required css properties will not at all or not partially be bundled into application.css.

This can also be shown when comparing file sizes in the above stated scenarios: when using html.erb the bundled application.css will always have a couple KB more than when re-building with html.haml.

Also: when re-naming a xxx.html.erb file, yarn build:css --watch will automatically re-build your css. This does not happen if you use HAML files.

Fixes

Can anyone point me in the right direction on how to fix this in general or how to make HAML views also be working for my project? Any help appreciated!

The postcss-preset-env package hasn't released a new version in 2 years and is starting to cause dependency issues. For example, this warning shows up when using the latest version of tailwindcss since the autoprefixer versions conflict.

[email protected]" has unmet peer dependency "autoprefixer@^10.0.2"

I recommend removing postcss-present-env from the default install and including the plugins directly. For example, add autoprefixer and postcss-nesting packages if that's what is used by the app.

This results in fewer npm dependencies and a faster postcss build because it is only doing what the app needs.

Overview

I've been working on an application that originally was using Sprockets for it's asset pipeline and then switched over to using the new CSS Bundling gem and discovered, upon deploy, that Heroku doesn't like assets being built in the app/assets/builds folder.

I'm not entirely sure if this is a bug with this gem or with Heroku but opted to log this issue here first.

Steps to Recreate

Run the following script:

rails new demo --skip-git --skip-turbolinks --skip-action-cable --skip-action-text --skip-active-storage --skip-webpack-install --skip-listen --skip-spring --skip-test --skip-keeps --no-skip-sprockets --database postgresql
bundle add cssbundling-rails
bundle exec rails css:install:sass

If you open the auto-generated package.json, you'll find this line:

"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

The problem is, upon deploy to Heroku, you'll end up with the following stack dump:

remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        I, [2021-11-01T20:58:02.013456 #700]  INFO -- : [SKYLIGHT] [5.1.1] Unable to start, see the Skylight logs for more details
remote:        yarn install v1.22.4
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        [4/4] Building fresh packages...
remote:        Done in 0.76s.
remote:        yarn run v1.22.4
remote:        $ sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules
remote:        Done in 0.61s.
remote:        rake aborted!
remote:        Sprockets::FileNotFound: couldn't find file 'application.css'
remote:        Checked in these paths:
remote:          /tmp/build_220c7480/app/assets/config
remote:          /tmp/build_220c7480/app/assets/data
remote:          /tmp/build_220c7480/app/assets/javascripts
remote:          /tmp/build_220c7480/app/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/administrate-0.16.0/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/administrate-0.16.0/app/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/selectize-rails-0.12.6/vendor/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/selectize-rails-0.12.6/vendor/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/momentjs-rails-2.20.1/vendor/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/jquery-rails-4.4.0/vendor/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/datetime_picker_rails-0.0.7/app/assets/fonts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/datetime_picker_rails-0.0.7/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/datetime_picker_rails-0.0.7/app/assets/stylesheets
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/actioncable-6.1.4.1/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/activestorage-6.1.4.1/app/assets/javascripts
remote:          /tmp/build_220c7480/vendor/bundle/ruby/3.0.0/gems/actionview-6.1.4.1/lib/assets/compiled
remote:        /tmp/build_220c7480/app/assets/config/manifest.js:1
re

Unfortunately, Heroku only cares about these folders:

/app/assets/config
/app/assets/data
/app/assets/javascripts
/app/assets/stylesheets

Desired Behavior

It would be nice if Heroku supported the /app/assets/builds folder. As a temporary workaround, I updated the following files to correct the issue:

• package.json → Switched to building in the app/assets/stylesheets folder.
• app/assets/config/manifest.js → Removed //= link_tree ../builds entry.

These changed allowed the deploy to Heroku to succeed. Maybe there is a better way to handle this entirely?

Environment

• Ruby: ruby 3.0.2p107
• Rails: 6.1.4.1
• CSS Bundling Rails: 0.2.4
• Heroku

I am moving from webpack to esbuild with jsbundling-rails & cssbundling-rails.
In a vendor directory I have a file which imports css files required by some JS packages like so:

@import "drift-zoom/dist/drift-basic.min.css";
@import "dropzone/dist/min/dropzone.min.css";
@import "select2/dist/css/select2.css";
@import "slick-slider/slick/slick.scss";
@import "slick-slider/slick/slick-theme.scss";

This file is then imported in my application.sass.scss.

In the logs I get a series of errors for each file like:
ActionController::RoutingError (No route matches [GET] "/assets/select2/dist/css/select2.css"):

It seems the problem may be that it is looking in app/assets for these files, when they are at the root under node_modules instead.

In config/initializers/assets I have Rails.application.config.assets.paths << Rails.root.join('node_modules')

A similar issue was posted to the jsbundling-rails page (which I think should of been here), where OP added additional paths to config.assets, like so: Rails.application.config.assets.paths << Rails.root.join("node_modules/photoswipe/src/css/default-skin"), but this has not worked for me.

The scripts I have in my package.json are:

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

EDITS:
I have noticed that only the css files fail to be found, the scss files work fine. Maybe coincidence, I am usnure

Can someone explain to me why this gem seems to "lose" its CSS intermittently? It happens to me whenever I make a change to my JS files.

Then, if I make any change (like a whitespace change) to my SCSS files, it comes back, but it "hiccups"-- must be loaded twice before it can be fixed.

this is developmentally very significant and I would love to know what I'm missing here-- as far as I can tell this seems like a huge productivity blocker.

The effect is still present even after I use rake assets:clobber css:clobber javascript:clobber

the clobber does not even do its job correctly at all when the assets are 'stale' (which bizarrely happens very often in dev), but still it seems like half the time it puts the CSS in broken state and the other half the time it randomly works. Then if I load twice it fixes the CSS.

perhaps I'm missing something obvious? It seems like this is just baked into the gem and there isn't much I can do except reload things several times every time I make a change.

would strongly recommend prioritizing some understanding or better docs about this because as of now, this is not a good development experience.

When borked, my site loads like this:

then I run rake assets:clobber css:clobber javascript:clobber

Then I reload and it is still broken

Then I go make a whitespace change in application.bootstrap.scss

Then I reload again and it is still broken:
(this is the hiccup)

Finally, without making any further changes, I reload the window 3rd time and it snaps back into place:

Why does it do this? What am I missing?

Expected result:
It works consistently and makes sense and does not stop developer workflow.

Hello!

This is fantastic. I've been following along the progress in https://github.com/rails/jsbundling-rails and was wondering how to set up Tailwind. I did a small PoC using it as a postcss plugin but the setup in this gem is SO MUCH NICER.

Now, to use the sister gems, my understanding is that now we need to run yarn build --watch and yarn build:css --watch side by side. Is there a way to merge that into a single command? Perhaps at install time if the other gem is detected we could add yet a third task to package.json such as https://github.com/open-cli-tools/concurrently#why that runs both?

Unfortunately from initial testing concurrently doesn't seem to pass flags to child processes so we'd need a different task for "watch"

› rails --trace
rails aborted!
Don't know how to build task 'assets:clobber' (See the list of available tasks with `rails --tasks`)
Did you mean?  assets:clean
/Users/holman/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/task_manager.rb:59:in `[]'
/Users/holman/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/rake-13.0.6/lib/rake/task.rb:405:in `[]'
/Users/holman/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/cssbundling-rails-1.0.0/lib/tasks/cssbundling/clobber.rake:8:in `<main>'
[snip]

This app was on 6.0 using tailwindcss-rails. Upgraded to 7.0 with rails app:update and started to re-install tailwind via the new cssbundling-rails approach but ran into this error.

Probably something simple I'm missing with my existing tailwind setup — I can't reproduce this on a fresh Rails app — but thought I'd mention it in case there's an issue with upgrading.

I spent 5 hours last night debugging a production deploy that kept throwing the dreaded

application.css not in asset pipeline

This morning I realized that I had deleted app/assets/builds from the repo while thrashing around. That's not a problem in development, because it gets recreated (it does require a server restart). However, in production, there's no indication that anything went awry. rake assets:precompile runs, everything seems fine. You don't notice anything is wrong until you hit the application in the browser. Then you end up Googling for hours and realizing you've done something so incredibly wrong that most people don't do that 😄

I was wondering if it would be possible/preferable to throw a big fat error in production when that directory doesn't exist? Or possibly just create the directory if it doesn't exist.

When I run : rails new MyApp --js esbuild --css boostrap --database postgresql (same with sass instead of bootstrap)

It fails at this step :

Appending Bootstrap JavaScript import to default entry point

      append  app/javascript/application.js

Add build:css script

         run  npm set-script build:css "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>

npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    /home/pierre/.npmrc

or on the command line via: npm <command> --key value

Config info can be viewed via: npm help config
[email protected] /usr/lib/node_modules/npm

Did you mean this?
    run-script

Do i miss an npm dependency, is my node/npm too old ?

Steps to reproduce

$ rails _7.0.1_ new aProject --css bootstrap
$ cd aProject/
$ subl app/controllers/home_controller.rb
# Add the following content
class HomeController < ApplicationController

  def index
  end

end
$ mkdir app/views/home
$ subl app/views/home/index.html.erb
# add the following content
<h1>The home page</h1>

$ subl config/routes.rb
# Set the following content
Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  root "home#index"
end

$ rails s

Expected behavior

Application to show "The home page"

Actual behavior

ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.
):
     6:     <%= csrf_meta_tags %>
     7:     <%= csp_meta_tag %>
     8: 
     9:     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    10:     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    11:   </head>
    12: 
 
app/views/layouts/application.html.erb:9

System configuration

Rails version: 7.0.1

Ruby version: 2.7.4

Comments

I see there is app/assets/stylesheets/application.bootstrap.scss. That's good. But the project as it is created can not be started. Additional things should be done

Would it be a good idea to have the newly created project working after creating it or this is an expected behavior?

Update 1:
Note that running

$ yarn build:css --watch
yarn run v1.22.4
warning ../../../../package.json: No license field
error Command "build:css" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

is again an error.
Command taken form https://github.com/rails/cssbundling-rails

Update 2:
./bin/dev is same error

$ ./bin/dev 
18:15:05 web.1  | started with pid 1253893
18:15:05 js.1   | started with pid 1253894
18:15:05 css.1  | started with pid 1253898
18:15:07 js.1   | yarn run v1.22.4
18:15:07 css.1  | yarn run v1.22.4
18:15:08 css.1  | warning ../../../../package.json: No license field
18:15:08 js.1   | warning ../../../../package.json: No license field
18:15:08 css.1  | error Command "build:css" not found.
18:15:08 css.1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:15:08 js.1   | error Command "build" not found.
18:15:08 js.1   | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:15:08 js.1   | exited with code 1
18:15:08 system | sending SIGTERM to all processes
18:15:08 css.1  | exited with code 1
18:15:09 web.1  | terminated by SIGTERM

Update 3:
my NPM versoin was 6.X
I move to 8.3.0 and yarn build:css worked correctly

Update 4:
Stopped server. Installed bootstrap again with

./bin/rails css:install:bootstrap

Installed js esbuild again with

./bin/rails javascript:install:esbuild

Started server again and it worked.
Then it started.

My suggestion with this issue is think of a better error when installing that would check for npm version.

After following the install instructions and having super easy setup in development, I tried running RAILS_ENV=production bundle exec rake assets:precompile, which failed with the following output:

bundle exec rails assets:precompile
rails aborted!
SassC::SyntaxError: Error: unterminated attribute selector for type
        on line 1009:16 of stdin
>> .prose ol[type="A" s] {

A little Googling led me to this stackoverflow question. It wasn't really the right solution, but did point me in the right direction. Ultimately I ran:

bunde remove sass-rails
bundle install

and everything was peachy.

Should this gem automatically remove any existing CSS processors/compressors during installation? Since the output of running the tailwindcss command produces a file that still runs through existing compressors, it's possible that users might run into the same issue I did.

Thoughts?

It took me 2 days to figure out, how to use this gem with bootstrap icons. Frustrating thing!

I would suggest adding a task to this gem, which helps start with Bootstrap 5 and Bootstrap Icons as quickly as possible.

Steps you need to add bootstrap-icons to a new app, created with rails new sample_app --javascript esbuild --css bootstrap.

# Add Bootstrap icons
say "Add Bootstrap icons"
run yarn add bootstrap-icons

append_file "app/assets/stylesheets/application.bootstrap.scss" do
  <<~SCSS 
  @import 'bootstrap-icons/font/bootstrap-icons';
  SCSS
end

inject_into_file "config/initializers/assets.rb", after: /.*Rails.application.config.assets.paths.*\n/ do
  Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
end

I think I can add the steps on this task, but if we need more, I need some help.
Maybe it's better to add another installer?!

What do you think?
What about documentation?

Many thanks to Junichi Ito on StackOverflow
https://stackoverflow.com/questions/70526113/how-to-use-bootstrap-icons-with-rails-7-0

Steps to reproduce
rails new my_app -j esbuild --css tailwind --database=postgresql
cd my_app
bin/dev

in my gemfile both jsbundling-rails and cssbundling-rails were added.

# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"

in package.json I see Tailwind added

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "autoprefixer": "^10.4.0",
    "esbuild": "^0.14.8",
    "jquery": "^3.6.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.7"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}

When I add any Tailwind UI component that requires JavaScript it does not work. For example, adding the HTML for the "simple dropdown" here https://tailwindui.com/components/application-ui/elements/dropdowns

Adding other Tailwind elements to a page works correctly, however, anything that requires JavaScript is not rendering correctly.

Expected behavior
The dropdown should open or close normally

Actual behavior
The dropdown is expanded on the page and does not close/open when the button is toggled.

System configuration
Rails version: Rails (7.0.0)
node: 16.5.0
npm: 8.3.0
yarn 1.22.10
TailwindCSS 3.0.7

Ruby version:
3.0.1

To reproduce

rails new alpha_test_css --css bootstrap
cd alpha_test_css
rails g migration Message body:text
rake db:migrate
bin/dev

Open localhost:3000/messages in Firefox(92.0 (64-bit)) and I get

in Chromium (Version 93.0.4577.82 (Official Build) snap (64-bit)) I get

Same situation in an existing app where I add bootstrap following the steps in the Readme.

Gemfile.lock

GEM
  remote: https://rubygems.org/
  specs:
    actioncable (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
    actionmailbox (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activestorage (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      mail (>= 2.7.1)
    actionmailer (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      actionview (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      mail (~> 2.5, >= 2.5.4)
      rails-dom-testing (~> 2.0)
    actionpack (7.0.0.alpha2)
      actionview (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      rack (~> 2.0, >= 2.2.0)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
    actiontext (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activestorage (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      nokogiri (>= 1.8.5)
    actionview (7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    activejob (7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      globalid (>= 0.3.6)
    activemodel (7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
    activerecord (7.0.0.alpha2)
      activemodel (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
    activestorage (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      marcel (~> 1.0.0)
      mini_mime (>= 1.1.0)
    activesupport (7.0.0.alpha2)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
      tzinfo (~> 2.0)
    addressable (2.8.0)
      public_suffix (>= 2.0.2, < 5.0)
    bindex (0.8.1)
    bootsnap (1.9.0)
      msgpack (~> 1.0)
    builder (3.2.4)
    capybara (3.35.3)
      addressable
      mini_mime (>= 0.1.3)
      nokogiri (~> 1.8)
      rack (>= 1.6.0)
      rack-test (>= 0.6.3)
      regexp_parser (>= 1.5, < 3.0)
      xpath (~> 3.2)
    childprocess (3.0.0)
    concurrent-ruby (1.1.9)
    crass (1.0.6)
    cssbundling-rails (0.1.7)
      railties (>= 6.0.0)
      sprockets-rails (>= 2.0.0)
    debug (1.1.0)
      irb
      reline (>= 0.2.7)
    erubi (1.10.0)
    ffi (1.15.4)
    globalid (0.5.2)
      activesupport (>= 5.0)
    i18n (1.8.10)
      concurrent-ruby (~> 1.0)
    importmap-rails (0.6.1)
      rails (>= 6.0.0)
    io-console (0.5.9)
    irb (1.3.7)
      reline (>= 0.2.7)
    jbuilder (2.11.2)
      activesupport (>= 5.0.0)
    loofah (2.12.0)
      crass (~> 1.0.2)
      nokogiri (>= 1.5.9)
    mail (2.7.1)
      mini_mime (>= 0.1.1)
    marcel (1.0.1)
    method_source (1.0.0)
    mini_mime (1.1.1)
    minitest (5.14.4)
    msgpack (1.4.2)
    nio4r (2.5.8)
    nokogiri (1.12.4-x86_64-linux)
      racc (~> 1.4)
    public_suffix (4.0.6)
    puma (5.4.0)
      nio4r (~> 2.0)
    racc (1.5.2)
    rack (2.2.3)
    rack-test (1.1.0)
      rack (>= 1.0, < 3)
    rails (7.0.0.alpha2)
      actioncable (= 7.0.0.alpha2)
      actionmailbox (= 7.0.0.alpha2)
      actionmailer (= 7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      actiontext (= 7.0.0.alpha2)
      actionview (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activemodel (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activestorage (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      bundler (>= 1.15.0)
      railties (= 7.0.0.alpha2)
      sprockets-rails (>= 2.0.0)
    rails-dom-testing (2.0.3)
      activesupport (>= 4.2.0)
      nokogiri (>= 1.6)
    rails-html-sanitizer (1.4.2)
      loofah (~> 2.3)
    railties (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      method_source
      rake (>= 0.13)
      thor (~> 1.0)
      zeitwerk (~> 2.5.0.beta3)
    rake (13.0.6)
    redis (4.4.0)
    regexp_parser (2.1.1)
    reline (0.2.7)
      io-console (~> 0.5)
    rubyzip (2.3.2)
    sassc (2.4.0)
      ffi (~> 1.9)
    sassc-rails (2.1.2)
      railties (>= 4.0.0)
      sassc (>= 2.0)
      sprockets (> 3.0)
      sprockets-rails
      tilt
    selenium-webdriver (3.142.7)
      childprocess (>= 0.5, < 4.0)
      rubyzip (>= 1.2.2)
    sprockets (4.0.2)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    sprockets-rails (3.2.2)
      actionpack (>= 4.0)
      activesupport (>= 4.0)
      sprockets (>= 3.0.0)
    sqlite3 (1.4.2)
    stimulus-rails (0.5.3)
      rails (>= 6.0.0)
    thor (1.1.0)
    tilt (2.0.10)
    turbo-rails (0.7.14)
      rails (>= 6.0.0)
    tzinfo (2.0.4)
      concurrent-ruby (~> 1.0)
    web-console (4.1.0)
      actionview (>= 6.0.0)
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
    webdrivers (4.6.1)
      nokogiri (~> 1.6)
      rubyzip (>= 1.3.0)
      selenium-webdriver (>= 3.0, < 4.0)
    websocket-driver (0.7.5)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
    xpath (3.2.0)
      nokogiri (~> 1.8)
    zeitwerk (2.5.0.beta3)

PLATFORMS
  x86_64-linux

DEPENDENCIES
  bootsnap (>= 1.4.4)
  capybara (>= 3.26)
  cssbundling-rails
  debug (>= 1.0.0)
  importmap-rails (>= 0.3.4)
  jbuilder (~> 2.7)
  puma (~> 5.0)
  rails (~> 7.0.0.alpha2)
  redis (~> 4.0)
  sassc-rails (~> 2.1)
  selenium-webdriver
  sqlite3 (~> 1.4)
  stimulus-rails (>= 0.4.0)
  turbo-rails (>= 0.7.11)
  tzinfo-data
  web-console (>= 4.1.0)
  webdrivers

RUBY VERSION
   ruby 3.0.0p0

BUNDLED WITH
   2.2.3

New Rails 7 App with ESBuild, and Bootstrap. It works. OK. Great. Builds fine.

In the provided app/assets/stylesheets/application.bootstrap.scss file, if I were to add a single class of valid code to use an image, it all breaks. For example:

.test {
   background-image: image-url("foo.jpg");
}

For whatever reason, when the sass command tries to build that, the build blows up with errors. Specifically, the long-ass fingerprint signature added to the asset is part of the error. Not sure why. It seems the helpers for sass are not being digested properly as per the old sassc-rails gem. So what is the modern way to go here?

What is the secret to using the needed helpers to get assets into Sass with the new setup and CSS Bundling gem?

This is how my package.json looks:

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.8.1",
    "esbuild": "^0.14.38",
    "sass": "^1.50.1"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }

}

When I paste the simple navbar into my application.html.erb and click on the dropdown menu, I got this message in the console:

**Uncaught SyntaxError: Cannot use import statement outside a module**

Please help, I have read in some stackoverflow that this should be fixed adding
"type":

"module",

to the package.json: (here)

But cant make the dropdown works :-(

Please help!!!

PS:

This is where the error is sent: