feat(config-provider): add preflight-style-disabled prop

CHANGELOG.en-US.md

@@ -1076,6 +1076,7 @@
 
 - `n-cascader` provide all options paths in `update:value` callback function, closes [#1235](https://github.com/TuSimple/naive-ui/issues/1235).
 - `n-layout` and `n-layout-sider` adds `on-scroll` prop, closes [#1232](https://github.com/TuSimple/naive-ui/issues/1232).
+- `n-config-provider` adds `preflight-style-disabled` prop.
 
 ## 2.19.5 (2021-10-07)
 

CHANGELOG.zh-CN.md

@@ -13,6 +13,7 @@
 ### Feats
 
 - `n-notification-provider` 的 `placement` 属性支持 `'top'` 和 `'bottom'`，关闭 [#2930](https://github.com/TuSimple/naive-ui/issues/2930)
+- `n-config-provider` 新增 `preflight-style-disabled` 属性
 
 ### i18n
 

demo/SiteRoot.vue

@@ -3,6 +3,7 @@
     :is="configProvider"
     class="demo"
     namespace="naive-ui-doc"
+    preflight-style-disabled
     :theme-name="themeName"
     :theme="theme"
     :locale="locale"

demo/pages/docs/style-conflict/enUS/index.md

@@ -1,4 +1,6 @@
-# Style Element Position
+# Potential Style Conflict
+
+## Style Element Position
 
 Sometimes you want to control where the style element should be inserted.
 
@@ -19,7 +21,7 @@ Also, naive-ui uses [vueuc](https://github.com/07akioni/vueuc). If you need, its
 </head>
 ```
 
-## About tailwind's style override
+## About tailwind's preflight style override
 
 You may find adding a meta tag to your static html files doesn't work (naive's style would still be overriden), since your toolchain may always insert tailwind's style at the end of the head tag. In this situation, you need to insert the meta tag dynamically right before the app is mounted.
 
@@ -30,3 +32,13 @@ document.head.appendChild(meta)
 
 vueApp.mount('#app')
 ```
+
+## Disable Preflight Style
+
+To make naive-ui work for most users out of box, mounting any component of naive would create global preflight style. However it may not be expected. If you want to disable it, using `n-config-provider` like this.
+
+```html
+<n-config-provider preflight-style-disabled>
+  <your-app />
+</n-config-provider>
+```

demo/pages/docs/style-conflict/zhCN/index.md

@@ -1,4 +1,6 @@
-# 样式元素位置
+# 潜在的样式冲突
+
+## 样式元素的位置
 
 有时你可能希望控制样式元素插入的位置。
 
@@ -19,7 +21,7 @@
 </head>
 ```
 
-## 关于 tailwind 的样式覆盖
+## 关于 tailwind 的 preflight 样式
 
 你可能会发现在静态 HTML 文件中加入 meta 标签没用（naive 的样式仍然可能被覆盖），因为你的工具链可能永远会把 tailwind 的样式插入 head 的尾部。这种情况下，你需要在 app 挂载之前动态的插入 meta 标签。
 
@@ -30,3 +32,13 @@ document.head.appendChild(meta)
 
 vueApp.mount('#app')
 ```
+
+## 禁用 preflight 样式
+
+为了让多数用户直接无配置的使用 naive-ui，挂载任何一个组件都会创建全局的 CSS 样式。但是这样可能不是期望的行为，你可以使用 `n-config-provider` 来禁用这个行为。
+
+```html
+<n-config-provider preflight-style-disabled>
+  <your-app />
+</n-config-provider>
+```

demo/store/menu-options.js

@@ -145,9 +145,9 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
           path: '/theme'
         },
         {
-          en: 'Style Element Position',
-          zh: '样式元素位置',
-          path: '/style-position'
+          en: 'Potential Element Conflict',
+          zh: '潜在的样式冲突',
+          path: '/style-conflict'
         },
         {
           en: 'Third-Party Libraries',

src/_internal/selection/src/styles/index.cssr.ts

@@ -222,6 +222,8 @@ export default c([
       vertical-align: bottom;
     `, [
       cE('input', `
+        font-size: inherit;
+        font-family: inherit;
         min-width: 1px;
         padding: 0;
         background-color: #0000;

src/_mixins/use-style.ts

@@ -1,6 +1,7 @@
 import { CNode } from 'css-render'
-import { Ref, onBeforeMount } from 'vue'
+import { Ref, onBeforeMount, inject } from 'vue'
 import { useSsrAdapter } from '@css-render/vue3-ssr'
+import { configProviderInjectionKey } from '../config-provider/src/context'
 import globalStyle from '../_styles/global/index.cssr'
 import { throwError } from '../_utils'
 import { cssrAnchorMetaName } from './common'
@@ -15,6 +16,7 @@ export default function useStyle (
     return
   }
   const ssrAdapter = useSsrAdapter()
+  const NConfigProvider = inject(configProviderInjectionKey, null)
   const mountStyle = (): void => {
     const clsPrefix = clsPrefixRef?.value
     style.mount({
@@ -26,12 +28,14 @@ export default function useStyle (
       },
       ssr: ssrAdapter
     })
-    globalStyle.mount({
-      id: 'n-global',
-      head: true,
-      anchorMetaName: cssrAnchorMetaName,
-      ssr: ssrAdapter
-    })
+    if (!NConfigProvider?.preflightStyleDisabled) {
+      globalStyle.mount({
+        id: 'n-global',
+        head: true,
+        anchorMetaName: cssrAnchorMetaName,
+        ssr: ssrAdapter
+      })
+    }
   }
   if (ssrAdapter) {
     mountStyle()

src/_mixins/use-theme.ts

@@ -93,6 +93,7 @@ function useTheme<N, T, R> (
   clsPrefixRef?: Ref<string | undefined>
 ): ComputedRef<MergedTheme<Theme<N, T, R>>> {
   const ssrAdapter = useSsrAdapter()
+  const NConfigProvider = inject(configProviderInjectionKey, null)
   if (style) {
     const mountStyle = (): void => {
       const clsPrefix = clsPrefixRef?.value
@@ -105,12 +106,14 @@ function useTheme<N, T, R> (
         anchorMetaName: cssrAnchorMetaName,
         ssr: ssrAdapter
       })
-      globalStyle.mount({
-        id: 'n-global',
-        head: true,
-        anchorMetaName: cssrAnchorMetaName,
-        ssr: ssrAdapter
-      })
+      if (!NConfigProvider?.preflightStyleDisabled) {
+        globalStyle.mount({
+          id: 'n-global',
+          head: true,
+          anchorMetaName: cssrAnchorMetaName,
+          ssr: ssrAdapter
+        })
+      }
     }
     if (ssrAdapter) {
       mountStyle()
@@ -118,7 +121,6 @@ function useTheme<N, T, R> (
       onBeforeMount(mountStyle)
     }
   }
-  const NConfigProvider = inject(configProviderInjectionKey, null)
   const mergedThemeRef = computed(() => {
     // keep props to make theme overrideable
     const {

src/config-provider/demos/enUS/index.demo-entry.md

@@ -29,6 +29,7 @@ inline-theme-disabled.vue
 | inline-theme-disabled | `boolean` | `false` | Whether to disabled inline theme CSS variables. If you won't change theme overrides frequently in client side, and need SSR or make devtools looks clear. You can enable the prop. Note that the prop is not responsive. | 2.26.0 |
 | locale | `Locale \| null` | `undefined` | The locale object to be consumed by its child. If set to `null` it will use the default `enUS` locale. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
 | namespace | `string` | `undefined` | Class name of detached parts of components inside `n-config-provider` |  |
+| preflight-style-disabled | `boolean` | `false` | Whether to disabled preflight style of naive-ui. If you disable it, you can take control of all global css. Also you can use `n-global-style` to apply global style (which is recommend since global style will be reactive). | NEXT_VERSION |
 | tag | `string` | `'div'` | What tag `n-config-provider` will be rendered as |  |
 | theme | `Theme \| null` | `undefined` | The theme object to be consumed by its child. If set to `null` it will use the default light theme. If set to `undefined` it will inherit its parent `n-config-provider`. For more details please see [Customizing Theme](../docs/customize-theme). |  |
 | theme-overrides | `ThemeOverrides \| null` | `undefined` | The theme vars overrides to be consumed by its child. If set to `null` it will clear all theme vars. If set to `undefined` it will inherit its parent `n-config-provider`. For more details please see [Customizing Theme](../docs/customize-theme). |  |

src/config-provider/demos/zhCN/index.demo-entry.md

@@ -29,6 +29,7 @@ inline-theme-disabled.vue
 | inline-theme-disabled | `boolean` | `false` | 是否禁用 inline css 主题变量，如果你不会频繁调整主题变量，并且需要 SSR 或者想让 devtools 看起来更干净，可以打开这个选项。注意，这个属性不是响应式的 | 2.26.0 |
 | locale | `Locale \| null` | `undefined` | 对后代组件生效的语言对象，为 `null` 时会使用默认 `enUS`，为 `undefined` 时会继承上级 `n-config-provider` |  |
 | namespace | `string` | `undefined` | `n-config-provider` 内部组件被卸载于其他位置的 DOM 的类名 |  |
+| preflight-style-disabled | `boolean` | `false` | 是否禁用默认样式，如果你禁用了它，便可以完全控制全局样式。你也可以使用 `n-global-style` 去挂载全局样式（推荐，样式是响应式的） | NEXT_VERSION |
 | tag | `string` | `'div'` | `n-config-provider` 被渲染成的元素 |  |
 | theme | `Theme \| null` | `undefined` | 对后代组件生效的主题对象，为 `null` 时会使用默认亮色，为 `undefined` 时会继承上级 `n-config-provider`。更多信息参见[调整主题](../docs/customize-theme) |  |
 | theme-overrides | `ThemeOverrides \| null` | `undefined` | 对后代组件生效的主题变量覆盖，为 `null` 时会清除全部覆盖变量，为 `undefined` 时会继承上级 `n-config-provider`。更多信息参见[调整主题](../docs/customize-theme) |  |

src/config-provider/src/ConfigProvider.ts

@@ -48,6 +48,7 @@ export const configProviderProps = {
   componentOptions: Object as PropType<GlobalComponentConfig>,
   icons: Object as PropType<GlobalIconConfig>,
   breakpoints: Object as PropType<Breakpoints>,
+  preflightStyleDisabled: Boolean,
   inlineThemeDisabled: {
     type: Boolean,
     default: undefined
@@ -151,7 +152,8 @@ export default defineComponent({
     })
     const inlineThemeDisabled =
       props.inlineThemeDisabled || NConfigProvider?.inlineThemeDisabled
-
+    const preflightStyleDisabled =
+      props.preflightStyleDisabled || NConfigProvider?.preflightStyleDisabled
     const mergedThemeHashRef = computed(() => {
       const { value: theme } = mergedThemeRef
       const { value: mergedThemeOverrides } = mergedThemeOverridesRef
@@ -201,7 +203,8 @@ export default defineComponent({
       }),
       mergedThemeRef,
       mergedThemeOverridesRef,
-      inlineThemeDisabled: inlineThemeDisabled || false
+      inlineThemeDisabled: inlineThemeDisabled || false,
+      preflightStyleDisabled: preflightStyleDisabled || false
     })
     return {
       mergedClsPrefix: mergedClsPrefixRef,

src/config-provider/src/internal-interface.ts

@@ -249,4 +249,5 @@ export interface ConfigProviderInjection {
   mergedThemeHashRef: Ref<string>
   // non-reactive
   inlineThemeDisabled: boolean
+  preflightStyleDisabled: boolean
 }

src/global-style/src/GlobalStyle.ts

@@ -5,10 +5,10 @@ import {
   onUnmounted,
   inject
 } from 'vue'
+import { merge } from 'lodash-es'
 import { warn } from '../../_utils'
 import { commonLight } from '../../_styles/common'
 import { configProviderInjectionKey } from '../../config-provider/src/context'
-import { merge } from 'lodash-es'
 
 export default defineComponent({
   name: 'GlobalStyle',
@@ -36,6 +36,8 @@ export default defineComponent({
           )
           : commonLight
         if (styleApplied || !body.hasAttribute('n-styled')) {
+          style.setProperty('-webkit-text-size-adjust', '100%')
+          style.setProperty('-webkit-tap-highlight-color', 'transparent')
           style.backgroundColor = bodyColor
           style.color = textColor2
           style.fontSize = fontSize