{"id":23577096,"url":"https://github.com/buildbreakdo/style-it","last_synced_at":"2025-04-05T14:05:20.858Z","repository":{"id":37692808,"uuid":"61068952","full_name":"buildbreakdo/style-it","owner":"buildbreakdo","description":"Component for writing plaintext CSS in React apps -- isomorphic, scoped, FOUC-free, fully featured, CSS-in-JS","archived":false,"fork":false,"pushed_at":"2022-12-08T23:17:21.000Z","size":2161,"stargazers_count":159,"open_issues_count":16,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-17T10:03:44.866Z","etag":null,"topics":["css-in-js","cssinjs","isomorphic","react","reactjs"],"latest_commit_sha":null,"homepage":"","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/buildbreakdo.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}},"created_at":"2016-06-13T20:53:55.000Z","updated_at":"2024-03-19T21:03:26.000Z","dependencies_parsed_at":"2022-08-31T04:10:38.238Z","dependency_job_id":null,"html_url":"https://github.com/buildbreakdo/style-it","commit_stats":null,"previous_names":["buildbreakdo/reactive-style","buildbreakdo/scoped-css"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildbreakdo%2Fstyle-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildbreakdo%2Fstyle-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildbreakdo%2Fstyle-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildbreakdo%2Fstyle-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buildbreakdo","download_url":"https://codeload.github.com/buildbreakdo/style-it/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246187233,"owners_count":20737462,"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":["css-in-js","cssinjs","isomorphic","react","reactjs"],"created_at":"2024-12-26T22:19:30.674Z","updated_at":"2025-03-29T13:06:08.210Z","avatar_url":"https://github.com/buildbreakdo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# \u003cimg alt=\"Style It\" height=\"60\" src=\"https://s3.amazonaws.com/style-it/style-it.svg\" /\u003e\nStyle It is a component for writing plaintext CSS in JavaScript apps. Use the same\nfamiliar CSS syntax you already know and love -- now inside of your components.\n\n[\u003cimg title=\"Version\" src=\"https://img.shields.io/npm/v/style-it.svg?style=flat-square\" /\u003e](https://www.npmjs.org/package/style-it) [\u003cimg title=\"Maintenance Status\" src=\"https://img.shields.io/badge/status-maintained-brightgreen.svg?style=flat-square\" /\u003e](https://github.com/buildbreakdo/style-it/pulse) [\u003cimg title=\"Build Status\" src=\"https://travis-ci.org/buildbreakdo/style-it.svg?branch=master\" /\u003e](https://travis-ci.org/buildbreakdo/style-it/) [![Coverage Status](https://coveralls.io/repos/github/buildbreakdo/style-it/badge.svg?branch=master)](https://coveralls.io/github/buildbreakdo/style-it?branch=master)\n\nQuestion, issue, or request? [Open an issue](https://github.com/buildbreakdo/style-it/issues) or [reach out on gitter](https://gitter.im/Style-It/Lobby).\n\n| Feature               | Style It | Inline Style |           |\n| :-------------------- | :------------: | :----------: | :--------- |\n| Nothing\u0026nbsp;new to learn | \u0026#10004;       |              | With Style It, you use the same familiar CSS syntax you already know and love -- now inside of your components. Just wrap your component with Style It and start writing CSS. |\n| Fully featured        | \u0026#10004;       |              | There is no abstraction to go through -- Style It is just CSS. Use any CSS feature available. |\n| Scoped selectors      | \u0026#10004;       |              | Move your CSS out of the global name space. Style It automatically scopes selectors for you to the component's root element and acts as a polyfill for sub-tree scoping (learn more on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped)). |\n| [Layout styling](#layout-styling) | \u0026#10004;       |              | Style your layout without using an external CSS file. Style It makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles. |\n\n\n\u003cp align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#user-content-more-features\"\u003eSEE MORE \u0026raquo;\u003c/a\u003e\u003c/b\u003e\n\u003c/p\u003e\n\n### Installation\n\nInstall with npm.\n\n```sh\nnpm install style-it --save\n```\n[![NPM Stats](https://nodei.co/npm/style-it.png?downloads=true)](https://npmjs.org/package/style-it)\n\nAlternatively, if you are not using npm as your package manager the files can be downloaded directly from the [npm content delivery network](https://unpkg.com/style-it/).\n\n### Usage\nStyle It takes advantage of ES2015 / ES6 specification for Template Literals (previously \"template strings\") to write plaintext CSS in JavaScript. Use of Template Literals enables multi-line strings, string interpolation, and use of curley brackets / braces to declare CSS rules.\n\nTemplate Literals are enclosed by the back-tick (\\` \\`) (grave accent) character instead of double or single quotes. Learn more about Template Literals on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).\n\n#### Functional syntax [\u003cimg title=\"OPEN IN JSFIDDLE\" align=\"right\" src=\"https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg\" /\u003e](https://jsfiddle.net/9ckvkeec/1/)\n\nIn:\n```js\nimport React from 'react';\nimport Style from 'style-it';\n\nclass Intro extends React.Component {\n  render() {\n    return Style.it(`\n      .intro {\n        font-size: 40px;\n      }\n    `,\n      \u003cp className=\"intro\"\u003eCSS-in-JS made simple -- just Style It.\u003c/p\u003e\n    );\n  }\n}\n\nexport default Intro;\n```\n\nOut:\n```html\n\u003cp class=\"intro _scoped-1\"\u003e\n  \u003cstyle type=\"text/css\"\u003e\n    ._scoped-1.intro {\n      font-size: 40px;\n    }\n  \u003c/style\u003e\n\n  CSS-in-JS made simple -- just Style It.\n\u003c/p\u003e\n```\n\n#### JSX syntax [\u003cimg title=\"OPEN IN JSFIDDLE\" align=\"right\" src=\"https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg\" /\u003e](https://jsfiddle.net/8mjcqv6e/1/)\n\nIn:\n```js\nimport React from 'react';\nimport Style from 'style-it';\n\nclass Intro extends React.Component {\n  render() {\n    return (\n      \u003cStyle\u003e\n        {`\n          .intro {\n            font-size: 40px;\n          }\n        `}\n\n        \u003cp className=\"intro\"\u003eCSS-in-JS made simple -- just Style It.\u003c/p\u003e\n      \u003c/Style\u003e\n    );\n  }\n}\n\nexport default Intro;\n```\n\nOut:\n```html\n\u003cp class=\"intro _scoped-1\"\u003e\n  \u003cstyle type=\"text/css\"\u003e\n    ._scoped-1.intro {\n      font-size: 40px;\n    }\n  \u003c/style\u003e\n\n  CSS-in-JS made simple -- just Style It.\n\u003c/p\u003e\n```\n\n#### Component with Component Root Node [\u003cimg title=\"OPEN IN JSFIDDLE\" align=\"right\" src=\"https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg\" /\u003e](https://jsfiddle.net/2vo4yov4/1/)\nLet's say we have two components `ParentComponent` and `ChildComponent` defined as follows (note the root node in the `ParentComponent` is another component):\n\n```js\n...\nclass ParentComponent extends Component {\n    render() {\n        return (\n            \u003cChildComponent\u003e\n                \u003cp\u003e Some stuff \u003c/p\u003e\n            \u003c/ChildComponent\u003e\n        )\n    }\n}\n...\n```\n\n```js\n...\nclass ChildComponent extends Component {\n    render() {\n        return (\n            \u003cdiv\u003e\n                {this.props.children}\n            \u003c/div\u003e\n        )\n    }\n}\n...\n```\n\nThe child component is a typical passthrough component, that takes the props (in this case `\u003cp\u003e Some stuff \u003c/p\u003e`) and renders them.\n\nA core feature of Style It are scopes, you do not have to worry about global CSS name collisions because each CSS rule is scoped to it's own sub-tree (poly-like fill for [scoped attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped)). To achieve this, a scoping className is added. This works automagically when component root nodes are types like `\u003cdiv\u003e`, `\u003cspan\u003e`, `\u003cp\u003e`, etc. When the root node of a component is another component, this becomes a much more tricky problem because it is not known how deep the component root node nesting will go (e.g., multiple passthrough components composed inside of one another).\n\nFor this reason, components which serve as root nodes for other components must have their `className` attribute set to `this.props.className` to have the CSS scoping class name properly set (without the scope class name CSS styles will not apply). So the ChildComponent (since it is used as a root node in the ParentComponent) becomes:\n\n```js\n...\nclass ChildComponent extends Component {\n    render() {\n        return (\n            \u003cdiv className={this.props.className}\u003e\n                {this.props.children}\n            \u003c/div\u003e\n        )\n    }\n}\n...\n```\n\nSo all we added was an explicit className assignment from props (this snippet `className={this.props.className}`). Would argue that this is best practices anyway for a component that can be a root node; likely should use the spread operator (e.g., `{...this.props}`) to cover all your bases and include events a would be user of your component may attach.\n\nIf you would like to play with this scenario online, you can [open this example in JSFIDDLE](https://jsfiddle.net/pk9L2j4d/1/).\n\n### Additional Usage\n\n#### JavaScript variables in your CSS [\u003cimg title=\"OPEN IN JSFIDDLE\" align=\"right\" src=\"https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg\" /\u003e](https://jsfiddle.net/jw9hpfxm/1/)\nIn:\n```js\nimport React from 'react';\nimport Style from 'style-it';\n\nclass Intro extends React.Component {\n  render() {\n    const fontSize = 13;\n\n    return Style.it(`\n      .intro {\n        font-size: ${ fontSize }px;  // ES2015 \u0026 ES6 Template Literal string interpolation\n      }\n      .package {\n        color: blue;\n      }\n      .package:hover {\n        color: aqua;\n      }\n    `,\n      \u003cp className=\"intro\"\u003eCSS-in-JS made simple -- just Style It.\u003c/p\u003e\n    );\n  }\n}\n\nexport default Intro;\n```\n\nOut:\n```html\n\u003cp class=\"intro _scoped-1\"\u003e\n  \u003cstyle type=\"text/css\"\u003e\n    ._scoped-1.intro {\n      font-size: 13px;\n    }\n    ._scoped-1 .package {\n      color: blue;\n    }\n    ._scoped-1 .package:hover {\n      color: aqua;\n    }\n  \u003c/style\u003e\n\n  CSS-in-JS made simple -- just Style It.\n\u003c/p\u003e\n```\n\n#### Layout styling[\u003cimg title=\"OPEN IN JSFIDDLE\" align=\"right\" src=\"https://img.shields.io/badge/OPEN%20IN%20JSFIDDLE--eaeff2.svg\" /\u003e](https://jsfiddle.net/r3hhzaze/1/)\nStyle your layout without using an external CSS file. Style It makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles (uses JSX syntax).\n\nIn:\n```js\nimport React from 'react';\nimport Style from 'style-it';\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cStyle\u003e\n          {`\n            body {\n              font-size: small;\n              font-family: arial;\n            }\n            h1 {\n              font-size: large;\n            }\n            h2 {\n              font-size: medium;\n            }\n            h3 {\n              font-size: small;\n            }\n            a {\n              color: blue;\n            }\n            a:hover {\n              color: aqua;\n            }\n         `}\n        \u003c/Style\u003e\n\n        \u003cheader /\u003e\n        \u003cmain /\u003e\n        \u003cfooter /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\nOut:\n```html\n\u003cdiv\u003e\n  \u003cstyle type=\"text/css\"\u003e\n    body {\n      font-size: small;\n      font-family: arial;\n    }\n    h1 {\n      font-size: large;\n    }\n    h2 {\n      font-size: medium;\n    }\n    h3 {\n      font-size: small;\n    }\n    a {\n      color: blue;\n    }\n    a:hover {\n      color: aqua;\n    }\n  \u003c/style\u003e\n\n  \u003cheader\u003e\u003c/header\u003e\n  \u003cmain\u003e\u003c/main\u003e\n  \u003cfooter\u003e\u003c/footer\u003e\n\u003c/div\u003e\n```\n### More Features\n\n| Feature                                   | Style It    | Inline Style |            |\n| :----------------------------------------- | :---------------: | :----------: | :--------- |\n| Increase cohesion     | \u0026#10004;       | \u0026#10004;     | Self contained and complete components. With Style It there is no need to fragment your component by creating an external CSS file when you need to use pseudo-classes, pseudo-selectors, at-media rules, or one of Reacts unsupported vendor prefixes (like flexbox or cursor grab). |\n| Write less code       | \u0026#10004;       |              | Use the right tool for the right job. With Style It the full power of CSS is available so we can stop reimplementing CSS language features like `:hover` and `nth-of-type` in JavaScript. |\n| Faster build times                        | \u0026#10004;          | \u0026#10004;     | Remove the preprocessor middle man -- this is just CSS. Style It brings back the simplicity of writing CSS and removes the need for managing and executing a build step. |\n| Increase readability                      | \u0026#10004;          |              | Maintain the simplicity, symmetry, and beauty of HTML's open and close syntax. With Style It you can achieve cohesion and clean separation while still bringing component concerns together as a single self-contained unit of code. |\n| Isomorphic                                | \u0026#10004;          | \u0026#10004;     | Style It is completely isomorphic and renders the same markup on server and client. |\n| Increase new\u0026nbsp;hire productivity | \u0026#10004;          | \u0026#10004;     | On boarding of new developers is quick and easy with Style It -- there is nothing new to learn. Get your new developers styling today! |\n| Better workflow                           | \u0026#10004;          |              | Better workflow, a classic workflow. Not often we are able to say that, because Style It requires no transformations to your CSS you can make adjustments in your browser and simply copy and paste the style rules into your component. |\n| Easily\u0026nbsp;portable                           | \u0026#10004;          |              | By simply being CSS Style It makes porting styles elsewhere easy with no special syntax or quirks to transform. |\n| Share styles                              | \u0026#10004;          | \u0026#10004;     | Easily share styles across multiple components by leveraging JavaScript import notation you already know.|\n| Small size                                |                   |              | Style It is tiny at only 1.84kB gzipped. |\n| Better composition                        | \u0026#10004;          |              | More easily evaluate when to break down a component. CSS complexity is an oft forgotten input when evaluating component complexity (+selectors, +pseudo states). Unifying HTML-CSS-JS in one place ensures CSS complexity is a part of your -- when should I decompose -- equation. |\n\n### Behind The Scenes (bonus)\n\n#### How scopes work\nTo isolate styles Style It iterates over child component prop data and generates a hash that is used as a scoping class. Preference would be to use `Math.random()` however HTML rendered on the server would not be identical to the HTML rendered on the client. Use of `Math.random()` would create a server-client mismatch and benefits of the serverside render would be lost. Working within these constraints, Style It collects child component props and hashes them to generate a -- unique as possible -- identifier on client and server. Relative to how iterating through children is historically done, by going to the DOM and reading values, React allows us to perform this operation incredibly fast by leveraging the component hierarchy already held in memory. The hash of the prop data is then used to create a class name (e.g., _scope-472614893) which is automatically prefixed to selectors for you.\n\n#### Optimization\nFirm believer in Don Knuth's Literate Programmer movement: 'the most important function of computer code is to communicate the programmer's intent to a human reader' and that we should not prematurely optimize; optimizations tend to vary and be scenario specific, making code less idiomatic and obtuse, bad for readability and maintainability.\n\nPoint being: _You probably do not need to worry about this section._\n\nThat said, every usage scenario cannot be predicted, so an escape hatch is built into the library. If performance is sluggish this is potentially due to class name scope thrashing. Prop data used to create the class name scope is changing quickly causing the DOM sub-tree to rerender (e.g., live data). To tell Style It to ignore this prop during hash generation mark the prop as internal by prefixing `_` to the prop name (e.g, `_someProp`).\n\nProps like `value` on `\u003cinput /\u003e` and `\u003ctextarea /\u003e` are automatically ignored, as are props internal to React (they are not idempotent and change from server to client).\n\n\n### License\n[MIT](LICENSE). Copyright © 2016-present Joshua Robinson.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildbreakdo%2Fstyle-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuildbreakdo%2Fstyle-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildbreakdo%2Fstyle-it/lists"}