Forem: Tom Quinonero

We can use :has, finally!

Tom Quinonero — Mon, 19 Jun 2023 11:05:21 +0000

For years, CSS developers have wished for the ability to select an element based on its content. Although CSS provides selectors that can select elements based on a lot of characteristics, until recently there was no way to select an element based on what it contained.

Fortunately, the introduction of :has() changed this. This new feature is a game-changer, as it allows you to select an element based on its content.

In this post, we’ll dive into one of the most anticipated CSS features: the :has pseudo-class. And it turns out to be much more than “just” a parent selector.

The Syntax

The :has pseudo-class is used to select elements based on their contents. It is applied to the element we want to apply rules to, and we pass it to the selector of the element it should contain:

/* Here we target any element with the */
/* class `post` containing an `h1` */
.post:has(h1){
    background-color: teal;
}

Using `:has` as a parent selector

Using :has as a parent selector can simplify many situations. Here are some examples that come to mind:

On some pages of your app, you may want to change the global font size or background color of the body element. Previously, before the :has pseudo-class was introduced, we would have needed the backend to toggle some HTML class based on the page type. However, with a parent selector, this is now trivial:

  body:has(.container.legal-mentions) {
    font-size: 80%;
  }

On our list of blog posts, we want posts to change not have margin if the post contains an image:

  .post:has(img){
    margin-left:0;
  }

This is extremely powerful in itself, but we can do even more when using combinators.

Going further with Combinators

Combinators combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
— MDN

We can use the child combinator > inside has to ensure that we are selecting a direct child element. For example, to select a div element that has a hr element as a direct child, we can use the selector div:has(>hr).

We can use the adjacent sibling combinator + to target an element followed by another element. For example, to select a title followed by a subtitle, we can use title:has(+.subtitle).

Combining with other Pseudo-classes

Changing the style of a container when hovering over a child element sounds pretty cool, doesn't it?

We can achieve this by combining has with hover. For example, if we want a container to have a border whenever one of its links is hovered, we would use the following code:

.container:has(a:hover){
    border: 2px solid pink;
}

Browser support

As of June 2023, the :has pseudo-class is missing only in Firefox. However, it is behind a flag, so it should be supported soon!

Conclusion

The :has pseudo-class is a powerful addition to the CSS selector arsenal. It allows you to select elements based on their contents, which can simplify many situations and make your code more maintainable. By using combinators, you can further refine your selections and achieve even more advanced effects.

While it is still missing in Firefox, it is expected to be supported soon. As always, make sure to test your code in all major browsers before deploying it to production.

Thanks for reading, and happy coding!

Learn how to use combinators and other pseudo-classes to achieve even more advanced effects.

Sources and Links

I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources 🤙

Introduction to Cascade Layers in CSS

Tom Quinonero — Thu, 17 Nov 2022 21:23:11 +0000

Cascade layers is a new API that is currently being implemented into our browser. As of writing this, the support is quite impressive already.

Cascade layers allow encapsulation of our CSS rules that can be ordered by specificity. It offers cascade management without the hassle of specificity hacks and abuse of !important.

With CSS, one of the things I see people struggle the most with is writing selectors the right way. There are tons of ways to write a selector that will produce the same results, and it can be confusing.

When a selector isn’t working as intended, what should we do?

Should we “artificially” increase its specificity by adding selectors we don’t need?
Should we move it down our CSS file?
Should we reduce the colliding selector specificity?

BEM coupled with SCSS helps a lot to reduce these issues.
The principle is to namespace class names, so we can select anything using only one class selector. Everything has the same specificity.

A promising idea on paper, but it has its caveats on a large codebase spread around large teams.

Cascade layers allow us to encapsulate specificity of selectors to avoid collision in our style.

How Does the Cascade Work?

To use cascade layers, we first need to understand how the cascade worked before its introduction.

The cascade is how the browser resolves conflicts between rules affecting the same element.

We can interact with it using the selector specificity and adding !important to our declarations.

The Cascade Origin

Before Cascade layers, we already had Cascade layers of some sorts. We called them cascade origins.

There are 3 origins for CSS rules:

User agent styles are the default styles from your browser, they define spacing, font sizes and set a lot of defaults
User styles are provided by the user, but most browser will only let you choose a font size and family
Author styles are the one we – the CSS developers – write for a living, and it has the highest specificity

Different origins get different specificities

These origins encapsulate the specificity, exactly like Cascade layers do.
If you define a rule with a high specificity in the user origin, it can be overwritten with a lower specificity selector in the author style, because the author origin has a higher specificity than the user origin.

The confusing way `!important` works

Since user styles have higher specificity than browser style, we’d expect an !important rule in user style will have higher specificity than an important rule in browser style, right?
Well, not exactly. Because when using !important, the cascade origin order is reversed.

Meaning the lowest specificity origin has the highest for rules using !important.

Cascade origins, from least specific to most:

Browser declarations
User declarations
Author declarations
!important Author styles
!important User styles
!important Browser styles

Cascade origins order is reversed when using !important

Adding Cascade Layers in the Mix

Now that we studied how the cascade worked before the introduction of the Cascade layers API, let’s see what this new API brings to the table.

CSS Cascade layers provides a @layer rule we can use to define cascade layers.

These layers contain the specificity of selectors, meaning a high specificity selector can easily be overwritten by a lower specificity selector in a higher specificity layer.
The @layer keyword wrap CSS selectors like media queries would do:

@layer reset {
  .link {
    color: blue;
  }
}

@layer base {
  a {
    color: red;
  }
}

In this example, an a element with the link class will appear red, since the base layer has a higher specificity.

⚠️ Note that non-layered selectors have higher specificity than any layered selector.

The later a layer is defined, the higher its specificity, but we can declare their order up-front.

In this example, the reset layer has the lowest priority beside its rules living later in the code:

@layer reset,base,utilities;

@layer base {
  ...;
}

@layer utilities {
  ...;
}

@layer reset {
  ...;
}

Also, we can encapsulate whole files into a layer using @import:

@import url("reset.css") layer(reset);

The usage of `!important`

Note that the usage of !important in layers works the same way that in the origins, meaning the !important rules in the lowest specificity layer have the higher specificity.

