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](https://github.com/gajus/babel-plugin-react-css-modules), 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](https://github.com/emmetio/emmet/blob/master/src/config.ts#L390-L409) as an example and feature discussion at https://github.com/emmetio/emmet/issues/589.
Other improvements
* Removed extra spaces in CSS snippet output with parentheses in value (https://github.com/emmetio/emmet/issues/647).
* Added `script:module` HTML snippet.
* Added `g` (`gap`) CSS snippet, replaced `dc` with `display: contents` instead of invalid `display: compact`.