fifthbeat / styled-stencils Goto Github PK

View Code? Open in Web Editor NEW

7.0 2.0 1.0 338 KB

A styled-component like library for StencilJS

License: GNU General Public License v3.0

JavaScript 100.00%

web-components css styling styling-css-in-js stenciljs styled-components

styled-stencils's Introduction

💅 – Styled Stencils – A library for your web components

A Styled Components like library for StencilJS

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

Nicola Bertelloni – https://github.com/wanbinkimoon

Acknowledgments

Michael Auderer who made a first concept of this
Max Stoiber who had the very first idea of styled components – as long as I know.

styled-stencils's People

Contributors

Stargazers

Watchers

Forkers

mehmetsuci

styled-stencils's Issues

Cannot pass props to styled component

While trying to create a button, I discovered that the following code won't render props to the styled component.

Stripped back code:

const Button = styled.button`
...
`

@Component({
	tag: 'my-button'
})

export class MyButton {
   @Prop() isDisabled?: boolean;
   
   render () {
      return (
         <Button disabled={this.isDisabled}></Button>
      )}
}

<my-button is-disabled></my-button>

When rendering the component, the attribute disabled isn't rendered on the element. On the host the is-disabled prop is visible.

Information: apply display flex

I'm using display: flex and appear not apply on elements.

Code example

const StyledIcon = styled.span`
  display: flex;
`;

Using div or span whethever, the result is the same.

My component

    return (
      <Host>
        <StyledIcon>
          <div>Column 1</div>
          <div>Column 2</div>
        </StyledIcon>
      </Host>
    );

Preview

For tests, adding display: flex; on dynamic created element

`as` Prop doesn't work

Hi! I'm trying to use as Prop -> documentation here <- but it doesn't work.

I have this StyledComponent:

export const Text = styled.div`
    color: #333333;
    font-size: 1.5rem;
`;

export class TheText {
	@Prop() text: string;
	@Prop() taghtml: string;

	render() {
		return (
			<Host>
				<Text as={this.taghtml}>{this.text}</Text>
			</Host>
		);
	}
}

I use TheText component:

<the-text text="Hi! I'm a text" taghtml="p"/>

And the DOM always show the tag: div

<the-text text="Hi! I'm a text" taghtml="p">
	<div>Hi! I'm a text</div>
</the-text>