Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

foliage

Package Overview
Dependencies
Maintainers
4
Versions
49
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

foliage - npm Package Compare versions

Comparing version
0.106.0
 to
0.200.0
+1
dist/babel-plugin/index.d.ts
export declare const a = 1;
+4
-3
dist/index.d.ts
import { DOMTag, spec } from 'forest';
export declare function StyledRoot(): void;
declare type Cb = () => void;
export declare type Component = ((config: Spec | Cb) => void) & {
declare type Callback = () => void;
export declare type FunctionComponent = (config: Spec | Callback) => void;
export declare type Component = FunctionComponent & {
STYLED_ID: string;
};
export declare type Spec = Parameters<typeof spec>[0] & {
fn?: Cb;
fn?: Callback;
};

@@ -10,0 +11,0 @@ declare type Creator = (content: TemplateStringsArray, ...interpolations: (string | Component | number)[]) => Component;

+1
-1
dist/index.js.map

@@ -1,1 +0,1 @@

{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"forest\"","webpack:///external \"stylis\"","webpack:///external \"effector\"","webpack:///./src/elements.ts","webpack:///./src/index.ts"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","require","addStyle","$styles","map","Map","StyledRoot","text","values","join","on","state","id","styles","has","set","make","styledId","toString","idCount","fabric","tag","content","interpolations","strings","interps","result","forEach","part","index","STYLED_ID","TypeError","push","String","Component","config","reference","classList","add","fn","element","styled"],"mappings":"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","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 3);\n","module.exports = require(\"forest\");","module.exports = require(\"stylis\");","module.exports = require(\"effector\");","export const domElements = [\n 'a',\n 'abbr',\n 'address',\n 'area',\n 'article',\n 'aside',\n 'audio',\n 'b',\n 'base',\n 'bdi',\n 'bdo',\n // 'big',\n 'blockquote',\n 'body',\n 'br',\n 'button',\n 'canvas',\n 'caption',\n 'cite',\n 'code',\n 'col',\n 'colgroup',\n 'data',\n 'datalist',\n 'dd',\n 'del',\n 'details',\n 'dfn',\n 'dialog',\n 'div',\n 'dl',\n 'dt',\n 'em',\n 'embed',\n 'fieldset',\n 'figcaption',\n 'figure',\n 'footer',\n 'form',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'head',\n 'header',\n 'hgroup',\n 'hr',\n 'html',\n 'i',\n 'iframe',\n 'img',\n 'input',\n 'ins',\n 'kbd',\n // 'keygen',\n 'label',\n 'legend',\n 'li',\n 'link',\n 'main',\n 'map',\n 'mark',\n 'marquee',\n 'menu',\n // 'menuitem',\n 'meta',\n 'meter',\n 'nav',\n 'noscript',\n 'object',\n 'ol',\n 'optgroup',\n 'option',\n 'output',\n 'p',\n 'param',\n 'picture',\n 'pre',\n 'progress',\n 'q',\n 'rp',\n 'rt',\n 'ruby',\n 's',\n 'samp',\n 'script',\n 'section',\n 'select',\n 'small',\n 'source',\n 'span',\n 'strong',\n 'style',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'textarea',\n 'tfoot',\n 'th',\n 'thead',\n 'time',\n 'title',\n 'tr',\n 'track',\n 'u',\n 'ul',\n 'var',\n 'video',\n 'wbr',\n\n // SVG\n 'circle',\n 'clipPath',\n 'defs',\n 'ellipse',\n 'foreignObject',\n 'g',\n 'image',\n 'line',\n 'linearGradient',\n 'marker',\n 'mask',\n 'path',\n 'pattern',\n 'polygon',\n 'polyline',\n 'radialGradient',\n 'rect',\n 'stop',\n 'svg',\n 'text',\n 'tspan',\n] as const;\n","import { createEvent, createStore, Store } from 'effector';\nimport { DOMTag, h, node, spec } from 'forest';\nimport { serialize, compile, stringify } from 'stylis';\n\nimport { domElements } from './elements';\n\nconst addStyle = createEvent<{ id: string; styles: string }>();\nconst $styles = createStore<{ map: Map<string, string> }>({ map: new Map() });\n\nexport function StyledRoot(): void {\n const text = $styles.map(({ map }) => [...map.values()].join(' '));\n h('style', { text });\n}\n\n$styles.on(addStyle, (state, { id, styles }) => {\n if (state.map.has(id)) return state;\n state.map.set(id, make(id, styles));\n return { map: state.map };\n});\n\nfunction make(id: string, styles: string) {\n return serialize(compile(`.es-${id} { ${styles} }`), stringify);\n}\n\nconst idCount = () => {\n let id = 9005000;\n return () => (++id).toString(36);\n};\n\nconst styledId = idCount();\n\ntype Cb = () => void;\n\nexport type Component = ((config: Spec | Cb) => void) & {\n STYLED_ID: string;\n};\n\nfunction join(\n strings: TemplateStringsArray,\n interps: (string | Component | number)[],\n) {\n const result = [strings[0]];\n interps.forEach((part, index) => {\n if (typeof part === 'function') {\n if (typeof part.STYLED_ID === 'string') {\n result.push(`.es-${part.STYLED_ID}`);\n } else {\n throw new TypeError('Passed not an effector styled component');\n }\n } else {\n result.push(String(part));\n }\n result.push(strings[index + 1]);\n });\n\n return result.join('');\n}\n\nexport type Spec = Parameters<typeof spec>[0] & { fn?: Cb };\n\ntype Creator = (\n content: TemplateStringsArray,\n ...interpolations: (string | Component | number)[]\n) => Component;\n\ntype TagFabric = (tag: DOMTag) => Creator;\n\ntype TagMap = {\n [P in DOMTag]: Creator;\n};\n\nconst fabric: TagFabric & Partial<TagMap> = (tag: DOMTag) => (\n content,\n ...interpolations\n) => {\n const id = styledId();\n\n const styles = join(content, interpolations);\n\n const Component = (config: Spec | Cb) => {\n addStyle({ id, styles });\n\n h(tag, () => {\n node((reference) => {\n reference.classList.add(`es-${id}`);\n });\n if (config) {\n if (typeof config === 'function') {\n config();\n } else {\n spec(config);\n if (typeof config.fn === 'function') {\n config.fn();\n }\n }\n }\n });\n };\n\n Component.STYLED_ID = id;\n\n return Component;\n};\n\ndomElements.forEach((element) => {\n fabric[element] = fabric(element);\n});\n\nexport const styled = fabric as TagFabric & TagMap;\n"],"sourceRoot":""}
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"forest\"","webpack:///external \"stylis\"","webpack:///external \"effector\"","webpack:///./src/elements.ts","webpack:///./src/index.ts"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","require","addStyle","$styles","map","Map","StyledRoot","text","values","join","on","state","id","styles","has","set","make","styledId","toString","idCount","fabric","tag","content","interpolations","strings","interps","result","forEach","part","index","TypeError","push","STYLED_ID","String","Component","config","reference","classList","add","fn","element","styled"],"mappings":"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","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 3);\n","module.exports = require(\"forest\");","module.exports = require(\"stylis\");","module.exports = require(\"effector\");","export const domElements = [\n 'a',\n 'abbr',\n 'address',\n 'area',\n 'article',\n 'aside',\n 'audio',\n 'b',\n 'base',\n 'bdi',\n 'bdo',\n // 'big',\n 'blockquote',\n 'body',\n 'br',\n 'button',\n 'canvas',\n 'caption',\n 'cite',\n 'code',\n 'col',\n 'colgroup',\n 'data',\n 'datalist',\n 'dd',\n 'del',\n 'details',\n 'dfn',\n 'dialog',\n 'div',\n 'dl',\n 'dt',\n 'em',\n 'embed',\n 'fieldset',\n 'figcaption',\n 'figure',\n 'footer',\n 'form',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'head',\n 'header',\n 'hgroup',\n 'hr',\n 'html',\n 'i',\n 'iframe',\n 'img',\n 'input',\n 'ins',\n 'kbd',\n // 'keygen',\n 'label',\n 'legend',\n 'li',\n 'link',\n 'main',\n 'map',\n 'mark',\n 'marquee',\n 'menu',\n // 'menuitem',\n 'meta',\n 'meter',\n 'nav',\n 'noscript',\n 'object',\n 'ol',\n 'optgroup',\n 'option',\n 'output',\n 'p',\n 'param',\n 'picture',\n 'pre',\n 'progress',\n 'q',\n 'rp',\n 'rt',\n 'ruby',\n 's',\n 'samp',\n 'script',\n 'section',\n 'select',\n 'small',\n 'source',\n 'span',\n 'strong',\n 'style',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'textarea',\n 'tfoot',\n 'th',\n 'thead',\n 'time',\n 'title',\n 'tr',\n 'track',\n 'u',\n 'ul',\n 'var',\n 'video',\n 'wbr',\n\n // SVG\n 'circle',\n 'clipPath',\n 'defs',\n 'ellipse',\n 'foreignObject',\n 'g',\n 'image',\n 'line',\n 'linearGradient',\n 'marker',\n 'mask',\n 'path',\n 'pattern',\n 'polygon',\n 'polyline',\n 'radialGradient',\n 'rect',\n 'stop',\n 'svg',\n 'text',\n 'tspan',\n] as const;\n","import { createEvent, createStore } from 'effector';\nimport { DOMTag, h, node, spec } from 'forest';\nimport { compile, serialize, stringify } from 'stylis';\n\nimport { domElements } from './elements';\n\nconst addStyle = createEvent<{ id: string; styles: string }>();\nconst $styles = createStore<{ map: Map<string, string> }>({ map: new Map() });\n\nexport function StyledRoot(): void {\n const text = $styles.map(({ map }) => [...map.values()].join(' '));\n h('style', { text });\n}\n\n$styles.on(addStyle, (state, { id, styles }) => {\n if (state.map.has(id)) return state;\n state.map.set(id, make(id, styles));\n return { map: state.map };\n});\n\nfunction make(id: string, styles: string) {\n return serialize(compile(`.es-${id} { ${styles} }`), stringify);\n}\n\nconst idCount = () => {\n let id = 9005000;\n return () => (++id).toString(36);\n};\n\nconst styledId = idCount();\n\ntype Callback = () => void;\n\nexport type FunctionComponent = (config: Spec | Callback) => void;\n\nexport type Component = FunctionComponent & {\n STYLED_ID: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nfunction hasStyledId(fn: object | Function): fn is { STYLED_ID: string } {\n // eslint-disable-next-line dot-notation\n return typeof fn['STYLED_ID'] === 'string';\n}\n\nfunction join(\n strings: TemplateStringsArray,\n interps: (string | FunctionComponent | Component | number)[],\n) {\n const result = [strings[0]];\n interps.forEach((part, index) => {\n if (typeof part === 'function') {\n if (hasStyledId(part)) {\n result.push(`.es-${part.STYLED_ID}`);\n } else {\n throw new TypeError('Passed not an effector styled component');\n }\n } else {\n result.push(String(part));\n }\n result.push(strings[index + 1]);\n });\n\n return result.join('');\n}\n\nexport type Spec = Parameters<typeof spec>[0] & { fn?: Callback };\n\ntype Creator = (\n content: TemplateStringsArray,\n ...interpolations: (string | Component | number)[]\n) => Component;\n\ntype TagFabric = (tag: DOMTag) => Creator;\n\ntype TagMap = {\n [P in DOMTag]: Creator;\n};\n\nconst fabric: TagFabric & Partial<TagMap> = (tag: DOMTag) => (\n content,\n ...interpolations\n) => {\n const id = styledId();\n\n const styles = join(content, interpolations);\n\n const Component = (config: Spec | Callback) => {\n addStyle({ id, styles });\n\n h(tag, () => {\n node((reference) => {\n reference.classList.add(`es-${id}`);\n });\n if (config) {\n if (typeof config === 'function') {\n config();\n } else {\n spec(config);\n if (typeof config.fn === 'function') {\n config.fn();\n }\n }\n }\n });\n };\n\n Component.STYLED_ID = id;\n\n return Component;\n};\n\ndomElements.forEach((element) => {\n fabric[element] = fabric(element);\n});\n\nexport const styled = fabric as TagFabric & TagMap;\n"],"sourceRoot":""}
+31
-14
package.json
{
"name": "foliage",
"version": "0.106.0",
"version": "0.200.0",
"description": "Styled Components for forest",

@@ -10,3 +10,3 @@ "main": "dist/index.js",

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"test": "jest",
"commit": "git-cz",

@@ -23,3 +23,3 @@ "lint": "eslint ./",

"repository": {
"url": "https://github.com/sergeysova/foliage"
"url": "https://github.com/foliage-ui/foliage"
},

@@ -44,19 +44,26 @@ "files": ["dist"],

"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-typescript": "^7.10.1",
"@babel/cli": "^7.12.17",
"@babel/core": "^7.13.14",
"@babel/preset-env": "^7.13.12",
"@babel/preset-typescript": "^7.13.0",
"@babel/types": "^7.12.17",
"@commitlint/cli": "^8.3.5",
"@commitlint/config-conventional": "^8.3.4",
"@eslint-kit/eslint-config-base": "^2.1.2",
"@eslint-kit/eslint-config-base": "^3.0.0",
"@eslint-kit/eslint-config-node": "^2.0.0",
"@eslint-kit/eslint-config-prettier": "^2.0.0",
"@eslint-kit/eslint-config-typescript": "^3.1.2",
"@eslint-kit/eslint-config-typescript": "^3.2.0",
"@types/jest": "^25.2.1",
"@types/node": "^13.13.5",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
"@typescript-eslint/parser": "^4.4.1",
"babel-jest": "^26.6.3",
"babel-plugin-tester": "^10.0.0",
"change-case": "^4.1.2",
"commitizen": "^4.1.2",
"cz-conventional-changelog": "^3.2.0",
"effector": "^21.8.3",
"eslint": "^7.11.0",
"forest": "^0.19.6",
"effector": "^22.1.0",
"eslint": "7.10.0",
"forest": "^0.20.2",
"husky": "^4.2.5",

@@ -67,6 +74,9 @@ "jest": "^26.0.1",

"prettier": "^2.0.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sharec-sova-config": "^0.1.0",
"terser-webpack-plugin": "^3.0.2",
"ts-loader": "^7.0.5",
"typescript": "^4.1.5",
"ts-node": "^9.1.1",
"typescript": "^4.4.2",
"typescript-styled-plugin": "^0.15.0",

@@ -81,8 +91,15 @@ "webpack": "^4.43.0",

"dependencies": {
"autoprefixer": "^10.2.4",
"csso": "^4.2.0",
"postcss": "^8.2.6",
"postcss-nested": "^5.0.3",
"stylis": "^4.0.0"
},
"peerDependencies": {
"effector": "^21.8.3",
"forest": "^0.19.6"
"effector": "^22.1.0",
"forest": "^0.20.2"
},
"browserslist": {
"development": ["last 1 ie version", "last 5 chrome version"]
}
}
+197
-44
README.md
# foliage 🍃
[NPM](https://npmjs.org/package/foliage)
[GitHub](https://github.com/sergeysova/foliage)
<!-- [NPM](https://npmjs.org/package/foliage) -->
## Usage
[GitHub](https://github.com/effector/foliage) [dev.to](https://dev.to/foliage)
[Edit on Stackblitz](https://stackblitz.com/edit/foliage-forest)
## Usage with React
> Work in progress. Most of this examples are just concept
<!-- [Edit on Stackblitz](https://stackblitz.com/edit/foliage-forest) -->
```ts
import { using } from 'forest';
import { styled, StyledRoot } from 'foliage';
import { css, component } from 'foliage-react';
const Block = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
box-shadow: rgba(0, 0, 0, 0.17) 0px 2px 20px;
box-sizing: border-box;
min-height: 100vh;
margin-bottom: 160px;
background: linear-gradient(20deg, rgb(219, 112, 147), rgb(218, 163, 87));
`;
const Button = styled.a`
const button = css`
display: inline-block;

@@ -34,31 +22,196 @@ border-radius: 3px;

width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
text-decoration: none;
`;
&[data-fill='true'] {
background: white;
color: palevioletred;
export const Button = component('a', button, {
defaults: { color: 'default' },
variants: {
color: {
primary: css`
background: white;
color: black;
`,
default: css`
background: transparent;
color: white;
`,
},
},
});
```
### Extending styles
```ts
import { css, component } from 'foliage-react';
const button = css`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
export const Button = component('button', button);
const tomato = css`
color: tomato;
border-color: tomato;
`;
export const TomatoButton = component('button', [button, tomato]);
```
### Pseudoelement, pseudoselectors, and nesting
```tsx
import { css, component } from 'foliage-react';
const thing = css`
color: blue;
&:hover {
color: red; // <Thing> when hovered
}
& ~ & {
background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
}
& + & {
background: lime; // <Thing> next to <Thing>
}
&.something {
background: orange; // <Thing> tagged with an additional CSS class ".something"
}
.something-else & {
border: 1px solid; // <Thing> inside another element labeled ".something-else"
}
`;
function App() {
Block({
fn() {
Button({
text: 'Google',
attr: { href: 'https://google.com' },
data: { fill: true },
});
Button({
text: 'Yandex',
attr: { href: 'https://yandex.ru' },
});
},
});
}
export const Thing = component('div', thing, { attrs: { tabIndex: 0 } });
using(document.querySelector('#root'), App);
using(document.querySelector('head'), StyledRoot);
const Example = () => (
<>
<Thing>Hello world!</Thing>
<Thing>How ya doing?</Thing>
<Thing className="something">The sun is shining...</Thing>
<div>Pretty nice day today.</div>
<Thing>Don't you think?</Thing>
<div className="something-else">
<Thing>Splendid.</Thing>
</div>
</>
);
```
### Animations
```ts
import { css, keyframes, component } from 'foliage-react';
const rotate = keyframes`
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
`;
const block = css`
display: inline-block;
animation: ${rotate} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
`;
export const Block = component('div', block);
```
### Theming
```tsx
import { css, keyframes, createGlobalStyle, Global } from 'foliage-react';
const theme = {
main: '--theme-main',
};
const button = css`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
/* Color the border and text with theme.main */
color: var(${theme.main});
border: 2px solid var(${theme.main});
`;
const Button = component('button', button);
const primaryTheme = createGlobalStyle`
:root {
${theme.main}: palevioletred;
}
`;
const secondaryTheme = createGlobalStyle`
:root {
${theme.main}: mediumseagreen;
}
`;
const Example = () => (
<>
<Global styles={primaryTheme} />
<Button />
</>
);
```
### Composable components
```tsx
import { css, component } from 'foliage-react';
const baseStyles = css`
color: white;
background-color: mediumseagreen;
border-radius: 4px;
`;
export const Button = component('button', baseStyles, {
variants: {
color: {
gray: css`
background-color: gainsboro;
`,
blue: css`
background-color: dodgerblue;
`,
},
size: {
md: css`
height: 26px;
`,
lg: css`
height: 36px;
`,
},
},
compound: [
{
color: 'blue',
size: 'lg',
css: css`
background-color: purple;
`,
},
],
defaults: {
color: 'gray',
size: 'md',
},
});
```