Conclusion

I find this way of encapsulating CSS very useful. I can imagine using a date picker JS library that needs some CSS. By encapsulating that CSS into a layer and making it a higher priority than the base CSS, we ensure that none of our base styles will override that library CSS.

I strongly recommend you to pass this short quiz on CSS Tricks to test your knowledge on cascade layers.

Sources:

CSS Cascading and Inheritance Level 5: the W3C draft for the feature
A Complete Guide to CSS Cascade Layers: A very complete and detailed guide on the matter, by Miriam Suzanne
CSS Cascade Layers Explained by Pierre H.
Hello, CSS Cascade Layers by Ahmad Shadeed

I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources 🤙

A Short Introduction to Display: Contents

Tom Quinonero — Sat, 23 Apr 2022 07:36:10 +0000

Sometimes, we need an element to be in our HTML for semantic reasons, but our life would be much easier if it just wasn’t there.

In some cases, we do not even have control over the HTML.

That is when display: contents come to the rescue.

In this short post, we’ll examine how this property behave and what are its limitations.

An “Undesired” HTML element can be tricky to work with when using flex or grid items.

Using display: contents on an element will make the container disappear, and its children will act as the children of the element’s parent.

Let’s take a timeline view displaying each year using display: flex, if we need to highlight the years after 2000, we might want to group them into a div with a class, but that container would break the flex!

We can use display: contents on this element to avoid that side effect:

<div class="years">
    <div class="year">1996</div>
    <div class="year">1997</div>
    <div class="year">1998</div>
    <div class="year">1999</div>
    <div class="recent">
        <div class="year">2000</div>
        <div class="year">2001</div>
        <div class="year">2002</div>
        <div class="year">2003</div>
    </div>
</div>
<style>
.years{
    display: flex;
}
.recent{
    display: contents;
    font-weight: bold;
}
</style>

Having the .recent container set to display: contents will essentially make all .year behave like children of .years.

With display: contents the box disappear, so you cannot stylize it, meaning no background, padding. You can however use color, font size and all the inline style properties.

Also, modern browsers supports it!

I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources 🤙

The Ultimate Guide to CSS Houdini

Tom Quinonero — Wed, 08 Dec 2021 15:31:59 +0000

A complete guide of the Houdini APIs, example of usage and its browser support

What is Houdini anyway? 😠
Me, like two year ago

I learnt a lot about Houdini last year, and I'm amazed by all the possibilities it offers. I'm convinced Houdini is the future of CSS, and it was time for me to write the ultimate guide for it!

Houdini is a collection of browser APIs that allows JavaScript to interact with the CSS rendering engine.

Quite exciting!It allows us to create complex layouts, custom and programmable backgrounds, advanced animations and way more.

In this post, we'll walk through each API of the specification and examine the compatibility.

There are two groups of APIs:

Low-level APIs that are the building blocks for the high-level APIs. These are the Type Object Model API, the CSS Properties & Values API, Font Metrics API and Worklets.
High-level APIs interact with the CSS rendering engine. They consist of the Paint, the Layout, and Animation API.

Ready? Let's start!!

Low-level APIs

Type Object Model API

Interacting with CSS properties using JS can be painful, especially when using units.

You'll have to work with a string containing the whole CSS value, something looking like 120px or 2.4rem.

Type Object Model API exposes these values as a JS object:

{
  value: 2.4, 
  unit: "rem"
}

Much better to work with!

Our DOM elements now got a computedStyleMap method to work with the non-inline style and the attributeStyleMap attribute to work with inline styles.

⚠️ Careful, while attributeStyleMap is an attribute, computedStyleMap is a method (a method is a function in an object) and needs to be called before we can access anything.

Here is how we use these properties:

// Set and get an inline style
element.attributeStyleMap.set("width", CSS.rem(48))
element.attributeStyleMap.get("width")
// => {value: 48, unit: "rem"}

// Set and get computed style (note the "()" after computedStyleMap)
element.computedStyleMap().set("height", CSS.em(12))
element.computedStyleMap().get("height")
// => {value: 12, unit: "em"}

In October 2021 this is supported in every browser except Firefox and Safari.

CSS Properties and Values API

The CSS Properties and Values API allows us to define CSS Custom Properties (aka CSS variables) in a more precise way.

We can now define a type, an initial value and its inheritance behavior.

To define a property, we use registerProperty as such:

CSS.registerProperty({ 
  name: "--brandingColor",
  syntax: "<color>", 
  inherits: false,
  initialValue: "goldenrod",
});

We'll be able to define it in the CSS in the future:

@property --brandingColor{ 
  syntax: "<color>"; 
  inherits: false; 
  initial-value: goldenrod;
}

The syntax property represents the type of the value. It accepts: <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer> and <angle>. There is more on the W3C specification.

Setting the syntax helps the browser knowing how to transition between values.

In CSS, you can transition between colors but cannot between gradients.

Here, by defining --brandingColor we can, for example, animate a gradient 😎

That is how we proceed:

.element{
    --brandingColor: goldenrod;
    background: linear-gradient(90deg, khaki 0%, var(--brandingColor) 100%);
  transition: --brandingColor 800ms ease-in-out;
}

.element:hover{
    --brandingColor: gold;
}

The hover animation will only work if the --brandingColor property type is <color>.

If your browser supports this API, the block should animate on this demo:

In October 2021 this is supported in every browser except Firefox and Safari.

Font Metrics API

Font Metrics API aims to give developers dimensions of text elements. It is really complex and hacky to do this right now, so this will solve a lot.

Unfortunately, this interface is still in its early stage and is not supported in any browser yet.

Worklets

Worklets are scripts that plugs to low-level parts of the rendering engine. It runs JavaScript and WebAssembly code.

Houdini introduces three Worklets: the Pain Worklet, the Layout Worklet and the Animation Worklet that are used to power our high-level APIs.

High-level APIs

Paint API

Paint API let us use the 2D Rendering Context to draw backgrounds, text, and borders. We can draw using JS function, and we can use CSS Variables as parameters for this function.

To use the Paint API:

