Skip to content

Commit

Permalink
fix: output css formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jackardios
Jackardios committed Jan 27, 2023
1 parent f2902e7 commit 38c14d4
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 72 deletions.
6 changes: 5 additions & 1 deletion src/TailwindConverter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,15 +94,19 @@ export class TailwindConverter {
);
});

// clean empty rules and at-rules
// cleanup
parsed.root.walkRules(node => {
if (node.nodes?.length === 0) {
node.remove();
} else {
node.cleanRaws();
}
});
parsed.root.walkAtRules(node => {
if (node.nodes?.length === 0) {
node.remove();
} else {
node.cleanRaws();
}
});

Expand Down
148 changes: 77 additions & 71 deletions test/__snapshots__/TailwindConverter.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,136 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TailwindConverter converting css part string 1`] = `
"{
@apply text-center text-xs hover:text-base md:font-semibold; }"
" {
@apply text-center text-xs hover:text-base md:font-semibold;
}"
`;

exports[`TailwindConverter converting css string returns tailwind nodes 1`] = `
"@charset \\"UTF-8\\";
.foo {
@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;
--some-size: 12px;
--some-color: #333333; /* custom-color-gold */
align-self: self-end; /* unconvertable value */ /* duplicate */
@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;
--some-size: 12px;
--some-color: #333333;
/* custom-color-gold */
align-self: self-end;
/* unconvertable value */
/* duplicate */
}
/* duplicate with another value */
.foo [aria-role='button'] {
@apply uppercase underline-offset-[1rem] touch-pan-left origin-bottom-right transition-none top-3;
/* unconvertable aria selector */
transform: translateX(12px) translateY(0.5em) translateZ(0.5rem)
scaleY(0.725) rotate(124deg);
}
}
.foo[aria-hidden='true'] {
transform: some invalid-transform;
}
}
.foo[aria-hidden='false'] {
@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;
/* unconvertable aria selector */
}
/* unconvertable aria selector */
}
.foo .bar {
@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;
transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), color,
background-color, border-color, text-decoration-color, fill,
stroke 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
.foo .baz {
@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];
}
@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];
}
.foo .baz > .foo-bar {
@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;
}
@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;
}
.foo div > [data-zoo] {
@apply border pl-[25%] pr-[1.5em] pt-0 pb-px bottom-full;
}
.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;
@apply border pl-[25%] pr-[1.5em] pt-0 pb-px bottom-full;
}
/* arbitary value */
animation-delay: 200ms;
.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 */
animation-delay: 200ms; /* unconvertable value */
/* unconvertable value */
}
@media screen and (min-width: 1024px) {
.bar[aria-disabled='true'] {
background-attachment: initial;
background-attachment: initial;
}
.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;
.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 */
}
}
/* custom-color-gold */
/* custom-color-200 */
/* neutral-600 */
}
}
.bar {
--cyan: #06b6d4;
--cyan: #06b6d4;
}
@media (min-width: 1280px) {
.bar {
.bar { /* sky-800 */
/* sky-800 */
}
}
}
@media screen and (min-width: 1280px) {
.bar {
flex-flow: column;
}
.bar {
flex-flow: column;
}
}
@media screen and (min-width: 1280px) and (max-width: 1440px) {
.foo .baz {
@apply gap-[19px] auto-cols-min grid-flow-row auto-rows-max col-span-3 col-end-4 gap-x-12 col-start-3;
grid: 'a' 200px 'b' max-content;
}
.foo .baz {
@apply gap-[19px] auto-cols-min grid-flow-row auto-rows-max col-span-3 col-end-4 gap-x-12 col-start-3;
grid: 'a' 200px 'b' max-content;
}
.foo .baz > .foo-bar {
@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];
@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];
}
}
@supports (display: flex) {
@media (min-width: 768px) {
@media (prefers-reduced-motion: no-preference) {
@media (max-width: 1024px) {
.foo .baz > .foo-bar {
outline: 4px dashed rgb(254, 240, 138); /* yellow-200 */ /* lime-600 */
}
}
@media (min-width: 768px) {
@media (prefers-reduced-motion: no-preference) {
@media (max-width: 1024px) {
.foo .baz > .foo-bar {
outline: 4px dashed rgb(254, 240, 138);
/* yellow-200 */
/* lime-600 */
}
}
}
}
}
}
#some-id {
@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;
outline: none; /* teal-900 */
outline-style: groove;
}
@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;
outline: none;
/* teal-900 */
outline-style: groove;
}
@supports (scroll-snap-align: end) {
.foo .baz {
scroll-snap-type: x mandatory;
}
.foo .baz {
scroll-snap-type: x mandatory;
}
}
div > [data-zoo] {
@apply stroke-[black] stroke-2 table-fixed text-justify decoration-custom-color-gold line-through decoration-dotted decoration-8 indent-[0.125rem] text-ellipsis;
text-decoration: underline #123456 dashed 4px; /* custom-color-100 */ /* custom-color-gold */
@apply stroke-[black] stroke-2 table-fixed text-justify decoration-custom-color-gold line-through decoration-dotted decoration-8 indent-[0.125rem] text-ellipsis;
text-decoration: underline #123456 dashed 4px;
/* custom-color-100 */
/* custom-color-gold */
}
"
`;

0 comments on commit 38c14d4

Please sign in to comment.