Sketch CSS

In case you’re here and don’t know Sketch, take a look at sketch package!

This readme is a carbon-copy of the Sketch CSS section in sketch readme.

Sketch CSS is a tool to generate CSS from Sketch Class definitions. Because pure CSS generation is straightforward, sketch_css does not need a cache to generate correct CSS files. Instead, sketch_css ships with a CLI tool, able to read your Gleam styles files, and output corresponding your CSS automagically, while providing an abstraction layer written in Gleam, to make sure you’re using the right classes! It’s an other way to leverage on Sketch core and enjoy the styling in Gleam, while taking advantage of all the static CSS power!

To run the generator, you have to use the command gleam run -m sketch/css generate at the root of your project. By default, sketch_css will try to read all files named *_styles.gleam, *_css.gleam and *_sketch.gleam in your src folder, no matter where they are. You can put them at root, nested, or in a folder called css, sketch_css does not care! After fetching the styles files, sketch_css will output your generated CSS files in a styles folder, at the root of the project. They can then be served in the way you want. In the same time, sketch_css will output Gleam interfaces in src/sketch/styles, matching your styles files, to use in your project!

Options

Sketch CSS generation has strong defaults, but everything can be customised. Use the CLI flags to configure what you need. CLI exposes 3 flags:

• --dest, accepting a folder, relative to current directory. It defaults to styles
• --src, accepting a folder, relative to current directory. It defaults to src.
• --interface, accepting a folder, relative to current directory. It defaults to src/sketch/styles.

A note on generation algorithm

Because a Sketch Class can be generated in multiple ways, and with variable, Sketch CSS takes that into account. Every simple Sketch Class will be iso generated in CSS, but every Sketch Class that contains variable will be generated with the variable taken into account! Sketch CSS being opinionated, it generates the class, with a CSS variable, letting you update it, override it, etc.

All _ are also automatically transformed into -, because CSS classes are most of the time used with dashes, so Sketch CSS follows that convention!

Example

// src/main_styles.gleam
import sketch

fn flexer() {
  sketch.class([
    sketch.display("flex"),
  ])
}

fn flexer_direction(flex_direction: String) {
  sketch.class([
    sketch.compose(flexer()),
    sketch.flex_direction(flex_direction),
  ])
}

/* styles/main_styles.css */
.flexer {
  display: flex;
}

.flexer-direction {
  flex-direction: var(--flex-direction);
}

// src/sketch/styles/main_styles.gleam
pub const flexer = "flexer"

pub const flexer_direction = "flexer flexer-direction"