nodeToSketchLayers should run recursively and generate layers for all descendent nodes. Two reasons:

• that's more intuitive (e.g. #66)
• order in which nodes are processed is important, if we leave it to the user she/he may get subpar results (proper node traversal can be found here - https://github.com/brainly/html-sketchapp/blob/master/test/inject.js#L16 ).

As its a struggle to recreate many HTML components in React-primitives, I've been thinking...

Would it be possible to have html-sketchapp render HTML in Sketchapp using React-primitives?
It would be extremely powerful to render HTML to Sketchapp, Web, Native e.t.c

But I guess it wouldn't be called html-sketchapp at that point, rather HTML-React-primitives.

Maybe I missed something and this is the end game.

Your thoughts?

Sometimes shadowObj.spread has type of string, instead of int. This lead to miscalculation of innerShadow.spread in line 158 of file nodeToSketchLayers.js:
shadowObj.spread += parseInt(borderWidth, 10);

For example:
shadowObj.spread = "0"; // string, not an number!
shadowObj.spread += parseInt("0px", 10); // → "00", should be 0

To fix this:
shadowObj.spread = parseInt(shadowObj.spread, 10) + parseInt(borderWidth, 10);

text-indent is often used to hide text description of the icon e.g smashingmagazine.com:

Currently, we are not hiding this text because text-indent is not supported.

Currently nodes that overflow their container with overflow:hidden are still visible:

Currently opacity is only set on the shape-group and not set on text, svg, etc. which is a bug.

While discussing this we also found out that we don't calculate opacity properly. 'opacity' property is non-cascading in CSS, but it's effect does "cascade" on children (e.g. <div opacity=.5><div opacity=.5></div> - inner div should have opacity of 0.25). In order to fix that we should collect all parent opacities and multiply them.

SVG elements inside symbols don't seem to work. Working on a fix…

From test/test-page.html

Multiple empty groups are created for each SVG child element. Fix:

• don't traverse SVGs
• add additional check in nodeTreeToSketchGroup that filters out empty groups

Feed system with getComputedStyles and getBoundingBox as input and validate output .asketch.json file. Use existing jest setup.

for LEFT+RIGHT on text we get 47 and we should get, according to Sketch, 42

react-sketchapp implementation:
https://github.com/airbnb/react-sketchapp/blob/09944fee61bcf925527ec36156e44e2af0c8980c/src/jsonUtils/hacksForJSONImpl.js#L52

our implementation:
https://github.com/brainly/html-sketchapp/blob/master/html2asketch/helpers/utils.js#L102

Currently custom elements are not supported (they don't show up in Sketch) because we don't pierce through the Shadow DOM.

There are new methods and changes in e2e tests - document before releasing 2.1.0

IMO it's pretty stable now 💪(BTW isn't all OSS "experimental" in some way?)

So in the README, html-sketchapp mentions that they pulled heavily from the source of react-sketchapp to implement this tool. Looking through the source of html-sketchapp, it seems a lot of this seems to be related to how sketch json is constructed.

I'm wondering the reason why this code was copied over, rather than directly leveraging the work react-sketchapp has done to generate sketch elements.

For example a potential updated workflow could look something like this:

1. Run a simplified version of nodeToSketchLayer that grabs the styling and layout information for a given element
2. Instead of generating sketch json (using the Rectangle, ShapeGroup, Text classes etc), html-sketcahpp generates react-sketchapp components which handles the sketch json generation for us.
3. Run react-sketchapp as a plugin instead of the custom plugin in html-sketchapp

The benefits here is that html-sketchapp could more directly leverage the development happening in react-sketchapp, and instead of developing similar solutions in parallel, we can build a solution that works for both libraries, and maintains a more cohesive ecosystem.

I've been messing around a bit with what an implementation of this might look like. And I'd be happy to share my findings there. But before I continue down this path much further, I would like to have a discussion and understand the history of "forking" react-sketchapp's implementation rather than taking a dependency on the library directly.

This one is hard. It be worth taking shortcuts here to support a small number of actual use cases:

I use transform: rotate(X) to aim my arrows and icons in my design system. Would love to have support for that one that would simply set the actual rotate in Sketch.

The following object params change every time we generate a new asketch.json file:

• symbolID
• do_objectID

Is there a way to not generate new IDs here? We're looking to maintain a ui-kit that is updated regularly so we need sketch to notice that a symbol has changed, not deleted and added.

Make sure that included TS files match objects they are describing

Screenshot from the test/test-page.html

Hello.

How about to support font names by CSS4?

It needs because now so many sites uses «System Font» in css font-family.
After that npm run inject <sitename> returns TRASH in width/height values of text blocks.

Okay, even if you try use "replace font", you don't know where is Regular, Bold or Italic style.. Anyway sad...

by this https://github.com/brainly/html-sketchapp-example.

Maybe is real to replace "system-ui" and other parallels with page2layers?

Screens by sketchapp.com

Without background-position all sprites won't work. E.g. from google.com:

This is an amazing tool. Haven't run it yet, but I have been wanting to build this myself. What would be amazing is to have control over some Sketch specific properties by passing those props through data attributes.

As an example imagine the following component:

<div data-sketch-ignore>
  <div data-sketch-symbol="SearchInput">
    <input class="SearchInput" data-sketch-resize="stretch" data-sketch-layer-name="name" />
  </div>
</div>

I can think of some props like:

• data-sketch-layer-style
• data-sketch-link-object

Haven't thought it through all the way, but I could see it be helpful to have some control of the Sketch output.

This project is amazing.

I would love give a shot at adding in SVG support, but I'm a little lost on where to start.

Would it be too much to ask for a simple outline for me to follow on the steps needed to build support?

So far I have:

html2asketch:

• add a SVG class that extends Base
• handle SVGs in nodeToSketchLayers.js

asketch2sketch

• somehow handle the JSON SVG objects and convert to paths

Is there anything I'm missing? Thank you so much!

It looks like text object is no longer saved as a binary blob! It means that we can generate it with JS, which means that we may no longer need a Sketch plugin (in the long run) 🕺

{
                    "_class": "text",
                    "do_objectID": "363fb9fc-1f4e-4c53-b11b-9704da8e714f",
                    "exportOptions": {
                        "_class": "exportOptions",
                        "exportFormats": [],
                        "includedLayerIds": [],
                        "layerOptions": 0,
                        "shouldTrim": false
                    },
                    "frame": {
                        "_class": "rect",
                        "constrainProportions": false,
                        "height": 24,
                        "width": 101,
                        "x": 26,
                        "y": 0
                    },
                    "isFlippedHorizontal": false,
                    "isFlippedVertical": false,
                    "isLocked": false,
                    "isVisible": true,
                    "layerListExpandedType": 0,
                    "name": "One two three",
                    "nameIsFixed": false,
                    "resizingConstraint": 47,
                    "resizingType": 0,
                    "rotation": 0,
                    "shouldBreakMaskChain": false,
                    "userInfo": null,
                    "style": {
                        "_class": "style",
                        "endDecorationType": 0,
                        "miterLimit": 10,
                        "startDecorationType": 0
                    },
                    "attributedString": {
                        "_class": "attributedString",
                        "string": "One two three",
                        "attributes": [
                            {
                                "_class": "stringAttribute",
                                "location": 0,
                                "length": 13,
                                "attributes": {
                                    "underlineStyle": 0,
                                    "MSAttributedStringTextTransformAttribute": 0,
                                    "paragraphStyle": {
                                        "_class": "paragraphStyle",
                                        "alignment": 0,
                                        "lineHeightMultiple": 1,
                                        "maximumLineHeight": 24,
                                        "minimumLineHeight": 24
                                    },
                                    "strikethroughStyle": 0,
                                    "kerning": null,
                                    "MSAttributedStringFontAttribute": {
                                        "_class": "fontDescriptor",
                                        "attributes": {
                                            "name": "ProximaNova-Regular",
                                            "size": 16
                                        }
                                    },
                                    "MSAttributedStringColorAttribute": {
                                        "_class": "color",
                                        "alpha": 1,
                                        "blue": 0,
                                        "green": 0,
                                        "red": 0
                                    }
                                }
                            }
                        ]
                    },
                    "automaticallyDrawOnUnderlyingPath": false,
                    "dontSynchroniseWithSymbol": false,
                    "glyphBounds": "{{0, 6}, {101, 12}}",
                    "lineSpacingBehaviour": 2,
                    "textBehaviour": 0
                }

now, we can't support placeholders and values in inputs, selects, and textareas.
It will be similar to after, before pseudo.

[Question]

What is the proper workflow to iterate over patterns and have changes reflect on Sketch?

I'm using html-sketchapp-cli to generate my pattern lib and so far everything is working as expected. My problem is when I updated the code and generate new document.asketch.json and page.asketch.json files. As I import them, I lose all symbols references within Sketch app. I mean: all symbols been used in other pages turn into a red-striped-box and the Prototype side bar shows "Symbols is missing".

For now I can reconnect each symbols manually, but as the project grows big this will be unpractical. Especially as my intent is to share the JSON with other designers in my team.

I'm missing something here?

Thanks to @jeroenransijn we have support for 90/180/270/360deg linear gradient. Other angles are not yet supported.

If you are into math, please help!

Good place to start: https://github.com/brainly/html-sketchapp/blob/master/html2asketch/helpers/convertAngleToFromAndTo.js

Really happy that SVG support has landed but there's still one way to consume SVG that isn't yet supported in html-sketchapp.

We set SVGs as data URIs like so:

.thing {
	background-image: url(data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity" color="#384047" data-reactid="36"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>);
}

There's a whole world of complexity here as you can do a lot with a background like change the size, have it repeat, position it etc.

My naive hack to support our use case is as follows:

  function injectSVGbackground(node) {
    const { 'background-position': bgPos, 'background-image': bgImg } = window.getComputedStyle(node);

    if (bgImg.includes('svg+xml')) {
      const [x,y] = bgPos.split(' ');
      const [_, svg] = bgImg.match(/data:.+;charset=utf-8,(.+)/i);
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(decodeURIComponent(svg), "image/svg+xml");
      const svgNode = xmlDoc.querySelector('svg');

      svgNode.setAttributeNS(null, 'style', `position: absolute; top: ${y}; left: ${x}`);

      node.style.backgroundImage = 'none';
      node.appendChild(svgNode);
    }
  }

The above essentially extracts the svg text from the data URI and converts it into a a real svg element and injects it into the node it read it from. We set a specific background-position so getting the images coordinates is easier.

I'm not sure if this is even possible to support in the tool itself due to the complexity of trying to extract and position the svg element.

We have another case which doesn't work with the above code as it resizes the svg background using background-size and relies on the default background-position of 50% 50%.

Hoping the hive mind can come up with a solution.

#109 gave us basic support for background-image's and it works great on most pages:

before:

after:

but there are still a few cases where it fails e.g.

• brainly.com footer

• google.com search by voice icon

It would be nice to build in support for before and after elements.

Hi all,

Noticed the latest work done by @kdzwinel @KimDal-hyeong on adding SVG support (huge thanks, guys!) and had a go using the latest code (actually I was doing that while MR #47 was being put forward lol).
However, it's still not working for me. Code below:

<section>
  <svg class="sg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> 
    <g>    
      <polygon fill="#000000" points="8,0 16,8 16,16 10.1,16 10.1,12 5.9,12 5.9,16 0,16 0,8 "/>
    </g>
  </svg>
</section>

Build & inject go through without errors. Console throws no errors either.

What I end up after importing in Sketch is an empty 16x16 sg-icon Symbol. Empty as in the symbol has no layers or groups inside of it. Sure, the size of the symbol is correct (16x16) but I can't figure out why the actual vector isn't being imported inside of the symbol.

Happy to try any ideas you throw at me.

Would it be possible to simulate :hover/:active/:focus states when rendering? It seems like many sketch symbol libraries include some combination of these states for interactive components like buttons and inputs (e.g. a default button, a hovered button, and an active button). Right now to do this with html-sketchapp you have to build a way to manually force these states into your component code (e.g. a special .focused class). It would be nice if there was an API that could direct html-sketchapp to simulate these states instead. I'm thinking something like a "data-sketch-simulate-hover" attribute that you add to the "data-sketch-symbol" wrapper.

Is there a reason that this package hasn't been published to the NPM registry?

I'm not currently able to npm install html-sketchapp, and projects that depend on this one (like html-sketchapp-cli) have to install this package directly from Github, which is not ideal.

Somewhat related to #6. Looking at the source I don't see yet that it supports multiple box shadows. Which is a must for my use cases.

We should be able to support the following:

background-image: linear-gradient(to top, rgba(67, 90, 111, 0.06), rgba(67, 90, 111, 0.024));
box-shadow: rgba(67, 90, 111, 0.255) 0px 0px 0px 1px inset, rgba(67, 90, 111, 0.114) 0px -1px 1px 0px inset;

General multi parser

It might be nice to have a function or parser that simply splits the parts. I wrote something similar for background.js. I am not great at algorithms, there might be better approaches to this thing :)

const parts = [];
let currentPart = [];
let i = 0;
let skipComma = false;

// There can be commas in colors, carefully break apart the value
while (i < value.length) {
  const char = value.substr(i, 1);

  if (char === '(') {
    skipComma = true;
  } else if (char === ')') {
    skipComma = false;
  }

  if (char === ',' && !skipComma) {
    parts.push(currentPart.join('').trim());
    currentPart = [];
  } else {
    currentPart.push(char);
  }

  if (i === value.length - 1) {
    parts.push(currentPart.join('').trim());
  }
  i++;
}

Just upgraded Sketch, and when I run the plugin on some JSON that previously worked, nothing happens.

Dug into the console and found the following error message:

TypeError: MSAttributedString.alloc().initWithAttributedString is not a function. (In 'MSAttributedString.alloc().initWithAttributedString(attribStr)', 'MSAttributedString.alloc().initWithAttributedString' is undefined)
line: 767
sourceURL: /Users/mdalgleish/Library/Application Support/com.bohemiancoding.sketch3/Plugins/asketch2sketch.sketchplugin/Contents/Sketch/asketch2sketch.js
column: 72

What is resizingConstraint: 63 mean ?
I think it means you don't select anything about resizinng in sketch.
so what is resizingConstraint: 53 mean?
Did you hardcode it ?
@kdzwinel

For some reason it doesn't seem to work right now.

As @jeroenransijn suggested - create parsers folder in html2asketch and put all parsers in there (some of the parsers will need to be extracted from the nodeToSketchLayers.js)

Tried using this project to experiment both with a fork of https://github.com/brainly/html-sketchapp-example/ and this branch of seek-style-guide.

For both those projects, I was able to reproduce crashes with these steps:

1. Import an asketch file with some text values
2. Try to either edit a generated text layer or a new text layer
3. Sketch crashes

Was able to reproduce in both Sketch stable and beta.

Sketch Stable (47.1) Error Log

Error log linked in this gist

Sketch Beta (48) Error Log

Error log linked in this gist

Hello, super amazing project, got our team really excited about the potential.
I'm having some trouble running the project, getting stuck on the last step of the example.
I first run

npm i
npm run build

no problems with that, then on the last step

npm run inject http://sketchapp.com .

I get the result

$ npm run inject http://sketchapp.com .
npm ERR! missing script: inject

Here's the error log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/9.4.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'inject',
1 verbose cli   'http://sketchapp.com',
1 verbose cli   '.' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: inject
4 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:151:19)
4 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:61:5
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:115:5
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:402:5
4 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:357:45)
4 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:400:3)
4 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:160:5)
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:348:12
4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16
4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:528:3)
5 verbose cwd /Users/etsai/project/Side Projects/html-sketchapp
6 verbose Darwin 15.6.0
7 verbose argv "/usr/local/Cellar/node/9.4.0/bin/node" "/usr/local/bin/npm" "run" "inject" "http://sketchapp.com" "."
8 verbose node v9.4.0
9 verbose npm  v5.6.0
10 error missing script: inject
11 verbose exit [ 1, true ]