Register the Paint Worklet
Add it as a module
Call it with paint() in your CSS

The Paint Worklet code needs its own JS file.
This is how you register it:

// cornerbox.js

class CornerBox{
  paint(ctx, geom, properties) {
      // The actual painting happens there
  }
}

// Register our class under a specific name
registerPaint('cornerbox', CornerBox);

Then, we need to add it as a module where we put our JavaScript. We also declare the property we might want to animate using the CSS Property and Value API:

//main.js

// We register the property we want to animate
CSS.registerProperty({ 
  name: "--cornerbox-length",
  syntax: "<length>", 
  inherits: false,
  initialValue: "120px",
});

CSS.registerProperty({ 
  name: "--cornerbox-width",
  syntax: "<length>", 
  inherits: false,
  initialValue: "16px",
});

// Add the module from a local file
CSS.paintWorklet.addModule("./cornerbox.js");
// Or add it from a CDN
CSS.paintWorklet.addModule("https://unpkg.com/cornerbox@0.0.3/CornerBox.js");

We can now use paint(cornerbox) in our CSS:

.element {
  width: 20rem;
  height: 20rem;
  --cornerbox-color: #5f64e2;
  --cornerbox-length: 120px;
  --cornerbox-width: 16px;
  background: paint(cornerbox);
  transition: --cornerbox-length 400ms ease-in-out, 
        --cornerbox-width 400ms ease-in-out;
}

.element:hover{
  --cornerbox-length: 220px;
  --cornerbox-width: 24px;
}

We use --cornerbox-length, --corner-width and --corner-color to configure our corner-box.

Have a look at the demo below to see it in action 🤙

This wraps up the Paint API section.

Paint Worklets is what hooked me to Houdini in the first place!

There are endless applications to this 🤗✨

You should definitely check out Houdini.how! It's a collection of Paint Worklets that are ready to use. This is where the Corner Box worklet comes from.

In October 2021 this is supported in every browser except Firefox and Safari.

Layout API

The Layout API allows us to define new layout modes that can be used as a display property in our CSS.

It opens up a lot of possibilities! But this is a complex one and the specification is not definitive yet.

For more information, have a look at the specification on W3.org.

We'll show a working example, but not dive too deep into the code.

In this section, we'll use the Google Chrome Lab's Masonry Worklet.

That is what a Layout Worklet look like (the logic has been removed here):

// masonry.js

registerLayout('masonry', class {
  static get inputProperties() {
    return [ '--padding', '--columns' ];
  }

    static get inputProperties() {
    return [ '--order' ];
  }

  async intrinsicSizes() {}
  async layout(children, edges, constraints, styleMap, breakToken) {
    // The actual code happens there
  }
});

Like a Paint Worklet, let's add it as a module:

// main.js 

// local
CSS.layoutWorklet.addModule("./masonry.js");
// elsewhere
CSS.layoutWorklet.addModule("https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/master/layout-worklet/masonry/masonry.js");

And use it in our CSS:

.element{
    --padding: 20;
  --columns: 2;
    display: layout(masonry);
}

And… We got a masonry layout working!

Have a look at the demo:

This is exciting, but not quite ready for now. It is not documented on MDN yet, and the implementation will likely change in the future.

Let's wait a few years on that one!

In October 2021 this feature is hidden behind a flag (Experimental Web Platform features) in every browser except Firefox and Safari.

Animation API

Animation API allows us to make advanced animations!

It aims to provide developers with a more performant way of animating using CSS.

Let's register our Animation Worklet:

//superBounce.js

registerAnimator("superBounce", class {
  constructor(options) {
    // Our code goes here
  }
  animate(currentTime, effect) {
    // Our code goes here
  }
});

And add it as a module:

// main.js

CSS.animationWorklet.addModule("./superBounce.js");

To use an Animation Worklet we need to declare what we would normally declare in a @keyframes in JavaScript.

Let's put side to side what we would do with keyframes and what we would do using JavaScript:

// Using the CSS approach

.element{
    animation: bounce 800ms ease-in-out infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
}

// The JavaScript approach

const keyframes = [{
    transform: 'scale(1)',
    offset: 0
  },
  {
    transform: 'scale(1.1)',
    offset: 0.25
  },
  {
    transform: 'scale(1)',
    offset: 0.50
  },
  {
    transform: 'scale(1.15)',
    offset: 0.75
  },
]

const timing = {
  duration: 800,
  easing: "ease-in-out",
  iterations: Infinity
}

const element = document.querySelector('.element--js')
element.animate(keyframes, timing)

Using JavaScript, we can do a bit more than we CSS. For example, we can define the easing in each keyframe.

Also, we can bind the animation progress to Scroll Events, play and pause it at will, change the playback rate, reverse the animation etc…

Here is a demo on CodePen:

That's it, we learned how to make custom animation using the Web Animation API 😎

For a more in-depth read, read the MDN guide about Web Animation API.

In October 2021 this feature is hidden behind a flag (Experimental Web Platform features) in every browser except Firefox and Safari.

Conclusion

I am personally very much excited about all these new features, especially the Paint API!!

I would love to see in the future a lot of available layout and paint worklets that we could customize using CSS variables.
That'll be an outstanding new step for CSS 😍

I'm Tom Quinonero, I write about design systems and CSS, Follow me on Twitter for more tips and resources 🤙

Sources and links

CSS Houdini Playground: A CodePen collection I made to illustrate this post
A Practical Overview Of CSS Houdini by Adrian Bece: An exhaustive and clear guide on Houdini. Probably the best thing to read if you want to go deeper!
Paintlets: A gallery of tweakable and downloadable paint worklets (Chrome only)
Houdini.how: A library of Worklet, mostly Paint worklets
Houdini Spellbook: A nice introduction guide to Houdini
Houdini Samples: A GitHub repository with nice worklets examples
Generating Knockout Text with the CSS Paint by James South
Houdini on MDN

Write modern CSS with PostCSS

Tom Quinonero — Tue, 16 Nov 2021 12:28:07 +0000

What is PostCSS?

PostCSS is a tool that builds CSS using JavaScript.

PostCSS allows developers to write simpler CSS and push the complexity at build time. It act as a pre-processor, an autoprefixer and a linter for your CSS code.

