Skip to content

Inconsistent css import order between Prod and Dev for Material-UI #15212

@figmentc

Description

@figmentc

Bug report

Describe the bug

When using Material-UI components, the import order the related css within output html is not static. This outputs inconsistent styling due to inconsistent overrides.

Affected by three different situations

  1. Whether we are using destructuring to import the components or direct imports
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'

have different results than

import { Button, Typography } from '@material-ui/core'
  1. The order of direct imports
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'

have different results to

import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
  1. Prod vs dev
    yarn dev have different results to yarn build && yarn start

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Clone https://github.com/karpkarp/mui-next-repo
  2. Run in Dev vs Prod to see difference
  3. Change component import in /src/SideNav.component.tsx and run in Prod to see difference
    change
import { Button, Typography } from '@material-ui/core'

to

import Button  from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
  1. Change import order and run in Prod to see difference
import Button  from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'

to

import Typography from '@material-ui/core/Typography'
import Button  from '@material-ui/core/Button'

Expected behavior

There an expectation for a static order of css load order on the HTML. The lack of it makes development very tedious and unpredictable in styling overrides.

Screenshots

Using dev
image

Using prod
image

System information

  • OS: MacOS
  • Browser: Chrome
  • Version of Next.js: 9.4.4
  • Version of Node.js: v10.16.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    WebpackRelated to Webpack with Next.js.bugIssue was opened via the bug report template.

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions