masquerades 🎭
A library for styled web components.
This library is a work in progress, feel free to participate to the project.
Why
Styled components are easy to write and manage. They focus only on style and anything else.
Usage
Install via npm or yarn.
npm i masquerades@nextyarn add masquerades@next
import using es modules.
; // define styled componentsconst StyledDiv = styleddiv` /*some css...*/`customElements;
Examples
Style Custom Elements
Style a custom component using styled(CustomComponent)
.
; const StyledCustomComponent = ` background: ; color: #fff; border: 3px solid #fff; border-radius: 5px; padding: 0.8rem 2rem; font: 24px "Margarine", sans-serif; outline: none; display: block; letter-spacing: 2px; ` // Define the styled button as extension of the native buttoncustomElements;
Style Native Elements
Shortcut for style native components are available,
for example to style a button use styled.button
.
; // Create the buttonconst StyledButton = styledbutton` background: ; color: #fff; border: 3px solid #fff; border-radius: 50px; padding: 0.8rem 2rem; font: 24px "Margarine", sans-serif; outline: none; cursor: pointer; position: relative; transition: 0.2s ease-in-out; letter-spacing: 2px; `// set up observedAttributes ; // Define the styled button as extension of the native buttoncustomElements;
Use the styled button
Styled ButtonStyled Button
Style Shadow DOM
The css is injected in a stylesheet adopted by the root of the element and inside the shadow root, so it's possible to style both the light and shadow dom.
; const StyledCustomComponent = ` /* some Light DOM style ... */ :global(:host(&)) { /* Shadow DOM style */ selector { /*...*/ } } /* or use the styled.shadow shortcut */ ` // Define the styled button as extension of the native buttoncustomElements;
Using Theme
Use theme configure global value for styled components.
Create a Theme.
; const ThemeProvider = ;customElements;
Use a Theme
The value of the nearest theme can be used as attribute (and props) in the styled element.
; const StyledButton = styledbutton` /* the props theme is the value of the nearest theme provider */ background: ; color: #fff; border: 3px solid #fff; border-radius: 50px; padding: 0.8rem 2rem; font: 24px "Margarine", sans-serif; outline: none; cursor: pointer; position: relative; transition: 0.2s ease-in-out; letter-spacing: 2px;`; // Define the styled button as extension of the native buttoncustomElements;
Or using the static method valueOf
of the theme provider class.
{ super; thisonThemeValueChange = thisonThemeValueChange; } { const themeProvider = ThemeProvider; if themeProvider themeProvider; } { const value = ThemeProvider; // do something with the theme value } { const themeProvider = ThemeProvider; if themeProvider themeProvider; }
Add the theme in the element three.
Styled Button With Theme1 Styled Button With Theme2
Pros
- works in both Light and Shadow DOM
- works with native web component (HTMLButtonElement, HTMLDivElement, ...)
- works with custom web component
- write css in js
- no need to manage class names
- support stylis css
Hints
Webstorm support
For add support for stylus in styled tagged template, in settings > language injections > + > new generic js add:
-
Name: Styled Web Components
-
Id: Stylus
-
Prefix:
.some-class {
-
Suffix:
}
-
Places Patterns:
+ jsLiteralExpression().and(jsArgument("styled\\.", 0)) + jsLiteralExpression().withParent(psiElement().withText(string().contains(".extend"))) + jsLiteralExpression().withParent(psiElement().withText(string().startsWith("injectGlobal"))) + jsLiteralExpression().withParent(psiElement().withText(string().startsWith("styled"))) + taggedString("css")
Inspired by styled-components