wip: better experimental feature warnings

packages/compiler-sfc/src/compileScript.ts

@@ -27,7 +27,7 @@ import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
 import { CSS_VARS_HELPER, genCssVarsCode, injectCssVarsCalls } from './cssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
-import { warnOnce } from './warn'
+import { warnExperimental, warnOnce } from './warn'
 
 const DEFINE_OPTIONS = 'defineOptions'
 
@@ -73,13 +73,8 @@ export function compileScript(
 ): SFCScriptBlock {
   const { script, scriptSetup, source, filename } = sfc
 
-  if (__DEV__ && !__TEST__ && scriptSetup) {
-    warnOnce(
-      `<script setup> is still an experimental proposal.\n` +
-        `Follow its status at https://github.com/vuejs/rfcs/pull/227.\n` +
-        `It's also recommended to pin your vue dependencies to exact versions ` +
-        `to avoid breakage.`
-    )
+  if (scriptSetup) {
+    warnExperimental(`<script setup>`, 227)
   }
 
   // for backwards compat
@@ -523,15 +518,7 @@ export function compileScript(
       node.body.type === 'ExpressionStatement'
     ) {
       if (enableRefSugar) {
-        if (__DEV__ && !__TEST__) {
-          warnOnce(
-            `ref: sugar is still an experimental proposal and is not ` +
-              `guaranteed to be a part of <script setup>.\n` +
-              `Follow its status at https://github.com/vuejs/rfcs/pull/228.\n` +
-              `It's also recommended to pin your vue dependencies to exact versions ` +
-              `to avoid breakage.`
-          )
-        }
+        warnExperimental(`ref: sugar`, 228)
         s.overwrite(
           node.label.start! + startOffset,
           node.body.start! + startOffset,

packages/compiler-sfc/src/parse.ts

@@ -11,6 +11,7 @@ import { RawSourceMap, SourceMapGenerator } from 'source-map'
 import { TemplateCompiler } from './compileTemplate'
 import { Statement } from '@babel/types'
 import { parseCssVars } from './cssVars'
+import { warnExperimental, warnOnce } from './warn'
 
 export interface SFCParseOptions {
   filename?: string
@@ -165,7 +166,14 @@ export function parse(
         errors.push(createDuplicateBlockError(node, isSetup))
         break
       case 'style':
-        descriptor.styles.push(createBlock(node, source, pad) as SFCStyleBlock)
+        const style = createBlock(node, source, pad) as SFCStyleBlock
+        if (style.attrs.vars) {
+          warnOnce(
+            `<style vars> has been replaced by a new proposal: ` +
+              `https://github.com/vuejs/rfcs/pull/231`
+          )
+        }
+        descriptor.styles.push(style)
         break
       default:
         descriptor.customBlocks.push(createBlock(node, source, pad))
@@ -214,6 +222,9 @@ export function parse(
 
   // parse CSS vars
   descriptor.cssVars = parseCssVars(descriptor)
+  if (descriptor.cssVars.length) {
+    warnExperimental(`v-bind() CSS variable injection`, 231)
+  }
 
   const result = {
     descriptor,

packages/compiler-sfc/src/warn.ts

@@ -1,12 +1,27 @@
 const hasWarned: Record<string, boolean> = {}
 
 export function warnOnce(msg: string) {
-  if (!hasWarned[msg]) {
+  const isNodeProd =
+    typeof process !== 'undefined' && process.env.NODE_ENV === 'production'
+  if (!isNodeProd && !__TEST__ && !hasWarned[msg]) {
     hasWarned[msg] = true
     warn(msg)
   }
 }
 
 export function warn(msg: string) {
-  console.warn(`\x1b[33m[@vue/compiler-sfc] ${msg}\x1b[0m\n`)
+  console.warn(
+    `\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`
+  )
+}
+
+export function warnExperimental(feature: string, rfcId: number) {
+  warnOnce(
+    `${feature} is still an experimental proposal.\n` +
+      `Follow its status at https://github.com/vuejs/rfcs/pull/${rfcId}.`
+  )
+  warnOnce(
+    `When using experimental features,\n` +
+      `it is recommended to pin your vue dependencies to exact versions to avoid breakage.`
+  )
 }