Error when pug directive expression contains `<`

[caikan]

Environment

---

• Operating System: Linux
• Node Version: v16.12.0
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: npm@8.1.0
• Builder: webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://codesandbox.io/s/pug-prop-b66qtr?file=/pages/index.vue

Describe the bug

When SFC has a <script setup> block, directive expression containing a less than operator < in pug syntax causes error:

<script setup>
</script>
<template lang="pug">
div(v-if="1 < 2")
  | hello
</template>

 ERROR  Failed to compile with 1 errors               friendly-errors 16:32:11


 ERROR  in ./pages/index.vue                          friendly-errors 16:32:11

Module Error (from ./node_modules/@nuxt/bridge/node_modules/unplugin-vue2-script-setup/node_modules/unplugin/dist/webpack/loaders/transform.js):
Illegal tag name. Use '&lt;' to print '<'.
                                                      friendly-errors 16:32:11
 @ ./.nuxt/router.js 27:24-29:3
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/bridge/dist/runtime/capi.plugin.mjs ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Additional context

No response

Logs

No response

[danielroe]

cc: @antfu

[antfu]

Upstream: unplugin/unplugin-vue2-script-setup#124

[danielroe]

This seems to be working fine now too: https://stackblitz.com/edit/github-jfp4ub-j1jdgm?file=pages%2Findex.vue,nuxt.config.ts,pages%2Ffoo.vue,pages%2Fbar.vue,pages%2Fbaz.vue.