compiled css precedence

When a project is compiled, the precedence of applied CSS rules changes.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

.MuiDialogActions-spacing > * + * {
    margin-left: 8px;
}

... other styles ...

.MuiButtonBase-root {
    color: inherit;
    border: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    outline: none;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    justify-content: center;
    -moz-appearance: none;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

Current Behavior 😯

.MuiButtonBase-root {
    color: inherit;
    border: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    outline: none;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    justify-content: center;
    -moz-appearance: none;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

... other styles ...

.MuiDialogActions-spacing > * + * {
    margin-left: 8px;
}

Steps to Reproduce 🕹

1. Run a demo of Dialog on localhost to see the expected behavior
2. Compile the demo and run to see the marginLeft of MuiDialogActions is overridden by margin of MuiButtonBase

Your Environment 🌎

Tech	Version
Material-UI	v4.1.3
React	v16.8.6
Browser	Chrome

[dfmartin]

I’m running into an issue that may be related. If not, I will open another issue.

When building my react app in production mode ($ npm run build) the order of the MUI style elements is getting mixed up with my own jss style elements. However, if I run it in development ($ npm start) everything is as expected. This is project is using 4.2.0. I have a similar project that is using 3.9.1 and it works the same both production/dev (i.e. correctly as I would expect).

it seems the production mode is the issue, but I do not know where to begin looking.

[oliviertassinari]

The CSS specificity of .x > * + * is 1 then we rely on

import '../Button'; // So we don't have any override priority issue.

to get the CSS injection order right.

The alternative is to increase the specificity to 2. I like this idea, it would make use component agnostic (work with everybody, not just our Button)

diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index ee57f0120..91b7c574a 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import '../Button'; // So we don't have any override priority issue.

 export const styles = {
   /* Styles applied to the root element. */
@@ -13,7 +12,7 @@ export const styles = {
   },
   /* Styles applied to the root element if `disableSpacing={false}`. */
   spacing: {
-    '& > * + *': {
+    '& > :not(:first-child)': {
       marginLeft: 8,
     },
   },
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index 6fb342f5c..458c61350 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import '../Button'; // So we don't have any override priority issue.

 export const styles = {
   /* Styles applied to the root element. */
@@ -15,7 +14,7 @@ export const styles = {
   },
   /* Styles applied to the root element if `disableSpacing={false}`. */
   spacing: {
-    '& > * + *': {
+    '& > :not(:first-child)': {
       marginLeft: 8,
     },
   },
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
index 5451c6387..2e3f9f179 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import '../Button'; // So we don't have any override priority issue.

 export const styles = {
   /* Styles applied to the root element. */
@@ -14,7 +13,7 @@ export const styles = {
   },
   /* Styles applied to the root element if `disableSpacing={false}`. */
   spacing: {
-    '& > * + *': {
+    '& > :not(:first-child)': {
       marginLeft: 8,
     },
   },

cc @eps1lon as you were advocating for removing the import (tree-shaking) cc @NMinhNguyen as you were wondering about it

@Luucky I can’t explain the behavior of the deployment. Something is wrong in the bundling pipeline independently from my previous comment about CSS specificity. ~I can reproduce the problem with our CRA and Next.js examples~.