Delete existing CSS processors when installing gem into existing project

[ellismarkf]

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?

[chloerei]

According to the discussion in another thread, Sprockets will have a simplified version.

https://github.com/rails/jsbundling-rails/issues/24#issuecomment-920135911

[dhh]

Yeah, I'd prefer to pursue the simpler sprockets. If someone is using css/js bundling, they need very little from sprockets. We should find a way to give that very little.

[dhh]

Actually, regardless of the simpler sprockets (which is now called Propshaft), we still need to fix this issue.

Did you remove //= link_directory ../stylesheets .css from your manifest file? Or are you mixing and matching?

[jankeesvw]

I am currently also experiencing this problem. I am switching to the new cssbundling-rails, when I run all specs I see:

SassC::SyntaxError - Error: unterminated attribute selector for type
        on line 1182:16 of stdin
>> .prose ol[type="A" s] {
   ---------------^:
  app/views/shared/_page.html.erb:19
  app/views/dashboard/index.html.erb:3

I tried the first suggestion (bundle remove sass-rails), but that didn't help.

[jankeesvw]

I spent an hour working on this issue, I found a work around that works for me. The the problem happens because of the @tailwindcss/typography` plugin. Compilation trips over this line.

This was recently added, so when I rolled back to version 0.4.0 of @tailwindcss/typography the issue was fixed.

diff --git a/StekkerWeb/package.json b/StekkerWeb/package.json
index a7845c5f..3155373d 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "@rails/webpacker": "^5.4.3",
     "@sinonjs/fake-timers": "^7.1.2",
     "@tailwindcss/forms": "^0.3.3",
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/typography": "0.4.0",
     "autoprefixer": "^10.3.6",
     "chart.js": "^3.5.1",
     "chartkick": "^4.0.5",
diff --git a/StekkerWeb/yarn.lock b/StekkerWeb/yarn.lock
index 74352df1..c7c81313 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1063,10 +1063,10 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"

-"@tailwindcss/typography@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.4.1.tgz#51ddbceea6a0ee9902c649dbe58871c81a831212"
-  integrity sha512-ovPPLUhs7zAIJfr0y1dbGlyCuPhpuv/jpBoFgqAc658DWGGrOBWBMpAWLw2KlzbNeVk4YBJMzue1ekvIbdw6XA==
+"@tailwindcss/typography@0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.4.0.tgz#b80974ad6af93df7b06e1981cb4d79698b6ad5c7"
+  integrity sha512-3BfOYT5MYNEq81Ism3L2qu/HRP2Q5vWqZtZRQqQrthHuaTK9qpuPfbMT5WATjAM5J1OePKBaI5pLoX4S1JGNMQ==
   dependencies:
     lodash.castarray "^4.4.0"
     lodash.isplainobject "^4.0.6"

For future reference; I also noticed that other repositories complain about this issue: https://github.com/tailwindlabs/tailwindcss-typography/pull/137#issuecomment-869075401.

[dhh]

I tried to replicate this on a new Rails 7 app with the @tailwindcss/typography plugin. Seems like it's fixed?

[dhh]

Made a note of the issue and the resolution here: https://github.com/rails/cssbundling-rails/commit/4ed127624bba74e4cdb51c799380eaaa63ced64d