{"id":21691348,"url":"https://github.com/just214/styled-logs","last_synced_at":"2025-04-12T09:44:14.764Z","repository":{"id":40827510,"uuid":"97488936","full_name":"just214/styled-logs","owner":"just214","description":"Styled console.logs with modern JavaScript.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:39:26.000Z","size":1259,"stargazers_count":5,"open_issues_count":12,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T04:41:31.611Z","etag":null,"topics":["console-log","console-statements","javascript","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/just214.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.MD","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-17T14:59:39.000Z","updated_at":"2023-09-07T05:44:46.000Z","dependencies_parsed_at":"2023-02-05T01:40:12.726Z","dependency_job_id":null,"html_url":"https://github.com/just214/styled-logs","commit_stats":null,"previous_names":["gojutin/styled-logs"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Fstyled-logs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Fstyled-logs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Fstyled-logs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Fstyled-logs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/just214","download_url":"https://codeload.github.com/just214/styled-logs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550346,"owners_count":21122929,"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":["console-log","console-statements","javascript","typescript"],"created_at":"2024-11-25T17:37:34.996Z","updated_at":"2025-04-12T09:44:14.737Z","avatar_url":"https://github.com/just214.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Styled-Logs Icon](https://res.cloudinary.com/gojutin/image/upload/w_300/v1550798794/styled-logs/styled-logs-icon.png)\n\n# styled-logs\n\n### Styled console statements with modern JavaScript\n\n[![npm version](https://badge.fury.io/js/styled-logs.svg)](https://badge.fury.io/js/styled-logs) ![npm](https://img.shields.io/npm/dt/styled-logs.svg) ![NPM](https://img.shields.io/npm/l/styled-logs.svg) ![npm bundle size](https://img.shields.io/bundlephobia/min/styled-logs.svg)\n\nZero dependencies\n\nWritten in TypeScript (types included)\n\nInspired by [styled-components](https://www.styled-components.com/)\n\nStyled console statements are an experimental feature with limited browser support and even more limited documentation. Style rules do not always work as expected. Due to these limitations, results may vary. **Please use with caution.**\n\n## Installation\n\n`yarn add styled-logs` or `npm i styled-logs`\n\n## Basic Example\n\n```javascript\nimport styled from \"styled-logs\";\n\nconst Log = styled.log`\n  color: purple;\n  background: yellow;\n`;\n\nLog(\"I am a styled-log!\");\n```\n\n## Usage\n\n### Create your styled-log\n\nThis is done using a tagged templated literal to write your CSS styles.\n\n```javascript\nimport styled from \"styled-logs\";\n\nconst Log = styled.log`\n  color: purple;\n  background: yellow;\n  border: 2px solid purple;\n  padding: 5px;\n`;\n```\n\nThe `styled` method exposes three of the global console methods as properties of the method:\n\n`log`, `warn`, and `error`\n\n```javascript\nconst ErrorLog = styled.error`\n  color: tomato;\n  font-weight: bold;\n`;\n```\n\nThe latter three methods provide icons and additional styling provided by the browser:\n\n![Browser Console screenshot](https://res.cloudinary.com/gojutin/image/upload/v1550858634/styled-logs/console.png)\n\n### Use your styled-log\n\nThis is done using a tagged templated literal to write your CSS styles.\nThe `styled` method exposes three of the global console methods as properties of the method:\n\n```javascript\nLog(\"🎉 Yay!\");\n```\n\nYou can optionally use a tagged template literal, which can be used to pass dynamic values.\n\n```javascript\nlet name = \"LIJS\";\nLog`Hello ${name}!`;\n\n// This also works\nLog(`Hello ${name}!`);\n```\n\n### Extend your styled-log\n\nYou can also create a styled-log by extending from the styles of a previously defined instance. You do this by passing a previously defined instance to the `styled` method as an argument followed by your new styles in a tagged template literal. The styles will be merged and in the event of a conflict, the latest style will always be applied.\n\n```javascript\nconst Log = styled.log`\n  color: \"purple\";\n`;\n\nconst ExtendedLog = styled(Log)`\n  background: yellow;\n`;\n\n// ExtendedLog will have purple text\n// with a yellow background.\nExtendedLog(\"🎉 Yay...extended!\");\n```\n\n### Creating Dynamic Styles\n\nAdding dynamic styles is simple. You can include variables or expressions anywhere in your style declaration as long as they return a properly formatted string.\n\n```javascript\nconst error = false;\n\nconst Log = styled.log`\n  color: ${error ? \"tomato\" : \"green\"};\n`;\n\nconst Log2 = styled.log`\n  color: green;\n  ${() =\u003e show \u0026\u0026 `background: yellow`};\n`;\n\nconst log3 = styled.log`\n  color: green;\n  background: ${() =\u003e show \u0026\u0026 `purple`};\n`;\n```\n\n## Misc.\n\nAs if the syntax above is not weird enough, you can also define and execute a styled-logs method in a one-liner.\n\n```javascript\nstyled.log`\n  color: green;\n`(\"I am a green console statement!\");\n```\n\n## Syntax\n\nWhen defining your CSS styles, it's important to remember to use proper CSS syntax, which means finishing each declaration with a semicolon. This may not break your code in a simple situation, but you can definitely expect to see issues when trying to extend from styles or resolve expressions that are not formatted properly.\n\n```javascript\n// This may not break despite the missing\n// semicolon on the \"color:blue\" declaration.\n\nconst FirstLog = styled.log`\n  color: blue;\n`;\n\n// But, this will definitely break (silently).\nconst SecondLog = styled(FirstLog)`\n  border: 2px solid blue;\n`;\n```\n\n## Syntax Highlighting\n\nAny syntax highlighting extension that works for [styled-components](https://www.styled-components.com/) should work for this library as well.\n\n\u003ch2 id=\"ttl\"\u003eTagged Template Literals\u003c/h2\u003e\n\nIf you have never invoked a function with a template literal, it may look a little strange. `log`, `warn` and `error` are all methods of the `styled` object, but we are invoking them using the template literal syntax:\n\n```javascript\nstyled.log`\n  color: blue;\n`;\n```\n\nTurns out, this is a completely valid way of executing a JavaScript function. We are _tagging_ the template literal (string) with a function that is able to parse the string and any of its expressions (and variables). The tag function, when invoked with a template literal, will receive as arguments the template literal broken out into an array of strings along with all of its individual expressions and variables in sequential order.\n\nLearn more about tagged template literals from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals/) or [styled-components](https://www.styled-components.com/docs/advanced#tagged-template-literals).\n\nEnjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust214%2Fstyled-logs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjust214%2Fstyled-logs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust214%2Fstyled-logs/lists"}