{"id":20380570,"url":"https://github.com/tobua/epic-inline","last_synced_at":"2026-03-01T14:03:40.762Z","repository":{"id":167324518,"uuid":"642504362","full_name":"tobua/epic-inline","owner":"tobua","description":"Concise way to write runtime inline CSS styles.","archived":false,"fork":false,"pushed_at":"2025-04-27T17:25:48.000Z","size":1449,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T18:43:43.042Z","etag":null,"topics":["css","inline","inline-styles","react","style"],"latest_commit_sha":null,"homepage":"https://tobua.github.io/epic-inline/","language":"TypeScript","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/tobua.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-18T18:07:20.000Z","updated_at":"2025-04-27T17:25:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"2b115697-0949-4138-ac83-e6a18b1ed904","html_url":"https://github.com/tobua/epic-inline","commit_stats":null,"previous_names":["tobua/epic-inline"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/tobua/epic-inline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fepic-inline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fepic-inline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fepic-inline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fepic-inline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobua","download_url":"https://codeload.github.com/tobua/epic-inline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobua%2Fepic-inline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29970544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T13:32:00.443Z","status":"ssl_error","status_checked_at":"2026-03-01T13:32:00.084Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","inline","inline-styles","react","style"],"created_at":"2024-11-15T02:07:52.118Z","updated_at":"2026-03-01T14:03:40.732Z","avatar_url":"https://github.com/tobua.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tobua/epic-inline/raw/main/logo.png\" alt=\"epic-inline\" width=\"30%\"\u003e\n\u003c/p\u003e\n\n# epic-inline\n\nConcise way to write runtime inline CSS styles.\n\n## Usage\n\n```jsx\nimport { ei } from 'epic-inline'\n\nexport const Button = () =\u003e \u003cbutton style={ei('flex center')}\u003eClick me!\u003c/button\u003e\n```\n\n\u003cimg src=\"https://github.com/tobua/epic-inline/raw/main/schema.svg\" alt=\"schema of property structure\"\u003e\n\n## Breakpoints\n\nBreakpoints can be used to apply styles conditionally based on the current window width. By default they will match upwards, add `-only` to match only the specific breakpoint.\n\n`small:flex medium-only:grid large:block inline` or shorter `s:flex m-only:grid l:block inline`.\n\n## Sizes\n\nSizes serve as readable values.\n\n```js\n\"width-small\" =\u003e { width: 5 } // small medium large huge\n\"width-md\" =\u003e { width: 10 }   // sm md lg hg\n\"width-l\" =\u003e { width: 20 }    // s m l h\n\"width-huge\" =\u003e { width: 40 }\n```\n\n## Colors\n\nLots of named colors are available and can be combined with a tone between 50 and 900, where 400 matches the exact color.\n\n```js\n\"color-red-400\" =\u003e { color: '#FF0000'}\n\"color-blue-200\" =\u003e { color: '#3333FF'}\n\"background-lavenderblush-900\" =\u003e { background: '#FF70A0'}\n```\n\n## Shortcuts\n\nShortcuts generate several properties and are thought to encapsulate often used patterns.\n\n```js\n\"button\" =\u003e { outline: 'none', border: 'none' }\n\"link\" =\u003e { textDecoration: 'none' }\n```\n\n## Complex Values\n\nUsing methods it's possible to create more complex styles. The methods can receive both a size and a color.\n\n```js\nei('shadow') =\u003e { boxShadow: '0 5px 5px 3px #000000AA' }\nei('boxShadowX-large') =\u003e { boxShadow: '0 10px 10px 5px #000000AA' }\nei('textShadowX') =\u003e { textShadow: '2px 2px 2px black' }\nei('textShadowX-large-gray') =\u003e { textShadow: '4px 4px 4px gray' }\n```\n\n## Configuration\n\nVarious behaviours and sizes can be configured.\n\n```ts\nimport { configure, Type } from 'epic-inline'\n\nconfigure({\n  type: Type.Css | Type.Js | Type.Native,\n  size: (value) =\u003e `${value / 10}rem`,\n  object: (value) =\u003e JSON.stringify(value),\n  classPrefix: 'another-',\n  shortcuts: { image: 'width-50 height-50' },\n  sizes: { '4xl': 80 },\n  breakpoints: { phone: 500, tablet: 800, desktop: 1200 },\n  properties: {\n    // Additional CSS property.\n    borderStroke: ['border-stroke', 'solid'],\n    // Shortcut to existing property with value\n    outlineFlex: 'display-outline-flex',\n  },\n})\n```\n\n## React `className` Polyfill\n\nWhile generally considered criminal, for low-quality projects this plugin provides a JSX override that will automatically transform any `className` on a React component to matching inline styles.\n\n```jsx\nimport 'epic-inline/register-react'\n\nexport const Button = () =\u003e \u003cbutton className=\"flex center\"\u003eClick me!\u003c/button\u003e\n```\n\nIf automatic registration doesn't work because the bundler isolates imports, try doing it manually:\n\n```js\nimport _jsxdevruntime from 'react/jsx-dev-runtime'\nimport _jsxruntime from 'react/jsx-runtime'\nimport { register } from 'epic-inline/register-react'\n\nregister(_jsxdevruntime)\nregister(_jsxruntime)\n```\n\n## React Native\n\n```tsx\nimport { View, Text } from 'react-native'\nimport { ei, configure, Type } from 'epic-inline'\n\nconfigure({ type: Type.Native })\n\nconst MyView = (\n  \u003cView style={ei('pv-medium marginHorizontal-small center')}\u003e\n    \u003cText\u003eHello React Native\u003c/Text\u003e\n  \u003c/View\u003e\n)\n```\n\nUsing the `className` polyfill with types declared below:\n\n```tsx\nimport { View, Text } from 'react-native'\nimport 'epic-inline/register-react'\nimport { configure, Type } from 'epic-inline'\n\nconfigure({ type: Type.Native })\n\nconst MyText = \u003cText className=\"color-red\"\u003eHello React Native\u003c/Text\u003e\n\ndeclare module 'react-native' {\n  export interface TextProps {\n    className?: string\n  }\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tobua/epic-inline/raw/main/chatgpt.png\" alt=\"That's great!\" width=\"500\"\u003e\n\u003c/p\u003e\n\n## Vue, Svelte and SolidJS\n\nInline styles can be configured to work with various frameworks using `Preset`s.\n\n```jsx\nimport { ei, configure, Preset } from 'epic-inline'\n\nconfigure(Preset.vue)\nconst MyVue = \u003cdiv :style=\"ei('paddingLeft-10')\"\u003econtent\u003c/div\u003e\n// \u003cdiv :style=\"{ paddingLeft: '10px' }\"\u003econtent\u003c/div\u003e\n\nconfigure(Preset.svelte)\nconst MySvelete = \u003cdiv style={ei('paddingLeft-10')}\u003econtent\u003c/div\u003e\n// \u003cdiv style=\"padding-left: 10px;\"\u003econtent\u003c/div\u003e\n\nconfigure(Preset.solid)\nconst MySolid = \u003cdiv style={ei('paddingLeft-10')}\u003econtent\u003c/div\u003e\n// \u003cdiv style={{ 'padding-left': '10px' }}\u003econtent\u003c/div\u003e\n```\n\n## Credits\n\nThe approach to parse short form strings into complex CSS style sheets is inspired by [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) which parses `className` during build time and outputs stylesheets containing only the necessary properties.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobua%2Fepic-inline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobua%2Fepic-inline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobua%2Fepic-inline/lists"}