Using jss.insertionPoint instead of injectFirst

[magnusriga]

Question: I used to use my own StylesProvider in gatsby-browser.js, as suggested on the material-ui website:

import React from 'react';
import { jssPreset } from '@material-ui/styles';
import { create } from 'jss';

const jss = create({
  ...jssPreset(),
  // Define a custom insertion point that JSS will look for when injecting the styles into the DOM.
  insertionPoint: document.getElementById('jss-insertion-point'),
});

const wrapRootElement = ({ element }) => {
  return (
    <>
      <StylesProvider jss={jss}>{element}</StylesProvider>
    </>
  );
};

Now, with this plugin, if I still want to use the jss-insertion-point approach, where do I place the create() function?

PS, I tried the below in the plugin config, following the structure of the material-ui/styles source code. It does not work, as I would need access to document to add the right insertionPoint (it should not be string, but rather a DOM node).

{
  resolve: `gatsby-plugin-material-ui`,
  options: {
    stylesProvider: {
      jss: {
        options: {
          insertionPoint: 'jss-insertion-point',
        },
      },
    },
  },
},

[oliviertassinari]

@hupe1980 I believe addressing this issue would require a way to import a custom stylesProvider props object. Gatsby inlines the configuration at some point in its build step. What do you think?

[magnusriga]

@hupe1980 I believe addressing this issue would require a way to import a custom stylesProvider props object. Gatsby inlines the configuration at some point in its build step. What do you think?

@oliviertassinari Thanks for checking in. I created a PR I think will solve it. I also added information to the README for clarity.

PS: I tried it on my end and it seems to work.

[hupe1980]

@hupe1980 I believe addressing this issue would require a way to import a custom stylesProvider props object. Gatsby inlines the configuration at some point in its build step. What do you think?

@oliviertassinari We would definitely cover all cases: JSS plugins, insertionPoint: [Comment | HTMLElement] and createGenerateClassName

@magnusriga What do you think?

[magnusriga]

Thanks for reviewing @hupe1980 . We are exchanging some thoughts over in the PR section.