Skip to content

Commit 38c14d4

Browse files
JackardiosJackardios
committed
fix: output css formatting
1 parent f2902e7 commit 38c14d4

File tree

2 files changed

+82
-72
lines changed

2 files changed

+82
-72
lines changed

‎src/TailwindConverter.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,19 @@ export class TailwindConverter {
9494
);
9595
});
9696

97-
// clean empty rules and at-rules
97+
// cleanup
9898
parsed.root.walkRules(node => {
9999
if (node.nodes?.length === 0) {
100100
node.remove();
101+
} else {
102+
node.cleanRaws();
101103
}
102104
});
103105
parsed.root.walkAtRules(node => {
104106
if (node.nodes?.length === 0) {
105107
node.remove();
108+
} else {
109+
node.cleanRaws();
106110
}
107111
});
108112

‎test/__snapshots__/TailwindConverter.spec.ts.snap‎

Lines changed: 77 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,136 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`TailwindConverter converting css part string 1`] = `
4-
"{
5-
@apply text-center text-xs hover:text-base md:font-semibold; }"
4+
" {
5+
@apply text-center text-xs hover:text-base md:font-semibold;
6+
}"
67
`;
78

89
exports[`TailwindConverter converting css string returns tailwind nodes 1`] = `
910
"@charset \\"UTF-8\\";
10-
1111
.foo {
12-
@apply accent-custom-color-gold content-center items-start animate-spin appearance-none aspect-video content-center content-end after:content-['*'] after:select-text after:align-text-top after:origin-top hidden:delay-150 hidden:duration-200 hidden:transition hidden:ease-in;
13-
--some-size: 12px;
14-
--some-color: #333333; /* custom-color-gold */
15-
align-self: self-end; /* unconvertable value */ /* duplicate */
12+
@apply accent-custom-color-gold content-center items-start animate-spin appearance-none aspect-video content-center content-end after:content-['*'] after:select-text after:align-text-top after:origin-top hidden:delay-150 hidden:duration-200 hidden:transition hidden:ease-in;
13+
--some-size: 12px;
14+
--some-color: #333333;
15+
16+
/* custom-color-gold */
17+
align-self: self-end;
18+
19+
/* unconvertable value */
20+
21+
/* duplicate */
1622
}
1723
1824
/* duplicate with another value */
19-
2025
.foo [aria-role='button'] {
2126
@apply uppercase underline-offset-[1rem] touch-pan-left origin-bottom-right transition-none top-3;
27+
2228
/* unconvertable aria selector */
2329
transform: translateX(12px) translateY(0.5em) translateZ(0.5rem)
2430
scaleY(0.725) rotate(124deg);
25-
}
26-
31+
}
2732
.foo[aria-hidden='true'] {
2833
transform: some invalid-transform;
29-
}
30-
34+
}
3135
.foo[aria-hidden='false'] {
3236
@apply collapse whitespace-pre-line w-6/12 will-change-transform break-all z-40 translate-x-3 translate-y-[-0.5em] skew-x-1 skew-y-3 rotate-[-0.25turn] transition-colors duration-200 ease-out -scale-x-75 scale-y-105;
33-
/* unconvertable aria selector */
34-
}
3537
38+
/* unconvertable aria selector */
39+
}
3640
.foo .bar {
3741
@apply translate-x-[10px_0.625rem] skew-x-2 -rotate-45 pl-[12%] pr-[100vw] pt-64 pb-1 px-6 py-8 -scale-75;
3842
transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), color,
3943
background-color, border-color, text-decoration-color, fill,
4044
stroke 200ms cubic-bezier(0.4, 0, 0.2, 1);
41-
}
42-
45+
}
4346
.foo .baz {
44-
45-
@apply place-content-around place-items-center place-self-stretch pointer-events-auto relative resize-x -right-32 motion-safe:custom-screen:supports-flex:order-[-123] motion-safe:custom-screen:supports-flex:tracking-[0.25rem] motion-safe:custom-screen:supports-flex:leading-snug motion-safe:custom-screen:supports-flex:list-inside motion-safe:custom-screen:supports-flex:list-decimal motion-safe:custom-screen:supports-flex:mb-[-0.875rem] motion-safe:custom-screen:supports-flex:max-h-full motion-safe:custom-screen:supports-flex:max-w-screen-2xl motion-safe:custom-screen:supports-flex:min-h-fit motion-safe:custom-screen:supports-flex:min-w-min motion-safe:custom-screen:supports-flex:mix-blend-color-dodge motion-safe:custom-screen:supports-flex:object-fill motion-safe:custom-screen:supports-flex:object-right-top motion-safe:custom-screen:supports-flex:ml-[2em] motion-safe:custom-screen:supports-flex:mr-[1vh] motion-safe:custom-screen:supports-flex:mt-3 motion-safe:custom-screen:supports-flex:mt-[3vw] motion-safe:custom-screen:supports-flex:-mb-2.5 motion-safe:custom-screen:supports-flex:mx-6 motion-safe:custom-screen:supports-flex:left-2 supports-[scroll-snap-align:end]:snap-end supports-[scroll-snap-align:end]:snap-always supports-[scroll-snap-align:end]:line-through supports-[scroll-snap-align:end]:scroll-mt-[12%] supports-[scroll-snap-align:end]:scroll-pl-3.5 supports-[scroll-snap-align:end]:scroll-pr-[10vw] supports-[scroll-snap-align:end]:scroll-pt-[10em] supports-[scroll-snap-align:end]:scroll-pb-5 supports-[scroll-snap-align:end]:scroll-p-[100px];
46-
}
47-
47+
@apply place-content-around place-items-center place-self-stretch pointer-events-auto relative resize-x -right-32 motion-safe:custom-screen:supports-flex:order-[-123] motion-safe:custom-screen:supports-flex:tracking-[0.25rem] motion-safe:custom-screen:supports-flex:leading-snug motion-safe:custom-screen:supports-flex:list-inside motion-safe:custom-screen:supports-flex:list-decimal motion-safe:custom-screen:supports-flex:mb-[-0.875rem] motion-safe:custom-screen:supports-flex:max-h-full motion-safe:custom-screen:supports-flex:max-w-screen-2xl motion-safe:custom-screen:supports-flex:min-h-fit motion-safe:custom-screen:supports-flex:min-w-min motion-safe:custom-screen:supports-flex:mix-blend-color-dodge motion-safe:custom-screen:supports-flex:object-fill motion-safe:custom-screen:supports-flex:object-right-top motion-safe:custom-screen:supports-flex:ml-[2em] motion-safe:custom-screen:supports-flex:mr-[1vh] motion-safe:custom-screen:supports-flex:mt-3 motion-safe:custom-screen:supports-flex:mt-[3vw] motion-safe:custom-screen:supports-flex:-mb-2.5 motion-safe:custom-screen:supports-flex:mx-6 motion-safe:custom-screen:supports-flex:left-2 supports-[scroll-snap-align:end]:snap-end supports-[scroll-snap-align:end]:snap-always supports-[scroll-snap-align:end]:line-through supports-[scroll-snap-align:end]:scroll-mt-[12%] supports-[scroll-snap-align:end]:scroll-pl-3.5 supports-[scroll-snap-align:end]:scroll-pr-[10vw] supports-[scroll-snap-align:end]:scroll-pt-[10em] supports-[scroll-snap-align:end]:scroll-pb-5 supports-[scroll-snap-align:end]:scroll-p-[100px];
48+
}
4849
.foo .baz > .foo-bar {
49-
50-
@apply text-left text-[length:var(--some-size)] text-[color:var(--some-color)] active:focus:break-after-avoid active:focus:break-before-left active:focus:break-inside-auto xl:isolate xl:justify-center xl:active:text-sky-800 xl:active:focus:justify-items-start xl:active:focus:justify-self-end motion-safe:custom-screen:supports-flex:opacity-20 motion-safe:custom-screen:supports-flex:-order-last motion-safe:custom-screen:supports-flex:outline-lime-600 motion-safe:custom-screen:supports-flex:outline-offset-2 motion-safe:custom-screen:supports-flex:outline-dotted motion-safe:custom-screen:supports-flex:outline-2 motion-safe:custom-screen:supports-flex:overflow-hidden motion-safe:custom-screen:supports-flex:break-words motion-safe:custom-screen:supports-flex:overflow-x-scroll motion-safe:custom-screen:supports-flex:overflow-y-visible motion-safe:custom-screen:supports-flex:overscroll-contain motion-safe:custom-screen:supports-flex:overscroll-x-auto motion-safe:custom-screen:supports-flex:overscroll-y-none;
51-
}
52-
50+
@apply text-left text-[length:var(--some-size)] text-[color:var(--some-color)] active:focus:break-after-avoid active:focus:break-before-left active:focus:break-inside-auto xl:isolate xl:justify-center xl:active:text-sky-800 xl:active:focus:justify-items-start xl:active:focus:justify-self-end motion-safe:custom-screen:supports-flex:opacity-20 motion-safe:custom-screen:supports-flex:-order-last motion-safe:custom-screen:supports-flex:outline-lime-600 motion-safe:custom-screen:supports-flex:outline-offset-2 motion-safe:custom-screen:supports-flex:outline-dotted motion-safe:custom-screen:supports-flex:outline-2 motion-safe:custom-screen:supports-flex:overflow-hidden motion-safe:custom-screen:supports-flex:break-words motion-safe:custom-screen:supports-flex:overflow-x-scroll motion-safe:custom-screen:supports-flex:overflow-y-visible motion-safe:custom-screen:supports-flex:overscroll-contain motion-safe:custom-screen:supports-flex:overscroll-x-auto motion-safe:custom-screen:supports-flex:overscroll-y-none;
51+
}
5352
.foo div > [data-zoo] {
53+
@apply border pl-[25%] pr-[1.5em] pt-0 pb-px bottom-full;
54+
}
55+
.bar {
56+
@apply backdrop-brightness-90 backdrop-sepia-[25%] backdrop-blur-none animate-[some-animation_2s_linear_infinite] origin-[12%_25.5%] ease-[cubic-bezier(0.23,0,0.25,1)] lg:backdrop-brightness-75 lg:backdrop-sepia lg:bg-local lg:bg-blend-difference lg:bg-clip-padding lg:bg-[hsl(30,51%,22%)] lg:disabled:bg-gradient-to-tr lg:disabled:bg-origin-padding lg:disabled:bg-left-bottom lg:disabled:bg-no-repeat lg:disabled:bg-contain lg:disabled:border-b-2 after:border-spacing-[5%] after:rounded-full after:border-l-[3px] after:border-l-transparent after:border-l-[1rem] after:border-r-2 after:border-r-[aqua] after:border-r-8 after:border-dashed after:border-t-[some-invalid-value] after:rounded-tl-none after:rounded-tr-[0.25%] after:border-t-[current] after:border-t-[100vh] after:border-dotted after:border-0 after:bottom-[100vw] box-decoration-slice shadow box-border break-after-all break-before-page break-inside-avoid-column caret-[color:var(--cyan)] h-9 xl:clear-both xl:text-lime-200 xl:gap-x-48 xl:columns-3 xl:content-none xl:cursor-pointer xl:hidden xl:fill-sky-800 xl:blur-sm xl:brightness-50 xl:sepia xl:contrast-100 xl:hue-rotate-30 xl:invert-0 xl:opacity-5 xl:saturate-150 xl:flex-auto xl:basis-3 xl:flex-col-reverse xl:grow xl:shrink-0 xl:flex-wrap-reverse xl:float-right xl:text-2xl xl:antialiased xl:italic xl:ordinal xl:font-semibold;
5457
55-
@apply border pl-[25%] pr-[1.5em] pt-0 pb-px bottom-full;
56-
}
58+
/* arbitary value */
59+
animation-delay: 200ms;
5760
58-
.bar { @apply backdrop-brightness-90 backdrop-sepia-[25%] backdrop-blur-none animate-[some-animation_2s_linear_infinite] origin-[12%_25.5%] ease-[cubic-bezier(0.23,0,0.25,1)] lg:backdrop-brightness-75 lg:backdrop-sepia lg:bg-local lg:bg-blend-difference lg:bg-clip-padding lg:bg-[hsl(30,51%,22%)] lg:disabled:bg-gradient-to-tr lg:disabled:bg-origin-padding lg:disabled:bg-left-bottom lg:disabled:bg-no-repeat lg:disabled:bg-contain lg:disabled:border-b-2 after:border-spacing-[5%] after:rounded-full after:border-l-[3px] after:border-l-transparent after:border-l-[1rem] after:border-r-2 after:border-r-[aqua] after:border-r-8 after:border-dashed after:border-t-[some-invalid-value] after:rounded-tl-none after:rounded-tr-[0.25%] after:border-t-[current] after:border-t-[100vh] after:border-dotted after:border-0 after:bottom-[100vw] box-decoration-slice shadow box-border break-after-all break-before-page break-inside-avoid-column caret-[color:var(--cyan)] h-9 xl:clear-both xl:text-lime-200 xl:gap-x-48 xl:columns-3 xl:content-none xl:cursor-pointer xl:hidden xl:fill-sky-800 xl:blur-sm xl:brightness-50 xl:sepia xl:contrast-100 xl:hue-rotate-30 xl:invert-0 xl:opacity-5 xl:saturate-150 xl:flex-auto xl:basis-3 xl:flex-col-reverse xl:grow xl:shrink-0 xl:flex-wrap-reverse xl:float-right xl:text-2xl xl:antialiased xl:italic xl:ordinal xl:font-semibold; /* arbitary value */
59-
animation-delay: 200ms; /* unconvertable value */
61+
/* unconvertable value */
6062
}
61-
6263
@media screen and (min-width: 1024px) {
63-
6464
.bar[aria-disabled='true'] {
65-
background-attachment: initial;
65+
background-attachment: initial;
6666
}
67+
.loving .bar > .testing {
68+
@apply bg-[url('/some-path/to/large\\\\_image.jpg')] border-custom-color-gold border-b-custom-color-200 border-b-[length:var(--some-size)] border-neutral-600 border-t-custom-color-400 rounded-br-sm rounded-bl border-b-[2em] border-b-[#ff0000] border-4 border-solid border-dashed border-separate;
6769
68-
.loving .bar > .testing { @apply bg-[url('/some-path/to/large\\\\_image.jpg')] border-custom-color-gold border-b-custom-color-200 border-b-[length:var(--some-size)] border-neutral-600 border-t-custom-color-400 rounded-br-sm rounded-bl border-b-[2em] border-b-[#ff0000] border-4 border-solid border-dashed border-separate; /* custom-color-gold */ /* custom-color-200 */ /* neutral-600 */
69-
}
70-
}
70+
/* custom-color-gold */
71+
72+
/* custom-color-200 */
7173
74+
/* neutral-600 */
75+
}
76+
}
7277
.bar {
73-
--cyan: #06b6d4;
78+
--cyan: #06b6d4;
7479
}
75-
7680
@media (min-width: 1280px) {
81+
.bar {
7782
78-
.bar { /* sky-800 */
83+
/* sky-800 */
84+
}
7985
}
80-
}
81-
8286
@media screen and (min-width: 1280px) {
83-
.bar {
84-
flex-flow: column;
85-
}
87+
.bar {
88+
flex-flow: column;
89+
}
8690
}
87-
8891
@media screen and (min-width: 1280px) and (max-width: 1440px) {
89-
.foo .baz {
90-
@apply gap-[19px] auto-cols-min grid-flow-row auto-rows-max col-span-3 col-end-4 gap-x-12 col-start-3;
91-
grid: 'a' 200px 'b' max-content;
92-
}
93-
92+
.foo .baz {
93+
@apply gap-[19px] auto-cols-min grid-flow-row auto-rows-max col-span-3 col-end-4 gap-x-12 col-start-3;
94+
grid: 'a' 200px 'b' max-content;
95+
}
9496
.foo .baz > .foo-bar {
95-
96-
@apply gap-8 row-span-full row-end-2 gap-y-6 row-start-auto grid-cols-2 grid-rows-5 h-[$some-invalid] active:text-[red];
97+
@apply gap-8 row-span-full row-end-2 gap-y-6 row-start-auto grid-cols-2 grid-rows-5 h-[$some-invalid] active:text-[red];
9798
}
9899
}
99-
100100
@supports (display: flex) {
101-
@media (min-width: 768px) {
102-
@media (prefers-reduced-motion: no-preference) {
103-
@media (max-width: 1024px) {
104-
105-
.foo .baz > .foo-bar {
106-
outline: 4px dashed rgb(254, 240, 138); /* yellow-200 */ /* lime-600 */
107-
}
108-
}
101+
@media (min-width: 768px) {
102+
@media (prefers-reduced-motion: no-preference) {
103+
@media (max-width: 1024px) {
104+
.foo .baz > .foo-bar {
105+
outline: 4px dashed rgb(254, 240, 138);
106+
107+
/* yellow-200 */
108+
109+
/* lime-600 */
110+
}
111+
}
112+
}
109113
}
110-
}
111114
}
112-
113115
#some-id {
114-
@apply opacity-40 order-last outline-teal-900 outline-offset-2 outline-8 supports-[display:block]:gap-y-80 supports-[display:block]:scroll-smooth supports-[display:block]:scroll-ml-2 supports-[display:block]:scroll-mr-[1.5em] supports-[display:block]:scroll-mb-8 supports-[display:block]:scroll-m-40;
115-
outline: none; /* teal-900 */
116-
outline-style: groove;
117-
}
116+
@apply opacity-40 order-last outline-teal-900 outline-offset-2 outline-8 supports-[display:block]:gap-y-80 supports-[display:block]:scroll-smooth supports-[display:block]:scroll-ml-2 supports-[display:block]:scroll-mr-[1.5em] supports-[display:block]:scroll-mb-8 supports-[display:block]:scroll-m-40;
117+
outline: none;
118118
119+
/* teal-900 */
120+
outline-style: groove;
121+
}
119122
@supports (scroll-snap-align: end) {
120-
.foo .baz {
121-
scroll-snap-type: x mandatory;
122-
}
123+
.foo .baz {
124+
scroll-snap-type: x mandatory;
125+
}
123126
}
124-
125127
div > [data-zoo] {
126-
@apply stroke-[black] stroke-2 table-fixed text-justify decoration-custom-color-gold line-through decoration-dotted decoration-8 indent-[0.125rem] text-ellipsis;
127-
text-decoration: underline #123456 dashed 4px; /* custom-color-100 */ /* custom-color-gold */
128+
@apply stroke-[black] stroke-2 table-fixed text-justify decoration-custom-color-gold line-through decoration-dotted decoration-8 indent-[0.125rem] text-ellipsis;
129+
text-decoration: underline #123456 dashed 4px;
130+
131+
/* custom-color-100 */
132+
133+
/* custom-color-gold */
128134
}
129135
"
130136
`;

0 commit comments

Comments
 (0)