{"id":14971597,"url":"https://github.com/twils0/styled-inline-additions","last_synced_at":"2026-02-27T09:03:52.899Z","repository":{"id":57373325,"uuid":"147948923","full_name":"twils0/styled-inline-additions","owner":"twils0","description":"styled-components add-on that converts inline styles into a string of css","archived":false,"fork":false,"pushed_at":"2018-12-03T23:05:14.000Z","size":265,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-05T08:02:51.562Z","etag":null,"topics":["inline-css","inline-styles","react","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twils0.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}},"created_at":"2018-09-08T16:08:27.000Z","updated_at":"2023-08-24T03:11:23.000Z","dependencies_parsed_at":"2022-08-30T00:40:59.983Z","dependency_job_id":null,"html_url":"https://github.com/twils0/styled-inline-additions","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twils0%2Fstyled-inline-additions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twils0%2Fstyled-inline-additions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twils0%2Fstyled-inline-additions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twils0%2Fstyled-inline-additions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twils0","download_url":"https://codeload.github.com/twils0/styled-inline-additions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240325010,"owners_count":19783597,"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":["inline-css","inline-styles","react","reactjs","styled-components"],"created_at":"2024-09-24T13:45:31.476Z","updated_at":"2026-02-27T09:03:47.880Z","avatar_url":"https://github.com/twils0.png","language":"JavaScript","readme":"# styled-inline-additions\n\nstyled-inline-additions is an extremely fast and light-weight (no dependencies; ~16.2 KB minified; ~4.4 KB minified + gzipped) module that converts an object of inline styles, with a few unique syntax additions to accommodate selectors, pseudo-classes, pseudo-elements, and media queries, to a string of valid CSS. styled-inline-additions also provides a small amount of error/typo correction (possibly more to come).\n\n- [Performance Demo](https://codesandbox.io/s/v6nx2nx11l)\n- [Getting Started](#getting-started)\n- [Installation](#installation)\n- [Example](#example)\n- [Example Demo](https://codesandbox.io/s/9pp5164ny)\n- [Documentation](#documentation)\n\n### Motivation\n\nstyled-components is great. A separation between container and presentational components makes great sense. Sometimes, however, you may want a little leeway.\n\nAlternatively, you may not agree with the separation between container and presentational components at all. You may simply want a way to add pseudo-classes, pseudo-elements, and media queries to your inline styles using Javascript (and you don't want to use Radium or any other CSS-in-JS option).\n\nMaybe, you just need to convert styles from a Javascript object to a CSS string, and you don't mind styled-inline-additions' unique syntax.\n\n### Getting Started\n\nstyled-inline-additions looks for two props: 'addString' and 'addObject'.\n\nIt's as easy as:\n\n```javascript\nimport styled from 'styled-components';\nimport inlineAdditions from 'styled-inline-additions';\n\nconst FlexRow = styled.div`\n  display: flex;\n  justify-content: center;\n  width: ${({ width }) =\u003e width};\n  height: ${({ height }) =\u003e height};\n`;\n\nconst FlexColumn = styled.div`\n  display: flex;\n  justify-content: center;\n  width: ${({ width }) =\u003e width};\n  height: ${({ height }) =\u003e height};\n\n  ${inlineAdditions};\n`;\n/* why add 'align-self: ${({ alignSelf }) =\u003e alignSelf};' and\n  'background-color: ${props =\u003e props.backgroundColor};'\n  to the styled-component above just to use align-self\n  and background-color one time?\n*/\nconst PageGrid = props =\u003e {\n  // instead why not add align-self, or any other CSS\n  // just as you would normally, except you can't use\n  // props (yet)\n  const addString = `\n    align-self: 'center';\n  `;\n\n  // you can also add background-color using inline styles\n  // and styled-inline-additions unique syntax for selectors,\n  // pseudo-classes, pseudo-elements, and media queries\n  const addObject = {\n    backgroundColor: '#9B6FCC',\n  };\n\n  return (\n    \u003cFlexRow width=\"100%\" height=\"100%\"\u003e\n      \u003cFlexColumn addString={addString} addObject={addObject} width=\"50%\" height=\"50%\"\u003e\n        \u003ch2\u003e Test Column \u003c/h2\u003e\n      \u003c/FlexColumn\u003e\n    \u003c/FlexRow\u003e\n  );\n};\n\n/* inlineAdditions will output:\n  `align-self: center;\n  background-color: #9B6FCC;\n  `\n*/\n```\n\n### Prerequisites\n\nstyled-inline-additions was built for and tested with React. It has no dependencies. If you're not using React, but styled-components works for you, there's a good chance styled-inline-additions will work as well.\n\n### Installation\n\nInstall styled-inline-additions as a dependency:\n\n```console\nnpm i -S styled-inline-additions\n```\n\nImport the styled-inline-additions module:\n\n```javascript\nimport inlineAdditions from 'styled-inline-additions';\n\n/*--- or ---*/\n\nvar inlineAdditions = require('styled-inline-additions').default;\n```\n\n### Example\n\n[Example Demo](https://codesandbox.io/s/9pp5164ny)\n\nPlease refer to the [Documentation](#documentation) for details on the 'add' prop and reserved characters. Only reserved characters and [A-Za-z0-9] characters will be parsed; all other characters will be removed.\n\n```javascript\nimport styled from 'styled-components';\nimport inlineAdditions from 'styled-inline-additions';\n\nconst FlexRow = styled.div`\n  display: flex;\n  justify-content: center;\n  width: ${({ width }) =\u003e width};\n  height: ${({ height }) =\u003e height};\n`;\n\nconst FlexColumn = styled.div`\n  display: flex;\n  justify-content: center;\n  width: ${({ width }) =\u003e width};\n  height: ${({ height }) =\u003e height};\n\n  ${inlineAdditions};\n`;\n\nconst PageGrid = props =\u003e {\n  const addObject = {\n    backgroundColor: '#9B6FCC',\n    lastChild: {\n      hover: {\n        backgroundColor: 'lightgreen',\n      },\n    },\n    media: {\n      add: ['screen   \u0026\u003e^$%^\u003e\u003e  ', 'minWidth:', '700px()()() \u0026', { maxWidth: '1000px' }],\n      backgroundColor: 'lightblue',\n    },\n  };\n\n  return (\n    \u003cFlexRow width=\"100%\" height=\"100%\"\u003e\n      \u003cFlexColumn addObject={addObject} width=\"50%\" height=\"50%\"\u003e\n        \u003ch2\u003e Test Column \u003c/h2\u003e\n      \u003c/FlexColumn\u003e\n    \u003c/FlexRow\u003e\n  );\n};\n\n/* inlineAdditions will output:\n  `background-color: #9B6FCC;\n  \u0026:last-child {\n  \u0026:hover {\n  background-color: lightgreen;\n  }\n  }\n  @media screen and (min-width: 700px) and (max-width: 1000px) {\n  background-color: lightblue;\n  }\n  `\n*/\n```\n\n## Documentation\n\n- addStyle (string): a string of CSS; you should use normally CSS syntax and, you may include anything you would normally include in a styled-component string, except for props (support for props may be added in the future)\n\n- addObject (object): styled-inline-additions follows regular inline style (camel case) syntax and also provides a unique syntax to parse html, pseudo-classes, pseudo-elements, and media queries within CSS rulesets;\n\n  - add (array or string): include an 'add' key to include additional selectors, to create a group of selectors;\n\n    - Rules:\n      1. arrays may include nested objects or arrays;\n      2. please keep in mind commas ',' and colons ':' contained in an array, a nested object or array, or a string, are counted as reserved characters:\n\n\n    ```javascript\n    \u003cStyledDiv\n      addObject={{\n        backgroundColor: '#9B6FCC',\n        p: {\n          add: '\u003e div \u003e a',\n          alignSelf: 'center',\n          hover: {\n            backgroundColor: 'green';\n          },\n        },\n        media: {\n          add: ['print', 'screen\u0026', { maxWidth: '750px' }],\n          width: '100%',\n        },\n      }}\n    /\u003e\n\n    /* output:\n      `backgroundColor: #9B6FCC\n      p \u003e div \u003e a {\n      align-self: center;\n      \u0026:hover {\n      background-color: green;\n      }\n      }\n      @media print, screen and (max-width: 750px) {\n      width: 100%;\n      }\n      `\n    */\n    ```\n\n    - Reserved Characters: styled-inline-additions looks for certain reserved characters when parsing the \"add\" prop;\n\n      - Rules:\n        1. only reserved characters and [A-Za-z0-9] characters will be parsed; all other characters will be removed;\n        2. if a string of consecutive reserved characters is provided, only the first and last reserved character will be parsed (\"\u0026|\u003e\u003e|\" would be parsed as \"\u0026|\");\n        3. the first relevant character (searching from left to right) of two consecutive characters will be used (if both '\u0026' and '|' are relevant, '\u0026' will be used) and the other character ignored;\n        4. if both characters are irrelevant, both will be ignored;\n\n\n      - spaces between two or more [A-Za-z0-9] characters or words within CSS values will be kept; all other occurances of the space character will be removed;\n\n      - [ - ] : dashes can be used when needed within CSS values; CSS properties, pseudo-classes, pseudo-elements, media types and, media features should all be provided in camel case, without dashes\n\n      - [ # ] : hashes can be used when needed within CSS values;\n\n      - [ , ] : commas can be used as selectors ('p, div'); or, as logical operators for media queries ('print, screen');\n\n      - [ \u003e ] : greater-than signs can be used as selectors ('p \u003e div');\n\n      - [ _ ] : underscores can be used as a space selector ('body_p,div' will be parsed as 'body p, div)\n\n      - [ + ] : plus signs can be used as selectors ('p + div');\n\n      - [ ~ ] : tildes can be used as selectors ('p ~ div');\n\n      - [ \u0026 ] : ampersands can be used as logical operators for media queries ('print \u0026 screen' will be parsed as 'print and screen')\n\n      - [ | ] : vertical bars can be used as logical operators for media queries ('print | screen' will be parsed as 'print, screen')\n\n      - [ ! ] : exclamation marks can be used as logical operators for media queries ('!print' will be parsed as 'not print')\n\n      - [ ? ] : question marks can be used as logical operators for media queries ('?print' will be parsed as 'only print')\n\n      - [ : ] : colons can be used to join html, pseudo-classes, and pseudo-elements ('a:focus:firstLine' will be parsed as 'a:focus::first-line'); or, with media features ('maxWidth:750px' will be parsed as '(max-width: 750px)')\n\n      - [ % ] : percentage signs can be used to identify parameters, for pseudo-classes or pseudo-elements:\n\n\n        ```javascript\n        \u003cStyledDiv\n          addObject={{\n            backgroundColor: '#9B6FCC',\n            not: {\n              add: [\"%p\", \"%div\", \"nthChild %\", \"2n\"],\n              alignSelf: 'center',\n            },\n          }}\n        /\u003e\n\n        /* output:\n          `backgroundColor: #9B6FCC\n          :not(p, div), nth-child(2n) {\n          align-self: center;\n          }\n          `\n        */\n        ```\n\n### License\n\nThis project is licensed under the Apache 2.0 License. Please see the [LICENSE](LICENSE) file.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwils0%2Fstyled-inline-additions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwils0%2Fstyled-inline-additions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwils0%2Fstyled-inline-additions/lists"}