{"id":13452062,"url":"https://github.com/astroturfcss/gatsby-plugin-astroturf","last_synced_at":"2025-04-24T06:48:57.750Z","repository":{"id":53950087,"uuid":"152926219","full_name":"astroturfcss/gatsby-plugin-astroturf","owner":"astroturfcss","description":"Gatsby plugin for styling with astroturf","archived":false,"fork":false,"pushed_at":"2021-03-11T03:47:57.000Z","size":97,"stargazers_count":11,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-24T06:48:52.619Z","etag":null,"topics":["astroturf","astroturf-plugin","gatsby","gatsby-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/astroturfcss.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-14T00:36:44.000Z","updated_at":"2023-05-12T16:52:37.000Z","dependencies_parsed_at":"2022-08-13T05:11:06.120Z","dependency_job_id":null,"html_url":"https://github.com/astroturfcss/gatsby-plugin-astroturf","commit_stats":null,"previous_names":["silvenon/gatsby-plugin-astroturf"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astroturfcss%2Fgatsby-plugin-astroturf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astroturfcss%2Fgatsby-plugin-astroturf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astroturfcss%2Fgatsby-plugin-astroturf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astroturfcss%2Fgatsby-plugin-astroturf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/astroturfcss","download_url":"https://codeload.github.com/astroturfcss/gatsby-plugin-astroturf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250580712,"owners_count":21453531,"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":["astroturf","astroturf-plugin","gatsby","gatsby-plugin"],"created_at":"2024-07-31T07:01:11.665Z","updated_at":"2025-04-24T06:48:57.729Z","avatar_url":"https://github.com/astroturfcss.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# astroturf plugin for Gatsby\n\nThis plugin modifies Gatsby's webpack configuration to support [astroturf][].\n\nInstall the plugin and astroturf:\n\n```sh\nyarn add gatsby-plugin-astroturf astroturf\n```\n\nAdd it to your plugins in `gatsby-config.js`:\n\n```js\nplugins: [\n  'gatsby-plugin-astroturf',\n]\n```\n\nYou can also pass [options][] to astroturf's webpack loader:\n\n```js\nplugins: [\n  {\n    resolve: 'gatsby-plugin-astroturf',\n    // defaults:\n    options: {\n      tagName: 'css',\n      styledTag: 'styled',\n      extension: '.module.css',\n    },\n  },\n]\n```\n\n## PostCSS plugins\n\nFor astroturf to work properly you need to add nesting support. For that you can use [postcss-nested][] or another plugin which contains this feature, like [precss][]. You can install these plugins and [many more][PostCSS plugins] using [gatsby-plugin-postcss][]:\n\n```\nyarn add gatsby-plugin-postcss\n```\n```js\nplugins: [\n  'gatsby-plugin-postcss',\n  'gatsby-plugin-astroturf',\n]\n```\n\nYou can specify PostCSS plugins through gatsby-plugin-postcss's `postCssPlugins` option, or by creating a `postcss.config.js` file:\n\n```\nyarn add postcss-nested\n```\n```js\n// postcss.config.js\nmodule.exports =  {\n  plugins: {\n    'postcss-nested': {},\n  }\n}\n```\n\n## Sass, Less etc.\n\nIf you'd like to use Sass, Less or some other preprocessor instead of (or in addition to) PostCSS, make sure that you adjust the `extension` option and install the appropriate Gatsby plugin. For example, this is all you need to add support for Sass:\n\n```\nyarn add gatsby-plugin-sass\n```\n```js\nplugins: [\n  'gatsby-plugin-sass',\n  {\n    resolve: 'gatsby-plugin-astroturf',\n    options: {\n      extension: '.module.scss',\n    },\n  },\n]\n```\n\nJust make sure that your Gatsby plugin supports CSS Modules. Also, note that Sass already has support for nesting, so you don't need postcss-nested.\n\nHappy styling! :art:\n\n[astroturf]: https://github.com/4Catalyzer/astroturf\n[options]: https://github.com/4Catalyzer/astroturf#options\n[PostCSS plugins]: https://www.postcss.parts/\n[postcss-nested]: https://github.com/postcss/postcss-nested\n[precss]: https://jonathantneal.github.io/precss/\n[gatsby-plugin-postcss]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss\n[precss]: https://github.com/jonathantneal/precss\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastroturfcss%2Fgatsby-plugin-astroturf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fastroturfcss%2Fgatsby-plugin-astroturf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastroturfcss%2Fgatsby-plugin-astroturf/lists"}