Uses tailwindcss cli to render minimal css

Author: jonsgreen

Gemfile

@@ -54,7 +54,6 @@ gem 'redcarpet', '~> 3.5'
 gem 'simple_form'
 gem 'tinymce-rails'
 gem 'image_processing', '~> 1.2'
-gem 'puppeteer-ruby'
 gem 'react-rails'
 gem 'webpacker'
 

Gemfile.lock

@@ -362,10 +362,6 @@ GEM
       nio4r (~> 2.0)
     pundit (2.1.1)
       activesupport (>= 3.0.0)
-    puppeteer-ruby (0.40.7)
-      concurrent-ruby (~> 1.1.0)
-      mime-types (>= 3.0)
-      websocket-driver (>= 0.6.0)
     racc (1.6.0)
     rack (2.2.3.1)
     rack-mini-profiler (2.3.3)
@@ -583,7 +579,6 @@ DEPENDENCIES
   pry-rescue
   puma
   pundit
-  puppeteer-ruby
   rack-mini-profiler
   rack-timeout (~> 0.5)
   rails (~> 6.1.4)

app/controllers/staff/pages_controller.rb

@@ -71,24 +71,28 @@ def set_page
   end
 
   def save_tailwind_page_content
-    Puppeteer.launch(
-      headless: true,
-      args: ['--no-sandbox', '--disable-setuid-sandbox']
-    ) do |browser|
-      page = browser.pages.first || browser.new_page
-      page.goto(root_url)
-      cookies.each do |name, value|
-        page.set_cookie(name: name, value: value)
-      end
-      page.goto(event_staff_page_url(current_event, @page), wait_until: 'domcontentloaded')
-      css = page.query_selector_all('style').map do |style|
-        style.evaluate('(el) => el.textContent')
-      end.detect { |text| text.match("tailwindcss") }
-      html = "<style>#{css}</style>"
-
-      content = @page.contents.find_or_initialize_by(name: Page::TAILWIND)
-      content.update!(placement: Website::Content::HEAD, html: html)
+    @body = @page.unpublished_body
+    content = render_to_string(template: 'pages/show', layout: "themes/#{current_website.theme}")
+    command = ["yarn run tailwindcss --minify"]
+    page_file = Tempfile.new(['page_content', '.html'], 'tmp')
+    page_file.write(content)
+    page_file.close
+    command.push("--content", page_file.path)
+    if tailwind_config = current_website.tailwind_config
+      config_file = Tempfile.new(['config_file', '.js'], 'tmp')
+      config_file.write(tailwind_config)
+      config_file.close
+      command.push("--config", config_file.path)
     end
+    output = `#{command.join(' ')}`
+    css = output.match(/(\/\*! tailwindcss .*)/m)
+    html = "<style>#{css}</style>"
+
+    content = @page.contents.find_or_initialize_by(name: Page::TAILWIND)
+    content.update!(placement: Website::Content::HEAD, html: html)
+  ensure
+    page_file&.unlink
+    config_file&.unlink
   end
 
   def build_page

app/models/website.rb

@@ -29,6 +29,16 @@ def self.domain_match(domain)
     where(arel_table[:domains].matches("%#{domain}%"))
   end
 
+  def tailwind_config
+    config = contents
+      .where(Content.arel_table[:html]
+      .matches("%tailwind.config%"))
+      .first
+    if config
+      config.html.gsub(%r{<script>|</script>}, "").gsub("tailwind.config", "module.exports")
+    end
+  end
+
   def manual_purge
     purge_cache { save }
   end

package.json

@@ -14,7 +14,8 @@
     "react-dom": "^16.8.6",
     "react_ujs": "^2.5.0",
     "regenerator-runtime": "^0.13.7",
-    "stimulus": "^3.0.1"
+    "stimulus": "^3.0.1",
+    "tailwindcss": "^3.1.5"
   },
   "devDependencies": {
     "webpack-dev-server": "^3.3.1"