Skip to content

fifthbeat/styled-stencils

Repository files navigation

💅 – Styled Stencils – A library for your web components

A Styled Components like library for StencilJS


Build Status Maintainability npm version

Intro

This project is meant to handle fast production and easy maintenance, this is not an overall solution is a way for us for fasten our work and grant quality during all the development project.

Contributions and feedbacks are welcome.

What it does

Basically it gives you the flexibility of CSS in the power engine of JS. Helps keep clean your code and avoid spaghetti code and css files long like script rolls.

Install

yarn add styled-stencils

or if you have time to spare

npm install styled-stencil

Example

Use your styled components in JSX as you would have done with normal components

import {Component} from '@stencil/core';
import styled from 'styled-stencil';

const Background = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: ${(props) => props.color};
`;

@Component({
  tag: 'my-component'
})
export class MyComponent {
  render() {
    return (
      <Background>
        <Title color="palevioletred">Hello World, this is my first styled component!</Title>
      </Background>
    );
  }
}

And here the result you'll se on page. Same as styled-components 😉

Requirements

  • Node >= 10.1

Author

Acknowledgments

About

A styled-component like library for StencilJS

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy