{"id":15365931,"url":"https://github.com/andywer/stylesmith","last_synced_at":"2025-08-12T00:41:59.879Z","repository":{"id":66057879,"uuid":"53155847","full_name":"andywer/stylesmith","owner":"andywer","description":"Small zero-dependency library to use ES6 tagged template strings for component styling.","archived":false,"fork":false,"pushed_at":"2016-03-06T15:27:28.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T16:55:44.523Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/andywer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2016-03-04T18:09:30.000Z","updated_at":"2016-12-07T17:18:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"db56dac5-f6b8-470e-a6d9-34cc71e264cb","html_url":"https://github.com/andywer/stylesmith","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fstylesmith","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fstylesmith/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fstylesmith/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fstylesmith/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andywer","download_url":"https://codeload.github.com/andywer/stylesmith/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250497024,"owners_count":21440244,"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-10-01T13:16:44.235Z","updated_at":"2025-04-23T19:20:16.405Z","avatar_url":"https://github.com/andywer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stylesmith\n\n[![Build Status](https://travis-ci.org/andywer/stylesmith.svg?branch=master)](https://travis-ci.org/andywer/stylesmith)\n[![Code Climate](https://codeclimate.com/github/andywer/stylesmith/badges/gpa.svg)](https://codeclimate.com/github/andywer/stylesmith)\n[![NPM Version](https://img.shields.io/npm/v/stylesmith.svg)](https://www.npmjs.com/package/stylesmith)\n\nStylesmith is a small zero-dependency library to use ES6 tagged **template strings**\nfor component styling. It's primary purpose is to be used alongside with **React.js** and **Radium**.\n\nInspired by [React: CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js)\nand [Radium](https://github.com/FormidableLabs/radium)'s enhanced style objects (':hover', '@media' keys and similar).\n\n\n## Usage with React / Radium\n\n```javascript\nimport React, { Component } from 'react'\nimport style from 'stylesmith'\nimport { colors } from './my-theme'\n\n/*\n * You can use any JS variable in the template string style. Trailing semicolons are optional.\n * Pass strings or numbers as style rule values.\n * Pass an object to merge its styles.\n */\nconst buttonStyle = style`\n  background: ${colors.green}\n  color: ${colors.white}\n  margin: 10 20\n  padding: 10%\n\n  :hover {\n    background: ${colors.blue}\n  }\n\n  @media print {\n    display: none\n  }\n`\n\nexport default class Button extends Component {\n  render () {\n    return (\n      \u003cbutton style={buttonStyle}\u003e{this.props.children}\u003c/button\u003e\n    )\n  }\n}\n```\n\nBy the way: You can have trailing semicolons like in CSS, too. But they are optional.\n\n```javascript\nstyle`\n  background: ${colors.green};\n  color: ${colors.white};\n  margin: 20px;\n\n  :hover {\n    background: ${colors.blue};\n  }\n`\n```\n\n\n## Installation\n\nUsing NPM:\n\n```bash\nnpm install --save stylesmith\n```\n\nUsing JSPM:\n\n```bash\njspm install stylesmith\n```\n\n\n## What happens here?\n\n```javascript\nstyle`\n  margin: 10\n  color: ${color.white}\n\n  :hover {\n    text-decoration: underline\n    ${anotherStyle}\n  }\n`\n\n// returns this object:\n\n{\n  margin: 10,\n  color: color.white,\n  ':hover': Object.assign({\n    'text-decoration': 'underline'\n  }, anotherStyle)\n}\n```\n\nLooks much friendlier, doesn't it? And no more CSS class name crazyness!\nThe styles you define here are only applied to the elements you render with\nthe `style` property set to it.\n\n\n## Why would I need that?\n\nAs [vjeux](https://twitter.com/Vjeux) points out in his popular talk\n[React: CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js), CSS styling\ncomes with some built-in troubles. Some of them can pretty easy be come over by\nusing a pre-processor like SASS or LESS (like variables).\n\nBut other problems persist and cannot easily be solved using stylesheets, such\nas the fact that CSS only knows one global scope. So you have to be very careful\nhow to write your CSS selectors in order to not have them style things they are\nnot supposed to and avoid naming clashes.\n\nReact's inline style objects provide a simple, yet powerful solution for the\nproblem. Radium extends the concept by introducing nested ':hover', ':active',\n'@media', ... objects.\n\nThe only problem is now that these objects tend to look quite unpleasant. Using\nES6 template strings you can now write them just as a block of CSS rules and insert\n`${variable}` where you need to.\n\nProper styling, easy and powerful. And you do not even have to preprocess your\nstyles anymore!\n\n\n## Known Limitations\n\nSince this is the first release, there are some known issues right now:\n\n- Selector and opening braces (like `:hover {`) must be on the same line\n- Closing braces must be on a separate line\n\n\n## License\n\nLicensed under the terms of the MIT license. See file [LICENSE](https://github.com/andywer/stylesmith/blob/master/LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fstylesmith","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandywer%2Fstylesmith","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fstylesmith/lists"}