stencil-styled-components icon indicating copy to clipboard operation
stencil-styled-components copied to clipboard

Export 'css' from the package

Open Jordancmrtn opened this issue 3 years ago • 0 comments

Hello,

You don't have the "css" import to make complex CSS conditions and it can't use the shadow dom 😨

Can we have 'css' exported like in Styled.

import styled, { css } from 'styled-components';

It can be really usefull for exemple to be based on a "theme" props for a button :

const Styled = {
    Button: styled.button<Pick<IButton, 'variant' | 'loading' | 'squared' | 'disabled'>>`
        font-family: ${({ theme }) => theme.font};
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid 2px ${({ theme }) => theme.colors.primary};
        border-radius: ${({ theme }) => theme.borderRadius.button};
        cursor: pointer;
        font-size: 1.05rem;
        min-width: 10rem;
        height: ${({ theme }) => theme.size.inputAndButtonHeight};
        font-weight: 600;
        overflow: hidden;
        padding: 0.4rem 2.6rem;
        box-sizing: border-box;
        text-align: center;
        user-select: none;
        outline: none;
        transition: all 0.3s ease-in-out;
    
        &:hover {
            box-shadow: ${({ theme }) => theme.boxShadow.button};
        }
    
        ${({ variant }) => variant === 'primary' && css`
            background-color: ${({ theme }) => theme.colors.primary};
            color: white;
    
            &:disabled {
                border-color: ${({ theme }) => theme.colors.disabled};
                background-color: ${({ theme }) => theme.colors.disabled};
                color: white;
                cursor: not-allowed;
                box-shadow: none;
            }

            svg {
                color: white;
            }

            /** To reverse the colour of the spinners */
            div div {
                background-color: white;
            }
        `}

Do you think it's possible to support it in this library ?

Jordancmrtn avatar Dec 07 '21 09:12 Jordancmrtn