From fbaa4ad7f200a44034677b50680f5cf12bf5201c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfram=20Nikolas=20Mu=CC=88ller?= Date: Sun, 7 Feb 2021 15:02:21 +0100 Subject: [PATCH 1/4] Change CLASS_NAME_PATTERN to work also for haml templates --- lib/tailwindcss/purger.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/tailwindcss/purger.rb b/lib/tailwindcss/purger.rb index 71afaa3a..1c535e41 100644 --- 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) From e2786d7b521700b6a6e4ad533a968217d36fc712 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfram=20Nikolas=20Mu=CC=88ller?= Date: Sun, 7 Feb 2021 19:57:55 +0100 Subject: [PATCH 2/4] Add tests and fixtures for haml support --- test/fixtures/placeholders.html.haml | 1 + test/fixtures/show.html.haml | 124 +++++++++++++++++++++++++++ test/fixtures/simple.html.haml | 1 + test/purger_test.rb | 34 ++++++-- 4 files changed, 154 insertions(+), 6 deletions(-) create mode 100644 test/fixtures/placeholders.html.haml create mode 100644 test/fixtures/show.html.haml create mode 100644 test/fixtures/simple.html.haml diff --git a/test/fixtures/placeholders.html.haml b/test/fixtures/placeholders.html.haml new file mode 100644 index 00000000..2f1d542a --- /dev/null +++ b/test/fixtures/placeholders.html.haml @@ -0,0 +1 @@ +%input.placeholder-transparent.focus-within:outline-black/ \ No newline at end of file diff --git a/test/fixtures/show.html.haml b/test/fixtures/show.html.haml new file mode 100644 index 00000000..010abfd3 --- /dev/null +++ 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"}/ \ No newline at end of file diff --git a/test/fixtures/simple.html.haml b/test/fixtures/simple.html.haml new file mode 100644 index 00000000..748c17dd --- /dev/null +++ b/test/fixtures/simple.html.haml @@ -0,0 +1 @@ +.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"} \ No newline at end of file diff --git a/test/purger_test.rb b/test/purger_test.rb index e6f583f5..d737abbd 100644 --- a/test/purger_test.rb +++ b/test/purger_test.rb @@ -11,8 +11,26 @@ class Tailwindcss::PurgerTest < ActiveSupport::TestCase Tailwindcss::Purger.extract_class_names_from(Pathname.new(__dir__).join("fixtures/simple.html.erb")) end + test "extract class names from haml string" do + assert_equal %w[ class max-w-7xl mx-auto my-1.5 px-4 sm:px-6 lg:px-8 sm:py-0.5 translate-x-1/2 ].sort, + Tailwindcss::Purger.extract_class_names(%(.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"})) + end + test "basic purge" do - purged = purged_tailwind_from_fixtures + purged = purged_tailwind_from_erb_fixtures + + assert purged !~ /.mt-6 \{/ + + assert purged =~ /.mt-5 \{/ + assert purged =~ /.sm\\:px-6 \{/ + assert purged =~ /.translate-x-1\\\/2 \{/ + assert purged =~ /.mt-10 \{/ + assert purged =~ /.my-1\\.5 \{/ + assert purged =~ /.sm\\:py-0\\.5 \{/ + end + + test "basic haml purge" do + purged = purged_tailwind_from_haml_fixtures assert purged !~ /.mt-6 \{/ @@ -39,19 +57,19 @@ class Tailwindcss::PurgerTest < ActiveSupport::TestCase end test "purge removes empty blocks" do - purged = purged_tailwind_from_fixtures + purged = purged_tailwind_from_erb_fixtures assert purged !~ /\{\s*\}/ end test "purge removes top-level comments" do - purged = purged_tailwind_from_fixtures + purged = purged_tailwind_from_erb_fixtures assert purged !~ /^#{Regexp.escape "/*"}/ end test "purge shouldn't remove hover or focus classes" do - purged = purged_tailwind_from_fixtures + purged = purged_tailwind_from_erb_fixtures assert purged =~ /.hover\\\:text-gray-500\:hover \{/ assert purged =~ /.focus\\\:outline-none\:focus \{/ assert purged =~ /.focus-within\\\:outline-black\:focus-within \{/ @@ -142,8 +160,12 @@ def purged_tailwind(keep_these_class_names:) purged_css(tailwind, keep_these_class_names: keep_these_class_names) end - def purged_tailwind_from_fixtures - $purged_tailwind_from_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.erb") + def purged_tailwind_from_erb_fixtures + $purged_tailwind_from_erb_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.erb") + end + + def purged_tailwind_from_haml_fixtures + $purged_tailwind_from_haml_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.haml") end def purged_tailwind_from files From 0129f903b5886a09936de20341a1054c908d45bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfram=20Nikolas=20Mu=CC=88ller?= Date: Mon, 23 Aug 2021 11:36:39 +0200 Subject: [PATCH 3/4] add test to extract class names from haml file correctly --- test/purger_test.rb | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/test/purger_test.rb b/test/purger_test.rb index d737abbd..348ca0fe 100644 --- a/test/purger_test.rb +++ b/test/purger_test.rb @@ -1,12 +1,12 @@ require "test_helper" class Tailwindcss::PurgerTest < ActiveSupport::TestCase - test "extract class names from string" do + test "extract class names from erb string" do assert_equal %w[ div class max-w-7xl mx-auto my-1.5 px-4 sm:px-6 lg:px-8 sm:py-0.5 translate-x-1/2 ].sort, Tailwindcss::Purger.extract_class_names(%(
)) end - test "extract class names from files" do + test "extract class names from erb file" do assert_equal %w[ div class max-w-7xl mx-auto my-1.5 px-4 sm:px-6 lg:px-8 sm:py-0.5 translate-x-1/2 ].sort, Tailwindcss::Purger.extract_class_names_from(Pathname.new(__dir__).join("fixtures/simple.html.erb")) end @@ -16,6 +16,11 @@ class Tailwindcss::PurgerTest < ActiveSupport::TestCase Tailwindcss::Purger.extract_class_names(%(.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"})) end + test "extract class names from haml file" do + assert_equal %w[ class max-w-7xl mx-auto my-1.5 px-4 sm:px-6 lg:px-8 sm:py-0.5 translate-x-1/2 ].sort, + Tailwindcss::Purger.extract_class_names_from(Pathname.new(__dir__).join("fixtures/simple.html.haml")) + end + test "basic purge" do purged = purged_tailwind_from_erb_fixtures From dcf1d0516bce94da68f056e8286ce5ae947bfcd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfram=20Nikolas=20Mu=CC=88ller?= Date: Mon, 23 Aug 2021 11:37:05 +0200 Subject: [PATCH 4/4] add tests for slim syntax --- test/fixtures/placeholders.html.slim | 1 + test/fixtures/show.html.slim | 124 +++++++++++++++++++++++++++ test/fixtures/simple.html.slim | 1 + test/purger_test.rb | 27 ++++++ 4 files changed, 153 insertions(+) create mode 100644 test/fixtures/placeholders.html.slim create mode 100644 test/fixtures/show.html.slim create mode 100644 test/fixtures/simple.html.slim diff --git a/test/fixtures/placeholders.html.slim b/test/fixtures/placeholders.html.slim new file mode 100644 index 00000000..b25f7659 --- /dev/null +++ b/test/fixtures/placeholders.html.slim @@ -0,0 +1 @@ +input.placeholder-transparent.focus-within:outline-black \ No newline at end of file diff --git a/test/fixtures/show.html.slim b/test/fixtures/show.html.slim new file mode 100644 index 00000000..04b2eb9e --- /dev/null +++ b/test/fixtures/show.html.slim @@ -0,0 +1,124 @@ +.py-12.bg-white.translate-x-1/2 class="my-1.5 sm:py-0.5" + .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 + svg.h-6.w-6[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true"] + path[stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"] + .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 + svg.h-6.w-6[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true"] + path[stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"] + .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 + svg.h-6.w-6[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true"] + path[stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"] + .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 + svg.h-6.w-6[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true"] + path[stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"] + .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.translate-x-1/2[fill="currentColor" viewbox="0 0 100 100" preserveaspectratio="none" aria-hidden="true"] + 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[type="button" aria-haspopup="true"] + span.sr-only + | Open main menu + svg.h-6.w-6[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true"] + path[stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"] + .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 + .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[src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt=""] + .-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 + svg.h-6.w-6[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true"] + path[stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"] + div[role="menu" aria-orientation="vertical" aria-labelledby="main-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.lg:w-1/2 + img.h-56.w-full.object-cover.sm:h-72.md:h-96.lg:w-full.lg:h-full[src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt=""] \ No newline at end of file diff --git a/test/fixtures/simple.html.slim b/test/fixtures/simple.html.slim new file mode 100644 index 00000000..f3549155 --- /dev/null +++ b/test/fixtures/simple.html.slim @@ -0,0 +1 @@ +.max-w-7xl.mx-auto.px-4.sm:px-6.lg:px-8.translate-x-1/2 class="my-1.5 sm:py-0.5" \ No newline at end of file diff --git a/test/purger_test.rb b/test/purger_test.rb index 348ca0fe..c23dc68d 100644 --- a/test/purger_test.rb +++ b/test/purger_test.rb @@ -21,6 +21,16 @@ class Tailwindcss::PurgerTest < ActiveSupport::TestCase Tailwindcss::Purger.extract_class_names_from(Pathname.new(__dir__).join("fixtures/simple.html.haml")) end + test "extract class names from slim string" do + assert_equal %w[ class max-w-7xl mx-auto my-1.5 px-4 sm:px-6 lg:px-8 sm:py-0.5 translate-x-1/2 ].sort, + Tailwindcss::Purger.extract_class_names(%(.max-w-7xl.mx-auto.px-4.sm:px-6.lg:px-8.translate-x-1/2 class="my-1.5 sm:py-0.5")) + end + + test "extract class names from slim file" do + assert_equal %w[ class max-w-7xl mx-auto my-1.5 px-4 sm:px-6 lg:px-8 sm:py-0.5 translate-x-1/2 ].sort, + Tailwindcss::Purger.extract_class_names_from(Pathname.new(__dir__).join("fixtures/simple.html.slim")) + end + test "basic purge" do purged = purged_tailwind_from_erb_fixtures @@ -47,6 +57,19 @@ class Tailwindcss::PurgerTest < ActiveSupport::TestCase assert purged =~ /.sm\\:py-0\\.5 \{/ end + test "basic slim purge" do + purged = purged_tailwind_from_slim_fixtures + + assert purged !~ /.mt-6 \{/ + + assert purged =~ /.mt-5 \{/ + assert purged =~ /.sm\\:px-6 \{/ + assert purged =~ /.translate-x-1\\\/2 \{/ + assert purged =~ /.mt-10 \{/ + assert purged =~ /.my-1\\.5 \{/ + assert purged =~ /.sm\\:py-0\\.5 \{/ + end + test "purge handles class names that begin with a number" do purged = purged_tailwind(keep_these_class_names: %w[32xl:container]) @@ -173,6 +196,10 @@ def purged_tailwind_from_haml_fixtures $purged_tailwind_from_haml_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.haml") end + def purged_tailwind_from_slim_fixtures + $purged_tailwind_from_haml_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.slim") + end + def purged_tailwind_from files Tailwindcss::Purger.purge tailwind, keeping_class_names_from_files: files end