Skip to content

Latest commit

 

History

History
24 lines (14 loc) · 2.85 KB

CHANGELOG.md

File metadata and controls

24 lines (14 loc) · 2.85 KB
Raw

Changelog

1.2.0 (2023-01-19)

Attributes override

This release features options to override attribute names for # (id) and . (class) shortcuts, which is especially useful for JSX/Vue.

In previous versions, the . shortcut created class attribute in element, which in turn was forcibly replaced with className in JSX mode. In v1.2.0, you can configure attribute names for # and . shortcuts per syntax. E.g. you can set . to be my-super-class in HTML and styleName in JSX. Additionally, it’s possible to specify custom value for doubled shortcuts (## and ..).

This is especially useful for JSX and Vue developers, which support multiple ways of specifying styles in element. For example, in JSX a common output for .my-class Emmet abbreviation is <div className="my-class"></div>. However, some developers prefer to use CSS Modules with custom Babel plugin, which expects the following syntax: <div styleName="myClass"></div>.

In order to not break backward compatibility, a user may specify different attribute name for . and .. shortcuts so that .my-class expands to <div className="my-class"></div>, but ..myClass to <div styleName="myClass"></div>. Another example is Vue, where static class name should be defined as class="" attribute, but dynamic one as :class="": you can assign .. to :class attribute as well.

Another common JSX workflow is to have a special styles object which holds class names generated by CSS-in-JS solution. In this case, you had to write something like [class={styles.foo}] to get <div className={style.foo}>: you can’t write .styles.foo since . is a class shortcut and default output is a string, not expression. In v1.2.0, you can specify a custom value prefix for attribute values. For example, you can specify styles prefix for class attribute so that .foo will produce <div className={styles.foo}>: note that attribute value is automatically converted to expression. And Emmet is smart enough to expand .my-class to <div className={style['my-class']}>.

To configure this feature, use markup.attributes config option to override attribute names and 'markup.valuePrefix to specify value prefixes. Note that you can override any attribute name and prefix. In order to override values for ## and .. shortcuts, use id* and class* attribute names respectively.

See config as an example and feature discussion at emmetio/emmet#589.

Other improvements

  • Removed extra spaces in CSS snippet output with parentheses in value (emmetio/emmet#647).
  • Added script:module HTML snippet.
  • Added g (gap) CSS snippet, replaced dc with display: contents instead of invalid display: compact.