Skip to content

Commit e2786d7

Browse files
author
Wolfram Nikolas Müller
committed
Add tests and fixtures for haml support
1 parent fbaa4ad commit e2786d7

File tree

4 files changed

+154
-6
lines changed

4 files changed

+154
-6
lines changed

‎test/fixtures/placeholders.html.haml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
%input.placeholder-transparent.focus-within:outline-black/

‎test/fixtures/show.html.haml‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
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"}
2+
.py-12.bg-white
3+
.max-w-7xl.mx-auto.px-4.sm:px-6.lg:px-8
4+
.lg:text-center
5+
%h2.text-base.text-indigo-600.font-semibold.tracking-wide.uppercase Transactions
6+
%p.mt-2.text-3xl.leading-8.font-extrabold.tracking-tight.text-gray-900.sm:text-4xl
7+
A better way to send money
8+
%p.mt-4.max-w-2xl.text-xl.text-gray-500.lg:mx-auto
9+
Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.
10+
.mt-10
11+
%dl.space-y-10.md:space-y-0.md:grid.md:grid-cols-2.md:gap-x-8.md:gap-y-10
12+
.flex
13+
.flex-shrink-0
14+
.flex.items-center.justify-center.h-12.w-12.rounded-md.bg-blue-500.text-white
15+
/ Heroicon name: globe-alt
16+
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
17+
%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"}
18+
.ml-4
19+
%dt.text-lg.leading-6.font-medium.text-gray-900
20+
Competitive exchange rates
21+
%dd.mt-2.text-base.text-gray-500
22+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
23+
.flex
24+
.flex-shrink-0
25+
.flex.items-center.justify-center.h-12.w-12.rounded-md.bg-indigo-500.text-white
26+
/ Heroicon name: scale
27+
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
28+
%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"}
29+
.ml-4
30+
%dt.text-lg.leading-6.font-medium.text-gray-900
31+
No hidden fees
32+
%dd.mt-2.text-base.text-gray-500
33+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
34+
.flex
35+
.flex-shrink-0
36+
.flex.items-center.justify-center.h-12.w-12.rounded-md.bg-indigo-500.text-white
37+
/ Heroicon name: lightning-bolt
38+
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
39+
%path{:d => "M13 10V3L4 14h7v7l9-11h-7z", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
40+
.ml-4
41+
%dt.text-lg.leading-6.font-medium.text-gray-900
42+
Transfers are instant
43+
%dd.mt-2.text-base.text-gray-500
44+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
45+
.flex
46+
.flex-shrink-0
47+
.flex.items-center.justify-center.h-12.w-12.rounded-md.bg-indigo-500.text-white
48+
/ Heroicon name: annotation
49+
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
50+
%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"}
51+
.ml-4
52+
%dt.text-lg.leading-6.font-medium.text-gray-900
53+
Mobile notifications
54+
%dd.mt-2.text-base.text-gray-500
55+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
56+
.relative.bg-white.overflow-hidden
57+
.max-w-7xl.mx-auto
58+
.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
59+
%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"}
60+
%polygon{:points => "50,0 100,0 50,100 0,100"}
61+
.relative.pt-6.px-4.sm:px-6.lg:px-8
62+
%nav.relative.flex.items-center.justify-between.sm:h-10.lg:justify-start{"aria-label" => "Global"}
63+
.flex.items-center.flex-grow.flex-shrink-0.lg:flex-grow-0
64+
.flex.items-center.justify-between.w-full.md:w-auto
65+
%a{:href => "#"}
66+
%span.sr-only Workflow
67+
%img.h-8.w-auto.sm:h-10{:src => "https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"}/
68+
.-mr-2.flex.items-center.md:hidden
69+
%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"}
70+
%span.sr-only Open main menu
71+
/ Heroicon name: menu
72+
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
73+
%path{:d => "M4 6h16M4 12h16M4 18h16", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
74+
.hidden.md:block.md:ml-10.md:pr-4.md:space-x-8
75+
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Product
76+
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Features
77+
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Marketplace
78+
%a.font-medium.text-gray-500.hover:text-gray-900{:href => "#"} Company
79+
%a.font-medium.text-indigo-600.hover:text-indigo-500{:href => "#"} Log in
80+
/
81+
Mobile menu, show/hide based on menu open state.
82+
83+
Entering: "duration-150 ease-out"
84+
From: "opacity-0 scale-95"
85+
To: "opacity-100 scale-100"
86+
Leaving: "duration-100 ease-in"
87+
From: "opacity-100 scale-100"
88+
To: "opacity-0 scale-95"
89+
.absolute.top-0.inset-x-0.p-2.transition.transform.origin-top-right.md:hidden
90+
.rounded-lg.shadow-md.bg-white.ring-1.ring-black.ring-opacity-5.overflow-hidden
91+
.px-5.pt-4.flex.items-center.justify-between
92+
%div
93+
%img.h-8.w-auto{:alt => "", :src => "https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"}/
94+
.-mr-2
95+
%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"}
96+
%span.sr-only Close main menu
97+
/ Heroicon name: x
98+
%svg.h-6.w-6{"aria-hidden" => "true", :fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
99+
%path{:d => "M6 18L18 6M6 6l12 12", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
100+
%div{"aria-labelledby" => "main-menu", "aria-orientation" => "vertical", :role => "menu"}
101+
.px-2.pt-2.pb-3.space-y-1{:role => "none"}
102+
%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
103+
%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
104+
%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
105+
%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
106+
%div{:role => "none"}
107+
%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"}
108+
Log in
109+
%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
110+
.sm:text-center.lg:text-left
111+
%h1.text-4xl.tracking-tight.font-extrabold.text-gray-900.sm:text-5xl.md:text-6xl
112+
%span.block.xl:inline Data to enrich your
113+
%span.block.text-indigo-600.xl:inline online business
114+
%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
115+
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
116+
.mt-5.sm:mt-8.sm:flex.sm:justify-center.lg:justify-start
117+
.rounded-md.shadow
118+
%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 => "#"}
119+
Get started
120+
.mt-3.sm:mt-0.sm:ml-3
121+
%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 => "#"}
122+
Live demo
123+
.lg:absolute.lg:inset-y-0.lg:right-0{:class => "lg:w-1/2"}
124+
%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"}/

‎test/fixtures/simple.html.haml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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"}

‎test/purger_test.rb‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,26 @@ class Tailwindcss::PurgerTest < ActiveSupport::TestCase
1111
Tailwindcss::Purger.extract_class_names_from(Pathname.new(__dir__).join("fixtures/simple.html.erb"))
1212
end
1313

14+
test "extract class names from haml string" do
15+
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,
16+
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"}))
17+
end
18+
1419
test "basic purge" do
15-
purged = purged_tailwind_from_fixtures
20+
purged = purged_tailwind_from_erb_fixtures
21+
22+
assert purged !~ /.mt-6 \{/
23+
24+
assert purged =~ /.mt-5 \{/
25+
assert purged =~ /.sm\\:px-6 \{/
26+
assert purged =~ /.translate-x-1\\\/2 \{/
27+
assert purged =~ /.mt-10 \{/
28+
assert purged =~ /.my-1\\.5 \{/
29+
assert purged =~ /.sm\\:py-0\\.5 \{/
30+
end
31+
32+
test "basic haml purge" do
33+
purged = purged_tailwind_from_haml_fixtures
1634

1735
assert purged !~ /.mt-6 \{/
1836

@@ -39,19 +57,19 @@ class Tailwindcss::PurgerTest < ActiveSupport::TestCase
3957
end
4058

4159
test "purge removes empty blocks" do
42-
purged = purged_tailwind_from_fixtures
60+
purged = purged_tailwind_from_erb_fixtures
4361

4462
assert purged !~ /\{\s*\}/
4563
end
4664

4765
test "purge removes top-level comments" do
48-
purged = purged_tailwind_from_fixtures
66+
purged = purged_tailwind_from_erb_fixtures
4967

5068
assert purged !~ /^#{Regexp.escape "/*"}/
5169
end
5270

5371
test "purge shouldn't remove hover or focus classes" do
54-
purged = purged_tailwind_from_fixtures
72+
purged = purged_tailwind_from_erb_fixtures
5573
assert purged =~ /.hover\\\:text-gray-500\:hover \{/
5674
assert purged =~ /.focus\\\:outline-none\:focus \{/
5775
assert purged =~ /.focus-within\\\:outline-black\:focus-within \{/
@@ -142,8 +160,12 @@ def purged_tailwind(keep_these_class_names:)
142160
purged_css(tailwind, keep_these_class_names: keep_these_class_names)
143161
end
144162

145-
def purged_tailwind_from_fixtures
146-
$purged_tailwind_from_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.erb")
163+
def purged_tailwind_from_erb_fixtures
164+
$purged_tailwind_from_erb_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.erb")
165+
end
166+
167+
def purged_tailwind_from_haml_fixtures
168+
$purged_tailwind_from_haml_fixtures ||= purged_tailwind_from Pathname(__dir__).glob("fixtures/*.html.haml")
147169
end
148170

149171
def purged_tailwind_from files

0 commit comments

Comments
 (0)