Skip to content

Style your components declaratively with familiar less syntax

License

Notifications You must be signed in to change notification settings

jean343/styless

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status npm semantic-release style: styled-components

💎Styless💎

Styless enables less syntax in your styled-components

Installation

$ yarn add --dev babel-plugin-styless

.babelrc

{
  "plugins": ["babel-plugin-styless"]
}

Note that styless should appear before babel-plugin-styled-components if used.

Key features

  • Simplifies the code

    use @main instead of ${props => props.theme.main}

  • Uses variables directly in your styled components

    @size: if(@small, 4px, 10px);
  • Uses operations directly in your styled components

    use @size * 3 instead of ${props => parseFloat(props.size) * 3 + "px"}

  • Uses functions directly in your styled components.

    color: darken(@highlight, 5%);
There is no need to import `darken`.
  • Supports rgb, hsl and hsv color spaces
    color: hsv(90, 100%, 50%);
  • Migrate less to styled-components seamlessly.

    There is no confusion when transitioning from less to styled-components caused by width: 3px * 2.

  • Supports variable overwritten

    const Button = styled.button`
        @highlight: blue;                           // can be overwritten by theme or props
        background: darken(@highlight, 5%);         // make green darken by 5%
    `;
    <ThemeProvider theme={{highlight: "red"}}>
        <Button highlight="green">click me</Button> // green (set in props) overwrites red (set in theme)
    </ThemeProvider>
  • Supports imports and mixins
    const Button = styled.button`
        @import (reference) "variables";
        .bg-light-blue;
    `;
  • Supports css props
    <button css="color: @color;"/>
    <button css={`color: @color;`}/>
    <button css={css`color: @color;`}/>
  • Still supports the styled-components syntax for more complex jobs!
    `${props => props.main}`

Your first Styless component

const Button = styled.button`
    @main: palevioletred;
    @size: 1em;
    
    font-size: @size;
    margin: @size;
    padding: @size / 4 @size;
    border-radius: @size / 2;
    
    color: @main;
    border: 2px solid @main;
    background-color: white;
`;
<Button>Normal</Button>
<Button main="mediumseagreen">Themed</Button>
<Button main="mediumseagreen" size="1.5em">Themed large</Button>

This is what you'll see in your browser 🎉, play with it on codesandbox

Advanced Styless component example

const Button = styled.button`
    @faded: fade(black, 21%);
    @size: if(@small, 4px, 10px);
    cursor: pointer;
    cursor: if(@disabled, not-allowed);
    color: hsv(0, 0%, 99%);
    padding: @size @size * 3;
    border: 1px solid @faded;
    border-bottom: 4px solid @faded;
    border-radius: ${4}px;
    text-shadow: 0 1px 0 @faded;
    background: linear-gradient(@highlight 0%, darken(@highlight, 5%) 100%);
    &:active {
        background: darken(@highlight, 10%);
    }
`;
// Notice that the @highlight variable is resolved from the theme, and overwritten from a props in the second button.
<ThemeProvider theme={{highlight: "palevioletred"}}>
    <Button>Click me</Button>
    <Button highlight="hsl(153, 100%, 33%)">Or me</Button>
    <Button disabled small>But not me</Button>
</ThemeProvider>

This is what you'll see in your browser 🎉, play with it on codesandbox

Note that with webstorm-styled-components, we get syntax highlighting, color preview and ctrl+click access to variables!

FAQ

  • How to refer to a constants.less file, see the receipe for theme.
  • Cool, how does it work? Head over to the explanations.
  • Why less? The @color systax reduces the confusion from $color when comparing to the SC syntax ${props}. If there is enough demand, a scss plugin could be created.
  • The styled-components mixins such as ${hover}; must be terminated with a semi colon. The following will not work.
const Button = styled.button`
  ${hover}
  color: red;
`;
  • How to import a less files for all components? As SC components are small in nature, it can be convenient to have a common less file be imported in all components. Add the following to your .babelrc to have common.less imported automatically.
[
  "styless",
  {
    "cwd": "babelrc",
    "import": "../less/common.less"
  }
]
[
  "styless",
  {
    "import": "~antd/lib/style/themes/default.less",
    "lessOptions": {
      "javascriptEnabled": true
    }
  }
]