12 |
47 |
13 |
22 |
14 |
18 |
19 | Variable _context
_context: HoboContext = ...
48 |
49 |
--------------------------------------------------------------------------------
/examples/_test.ts:
--------------------------------------------------------------------------------
1 | import { attach, doc, generate } from '../src/hobo';
2 | import { builders } from '../src/tag-builder';
3 |
4 | const { div, img } = builders;
5 |
6 | console.log(generate(img!.id('src').b()))
7 | console.log(generate(img!.as('color', 'red').b()))
8 |
--------------------------------------------------------------------------------
/examples/generated/readme-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Generated using TypeDoc
2 |
3 |
4 |
--------------------------------------------------------------------------------
/examples/generated/tag-inline-styles.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/examples/generated/tag-scripts.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
--------------------------------------------------------------------------------
/examples/generated/tag-styles.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/hobo-in-js.js:
--------------------------------------------------------------------------------
1 | const { builders } = require('../dist/hobo.js');
2 |
3 | console.log(builders.div());
--------------------------------------------------------------------------------
/examples/readme-1.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import * as fs from 'fs';
3 | import { builders, doc, generate } from '../src/hobo';
4 |
5 | const { div, p, span, b, script, button, style, a, hr } = builders;
6 |
7 | // Create a document. It will create the html, head and body tags. A title will also be added to the head.
8 | // NOTE that doc, automatically attaches the body (read more on attaching below)
9 | const myPage = doc('My Page Title');
10 |
11 | // This will create a style tag with the given css definitions inside
12 | myPage.head.append(
13 | style({
14 | '.wrapper': {
15 | background: 'black',
16 | display: 'flex',
17 | alignItems: 'center',
18 | justifyContent: 'center',
19 | ':hover': {
20 | background: 'red'
21 | }
22 | },
23 | }),
24 | );
25 |
26 | // Creates a `div` with class wrapper, and 3 children (p, b, button).
27 | // `.a` indicates hobo to attach the `div` to the currently attached tag
28 | // you can attach manually to any tag, but by calling `doc`, the `body` will be attached
29 | div.a.addClass('wrapper').build(
30 | p("I'm a child of div.wrapper"),
31 | b.addStyle('color', 'aliceblue')('And so am I'),
32 | hr,
33 | a.addAttr('href', 'http://example.com').b('Click me'),
34 | button.id('button-id').b("I'm also a child"),
35 | );
36 |
37 | // The code inside the function will be inserted into a script tag
38 | script.a(() => {
39 | const btn = document.querySelector('#button-id');
40 | });
41 |
42 | fs.writeFileSync(path.join(__dirname, 'generated/readme-1.html'), generate(myPage.doc));
43 |
--------------------------------------------------------------------------------
/examples/tag-attributes.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import * as fs from 'fs';
3 | import { builders, generate } from '../src/hobo';
4 |
5 | const { a } = builders;
6 |
7 | // Add single attribute
8 | const root = a
9 | .aa('href', 'https://example.com')
10 | // Add class names directly
11 | .am({ href: 'https://example.com', tooltip: 'Go to website' });
12 |
13 | fs.writeFileSync(path.join(__dirname, 'generated/tag-attributes.html'), generate(root.b()));
14 |
--------------------------------------------------------------------------------
/examples/tag-classes.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import * as fs from 'fs';
3 | import { builders, doc, generate } from '../src/hobo';
4 |
5 | const { div } = builders;
6 |
7 | // Add class names using builder helper methods
8 | const root = div.ac('card-wrapper').append(div.ac('card', 'centered'));
9 |
10 | // Add class names directly
11 | root.attr.className.add('card-wrapper');
12 |
13 | fs.writeFileSync(path.join(__dirname, 'generated/tag-classes.html'), generate(root.b()));
--------------------------------------------------------------------------------
/examples/tag-inline-styles.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import * as fs from 'fs';
3 | import { builders, generate } from '../src/hobo';
4 |
5 | const { a } = builders;
6 |
7 | // Add single style
8 | const root = a
9 | .as('color', 'bisque')
10 | // Add multiple styles at once
11 | .ss({ color: 'black', fontWeight: 'bold' });
12 |
13 | fs.writeFileSync(path.join(__dirname, 'generated/tag-inline-styles.html'), generate(root.b()));
14 |
--------------------------------------------------------------------------------
/examples/tag-script.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import * as fs from 'fs';
3 | import { builders, generate } from '../src/hobo';
4 |
5 | const { div, script } = builders;
6 |
7 | const root = div.append(
8 | script(() => {
9 | const rootDiv = document.querySelector('div');
10 | }),
11 | );
12 |
13 | fs.writeFileSync(path.join(__dirname, 'generated/tag-scripts.html'), generate(root.b()));
14 |
--------------------------------------------------------------------------------
/examples/tag-style.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import * as fs from 'fs';
3 | import { builders, generate } from '../src/hobo';
4 |
5 | const { div, style } = builders;
6 |
7 | const root = div.append(
8 | style(
9 | {
10 | body: {
11 | backgroundColor: 'red',
12 | },
13 | },
14 | {
15 | '.some-class': {
16 | color: 'blue',
17 | },
18 | },
19 | ),
20 | );
21 |
22 | fs.writeFileSync(path.join(__dirname, 'generated/tag-styles.html'), generate(root.b()));
23 |
--------------------------------------------------------------------------------
/hobo-header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nombrekeff/hobo-js/1cd54a3fe83bbd15820fb2e05fb6736a35efba6b/hobo-header.png
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | // Sync object
2 | const config= {
3 | verbose: true,
4 | transform: {
5 | '^.+\\.tsx?$': 'ts-jest',
6 | },
7 | };
8 | module.exports= config;
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hobo-js",
3 | "version": "1.0.2",
4 | "description": "A little utility to generate html inside your js/ts code",
5 | "main": "dist/hobo.js",
6 | "module": "dist/hobo.mjs",
7 | "unpkg": "dist/hobo.umd.min.js",
8 | "types": "dist/types/hobo.d.ts",
9 | "files": [
10 | "dist"
11 | ],
12 | "scripts": {
13 | "test": "jest --coverage",
14 | "clean": "rm -fr dist",
15 | "build": "npm run clean && tsc -d --project tsconfig.build.json && build:docs && npm run bundle:esm && npm run bundle:esm:min && npm run bundle:umd && npm run bundle:umd:min",
16 | "bundle:esm": "rollup dist/hobo.js --file dist/hobo.mjs --format esm",
17 | "bundle:esm:min": "terser --ecma 6 --compress --mangle --module -o dist/hobo.min.mjs -- dist/hobo.mjs && gzip -9 -c dist/hobo.min.mjs > dist/hobo.min.mjs.gz",
18 | "bundle:umd": "rollup dist/hobo.js --file dist/hobo.umd.js --format umd --name sayHello",
19 | "bundle:umd:min": "terser --ecma 6 --compress --mangle -o dist/hobo.umd.min.js -- dist/hobo.umd.js && gzip -9 -c dist/hobo.umd.min.js > dist/hobo.umd.min.js.gz",
20 | "build:docs": "typedoc --out docs src/*.ts"
21 | },
22 | "keywords": [
23 | "js",
24 | "ts",
25 | "generate",
26 | "html",
27 | "from",
28 | "code",
29 | "typed",
30 | "template",
31 | "build",
32 | "in-code"
33 | ],
34 | "author": "nombrekeff",
35 | "repository": {
36 | "git": "https://github.com/nombrekeff/hobo-js"
37 | },
38 | "license": "ISC",
39 | "devDependencies": {
40 | "@types/jest": "^29.5.5",
41 | "@types/node": "^20.7.0",
42 | "jest": "^29.7.0",
43 | "rollup": "^3.29.4",
44 | "terser": "^5.21.0",
45 | "ts-jest": "^29.1.1",
46 | "ts-loader": "^9.4.4",
47 | "typedoc": "^0.25.1",
48 | "typescript": "^5.2.2",
49 | "webpack": "^5.88.2",
50 | "webpack-cli": "^5.1.4"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/scripts/generate_api_docs.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const { exec } = require("child_process");
4 |
5 | const jsFilesFoldPath = path.join(__dirname, '../dist');
6 | const output = path.join(__dirname, '../docs');
7 | const makeDocsCommand = (name, path) => `jsdoc2md -f ${path}/${name}.js > ${output}/${name}.api.md`;
8 |
9 | const ignoredFiles = [
10 | 'types',
11 | 'generation',
12 | 'util.js',
13 | 'tag-names.js',
14 | 'css-property-values.js',
15 | 'css-properties.js',
16 | 'css-property-values.js',
17 | ];
18 |
19 | function processFolder(folderPath) {
20 | const inFiles = fs.readdirSync(folderPath);
21 |
22 | for (const file of inFiles) {
23 | // Skip map files
24 | if (file.includes('map')) continue;
25 | if (ignoredFiles.includes(file)) continue;
26 |
27 | const filePath = path.join(folderPath, file);
28 | const fstat = fs.statSync(filePath);
29 |
30 | if (fstat.isDirectory()) {
31 | processFolder(filePath);
32 | }
33 | else {
34 | const extension = path.extname(filePath);
35 | const name = path.basename(filePath, extension).replace(extension, '');
36 |
37 | const command = makeDocsCommand(name, folderPath);
38 | exec(command, (error, _, stderr) => {
39 | if (error) {
40 | console.log(`error: ${error.message}`);
41 | return;
42 | }
43 | if (stderr) {
44 | console.log(`stderr: ${stderr}`);
45 | return;
46 | }
47 | });
48 | }
49 | }
50 |
51 | }
52 |
53 | fs.rmSync(output, {recursive: true});
54 | fs.mkdirSync(output);
55 |
56 | processFolder(jsFilesFoldPath);
57 |
58 |
59 |
--------------------------------------------------------------------------------
/src/attributes.ts:
--------------------------------------------------------------------------------
1 | import { ClassName } from './class-name';
2 | import { StyleSet } from './style';
3 |
4 | /**
5 | * Represents a tag's attribute set.
6 | */
7 | export class AttrSet {
8 | className: ClassName = new ClassName();
9 | id?: string;
10 | style: StyleSet = new StyleSet();
11 |
12 | additionalAttributes: { [key: string]: string } = {};
13 |
14 | copy() {
15 | const newSet = new AttrSet();
16 | newSet.className = this.className.copy();
17 | newSet.id = this.id;
18 | newSet.style = this.style.copy();
19 | newSet.additionalAttributes = { ...this.additionalAttributes };
20 | return newSet;
21 | }
22 |
23 | /** Set single attribute */
24 | set(key: string, value: string): AttrSet {
25 | this.additionalAttributes[key] = value;
26 | return this;
27 | }
28 |
29 | /** Remove attributes */
30 | remove(...attrs: string[]): AttrSet {
31 | for (const cn of attrs) {
32 | delete this.additionalAttributes[cn];
33 | }
34 | return this;
35 | }
36 |
37 | /** Check if an attribute is set */
38 | has(key: string): boolean {
39 | return key in this.additionalAttributes;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/class-name.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Represents a tag's class list.
3 | */
4 | export class ClassName {
5 | classNames: string[] = [];
6 |
7 | constructor(classNames: string[] = []) {
8 | this.classNames = classNames;
9 | }
10 |
11 | copy() {
12 | const newClassName = new ClassName();
13 | newClassName.classNames = [...this.classNames];
14 | return newClassName;
15 | }
16 |
17 | /**
18 | * Returns a string of all the class names separated by spaces.
19 | */
20 | raw(): string {
21 | return this.classNames.join(' ');
22 | }
23 |
24 | /** Add one or more class names */
25 | add(...classNames: string[]): ClassName {
26 | for (const cn of classNames) {
27 | if (!this.has(cn)) {
28 | this.classNames.push(cn);
29 | }
30 | }
31 |
32 | return this;
33 | }
34 |
35 | /** Remove one or more class names */
36 | remove(...classNames: string[]): ClassName {
37 | for (const cn of classNames) {
38 | if (!this.has(cn)) return this;
39 |
40 | const index = this.classNames.indexOf(cn);
41 | this.classNames.splice(index, 1);
42 | }
43 |
44 | return this;
45 | }
46 |
47 | /** Check if a class name is present. */
48 | has(str: string): boolean {
49 | return this.classNames.includes(str);
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/custom-types/colors.ts:
--------------------------------------------------------------------------------
1 | export type NamedColor = 'black'|
2 | 'silver'|
3 | 'gray'|
4 | 'white'|
5 | 'maroon'|
6 | 'red'|
7 | 'purple'|
8 | 'fuchsia'|
9 | 'green'|
10 | 'lime'|
11 | 'olive'|
12 | 'yellow'|
13 | 'navy'|
14 | 'blue'|
15 | 'teal'|
16 | 'aqua'|
17 | 'aliceblue'|
18 | 'antiquewhite'|
19 | 'aqua'|
20 | 'aquamarine'|
21 | 'azure'|
22 | 'beige'|
23 | 'bisque'|
24 | 'black'|
25 | 'blanchedalmond'|
26 | 'blue'|
27 | 'blueviolet'|
28 | 'brown'|
29 | 'burlywood'|
30 | 'cadetblue'|
31 | 'chartreuse'|
32 | 'chocolate'|
33 | 'coral'|
34 | 'cornflowerblue'|
35 | 'cornsilk'|
36 | 'crimson'|
37 | 'cyan'|
38 | 'darkblue'|
39 | 'darkcyan'|
40 | 'darkgoldenrod'|
41 | 'darkgray'|
42 | 'darkgreen'|
43 | 'darkgrey'|
44 | 'darkkhaki'|
45 | 'darkmagenta'|
46 | 'darkolivegreen'|
47 | 'darkorange'|
48 | 'darkorchid'|
49 | 'darkred'|
50 | 'darksalmon'|
51 | 'darkseagreen'|
52 | 'darkslateblue'|
53 | 'darkslategray'|
54 | 'darkslategrey'|
55 | 'darkturquoise'|
56 | 'darkviolet'|
57 | 'deeppink'|
58 | 'deepskyblue'|
59 | 'dimgray'|
60 | 'dimgrey'|
61 | 'dodgerblue'|
62 | 'firebrick'|
63 | 'floralwhite'|
64 | 'forestgreen'|
65 | 'fuchsia'|
66 | 'gainsboro'|
67 | 'ghostwhite'|
68 | 'gold'|
69 | 'goldenrod'|
70 | 'gray'|
71 | 'green'|
72 | 'greenyellow'|
73 | 'grey'|
74 | 'honeydew'|
75 | 'hotpink'|
76 | 'indianred'|
77 | 'indigo'|
78 | 'ivory'|
79 | 'khaki'|
80 | 'lavender'|
81 | 'lavenderblush'|
82 | 'lawngreen'|
83 | 'lemonchiffon'|
84 | 'lightblue'|
85 | 'lightcoral'|
86 | 'lightcyan'|
87 | 'lightgoldenrodyellow'|
88 | 'lightgray'|
89 | 'lightgreen'|
90 | 'lightgrey'|
91 | 'lightpink'|
92 | 'lightsalmon'|
93 | 'lightseagreen'|
94 | 'lightskyblue'|
95 | 'lightslategray'|
96 | 'lightslategrey'|
97 | 'lightsteelblue'|
98 | 'lightyellow'|
99 | 'lime'|
100 | 'limegreen'|
101 | 'linen'|
102 | 'magenta'|
103 | 'maroon'|
104 | 'mediumaquamarine'|
105 | 'mediumblue'|
106 | 'mediumorchid'|
107 | 'mediumpurple'|
108 | 'mediumseagreen'|
109 | 'mediumslateblue'|
110 | 'mediumspringgreen'|
111 | 'mediumturquoise'|
112 | 'mediumvioletred'|
113 | 'midnightblue'|
114 | 'mintcream'|
115 | 'mistyrose'|
116 | 'moccasin'|
117 | 'navajowhite'|
118 | 'navy'|
119 | 'oldlace'|
120 | 'olive'|
121 | 'olivedrab'|
122 | 'orange'|
123 | 'orangered'|
124 | 'orchid'|
125 | 'palegoldenrod'|
126 | 'palegreen'|
127 | 'paleturquoise'|
128 | 'palevioletred'|
129 | 'papayawhip'|
130 | 'peachpuff'|
131 | 'peru'|
132 | 'pink'|
133 | 'plum'|
134 | 'powderblue'|
135 | 'purple'|
136 | 'rebeccapurple'|
137 | 'red'|
138 | 'rosybrown'|
139 | 'royalblue'|
140 | 'saddlebrown'|
141 | 'salmon'|
142 | 'sandybrown'|
143 | 'seagreen'|
144 | 'seashell'|
145 | 'sienna'|
146 | 'silver'|
147 | 'skyblue'|
148 | 'slateblue'|
149 | 'slategray'|
150 | 'slategrey'|
151 | 'snow'|
152 | 'springgreen'|
153 | 'steelblue'|
154 | 'tan'|
155 | 'teal'|
156 | 'thistle'|
157 | 'tomato'|
158 | 'turquoise'|
159 | 'violet'|
160 | 'wheat'|
161 | 'white'|
162 | 'whitesmoke'|
163 | 'yellow'|
164 | 'yellowgreen';
--------------------------------------------------------------------------------
/src/custom-types/css-properties.ts:
--------------------------------------------------------------------------------
1 | export type CssProperty =
2 | | 'color'
3 | | 'border'
4 | | 'margin'
5 | | 'fontStyle'
6 | | 'transform'
7 | | 'backgroundColor'
8 | | 'alignContent'
9 | | 'alignItems'
10 | | 'alignSelf'
11 | | 'all'
12 | | 'animation'
13 | | 'animationDelay'
14 | | 'animationDirection'
15 | | 'animationDuration'
16 | | 'animationFillMode'
17 | | 'animationIterationCount'
18 | | 'animationName'
19 | | 'animationPlayState'
20 | | 'animationTimingFunction'
21 | | 'backfaceVisibility'
22 | | 'background'
23 | | 'backgroundAttachment'
24 | | 'backgroundBlendMode'
25 | | 'backgroundClip'
26 | | 'backgroundColor'
27 | | 'backgroundImage'
28 | | 'backgroundOrigin'
29 | | 'backgroundPosition'
30 | | 'backgroundRepeat'
31 | | 'backgroundSize'
32 | | 'border'
33 | | 'borderBottom'
34 | | 'borderBottomColor'
35 | | 'borderBottomLeftRadius'
36 | | 'borderBottomRightRadius'
37 | | 'borderBottomStyle'
38 | | 'borderBottomWidth'
39 | | 'borderCollapse'
40 | | 'borderColor'
41 | | 'borderImage'
42 | | 'borderImageOutset'
43 | | 'borderImageRepeat'
44 | | 'borderImageSlice'
45 | | 'borderImageSource'
46 | | 'borderImageWidth'
47 | | 'borderLeft'
48 | | 'borderLeftColor'
49 | | 'borderLeftStyle'
50 | | 'borderLeftWidth'
51 | | 'borderRadius'
52 | | 'borderRight'
53 | | 'borderRightColor'
54 | | 'borderRightStyle'
55 | | 'borderRightWidth'
56 | | 'borderSpacing'
57 | | 'borderStyle'
58 | | 'borderTop'
59 | | 'borderTopColor'
60 | | 'borderTopLeftRadius'
61 | | 'borderTopRightRadius'
62 | | 'borderTopStyle'
63 | | 'borderTopWidth'
64 | | 'borderWidth'
65 | | 'bottom'
66 | | 'boxShadow'
67 | | 'boxSizing'
68 | | 'captionSide'
69 | | 'caretColor'
70 | | '@charset'
71 | | 'clear'
72 | | 'clip'
73 | | 'clipPath'
74 | | 'color'
75 | | 'columnCount'
76 | | 'columnFill'
77 | | 'columnGap'
78 | | 'columnRule'
79 | | 'columnRuleColor'
80 | | 'columnRuleStyle'
81 | | 'columnRuleWidth'
82 | | 'columnSpan'
83 | | 'columnWidth'
84 | | 'columns'
85 | | 'content'
86 | | 'counterIncrement'
87 | | 'counterReset'
88 | | 'cursor'
89 | | 'direction'
90 | | 'display'
91 | | 'emptyCells'
92 | | 'filter'
93 | | 'flex'
94 | | 'flexBasis'
95 | | 'flexDirection'
96 | | 'flexFlow'
97 | | 'flexGrow'
98 | | 'flexShrink'
99 | | 'flexWrap'
100 | | 'float'
101 | | 'font'
102 | | '@fontFace'
103 | | 'fontFamily'
104 | | 'fontKerning'
105 | | 'fontSize'
106 | | 'fontSizeAdjust'
107 | | 'fontStretch'
108 | | 'fontStyle'
109 | | 'fontVariant'
110 | | 'fontWeight'
111 | | 'grid'
112 | | 'gridArea'
113 | | 'gridAutoColumns'
114 | | 'gridAutoFlow'
115 | | 'gridAutoRows'
116 | | 'gridColumn'
117 | | 'gridColumnEnd'
118 | | 'gridColumnGap'
119 | | 'gridColumnStart'
120 | | 'gridGap'
121 | | 'gridRow'
122 | | 'gridRowEnd'
123 | | 'gridRowGap'
124 | | 'gridRowStart'
125 | | 'gridTemplate'
126 | | 'gridTemplateAreas'
127 | | 'gridTemplateColumns'
128 | | 'gridTemplateRows'
129 | | 'height'
130 | | 'hyphens'
131 | | '@import'
132 | | 'justifyContent'
133 | | '@keyframes'
134 | | 'left'
135 | | 'letterSpacing'
136 | | 'lineHeight'
137 | | 'listStyle'
138 | | 'listStyleImage'
139 | | 'listStylePosition'
140 | | 'listStyleType'
141 | | 'margin'
142 | | 'marginBottom'
143 | | 'marginLeft'
144 | | 'marginRight'
145 | | 'marginTop'
146 | | 'maxHeight'
147 | | 'maxWidth'
148 | | '@media'
149 | | 'minHeight'
150 | | 'minWidth'
151 | | 'objectFit'
152 | | 'objectPosition'
153 | | 'opacity'
154 | | 'order'
155 | | 'outline'
156 | | 'outlineColor'
157 | | 'outlineOffset'
158 | | 'outlineStyle'
159 | | 'outlineWidth'
160 | | 'overflow'
161 | | 'overflowX'
162 | | 'overflowY'
163 | | 'padding'
164 | | 'paddingBottom'
165 | | 'paddingLeft'
166 | | 'paddingRight'
167 | | 'paddingTop'
168 | | 'pageBreakAfter'
169 | | 'pageBreakBefore'
170 | | 'pageBreakInside'
171 | | 'perspective'
172 | | 'perspectiveOrigin'
173 | | 'pointerEvents'
174 | | 'position'
175 | | 'quotes'
176 | | 'right'
177 | | 'scrollBehavior'
178 | | 'tableLayout'
179 | | 'textAlign'
180 | | 'textAlignLast'
181 | | 'textDecoration'
182 | | 'textDecorationColor'
183 | | 'textDecorationLine'
184 | | 'textDecorationStyle'
185 | | 'textIndent'
186 | | 'textJustify'
187 | | 'textOverflow'
188 | | 'textShadow'
189 | | 'textTransform'
190 | | 'top'
191 | | 'transform'
192 | | 'transformOrigin'
193 | | 'transformStyle'
194 | | 'transition'
195 | | 'transitionDelay'
196 | | 'transitionDuration'
197 | | 'transitionProperty'
198 | | 'transitionTimingFunction'
199 | | 'userSelect'
200 | | 'verticalAlign'
201 | | 'visibility'
202 | | 'whiteSpace'
203 | | 'width'
204 | | 'wordBreak'
205 | | 'wordSpacing'
206 | | 'wordWrap'
207 | | 'writingMode'
208 | | 'zIndex'
209 | | (string & {});
210 |
--------------------------------------------------------------------------------
/src/custom-types/css-property-values.ts:
--------------------------------------------------------------------------------
1 | import { NamedColor } from './colors';
2 |
3 | // Create script to collect all the values, wherever posible.
4 | // Scrap https://dofactory.com/css/properties#list or other site, and get all single word options
5 |
6 | export type PickPropertyValuesSome string
`);
37 | });
38 |
39 | it('generateHtml() works for self closing tags', async () => {
40 | expect(generator.generateHtml(builders.img.b())).toEqual('