← Home | css-in-console
▸ format(message?, ...optionalParams): string
This is extended version of format whith CSS-like styling support. So all format features supported, e. g.:
format('%s:%s', 'foo', 'bar', 'baz');
// Returns: 'foo:bar baz'In additional you can use Styling console output:
format("%cRed", "color:red");…supported rules: css_rules.
| Name | Type | Description |
|---|---|---|
message? |
any |
The text to print. |
...optionalParams |
any[] |
- |
string
▸ formatWithOptions(inspectOptions, format?, ...param): string
This is extended version of formatWithOptions whith CSS-like styling support. So, it is similar to format.
formatWithOptions({ colors: true }, "%cRed", "color:red");| Name | Type | Description |
|---|---|---|
inspectOptions |
InspectOptions |
Argument which specifies options that are passed along to inspect. |
format? |
any |
- |
...param |
any[] |
- |
string
▸ style(...styles): Record<string, string>
This is helper function to predefine CSS-like rules for being used with log/formatWithOptions/format/….
const css= style(".red { color: red; }", ".blue { color: blue; }");
log("%cRed text", css.red);
log("%cBlue text", css.blue);…there is special style name * which applies to all defined classes:
const css= style("* { font-weight: bold; }", ".red { color: red; }", ".blue { color: blue; }");
log("%cRed and bold text", css.red);
log("%cBlue and bold text", css.blue);…you can also import css file:
const css= style("@import './file.css'");| Name | Type |
|---|---|
...styles |
(`.${string}{ @import "${string}" }` | `.${string}{ display: none; }` | `.${string}{ display: list-item; }` | `.${string}{ color: black; }` | `.${string}{ color: red; }` | `.${string}{ color: green; }` | `.${string}{ color: yellow; }` | `.${string}{ color: blue; }` | `.${string}{ color: magenta; }` | `.${string}{ color: cyan; }` | `.${string}{ color: white; }` | `.${string}{ color: gray; }` | `.${string}{ color: lightred; }` | `.${string}{ color: lightgreen; }` | `.${string}{ color: lightyellow; }` | `.${string}{ color: lightblue; }` | `.${string}{ color: lightmagenta; }` | `.${string}{ color: lightcyan; }` | `.${string}{ color: whitesmoke; }` | `.${string}{ background: black; }` | `.${string}{ background: red; }` | `.${string}{ background: green; }` | `.${string}{ background: yellow; }` | `.${string}{ background: blue; }` | `.${string}{ background: magenta; }` | `.${string}{ background: cyan; }` | `.${string}{ background: white; }` | `.${string}{ background: gray; }` | `.${string}{ background: lightred; }` | `.${string}{ background: lightgreen; }` | `.${string}{ background: lightyellow; }` | `.${string}{ background: lightblue; }` | `.${string}{ background: lightmagenta; }` | `.${string}{ background: lightcyan; }` | `.${string}{ background: whitesmoke; }` | `.${string}{ margin-left: ${number}; }` | `.${string}{ margin-right: ${number}; }` | `.${string}{ text-decoration: underline }` | `.${string}{ text-decoration: line-through }` | `.${string}{ list-style-type: ${string} }` | `.${string}{ unset: all; }` | `.${string}{ font-style: italic; }` | `.${string}{ font-weight: bold; }` | `.${string}{ animation: blink; }`)[] |
Record<string, string>
▸ style(...styles): Record<string, string>
You can use it aslo as template function:
const css= style`
@import "./file.css";
.red{ color: red; }
`;| Name | Type |
|---|---|
...styles |
cssTemplate |
Record<string, string>
▸ log(message?, ...optionalParams): void
This is extended version of log whith CSS-like styling support.
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3) (the arguments are all passed to util.format()).
log('%s:%s', 'foo', 'bar', 'baz');
log('count: %d', 5);In additional you can use Styling console output:
log("%cRed", "color:red");…supported rules: css_rules. Also (see Log):
log.css`*{ color: red; }`| Name | Type |
|---|---|
message? |
any |
...optionalParams |
any[] |
void
▸ error(message?, ...optionalParams): void
This is extended version of error whith CSS-like styling support.
Prints to stderr with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3) (the arguments are all passed to util.format()).
log('%s:%s', 'foo', 'bar', 'baz');
log('count: %d', 5);In additional you can use Styling console output:
log("%cRed", "color:red");…supported rules: css_rules. Also (see Log):
error.css`*{ color: red; }`| Name | Type |
|---|---|
message? |
any |
...optionalParams |
any[] |
void
▸ css(...styles): Record<string, string>
An alias for style. It can be helpful for your editor to detect css syntaxt in "css`…`", see:
const c= css`
@import "./file.css";
.red{ color: red; }
`;| Name | Type |
|---|---|
...styles |
(`.${string}{ @import "${string}" }` | `.${string}{ display: none; }` | `.${string}{ display: list-item; }` | `.${string}{ color: black; }` | `.${string}{ color: red; }` | `.${string}{ color: green; }` | `.${string}{ color: yellow; }` | `.${string}{ color: blue; }` | `.${string}{ color: magenta; }` | `.${string}{ color: cyan; }` | `.${string}{ color: white; }` | `.${string}{ color: gray; }` | `.${string}{ color: lightred; }` | `.${string}{ color: lightgreen; }` | `.${string}{ color: lightyellow; }` | `.${string}{ color: lightblue; }` | `.${string}{ color: lightmagenta; }` | `.${string}{ color: lightcyan; }` | `.${string}{ color: whitesmoke; }` | `.${string}{ background: black; }` | `.${string}{ background: red; }` | `.${string}{ background: green; }` | `.${string}{ background: yellow; }` | `.${string}{ background: blue; }` | `.${string}{ background: magenta; }` | `.${string}{ background: cyan; }` | `.${string}{ background: white; }` | `.${string}{ background: gray; }` | `.${string}{ background: lightred; }` | `.${string}{ background: lightgreen; }` | `.${string}{ background: lightyellow; }` | `.${string}{ background: lightblue; }` | `.${string}{ background: lightmagenta; }` | `.${string}{ background: lightcyan; }` | `.${string}{ background: whitesmoke; }` | `.${string}{ margin-left: ${number}; }` | `.${string}{ margin-right: ${number}; }` | `.${string}{ text-decoration: underline }` | `.${string}{ text-decoration: line-through }` | `.${string}{ list-style-type: ${string} }` | `.${string}{ unset: all; }` | `.${string}{ font-style: italic; }` | `.${string}{ font-weight: bold; }` | `.${string}{ animation: blink; }`)[] |
Record<string, string>
▸ css(...styles): Record<string, string>
An alias for style. It can be helpful for your editor to detect css syntaxt in "css`…`", see:
const c= css`
@import "./file.css";
.red{ color: red; }
`;| Name | Type |
|---|---|
...styles |
cssTemplate |
Record<string, string>
Ƭ css_colors: "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "gray" | "lightred" | "lightgreen" | "lightyellow" | "lightblue" | "lightmagenta" | "lightcyan" | "whitesmoke"
Ƭ css_rules: `@import "${string}"` | "unset: all;" | `display: ${"none" | "list-item"};` | `color: ${css_colors};` | `background: ${css_colors};` | `margin-${"left" | "right"}: ${number};` | "font-style: italic;" | "font-weight: bold;" | `text-decoration: ${"underline" | "line-through"}` | `list-style-type: ${string}` | "animation: blink;"
Ƭ cssTemplate: [css_text: TemplateStringsArray, css_vars: string[]]
See css_rules