Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iconify Icons in Pug lost when Build #1150

Closed
miswanting opened this issue Jun 24, 2022 · 5 comments · Fixed by #1225
Closed

iconify Icons in Pug lost when Build #1150

miswanting opened this issue Jun 24, 2022 · 5 comments · Fixed by #1225

Comments

@miswanting
Copy link

miswanting commented Jun 24, 2022 •
edited

Similar Issue: #168

Bugs occur when the following conditions are met.

  1. Script tag is not empty.(Even Only Comments)
    • Only \ns in it, fine;
    • Without script tag, fine;
  2. @iconify-json/* icon in pug template
    • In my case, it`s .i-mdi-window-close(or anything) in @iconify-json/mdi.
    • Other css related iconset are untested.
    • Same icon in html template format, fine.
  3. vite build
    • Everything just fine in dev mode
    • But there`s no icon code in generated css file when built, preview it also get bad result.

Reproduce Steps

Repo: bug-icon-in-pug-lost-when-build

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "init": "pnpm i",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@iconify-json/mdi": "^1.1.22",
    "@unocss/extractor-pug": "^0.39.3",
    "@vitejs/plugin-vue": "^2.3.3",
    "pug": "^3.0.2",
    "unocss": "^0.39.3",
    "vite": "^2.9.12",
    "vue": "^3.2.37"
  }
}

vite.config.ts

import vue from '@vitejs/plugin-vue'
import unocss from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    unocss()
  ]
})

unocss.config.ts

import extractorPug from '@unocss/extractor-pug'
import {
  defineConfig,
  extractorSplit,
  presetIcons
} from 'unocss'

export default defineConfig({
  presets: [
    presetIcons(),
  ],
  extractors: [
    extractorPug(),
    extractorSplit,
  ],
})

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>myapp</title>
  <script src="./src/index.ts" type="module"></script>
</head>

<body></body>

</html>

src/index.ts

import 'uno.css'
import { createApp } from "vue"
import Index from "./index.vue"

const app = createApp(Index)

app.mount("body")

src/index.vue

<script setup lang="ts">
// Comments are also not ok
</script>
<template lang="pug">
.i-mdi-window-close
</template>
@userquin
Copy link
Member

userquin commented Jul 5, 2022

@miswanting it seems the regex is wrong (in dev just works), with your repro, debugging the extractor (rn I'm checking it):

imagen

@userquin
Copy link
Member

userquin commented Jul 5, 2022

when running dev:

imagen

imagen

@userquin
Copy link
Member

userquin commented Jul 5, 2022 •
edited

when building, previous call is missing: so we need to fix the regex

@userquin
Copy link
Member

userquin commented Jul 5, 2022

PR in a few minutes:

imagen

@userquin userquin mentioned this issue Jul 5, 2022
Merged
@userquin
Copy link
Member

userquin commented Jul 5, 2022

On dev just works because there is an extra call with the ?vue=template and so the pug compiler will transform the output.

On build this call is missing, so the regex will use the raw entry, on Windows we have \r\n and so it will not match anything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(extractor-pug): use any whitespace instead LF on regexp unocss/unocss
2 participants
@userquin @miswanting