vite-plugin-emt
TypeScript icon, indicating that this package has built-in type declarations

0.0.8 • Public • Published

vite-plugin-emt

emt文件支持

处理过程:

Emmet with indentations ─► Standard Emmet
                                 │
                                 ▼
                HTML ◄──── HTML Template

Requirements

Node 16+

Build

pnpm build

Usage

// vite.config.ts
import Unocss from 'unocss/vite'
import emt, { inlineStylus } from 'vite-plugin-emt'

export default {
	plugins: [
		emt(/* emt options */),
		Unocss({
			transformers: [
				inlineStylus(/* stylus options */),
				// other transformers...
			]
			// Unocss options...
		})
	]
}

Options

所有参数均可选

名称 类型 说明
alwaysReload boolean 开发模式下,当emt文件改变后是否总是重新加载
classy boolean 启用emmet扩展语法(默认值:true
cssProps Set<string> 将集合内的元素视为CSS属性,渲染为内联样式,传入一个空的集合表示禁用内联样式
literal string emt字面量前缀,默认为emt,为空串表示禁用emt字面量
log (server: ViteDevServer, file: string) => void 日志函数,默认重新加载时输出信息到控制台
paths string[] root外的include搜索路径
read (path: string) => string 自定义文件读取函数
render Render 自定义模板渲染函数
root string emt文件所在根文件夹
templated boolean 为true时每个emt元素模板至多展开一次
tplFile string 自定义模板文件
writeHtml boolean 是否输出html,用于构建

emt环境变量

环境变量类型均为string

名称 说明
REQUEST_PATH 请求的emt文件完整路径

标题

位于emt文件开头,格式如下:

title{标题}*

大括号中的内容会自动赋值给doc_title变量,最后渲染到page.emt中的对应位置

末尾的*表示注释,用来防止在渲染HTML时输出title标签,不能省略

无标题(或标题为空)的emt文件会被当作模板处理(无法通过浏览器直接访问)

引入CSS

在需要引入的位置加上

scr[t=module]{import 'example.styl'}

vite会自动将生成的css插入到head中

emmet语法扩展

input:

.flex.items-center
	p 6
	max-w sm
	mx auto
	shadow lg
	space x 4

output:

<div class="flex items-center p-6 max-w-sm mx-auto shadow-lg space-x-4"></div>

cssProps中的属性当成内联样式处理

input:

#s
	p 0
	width 50%

output:

<div id="s" class="p-0" style="width:50%"></div>

若标签名末尾带有冒号,则将该部分当CSS而非HTML处理

若属性名末尾带有冒号,则生成 CSS选择器生成规则:从距离最近的带有id的父元素或根元素开始直到本元素,以>连接

input:

#t
	dl
		dt:after
			content: ":"
		dd
			margin: 0

output: HTML

<div id="t"><dl><dt></dt><dd></dd></dl></div>

CSS

#t>dl>dt:after{content:":"}
#t>dl>dd{margin:0}

预处理器

Stylus预处理器

inlineStylus:将所有Shadow DOM内的style标签的内容视为stylus处理,再将生成的css交给unocss处理

使用:

import { inlineStylus } from 'vite-plugin-emt'

export default defineConfig({
	// …
	plugins: [
		inlineStylus(),
		// …
	],
})

TypeScript预处理器

inlineTS:将所有内联<script>当成TypeScript处理

使用:

import { inlineTS } from 'vite-plugin-emt'

export default defineConfig({
	// …
	plugins: [
		inlineTS(),
		// …
	],
})

预处理器类型声明

在env.d.ts中加上

import { Preprocessor } from 'vite-plugin-emt'

declare global {
	declare const emt: Preprocessor, styl: Preprocessor
}

若指定了Options.literal,上面代码中的emt和styl需要改为Options.literal指定的名称

Readme

Keywords

Package Sidebar

Install

npm i vite-plugin-emt

Weekly Downloads

7

Version

0.0.8

License

MIT

Unpacked Size

16.8 kB

Total Files

5

Last publish

Collaborators

  • 0-v-0