@devcapsule/adapter
v2.5.3
Published
CSS-in-JS Toolkit for Web Components
Downloads
7
Maintainers
Readme
Sample Usage
import { Adapter } from `https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm`;
const cardStyle = `
display: block;
min-height: 5rem;
width: 100%;
color: red;
`;
class Card extends Adapter {
/** Style is isolated in defined tag name. */
static css = cardStyle;
};
/** Don't worry about tag's name conflicted, choose your own. */
Card.define('el-card');
/**
* More style can be added later, class can also be used.
* This will render CSS as `el-card.text-blue { color: blue }`
*/
Card.addStyle(`
&.text-blue { color: blue }
`);
/** Replace component styles with the base style `cardStyle`,
* This is just one from many way to do it.
*/
Card.css = cardStyle;
/** Dynamically create stylable element <el-card>
* which inherit all styles from `Card`
*/
const card = new Card();
/** <el-card> object has the same API as `Card`
* but style will be specific for this element only.
*/
card.css = `display: flex;`;
card.addStyle(`color: black;`);
document.body.append(card);
Software Development 💻
Project Board
https://github.com/orgs/keenlycode/projects/2
Prerequisites
- NodeJS : https://nodejs.org/en/
- Git : https://git-scm.com/
Prerequisites for document creation.
- Python >= 3.10 : https://www.python.org/
🛠️ Setup
- Clone repository from github
$ git clone https://github.com/keenlycode/adapter.git
$ cd adapter
- Install node dependencies
$ npm install
🗃️ Build Library
# Build
$ npm run dist
🔍 Run Test
$ npm run test
Document Creation (Python 🐍)
$ python -m venv venv
$ source venv/bin/activate
$ pip install -r require.pip
$ npm run docs
Special Thanks
2024-01-09