awssat / tailwind-shift Goto Github PK

Conditional classes seem to be ignored if they're multi-line. When they're on a single line they appear to be replaced.

<template>
    <component
        class="group cursor-pointer bg-grey-500"
        :class="{
                'border-l border-grey-light': !isResponse,
                'ml-8 md:ml-16 border-l border-teal': isResponse
                }"
    >

I had the following in a blade view:

Session::get('variable')

it was modified and left

:get('variable')

The variants config object is reconstructed, but the keys still use the old name, e.g.

    variants: {
        textStyle: ['responsive', 'hover', 'focus', 'group-hover'],
    }

Expected:

    variants: {
        fontStyle: ['responsive', 'hover', 'focus', 'group-hover'],
    }

Hi there,

I noticed while running v1.0.3 that things were being changed that had nothing to do with Tailwind. Some of these files had previously been run through a shift but some had not, so I don't think that is a factor.

Here are some examples:

SVG's xmlns (or any URL that has a colon):

Laravel facade:

Vue component keys (name, props, components, filters, etc.):

Random words with a colon right after:

If there was a space after the colon it was leaving the space, which I found odd. It should probably take out the space as well.

I'm also seeing some of my custom components being changed if I used a color in their name. For example, button-orange would be changed to button-orange-500.

Tried this on a mac and it says it needs php 7, and I have 8 - can't downgrade it either :(

From the upgrade docs:
"For greys (note that grey has changed to gray 🇺🇸):"

The config file updates to gray but the string replacer replaces text-grey with text-grey-500.

Haven't tried to run my converted html yet, so maybe I'm just missing something?

Uses of color in border, text and bg are being replaced by the type, removing the color.

tailwind-shift '<div class="border-green-darker">'
Converted Code: <div class="border-border-800">

expected:
<div class="border-green-800">

same is true for bg-, text-

You get an orphaned hover: if you had hover:no-underline

Possibly also won't work for LESS or other pre-compiled stylesheets.

The command I ran was: tailwind-shift resources/ --recursive=true --replace=true --extensions="vue,php,scss"

An example snippet of code in my _common.scss file (I have several SASS files for different parts of the app, but _common.scss shares common styles and components that are then @imported into the other SASS files):

@responsive {
    .button-blue {
        @apply .bg-blue .text-white;
        &:hover {
            @apply .bg-blue-dark .text-white;
        }

        &.disabled,
        &:disabled,
        &[disabled] {
            @apply .bg-blue-lightest .text-blue-dark;
        }
    }
}