{"id":16403941,"url":"https://github.com/siddharthkp/css-constructor","last_synced_at":"2025-09-08T08:31:47.803Z","repository":{"id":66101305,"uuid":"76137951","full_name":"siddharthkp/css-constructor","owner":"siddharthkp","description":"💄 CSS constructor for React components","archived":false,"fork":false,"pushed_at":"2017-10-03T16:11:50.000Z","size":970,"stargazers_count":99,"open_issues_count":4,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-27T12:18:12.716Z","etag":null,"topics":["css-in-js","decorators","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/jl5jp0y5nw","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/siddharthkp.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-12-10T21:12:08.000Z","updated_at":"2023-03-04T05:48:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"4e4b9a4a-0f86-49dc-8f64-0eb2d8edf21c","html_url":"https://github.com/siddharthkp/css-constructor","commit_stats":{"total_commits":76,"total_committers":2,"mean_commits":38.0,"dds":0.02631578947368418,"last_synced_commit":"a55e568f8ba2b21de74e47e8c641e748e30de9cd"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddharthkp%2Fcss-constructor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddharthkp%2Fcss-constructor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddharthkp%2Fcss-constructor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddharthkp%2Fcss-constructor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siddharthkp","download_url":"https://codeload.github.com/siddharthkp/css-constructor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232292033,"owners_count":18500594,"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","decorators","react"],"created_at":"2024-10-11T05:50:49.010Z","updated_at":"2025-01-03T04:48:11.128Z","avatar_url":"https://github.com/siddharthkp.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![CSS constructor for React](https://raw.githubusercontent.com/siddharthkp/css-constructor/master/header.png)\n\n\u0026nbsp;\n\nEvery React component gets an inbuilt javascript constructor for functional logic.\n\n**Introducing the css constructor for styling!**\n\n\u0026nbsp;\n\u0026nbsp;\n\n```jsx\nimport React from 'react';\nimport css from 'css-constructor';                  // 👶 Super tiny: only 1.2K gzipped!\n\nexport default class Hello extends React.Component {\n\n    /* javascript constructor */\n    constructor (props) {\n        super(props);\n    }\n\n    /* css constructor */                           \n    @css`                                           // 🔒 Isolated and co-located\n        font-size: 16px;                            \n        text-align: center;                         // 🎀 Supports the entirety of CSS\n\n        color: {this.props.color};                  // 🔥 Use props in css\n\n        display: flex;                              // 💻 Built in vendor prefixing\n\n        \u0026:hover {                                   // 🌀 Pseudo selectors\n            color: #FFF;\n        }\n\n        img {                                       // 👪 Nested css\n            border-radius: 50%;\n        }\n        #handle {\n            margin-top: 20px;\n        }\n\n        @media (max-width: 600px) {                 // 📱 Media queries support\n            \u0026 {font-size: 18px;}\n        }\n    `\n\n    render () {\n        return (\u003cdiv\u003e                               // 🔼 Attaches class to the highest element\n            \u003cimg src=\"https://github.com/siddharthkp.png\"/\u003e\n            \u003cdiv id=\"handle\"\u003e@siddharthkp\u003c/div\u003e\n        \u003c/div\u003e)\n    }\n};\n\n// \u003cHello color='papayawhip'/\u003e\n\n```\n\n--\n\n**Other features**\n\n🙋 Uses classes instead of inline styles\n\n🔧 Editable in developer tools\n\n👶 Super tiny: only 1.2K gzipped!\n\n💄 Official library emoji\n\n*Coming soon*\n\n🌏 server side rendering\n\n--\n\n#### Usage\n\n1. `npm install css-constructor --save`\n\n2. `import css from 'css-constructor'`\n\n3. Add a `@css` block **just before** the `render` function (important)\n\n4. Add `transform-decorators-legacy` as the first `plugin` in your `.babelrc` (already downloaded with 💄).\n\nIf you are not familiar with `babel plugins` you can follow the [detailed instructions here.](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy#installation--usage)\n\nOr, if you would prefer using 💄 without adding the babel transform for decorators, [up-vote this issue](https://github.com/siddharthkp/css-constructor/issues/1).\n\n--\n\n#### How does it work?\n\n💄 uses [ES7 class method decorators](https://github.com/wycats/javascript-decorators) on the render function.\nDetailed post coming soon.\n\n#### Inspiration\n\nHeavily inspired from [glamor](https://github.com/threepointone/glamor), [styled-components](https://github.com/styled-components/styled-components) and [radium](https://github.com/FormidableLabs/radium)\n\nSpecial thanks to [thysultan](https://twitter.com/thysultan). [stylis](https://github.com/thysultan/stylis.js) is the bomb!\n\n#### Support\n\n⭐️ this repo!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddharthkp%2Fcss-constructor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiddharthkp%2Fcss-constructor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddharthkp%2Fcss-constructor/lists"}