DEV Community: Peiwen Lu

Achieving Perfect Vertical Rhythm in Web Browsers

Peiwen Lu — Sat, 16 Nov 2024 09:41:56 +0000

Typography and layout play a crucial role in creating visually appealing and readable web designs. One concept that has always fascinated me is vertical rhythm, the consistent vertical spacing of text and elements across a web page. Back in 2015, my friend Rob Turlinckx introduced me to this concept, sparking a journey of exploration that led me to develop tools for effectively implementing vertical rhythm in modern web browsers.

In the early stages of my experimentation, I found some success in aligning headings and paragraphs within isolated sections, such as feature cards. However, maintaining consistent vertical rhythm throughout an entire page proved challenging. My initial attempts relied on visual approximations, tweaking margins and padding until things looked right. This process was both time-consuming and imprecise.

The turning point came in early 2020 when I discovered the Plumber project. It introduced me to the crucial concept of baseline ratio, a critical piece of the vertical rhythm puzzle that had previously eluded me. Inspired by Plumber and driven by my long-standing goal of achieving perfect vertical rhythm, I developed rhythm-sass. This tool, which powers the typography on this page, enables precise vertical rhythm implementation by utilizing font baseline ratios. While I completed the core functionality shortly after this breakthrough, I only recently finalized the documentation and made it publicly available. As a result, rhythm-sass has been validated through multiple production cases.

As a web developer, not a professional font designer, I approach baseline ratios primarily from a CSS perspective. Understanding this concept is crucial for effectively utilizing tools like Plumber and rhythm-sass, and for accurately implementing designers' intentions in typography and layout. To grasp the technical foundations, let's examine two key passages from the CSS 2.1 Specification:

"CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom."

"Still for each glyph, determine the leading L to add, where L = 'line-height' - AD. Half the leading is added above A and the other half below D, giving the glyph and its leading a total height above the baseline of A' = A + L/2 and a total depth of D' = D + L/2."

From the first specification quote, we learn that A represents the height of the font above the baseline, D represents the depth of the font below the baseline, and A + D equals the font-size. The second quote reveals that the font-size is always centered within the line-height, with the leading (extra space) distributed equally above and below the font. The baseline ratio is the proportion of the font that sits below the baseline relative to the total font size, expressed as D / (A + D).

Baseline ratio varies significantly across typefaces due to their unique design characteristics and proportions. You can find baseline ratios for popular fonts on Plumber's website, or use its measure tool to determine the ratio for any specific font.

With the baseline ratio, font-size, and line-height of a font in hand, we can perform precise calculations to determine the exact distances from the baseline to the top and bottom of the line-height. This level of precision enables us to accurately control the positioning of text elements. Tools like Plumber and rhythm-sass automate these calculations, ensuring consistency across different typefaces and streamlining the implementation of vertical rhythm.

This precision allows us to create a perfect drop cap, even in the absence of widespread support for the CSS initial-letter property. With rhythm-sass, you can achieve this effect by setting a sufficiently large font-size and line-height to span two or three rows, applying display: float to the element, and fine-tuning its position using margin to align it with the appropriate number of rhythm grids. For detailed usage instructions, please refer to the rhythm-sass documentation.

I hope you like rhythm-sass and find it useful in your projects. I'm always eager to discuss typography and exchange ideas with fellow developers and designers. If you have any questions about rhythm-sass, or if you'd like to share your experiences with web typography, please don't hesitate to reach out. Let's continue to explore the possibilities of beautiful and functional web design together.

Mastering JSX Editing in Emacs with Tree-sitter

Peiwen Lu — Thu, 16 May 2024 01:14:20 +0000

Emacs 29 introduced built-in support for Tree-sitter, a powerful tool that revolutionizes syntax highlighting and editing. Tree-sitter constructs a concrete syntax tree for source code and efficiently updates it as modifications are made, offering significant improvements in performance and accuracy compared to traditional regular expression parsing.

While exploring Tree-sitter, I discovered its vast potential for enhancing the editing experience. I started by focusing on the tsx-ts-mode, which I use most frequently, and created a collection of helpful functions to boost productivity. In this post, I'll share these functions and invite you to contribute your own insights and improvements.

To better understand Tree-sitter, refer to the Emacs Tree-sitter documentation. Chinese readers can also check out 《TreeSit API 详解》. Additionally, you can explore the Tree-sitter structure interactively using M-x treesit-explore-mode and M-x treesit-inspect-mode.

To help you quickly grasp the essentials, here are some of the most commonly used Tree-sitter APIs covered in this post:

treesit-node-at: Get the syntax node at the current point.
treesit-node-type: Get the node's type as a string.
treesit-node-text: Get the node's text content as a string.
treesit-parent-until: Traverse up the tree to find a parent node matching a condition.
treesit-search-subtree: Search the node's subtree for a descendant matching a condition.
treesit-node-child: Get a node's child at a specific index.
treesit-node-prev-sibling: Get the node's previous sibling.
treesit-node-next-sibling: Get the node's next sibling.
treesit-node-start: Get the node's starting buffer position.
treesit-node-end: Get the node's ending buffer position.

Now, let's dive into some practical editing functions implemented using Tree-sitter. Keep in mind that all the functions are specific to the tree-sitter-typescript parser and only work in the Emacs 29 built-in tsx-ts-mode.

(defun jsx/kill-region-and-goto-start (start end)
  "Kill the region between START and END, and move the point to START."
  (kill-region start end)
  (goto-char start))

This utility function deletes a specified region and moves the cursor to the start of that region. It serves as a helper function used in other examples.

(defun jsx/empty-element ()
  "Empty the content of the JSX element containing the point."
  (interactive)
  (when-let* ((node (treesit-node-at (point)))
              (element (treesit-parent-until node (lambda (n)
                                                    (string= (treesit-node-type n) "jsx_element"))))
              (opening-node (treesit-node-child element 0))
              (closing-node (treesit-node-child element -1))
              (start (treesit-node-end opening-node))
              (end (treesit-node-start closing-node)))
    (jsx/kill-region-and-goto-start start end)))

Inspired by the Vim cit operation, this function finds the JSX element (tag) enclosing the current point, removes its content while preserving the opening and closing tags.

(defun jsx/raise-element ()
  "Raise the JSX element containing the point."
  (interactive)
  (when-let* ((node (treesit-node-at (point)))
              (element (treesit-parent-until node (lambda (n)
                                                    (member (treesit-node-type n)
                                                            '("jsx_element"
                                                              "jsx_self_closing_element")))))
              (element-text (treesit-node-text element t))
              (element-parent (treesit-parent-until element (lambda (n)
                                                              (string= (treesit-node-type n) "jsx_element"))))
              (start (treesit-node-start element-parent))
              (end (treesit-node-end element-parent)))
    (delete-region start end)
    (insert element-text)
    (indent-region start (point))))

Drawing inspiration from the Lispy raises function, this function moves the current JSX tag one level up in the tree hierarchy and removes the original parent tag.

(defun jsx/delete-until ()
  "Delete up to the end of the parent closing."
  (interactive)
  (when-let* ((node (treesit-node-at (point)))
              (parent (treesit-parent-until node (lambda (n)
                                                   (member (treesit-node-type n)
                                                           '("array"
                                                             "string"
                                                             "arguments"
                                                             "named_imports"
                                                             "object_pattern"
                                                             "formal_parameters"
                                                             "jsx_expression"
                                                             "jsx_opening_element")))))
              (end (1- (treesit-node-end parent))))
    (delete-region (point) end)))

Akin to the Vim ct command, this function automatically deletes from the current point up to the ending character, such as ", ), ], }, or >. Unlike Vim, you don't need to manually specify the matching end character.

