@atomify/css v1.2.5
@atomify/css
Installation
npm i @atomify/css
useStyles
The useStyles
hook appends the styles in three different ways:
1. It appends the styles to the adoptedStyleSheets
if available and supported by your browser Constructable Stylesheets.
2. It appends it to the shadowRoot
when adoptedStyleSheets
and the useShadowDom:true
is set.
3. It will append the styles to the document.head when useShadowDom:false
, and it will automatically scopes the styles.
Add styles to your component
Define styles in a tagged template literal, using the css
tag function.
....
import { css, useStyles } from '@atomify/css';
const CustomElement = ({ element, update }) => {
// Single tagged template literal
useStyles(() =>
css`
:host {
display: block;
background-color: tomato;
}
`
);
// An array of tagged template literals
useStyles(() => [
css`...`,
css`...`,
]);
return (
<div>Hello World!</div>
);
};
Sharing styles
You can share styles between components by creating a const
is exporting a tagged style:
....
const generalButtonStyling = css`
button {
color: white;
background-color: black;
font-size: 1.6rem;
}
`;
const CustomElement = ({ element, update }) => {
// An array of tagged template literals
useStyles(() => [
generalButtonStyling,
css`
:host {
display: block;
background-color: tomato;
}
`
]);
return (
<div>Hello World!</div>
);
};
Using non css
literal
If you must use an variable in a css
literal that is not itself a css
literal, and you are sure that it is a safe source then you can wrap the source within a unsafeCSS
hook:
const color = 'green';
css`
:host {
display: block;
background-color: `${unsafeCSS(color)}`;
}
`