It has a plugin ecosystem that opens us to tons of possibilities.

Ever wanted to use custom media queries? Want to mess with CSS Houdini?

Wouldn't that be cool if the @font-face were generated automatically?

Hey, we can even use container queries right now with PostCSS (and a small Polyfill✌)!

Usage

To use PostCSS in your project, find and add the PostCSS extension to your build tool:

Webpack: Use postcss-loader
Gulp: Use gulp-postcss
Parcel: PostCSS is already included in Parcel!
CLI: You can also use PostCSS in your terminal with postcss-cli

You can configure PostCSS with a postcss.config.js with all of these extensions.

For our example, we'll use the most generic solution, the CLI.

Let's start a new project and install our dependencies:

yarn add -D postcss postcss-cli

We'll also create a src/style.scss file.

We can now tell PostCSS to build our file and output it to dist/style.css:

yarn postcss src/style.scss -o dist/style.css

Let's make it into a build and a dev NPM script, so we can call it easily:

{
    ...
    "scripts": {
    "build": "yarn postcss src/style.scss -o dist/style.css",
    "dev": "yarn postcss src/style.scss -o dist/style.css --watch"
  }
    ...
}

When running PostCSS we'll have a warning message saying:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

So let's add some plugins!

yarn add -D postcss-import cssnano autoprefixer

Let's create a postcss.config.js config file:

// postcss.config.js

module.exports = {
  plugins: [
    require("postcss-import"),
        require("autoprefixer"),
    require("cssnano")({
      preset: "default",
    }),
  ],
};

This configuration will allow you to use @import, prefix the properties that needs to and will minify it!

This is how you use any PostCSS plugin. And that config file can be imported into any project!

In the next section, I've listed the most game changer PostCSS plugins to me.

Notable PostCSS Plugins

PostCSS Sprites: Group all your image into a large sprite using background-position. A painful process made so simple!
RuckSack: A lot of small few quality of life improvements, my favorite being using making HEX color transparent using rgba(#fff, 0.8)
Easing Gradient: Make non linear gradients like so: background: linear-gradient(to bottom, black, ease, transparent)
Font Magician: Magically generate @font-face rules! They can be stored locally or come from Google font!

Congratulations 🥳
You now get PostCSS, and can integrate it to your project

I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources 🤙

A guide to CSS container queries

Tom Quinonero — Tue, 21 Sep 2021 12:46:10 +0000

Right now (September 2021) container query is still an early stage specification.
It is only supported by Chrome with a flag and the implementation might change in the future.
But there is Polyfill based solution that we through at the end of the post.

In CSS, we can use media-queries to adapt the layout based on the viewport size. It allows us to adapt the layout based on the screen size of the user.

We take it for granted but back in the days this was a life changer!

But we can still do better.

The use case

We think way more in terms of components nowadays and we'd like components to behave based on the space they've been given, not the layout size.

Let's say we have a card that supports a narrow and a compact layout.

Wouldn't that be cool if CSS could switch this layout based on the parent width?

Selecting the layout based on the viewport doesn't make a lot of sense here. What matter is how much room is available for the card, the container.

This open to a lot of neat things! We can now let our component adapt their layout seamlessly 🤙

The code

Container queries needs the container to have a container-type property. It defines which query type we can use. For example to query the width we'll put the following on the container:

.container {
  container-type: inline-size;
}

We can now use @container on our component:

@container (min-width: 600px) {
  .card {
    display: flex;
  }
}

And that is basically it, that simple.

Have a look at that demo:

Polyfill to the rescue

Right now, container queries are not supported in any browser.

But hold on, we can still make it work. I found the easiest solution to be Jonathan Neal's CQFill.

We will need to make changes to the CSS. Let's add a --css-contain: layout inline-size; to the container and we'll make a new selector with @media --css-container and (min-width: 400px) after the @container one. There is also a PostCSS plugin for that.

Our code now look like this:

.container {
  container-type: inline-size;
  /* For the Polyfill */
  --css-contain: layout inline-size;
}

@container (min-width: 600px) {
  .card {
    display: flex;
  }
}

/* For the Polyfill */
@media --css-container and (min-width: 400px) {
  .card {
    display: flex;
    gap: 16px;
  }
}

We'll also import the Polyfill itself in our code using:

<script src="https://unpkg.com/cqfill"></script>

And that will make container queries work on any browser!

For more information, check out the CQFill repository.

This is everything needed to get started with container queries, congratulations 🥳

If you want to apply your fresh knowledge, a good challenge is to create a blog post component that can be used in the main list, in the sidebar and in the recommended post list.

I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources 🤙

Does your Figma Plugin really need an UI?

Tom Quinonero — Wed, 15 Sep 2021 12:51:03 +0000

So, have you heard creating Figma plugins just got easier?

Figma

@figmadesign

But wait, there's more! Today we’re also releasing a faster way to build more powerful plugins.

With plugin parameters you can use quick actions to accept user input, eliminating the need to create your own UI.

Check out some examples to start building: github.com/figma/plugin-s…

22:12 PM - 17 Aug 2021

We can now create headless plugins and that is a great news 🥳
Check the full post there.

I've wrote in the past about creating your Figma plugin using svelte. And you should consider using that method if you need an UI for your plugin.

However, if your scope is smaller, why bother creating an UI at all?
A lot of plugins just need one or two inputs from the user to operate, and the Plugin Parameters covers that need.

The Headless approach means we don't need an UI, no HTML, no CSS, no need to pack a reactive framework.
Just vibes 😎

Prerequisites

To follow this post, you'll need to have already worked on JS projects before. A basic understanding of TypeScript can help too.

You need to have a node development environment and yarn or npm.

You can use Windows or Mac. You cannot test plugins on the Linux desktop app for now unfortunately, so Setup WSL if you are using Windows.

Setup

I'm using yarn on this process because I like it, but everything works with NPM too.

Open a Terminal in your project folder. Let's create a repository for our plugin and set up our package manager:

mkdir <your-plugin-name>
cd <your-plugin-name>
yarn init

Let's now open our project in our code editor. Here is for VS Code users :

code .

We'll build our JS using rollup. We can use modern JS/TS with importas an input and it will output a built JS with needed dependencies attached.

Let's add necessary dev dependencies:

yarn add -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser @rollup/plugin-typescript typescript tslib @figma/plugin-typings

Let's create a src folder and let's put in it an empty code.ts file.

We'll use TypeScript so we can get Figma plugin API types definitions. Very useful 😁

Then create a rollup.config.js at the root of our project and throw it that:

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

// Minifier
import { terser } from 'rollup-plugin-terser'

// Typescript
import typescript from 'rollup-plugin-typescript'

const production = !process.env.ROLLUP_WATCH

export default [
  // CODE.JS
  // The part that communicate with Figma directly
  // Communicate with main.js via event send/binding
  {
    input: 'src/code.ts',
    output: {
      file: 'public/code.js',
      format: 'iife',
      name: 'code',
    },
    plugins: [
      typescript(),
      resolve(),
      commonjs({ transformMixedEsModules: true }),
      production && terser(),
    ],
  },
]

This will build src/code.ts to public/code.js.

Let's create a script for it in our package.json:

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
  },

