Merge branch 'rails:main' into main

BakiVernes · web-flow · commit 71ce4fcef593 · 2021-09-02T19:00:25.000+02:00
diff --git a/.github/workflows/update-tailwind.yml b/.github/workflows/update-tailwind.yml
@@ -21,7 +21,7 @@ jobs:
       run: |
         git config --local user.email "github-actions@example.com"
         git config --local user.name "GitHub Actions"
-        git commit -am "Update tailwind.css" || echo "No changes to commit"
+        git diff --quiet app/assets || git commit -am "Update tailwind.css"
 
     - name: Push changes
       uses: ad-m/github-push-action@master
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,66 +1,66 @@
 PATH
   remote: .
   specs:
-    tailwindcss-rails (0.4.1)
+    tailwindcss-rails (0.4.3)
       rails (>= 6.0.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.1.4)
-      actionpack (= 6.1.4)
-      activesupport (= 6.1.4)
+    actioncable (6.1.4.1)
+      actionpack (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.4)
-      actionpack (= 6.1.4)
-      activejob (= 6.1.4)
-      activerecord (= 6.1.4)
-      activestorage (= 6.1.4)
-      activesupport (= 6.1.4)
+    actionmailbox (6.1.4.1)
+      actionpack (= 6.1.4.1)
+      activejob (= 6.1.4.1)
+      activerecord (= 6.1.4.1)
+      activestorage (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       mail (>= 2.7.1)
-    actionmailer (6.1.4)
-      actionpack (= 6.1.4)
-      actionview (= 6.1.4)
-      activejob (= 6.1.4)
-      activesupport (= 6.1.4)
+    actionmailer (6.1.4.1)
+      actionpack (= 6.1.4.1)
+      actionview (= 6.1.4.1)
+      activejob (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.4)
-      actionview (= 6.1.4)
-      activesupport (= 6.1.4)
+    actionpack (6.1.4.1)
+      actionview (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.4)
-      actionpack (= 6.1.4)
-      activerecord (= 6.1.4)
-      activestorage (= 6.1.4)
-      activesupport (= 6.1.4)
+    actiontext (6.1.4.1)
+      actionpack (= 6.1.4.1)
+      activerecord (= 6.1.4.1)
+      activestorage (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       nokogiri (>= 1.8.5)
-    actionview (6.1.4)
-      activesupport (= 6.1.4)
+    actionview (6.1.4.1)
+      activesupport (= 6.1.4.1)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.1.4)
-      activesupport (= 6.1.4)
+    activejob (6.1.4.1)
+      activesupport (= 6.1.4.1)
       globalid (>= 0.3.6)
-    activemodel (6.1.4)
-      activesupport (= 6.1.4)
-    activerecord (6.1.4)
-      activemodel (= 6.1.4)
-      activesupport (= 6.1.4)
-    activestorage (6.1.4)
-      actionpack (= 6.1.4)
-      activejob (= 6.1.4)
-      activerecord (= 6.1.4)
-      activesupport (= 6.1.4)
+    activemodel (6.1.4.1)
+      activesupport (= 6.1.4.1)
+    activerecord (6.1.4.1)
+      activemodel (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
+    activestorage (6.1.4.1)
+      actionpack (= 6.1.4.1)
+      activejob (= 6.1.4.1)
+      activerecord (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       marcel (~> 1.0.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.4)
+    activesupport (6.1.4.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -82,7 +82,7 @@ GEM
       mini_mime (>= 0.1.1)
     marcel (1.0.1)
     method_source (1.0.0)
-    mini_mime (1.1.0)
+    mini_mime (1.1.1)
     mini_portile2 (2.6.1)
     minitest (5.14.4)
     nio4r (2.5.8)
@@ -93,29 +93,29 @@ GEM
     rack (2.2.3)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (6.1.4)
-      actioncable (= 6.1.4)
-      actionmailbox (= 6.1.4)
-      actionmailer (= 6.1.4)
-      actionpack (= 6.1.4)
-      actiontext (= 6.1.4)
-      actionview (= 6.1.4)
-      activejob (= 6.1.4)
-      activemodel (= 6.1.4)
-      activerecord (= 6.1.4)
-      activestorage (= 6.1.4)
-      activesupport (= 6.1.4)
+    rails (6.1.4.1)
+      actioncable (= 6.1.4.1)
+      actionmailbox (= 6.1.4.1)
+      actionmailer (= 6.1.4.1)
+      actionpack (= 6.1.4.1)
+      actiontext (= 6.1.4.1)
+      actionview (= 6.1.4.1)
+      activejob (= 6.1.4.1)
+      activemodel (= 6.1.4.1)
+      activerecord (= 6.1.4.1)
+      activestorage (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       bundler (>= 1.15.0)
-      railties (= 6.1.4)
+      railties (= 6.1.4.1)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.3.0)
+    rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
-    railties (6.1.4)
-      actionpack (= 6.1.4)
-      activesupport (= 6.1.4)
+    railties (6.1.4.1)
+      actionpack (= 6.1.4.1)
+      activesupport (= 6.1.4.1)
       method_source
       rake (>= 0.13)
       thor (~> 1.0)
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
 
-This gem gives access to the standard Tailwind CSS framework configured for dark mode, forms, aspect-ratio, typography, and the Inter font via the asset pipeline using Sprockets. If you need to customize Tailwind, you will need to install it the traditional way using [Webpacker](https://github.com/rails/webpacker) instead.
+This gem gives access to the standard Tailwind CSS framework configured for dark mode, forms, aspect-ratio, typography, and the Inter font via the asset pipeline using Sprockets. If you need to customize Tailwind, you will need to install it the traditional way using [Webpacker](https://github.com/rails/webpacker) instead or use webpacker port of this gem [tailwindcss-rails-webpacker](https://github.com/WizardComputer/tailwindcss-rails-webpacker).
 
 Production-mode purging of unused css class names is provided by a Sprockets compressor built into this gem. This compressor ensures that only the css classes used by files in `app/views` and `app/helpers` are included. In development mode, the full 7mb+ Tailwind stylesheet is loaded.
 
diff --git a/lib/install/tailwindcss.rb b/lib/install/tailwindcss.rb
@@ -2,14 +2,19 @@
 
 if APPLICATION_LAYOUT_PATH.exist?
   say "Add Tailwindcss include tags in application layout"
-  insert_into_file Rails.root.join("app/views/layouts/application.html.erb").to_s, %(\n    <%= stylesheet_link_tag "inter-font" %>\n    <%= stylesheet_link_tag "tailwind" %>), before: /^\s*<%= stylesheet_link_tag/
+  insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
+    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+  ERB
 else
   say "Default application.html.erb is missing!", :red
-  say %(        Add <%= stylesheet_link_tag "inter-font" %> and <%= stylesheet_link_tag "tailwind" %> within the <head> tag in your custom layout.)
+  say %(        Add <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %> and <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
 end
 
-say "Removing scaffold styles"
-remove_file Rails.root.join("app/assets/stylesheets/scaffolds.scss")
+# No longer included by default in Rails 7, but for earlier versions of Rails
+if (scaffolds_css_path = Rails.root.join("app/assets/stylesheets/scaffolds.scss")).exist?
+  remove_file scaffolds_css_path
+end
 
 say "Turn on purging of unused css classes in production"
 gsub_file Rails.root.join("config/environments/production.rb"), /^\s+#?\s+config.assets.css_compressor =.*$/, %(  config.assets.css_compressor = :purger)
diff --git a/lib/tailwindcss/purger.rb b/lib/tailwindcss/purger.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Tailwindcss::Purger
-  CLASS_NAME_PATTERN = /[:A-Za-z0-9_-]+[\.]*[\\\/:A-Za-z0-9_-]*/
+  CLASS_NAME_PATTERN = /((?:[:A-Za-z0-9_-]+[\\\/:A-Za-z0-9_-]*[0-3][\\.]*5)|(?:[A-Za-z0-9_-]+[\\\/:A-Za-z0-9_-]*))/
 
   CLASS_BREAK = /(?![-_a-z0-9\\])/i # `\b` for class selectors
 
@@ -29,7 +29,7 @@ def purge(input, keeping_class_names_from_files:)
     end
 
     def extract_class_names(string)
-      string.scan(CLASS_NAME_PATTERN).uniq.sort!
+      string.scan(CLASS_NAME_PATTERN).flatten.uniq.sort!
     end
 
     def extract_class_names_from(files)
diff --git a/lib/tailwindcss/version.rb b/lib/tailwindcss/version.rb
@@ -1,3 +1,3 @@
 module Tailwindcss
-  VERSION = "0.4.1"
+  VERSION = "0.4.3"
 end
diff --git a/test/fixtures/placeholders.html.haml b/test/fixtures/placeholders.html.haml
@@ -0,0 +1 @@
+%input.placeholder-transparent.focus-within:outline-black/
diff --git a/test/fixtures/placeholders.html.slim b/test/fixtures/placeholders.html.slim
@@ -0,0 +1 @@
+input.placeholder-transparent.focus-within:outline-black
diff --git a/test/fixtures/show.html.haml b/test/fixtures/show.html.haml
@@ -0,0 +1,124 @@
+.max-w-7xl.mx-auto.px-4.sm:px-6.lg:px-8{:class => "my-1.5 sm:py-0.5 translate-x-1/2"}
+  .py-12.bg-white
+    .max-w-7xl.mx-auto.px-4.sm:px-6.lg:px-8
+      .lg:text-center
+        %h2.text-base.text-indigo-600.font-semibold.tracking-wide.uppercase Transactions
+        %p.mt-2.text-3xl.leading-8.font-extrabold.tracking-tight.text-gray-900.sm:text-4xl
+          A better way to send money
+        %p.mt-4.max-w-2xl.text-xl.text-gray-500.lg:mx-auto
+          Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.
+      .mt-10
+        %dl.space-y-10.md:space-y-0.md:grid.md:grid-cols-2.md:gap-x-8.md:gap-y-10
+          .flex
+            .flex-shrink-0
+              .flex.items-center.justify-center.h-12.w-12.rounded-md.bg-blue-500.text-white
+                / Heroicon name: globe-alt
+                %svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+                  %path{:d => "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+            .ml-4
+              %dt.text-lg.leading-6.font-medium.text-gray-900
+                Competitive exchange rates
+              %dd.mt-2.text-base.text-gray-500
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
+          .flex
+            .flex-shrink-0
+              .flex.items-center.justify-center.h-12.w-12.rounded-md.bg-indigo-500.text-white
+                / Heroicon name: scale
+                %svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+                  %path{:d => "M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+            .ml-4
+              %dt.text-lg.leading-6.font-medium.text-gray-900
+                No hidden fees
+              %dd.mt-2.text-base.text-gray-500
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
+          .flex
+            .flex-shrink-0
+              .flex.items-center.justify-center.h-12.w-12.rounded-md.bg-indigo-500.text-white
+                / Heroicon name: lightning-bolt
+                %svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+                  %path{:d => "M13 10V3L4 14h7v7l9-11h-7z", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+            .ml-4
+              %dt.text-lg.leading-6.font-medium.text-gray-900
+                Transfers are instant
+              %dd.mt-2.text-base.text-gray-500
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
+          .flex
+            .flex-shrink-0
+              .flex.items-center.justify-center.h-12.w-12.rounded-md.bg-indigo-500.text-white
+                / Heroicon name: annotation
+                %svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+                  %path{:d => "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+            .ml-4
+              %dt.text-lg.leading-6.font-medium.text-gray-900
+                Mobile notifications
+              %dd.mt-2.text-base.text-gray-500
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
+  .relative.bg-white.overflow-hidden
+    .max-w-7xl.mx-auto
+      .relative.z-10.pb-8.bg-white.sm:pb-16.md:pb-20.lg:max-w-2xl.lg:w-full.lg:pb-28.xl:pb-32
+        %svg.hidden.lg:block.absolute.right-0.inset-y-0.h-full.w-48.text-white.transform{"aria-hidden" => "true", :class => "translate-x-1/2", :fill => "currentColor", :preserveaspectratio => "none", :viewbox => "0 0 100 100"}
+          %polygon{:points => "50,0 100,0 50,100 0,100"}
+        .relative.pt-6.px-4.sm:px-6.lg:px-8
+          %nav.relative.flex.items-center.justify-between.sm:h-10.lg:justify-start{"aria-label" => "Global"}
+            .flex.items-center.flex-grow.flex-shrink-0.lg:flex-grow-0
+              .flex.items-center.justify-between.w-full.md:w-auto
+                %a{:href => "#"}
+                  %span.sr-only Workflow
+                  %img.h-8.w-auto.sm:h-10{:src => "https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"}/
+                .-mr-2.flex.items-center.md:hidden
+                  %button#main-menu.bg-white.rounded-md.p-2.inline-flex.items-center.justify-center.text-gray-400.hover:text-gray-500.hover:bg-gray-100.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-indigo-500{"aria-haspopup" => "true", :type => "button"}
+                    %span.sr-only Open main menu
+                    / Heroicon name: menu
+                    %svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+                      %path{:d => "M4 6h16M4 12h16M4 18h16", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+            .hidden.md:block.md:ml-10.md:pr-4.md:space-x-8
+              %a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Product
+              %a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Features
+              %a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Marketplace
+              %a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Company
+              %a.font-medium.text-indigo-600.hover:text-indigo-500{:href => "#"} Log in
+        /
+          Mobile menu, show/hide based on menu open state.
+          
+          Entering: "duration-150 ease-out"
+          From: "opacity-0 scale-95"
+          To: "opacity-100 scale-100"
+          Leaving: "duration-100 ease-in"
+          From: "opacity-100 scale-100"
+          To: "opacity-0 scale-95"
+        .absolute.top-0.inset-x-0.p-2.transition.transform.origin-top-right.md:hidden
+          .rounded-lg.shadow-md.bg-white.ring-1.ring-black.ring-opacity-5.overflow-hidden
+            .px-5.pt-4.flex.items-center.justify-between
+              %div
+                %img.h-8.w-auto{:alt => "", :src => "https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"}/
+              .-mr-2
+                %button.bg-white.rounded-md.p-2.inline-flex.items-center.justify-center.text-gray-400.hover:text-gray-500.hover:bg-gray-100.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-indigo-500{:type => "button"}
+                  %span.sr-only Close main menu
+                  / Heroicon name: x
+                  %svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+                    %path{:d => "M6 18L18 6M6 6l12 12", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+            %div{"aria-labelledby" => "main-menu", "aria-orientation" => "vertical", :role => "menu"}
+              .px-2.pt-2.pb-3.space-y-1{:role => "none"}
+                %a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#", :role => "menuitem"} Product
+                %a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#", :role => "menuitem"} Features
+                %a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#", :role => "menuitem"} Marketplace
+                %a.block.px-3.py-2.rounded-md.text-base.font-medium.text-gray-700.hover:text-gray-900.hover:bg-gray-50{:href => "#", :role => "menuitem"} Company
+              %div{:role => "none"}
+                %a.block.w-full.px-5.py-3.text-center.font-medium.text-indigo-600.bg-gray-50.hover:bg-gray-100{:href => "#", :role => "menuitem"}
+                  Log in
+        %main.mt-10.mx-auto.max-w-7xl.px-4.sm:mt-12.sm:px-6.md:mt-16.lg:mt-20.lg:px-8.xl:mt-28
+          .sm:text-center.lg:text-left
+            %h1.text-4xl.tracking-tight.font-extrabold.text-gray-900.sm:text-5xl.md:text-6xl
+              %span.block.xl:inline Data to enrich your
+              %span.block.text-indigo-600.xl:inline online business
+            %p.mt-3.text-base.text-gray-500.sm:mt-5.sm:text-lg.sm:max-w-xl.sm:mx-auto.md:mt-5.md:text-xl.lg:mx-0
+              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
+            .mt-5.sm:mt-8.sm:flex.sm:justify-center.lg:justify-start
+              .rounded-md.shadow
+                %a.w-full.flex.items-center.justify-center.px-8.py-3.border.border-transparent.text-base.font-medium.rounded-md.text-white.bg-indigo-600.hover:bg-indigo-700.md:py-4.md:text-lg.md:px-10{:href => "#"}
+                  Get started
+              .mt-3.sm:mt-0.sm:ml-3
+                %a.w-full.flex.items-center.justify-center.px-8.py-3.border.border-transparent.text-base.font-medium.rounded-md.text-indigo-700.bg-indigo-100.hover:bg-indigo-200.md:py-4.md:text-lg.md:px-10{:href => "#"}
+                  Live demo
+    .lg:absolute.lg:inset-y-0.lg:right-0{:class => "lg:w-1/2"}
+      %img.h-56.w-full.object-cover.sm:h-72.md:h-96.lg:w-full.lg:h-full{:alt => "", :src => "https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"}/
diff --git a/test/fixtures/show.html.slim b/test/fixtures/show.html.slim
diff --git a/test/fixtures/simple.html.haml b/test/fixtures/simple.html.haml
diff --git a/test/fixtures/simple.html.slim b/test/fixtures/simple.html.slim
diff --git a/test/purger_test.rb b/test/purger_test.rb

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+%input.placeholder-transparent.focus-within:outline-black/`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+input.placeholder-transparent.focus-within:outline-black`