css-to-tailwind icon indicating copy to clipboard operation
css-to-tailwind copied to clipboard

information on unrecognized css rules

Open JLarky opened this issue 3 years ago • 0 comments

I wish there was a way to get information that rule was not converted or wasn't executed precisely. The main idea that if I have CSS and I convert it to a tailwind and convert it back to CSS I will not lose any information :)

Example of losing data for unrecognized options:

.getsIgnored {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

Second example:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Example of loosing data with not precise variants:

.button {
  padding: 1.6rem;
}

@media (min-width: 777px) {
  .button {
    padding: 0.5rem;
  } 
}

@media (min-width: 999px) {
  .button {
    padding: 3rem;
  } 
}

I'm using https://transform.tools/css-to-tailwind to test the package

I propose some kind of raw option that returns raw css in case if it wasn't recognized like

{selector: "@keyframes mymove", missing: {}, tailwind: "", raw: "@keyframes mymove {from {top: 0px;} to {top: 200px;}}"}

JLarky avatar Dec 27 '20 03:12 JLarky