Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack loader for external CSS files

See original GitHub issue

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

Just want to start by saying I’m not a huge contributor to open source, so if this is a bad place to put this feel free to shout and I’ll take it down.

I was struggling with JSS for a number of reasons, so I decided to write a Webpack loader for loading external CSS files into JSS, specifically for use with Material UI. I really just want to share it in case it can be helpful to someone else who wants to keep their CSS in CSS but still use the Material UI theme. I doubt it has any room in the official Material UI repo, but who knows if it will spark any ideas.

Link to loader: https://www.npmjs.com/package/css-to-mui-loader

Examples

Basically, you can do things like this in your CSS:

:root {
  --xs-color: blue;
}

.button {
  background: $(theme.palette.primary.main);
  padding: 2su; /* Material UI spacing units */
}
 
.button:hover {
  background: $(theme.palette.primary.light);
}

@media $(theme.breakpoints.only('xs')) {
  .button {
    background: var(--xs-color);
    -mui-mixins: theme.mixins.button;
  }
}

…and then load it as you would an external JS file:

import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import styles from './styles.css';
 
const MyComponent = withStyles(styles)(({ classes }) => (
  <Button className={classes.button}>
    Click Me
  </Button>
));

Under the hood it converts to something like this:

export default (theme) => {
  const xsColor = `blue`;
  return {
    button: {
      background: `${theme.palette.primary.main}`,
      padding: `${theme.spacing.unit * 2}px`,
      '&:hover': {
        background: `${theme.palette.primary.light}`,
      }
    },
    [theme.breakpoints.only('xs')]: {
      button: {
        ...theme.mixins.button,
        background: `${xsColor}`,
      }
    }
  };
};

Context

I hoped to solve the following problems with this loader:

copy/paste CSS directly from Chrome inspector
make it easier for designers on the team to not have to work with JS
reduce verbosity of my style files
but still leverage the MUI theme and the power of scoped JSS

Again, happy to remove or move this issue if it’s not helping anything, but also open to suggestions of where else to post this for others who may find it useful.