今天测试老师report了一个在Chrome浏览器上的样式问题，排查了下，88无问题，89有问题 —— 具体查，某个没有用scoped的模块，/deep/没有处理
让具体的开发老师处理了下代码，那为什么渲染会有差异呢，哪部分的处理变更了呢，查了下Chrome的更新文档

在Google直接搜索 web updates
https://developers.google.com/web/updates/2021
https://chromium.googlesource.com/chromium/src/+log/89.0.4389.72..89.0.4389.82?pretty=fuller&n=10000
https://developer.chrome.com/blog/deps-rems-89/

[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.

https://www.chromestatus.com/features#%2Fdeep%2F

https://segmentfault.com/a/1190000021576348

https://www.cnblogs.com/CyLee/p/10006065.html

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

node_modules/@vue/component-compiler-utils/lib/stylePlugins/scoped.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
node.selector = selectorParser((selectors: any) => {
      selectors.each((selector: any) => {
        let node: any = null

        // find the last child node to insert attribute selector
        selector.each((n: any) => {
          // ">>>" combinator
          // and /deep/ alias for >>>, since >>> doesn't work in SASS
          if (
            n.type === 'combinator' &&
            (n.value === '>>>' || n.value === '/deep/')
          ) {
            n.value = ' '
            n.spaces.before = n.spaces.after = ''
            return false
          }

          // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
          if (n.type === 'pseudo' && n.value === '::v-deep') {
            n.value = n.spaces.before = n.spaces.after = ''
            return false
          }

          if (n.type !== 'pseudo' && n.type !== 'combinator') {
            node = n
          }
        })

        if (node) {
          node.spaces.after = ''
        } else {
          // For deep selectors & standalone pseudo selectors,
          // the attribute selectors are prepended rather than appended.
          // So all leading spaces must be eliminated to avoid problems.
          selector.first.spaces.before = ''
        }

        selector.insertAfter(
          node,
          selectorParser.attribute({
            attribute: id
          })
        )
      })
    }).processSync(node.selector)

从设计角度来说，我们也不推荐使用嵌套过多:

1
2
3
4
5
Very nested SCSS produces big CSS output and is less reusable than little nested one.

Use nesting to not repeat yourself when scoping of selectors is necessary, not to reflect the document structure.

Supported by: http://youtu.be/fPAf8dN4G4w?t=26m17s and http://youtu.be/hou2wJCh3XE?t=4m11s

chrome 版本