stencil-styled-components
stencil-styled-components copied to clipboard
Export 'css' from the package
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 ?