{"id":18185047,"url":"https://github.com/jaandrle/css-in-console","last_synced_at":"2025-07-17T05:42:04.875Z","repository":{"id":65623766,"uuid":"595164382","full_name":"jaandrle/css-in-console","owner":"jaandrle","description":"Naive and simplistic styling of terminal text using “CSS”. Provides `console.log`/… alternatives with partial `%c` support.","archived":false,"fork":false,"pushed_at":"2025-01-14T08:52:27.000Z","size":85,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T18:13:19.475Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/css-in-console","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaandrle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-30T14:30:54.000Z","updated_at":"2025-01-14T08:52:25.000Z","dependencies_parsed_at":"2024-04-24T16:27:21.392Z","dependency_job_id":"7f47e2aa-32e4-4c45-bf90-f9433d70c59e","html_url":"https://github.com/jaandrle/css-in-console","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fcss-in-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fcss-in-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fcss-in-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fcss-in-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaandrle","download_url":"https://codeload.github.com/jaandrle/css-in-console/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246697913,"owners_count":20819462,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-02T22:05:48.748Z","updated_at":"2025-04-01T23:31:02.149Z","avatar_url":"https://github.com/jaandrle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"```js\nimport { log, style } from \"css-in-console\";\nconst css= style`\n\t@import \"./example.css\";\n\t.h1{ color: red; }\n\t.h1::before{ content: \"# \"; }\n\t.li{ display: list-item; }\n\t.b{ font-weight: bold;}\n`;\nlog(\"%cHeading 1\", css.h1);\nlog(\"%cParagraph \u0026 code style –\", css.p,\n\t\"let's say they are defined in the file %c`./example.css`%c.\",\n\tcss.code, css.unset);\nlog(\"UL %c↓%c:\", \"color:green\", css.unset);\nlog(\"%cLI (by default %cstarts%c with `- `)\",\n\tcss.li, css.b, css.unset,\n\t\"…you can use `list-style-type` to change it.\"\n);\n```\n# css-in-console\n`css-in-console` is a library that allows you to style terminal outputs\nin JavaScript/TypeScript code using a CSS-like syntax. Primarily, this can be used\nto apply certain text formatting and its colors. Furthermore, some additional\nCSS structures are also supported (see below).\n\nThe library offers alternatives to native functions `console.log`/`util.format`/….\nIn the exported functions (`log`/`error`/`format`/`formatWithOptions`), you can apply\nstyling according to [Styling console output](https://developer.mozilla.org/en-US/docs/Web/API/console#styling_console_output).\n\n## Installation\nYou can install the `css-in-console` library using your favorite package manager.\n\nFor example, with npm:\n\n```sh\nnpm install css-in-console --save\n```\n\nIf you are OK with only basic styling (no at-rules, …), you can use the [1.x.y version](https://github.com/jaandrle/css-in-console/tree/v1):\n```sh\nnpm install css-in-console@1 --save\n```\n\n\n## Usage\n\nFirst, you need to import the required functions from the `css-in-console` library:\n\n```javascript\nimport { format, formatWithOptions, log, error, style } from 'css-in-console';\n// OR\nimport log from 'css-in-console';\n```\n\n### Basic usage\nYou can use the `log` and `error` functions to print styled messages to the console. For example:\n\n```javascript\nlog(\"%cRed text\", \"color:red\");\nerror(\"%cGreen text\", \"color:green\");\n```\n…or prepare formatted text:\n```javascript\nconsole.log(format(\"%cBlue text\", \"color:blue\"));\nconsole.log(formatWithOptions({ colors: true }, \"%cBlue text\", \"color:blue\"));\n```\n\nThe exported functions process the CSS (`%c` expression) in the first step and then return to the corresponding native functions:\n- `log`/`error` ⇒ [`console.log`](https://nodejs.org/api/console.html#consolelogdata-args)/[`console.error`](https://nodejs.org/api/console.html#consoleerrordata-args)\n- `format`/`formatWithOptions` ⇒ [`util.format`](https://nodejs.org/api/console.html#consoleerrordata-args)/[`util.formatWithOptions`](https://nodejs.org/api/util.html#utilformatwithoptionsinspectoptions-format-args)\n\n\u003e …**Important consequence**: `%c` is processed firstly so instead of `log(\"%i%c\", 5, \"color:red\")` you must reorder arguments and so use `log(\"%i%c\", \"color:red\", 5)`!\n\u003e (`log(\"%i%c\", A, B)` ⇒ `console.log(\"%i★\", B)`, where ★ is text with apllied styling or empty depends on `A`)\n\n### Defining CSS-like rules\nYou can also use the `style`/`css` or `log.style`/`log.css` helpers to prepare styling rules (they are aliases for the same function).\nOriginally, there was only `style`, but other options (mainly `log.css`) seem to be convenient when you want to use `css` variable and use syntax highlight in your editor, e.g.:\n- [jonsmithers/vim-html-template-literals](https://github.com/jonsmithers/vim-html-template-literals)\n- [es6-string-css - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=bashmish.es6-string-css)\n```js\nconst css= log.css`\n\t.example{ color: red; }\n`;\nlog(\"%cExample\", css.example);\n```\n\n## Documentation and Examples\nFor library documentation and examples, see:\n- [documentation](./docs/README.md) (generated from TypeScript definition file)\n- [examples](./examples)\n\nIn the following we will introduce the supported CSS constructs.\nBeware of using ‘real’ CSS! Treat the syntax more like keywords, the library is not intended to implement a CSS parser.\nCSS at-rules and selectors are supported only when used in `style`/`css`/`log.css` functions.\n\n### CSS at-rules\nThis library mimic [At-rules | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) behaviour\nand supports:\n\n- \u003cdetails\u003e \u003csummary\u003e\u003ccode\u003e@import\u003c/code\u003e — To include an external style sheet. (\u003ci\u003eexpand for more\u003c/i\u003e)\u003c/summary\u003e\n\n\tSupported syntax is only `@import 'url';`, you can provide full path or relative to main script (internally uses `argv[1]`).\n\t```javascript\n\tconst importedStyles = style(\"@import './styles.css'\");\n\t```\n\t…there is also another limitation, the `@import` is supported **only inside `style`/`css`/`log.css` functions**.\n\n\tFor original documentation visits [@import - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).\n\t\u003c/details\u003e\n- \u003cdetails\u003e \u003csummary\u003e\u003ccode\u003e@media\u003c/code\u003e — To provide styles when terminal (not) supports “colors”. (\u003ci\u003eexpand for more\u003c/i\u003e)\u003c/summary\u003e\n\n\t…so, only `color` is supported:\n\t```css\n\t@media (color){ … }\n\t@media not (color){ … }\n\t```\n\t…in case of terminal the `color` means [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code). Meaning, colors and font styling.\n\t\n\tFor original documentation visits [@media - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media).\n\n\t*Note 1: Experimentaly, you can use `(--terminal-stdout)`/`not (--terminal-stdout)` to style terminal stdout/stderr output differently.*\n\t\n\t*Note 2: Also logical CSS keywords (`and`/`or`) are experimentaly supported. Eg. `@media (color) and (not (--terminal-stdout))…`.*\n\t\u003c/details\u003e\n- \u003cdetails\u003e \u003csummary\u003e\u003ccode\u003e@counter-style\u003c/code\u003e — To define specific counter styles that are not part of the predefined set of styles. (\u003ci\u003eexpand for more\u003c/i\u003e)\u003c/summary\u003e\n\n\tThe implementation in this library is very similar to the specification.\n\t```css\n\t@counter-style thumbs {\n\t\tsystem: cyclic;\n\t\tsymbols: 👍;\n\t\tsuffix: \" \";\n\t}\n\t.li {\n\t\tdisplay: list-item;\n\t\tlist-style: thumbs;\n\t}\n\t```\n\n\tYou can utilize the `symbols`, `suffix`, `prefix`, `pad`, and `negative`\n\tproperties in a manner similar to the CSS specification.\n\n\tAdditionally, you can specify `system` values of `fixed`, `cyclic`, `numeric`\n\tand `alphabetic`, just like in CSS. Furthermore, you can use library-specific\n\t`--terminal-*` systems such as `--terminal-datetime` (`--terminal-date` and\n\t`--terminal-time`) as illustrated in the `list-style` examples below.\n\tThe cyclic `⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏` symbols are available through\n\tthe `--terminal-spin` property.\n\n\tPredefined counters include `decimal` and `--terminal-*` (`datetime`/`date`/`time` and `spin`).\n\n\t```javascript\n\tlog(\"%c@counter-style\", `display: list-item;\n\t\tlist-style: decimal`); //= 1. @counter-style\n\tlog(\"%c@counter-style\", `display: list-item;\n\t\tlist-style: --terminal-spin`); //= ⠋ @counter-style\n\tlog(\"%c@counter-style\", `display: list-item;\n\t\tlist-style: --terminal-datetime`); //= 2023-05-05T10:28:18.696 @counter-style\n\tlog(\"%c@counter-style\", `display: list-item;\n\t\tlist-style: --terminal-date`); //= 2023-05-05 @counter-style\n\tlog(\"%c@counter-style\", `display: list-item;\n\t\tlist-style: --terminal-time`); //= 10:28:18.697 @counter-style\n\t```\n\t…you can extend these with `extend` syntax `system: extend --terminal-time;`.\n\n\tTo utilize `--terminal-*` date and time counters, you can use `--terminal-mask: \u003csymbols\u003e \u003cmask\u003e;`.\n\tSymbols contains two characters (first/second represents ‘remove’/‘keep’), see example:\n\t```\n\t--terminal-mask: \"01\" \"111111CSS001\"\n\t```\n\t…this mask applied to “Hello World!” leads to “Hello CSS!”.\n\t\n\tFor more information, see:\n\t- [some examples `./examples/counter-style.js`](./examples/counter-style.js)\n\t- [@counter-style - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style).\n\t- [counter() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/counter)\n\t\u003c/details\u003e\n\n### CSS selectors\nClasses are the preferred selectors because they are intuitive as object properties:\n```javascript\nconst css= log.css`\n\t.example{ … }\n`;\nlog(\"%cExample\", css.example);\n```\n…it is also convenient not to use *kebab-case* names.\n\nTechnically, it is possible to use ID selectors and HTML elements. But these are escaped\nusing `.replaceAll(/[\\.#]/g, \"\")` and (so far?) no practical effect from using them.\n\nIn term of pseudo-elements, only [`::before`/`::after`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after) are supported.\n\nOther CSS selectors are not supported (and probably have no use in the terminal).\n\n### CSS rules\nAs mentioned above, mostly more keywords than syntax.\n*You can use `initial` value to sets the initial value of any property.*\n\u003e - Rules marked with {★} are ignored when the colors are not supported.\n\u003e - Rules marked with {!::} are **not** supported for `::before`/`::after`.\n\n- `color: \u003ccolor\u003e` / `background: \u003ccolor\u003e` {★}: see [supported colors](./docs/README.md#css_colors)\n- `margin-left: \u003cnumber\u003e` / `margin-right: \u003cnumber\u003e` {!::}: inserts spaces before/after the string. Measurements `\u003cnumber\u003e\u003cmeasurement\u003e` can also be used (e.g. `ch` makes sense). But in the post-processing is ignored.\n- `padding-left: \u003cnumber\u003e` / `padding-right: \u003cnumber\u003e` {!::}: For now just alias for `margin-*`\n- `font-style: italic` {★}\n- `font-weight: bold` {★}\n- `text-decoration: underline|line-through` {★}\n- `animation: blink` {★}\n- `tab-size: \u003cnumber\u003e` {!::}: all tabs will be replaced with given number of spaces (default: 7)\n- `display: none` {★}\n- `display: list-item` {!::}: basic implementation of [list-style-type - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)\n\t- `list-style-type: \"\u003cstring\u003e\"`: defaults to `\"- \"`\n\t- `list-style-type: \u003ccounter\u003e` (see `@counter-style` above)\n\t- `list-style: *`: just an alias for `list-style-type`\n- `content: *`: supported only for `::before` and `::after`, library implements only basic of [content - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/content)\n\t- `content: \"\u003cstring\u003e\"`\n\t- `content: \u003ccounter/string combination\u003e`: you can use [`counter()`](https://developer.mozilla.org/en-US/docs/Web/CSS/counter)\n- [`counter-increment`](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment): only `\u003ccounter\u003e`/`\u003ccounter\u003e \u003cinteger\u003e` values are supported\n- [`counter-reset`](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset): only `\u003ccounter\u003e`/`\u003ccounter\u003e \u003cinteger\u003e` values are supported\n\n## Options under consideration for next release(s)\n- somehow determine dark/light background ⇒ `@media (prefers-color-scheme: dark)` (similarly for `light`)\n- `width`/`text-overflow`/`white-space`\n- `display:block` ⇒ append \"\\n\"?\n- `text-align`\n- another pseudo-elements e.g. `::first-letter`, `::marker`, …\n- another at-rules e.g. `@supports`, …\n- `display:table`/`display:table-row`: more likely not, there are better ways to use (for example [console.table - npm](https://www.npmjs.com/package/console.table))\n- `position:absolute`/`position:fixed`: starts rewritable mode + `@keyframes`/`animation` (for spinners, progress bars, etc.) … more likely not\n- `margin-*`/`padding-*`: now work the same\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaandrle%2Fcss-in-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaandrle%2Fcss-in-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaandrle%2Fcss-in-console/lists"}