product-ride / styled-wind Goto Github PK

Right now we are not supporting animation classes from tailwind, if we can get this through we would be a step more closer for react native support.

Describe the bug
class .border element style gives .borderpadding-left: 1rem instead of border-width: 1px

Expected behavior
class .border element style should give border-width: 1px

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser: chrome
• Version: 87.0.4280.67

Describe the bug
Height dynamic property class is using width's values.
For example: .h-screen is parsed as height: 100vw.

Expected behavior
.h-screen is parsed as height: 100vh

Screenshots

Solution
It should be this.config.theme.height instead of this.config.theme.width .

Desktop (please complete the following information):

• OS: Manjaro
• Browser: Brave
• Version: v0.0.0-beta.10

Describe the bug
Spotted two mistakes in implementation of getBorderRadiusForDirection function in css-gen.ts file.

1. There is a switch case missing for 'bl' i.e. border-bottom-left-radius CSS property.
2. For switch case 'r', radius value should be taken from radiusValue variable.

Screenshots

Desktop (please complete the following information):

• OS: Manjaro
• Browser: Brave
• Version: v0.0.0-beta.10

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Missing classes:

.z-50
.min-h-4
.cursor-pointer - issue, works only when added last

Describe the bug
A sample Styled-wind component in styled wind docs have an incorrect style reference for hover selector. .hover:bg-yellow; or swind-hover: bg-yellow;

Based on the source code the default theme config for colors has an object (except white and black). While parsing this style .hover:bg-yellow; it will return the whole object of yellow color. So after parsing it looks like background: [object Object];

Expected behavior
The style wind docs for hover selector should be modified to .hover: bg-yellow-600; and swind-hover: bg-yellow-600; (by adding a contrast)

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser chrome
• Version 87

Describe the bug
When using a class such as bg-white, the resulting css is background: #FFFFFF. This has the result of overriding all other background rules:

  background-position-x
  background-position-y
  background-repeat
  background-attachment
  background-image
  background-size
  background-origin
  background-clip

Expected behavior
Resulting rules should be as specific as the classes used to generate them. If I use bg-white, I expect the resulting rule to be background-color: #FFFFFF

Thank you

Describe the bug
text-xl class doesn't seem to have any effect on the font-size of the elements

To Reproduce

1. Use text-xl class on any element
2. Inspect element to check the styles generated

Expected behavior
The text-xl class needs to have font-size: 1.25rem (default config) or as stated in the custom config.

Screenshots

Desktop:

• OS: macOS BigSur
• Browser: Firefox 83.0
• Version : 0.0.0-beta.13

Additional context
Other xl based classes like max-width, box-shadow seem to work fine.

Describe the bug
Missing classes for background color

Expected behavior
While Applying the background class to any component, it should change the background color of that element

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Firefox Developer Edition
• Version: 84.0b3

The below is the component I was trying to define

const StyledContainer = styled.div`
.max-w-lg;
.text-white;
.bg-green-300;
.bg-opacity-25;
.p-10; 
.rounded; 
.overflow-hidden; 
.shadow-lg;
`;

This is the error I am getting

Operating System: Linux Ubuntu
Browser: Mozilla Firefox

Describe the bug
Normal CSS styles are not parsed properly.

Screenshots:

Code:

Output:
The above CSS is parsed as background: redcolor:yellow;.

On reversing the above order, it's parsed as color: yellowbackground:red;

Expected behavior
It should be parsed as background: red; color: yellow;

Desktop (please complete the following information):

• OS: Manjaro
• Browser: Brave

Describe the bug
When more that one style is applied based upon data from props, only the first one is parsed and the rest are ignored.

Screenshots

Code:

Output:
When props.primary is true, only the first style is applied i.e. background-color: blue; but the second one is ignored.

Expected behavior
For the above example, background-color: blue; color: white; is the final style that's expected.

Desktop (please complete the following information):

• OS: Manjaro
• Browser: Brave

Describe the bug
Following the steps in documentation to add styled-wind installs older version(0.0.0-beta.7) of the package. This version has some bugs, thus the examples given in the docs don't work as expected.

To Reproduce
Steps to reproduce the behavior:

1. Create a fresh create-react-app project : npx create-react-app styled-wind-sandbox
2. Move into the project directory and yarn add styled-wind@beta styled-components
3. Change contents of src/App.js to following

import styled from "styled-wind";

function App() {
  return <StyledContainer>Styled-wind</StyledContainer>;
}

const StyledContainer = styled.div`
     background: red;
    margin-top: 10px;
    .text-blue-600; 
    .lg:text-green-600; 
    .hover:bg-yellow; 
    .pt-10; 
`;

export default App;

4. Some of the styling doesn't appear

Expected behavior
I have checked with the latest version (13), in codesandbox all of them seem to work. We expect yarn add should install latest working version available. It will be easier for people to just start to play with the project.

Desktop:

• OS: macOS Big Sur version 11.0.1
• Browser: Firefox 83.0
• Version : 0.0.0-beta.7

Additional context
Tis' my First Issue here. So suggestions are welcome!! Like if it is valid, etc.

Describe the bug
Class .hidden gives display:hidden instead of display:none. Same with visibility.

Need to run a check on classnames and the corresponding values. Also there is a type 'disply' instead of 'display' in display: block.

Describe the bug
When trying to apply the placeholder class property and applying color attribute to the input field , it is not yielding the expected output.

Expected behavior
Applying any of the placeholder class attributes like placeholder-pink-400or for any color for that matter should change the color of the placeholder of the input field.

Screenshots

**Desktop **

• OS: MacOS
• Browser: Firefox Developer Edition
• Version: 84.0b3

Describe the bug
.px-{n}, .py-{n}, .mx-{n}, .my-{n} classes are not working as expected. Although .p-{n} .m-{n} classes work perfectly fine.

To Reproduce
Code SandBox Link

Actual

Expected :

• Version 0.0.0-beta.13

Describe the bug
While using border-color classes like border-green-400, border-red-500 etc, the colors are being applied onto color property for that element.

import React from "react";
import styled from "styled-wind";

const AppWrapper = styled.div`
  .text-center;
  .font-sans;
`;


const Button = styled.button`
  .bg-red-800;
  .hover:bg-red-400;
  .font-bold;
  .text-lg;
  .text-white;
  .rounded-lg;
  .border-green-400;
  .w-32;
  .p-2;
  .cursor-pointer;
`;

export default function App() {
  return (
    <AppWrapper>
      <h1>Buttons</h1>
      <Button>
        Button with White Text
      </Button>
    </AppWrapper>
  );
}

Expected behavior
Border color should be applied to border-color property of the element.
Text color should remain unaffected (i.e inherited or as set explicitly)

Desktop:

• OS: macOS BigSur
• Browser: Firefox 83.0
• Version : 0.0.0-beta.13

Additional context
Should be an easy fix. I will try to take this up too. Listing the issue for reference.