silkstudio / jynx

Rapidly create and control responsive, theme-focused and type-safe styled-components, directly from your jsx.

Jynx

Rapidly create and control responsive, theme-focused and type-safe components, directly from your jsx.

---

Jynx is a performant and intuitive utility library for the 'CSS-in-JS era', allowing for responsive, theme-focused, type-safe styled-components to be rapidly created and controlled directly from your jsx.

Originally built in-house by Silk Studio to streamline our own development pipeline, Jynx is now available to use in your own projects and comes with support for:

• rapid component styling through the use of style-props
• using objects and arrays to create mobile-first, responsive designs
• integration with a global theme that's accessed directly from your props
• written in Typescript and fully type-safe

---

✏️  Getting Started

Check out the introduction to get up and running or head to jynx.vercel.app to view the full documentation.

🔗  Quick Links

• Introduction
• Responsive Styles
• Themes
• API Reference
• Types
• Advanced Theming
• Creating Style Functions

💻  Development

Jynx uses shipjs for managing it's releases. For devs issuing a new release, simply run yarn release in your local terminal and follow the CLI wizard.

Notes on Releasing

• When merging a shipjs-created PR always make sure to Squash & Merge (failure to do so will cause issues due to the commit name).
• If you are experiencing auth issues with git/github you may need to authorise a new GITHUB_TOKEN.

📄  License

Jynx is MIT licensed, Copyright © 2022-present

---

2022 © Silk Studio

jynx's Issues

flexbox: enforcing display flex

In order for flex properties to work, a components display props must be set to flex. This is shown in the code in the following way:

jynx/src/functions/flexbox.ts

Lines 80 to 88 in 750dee5

	const flexbox: StyleFunction<FlexboxProps> = ({ theme, ...styles }) => {
	const result = createStylesObject<FlexboxProps>(styles, theme, config)
	if (Object.keys(styles).length) {
	result.display = 'flex'
	}
	return result
	}

However, in practice, there seem to be instances where even if no flex props are passed, the display prop is still being set to flex as a default.

This should be investigated and potentially, a new solution provided for handling the adding of display: flex;.

Roadmap

Here's the roadmap for how the library is planning to progress. This issue will act as a rolling thread to keep track of where things are at.

 

Phase 1 - Initial MVP

• Create basic working product which allows for use of the librarys functions to pass style props, which are type-checked against css-type.

Phase 2

• Add a scale prop to the styleParser function that can be used as the first-port-of-call for emit suggestions.
• Create a more strictly typed theme based on whether a property can have an object, array or both assigned to it
• Make a descision on rules for how to parse different types of style values
• Implement a unitless function to add units to plain numbers (but only in certain circumstances based on the above)
• Implement a test suite to check everything is working

Phase 3

• Add intellisense through ts to enable suggestions for props based on theme and scale
• Add transformers to select props to allow 'power-user' syntax (e.g. gridRow, gridCol, margin, padding, width, height)
• Add aliases (with type support) to common props allowing cleaner syntax

 

Longer term

• Create compose function for improved performance

transientisation: props leaking through to DOM

Due to the current implementation, there appear to be many instances where props are leaking through to the DOM that shouldn't otherwise be there.

This is solved either by using some sort of shouldForwardProp function or by using transient (prefixed with $) props.

A potential solution could be to make all available props also accept a 'transient' version, however, I worry whether it will make the DX feel a bit clunky if you have to filter through masses of props to find the one you're looking for in your IDE.

Using a shouldForwardProp function poses a number of difficulties, most notably being where to implement it.

Implement it directly in the package and it becomes a lot more opinionated as there may be instances when props should be passed to the underlying component.

Make it an export function and leave it to the user to implement and you risk it becoming tedious should it need to be added to every component created.

This needs to be researched a little more before a concrete solution can be provided...

grid: alignSelf

Grid children should have an alignSelf prop by default rather than having to add it in with a flex style function.

There may be a couple more props like this for grid children (justifySelf springs to mind) so make sure to look into that before merging these changes.