Looking for help on how to get past the error with Inject.
Thanks!

If you are into math and circles, please help! We have linear gradient support - https://github.com/brainly/html-sketchapp/blob/master/html2asketch/helpers/background.js - and it's probably the best place for you to start.

As discussed in chrisvxd/story2sketch#20

Before

nodeToSketchGroup(node);

(group A)
  (group B)
     (group C)
        layer

After

nodeToSketchGroup(node);

(group C)
   layer

❓Or should it be group A? Or maybe some new group that contains names of all A, B & C? 🤔

This project needs a web page to better explain its purpose, provide examples and better docs.

there might be a way to convert font names found in CSS to names used by MacOS because there seems to be a naming convention:

https://github.com/Yelp/salsa/blob/9d947fd8f26a349757df9df8f04ae5aee003d686/file_spec/textStyle.json#L10

yelp/salsa folks have a CLI tool that transforms their intermediate format (salsa) to .sketch. This removes the requirement of having Sketch installed and should work much faster than import via plugin. W/O Sketch dependency html-sketchapp could work in CI environment (although OSX dependency still makes it hard).

The whole CLI tool wouldn't have to be written in Swift/Objectve-C (as salsa). We could have a node CLI tool that calls two native modules:

• SVG importer
• Text transform

https://github.com/Yelp/salsa/blob/master/SalsaCompiler/SalsaCompiler/SketchJson/Text%2BSketchJson.swift

