[BUG] Null CSS Properties Copied When Generating Code Without Changes

[Bismay5467]

Description

Some CSS properties are copied with null values when using the "get CSS code" option under the "copy code" dropdown menu, even if no changes were made to the UI. This can clutter the user's main CSS file and cause confusion. I would suggest checking for null conditions, similar to what's done in convertInputRangeStylesToTailwind before including these properties.

For example :

      input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background-color: ;
        height: ;
        width: ;
        margin-top: -3.2px;
        border-radius: ;
      }

      input[type='range']::-moz-range-thumb {
        border: none;
        background-color: ;
        height: ;
        width: ;
        border-radius: ;
      }

This is a portion of the css code generated for input range. When the background color, height, or width of the thumb remains unchanged, these properties are included in the generated code with a null value.

Additional information

To fix this Issue, don't allow the user to copy anything until the the essential fields are filled, the fields that needs a check aren't essential

🥦 Browser

Google Chrome

👀 Have you checked if this issue has been raised before?

• [X] I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• [X] I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

[github-actions[bot]]

It's great having you contribute to this project by creating an issue

Make sure you are assigned to this before you work on it and you read the Contributing.md file, Thank you! Welcome to the community :nerd_face:

[Dun-sin]

a better solution is to not let the users copy a code if the necessary fields aren't filled

[Bismay5467]

We might consider making certain fields optional to provide users with greater flexibility when designing a custom UI. We could then perform null checks exclusively for these optional fields to determine whether they should be included when generating the CSS code.

For instance, in the input range generator, we could designate the background color fields for the thumb and track as optional, allowing users more control over their designs.

Does this make sense?

[Dun-sin]

We might consider making certain fields optional to provide users with greater flexibility when designing a custom UI. We could then perform null checks exclusively for these optional fields to determine whether they should be included when generating the CSS code.

For instance, in the input range generator, we could designate the background color fields for the thumb and track as optional, allowing users more control over their designs.

Does this make sense?

No, no it doesn't😆 anyway I won't be assigning you this. You already got one

[Bismay5467]

@Dun-sin I have submitted a PR for the other issue that was assigned to me. If no more changes is required in that PR, you may assign this issue to this. I would be glad to submit a PR.

[Dun-sin]

@Dun-sin I have submitted a PR for the other issue that was assigned to me. If no more changes is required in that PR, you may assign this issue to this. I would be glad to submit a PR.

I don't want to you to work in this, will let someone else have it👌🏽

[Vaibhav91one]

I would like to work on this issue. @Dun-sin

[Dun-sin]

I would like to work on this issue. @Dun-sin

Sure, thanks for wanting to contribute, make sure you follow the rules 👉🏽here👈🏽, else your PR will not be accepted and will be closed. Good Luck.

[Vaibhav91one]

@Dun-sin As we discussed on discord. I have solved the issue by using default values. These default values are from the style.css file only. here is the code. Should I make a PR now?

[Dun-sin]

@Dun-sin As we discussed on discord. I have solved the issue by using default values. These default values are from the style.css file only. here is the code. Should I make a PR now?

i don't remember this conversation on discord, can you tag me where we talked about this?

[Vaibhav91one]

@Dun-sin As we discussed on discord. I have solved the issue by using default values. These default values are from the style.css file only. here is the code. Should I make a PR now?

i don't remember this conversation on discord, can you tag me where we talked about this?

Tagged.

[Vaibhav91one]

Sorry, but I won't be able to work on this issue. Working on other issues. @Dun-sin

[Bismay5467]

@Dun-sin If you'd like I wanna give it a shot!

[Dun-sin]

@Dun-sin If you'd like I wanna give it a shot!

OK, you already know the guidelines of the project, make sure to follow them

[Bismay5467]

@Dun-sin I need a clarification before I can start working on this issue. If there is no value aviable for a particular field will I provide a default value as mentioned by @Vaibhav91one in one of his previous comment or will I simply not include the field if its value is null?

[Dun-sin]

@Dun-sin I need a clarification before I can start working on this issue. If there is no value aviable for a particular field will I provide a default value as mentioned by @Vaibhav91one in one of his previous comment or will I simply not include the field if its value is null?

don't copy anything, simply do a return and inform the user that it won't be copied like when there's no data and user is trying to open the results page (this applies to all generators that have the input and getting results in the same place except radius)

[Dun-sin]

:tada: This issue has been resolved in version 2.70.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: