{"id":13725891,"url":"https://github.com/chrisdavies/stylextract-loader","last_synced_at":"2025-07-07T13:08:26.861Z","repository":{"id":57373760,"uuid":"54554918","full_name":"chrisdavies/stylextract-loader","owner":"chrisdavies","description":"A WebPack loader that lets you put CSS in your JSX files","archived":false,"fork":false,"pushed_at":"2016-11-19T18:04:28.000Z","size":9,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T22:02:55.746Z","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/chrisdavies.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":"2016-03-23T11:35:50.000Z","updated_at":"2019-03-17T11:20:03.000Z","dependencies_parsed_at":"2022-09-17T16:51:47.468Z","dependency_job_id":null,"html_url":"https://github.com/chrisdavies/stylextract-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chrisdavies/stylextract-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdavies%2Fstylextract-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdavies%2Fstylextract-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdavies%2Fstylextract-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdavies%2Fstylextract-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisdavies","download_url":"https://codeload.github.com/chrisdavies/stylextract-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisdavies%2Fstylextract-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264083457,"owners_count":23554826,"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-08-03T01:02:39.681Z","updated_at":"2025-07-07T13:08:26.824Z","avatar_url":"https://github.com/chrisdavies.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Stylextract\n\nA simple WebPack loader that extracts a `\u003cstyle\u003e\u003c/style\u003e` element into its\nown CSS file. Useful for putting component-specific CSS into your JSX files,\nbut still benefitting from writing SCSS, using autoprefixer, etc.\n\n[![Build Status](https://travis-ci.org/chrisdavies/stylextract-loader.svg?branch=master)](https://travis-ci.org/chrisdavies/stylextract-loader)\n\n## Installation\n\n`npm install stylextract-loader`\n\n## Usage without webpack CSS modules\n\nIn any JSX file, you are allowed one and *only one* `\u003cstyle\u003e` element. It can\ngo anywhere in the file you wish, but it's good to be consistent across your\nfiles for readability purposes. I tend to put my style tags last in the file.\n\n```jsx\n\nimport React from 'react'\n\nexport default function ({name}) {\n  return (\n    \u003ch1 className=\"hello-header\"\u003e{name}\u003c/h1\u003e\n  )\n}\n\n\u003cstyle\u003e\n  .hello-header {\n    background: steelblue;\n    color: white;\n  }\n\u003c/style\u003e\n\n```\n\n## Usage with webpack CSS modules\n\nStylextract pairs nicely with webpack's CSS modules. Just assign the style\ntag to a const.\n\n```jsx\n\nimport React from 'react'\n\nexport default function ({name}) {\n  return (\n    \u003ch1 className={css.helloHeader}\u003e{name}\u003c/h1\u003e\n  )\n}\n\nconst css = \u003cstyle\u003e\n  .helloHeader {\n    background: steelblue;\n    color: white;\n  }\n\u003c/style\u003e\n\n```\n\n## Configuration\n\nHere's a snippet from one project's `webpack.config.js` file. The key is that\nstylextract must run *before* Babel, as the `\u003cstyle\u003e` tag is invalid JSX and\nwill break the build otherwise.\n\n```js\nconfig.module = {\n  loaders: [{\n    // JavaScript transpiling\n    test: /.jsx?$/,\n    exclude: /node_modules/,\n    loader: 'babel?' + JSON.stringify(babelSettings) + '!stylextract'\n  }, {\n    // SCSS support\n    test: /\\.scss$/,\n    loader: ExtractTextPlugin.extract('css-loader?modules!sass')\n  }],\n};\n\n```\n\n### Changing the extraction directory\n\nBy default stylextract extracts your inline styles into a file in the `csstemp`\ndirectory beneath your project's output directory. You can configure the name\nof the css output directory using the `tempdir` option:\n\n`stylextract?tempdir=./my-fanci-dir`\n\n## Limitations\n\nAs mentioned above, stylextract allows only one `\u003cstyle\u003e` tag per JSX file.\nIt will simply extract the first and ignore subsequent occurrences. This\nlimitation has its upsides.\n\nEvery time I've wanted more than one style tag, it's been a sign of code-smell\nin my component. The correct solution was to break my component down into\nsub-components.\n\n## License MIT\n\nCopyright (c) 2015 Chris Davies\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisdavies%2Fstylextract-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisdavies%2Fstylextract-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisdavies%2Fstylextract-loader/lists"}