tailwindcss-rails raising SassC::SyntaxError

[sajjadmurtaza]

I am using gem 'tailwindcss-rails'

Layout:

    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

Production:
config.assets.css_compressor = :purger

In circle ci it's raising a following error

rake aborted!
SassC::SyntaxError: Error: unterminated attribute selector for type
on line 1021:16 of stdin

.prose ol[type="A" s] {

---------------^
stdin:1021

[gardnerapp]

Also getting this error in when running integration & controller test found this stack overflow post

https://stackoverflow.com/questions/68898511/tailwindcss-typography-sasscsyntaxerror-error-unterminated-attribute-select

which lead me to use this in my gemfile

gem "tailwindcss-rails",
github: "dorianmariefr/tailwindcss-rails",
branch: "minimal"

[rockwellll]

I can confirm, same thing is happening with my setup.

[dhh]

@dixpac If you want to dive into this one. We have to find a way such that Sassc is not being applied to the TW output.

[dixpac]

Alright. I'll give my best 😊

[ericdfields]

Same issue. Trying the forked gem for now. Subscribed 👍

[ccouton]

Is there any news about this issue? thanks

[gardnerapp]

Before my Rails App was running on version 6.1.4 . I just started a fresh app on Rails7.0.0Alpha2 and I am no longer encountering the issue I described in an earlier post.

[dhh]

This is not a problem on Rails 7 out of the box because we no longer default to having Sass turned on there. There's still a compatibility issue if you turn Sass on, because SassC doesn't understand the modern CSS syntax used by TW.

[MSchmidt]

At the point of running the compression we don't really need sass specifically. Any compressor should be fine, right? The Rails Guides still talk about yui-compressor which hasn't been touched since 2013. I did look for something newer, but sass-rails is pretty much mentioned everywhere. I guess it was too good for too long that nobody felt the need for an alternative.

[dhh]

Added a note to the README about this compatibility issue.

[domchristie]

I ran into this recently (outside of using tailwindcss-rails). My Sprockets-based solutions was to create a custom compressor, utilising a modern compressor like CSSO. It does depend on Node/npm, but I thought I'd share the steps:

1. Install csso-cli

yarn add csso-cli
# or npm install csso-cli --save 

2. Register a custom Sprockets compressor in config/initializers/csso.rb

require "open3"

class CssoCompressor
  def self.call(input)
    puts "[CssoCompressor] Compressing…"

    # Copy the contents of the CSS file to a temp file 
    temp_file = Tempfile.new([input[:name], ".css"])
    temp_file.open
    temp_file.write(input[:data])
    temp_file.flush

    # Run the compressor and capture the output
    css, err, status = Open3.capture3("npx", "csso", temp_file.path)

    {data: css}
  end
end

Rails.application.config.assets.configure do |env|
  env.register_compressor "text/css", :csso, CssoCompressor
end

A Sprockets compressor is just a class with a call method that gets called after running the processors.

3. Set the CSS compressor to :csso in production.rb

config.assets.css_compressor = :csso

/cc @MSchmidt

[AnalyzePlatypus]

@domchristie, that worked perfectly for me!
I also had to set CSS compressor to :csso in test.rb to let CI pass.

[liqites]

@domchristie You saved me! Your solution works perfect.

[benjaminwood]

While monkeypatching isn't advisable, you may find this useful if you're in a transitional phase where you need tailwind & sass at the same time.

module SassCompressorMonkeypatch
  def call_processor(processor, input)
    super
  rescue SassC::SyntaxError => e
    raise unless processor == Sprockets::SassCompressor
    puts "Warning: Could not compress #{input[:filename]} with Sprockets::SassCompressor. Returning uncompressed result."
    metadata = (input[:metadata] || {}).dup
    metadata[:data] = input[:data]
    metadata
  end
end

Sprockets::Base.prepend(SassCompressorMonkeypatch)

This simply rescues SassC::SyntaxError and returns the input, which in the case of tailwind is already compressed.