{"id":13399446,"url":"https://github.com/diegohaz/styled-tools","last_synced_at":"2025-05-15T05:06:03.255Z","repository":{"id":16196366,"uuid":"79531500","full_name":"diegohaz/styled-tools","owner":"diegohaz","description":"Useful interpolated functions for CSS-in-JS","archived":false,"fork":false,"pushed_at":"2022-12-06T22:19:21.000Z","size":1249,"stargazers_count":801,"open_issues_count":14,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-01T06:39:11.993Z","etag":null,"topics":["css-in-js","emotion","jss","lodash","react","styled-components","utilities"],"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/diegohaz.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":"2017-01-20T06:17:10.000Z","updated_at":"2025-03-13T13:35:46.000Z","dependencies_parsed_at":"2023-01-13T18:44:36.871Z","dependency_job_id":null,"html_url":"https://github.com/diegohaz/styled-tools","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diegohaz","download_url":"https://codeload.github.com/diegohaz/styled-tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252994145,"owners_count":21837377,"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","emotion","jss","lodash","react","styled-components","utilities"],"created_at":"2024-07-30T19:00:37.956Z","updated_at":"2025-05-15T05:05:58.231Z","avatar_url":"https://github.com/diegohaz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","CSS-In-JS","JS/CSS/HTML - FE in general","Libraries and components","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["React","Styles"],"readme":"# styled-tools 💅\n\n[![NPM version](https://img.shields.io/npm/v/styled-tools.svg?style=flat-square)](https://npmjs.org/package/styled-tools)\n[![NPM downloads](https://img.shields.io/npm/dm/styled-tools.svg?style=flat-square)](https://npmjs.org/package/styled-tools)\n[![Dependencies](https://img.shields.io/david/diegohaz/styled-tools.svg?style=flat-square)](https://david-dm.org/diegohaz/styled-tools)\n[![Build Status](https://img.shields.io/travis/diegohaz/styled-tools/master.svg?style=flat-square)](https://travis-ci.org/diegohaz/styled-tools) [![Coverage Status](https://img.shields.io/codecov/c/github/diegohaz/styled-tools/master.svg?style=flat-square)](https://codecov.io/gh/diegohaz/styled-tools/branch/master)\n\nUseful interpolated functions for [styled-components](https://github.com/styled-components/styled-components) 💅, [emotion](https://github.com/emotion-js/emotion) 👩‍🎤, [JSS](https://github.com/cssinjs/jss) and other CSS-in-JS libraries.\n\n## Install\n\nnpm:\n\n    npm i styled-tools\n\nYarn:\n\n    yarn add styled-tools\n\n## Usage\n\n```jsx\nimport styled, { css } from \"styled-components\";\nimport { prop, ifProp, switchProp } from \"styled-tools\";\n\nconst Button = styled.button`\n  color: ${prop(\"color\", \"red\")};\n  font-size: ${ifProp({ size: \"large\" }, \"20px\", \"14px\")};\n  background-color: ${switchProp(\"theme\", {\n    dark: \"blue\", \n    darker: \"mediumblue\", \n    darkest: \"darkblue\" \n  })};\n`;\n\n// renders with color: blue\n\u003cButton color=\"blue\" /\u003e\n\n// renders with color: red\n\u003cButton /\u003e\n\n// renders with font-size: 20px\n\u003cButton size=\"large\" /\u003e\n\n// renders with background-color: mediumblue\n\u003cButton theme=\"darker\" /\u003e\n```\n\nA more complex example:\n\n```jsx\nconst Button = styled.button`\n  color: ${prop(\"theme.colors.white\", \"#fff\")};\n  font-size: ${ifProp({ size: \"large\" }, prop(\"theme.sizes.lg\", \"20px\"), prop(\"theme.sizes.md\", \"14px\"))};\n  background-color: ${prop(\"theme.colors.black\", \"#000\")};\n  \n  ${switchProp(\"kind\", {\n    dark: css`\n      background-color: ${prop(\"theme.colors.blue\", \"blue\")};\n      border: 1px solid ${prop(\"theme.colors.blue\", \"blue\")};\n    `,\n    darker: css`\n      background-color: ${prop(\"theme.colors.mediumblue\", \"mediumblue\")};\n      border: 1px solid ${prop(\"theme.colors.mediumblue\", \"mediumblue\")};\n    `,\n    darkest: css`\n      background-color: ${prop(\"theme.colors.darkblue\", \"darkblue\")};\n      border: 1px solid ${prop(\"theme.colors.darkblue\", \"darkblue\")};\n    `\n  })}\n  \n  ${ifProp(\"disabled\", css`\n    background-color: ${prop(\"theme.colors.gray\", \"#999\")};\n    border-color: ${prop(\"theme.colors.gray\", \"#999\")};\n    pointer-events: none;\n  `)}\n`;\n```\n\n## API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n#### Table of Contents\n\n-   [prop](#prop)\n    -   [Parameters](#parameters)\n    -   [Examples](#examples)\n-   [theme](#theme)\n    -   [Parameters](#parameters-1)\n    -   [Examples](#examples-1)\n-   [palette](#palette)\n    -   [Parameters](#parameters-2)\n    -   [Examples](#examples-2)\n-   [ifProp](#ifprop)\n    -   [Parameters](#parameters-3)\n    -   [Examples](#examples-3)\n-   [ifNotProp](#ifnotprop)\n    -   [Parameters](#parameters-4)\n    -   [Examples](#examples-4)\n-   [withProp](#withprop)\n    -   [Parameters](#parameters-5)\n    -   [Examples](#examples-5)\n-   [switchProp](#switchprop)\n    -   [Parameters](#parameters-6)\n    -   [Examples](#examples-6)\n-   [Types](#types)\n    -   [Needle](#needle)\n\n### prop\n\nReturns the value of `props[path]` or `defaultValue`\n\n#### Parameters\n\n-   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** \n-   `defaultValue` **any** \n\n#### Examples\n\n```javascript\nimport styled from \"styled-components\";\nimport { prop } from \"styled-tools\";\n\nconst Button = styled.button`\n  color: ${prop(\"color\", \"red\")};\n`;\n```\n\nReturns **PropsFn** \n\n### theme\n\nSame as `prop`, except that it returns `props.theme[path]` instead of\n`props[path]`.\n\n#### Parameters\n\n-   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** \n-   `defaultValue` **any** \n\n#### Examples\n\n```javascript\nimport styled from \"styled-components\";\nimport { theme } from \"styled-tools\";\n\nconst Button = styled.button`\n color: ${theme(\"button.color\", \"red\")};\n`;\n```\n\n### palette\n\nReturns `props.theme.palette[key || props.palette][tone || props.tone || 0]` or `defaultValue`.\n\n#### Parameters\n\n-   `keyOrTone` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \\| [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number))** \n-   `toneOrDefaultValue` **any** \n-   `defaultValue` **any** \n\n#### Examples\n\n```javascript\nimport styled, { ThemeProvider } from \"styled-components\";\nimport { palette } from \"styled-tools\";\n\nconst theme = {\n  palette: {\n    primary: ['#1976d2', '#2196f3', '#71bcf7', '#c2e2fb'],\n    secondary: ['#c2185b', '#e91e63', '#f06292', '#f8bbd0']\n  }\n};\n\nconst Button = styled.button`\n  color: ${palette(1)};                    // props.theme.palette[props.palette][1]\n  color: ${palette(\"primary\", 1)};         // props.theme.palette.primary[1]\n  color: ${palette(\"primary\")};            // props.theme.palette.primary[props.tone || 0]\n  color: ${palette(\"primary\", -1)};        // props.theme.palette.primary[3]\n  color: ${palette(\"primary\", 10)};        // props.theme.palette.primary[3]\n  color: ${palette(\"primary\", -10)};       // props.theme.palette.primary[0]\n  color: ${palette(\"primary\", 0, \"red\")};  // props.theme.palette.primary[0] || red\n`;\n\n\u003cThemeProvider theme={theme}\u003e\n  \u003cButton palette=\"secondary\" /\u003e\n\u003c/ThemeProvider\u003e\n```\n\n### ifProp\n\nReturns `pass` if prop is truthy. Otherwise returns `fail`\n\n#### Parameters\n\n-   `test` **([Needle](#needle) \\| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\u0026lt;[Needle](#needle)\u003e | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** \n-   `pass` **any**  (optional, default `\"\"`)\n-   `fail` **any**  (optional, default `\"\"`)\n\n#### Examples\n\n```javascript\nimport styled from \"styled-components\";\nimport { ifProp, palette } from \"styled-tools\";\n\nconst Button = styled.button`\n  background-color: ${ifProp(\"transparent\", \"transparent\", palette(0))};\n  color: ${ifProp([\"transparent\", \"accent\"], palette(\"secondary\"))};\n  font-size: ${ifProp({ size: \"large\" }, \"20px\", ifProp({ size: \"medium\" }, \"16px\", \"12px\"))};\n`;\n```\n\nReturns **PropsFn** \n\n### ifNotProp\n\nReturns `pass` if prop is falsy. Otherwise returns `fail`\n\n#### Parameters\n\n-   `test` **([Needle](#needle) \\| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\u0026lt;[Needle](#needle)\u003e | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** \n-   `pass` **any** \n-   `fail` **any** \n\n#### Examples\n\n```javascript\nimport styled from \"styled-components\";\nimport { ifNotProp } from \"styled-tools\";\n\nconst Button = styled.button`\n  font-size: ${ifNotProp(\"large\", \"20px\", \"30px\")};\n`;\n```\n\nReturns **PropsFn** \n\n### withProp\n\nCalls a function passing properties values as arguments.\n\n#### Parameters\n\n-   `needle` **([Needle](#needle) \\| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\u0026lt;[Needle](#needle)\u003e)** \n-   `fn` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** \n\n#### Examples\n\n```javascript\n// example with polished\nimport styled from \"styled-components\";\nimport { darken } from \"polished\";\nimport { withProp, prop } from \"styled-tools\";\n\nconst Button = styled.button`\n  border-color: ${withProp(prop(\"theme.primaryColor\", \"blue\"), darken(0.5))};\n  font-size: ${withProp(\"theme.size\", size =\u003e `${size + 1}px`)};\n  background: ${withProp([\"foo\", \"bar\"], (foo, bar) =\u003e `${foo}${bar}`)};\n`;\n```\n\nReturns **PropsFn** \n\n### switchProp\n\nSwitches on a given prop. Returns the value or function for a given prop value. Third parameter is default value.\n\n#### Parameters\n\n-   `needle` **[Needle](#needle)** \n-   `cases` **([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) | PropsFn)** \n-   `defaultCase` **any** \n\n#### Examples\n\n```javascript\nimport styled, { css } from \"styled-components\";\nimport { switchProp, prop } from \"styled-tools\";\n\nconst Button = styled.button`\n  font-size: ${switchProp(prop(\"size\", \"medium\"), {\n    small: prop(\"theme.sizes.sm\", \"12px\"),\n    medium: prop(\"theme.sizes.md\", \"16px\"),\n    large: prop(\"theme.sizes.lg\", \"20px\")\n  }, prop(\"theme.sizes.md\", \"16px\"))};\n  ${switchProp(\"theme.kind\", {\n    light: css`\n      color: LightBlue;\n    `,\n    dark: css`\n      color: DarkBlue;\n    `\n  }, css`color: black;`)}\n`;\n\n\u003cButton size=\"large\" theme={{ kind: \"light\" }} /\u003e\n```\n\nReturns **PropsFn** \n\n### Types\n\n\n\n\n#### Needle\n\nA Needle is used to map the props to a value. This can either be done with\na path string `\"theme.size.sm\"` or with a function\n`(props) =\u003e props.theme.size.sm` (these two examples are equivalent).\n\nAll of styled-tools can be used as Needles making it possible to do\ncomposition between functions. ie `ifProp(theme(\"dark\"), \"black\", \"white\")`\n\nType: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \\| [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function))\n\n## License\n\nMIT © [Diego Haz](https://github.com/diegohaz)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegohaz%2Fstyled-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegohaz%2Fstyled-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegohaz%2Fstyled-tools/lists"}