Jackardios / css-to-tailwindcss

Convert CSS to TailwindCSS 3.x
MIT License
114 stars 14 forks source link

Custom screen with "raw" not working correctly #8

Closed guivr closed 1 year ago

guivr commented 1 year ago

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];
}

?

guivr commented 1 year ago

I found out that it can't have screen, and and in the beginning of the raw string value. Fixed it here.