We can now run yarn dev and yarn build. The dev script will watch any changes while the build will just execute once.

Last thing we need to do is to add a tsconfig.json file at the root and write down:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "typeRoots": ["./node_modules/@types", "./node_modules/@figma"]
  },
  "include": ["./src"]
}

That'll handle TS for our project.

We already have a working development environment ! Yay!
Next section is about registering your plugin in Figma so you can try it 🥰

Registering the plugin

We need a manifest.json to interact with Figma. It'll define the name of our plugin, the location of your plugin itself (here public/main.js, the file we built with rollup) and later we'll add the parameters there.
Create manifest.json at the root of your project and copy paste this:

{
  "name": "<your-plugin-name>",
  "id": "<fill-that-before-publish>",
  "api": "1.0.0",
  "main": "public/code.js",
  "parameterOnly": true
}

On any Figma project, you can Right click → Plugins → Development → New Plugin... and choose a manifest file.

Select the newly created manifest.json and you can now launch your plugin in Figma by doing Right click → Plugins → Development → <your-plugin-name>.
You can also Cmd/Ctrl+P and type the plugin name, super useful shortcut

Nothing will happen if you launch it yet though. The next section is about getting a plugin that actually does something.

Defining parameters

In this section, our plugin will create a square or a circle and ask for its size.
This simple example will show you enough to create your own thing afterward.

Our example needs two parameters: type and size. Let's add them at the end of our manifest.json:

{
  ...
    "parameters": [
        {
            "name": "Shape type",
            "key": "type"
        },
        {
            "name": "Shape size",
            "key": "size"
        }
    ]
}

Next step let's fill our code.ts with:

// This part is about getting the params from our user
figma.parameters.on(
  'input',
  (
    {parameters, key, query, result}: ParameterInputHandlerArgs
  ) => {
    switch (key) {
      case 'type':
        const types = ['Square', 'Circle', 'Star']
        result.setSuggestions(types.filter((s) => s.includes(query)))
        break
      case 'size':
        const sizes = ['50', '100', '200', '400']
        result.setSuggestions(sizes.filter((s) => s.includes(query)))
        break
      default:
        return
    }
  }
)

// This part is about actually doing the stuff
figma.on('run', async (event: RunEvent) => {
  if (event.parameters) {
    console.log(event.parameters)
  }

  figma.closePlugin()
})

This code will handle the suggestion for typeandsize. It'll also close the plugin when this is done. Nothing more for now.

When launched, it should look like this:

This post is not about interacting with the Figma API itself, so we'll skip that.

Here how your code.ts should look like:

// We define how our parameters look like
interface PluginParameters {
  size: string
  type: 'Square' | 'Circle' | 'Star'
}

// This part is about getting the params from our user
figma.parameters.on(
  'input',
  (
    {parameters, key, query, result}: ParameterInputHandlerArgs
  ) => {
    switch (key) {
      case 'type':
        const types = ['Square', 'Circle', 'Star']
        result.setSuggestions(types.filter((s) => s.includes(query)))
        break
      case 'size':
        const sizes = ['50', '100', '200', '400']
        result.setSuggestions(sizes.filter((s) => s.includes(query)))
        break
      default:
        return
    }
  }
)

// This part is about actually doing the stuff
figma.on('run', async (event: RunEvent) => {
  if (event.parameters) {
    const params = event.parameters as PluginParameters

    let node: RectangleNode | EllipseNode | StarNode

    // We draw a shape
    if (params.type == 'Square') {
      node = figma.createRectangle()
    } else if (params.type == 'Circle') {
      node = figma.createEllipse()
    } else if (params.type == 'Star') {
      node = figma.createStar()
    }

    // And we apply the size
    node.resize(parseInt(params.size), parseInt(params.size))
  }

  // We close the plugin
  figma.closePlugin()
})

And that's it!

Congrats, you have a working Figma headless plugin now 😎
This sandbox is now yours to play with!

Going headless is a great way of doing quality of life plugins that does the small things that counts.
If you want to go deeper and create a plugin with an UI, you can read my post on creating a plugin with Svelte.

I hope this post will motivate you to create your own plugin 😊
If you have an idea, go for it!
Publishing my own plugins was a great experience to me! Seeing the community actually using it and gives you feedback is awesome!

I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources 🤙

Create your first Figma plugin with Svelte

Tom Quinonero — Sat, 10 Jul 2021 16:35:47 +0000

Creating a Figma plugin is easier than you think it is 😀

While creating Figma Color Manager I needed a building process, SCSS support and reactivity.

I wanted something simple too. So, I decided to go with rollup and svelte.

Svelte is tiny and handle the reactivity at build time instead of at run time like Vue or React does. It offers better performances while keeping similar principles and syntax.

Rollup is a module bundler that is easy to setup. Perfect for our case.

Through this post I'll explain how to setup a similar environment, step by step. Let's go then!

TLDR: If you don't want to do it yourself, you can just clone my repository and get started

Prerequisites

You'll need a javascript development environment with node and a package manager like npm or yarn.