Hey guys, thanks for all the awesome work!! I think I found a bug with the text color getting changed to black. I first noticed when I upgraded to Sketch 50 this morning and saw all my buttons now have black text, instead of white. I was able to reproduce the issue pretty easily using the html-sketchapp-example and pointing to a local server running the default page generated from create-react-app.

Here's what it generates, vs what is on the page:

So far I've only seen it affecting text colors and it doesn't seem to matter what color, or what type of color value I use - it always turns it black.

Looking at the generated page.asketch.json file it seems to have the incorrect value when the asketch is being produced:

Relevant section:

        "name": "Welcome to React",
        "nameIsFixed": false,
        "resizingConstraint": 47,
        "resizingType": 0,
        "rotation": 0,
        "shouldBreakMaskChain": false,
        "style": {
            "color": "rgb(0, 0, 0)",
            "fontSize": 24,
            "fontFamily": "sans-serif",
            "fontWeight": 700,
            "textTransform": "none",
            "textDecoration": "none",
            "textAlign": "center"
        },
        "layers": [],
        "frame": {
            "_class": "rect",
            "constrainProportions": false,
            "height": 27,
            "width": 206.28125,
            "x": 536.859375,
            "y": 120.078125
        },
        "text": "Welcome to React",

Hi,

I tried to convert a webpage with lists (<ul>, <ol> and <li>), but didn't seem to work. Is this a current limitation?

I tried this using React-SketchApp but didn't work either.

If you get it working, it maybe another great reason to support the direction mentioned in #37

Also, if it did/does work, would it also resolve this issue in Sketch:
Bullet lists in Sketch are limited as you can't change the circles color or adjust indent etc.