(defun jsx/kill-attribute-value ()
  "Kill the value of the JSX attribute containing the point."
  (interactive)
  (when-let* ((node (treesit-node-at (point)))
              (attribute (treesit-parent-until node (lambda (n)
                                                      (string= (treesit-node-type n) "jsx_attribute"))))
              (value (treesit-node-child attribute -1)))
    (let ((start (1+ (treesit-node-start value)))
          (end (1- (treesit-node-end value))))
      (jsx/kill-region-and-goto-start start end))))

This convenient function clears the value of the JSX attribute containing the point.

(defun jsx/declaration-to-if-statement ()
  "Convert the variable declaration at point to an if statement."
  (interactive)
  (when-let* ((node (treesit-node-at (point)))
              (parent (treesit-parent-until node (lambda (n)
                                                   (string= (treesit-node-type n) "lexical_declaration"))))
              (value (treesit-search-subtree parent (lambda (n)
                                                      (string= (treesit-node-type n) "call_expression"))))
              (value-text (treesit-node-text value t))
              (start (treesit-node-start parent))
              (end (treesit-node-end parent)))
    (delete-region start end)
    (insert (format "if (%s) {\n\n}" value-text))
    (indent-region start (point))
    (forward-line -1)
    (indent-for-tab-command)))

Although rarely used, this function can be very handy in specific scenarios. It converts a variable declaration into an if statement, using the variable's value as the condition.

