Merge pull request rails#38 from wnm/new-class-name-regex-for-haml

Change CLASS_NAME_PATTERN to work also for haml templates

Author: David Heinemeier Hansson

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)

test/fixtures/placeholders.html.haml

@@ -0,0 +1 @@
+%input.placeholder-transparent.focus-within:outline-black/

test/fixtures/placeholders.html.slim

@@ -0,0 +1 @@
+input.placeholder-transparent.focus-within:outline-black

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"}/