jackardios / css-to-tailwindcss Goto Github PK

Current Behavior

The converter is currently breaking when trying to convert any CSS code that contains @Keyframes:

@keyframes test {
  50% {
    opacity: 1;
  }
}

... normal CSS here

It tries to convert 50% thinking it's a selector, then it breaks with Unmatched selector: %

Expected Behavior

For now, it could ignore and don't convert @keyframes (because it's currently breaking the whole CSS conversion instead)

I’ll elaborate a bit more on the issue soon. Just want to get an issue id first to mention it in the codebase

Current Behavior

If Tailwind config contains custom spacing with dashes, classes like marging, padding. etc. don’t fold. Example:

 "spacing": {
   "spacinga": "var(--spacing-a)",
   "spacing-b": "var(--spacing-b)",
 }

Input:

margin: var(--spacing-a);
padding: var(--spacing-b);

Ouput:

m-spacinga pt-spacing-b pr-spacing-b pb-spacing-b pl-spacing-b

Expected Behavior

m-spacinga p-spacing-b

Steps to Reproduce the Problem

Environment

• Version:
• Platform:
• Node.js Version:

Current Behavior

So if we have a width that isnt supported by the config it generates a one off class like tw-w-[250px]

Expected Behavior

How ever it should be genearating classes of the format tw-w-[250].

Steps to Reproduce the Problem

• I ran the script with my custom config on a CSS file and it didnt generate the required format of class. I am manually correcting as of now but it would be nice if this was fixed.

Environment

• Version: 1.0.4
• Platform: Mac
• Node.js Version: v12.14.0

Current Behavior

When applying the provided CSS styles to the converter:

color: #666;
& > td {
  text-align: left;
  padding: 20px;
  vertical-align: top;
  border-top: 0;
}