It doesn't matter if you use Linux, Mac or WSL on Windows. But you will not be able to test your plugin on the Linux desktop app unfortunately.

If you do not have a JS environment ready type "How to install node js on [Windows/Mac/Linux]" on google. and come back when you're all set 😊

You'll need the desktop app to test and debug your plugin.

Create Rollup Project

This step's goal is to setup the module bundling and have a development server.

Let's create a folder and setup package management:

mkdir <your-plugin-name>
cd <your-plugin-name>
# If using yarn
yarn init
#If using npm
npm init

Now we have a working base. Let's open it in VSCode:

code .

Let's install rollup and some required plugins:

# yarn
yarn add -D rollup sirv-cli @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-livereload rollup-plugin-terser svelte-preprocess rollup-plugin-postcss rollup-plugin-html-bundle
# NPM
npm install --save-dev rollup sirv-cli @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-livereload rollup-plugin-terser svelte-preprocess rollup-plugin-postcss rollup-plugin-html-bundle

Let's configure rollup to build three things:

The JS code that interact with the Figma API, code.js
The HTML file that displays the UI template.html
The JS code that will be executed on the frontend main.js

For this we'll have a special rollup configuration.

First create an src folder and add it code.js, template.html and main.js.

Then let's create rollup.config.js at your project's root and this should be the content:

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import livereload from 'rollup-plugin-livereload'

// Minifier
import { terser } from 'rollup-plugin-terser'

// Post CSS
import postcss from 'rollup-plugin-postcss'

// Inline to single html
import htmlBundle from 'rollup-plugin-html-bundle'

const production = !process.env.ROLLUP_WATCH

export default [
  // MAIN.JS
  // The main JS for the UI, will built and then injected
  // into the template as inline JS for compatibility reasons
  {
    input: 'src/main.js',
    output: {
      format: 'umd',
      name: 'ui',
      file: 'public/bundle.js',
    },
    plugins: [
      // Handle external dependencies and prepare
      // the terrain for svelte later on
      resolve({
        browser: true,
        dedupe: (importee) =>
          importee === 'svelte' || importee.startsWith('svelte/'),
        extensions: ['.svelte', '.mjs', '.js', '.json', '.node', '.ts'],
      }),
      commonjs({ transformMixedEsModules: true }),

      // Post CSS config
      postcss({
        extensions: ['.css'],
      }),

      // This inject the bundled version of main.js
      // into the the template
      htmlBundle({
        template: 'src/template.html',
        target: 'public/index.html',
        inline: true,
      }),

      // If dev mode, serve and livereload
      !production && serve(),
      !production && livereload('public'),

      // If prod mode, we minify
      production && terser(),
    ],
    watch: {
      clearScreen: true,
    },
  },

  // CODE.JS
  // The part that communicate with Figma directly
  // Communicate with main.js via event send/binding
  {
    input: 'src/code.js',
    output: {
      file: 'public/code.js',
      format: 'iife',
      name: 'code',
    },
    plugins: [
      resolve(),
      commonjs({ transformMixedEsModules: true }),
      production && terser(),
    ],
  },
]

function serve() {
  let started = false

  return {
    writeBundle() {
      if (!started) {
        started = true

        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        })
      }
    },
  }
}

After that we need to add NPM scripts and we now have a development environment

Add this to your package.json

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },

To test the server, you can add a console.log to main.js and run yarn dev or npm run dev. It should serve the static built files over http://localhost:5000.

This server will not be able to interact with figma but is a good way to work on the UI and svelte components.

Register as a Figma plugin

To be able to interact with figma we'll register it as a development plugin.

Let's first create a manifest.json at the root with the following content:

{
  "name": "<your-plugin-name>",
  "id": "<fill-that-before-publish>",
  "api": "1.0.0",
  "main": "public/code.js",
  "ui": "public/index.html"
}

Anywhere on a Figma project, you can Right click → Plugins → Development → New Plugin... and the popup will ask you to chose a manifest file.

Select the newly created manifest.json and you can now launch your plugin in Figma by doing Right click → Plugins → Development → <your-plugin-name> .

It does not does anything yet but Figma acknowledge it and can launch it.

To make the plugin display your UI, add the following to src/code.js:

figma.showUI(__html__, { width: 800, height: 600 })

This command loads the built template.html.

Adding Svelte

Let's add Svelte! It'll allows our plugin to load reactive components.

For that we need to build .svelte files.

Let's first install some needed packages:

yarn add -D svelte svelte-preprocess rollup-plugin-svelte

And add these imports to the rollup.config.jsfile:

// Svelte related
import svelte from 'rollup-plugin-svelte'
import autoPreprocess from 'svelte-preprocess'

Then look for the plugin array around line 32 and paste it that code:

// Svelte plugin
svelte({
  // enable run-time checks when not in production
  dev: !production,
  preprocess: autoPreprocess(),
  onwarn: (warning, handler) => {
    const { code, frame } = warning
    if (code === "css-unused-selector" && frame.includes("shape")) return

    handler(warning)
  },
}),

Now your rollup.config.js should look like this:

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import livereload from 'rollup-plugin-livereload'

// Svelte related
import svelte from 'rollup-plugin-svelte'
import autoPreprocess from 'svelte-preprocess'

// Minifier
import { terser } from 'rollup-plugin-terser'

// Post CSS
import postcss from 'rollup-plugin-postcss'

// Inline to single html
import htmlBundle from 'rollup-plugin-html-bundle'

const production = !process.env.ROLLUP_WATCH

