{"id":18336623,"url":"https://github.com/mmintel/gatsby-plugin-fela","last_synced_at":"2025-04-06T04:35:44.572Z","repository":{"id":29072096,"uuid":"119364170","full_name":"mmintel/gatsby-plugin-fela","owner":"mmintel","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-07T03:58:29.000Z","size":266,"stargazers_count":7,"open_issues_count":11,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-21T17:24:55.966Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmintel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-29T09:53:17.000Z","updated_at":"2020-11-17T02:43:35.000Z","dependencies_parsed_at":"2023-01-14T14:05:17.927Z","dependency_job_id":null,"html_url":"https://github.com/mmintel/gatsby-plugin-fela","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmintel%2Fgatsby-plugin-fela","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmintel%2Fgatsby-plugin-fela/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmintel%2Fgatsby-plugin-fela/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmintel%2Fgatsby-plugin-fela/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmintel","download_url":"https://codeload.github.com/mmintel/gatsby-plugin-fela/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247435041,"owners_count":20938530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T20:08:25.390Z","updated_at":"2025-04-06T04:35:44.246Z","avatar_url":"https://github.com/mmintel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-fela\n\nProvide drop-in support for using the css-in-js library\n[fela.js](http://fela.js.org/) including server rendering.\n\n## Install\n\n`npm install --save gatsby-plugin-fela`\n\n## How to use\n\nAdd the plugin to your `gatsby-config.js`.\n\n```javascript\nplugins: [`gatsby-plugin-fela`];\n```\n\nto configure the fela `renderer` add a `fela.config.js` file to the root of your gatsby project:\n\n```javascript\nmodule.exports = {\n  plugins: [ /* add your plugins here */ ],\n  enhancers: [ /* add your enhancers here */ ]\n  // ...\n}\n```\n\nUnfortunately I didn't find a way to use this file for SSR and browser, because I wasn't able to load this file from the browser without having access to node and webpack imports are very limited. So at the time this plugin only adds fela for server side rendering. You have to add it in the browser yourself. So create a `gatsby-browser.js` file in the root of your gatsby project and add this code:\n\n```javascript\nimport React from 'react'\nimport { RendererProvider } from 'react-fela'\nimport { createRenderer } from 'fela'\n\nexports.wrapRootElement = ({ element }) =\u003e {\n  let config;\n  try {\n    config = require(`./fela.config.js`);\n  } catch (e) {\n    console.log(e);\n  }\n  const renderer = createRenderer(config);\n\n  return (\n    \u003cRendererProvider renderer={renderer}\u003e\n      {element}\n    \u003c/RendererProvider\u003e\n  );\n};\n```\n\nIf you have an idea to solve this problem feel free to open a pull request.\n\n### Importing fela plugins\n\nWhen you're importing fela plugins, don't forget your `fela.config.js` file is a commonjs file, but plugins are transpiled using babel from ES6 import/export syntax into format that uses `interopRequireDefault` function. So for correct import of the plugin, you have to import `.default` from the package as shown at the example below.\n\n```js\nconst unit = require(\"fela-plugin-unit\").default\n\nmodule.exports = {\n  plugins: [\n    unit(),\n  ],\n}\n```\n\n## Example\n\nhttps://github.com/mmintel/example-gatsby-fela\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmintel%2Fgatsby-plugin-fela","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmintel%2Fgatsby-plugin-fela","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmintel%2Fgatsby-plugin-fela/lists"}