Package Exports
- @cssfn/cssfn
- @cssfn/cssfn/dist/cssfn.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cssfn/cssfn) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
cssfn - Writes CSS in JavaScript way
A lib for generating Style Sheet (css) with JavaScript function.
Similar to React Hooks but for generating css dynamically.
By underlying JavaScript language, the css can be easily exported/imported as a regular JavaScript module.
The generated css can be exported to css toString() or attached to DOM directly .attach().
Preview
export const usesAwesomeButton = () => composition([
imports([
stripoutControl(), // clear browser's default styles
usesButtonBase(), // imports css from a generic button
// imports any stuff here...
]),
layout({
display : 'flex',
flexDirection : 'row',
background : 'pink',
color : 'darkred',
// writes the css declaration similar to regular css
...children(['span', '.logo'], [ // target to <span> and class="logo"
imports([
// imports any stuff here...
]),
layout({
// writes the css declaration similar to regular css
}),
]),
}),
variants([
rule('.big', [
layout({
fontSize: 'xx-large',
// ....
}),
]),
rule('.dark', [
// ...
]),
]),
states([
rule([':disabled', '.disabled'], [
// ....
]),
]),
]);
// attach the css to DOM:
createSheet(() => [
globalDef([
rule('.awesome-btn', [
imports([
usesAwesomeButton(),
]),
]),
rule('.awesome-checkbox', [
// ....
]),
// ....
]),
])
.attach();Then we can consume our generated css like this:
<script src="button-style.js">
</script>
<button class="awesome-btn">Awesome!</button>Features
- Includes all Vanilla & ES6 JavaScript features.
- Lazy execution (your function will be executed on demand).
- Cached - your function only be executed once (or never if not needed).
- IntelliSense supported - Our cssfn is written in TypeScript (superset of JavaScript).
- CSS Variable Management - Never write variable name in plain string.
- CSS Config Management - Shares a common setting to many components.
Installation
Using npm:
npm i @cssfn/cssfnSupport Us
If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.
We always maintain our projects as long as we're still alive.