https://github.com/tobua/epic-inline
Concise way to write runtime inline CSS styles.
https://github.com/tobua/epic-inline
css inline inline-styles react style
Last synced: 3 months ago
JSON representation
Concise way to write runtime inline CSS styles.
- Host: GitHub
- URL: https://github.com/tobua/epic-inline
- Owner: tobua
- Created: 2023-05-18T18:07:20.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-25T22:41:24.000Z (over 1 year ago)
- Last Synced: 2024-05-01T21:22:13.227Z (about 1 year ago)
- Topics: css, inline, inline-styles, react, style
- Language: TypeScript
- Homepage: https://tobua.github.io/epic-inline/
- Size: 1.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# epic-inline
Concise way to write runtime inline CSS styles.
## Usage
```jsx
import { ei } from 'epic-inline'
export const Button = () => Click me!
```
## Breakpoints
Breakpoints 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.
`small:flex medium-only:grid large:block inline` or shorter `s:flex m-only:grid l:block inline`.
## Sizes
Sizes serve as readable values.
```js
"width-small" => { width: 5 } // small medium large huge
"width-md" => { width: 10 } // sm md lg hg
"width-l" => { width: 20 } // s m l h
"width-huge" => { width: 40 }
```
## Colors
Lots of named colors are available and can be combined with a tone between 50 and 900, where 400 matches the exact color.
```js
"color-red-400" => { color: '#FF0000'}
"color-blue-200" => { color: '#3333FF'}
"background-lavenderblush-900" => { background: '#FF70A0'}
```
## Shortcuts
Shortcuts generate several properties and are thought to encapsulate often used patterns.
```js
"button" => { outline: 'none', border: 'none' }
"link" => { textDecoration: 'none' }
```
## Complex Values
Using methods it's possible to create more complex styles. The methods can receive both a size and a color.
```js
ei('shadow') => { boxShadow: '0 5px 5px 3px #000000AA' }
ei('boxShadowX-large') => { boxShadow: '0 10px 10px 5px #000000AA' }
ei('textShadowX') => { textShadow: '2px 2px 2px black' }
ei('textShadowX-large-gray') => { textShadow: '4px 4px 4px gray' }
```
## Configuration
Various behaviours and sizes can be configured.
```ts
import { configure, Type } from 'epic-inline'
configure({
type: Type.Css | Type.Js | Type.Native,
size: (value) => `${value / 10}rem`,
object: (value) => JSON.stringify(value),
classPrefix: 'another-',
shortcuts: { image: 'width-50 height-50' },
sizes: { '4xl': 80 },
breakpoints: { phone: 500, tablet: 800, desktop: 1200 },
properties: {
// Additional CSS property.
borderStroke: ['border-stroke', 'solid'],
// Shortcut to existing property with value
outlineFlex: 'display-outline-flex',
},
})
```
## React `className` Polyfill
While 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.
```jsx
import 'epic-inline/register-react'
export const Button = () => Click me!
```
If automatic registration doesn't work because the bundler isolates imports, try doing it manually:
```js
import _jsxdevruntime from 'react/jsx-dev-runtime'
import _jsxruntime from 'react/jsx-runtime'
import { register } from 'epic-inline/register-react'
register(_jsxdevruntime)
register(_jsxruntime)
```
## React Native
```tsx
import { View, Text } from 'react-native'
import { ei, configure, Type } from 'epic-inline'
configure({ type: Type.Native })
const MyView = (
Hello React Native
)
```
Using the `className` polyfill with types declared below:
```tsx
import { View, Text } from 'react-native'
import 'epic-inline/register-react'
import { configure, Type } from 'epic-inline'
configure({ type: Type.Native })
const MyText = Hello React Native
declare module 'react-native' {
export interface TextProps {
className?: string
}
}
```
## Vue, Svelte and SolidJS
Inline styles can be configured to work with various frameworks using `Preset`s.
```jsx
import { ei, configure, Preset } from 'epic-inline'
configure(Preset.vue)
const MyVue =
content
// content
configure(Preset.svelte)
const MySvelete =
content
// content
configure(Preset.solid)
const MySolid =
content
// content
```
## Credits
The 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.