{"id":19839953,"url":"https://github.com/alekseykulikov/injected-css","last_synced_at":"2025-10-26T22:48:07.754Z","repository":{"id":19501611,"uuid":"85590107","full_name":"alekseykulikov/injected-css","owner":"alekseykulikov","description":"{:;} CSS in JS","archived":false,"fork":false,"pushed_at":"2022-12-07T09:49:01.000Z","size":255,"stargazers_count":17,"open_issues_count":8,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T23:47:33.567Z","etag":null,"topics":["cssinjs","postcss"],"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/alekseykulikov.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":"2017-03-20T14:57:41.000Z","updated_at":"2023-07-11T01:17:05.000Z","dependencies_parsed_at":"2022-09-15T10:01:55.217Z","dependency_job_id":null,"html_url":"https://github.com/alekseykulikov/injected-css","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/alekseykulikov%2Finjected-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseykulikov%2Finjected-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseykulikov%2Finjected-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseykulikov%2Finjected-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alekseykulikov","download_url":"https://codeload.github.com/alekseykulikov/injected-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251932540,"owners_count":21667161,"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":["cssinjs","postcss"],"created_at":"2024-11-12T12:24:57.720Z","updated_at":"2025-10-26T22:48:02.737Z","avatar_url":"https://github.com/alekseykulikov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"793\" alt=\"{:;} injected-css\" src=\"https://cloud.githubusercontent.com/assets/158189/25124387/d92cd514-242b-11e7-9cc7-91ad902a7d7e.png\"\u003e\n\n[![](https://circleci.com/gh/alekseykulikov/injected-css.svg?style=shield)](https://circleci.com/gh/alekseykulikov/injected-css)\n[![](https://img.shields.io/npm/v/injected-css.svg)](https://npmjs.com/package/injected-css)\n[![](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003e Structured way to write CSS in JS file.\n\n## Usage\n\nInstall the package:\n\n```bash\n$ npm install injected-css\n```\n\nAdd `injected-css/babel` to plugins section in your babel config:\n\n```json\n{\n  \"plugins\": [\n    \"injected-css/babel\"\n  ]\n}\n```\n\nDefine real CSS in your JS file using *css`{}`* template expression,\nand refer to resulted classes using `style` object.\n\n```js\nimport { css } from 'injected-css'\nimport { red, white, mobile } from '../my-theme' // use js variables\n\nconst style = css`\n  text-align: center;\n\n  \u0026-button {\n    background-color: ${red};\n    width: 32rem;\n    padding: 2rem;\n    border-radius: 0.5rem;\n    border: none;\n\n    \u0026:hover {\n      background-color: ${white};\n    }\n\n    @media ${mobile} {\n      width: 16rem;\n    }\n  }\n`\n\ndocument.innerHTML = `\n  \u003cdiv class=\"${style}\"\u003e\n    \u003cbutton class=\"${style.button}\"\u003eClick me!\u003c/button\u003e\n  \u003c/div\u003e\n`\n```\n\nIt transforms to:\n\n```js\nimport { css } from 'injected-css';\nimport { red, white, mobile } from '../my-theme';\n\nconst style = css.inject({\n  toString() { return 'c3423985940'; },\n  button: 'c3423985940-button',\n  _css: `.c3423985940 { text-align: center } .c3423985940-button { background-color: ${red}; width: 32rem; padding: 2rem; border-radius: 0.5rem; border: none\n  } .c3423985940-button:hover { background-color: ${white} } @media ${mobile} { .c3423985940-button { width: 16rem } }`  \n});\n\ndocument.innerHTML = `\n  \u003cdiv class=\"${style}\"\u003e\n    \u003cbutton class=\"${style.button}\"\u003eClick me!\u003c/button\u003e\n  \u003c/div\u003e\n`;\n```\n\n## Benefits\n\n- Write **real CSS** and use JS for import/export, variables and dynamic strings\n- Use powerful tools of JS world\n  - ES modules to manage dependencies between styles and JS components\n  - Eslint to ensure, it's hard to write bad CSS\n  - Variables and functions\n  - Webpack 2, Hot Module Replacement, code splitting, and server side render\n- Built-in naming convention for component world\n- Postcss integration ([100s of plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md) and custom syntaxes like SASS)\n- Minimal overhead (no parsing cost, 400 byte runtime)\n\n## Custom postcss config\n\nJust create `.postcssrc.js` file with content similar to ([read more about postcss config](https://github.com/michael-ciniawsky/postcss-load-config)):\n\n```js\nmodule.exports = (ctx) =\u003e ({\n  plugins: [\n    require('postcss-cssnext')({ 'features': { 'rem': false } }),\n    ctx.env === 'production' ? require('cssnano')({ autoprefixer: false }) : false\n  ]\n})\n\n```\n\n## Inject global styles\n\nUse `inject()` method to insert global `css` string.\nEverything tagged literal with _css``_ will be preparsed with postcss.\n\n```js\nimport { inject, css } from 'injected-css'\nimport normalizeCss from 'normalize.css'\nimport { mobile } from '../my-theme';\n\n// insert regular css, like normalize.css\n\ninject(normalize)\n\n// setup global typography\n\ninject(css`\n  html {\n    font-family: \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\n    font-weight: normal;\n    font-size: 62.5%; /* 1rem ~ 10px */\n\n    @media ${mobile} {\n      font-size: 56.25%; /* 1rem ~ 9px */\n    }\n  }\n`)\n```\n\n## Server side render\n\nUse `flush()` method to get all css calls.\n\n```js\nimport { flush } from 'injected-css'\nimport { App } from './App'\n\nconst body = renderToStaticMarkup(\u003cApp /\u003e)\nconst css = reset._css + flush().join('')\n\nconst html = `\n  \u003c!doctype html\u003e\n  \u003chtml lang='en-US'\u003e\n    \u003chead\u003e      \n      \u003ctitle\u003eMy App\u003c/title\u003e\n      \u003cstyle\u003e${css}\u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      ${body}\n    \u003c/body\u003e\n  \u003c/html\u003e\n`\n\nconst reset = inject(css`\n  html {\n    -ms-text-size-adjust: 100%;\n    -webkit-text-size-adjust: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  body {\n    margin: 0;\n  }\n`)\n```\n\n## Syntax highlight\n\n**Atom** with [language-babel](https://github.com/gandm/language-babel) plugin supports syntax highlight and autocompletion by default.\n\u003cimg width=\"434\" alt=\"atom-language-babel\" src=\"https://cloud.githubusercontent.com/assets/158189/24708649/c7530534-1a17-11e7-845a-d2319a78504a.png\"\u003e\n\n## Credits\n\n- [BEM](https://css-tricks.com/bem-101/) and [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) - for name convention, [that works](https://gist.github.com/alekseykulikov/68a5d6ddae569f6d0456b0e9d603e892)\n- [CSS modules](https://github.com/css-modules/css-modules) - for embracing CSS syntax and adding the way to reference on classes from JS code\n- [style-loader](https://github.com/webpack-contrib/style-loader) - for concept of loading styles with js\n- [styled-jsx](https://github.com/zeit/styled-jsx) - for idea of babel plugin and this credits section\n- [@rtsao](https://github.com/rtsao) - for his open-source work on many css-in-js libraries\n- [styling](https://github.com/andreypopp/styling) - for embracing ES modules to export CSS\n- [react](https://facebook.github.io/react/) - for component approach and development philosophy\n- [CSS: The Definitive Guide](http://shop.oreilly.com/product/0636920012726.do) - for explaining me details of CSS\n- [styled-components](https://github.com/styled-components/styled-components) - for showing how to highlight CSS in tagged template literal\n\n## License\n\n[MIT]('./LICENSE')\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekseykulikov%2Finjected-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falekseykulikov%2Finjected-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekseykulikov%2Finjected-css/lists"}