{"id":13438290,"url":"https://github.com/krasimir/cssx","last_synced_at":"2025-04-08T13:04:26.012Z","repository":{"id":57210979,"uuid":"48946177","full_name":"krasimir/cssx","owner":"krasimir","description":"CSS in JavaScript","archived":false,"fork":false,"pushed_at":"2016-11-23T05:19:56.000Z","size":8005,"stargazers_count":1007,"open_issues_count":10,"forks_count":35,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-03-25T16:56:05.822Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://krasimir.github.io/cssx/","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/krasimir.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-01-03T13:14:05.000Z","updated_at":"2025-03-13T04:01:26.000Z","dependencies_parsed_at":"2022-09-01T08:21:41.119Z","dependency_job_id":null,"html_url":"https://github.com/krasimir/cssx","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krasimir%2Fcssx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krasimir%2Fcssx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krasimir%2Fcssx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krasimir%2Fcssx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krasimir","download_url":"https://codeload.github.com/krasimir/cssx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247847609,"owners_count":21006099,"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-07-31T03:01:04.291Z","updated_at":"2025-04-08T13:04:25.977Z","avatar_url":"https://github.com/krasimir.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# CSSX - CSS in JavaScript\n\n\u003e Generate and/or apply CSS with JavaScript. Try it out [here](http://krasimir.github.io/cssx/playground/try-it-out-bin/).\n\n---\n\n## Demos\n\n* [Transpilation process](http://krasimir.github.io/cssx/playground/try-it-out/) - you write JavaScript that contains CSSX and see AST, transpiled JavaScript and the produced CSS\n* [JS + HTML + output](http://krasimir.github.io/cssx/playground/try-it-out-bin/) - you write JavaScript that contains CSSX + HTML markup and see the result when the CSS is applied to the DOM\n* [JS + output](http://krasimir.github.io/cssx/) - same as a above but without changing the markup\n\n## Language:\n\n* [CSSX language](./docs/cssx-lang.md)\n\n## Editor Integration\n\n* [Vote for JetBrains integration](https://youtrack.jetbrains.com/issue/RUBY-18179)\n\n## Integration with other tools:\n\n* [JSS](https://github.com/jsstyles/jss) or alternatively [CSSX client-side library](./packages/cssx) ([download](./packages/cssx/lib) or `npm i cssx`)\n* [CSSX-transpiler](./packages/cssx-transpiler) ([download](./packages/cssx-transpiler/lib) or `npm i cssx-transpiler`)\n* [CSSX-CLI](./packages/cssx-cli) (`npm i cssx-cli -g`)\n* [Gulp plugin](./packages/gulp-cssx) (`npm i gulp-cssx -D`)\n* [Webpack loader](./packages/cssx-loader) (`npm i cssx-loader -D`)\n* [Meteor package](https://github.com/Quadric/meteor-cssx) (`meteor add quadric:cssx`)\n* [Browserify transform](./packages/browserify-cssx) (`npm i browserify-cssx -D`)\n* [CSSX component for React](https://github.com/krasimir/react-cssx)\n* [jspm integration](./playground/jspm)\n* [ESLint plugin](https://github.com/krasimir/eslint-plugin-cssx)\n* [Rollup plugin](./packages/rollup-plugin-cssx)\n\n## Plugins:\n\n* [CSSX plugins](./docs/plugins.md) - See how to create CSSX plugins or use PostCSS plugin collection together with CSSX.\n\n## Examples:\n\n* [Try it out](./playground/try-it-out-bin)\n* [Try it out (developer edition)](./playground/try-it-out)\n* [Basic](./playground/basic)\n* [Transpiling](./playground/transpiler)\n* [Transpiling with gulp](./playground/transpiler-gulp)\n* [Transpiling with webpack](./playground/transpiler-webpack)\n* [In React component](./playground/react)\n* [Using with jss](./playground/jss)\n* [(at build time) CSSX together with PostCSS and Autoprefixer](./playground/postcss)\n* [(at runtime in a browser) CSSX together with PostCSS and a plugin](./playground/postcss-in-browser)\n* [Bundling with jspm](./playground/jspm)\n\n---\n\n## Premise\n\nCSSX is not only about writing vanilla CSS in JavaScript. Even though you get this the main idea here is to have a good API for managing styles. CSSX doesn't inline styles so you keep your markup clean. It works directly with injected stylesheets. Here is a short example:\n\n```js\nfunction setStyles (fontSize, margin) {\n  return \u003cstyle\u003e\n    body {\n      font-size: {{ fontSize }}px;\n      line-height: {{ fontSize * 1.2 }}px;\n      margin: {{ margin }}px;\n    }\n  \u003c/style\u003e\n}\n\nvar sheet = cssx();\nsheet.add(setStyles(20, 6));\nsheet.add(\u003cstyle\u003e\n  p \u003e a {\n    text-decoration: none;\n    color: #F00;\n  }\n\u003c/style\u003e);\n```\n\nThe code above is transpiled into valid JavaScript that uses the [CSSX client-side library](./packages/cssx):\n\n```js\nfunction setStyles(fontSize, margin) {\n  return (function () {\n    var _3 = {};\n    _3['margin'] = margin + \"px\";\n    _3['line-height'] = fontSize * 1.2 + \"px\";\n    _3['font-size'] = fontSize + \"px\";\n    var _2 = [];\n\n    _2.push(['body', _3]);\n\n    return _2;\n  }.apply(this));\n}\n\nvar sheet = cssx();\nsheet.add(setStyles(20, 6));\nsheet.add((function () {\n  var _6 = {};\n  _6['color'] = '#F00';\n  _6['text-decoration'] = 'none';\n  var _5 = [];\n\n  _5.push(['p \u003e a', _6]);\n\n  return _5;\n}.apply(this)));\n```\n\nAnd it results in the following CSS:\n\n```css\nbody {\n  margin: 6px;\n  line-height: 24px;\n  font-size: 20px;\n}\np \u003e a {\n  color: #F00;\n  text-decoration: none;\n}\n```\n\n---\n\n## How to use CSSX\n\n* CSSX could be considered a pattern where we dynamically create CSS stylesheets and control their content with JavaScript. The bare minimum is including [CSSX client-side library](./packages/cssx) on the page. Doing that you'll have an access to the [top level API](https://github.com/krasimir/cssx/tree/master/packages/cssx#top-level-api). The same library is published to npm so `npm install cssx -S`.\n* If you want to use the [CSS-ish syntax](https://github.com/krasimir/cssx/blob/master/docs/cssx-lang.md) in JavaScript then you'll need the [transpiler](./packages/cssx-transpiler). It's a available as a [standalone](https://github.com/krasimir/cssx/blob/master/packages/cssx-transpiler/lib/cssx-transpiler.min.js) file, but it's not recommended using it in the browser. What you should do is integrating the transpiler in your build process.\n\n---\n\n## Testing\n\n```\nnpm test\n```\n\nor if you want to run the tests continuously\n\n```\nnpm run test-watch\n```\n\nor if you want to run the tests in a debug mode\n\n```\nnpm run test-debug\n```\n\n---\n\n## Building\n\n```\nnpm i\nnpm run make\n```\n\n---\n\n## Developing\n\n```\nnpm i\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrasimir%2Fcssx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrasimir%2Fcssx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrasimir%2Fcssx/lists"}