psoaresbj / styled-gen

Set of tools for styled-components

styled-gen

Set of tools for styled-components

If you're migrating from v1 to v2, follow the migration guide.

What is styled-gen?

styled-gen is a collection of helper functions that simplify the integration of multiple styles as React props within your styled components. It provides shorthand properties for managing layout components without the need to style them separately.

generateProps usage example:

import { generateProps } from 'styled-gen';
import styled from 'styled-components';

cons MyStyledComp = styled.div`
  // your css...

  ${generateProps};
`;

export const MyComponent = () => (
  <div>
    <MyStyledComp $tAlign={{ md: 'center', xs: 'left' }}>
      Vestibulum auctor dapibus neque.
    </MyStyledComp>
  </div>
)

Documentation

Visit https://docs.page/psoaresbj/styled-gen to view full documentation.

License

MIT © psoaresbj

styled-gen's Issues

Ease `inSine` have error syntax

There's a syntax error with inSine string in Ease object:
inSine: 'cubic-bezier(0.47, 0, 0.745, 0.715'
(missing parenthesis)
should be inSine: 'cubic-bezier(0.47, 0, 0.745, 0.715')

Variable responsive prop `0` is not working correctly

When using 0 as value for a variable prop, the logic is assuming false.
ex:

Col xs={12} mt={{xs: 2, sm: 0}}>
    {content}
</Col>

For now, just use a string to make it work:

Col xs={12} mt={{xs: 2, sm: '0'}}>
    {content}
</Col>

Generator VariableProps are not getting the values from deep variables