{"id":15585532,"url":"https://github.com/eveningkid/pretty-components","last_synced_at":"2025-09-11T00:35:35.562Z","repository":{"id":57330102,"uuid":"134059764","full_name":"eveningkid/pretty-components","owner":"eveningkid","description":"Prop-based styled components","archived":false,"fork":false,"pushed_at":"2018-05-19T12:52:33.000Z","size":15,"stargazers_count":43,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T06:51:11.307Z","etag":null,"topics":["css-in-js","javascript","react","style","styled-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eveningkid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-19T12:27:05.000Z","updated_at":"2023-08-08T09:20:50.000Z","dependencies_parsed_at":"2022-08-29T04:30:19.053Z","dependency_job_id":null,"html_url":"https://github.com/eveningkid/pretty-components","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/eveningkid%2Fpretty-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eveningkid%2Fpretty-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eveningkid%2Fpretty-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eveningkid%2Fpretty-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eveningkid","download_url":"https://codeload.github.com/eveningkid/pretty-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250560501,"owners_count":21450244,"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","javascript","react","style","styled-components"],"created_at":"2024-10-02T21:01:40.421Z","updated_at":"2025-04-24T04:19:21.767Z","avatar_url":"https://github.com/eveningkid.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🌈 Pretty Components\nProp-based styled components.\n- React components props as selectors\n- Sass nested styles\n- Use variables\n- Generate readable class names (Button, Button--is-selected, ...)\n\n## Install\n- `yarn add pretty-components`\n- [Add support for `.pss` files using Webpack](https://github.com/eveningkid/pretty-loader)\n\n```scss\n// Hello.pss\n\nHello {\n  border: 2px solid yellow;\n  background: $background;\n\n  ::isSelected {\n    \u0026:hover {\n      border-color: purple;\n    }\n  }\n\n  ::size {\n    ::small {\n      font-size: 12px;\n    }\n\n    ::big {\n      font-size: 16px;\n    }\n  }\n}\n\n// Will generate the following\n.Hello\n.Hello__is-selected\n.Hello__size--small\n.Hello__size--big\n\n// For a nameless component, use \":root\" instead of \"Hello\";\n// it will generate a random identifier\n```\n\n![Pretty, pretty, pretty good](https://media.giphy.com/media/d2jjIRvGomz6GMkU/giphy.gif)\n\n## Why?\nIf you want to apply prop-based styles to your React components so far, you either need to:\n- write css classes, then manually map them to each state of our component props  \n  `if prop.isSelected, add 'is-selected' css class`\n- use expressions (with css-in-js) inside style literals  \n  `${props =\u003e props.isSelected ? 'blue' : 'red'}`\n\n**Now, let's think for one second: do we have any additional logic for mapping our element to `hover` styles only when it'll be hovered?** Of course we don't, because we already acknowledge that writing `:hover` makes it conditionally styled, based on our element's state.  \n\n**The idea here is similar: making props part of that state, right inside our style declaration.**\n\n## Link Style to its Component\n```jsx\nimport React from 'react';\nimport { style } from 'pretty-components';\nimport styles from './Hello.pss'; // only possible when using Webpack\n\nfunction Hello(props) {\n  return \u003ch1 className={props.className}\u003e{props.children}\u003c/h1\u003e;\n}\n\n// or even simpler\n// const Hello = style('h1', styles);\n\nexport default style(Hello, styles);\n\n// later\n\u003cHello size=\"big\"\u003eHello World\u003c/Hello\u003e\n```\n\n## Set variables\n```js\nimport { styleVariables } from 'pretty-components';\n\n// This code needs to be called before any other `pretty-components`'d\n// component code is called.\nstyleVariables({\n  background: 'red', // will be available as $background in every stylesheet\n  // ...\n});\n```\n\n## How to Use without Webpack\nWithout Webpack —at least for now, you won't be able to directly use PSS syntax.\nWhat the Webpack loader actually do is transforming PSS syntax into vanilla javascript code:\n```js\nimport { stylesheet } from 'pretty-components-formatter';\n\nexport default stylesheet('Hello', {\n  border: '2px solid yellow',\n  background: '$background',\n  _isSelected: {\n    '\u0026:hover': {\n      borderColor: 'purple',\n    }\n  },\n  _size: {\n    _small: {\n      fontSize: 12,\n    },\n    _big: {\n      fontSize: 16,\n    }\n  }\n});\n```\n\n## License\n[eveningkid](https://twitter.com/eveningkid) @ MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feveningkid%2Fpretty-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feveningkid%2Fpretty-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feveningkid%2Fpretty-components/lists"}