gatsby-plugin-theme-ui, add path option

[fcisio]

Is your feature request related to a problem? Please describe.
Not a problem, but it would be nice to be able to specify the theme path with an option.

The default path is src/gatsby-plugin-theme-ui/index.js

Describe the solution you'd like
Something like:

{
    resolve: 'gatsby-plugin-theme-ui',
    options: {
        path: 'src/theme/index.js'
    },
},

[atanasster]

@fcisio yes, great suggestion. I believe it can be lumped with the theme “shadowing” in src/theme.{js,json,ts} as listed in the v1 roadmap : #832 or just replace it.

Would you like to submit a PR, or i can also assign it to myself?

[fcisio]

Thanks @atanasster
That's a bit out of my reach for now, unfortunately.

But starting next year, I will be using Theme UI more intensively and should be able to bring more people to help on this project 🎉

[atanasster]

wow, thats great hear, what kind of projects are you doing with theme-ui?

I will file a PR on this one - since you are finding a lot of great bugs and new features - just let me know anytime you prefer to file a PR yoursel

[atanasster]

Hi @fcisio I looked a bit closer and remembered that you can actually pass the theme object as an option to the plugin - you just need to require the theme from wherever it is located:

in gatsby-config.js :

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-theme-ui',
      options: {
        preset: require('./src/theme'),
      },
    },
  ],
}

Since gatsby-config does not support es6 modules you will need to module.export the theme

module.exports = {
  colors: {
    text: '#000',
    background: '#fff',
    primary: 'green',
    secondary: '#609',
  },

Would this work for you?

[lachlanjc]

Oh amazing @atanasster. Maybe we should add an example like that to https://theme-ui.com/packages/gatsby-plugin?

[atanasster]

Thanks @lachlanjc - I sent a PR, can you please check the text : https://theme-ui-gr3r68aaa.vercel.app/packages/gatsby-plugin

[hasparus]

Since gatsby-config does not support es6 modules

You could also use babel-register or ts-node.

const sourceMapSupport = require("source-map-support");
const tsNode = require("ts-node");

let registered = false;

module.exports = function registerTsNode() {
  if (registered) {
    return;
  }

  registered = true;

  sourceMapSupport.install();
  tsNode.register({
    compilerOptions: {
      module: "commonjs",
      target: "es2017",
      // TS_NODE_FILES is set to false, so declarations.d.ts are not loaded
      noImplicitAny: false,
      project: "../../../tsconfig.json",
    },
  });
};

module.exports = require("./gatsby-config.ts");

https://github.com/hasparus/homepage/blob/master/gatsby-config.js

[atanasster]

You could also use babel-register or ts-node.

Yeah, couple of workarounds.
I am compiling a gatsby-config.ts(all the gatsby config type files) from src and then pointing to dist https://github.com/ccontrols/component-controls/blob/master/integrations/gatsby-theme-stories/gatsby-config.js