Using stylesync for code generation and Sketch interoperability

[dylanslewis]

The problem

A key planned feature of Lona is the ability to generate styling code for multiple platforms and languages, including React Native and Swift. From my understanding of the plans, there are a few issues with the suggested approach:

• offering a single style of generated code for a platform makes Lona difficult to customise for any project that has specific requirements for their styling code, e.g. accessibility considerations;
• if a component's name is changed in the Lona project, and therefore the generated code, all references to the component in the generated code's project will need to be manually updated;
• if a style is removed from the Lona project, and therefore the generated code, it will need to be manually re-added to the generated file to ensure the code project can still compile.

stylesync

stylesync is an open source Swift command line tool and library that is currently able to extract text and colour styles from a Sketch file, and export to code for any language or platform through the use of templates. It is intended to sit on a CI and a generate a Pull Request with updated styling code in response to design system changes; it also handles any style reference updates or deprecations that are needed to keep the project compiling.

The near future planned updates to stylesync include:

• support more input types than just Sketch, including Lona;
• support more output types, including Lona .component and Sketch files;
• support both button and iconography exports.

Proposal

Since stylesync already exists as a Swift tool and library that inputs design system components and outputs code, I believe it would be a good candidate for handling code generation on Lona. The app could still offer default generated file styles, for languages such as React Native and Swift, but would also allow the user to have complete control over the generated files for their project.

Whilst stylesync is not intended to handle the generation of view hierarchy code, it could be used to export shared styles to Sketch. Furthermore, since stylesync already has a good parser for Sketch files, once it can export to Lona .component files, it could be used for importing styles from Sketch to Lona.

Questions

• What are the bounds of Lona’s responsibility? Whilst generating one-off style code could be useful for prototyping, it doesn't help to manage a large project due to the aforementioned reasons. Should it update a project based on changes in the design system, or should that be left to stylesync on a CI?
• Do you have specifications for the .component and expected generated files? If so, I can set stylesync up to make some demo exports to have a look at.

@dabbott I really love the look of Lona as an app and have noticed a similarity between the features both our projects have, or plan, to offer. If you agree that stylesync could be a good fit for certain features, I'd love to get more involved and prioritise the development of stylesync's features to better foster collaboration. I'm also happy to answer and questions or concerns you may have.

[dabbott]

I think the problems you describe are accurate. Can you explain how stylesync solves each of them?

What are the bounds of Lona’s responsibility?

Code generation will be part of CI. Lona Studio will eventually support simple git operations, e.g. pull requests, for making changes to the design system. After changes are merged, Lona Compiler will be responsible for generating code on CI. This could delegate to stylesync for outputting style code.

Do you have specifications for the .component and expected generated files?

The docs are pretty incomplete and some of the stuff isn't 100% accurate, but here's my start of a spec: https://github.com/airbnb/Lona/blob/master/docs/file-formats/README.md. I don't have any generated files in the public repo yet... but coming shortly! I'm updating the compiler this week.

[dylanslewis]

As discussed, whilst stylesync does solve the problems described, the focus for Lona right now is not related to custom code exports or project maintenance. Will close this for now

_{Sent with GitHawk}