Skip to content

Commit

Permalink
fix(sfc/style-vars): improve ignore style variable bindings in commen…
Browse files Browse the repository at this point in the history
…ts (#4202)
  • Loading branch information
edison1105 authored Jul 28, 2021
1 parent 204e194 commit 771635b
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,17 @@ export default __default__"
`;
exports[`CSS vars injection codegen should ignore comments 1`] = `
"export default {
"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
export default {
setup(__props, { expose }) {
expose()
const color = 'red'
return { color }
_useCssVars(_ctx => ({
\\"xxxxxxxx-width\\": (width)
}))
const color = 'red';const width = 100
return { color, width }
}
}"
Expand Down
8 changes: 6 additions & 2 deletions packages/compiler-sfc/__tests__/cssVars.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -164,13 +164,17 @@ describe('CSS vars injection', () => {
//#4185
test('should ignore comments', () => {
const { content } = compileSFCScript(
`<script setup>const color = 'red'</script>\n` +
`<script setup>const color = 'red';const width = 100</script>\n` +
`<style>
/* comment **/
div{ /* color: v-bind(color); */ width:20; }
div{ width: v-bind(width); }
/* comment */
</style>`
)

expect(content).not.toMatch(`_useCssVars`)
expect(content).not.toMatch(`"${mockId}-color": (color)`)
expect(content).toMatch(`"${mockId}-width": (width)`)
assertCode(content)
})

Expand Down
5 changes: 2 additions & 3 deletions packages/compiler-sfc/src/cssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ import { PluginCreator } from 'postcss'
import hash from 'hash-sum'

export const CSS_VARS_HELPER = `useCssVars`
export const cssVarRE =
/\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
export const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g

export function genCssVarsFromList(
vars: string[],
Expand All @@ -38,7 +37,7 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
sfc.styles.forEach(style => {
let match
// ignore v-bind() in comments /* ... */
const content = style.content.replace(/\/\*[\s\S]*\*\//g, '')
const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
while ((match = cssVarRE.exec(content))) {
const variable = match[1] || match[2] || match[3]
if (!vars.includes(variable)) {
Expand Down

0 comments on commit 771635b

Please sign in to comment.