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 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 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. To pass options to Sketch CSS, you have three ways:

• Pass them directly on the CLI. Every option has its equivalent exposed in the CLI.
• Write them in a sketch_css.toml file, at root of your project, next gleam.toml.
• Write them directly in gleam.toml, under [sketch_css] section.

Sketch CSS has 3 distinct options:

• --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.

Write directly the folder, path resolution is done with current working directory as root.

Examples

gleam run -m sketch_css generate --src="src" --dest="styles" --interface="src/sketch/styles"

# sketch_css.toml
src = "src"
dest = "styles"
interface = "src/sketch/styles"

# gleam.toml
name = "name"
version = "1.0.0"

[sketch_css]
src = "src"
dst = "styles"
interface = "src/sketch/styles"

[dependencies]
gleam_stdlib = ">= 0.34.0 and < 2.0.0"
sketch = ">= 4.0.0 and < 5.0.0"
sketch_css = ">= 2.0.0 and < 3.0.0"

[dev-dependencies]
gleeunit = ">= 1.0.0 and < 2.0.0"

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.

Sketch CSS also acts as a basic interpreter. It means you can write basic constants or variables, and they will be taking into account. Be sure to write classes like you would do in CSS yet: Sketch CSS does not execute your functions!

Example

// src/main_styles.gleam
import sketch/css

pub fn flexer() {
  let display = "flex"
  css.class([css.display(display)])
}

fn direction(flex_direction: String) {
  css.flex_direction(flex_direction)
}

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

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

.main_styles-flexer_direction {
  display: flex;
  flex-direction: var(--flex-direction);
}

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

pub const flexer_direction = "main_styles-flexer_direction"