Merge pull request #1387 from mathjax/issue3463

Remove use of `*` in CSS declarations.  (mathjax/MathJax#3463)

Author: dpvc

ts/output/chtml.ts

@@ -156,7 +156,9 @@ export class CHTML<N, T, D> extends CommonOutputJax<
     'mjx-block': { display: 'block' },
     'mjx-itable': { display: 'inline-table' },
     'mjx-row': { display: 'table-row' },
-    'mjx-row > *': { display: 'table-cell' },
+    [['cell', 'base', 'under', 'over', 'den']
+      .map((node) => `mjx-row > mjx-${node}`)
+      .join(', ')]: { display: 'table-cell' },
 
     'mjx-container [inline-breaks]': { display: 'inline' },
 

ts/output/chtml/Wrappers/menclose.ts

@@ -250,45 +250,63 @@ export const ChtmlMenclose = (function <N, T, D>(): ChtmlMencloseClass<
         height: 0,
         width: 0,
       },
-      'mjx-menclose > mjx-arrow > *': {
+      'mjx-menclose > mjx-arrow > mjx-aline': {
         display: 'block',
         position: 'absolute',
-        'transform-origin': 'bottom',
-        'border-left': em(Notation.THICKNESS * Notation.ARROWX) + ' solid',
-        'border-right': 0,
         'box-sizing': 'border-box',
-      },
-      'mjx-menclose > mjx-arrow > mjx-aline': {
+        'transform-origin': 'bottom',
         left: 0,
         top: em(-Notation.THICKNESS / 2),
         right: em(Notation.THICKNESS * (Notation.ARROWX - 1)),
         height: 0,
         'border-top': em(Notation.THICKNESS) + ' solid',
         'border-left': 0,
+        'border-right': 0,
       },
       'mjx-menclose > mjx-arrow[double] > mjx-aline': {
+        display: 'block',
+        position: 'absolute',
+        'box-sizing': 'border-box',
+        'transform-origin': 'bottom',
         left: em(Notation.THICKNESS * (Notation.ARROWX - 1)),
         height: 0,
+        'border-left': em(Notation.THICKNESS * Notation.ARROWX) + ' solid',
+        'border-right': 0,
       },
       'mjx-menclose > mjx-arrow > mjx-rthead': {
+        display: 'block',
+        position: 'absolute',
+        'box-sizing': 'border-box',
+        'transform-origin': 'bottom',
         transform: 'skewX(' + ANGLE + 'rad)',
         right: 0,
         bottom: '-1px',
+        'border-left': em(Notation.THICKNESS * Notation.ARROWX) + ' solid',
+        'border-right': 0,
         'border-bottom': '1px solid transparent',
         'border-top':
           em(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent',
       },
       'mjx-menclose > mjx-arrow > mjx-rbhead': {
+        display: 'block',
+        position: 'absolute',
+        'box-sizing': 'border-box',
         transform: 'skewX(-' + ANGLE + 'rad)',
         'transform-origin': 'top',
         right: 0,
         top: '-1px',
+        'border-left': em(Notation.THICKNESS * Notation.ARROWX) + ' solid',
+        'border-right': 0,
         'border-top': '1px solid transparent',
         'border-bottom':
           em(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent',
       },
       'mjx-menclose > mjx-arrow > mjx-lthead': {
+        display: 'block',
+        position: 'absolute',
+        'box-sizing': 'border-box',
         transform: 'skewX(-' + ANGLE + 'rad)',
+        'transform-origin': 'bottom',
         left: 0,
         bottom: '-1px',
         'border-left': 0,
@@ -298,6 +316,9 @@ export const ChtmlMenclose = (function <N, T, D>(): ChtmlMencloseClass<
           em(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent',
       },
       'mjx-menclose > mjx-arrow > mjx-lbhead': {
+        display: 'block',
+        position: 'absolute',
+        'box-sizing': 'border-box',
         transform: 'skewX(' + ANGLE + 'rad)',
         'transform-origin': 'top',
         left: 0,
@@ -314,7 +335,7 @@ export const ChtmlMenclose = (function <N, T, D>(): ChtmlMencloseClass<
         bottom: '50%',
         left: 0,
         width: em(1.5 * Notation.PADDING),
-        border: em(Notation.THICKNESS) + ' solid',
+        'border-width': em(Notation.THICKNESS),
         'border-style': 'solid solid none none',
         'border-radius': '0 100% 0 0',
         'box-sizing': 'border-box',

ts/output/chtml/Wrappers/mfrac.ts

@@ -154,7 +154,7 @@ export const ChtmlMfrac = (function <N, T, D>(): ChtmlMfracClass<N, T, D> {
         display: 'inline-table',
         width: '100%'
       },
-      'mjx-dtable > *': {
+      'mjx-dtable > mjx-line, mjx-dtable > mjx-row': {
         'font-size': '2000%'
       },
       'mjx-dbox': {

ts/output/chtml/Wrappers/mo.ts

@@ -141,7 +141,9 @@ export const ChtmlMo = (function <N, T, D>(): ChtmlMoClass<N, T, D> {
       'mjx-stretchy-h': {
         display: 'inline-block',
       },
-      'mjx-stretchy-h > *': {
+      [['beg', 'ext', 'end', 'mid']
+        .map((node) => `mjx-stretchy-h > mjx-${node}`)
+        .join(', ')]: {
         display: 'inline-block',
         width: 0,
         'text-align': 'right',
@@ -158,7 +160,9 @@ export const ChtmlMo = (function <N, T, D>(): ChtmlMoClass<N, T, D> {
         display: 'inline-block',
         'text-align': 'center',
       },
-      'mjx-stretchy-v > *': {
+      [['beg', 'ext', 'end', 'mid']
+        .map((node) => `mjx-stretchy-v > mjx-${node}`)
+        .join(', ')]: {
         display: 'block',
         height: 0,
         margin: '0 auto',

ts/output/chtml/Wrappers/munderover.ts

@@ -298,7 +298,9 @@ export const ChtmlMover = (function <N, T, D>(): ChtmlMoverClass<N, T, D> {
       'mjx-mover:not([limits="false"])': {
         'padding-top': '.1em', // big_op_spacing5
       },
-      'mjx-mover:not([limits="false"]) > *': {
+      [['base', 'over']
+        .map((node) => `mjx-mover:not([limits="false"]) > mjx-${node}`)
+        .join(', ')]: {
         display: 'block',
         'text-align': 'left',
       },
@@ -436,7 +438,9 @@ export const ChtmlMunderover = (function <N, T, D>(): ChtmlMunderoverClass<
       'mjx-munderover:not([limits="false"])': {
         'padding-top': '.1em', // big_op_spacing5
       },
-      'mjx-munderover:not([limits="false"]) > *': {
+      [['over', 'box']
+        .map((node) => `mjx-munderover:not([limits="false"]) > mjx-${node}`)
+        .join(', ')]: {
         display: 'block',
       },
     };

ts/output/common/Wrappers/mo.ts

@@ -542,7 +542,7 @@ export function CommonMoMixin<
      */
     public setBreakStyle(linebreak: string = '') {
       this.breakStyle =
-        this.node.parent.isEmbellished && !linebreak
+        this.node.parent?.isEmbellished && !linebreak
           ? ''
           : this.getBreakStyle(linebreak);
       if (!this.breakCount) return;