Address failing Sketch import

[chrisvxd]

Initial discussion #59

Overview

Various storybooks result in the following message when importing into sketch:

This likely occurs under a variety of circumstances where html-sketchapp is failing to convert the markup to sketch nodes for currently unknown reasons.

The goal of this issue is to document and track the failure cases, and provide a path forwards to addressing them.

Tasks

1. Document failing cases (on-going)
2. Addressing the failing cases, whether in story2sketch or upstream in html-sketchapp, with regression tests
3. Add test coverage to catch other cases Add unit tests #52
4. Provide better error messaging in story2sketch during generation
5. Provide better error messaging in html-sketchapp during generation and plugin

Known Failure Cases

1. Unknown case (identified in Sketch cannot import generated layers #59)

[SuneRadich]

I was struggling with only one of my stories importing correctly in Sketch. Until I changed the querySelector configuration option.

I am running an Angular storybook, so all my stories were wrapped in angular components.

When I added

querySelector: '#root storybook-dynamic-app-root ng-component',

All my stories were imported in Sketch.

[Paul-Hebert]

I needed to solve a couple issues to resolve this:

• If I don't set a font family and use the browser defaults the import will fail. Setting the font-family to a locally installed font fixed this error
• I had background shapes. html-sketchapp was giving them a border of thickness null. Changing the thickness to 0 solved that issue.

By making those 2 changes I was able to get imports to work correctly. Hopefully this is helpful 🙂

[itsderek23]

This likely occurs under a variety of circumstances where html-sketchapp is failing to convert the markup to sketch nodes for currently unknown reasons.

As @chrisvxd wrote, this was an issue w/an underlying dependency (sketchapp-json-plugin) and not story2sketch (at least in my case).

I was seeing the same (none of my layers could be imported) with both story2sketch and html-sketchapp. After installing the asketch2sketch.sketchplugin generated from html-sketchapp v4.4.1, things started working again.

There's background on the cause in the html-sketchapp repo.

[chrisvxd]

Closed by #103, thanks @itsderek23!