{"id":14969940,"url":"https://github.com/yandex/reshadow","last_synced_at":"2025-04-06T06:13:06.901Z","repository":{"id":42214797,"uuid":"151359934","full_name":"yandex/reshadow","owner":"yandex","description":"Markup and styles that feel right","archived":false,"fork":false,"pushed_at":"2023-03-04T03:19:27.000Z","size":3356,"stargazers_count":363,"open_issues_count":51,"forks_count":13,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-30T05:07:18.482Z","etag":null,"topics":["css","css-in-js","css-modules","htm","preact","react","shadow-dom","vue"],"latest_commit_sha":null,"homepage":"https://reshadow.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yandex.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-03T04:19:39.000Z","updated_at":"2025-03-11T21:19:20.000Z","dependencies_parsed_at":"2024-06-18T15:15:03.083Z","dependency_job_id":"a556ca77-5b6f-4f28-bd2d-b1b6b3748d8e","html_url":"https://github.com/yandex/reshadow","commit_stats":{"total_commits":298,"total_committers":10,"mean_commits":29.8,"dds":0.2214765100671141,"last_synced_commit":"bea40a2078cac6340858324dd65c8e3f0ceb2c49"},"previous_names":["lttb/reshadow"],"tags_count":92,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freshadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freshadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freshadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freshadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yandex","download_url":"https://codeload.github.com/yandex/reshadow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441059,"owners_count":20939239,"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","css-in-js","css-modules","htm","preact","react","shadow-dom","vue"],"created_at":"2024-09-24T13:42:43.603Z","updated_at":"2025-04-06T06:13:06.881Z","avatar_url":"https://github.com/yandex.png","language":"JavaScript","readme":"# reshadow ⛱️\n\n![Github Actions](https://github.com/lttb/reshadow/workflows/ci/badge.svg)\n[![Coverage Status branch](https://img.shields.io/coveralls/lttb/reshadow/master.svg)](https://img.shields.io/coveralls/lttb/reshadow/master.svg?branch=master)\n[![npm version](https://img.shields.io/npm/v/reshadow.svg)](https://www.npmjs.com/package/reshadow)\n[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg)](https://github.com/kentcdodds/babel-plugin-macros)\n\n### Markup and styles that feel right.\n\nPlease check the [reshadow.dev](https://reshadow.dev) website to get more information and examples.\n\n**reshadow** provides the Shadow DOM developer experience, but for the Virtual DOM with the Component way.\n\n```javascript\nimport React from 'react';\nimport styled, {css} from 'reshadow';\n\n// Write styles:\nconst styles = css`\n    button {\n        width: 200px;\n    }\n    content {\n        font-size: 14px;\n    }\n`;\n\nexport const Button = ({children, ...props}) =\u003e {\n    // connect the styles to the markup:\n    return styled(styles)(\n        \u003cbutton {...props}\u003e\n            \u003ccontent as=\"span\"\u003e{children}\u003c/content\u003e\n        \u003c/button\u003e,\n    );\n};\n```\n\n\u003e This project has `alpha` status, so the API and the implementation could be changed.\n\n## Features\n\n-   Get away from additional abstractions\n    -   Write isolated semantic styles for the Virtual DOM in a native like way\n    -   Match styles on the elements, components, and props. That's all you need\n-   Compile-time styles processing and efficient runtime\n-   Static styles extracting options\n-   Static analysis\n-   Combine the `css-in-js` and `css-modules` approaches or choose which fits you better\n-   All the benefits of the PostCSS ecosystem\n-   Interoperable. Use it with components in [React](https://github.com/facebook/react), [Preact](https://github.com/developit/preact/), [Vue](https://github.com/vuejs/vue), [htm](https://github.com/developit/htm/).\n\nThere are some examples on the [Сodesandbox](https://codesandbox.io):\n\n-   [React (create react app)](https://codesandbox.io/s/reshadowcra-9o9nq388wp)\n-   [Preact](https://codesandbox.io/s/reshadowpreact-nn1se)\n-   [Vue](https://codesandbox.io/s/reshadowvue-53df0)\n-   [htm](https://codesandbox.io/s/reshadowhtm-x1ves)\n-   [svelte](https://codesandbox.io/s/reshadowsvelte-bup1c)\n-   [next.js (with server side rendering)](https://codesandbox.io/s/reshadownextjs-h4or9)\n\n### Benchmarks\n\nThere are also some css-in-js benchmarks, that are available on the codesandbox.\n\n[![reshadow benchmarks](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/cssinjsbenchmarks-yin1g)\n\n## Docs\n\n-   [Usage](#usage)\n-   Setup\n    -   [macro](#macro)\n    -   [babel](#babel)\n    -   [postcss](#postcss)\n    -   [webpack](#webpack)\n-   [Linting](#linting)\n\n```sh\nnpm i --save reshadow\n```\n\n_.babelrc_\n\n```json\n{\"plugins\": [\"reshadow/babel\"]}\n```\n\n\u003e Check the [Setup](https://reshadow.dev/setup) page to get more details (including setup with Create React App)\n\n## Example\n\n```js\nimport React from 'react';\nimport styled from 'reshadow';\n```\n\n```js\nimport {readableColor, rgba} from 'polished';\n\nconst Button = ({\n    bgcolor = 'lightgray',\n    size = 's',\n    children,\n    ...props\n}) =\u003e styled`\n    button {\n        cursor: pointer;\n        padding: 5px 10px;\n        border-radius: 5px;\n        border: 2px solid ${bgcolor};\n        background-color: ${rgba(bgcolor, 0.7)};\n        color: ${readableColor(bgcolor)};\n        transition: background-color 0.5s;\n\n        \u0026:hover {\n            background-color: ${rgba(bgcolor, 0.9)};\n        }\n    }\n\n    /**\n     * Match on the 'disabled' prop,\n     * not the DOM attribute\n     **/\n    button[disabled] {\n        opacity: 0.5;\n        pointer-events: none;\n    }\n\n    /**\n     * Match on the 'use:size' prop\n     */\n    button[use|size='s'] {\n        font-size: 12px;\n    }\n\n    /* The 'use' namespace can be omitted */\n    button[|size='m'] {\n        font-size: 14px;\n    }\n`(\n    /* use:size property would not pass to the DOM */\n    \u003cbutton {...props} use:size={size}\u003e\n        {children}\n    \u003c/button\u003e,\n);\n```\n\n```js\nconst Container = () =\u003e styled`\n    Button + Button {\n        margin-left: 10px;\n    }\n`(\n    \u003cdiv\u003e\n        \u003cButton size=\"m\" bgcolor=\"lightgray\"\u003e\n            lightgray\n        \u003c/Button\u003e\n        \u003cButton size=\"m\" bgcolor=\"orange\"\u003e\n            orange\n        \u003c/Button\u003e\n        \u003cButton size=\"m\" bgcolor=\"rebeccapurple\"\u003e\n            rebeccapurple\n        \u003c/Button\u003e\n    \u003c/div\u003e,\n);\n```\n\n![buttons](docs/assets/2019-03-07-12-46-01.png)\n\n## Usage\n\n### css-modules\n\n_Button/index.js_\n\n```js\nimport React from 'react';\nimport styled from 'reshadow';\n\nimport styles from './styles.css';\n\nexport const Button = ({size, children}) =\u003e styled(styles)(\n    \u003cbutton use:size={size}\u003e{children}\u003c/button\u003e,\n);\n```\n\n_Button/styles.css_\n\n```css\nbutton {\n    /* button styles */\n}\nbutton[|size='m'] {\n    /* button styles for the size */\n}\n```\n\n### css-in-js\n\n```js\nimport React from 'react';\nimport styled, {css} from 'reshadow';\n\nconst anotherStyles = css`\n    button[disabled] {\n        /* disabled button styles */\n    }\n`;\n\nexport const Button = ({size, children}) =\u003e styled(\n    props.another \u0026\u0026 anotherStyles,\n)`\n    button {\n        /* button styles */\n    }\n    button[|size='m'] {\n        /* button styles for the size */\n    }\n`(\u003cbutton use:size={size}\u003e{children}\u003c/button\u003e);\n```\n\n## Setup\n\n### Macro\n\nWith [CRA 2](https://github.com/facebook/create-react-app) (Create React App) or [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) usage you can just use `reshadow/macro` out of the box.\n\n```js\nimport React from 'react';\nimport styled from 'reshadow/macro';\n\nexport const Button = ({children}) =\u003e styled`\n    button {\n        /* button styles */\n    }\n`(\u003cbutton\u003e{children}\u003c/button\u003e);\n```\n\nOptions (via [babel-plugin-macros config](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#config-experimental)) are the same as `reshadow` [babel options](#babel-options), but with different defaults:\n\n| option  | default value     |\n| ------- | ----------------- |\n| postcss | true              |\n| files   | /\\.shadow\\.css\\$/ |\n\n### Babel\n\nAdd `reshadow/babel` to the plugin list.\n\n`babel.config.js`\n\n```js\nmodule.exports = {\n    plugins: ['reshadow/babel'],\n};\n```\n\n#### Options\n\n| option          | type                           | default value | description                                                                                    |\n| --------------- | ------------------------------ | ------------- | ---------------------------------------------------------------------------------------------- |\n| postcss         | boolean \\| {plugins: Plugin[]} | false         | Use PostCSS to process CSS code. You can add your custom PostCSS plugins (they should be sync) |\n| files           | boolean \\| RegExp              | false         | Resolve and process `css` files imports that match to the RegExp                               |\n| elementFallback | boolean \\| string              | 'div'         | Use fallback for the custom elements                                                           |\n\n### PostCSS\n\nAdd `reshadow/postcss` to the plugin list.\n\n`postcss.config.js`\n\n```js\nmodule.exports = {\n    plugins: ['reshadow/postcss'],\n};\n```\n\n### Webpack\n\nUse `reshadow/webpack/loader` to extract styles in separate files.\n\n_webpack.config.js_\n\n```js\n{\n    test: /\\.js$/,\n    use: [\n        'reshadow/webpack/loader',\n        'babel-loader',\n    ]\n}\n```\n\n### Linting\n\nUse `reshadow/eslint` if you want to have more control about `reshadow` usage.\n\nRules:\n\n-   [as-attribute](src/eslint/rules/as-attribute/index.js)\n\n### Prettier\n\nUse `reshadow/prettier` if you want to improve your Developer Experience with [prettier](https://github.com/prettier/prettier).\n\n_prettier.config.js_\n\n```js\nmodule.exports = {\n    plugins: ['reshadow/prettier'],\n};\n```\n\n# Special Thanks\n\n-   Pavel Masalsky [@pavelrevers](https://github.com/pavelrevers)\n-   Anton Kastritskiy [@antonk52](https://github.com/antonk52)\n-   Petr Ermishkin [@quasiyoke](https://github.com/quasiyoke)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyandex%2Freshadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyandex%2Freshadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyandex%2Freshadow/lists"}