{"id":17933063,"url":"https://github.com/margaretkrutikova/styled-system-mapper","last_synced_at":"2025-07-02T09:04:40.219Z","repository":{"id":57373416,"uuid":"172403607","full_name":"MargaretKrutikova/styled-system-mapper","owner":"MargaretKrutikova","description":"Utility functions for style props in styled-system that allow using custom keys instead of arrays","archived":false,"fork":false,"pushed_at":"2019-03-04T00:39:32.000Z","size":415,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-25T23:04:57.142Z","etag":null,"topics":["css-in-js","styled-system","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/MargaretKrutikova.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-24T23:36:23.000Z","updated_at":"2020-05-29T06:21:57.000Z","dependencies_parsed_at":"2022-09-17T15:01:49.010Z","dependency_job_id":null,"html_url":"https://github.com/MargaretKrutikova/styled-system-mapper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MargaretKrutikova/styled-system-mapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MargaretKrutikova%2Fstyled-system-mapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MargaretKrutikova%2Fstyled-system-mapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MargaretKrutikova%2Fstyled-system-mapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MargaretKrutikova%2Fstyled-system-mapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MargaretKrutikova","download_url":"https://codeload.github.com/MargaretKrutikova/styled-system-mapper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MargaretKrutikova%2Fstyled-system-mapper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263108807,"owners_count":23415005,"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","styled-system","typescript"],"created_at":"2024-10-28T21:36:18.179Z","updated_at":"2025-07-02T09:04:40.190Z","avatar_url":"https://github.com/MargaretKrutikova.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Styled system mapper\n\nA library that allows using style functions from [styled-sytem](https://github.com/jxnblk/styled-system) with values that map to the keys of theme objects instead of array indices.\n\n## Why?\n\nIn order to use style property `space` from `styled-system` with custom values, a `space` array should be added to theme. Then the array indices could be used as values for `space` properties on a component:\n\n```\n\u003cBox mt={2} pt={[ 0, 1, 2 ]} mb={{ xs: 1, md: 3 }}/\u003e\n```\n\nHowever, it can be difficult to get used to indices for values of spacing and challenging to remember the correct values that have to be applied on different breakpoints. Moreover, `theme` properties are quite often defined as key/values, e.g.:\n\n```\nconst spacingUnit = 10\n\nconst space = {\n  xsmall: spacingUnit,\n  small: spacingUnit * 2,\n  medium: spacingUnit * 4,\n  large: spacingUnit * 6,\n  xlarge: spacingUnit * 8,\n}\n```\n\nIt might be more intuitive and convenient to define spacing values as an object with key/values and use the actual keys instead of indicies:\n\n```\n\u003cBox mt=\"small\" pt={[ \"xsmall\", \"small\", \"medium\" ]} mb={{ xs: \"small\", md: \"large\" }}/\u003e\n```\n\nAnd that's what the library does. It exposes utility functions that try to map the values for `space` and `width` properties passed into the component to the custom keys defined in theme before they reach `styled-system`. If no mapping exists, the value is passed as is, which means that all kinds of values supported by `styled-system` can be used.\n\n`Typescript` support includes autocompletion for the keys in the `space` object in theme.\n\n### Usage\n\nCurrently supports `space` and `width` props that will be mapped to the keys of the `space` object. The examples below demonstrate usage with `Typescript` and [`emotion`](https://github.com/emotion-js/emotion).\n\nFirst, create a typed version of `styled` with a theme that will have a `space` object and the types for `space` and `width` props that will be used as component's props:\n\n```\nimport styled, { CreateStyled } from '@emotion/styled'\nimport { StyledSpaceProps, StyledWidthProps } from 'styled-system-mapper'\n\nconst spacingUnit = 10\n\nconst space = {\n  xsmall: spacingUnit,\n  small: spacingUnit * 2,\n  medium: spacingUnit * 4,\n  large: spacingUnit * 6,\n  xlarge: spacingUnit * 8,\n}\n\nconst theme = {\n  space,\n}\n\nexport type SpaceProps = StyledSpaceProps\u003ctypeof space\u003e\nexport type WidthProps = StyledWidthProps\u003ctypeof space\u003e\n\nexport default styled as CreateStyled\u003ctypeof theme\u003e\n\n```\n\nPass the theme object into `ThemeProvider` of a CSS-in -JS library that has theming support:\n\n```\nimport React from 'react'\nimport { ThemeProvider } from 'emotion-theming'\nimport { theme } from '.\\styled'\n\nconst App: React.FunctionComponent = () =\u003e (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003c...\u003e\n  \u003c/ThemeProvider\u003e\n)\n\n```\n\nCreate a reusable component that will use the `space` and `width` props:\n\n```\nimport { BgColorProps, bgColor } from 'styled-system'\nimport { space, width } from 'styled-system-mapper'\n\nimport styled, { SpaceProps, WidthProps } from './styled'\n\ntype Props = BgColorProps \u0026 SpaceProps \u0026 WidthProps\n\nconst Box = styled('div')\u003cProps\u003e(\n  {\n    boxSizing: 'border-box'\n  },\n  bgColor,\n  space,\n  width\n)\n\nexport default Box\n\n```\n\nAny other style props from `styled-system` can combined together with `style` and `width` from `styled-system-mapper`.\n\nNow the component is ready to be used:\n\n```\n\u003cBox bgColor=\"#A4A4A4\" p={{ xs: \"small\", sm: \"medium\", md: \"xlarge\" }} mb=\"medium\"\u003e\n  Look at me!\n\u003c/Box\u003e\n```\n\n## TODO\n\n- mapper for color keys and font sizes,\n- tests, tests, tests...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmargaretkrutikova%2Fstyled-system-mapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmargaretkrutikova%2Fstyled-system-mapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmargaretkrutikova%2Fstyled-system-mapper/lists"}