export default [
  // MAIN.JS
  // The main JS for the UI, will built and then injected
  // into the template as inline JS for compatibility reasons
  {
    input: 'src/main.js',
    output: {
      format: 'umd',
      name: 'ui',
      file: 'public/bundle.js',
    },
    plugins: [
      // Svelte plugin
      svelte({
        // enable run-time checks when not in production
        dev: !production,
        preprocess: autoPreprocess(),
        onwarn: (warning, handler) => {
          const { code, frame } = warning
          if (code === 'css-unused-selector' && frame.includes('shape')) return

          handler(warning)
        },
      }),

      // Handle external dependencies and prepare
      // the terrain for svelte later on
      resolve({
        browser: true,
        dedupe: (importee) =>
          importee === 'svelte' || importee.startsWith('svelte/'),
        extensions: ['.svelte', '.mjs', '.js', '.json', '.node', '.ts'],
      }),
      commonjs({ transformMixedEsModules: true }),

      // Post CSS config
      postcss({
        extensions: ['.css'],
      }),

      // This inject the bundled version of main.js
      // into the the template
      htmlBundle({
        template: 'src/template.html',
        target: 'public/index.html',
        inline: true,
      }),

      // If dev mode, serve and livereload
      !production && serve(),
      !production && livereload('public'),

      // If prod mode, we minify
      production && terser(),
    ],
    watch: {
      clearScreen: true,
    },
  },

  // CODE.JS
  // The part that communicate with Figma directly
  // Communicate with main.js via event send/binding
  {
    input: 'src/code.js',
    output: {
      file: 'public/code.js',
      format: 'iife',
      name: 'code',
    },
    plugins: [
      resolve(),
      commonjs({ transformMixedEsModules: true }),
      production && terser(),
    ],
  },
]

function serve() {
  let started = false

  return {
    writeBundle() {
      if (!started) {
        started = true

        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        })
      }
    },
  }
}

To test your Svelte app, let's create src/Main.svelte and populate it with:

<script>
  let value = "change me!"
</script>

<input type="text" bind:value>
{value}

This code will make the content of the input displayed after the field!

To finish load that component as the root component in main.js:

import App from './Main'

const app = new App({
  target: document.body,
})

export default app

Congratulations! You've created a Figma plugin development environment that'll get you running fast 🤙

What? 😐
Are we already done?? 😒
How to even interact with Figma???? 😪
What about SCSS and Typescript support?? 😔

Going further

Interacting with Figma

To learn more about how your plugin can interact with Figma, please refer to the Figma Developers Documentation.

To interact with Figma a svelte component sends a message to code.js first, code.js can then use the Figma API.

As a proof of concept we'll create a blue square in Figma on a button click. Let's check this out!

Code in Main.svelte:

<script>
  const handleClick = () => {
    parent.postMessage(
      {
        pluginMessage: {
          type: "createShape",
        },
      },
      "*"
    )
  }
</script>

<button on:click={handleClick}>Create a Shape</button>

Here we send a createShape message with parent.postMessagewhen the button is clicked.

Code in code.js:

figma.showUI(__html__, { width: 800, height: 600 })

figma.ui.onmessage = (msg) => {
  if (msg.type === 'createShape') {
    // Create a rectangle
    let rectangle = figma.createRectangle()
    // Making it 400x400
    rectangle.resize(400, 400)
    // Making it Blue
    rectangle.fills = [{ type: 'SOLID', color: { r: 0, g: 0, b: 1 } }]
    // Focus on it
    figma.viewport.scrollAndZoomIntoView([rectangle])
    // Close the plugin
    figma.closePlugin()
  }
}

This snippet will create a rectangle in figma when it'll receive the createShape event.

You can now interact with Figma!

To know everything you can do, check How to access the document.

SCSS and styling

In this section we'll take care of the scss files support. Also we'll allow to specify a lang="scss" in our style tags.

Hopefully it's really easy to setup!

Install these dependencies:

# Yarn
yarn add -D node-sass
# NPM
npm install --save-dev node-sass

Annnnd that is pretty much it 🤗

You can now use <style lang="scss"> in your svelte files and import your global stylesheet with @import 'main.scss';.
You could import it in your JS with import './main.scss'; too.

TypeScript support

TypeScript will help a lot as you'll have types for the figma object. You'll also be able to use TS in your svelte file using <script lang="ts">!
Neat isn't it ?

Lets add some dependencies:

# Yarn
yarn add -D typescript tslib rollup-plugin-typescript
# NPM
npm install --save-dev typescript tslib rollup-plugin-typescript

Let's now add this to your newly created tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["./src"]
}

Let's now import the rollup TS plugin into rollup.config.js:

import typescript from 'rollup-plugin-typescript'

For the main.js compilation we'll add typescript({ sourceMap: !production }), after the commonjs plugin (around line 56).
We'll also add this plugin for the code.js compilation too (line 97).

The whole file should now look like that:

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import livereload from 'rollup-plugin-livereload'

// Svelte related
import svelte from 'rollup-plugin-svelte'
import autoPreprocess from 'svelte-preprocess'

// Minifier
import { terser } from 'rollup-plugin-terser'

// Post CSS
import postcss from 'rollup-plugin-postcss'

// Inline to single html
import htmlBundle from 'rollup-plugin-html-bundle'

// Typescript
import typescript from 'rollup-plugin-typescript'

const production = !process.env.ROLLUP_WATCH

export default [
  // MAIN.JS
  // The main JS for the UI, will built and then injected
  // into the template as inline JS for compatibility reasons
  {
    input: 'src/main.js',
    output: {
      format: 'umd',
      name: 'ui',
      file: 'public/bundle.js',
    },
    plugins: [
      // Svelte plugin
      svelte({
        // enable run-time checks when not in production
        dev: !production,
        preprocess: autoPreprocess(),
        onwarn: (warning, handler) => {
          const { code, frame } = warning
          if (code === 'css-unused-selector' && frame.includes('shape')) return

          handler(warning)
        },
      }),

      // Handle external dependencies and prepare
      // the terrain for svelte later on
      resolve({
        browser: true,
        dedupe: (importee) =>
          importee === 'svelte' || importee.startsWith('svelte/'),
        extensions: ['.svelte', '.mjs', '.js', '.json', '.node', '.ts'],
      }),
      commonjs({ transformMixedEsModules: true }),

      // Typescript
      typescript({ sourceMap: !production }),

      // Post CSS config
      postcss({
        extensions: ['.css'],
      }),

      // This inject the bundled version of main.js
      // into the the template
      htmlBundle({
        template: 'src/template.html',
        target: 'public/index.html',
        inline: true,
      }),

      // If dev mode, serve and livereload
      !production && serve(),
      !production && livereload('public'),

      // If prod mode, we minify
      production && terser(),
    ],
    watch: {
      clearScreen: true,
    },
  },

  // CODE.JS
  // The part that communicate with Figma directly
  // Communicate with main.js via event send/binding
  {
    input: 'src/code.js',
    output: {
      file: 'public/code.ts',
      format: 'iife',
      name: 'code',
    },
    plugins: [
      typescript(),
      resolve(),
      commonjs({ transformMixedEsModules: true }),
      production && terser(),
    ],
  },
]

