import { log, style } from "css-in-console";
const css= style`
	@import "./example.css";
	.h1{ color: red; }
	.h1::before{ content: "# "; }
	.li{ display: list-item; }
	.b{ font-weight: bold;}
`;
log("%cHeading 1", css.h1);
log("%cParagraph & code style –", css.p,
	"let's say they are defined in the file %c`./example.css`%c.",
	css.code, css.unset);
log("UL %c↓%c:", "color:green", css.unset);
log("%cLI (by default %cstarts%c with `- `)",
	css.li, css.b, css.unset,
	"…you can use `list-style-type` to change it."
);

css-in-console

This library provides extended alternatives to native functions such as console.log/util.format/…. For log/error/format/formatWithOptions functions, you can use Styling console output.

The exported functions process the CSS (%c expression) in the first step and then return to the corresponding native functions:

• log/error ⇒ console.log/console.error
• format/formatWithOptions ⇒ util.format/util.formatWithOptions

…Important consequence: %c is processed firstly so indestead of log("%i%c", 5, "color:red") you must reorder arguments and so use log("%i%c", "color:red", 5)!

You can also use the style/css or log.style/log.css helpers to prepare styling rules (they are aliases for the same function). Beware of using ‘real’ CSS! Treat the syntax more like keywords, the library is not intended to implement a CSS parser. Originally, 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.:

• jonsmithers/vim-html-template-literals
• es6-string-css - Visual Studio Marketplace

const css= log.css`
	.example{ color: red; }
`;
log("%cExample", css.example);

For more information see:

• documentation (generated from TypeScript definition file)
  • css_rules: supported CSS rules
  • css_colors: supported CSS colors
• examples

Options under consideration for next release(s)

• support (some) functions/keywords for content/list-style-type (+ add custom such as ‘timestamp’/‘date’/‘time’)
• @media … (color) …?
• width/text-overflow/white-space
• display:block ⇒ append "\n"?
• text-align
• another pseudo-elements e.g. ::first-letter, ::marker, …
• another at-rules e.g. @counter-style, @supports, …
• display:table/display:table-row: more likely not, there are better ways to use (for example console.table - npm)
• position:absolute/position:fixed: starts rewritable mode + @keyframes/animation (for spinners, progress bars, etc.) … more likely not
• margin-*/padding-*: now work the same