Code generation

Style Parsing

Sketch file anatomy

A Sketch file (*.sketch) from version 49 is an archive with the following content:

.
+-- pages/
|   *.json
+-- previews/
|   +--preview.png
+-- meta.json
+-- user.json

The meta.json file is the entrypoint of the file that describes the sketch project. And referencing all pages files present under the pages folder by their hash in the "pagesAndArtboards" key.

{
  ...
  "pagesAndArtboards": {
    "*": {
      "name": "String",
      "artboards": {}
    }
  },
  ...
}

The page file include a root object defining the page information and a recursive tree of layers providing a bunch of data and properties (position, styles, dimensions...) about the actual design produced by SketchApp.

{
  "_class": "String",
  ...
  "frame": {
    "_class": "String",
    "constrainProportions": "Boolean",
    "height": "Number",
    "width": "Number",
    "x": "Number",
    "y": "Number"
  },
  ...
  "style": {
    "_class": "style",
    ...
  },
  "layers": [{
    "_class": "group",
    ...
    "layers": [{
      ...
    }]
  }]
  ...
}

Style consistency

The parser is the core component of xLayers which maintain style consistency across all the different components by using a service called "SketchStyleParser" whose job is to convert raw Sketch AST properties to CSS rules using an adaptive strategy to maintain compatibility across Sketch versions from 49 to current. Which will serve as a common language to separate the interpretation logic from the viewer and code generator.

Property extraction

For this purpose, the parser is designed in 3 levels. The first is the visitor who will go through all the layers recursively, move the style scope when we encounter a Rectangle object and then at every layer the visitor will extract infromation and inject them into the AST.

The Group is used to extract layer spacial property such as position and size; the AttributeString parser is mostly used for retrocompatibility with text property and Object is used all other styles such as shadow.

And then these are transform methods which are called by microparsers" to translate Sketch object from the AST to CSS rules.

                       +---------+
                       |         |
+------------+    +----v----+    |
|            |    |         |    |
| Sketch AST +----> Visitor +----+
|            |    |         |
+------------+    +----+----+
                       |
                   +---v----+
                   |        |
                   | Parser |
                   |        |
                   +---+----+
                       |
                 +-----v-------+
                 |             |
                 | Transformer |
                 |             |
                 +-------------+

Sketch exploitation

View

To provide user a preview of their component we provide a view that will consume injected information by the parser and re-build the AST with component.

.
+-- SketchContainer
|   +-- TreeViwer
|       ...
|   +-- SketchPage
|      +-- SketchLayer
|          +-- SketchLayer
|              ...

Component generation

The Code generation (internaly called codegen) consume the same way as the view but unlike the view. The codegen will produce code via adapter.

+------------+    +----------------+    +-----------------------+     +------+
|            |    |                |    |                       |     |      |
| Sketch AST +----> CodegenService +----> AngularCodegenService +-----> Code |
|            |    |                |    |                       |     |      |
+------------+    +----------------+    +----------^------------+     +------+
                                                   |
                                        +----------+-----------+
                                        |                      |
                                        | SharedCodegenService |
                                        |                      |
                                        +----------------------+

The "SharedCodegenService" is a common service to every adapter that can generate basic HTML/JSX and CSS. And exposed different basic methods to generate XML balise.