The CSS to Tailwind CSS converter only outputs text-[#666] for the color property, but doesn't generate classes for child <td> like text-align, padding, vertical-align, and border-top. Additionally, it does not generate a class for the td selector with the arbitrary variant.

https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

https://stackoverflow.com/a/72683383

I know that this is not the recommended way of doing things in Tailwind, but I am trying to create a converter from styled-components to Tailwind and I need this feature to ensure I can migrate many features in the codebase safely. For example:

// A table body with child td selector
export const Tbody = styled.tbody`
  color: #666;
  & > td {
    text-align: left;
    padding: 20px;
    vertical-align: top;
    border-top: 0;
  }
`;

Gets converted into:

// A table body with child td selector
export const Tbody = React.forwardRef((props: React.ComponentPropsWithoutRef<"tbody">, ref: React.ComponentProps<"tbody">["ref"]) => {
  return(
     <tbody className="text-[#666]" ref={ref} {...props}>
      {props.children}
    </tbody>
  );
});

Expected Behavior

I expect the CSS to Tailwind CSS converter to generate appropriate classes for all the CSS properties provided, not just for the color property. For example, it should generate classes like [&>td]:text-left for the child td component:

Steps to Reproduce the Problem

1. Input the above CSS to Tailwind CSS Converter
2. Observe the output to be only text-[#666] and does not contain classes for arbitary variants like [&>td]:text-left

Environment

• Version: "css-to-tailwindcss": "1.0.5"
• Platform: Windows, Mac
• Node.js Version: v20.11.1

Current Behavior

If a selector is only declared inside a media query, even if the media query is a valid Tailwind screen, such as lg, it will keep the media query as unconverted.

Example code:

h3.jsx-2946570823 {
  font-size: 1em;
}

@media (min-width: 1024px) {
  h3.jsx-2946570823 {
    font-size: 1.5em;
  }
}

returns correctly:

h3.jsx-2946570823 {
  @apply text-[1em] lg:text-[1.5em];
}

but

@media (min-width: 1024px) {
  h3.jsx-2946570823 {
    font-size: 1.5em;
  }
}

returns

@media (min-width: 1024px) {
  h3.jsx-2946570823 {
    @apply text-[1.5em];
  }
}

Expected Behavior

If the screen exists, it should wrap everything outside @media queries, like a normal selector:

h3.jsx-2946570823 {
  @apply lg:text-[1.5em];
}

Current Behavior

So when i put in a string of css where we have a rule set: with a media block, selector and some styles, the outputted tailwind doesn't include the media block. However when i include the same css, but additionally the same selector outside the media block, the outputted tailwind will include the media block.

E.G

const input = `
.selector {
 display: block;
}
@media (min-width: 768px) {
.selector {
 display: flex;
}
}

// Output
[
'block',
'md: flex'
]

const input2 = `
@media (min-width: 768px) {
.selector {
 display: flex;
}
}

// Output 2
[
'flex'
]

As you can see, when i don't include that initial declaration block outside the media block, the media screen size gets ignored and the output is wrong.

You can also refer to another example in the screenshot i took:

Expected Behavior

What should happen is that the input shouldn't need that initial declaration block. I feel like if we don't have that initial block outdside the media, the block inside the media query should still take the screen width into account.

E.G
const input = `
@media (min-width: 768px) {
.selector {
 display: flex;
}
}

// Output
[
'md: flex'
]

Steps to Reproduce the Problem

1. Input the input2 from the example.
2. See the output in the "tailwindClasses" property
3. See that no screen width is included in the output

Environment

• Version: 1.0.4
• Platform:
• Node.js Version: v14.21.2

eg.

const style = {
  width: '100px',
  height: '30px',
  backgroundColor: '#009eeb'
}

// to tailwindcss ^3.0

> w-[100px] h-[30px] bg-[#009eeb]

Current Behavior

In [email protected], background: red converts to "", while background-color: red converts to "bg-[red]".

Expected Behavior

It’d be great if CSS like background: red could be mapped to a tailwind class too. I understand that the value of background shorthand can also contain image URL and its placement. It ca be hard to parse, but even supporting simple cases would be great. In practice, a lot of CSS I have seen is using background: color shorthand.

Environment

• Version: [email protected]
• Platform: macOS
• Node.js Version: 18.16

PS: Great lib @Jackardios! Thanks for working on it 🙌

Setting multiple selectors in the same CSS rule returns an unexpected result: For example:

import { TailwindConverter } from 'css-to-tailwindcss';
import postcssNested from "postcss-nested";

const converter = new TailwindConverter({
  remInPx: 16, // set null if you don't want to convert rem to pixels
  postCSSPlugins: [postcssNested], // add any postcss plugins to this array
  tailwindConfig: {
    // your tailwind config here
    content: [],
    theme: {
      extend: {
        colors: {},
      },
    },
  },
});

const inputCSS = `
.test{
  color:red;

  &:hover, &:focus{
    color: blue;
  }
}`;

converter.convertCSS(inputCSS).then(({ convertedRoot, nodes }) => {
  console.log(convertedRoot.toString());
});

Obtained result:

.test {
  @apply text-[red];
}
.test:hover,
.test:focus {
  @apply text-[blue];
}

Expected result:

.test {
  @apply text-[red] focus:text-[blue] hover:text-[blue];
}

Current Behavior

Given config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {
      screens: {
        'custom-screen-1': {
          raw: 'screen and (min-width: 0px)',
        },
      }
    },
  },
  plugins: [],
}

And CSS:

h2 {
  font-size: 45px;
}

@media screen and (min-width: 0px) {
  h2 {
    font-size: 32px;
  }
}

The output is:

(...)

h2 {
  @apply text-[45px];
}
@media screen and (min-width: 0px) {
  h2 {
    @apply text-[32px];
  }
}

Expected Behavior

Shouldn't it be:

h2 {
  @apply text-[45px] custom-screen-1:text-[32px];
}

?

Current Behavior

border-radius: 4px; --> rounded

Expected Behavior

border-radius: 4px !important; --> !rounded

Steps to Reproduce the Problem

Environment

• Version:
• Platform:
• Node.js Version:

Did you make it by hand?

Feature Request

It'd be nice to have a setting to keep the custom styles (unconverted) as regular CSS instead of using @apply.