function serve() {
  let started = false

  return {
    writeBundle() {
      if (!started) {
        started = true

        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        })
      }
    },
  }
}

We can now use <script lang="ts">in our svelte components 🤩🤩🤩

Let's define types for the figma object and convert code.js to code.ts.

Let's install the types:

# Yarn
yarn add -D @figma/plugin-typings
# NPM
npm install --save-dev @figma/plugin-typings

Next, add them to the tsconfig.json file:

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ]
  }
}

Please refer to the official documentation for more details.

We can rename code.js into code.ts. We'll need to replace the reference to it on rollup.config.js line 90

input: "src/code.ts",

Restart the server and we now have everything we need!

Congratulations, you've done your very first figma plugin!

Thank you for reading!

The working code is available on Github. Give it a star if you liked it

I'm Tom Quinonero, I write about design systems and CSS,
Follow me on twitter for more tips and resources 🤙

How To Finally Figuring-out the Font Size for Titles

Tom Quinonero — Thu, 15 Apr 2021 01:43:22 +0000

Using heading sizes based on the body maintains a visually appealing flow on your website. Instead of handpicking font sizes, we can take a base size and multiplicate it by a number - the size ratio - to obtain a bigger size, and so on. Every font size will scale when the main font size changes.

We now got harmonious sizes that look nice together 🤗

If you need to grab the code fast, I've made a codepen to demonstrate the use of ratio-based font sizes.

The size ratio should be a number between 1.1 and 1.7 .

Play with different ratio on type-scale.com to preview how different values look.

Let's set up your base font size and then use calc to compute the headings font-size attributes.

Ratio based font sizes. Screenshot from Type Scale.

The base font size and the 10px trick

The font size on your root element (usually the <html>element) will define what 1rem is. Let's use 10px as a font-size for the root element. Then it becomes easy to convert px in rem.

A body size should at least be 16px so let's declare that on body

html {
  font-size: 10px;
}
body {
  font-size: 1.6rem; /* 16px */
}

About responsiveness, If you need to bump the size of the font for larger screen, you can just change --size-500 and the other will follow. Smarter could be to change the html font-size, so every margin and icon size using rem defined size will scale too.

Using calc() to compute bigger and smaller sizes

Instead of setting headings font-size, variables are assigned, so they can be used for other purposes. Using those variables for your font-size, will enforce consistent font sizing.

These variables goes from --size-300 to --size-900.

--size-400 is the base and the other are computed using the --font-ratio variable.

The ratio can be changed to give a different amplitude to your design, but we'll default to 1.33

The size ratio can be changed by only overwriting the --font-ratio variable. You can do that in your browser too, using the dev tools 🤯

:root {
  --font-ratio: 1.33;
  --size-300: calc(var(--size-400) / var(--font-ratio));
  --size-400: 1.6rem; /* 16px */
  --size-500: calc(var(--size-400) * var(--font-ratio));
  --size-600: calc(var(--size-500) * var(--font-ratio));
  --size-700: calc(var(--size-600) * var(--font-ratio));
  --size-800: calc(var(--size-700) * var(--font-ratio));
  --size-900: calc(var(--size-800) * var(--font-ratio));
}

Now we have useful CSS variables that we can use to stylize our titles. but you can also use them for any custom CSS you'll do in the future.

These sizes values can be used for headings size, but also for any other element.

A use case would be making larger version of a button. For example, the size will be --size-500 instead of --size-400.

Stylize headings using the ratio-based sizes

Let's define a body size to --size-400 , the label size to --size-300 and the titles to some bigger sizes. It depends on how deep you need to go with your hierarchy. I usually am fine with h1 to h3 only but this might not be your case:

p {
  font-size: var(--size-400);
}

label {
  font-size: var(--size-300);
}

h1 {
  font-size: var(--size-700);
}

h2 {
  font-size: var(--size-600);
}

h3 {
  font-size: var(--size-500);
}

Conclusion

If you followed along, you now are ready to set up your own ratio base font size system. Yay!

Setting how much 1rem is and setting the body font size should be your first step. You can now compute a set of sizes, using a ratio. Finally, use these and only these in your CSS!

You are now all set!

Congrats 🥳🎉

I write about design systems and CSS, follow me on twitter for more tips and resources 🤙

Forem: Tom Quinonero

We can use :has, finally!

The Syntax

Using :has as a parent selector

Going further with Combinators

Combining with other Pseudo-classes

Browser support

Conclusion

Sources and Links

Introduction to Cascade Layers in CSS

How Does the Cascade Work?

The Cascade Origin

The confusing way !important works

Adding Cascade Layers in the Mix

The usage of !important

Conclusion

A Short Introduction to Display: Contents

The Ultimate Guide to CSS Houdini

A complete guide of the Houdini APIs, example of usage and its browser support

Low-level APIs

Type Object Model API

CSS Properties and Values API

Font Metrics API

Worklets

High-level APIs

Paint API

Layout API

Animation API

Conclusion

Sources and links

Write modern CSS with PostCSS

What is PostCSS?

Usage

Notable PostCSS Plugins

A guide to CSS container queries

The use case

The code

Polyfill to the rescue

Does your Figma Plugin really need an UI?

Prerequisites

Setup

Registering the plugin

Defining parameters

Create your first Figma plugin with Svelte

Prerequisites

Create Rollup Project

Register as a Figma plugin

Adding Svelte

Going further

Interacting with Figma

SCSS and styling

TypeScript support

How To Finally Figuring-out the Font Size for Titles

The base font size and the 10px trick

Using calc() to compute bigger and smaller sizes

Stylize headings using the ratio-based sizes

Conclusion

Using `:has` as a parent selector

The confusing way `!important` works

The usage of `!important`