(defun jsx/kill-by-node-type ()
  "[Experimental] Kill the node or region based on the node type at point."
  (interactive)
  (let* ((node (treesit-node-at (point)))
         (node-text (treesit-node-text node t)))
    (pcase node-text
      ((or "." ":" ";" "<" "</" ">" "(" ")" "[" "]" "{" "}")
       (call-interactively 'backward-kill-word))
      ((or "'" "\"" "`")
       (let* ((parent-node (treesit-node-parent node))
              (start (1+ (treesit-node-start parent-node)))
              (end (1- (treesit-node-end parent-node))))
         (jsx/kill-region-and-goto-start start end)))
      (","
       (when-let* ((prev-node (treesit-node-prev-sibling node))
                   (start (treesit-node-start prev-node))
                   (end (treesit-node-end node))
                   (space-prefix (string= (buffer-substring-no-properties (1- start) start) " ")))
         (jsx/kill-region-and-goto-start (if space-prefix (1- start) start) end)))
      (_ (kill-region (treesit-node-start node) (treesit-node-end node))))))

This experimental function aggressively deletes the current Tree-sitter node under the point. However, for punctuation characters, it employs backward-kill-word to maintain consistent deletion behavior.

Finally, let's assign these functions to some handy keybindings. The example functions presented here are just a fraction of the available functions. Please note that all functions are still under active development. You can find the most up-to-date code in my .emacs.d repository. If you have any ideas for improvement or suggestions, I'd be delighted to hear from you!

(add-hook 'tsx-ts-mode-hook (lambda ()
                              (define-key tsx-ts-mode-map (kbd "C-<backspace>") 'jsx/kill-by-node-type)
                              (define-key tsx-ts-mode-map (kbd "C-c C-k") 'jsx/kill-block)
                              (define-key tsx-ts-mode-map (kbd "C-c C-w") 'jsx/copy-block)
                              (define-key tsx-ts-mode-map (kbd "C-c C-x") 'jsx/duplicate-block)
                              (define-key tsx-ts-mode-map (kbd "C-c C-SPC") 'jsx/select-block)
                              (define-key tsx-ts-mode-map (kbd "C-c C-u") 'jsx/delete-until)
                              (define-key tsx-ts-mode-map (kbd "C-c C-;") 'jsx/comment-uncomment-block)
                              (define-key tsx-ts-mode-map (kbd "C-c C-t C-e") 'jsx/empty-element)
                              (define-key tsx-ts-mode-map (kbd "C-c C-t C-r") 'jsx/raise-element)
                              (define-key tsx-ts-mode-map (kbd "C-c C-t C-p") 'jsx/move-to-opening-tag)
                              (define-key tsx-ts-mode-map (kbd "C-c C-t C-n") 'jsx/move-to-closing-tag)
                              (define-key tsx-ts-mode-map (kbd "C-c C-a C-k") 'jsx/kill-attribute)
                              (define-key tsx-ts-mode-map (kbd "C-c C-a C-w") 'jsx/copy-attribute)
                              (define-key tsx-ts-mode-map (kbd "C-c C-a C-v") 'jsx/kill-attribute-value)
                              (define-key tsx-ts-mode-map (kbd "C-c C-a C-p") 'jsx/move-to-prev-attribute)
                              (define-key tsx-ts-mode-map (kbd "C-c C-a C-n") 'jsx/move-to-next-attribute)
                              (define-key tsx-ts-mode-map (kbd "C-c C-s") 'my/open-or-create-associated-scss-file)))

By leveraging the power of Tree-sitter and these custom functions, you can significantly enhance your TypeScript and JSX editing experience in Emacs. Experiment with these functions, adapt them to your workflow, and share your own innovations with the community. Happy coding!

Selectors for Humans, Hashes for Machines

Peiwen Lu — Fri, 19 Apr 2024 10:19:30 +0000

One aspect of CSS modules that I truly appreciate is its ability to compress class names into very short hashes. This feature allows me to keep my CSS selectors as long and descriptive as needed, while still compressing them into concise three or four character hashes. It aligns with my rule for CSS: selectors should be written for human readability, but compressed for machine efficiency.

However, setting the hash length too short can lead to hidden hash collision issues which are not easy to detect until you encounter a bug. To address this, I've developed a solution in Vite that utilizes the getJSON callback function provided by postcss-modules. By storing all used selector hashes in a map, we can easily check for any duplicates. If a duplicate hash is detected, an error is immediately raised, and the build process is halted. In such cases, the issue can be resolved by simply increasing the hash length and rebuilding the project.

// vite.config.js

let modulesConfig = {
  generateScopedName: "[local]-[hash:base64:4]" // original selectors and four-character hashes in the development environment
};

if (process.env.IS_PROD) {
  const fileSet = {};
  const hashSet = {};
  modulesConfig = {
    getJSON: function (file, json) {
      if (fileSet[file]) return; // skip checking files that have already been processed

      fileSet[file] = true;
      Object.values(json).forEach((i) => {
        if (hashSet[i]) throw Error("CSS MODULES HASH COLLISION ERROR");
        hashSet[i] = true;
      });
    },
    generateScopedName: "[hash:base64:2]" // two-character hashes in the production environment, increase the hash length for needed
  };
}


export default defineConfig({
  css: {
    modules: modulesConfig,
  }
});

I have implemented this code snippet in my react-template, and I am extremely satisfied with the results. It strikes a perfect balance between readability and efficiency, ensuring that my CSS is both human-friendly and optimized for production.

Embedding SVG Icons in CSS

Peiwen Lu — Mon, 18 Sep 2023 06:06:30 +0000

I can't quite recall what sparked the idea to embed all SVG icons in CSS instead of importing them as JSX components. Perhaps I was struggling to manage SVG assets for several small projects at the time. Regardless, this exploration delves into embedding SVG icons in CSS.

We're all aware that Probably don't Base64 SVG, but using URL-encoding seems to be a viable alternative. Normally, we utilize the background-image: url(URL_ENCODED_SVG); format. However, it's challenging to modify the SVG color using this method. Thankfully, the CSS mask feature allows us to transform the SVG into a mask and change its background color, granting us the ability to alter the SVG icon color.

To demonstrate how this works, let's use the Entypo home icon as an example. Here's the SVG source code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M18.672,11H17v6c0,0.445-0.194,1-1,1h-4v-6H8v6H4c-0.806,0-1-0.555-1-1v-6H1.328c-0.598,0-0.47-0.324-0.06-0.748L9.292,2.22
    C9.487,2.018,9.743,1.918,10,1.908c0.257,0.01,0.513,0.109,0.708,0.312l8.023,8.031C19.142,10.676,19.27,11,18.672,11z"/>
</svg>

We can convert this icon to the URL-encoded version using the URL-encoder for SVG.

background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Home' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cpath d='M18.672,11H17v6c0,0.445-0.194,1-1,1h-4v-6H8v6H4c-0.806,0-1-0.555-1-1v-6H1.328c-0.598,0-0.47-0.324-0.06-0.748L9.292,2.22 C9.487,2.018,9.743,1.918,10,1.908c0.257,0.01,0.513,0.109,0.708,0.312l8.023,8.031C19.142,10.676,19.27,11,18.672,11z'/%3E%3C/svg%3E");

Now, all we need to do is replace the background-image property with mask-image and add background: currentcolor; to ensure the SVG icon color changes based on its parent's color. This provides an easy way to manage SVG icon colors.

background: currentcolor;
mask-image: url("URL-encoded SVG");

To make the mask work, we also need to ensure the element is a block element by adding display: block or other properties that turn an element into a block element. Additionally, we must specify width and height.

Adding mask-repeat: no-repeat; and mask-position: center; (similar to background images) ensures the icon is centered and not repeated as a tile.

.icon-home {
  display: block;
  width: 24px;
  height: 24px;
  background: currentcolor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("URL-encoded SVG");
}

The code above serves as a basic working example. If we replace background: currentcolor; with something like background: linear-gradient(...);, we can create a nice gradient icon, and animate it.

Creating SVG icons in this manner one by one can be tedious, so I developed a project called SVG-in-CSS to help manage your SVGs and generate the necessary CSS code. It was inspired by both URL-encoder for SVG and IcoMoon. You can also manage different projects by downloading the svg-in-css.config.json file and uploading it to restore your previous project settings. Check out the source code repo on GitHub, and maybe give it a star if you find it useful.

Optimizing SVG with SVGO

I use SVGO to optimize all SVG assets. As a result, the SVG-in-CSS project includes a browser version of SVGO with the following configuration settings.

{
  plugins: [
    "preset-default",
    "removeDimensions",
    {
      name: "prefixIds",
      params: {
        prefix: [FILE_NAME]
      }
    }
  ];
}

The removeDimensions plugin removes the width and height attributes while retaining the viewBox attribute, ensuring the SVG icon remains scalable. The prefixIds plugin prevents misuse of SVG filters by adding the file name as a filter prefix.

After optimization, the SVG icon code would look like this:

mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M18.672 11H17v6c0 .445-.194 1-1 1h-4v-6H8v6H4c-.806 0-1-.555-1-1v-6H1.328c-.598 0-.47-.324-.06-.748L9.292 2.22c.195-.202.451-.302.708-.312.257.01.513.109.708.312l8.023 8.031c.411.425.539.749-.059.749z'/%3E%3C/svg%3E");

Performance

If you're curious about the performance implications of using SVG icons in this manner, I've created a comparison page at https://svg-in-css-performance-test.vercel.app for your consideration. In my opinion, if you have fewer than 100 SVG icons on a single page, the performance impact is minimal and acceptable. However, if you have hundreds of icons, it's best to avoid this method.

Implement Functional Programming in Sass

Peiwen Lu — Tue, 11 Jul 2023 17:42:52 +0000

A few years ago, I started learning the ClojureScript language and quickly became fascinated with functional programming. One day, I wondered if it would be possible to implement a similar programming style in Sass, allowing for anonymous functions and threading macros. After conducting some experiments, I came up with the following Sass functions:

.map-function {
  property: map(inc, 1, 2, 3); // (2, 3, 4)
}

.filter-function {
  property: filter(odd, 1, 2, 3); // (1, 3)
}

.reduce-function {
  property: reduce((plus _1 _2 _2), "#", [ "a", "b", "c" ]); // #aabbcc
}

.assoc-function {
  property: assoc([1 2 3], 2, (a b)); // [1 (a b) 3]
}

.thread-last-function {
  property: thread-last(1, inc, (plus 10 5), dec, ("math.pow" 2)); // 65536
}

It turns out to be quite doable. The magic began with the Clojure Function Literal style anonymous function, #(println %1 %2 %3), which can be passed to iterator functions and threading functions. For syntax reasons, I used _ as the placeholder for a single parameter or _1, _2, and so on for multiple parameters.

In this post, I will explain how to accomplish this. Let's take the reduce() function as an example:

@use "sass:list";

@function plus($args...) {
  // Return the sum of $args
}

.reduce-function {
  property: reduce((plus _1 _2 _2), "#", [ "a", "b", "c" ]); // #aabbcc
}

In this case, _1 represents the accumulator, and _2 represents the current value. The function literal is a parentheses list, also known as the S-expression, and the Sass list is fully capable of handling this syntax. Therefore, the first step is to create a caller that accepts a Sass list, takes the first item in the list as the function name, and the rest items as arguments. It would look something like this:

@use "sass:meta";

@function call-fn($fn, $args...) {
  @return meta.call(meta.get-function($fn), $args...);
}

As such, call-fn(plus, 1, 2, 3) is converted to plus(1, 2, 3). The meta.call() is used to invoke the $fn with $args, and the meta.get-function() ensures that the passed-in function is callable.

This is just a basic concept. In the actual case, $fn would be an S-expression, and we need to replace the _ placeholder inside with the values in $args. So let's update the call-fn() to a call-lambda() function that can convert call-lambda((plus, _1, _2), 10, 100) to plus(10, 100).

@use "sass:list";
@use "sass:meta";

@function first($list) {
  // Return the first $list
}
@function rest($list) {
  // Return the rest items in $list
}

@function replace-args($args, $values) {
  @for $_i from 1 through list.length($values) {
    @if $_i == 1 {
      $_index: list.index($args, _) or list.index($args, _1);

      @while $_index != null {
        $args: list.set-nth($args, $_index, list.nth($values, 1));
        $_index: list.index($args, _) or list.index($args, _1);
      }
    } @else {
      $_index: list.index($args, _#{$_i});

      @while $_index != null {
        $args: list.set-nth($args, $_index, list.nth($values, $_i));
        $_index: list.index($args, _#{$_i});
      }
    }
  }

  @return $args;
}

@function call-lambda($lambda, $args...) {
  $_fn: first($lambda);
  $_lambda-args: replace-args(rest($lambda), $args);

  @return meta.call(meta.get-function($_fn), $_lambda-args...);
}

In the replace-args() function, use a @while loop to support cases where the _ placeholder appears multiple times.

Here, we have a problem. The meta.get-function() cannot directly get a Sass module function. For example, meta.get-function("list.index") is invalid. The correct way would be meta.get-function("index", false, "list"). So, let's create a new get-function() function to detect if the passed-in function is a Sass module method, and if so, extract the module name and the method name.

@use "sass:meta";
@use "sass:string";

@function get-function($fn) {
  $_dot-index: string.index($fn, ".");

  @if $_dot-index {
    $_module: string.slice($fn, 1, $_dot-index - 1);
    $_fn: string.slice($fn, $_dot-index + 1, -1);

    @return meta.get-function($_fn, false, $_module);
  } @else {
    @return meta.get-function($fn);
  }
}

We're almost done, there's only one thing left. In iterator functions or threading functions, we can either pass an anonymous function or a named function. We already have the call-fn() and call-lambda() functions, so let's add a new auto-call() function to detect the type of the passed-in function, and correspondingly choose to invoke call-fn() or call-lambda():

@use "sass:meta";

@function auto-call($fn, $args...) {
  $_type: meta.type-of($fn);

  @if $_type == string {
    @return call-fn($fn, $args...);
  } @else if $_type == list {
    @return call-lambda($fn, $args...);
  } @else {
    @error "#{$fn} is not a function. Please make sure that #{$fn} is defined as a function before calling it.";
  }
}

Finally, based on the previous work, implementing the reduce() function or other functions becomes much simpler. Check the source code for more examples.

@function reduce($fn, $init, $list...) {
  $_result: $init;

  @each $_i in $list {
    $_result: auto-call($fn, $_result, $_i);
  }

  @return $_result;
}

This project has been published as an NPM package named lambda-sass. The syntax was borrowed from Clojure, but the project name was inspired by the Lisp lambda function. I'd be delighted to see what you create using this library. If you find any functions missing, feel free to inform me or contribute by submitting a pull request.

Emmet Enhancements for Web Development

Peiwen Lu — Sun, 02 Jul 2023 18:39:55 +0000

As a front-end developer, Emmet is a tool I rely on daily. I first started using it over a decade ago, back when it was still known as "Zen Coding". This highly efficient tool has been a major timesaver and has significantly enhanced my work experience. Over the years, I've had sporadic ideas on how to improve it, for example, expand m--gutter to margin: var(--gutter);. These insights would flash into my mind and I'd jot them down, eventually leading to a strong desire to customize Emmet to my personal tastes.

My initial attempt at customization was the Sublime Text package Emmet Css Snippets that I created 11 years ago. This package is a compilation of 200-300 snippets that adhere to Emmet's abbreviation rules, but with a few personal tweaks such as simplified abbreviations and added pseudo-class abbreviations. At the time, I didn't know any scripting language (including JavaScript), so I manually created each snippet. It was a time-consuming process, but as a side benefit, I now have an excellent recall of CSS properties and values.

However, I only used Sublime Text for two years before switching to Emacs. I began using the emmet-mode and created my own fork (which has since been removed from GitHub). With my limited knowledge of Emacs Lisp, I was only able to modify the snippets in the same way I had done in the Emmet Css Snippets package, and couldn't take it any further.

About nine months ago, one of my favorite Emacs developers, @manateelazycat, introduced the deno-bridge package. This development allowed us to use Deno as the back-end for Emacs plugins. The icing on the cake is that Deno can leverage all NPM packages. This breakthrough finally gave me the opportunity to realize my long-standing ambition. I can now have Emmet process my abbreviations in Emacs, intercept user input before it reaches Emmet, and also alter the content that Emmet returns.

So I created the emmet2-mode, an Emmet-enhanced minor mode for Emacs. I've been using it for over eight months now and it's been performing as expected. It perfectly caters to my personal needs and saves me even more time than Emmet itself. Now, I'm excited to share how I made this possible.

Enhancing Markup

First, let's take a look at the markup aspect. While Emmet’s markup abbreviations are expertly designed and I don’t intend to alter them, I have added three additional features:

Expanding Abbreviations from Any Position

I find it inconvenient that Emmet only extracts abbreviations backwards. This means that after moving the cursor back to make some changes, I also have to move it back to the end of the edited abbreviation to expand it. Ideally, I would want it to automatically detect the abbreviation, allowing me to expand it from any position. To achieve this, I didn't use the extract function provided by Emmet. Instead, I created a new extraction function using regex to pinpoint all potential abbreviations in a line, and then selected the correct one based on the current cursor position. Now, when I'm working with the following abbreviation:

ul>li*5>h4{title placeholder}+p{content placeholder}

I can expand the abbreviation from any part of it, making content edits a breeze.

Support for CSS Modules in JSX

The CSS Modules is another essential tool that I use daily, probably in all my projects. Therefore, expanding .abc to <div className={css.abc}></div> is much more practical than expanding to <div class="abc"></div>. The css here is my CSS Modules object, which can be customized, as I'll explain later.

At the time of writing this post, Emmet has added this feature in version 2.4.5. However, I would ideally like to expand .a.b.c to <div className={clsx(css.a, css.b, css.c)}></div>. The clsx() here is my class names constructor. Currently, my approach may not align with Emmet's.

Thanks to Emacs Directory Variables, both the CSS Modules object and the class names constructor can be customized as project-based local variables. Simply create a .dir-locals.el file at your project's root and add the following code:

((web-mode . ((emmet2-css-modules-object . "style")
              (emmet2-class-names-constructor . "classnames"))))

There is also a (emmet2-markup-variant . "solid") config to let emmet2-mode work with Solid.js.

CSS Expansion in Markup

Although I rarely use this feature, having the ability to expand CSS in markup is quite handy. This feature was inspired by emmet-mode.

When the cursor is inside the <style>|</style> tag or <div style="|"></div> attribute, it automatically expands CSS. And, when the cursor is inside the <div style={{|}} /> JSX attribute, it expands CSS in JS instead.

Enhancing CSS

Currently, I primarily use the SCSS syntax, which is a superset to CSS, much like TypeScript is to JavaScript. Hence, the CSS enhancements are essentially SCSS enhancements, and some of them are opinionated.

Shorthand Alias

Numeric font-weight shorthands:

fw2  ->  font-weight: 200;
fw7  ->  font-weight: 700;

Full width and full height shorthands:

wf  ->  width: 100%;
hf  ->  height: 100%;

I force myself to add z-index to all absolute and fixed positions.

posa  ->
position: absolute;
z-index: |;

posf1000  ->
position: fixed;
z-index: 1000;

I am planning to completely match CSS properties and values dynamically. Let's see what I can come up with in the future.

Personal SCSS Functions

The Modular Scale ms() function and the rhythm() function are commonly used in all my projects.

t(2)   ->  top: rhythm(2);
fz(1)  ->  font-size: ms(1);

These two abbreviations can significantly enhance my productivity. I'll introduce these in more detail in a future blog post.

Custom Properties

CSS custom properties are now widely supported, so it's:

m--gutter   ->  margin: var(--gutter);
p--a--b--c  ->  padding: var(--a) var(--b) var(--c);

camelCase Alias

In Emmet, : and - are used to separate properties and values, for example, ma expand to max-width: ; but m:a expands to margin: auto;. I find : not as easy to type, and it's better to use it as the trigger to expand pseudo-selectors. Therefore, I introduced a camelCase alias. Now, mA is equivalent to both m:a and m-a.

ma                ->  max-width: ;
mA == m:a == m-a  ->  margin: auto;

Comma as Abbreviation Splitter

As a Dvorak keyboard layout user, I find the comma much easier to type than + to join abbreviations.

t0,r0,b0,l0 == t0+r0+b0+l0

At Rules

I'm always looking for ways to be more efficient, even if it means typing fewer characters.

@cs  ->  @charset
@kf  ->  @keyframes
@md  ->  @media

@us  ->  @use "|";
@in  ->  @if not | {}

Expanding Pseudo-Classes and Pseudo-Elements

As mentioned earlier, : is now used as the trigger to expand pseudo-classes or pseudo-elements, starting with the : symbol, followed by two or three distinct letters.

:be  ->
&::before {
  |
}

.class:fu  ->
.class::focus {
  |
}

There's also an easy way to expand functional pseudo-classes:

:n(:fc)  ->
&:not(:first-child) {
  |
}

.class:n(:fc,:lc):be  ->
.class:not(:first-child):not(:last-child)::before {
  |
}

:nc(2n-1)  ->
&:nth-child(2n-1) {
  |
}

The pseudo-selectors and CSS at-rules list are borrowed from the VS Code Custom Data.

Well, that wraps up all the improvements I've implemented for Emmet. For more details, please have a look at the emmet2-mode repo. I want to extend my gratitude to the dedicated Emmet team. I managed to accomplish this by building on the hard work they've done.