{"id":15878081,"url":"https://github.com/taggon/bun-style-loader","last_synced_at":"2025-03-16T06:32:31.079Z","repository":{"id":211591947,"uuid":"729160235","full_name":"taggon/bun-style-loader","owner":"taggon","description":"Bun plugin to allow loading css, sass files, and css modules","archived":false,"fork":false,"pushed_at":"2023-12-10T13:54:59.000Z","size":23,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-13T02:19:43.409Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/taggon.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-08T15:00:57.000Z","updated_at":"2024-09-07T18:36:11.000Z","dependencies_parsed_at":"2024-10-06T02:20:51.127Z","dependency_job_id":null,"html_url":"https://github.com/taggon/bun-style-loader","commit_stats":null,"previous_names":["taggon/bun-style-loader"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taggon%2Fbun-style-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taggon%2Fbun-style-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taggon%2Fbun-style-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taggon%2Fbun-style-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taggon","download_url":"https://codeload.github.com/taggon/bun-style-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221657351,"owners_count":16858967,"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-10-06T02:20:40.591Z","updated_at":"2024-10-27T09:40:36.397Z","avatar_url":"https://github.com/taggon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bun Style Loader\n\nBun plugin to allow loading css, sass files, and css modules\n\n## Usage\n\nTo get begin, install the `bun-style-loader` package using the following commands:\n\n```shell\nnpm install --save-dev bun-style-loader\nnpm install --save-dev sass # Required for compiling Sass (only when needed)\n```\n\nNext, add the plugin to your build script:\n\n```js\nimport styleLoader from 'bun-style-loader';\n\nBun.build({\n  ...\n  plugins: [\n    styleLoader(),\n  ],\n  ...\n});\n```\n\nNow, you can import CSS, SASS files, and CSS modules in your code:\n\n```js\nimport styles from './styles.css';\n\nconsole.log(styles); // string of the css file\n```\n\nBy following these steps, you integrate bun-style-loader into your project, allowing you to effortlessly import and use CSS, SASS, and CSS modules in your application.\n\n## Using at Runtime\n\nTo incorporate the `bun-style-loader` at runtime, follow these steps. Assume you are creating a preloaded script named `preload.ts`:\n\n```js\n// preload.ts\nimport { plugin } from 'bun';\nimport styleLoader from 'bun-style-loader';\n\nawait plugin(styleLoader(/* options here */));\n```\n\nNext, include `preload.ts` in the `preload` property within your `bunfig.toml` configuration file:\n\n```toml\n# bunfig.toml\npreload = [\"./preload.ts\"]\n```\n\nPlease note that it is crucial to insert the `await` keyword before the `plugin` call to ensure proper functionality. Neglecting to do so may result in issues due to a reported problem, as outlined in [this GitHub issue](https://github.com/oven-sh/bun/issues/5520).\n\n## Configuration\n\n### targets\n\nLightning CSS, which `bun-style-loader` relies on, does not perform automatic transpilation of CSS syntax for older browsers by default. To support older browsers, you can manually specify target browsers as follows:\n\n```js\nimport styleLoader from 'bun-style-loader';\n\nBun.build({\n  ...\n  plugins: [\n    styleLoader({\n      targets: [\n        'chrome 108',\n        'ie 11',\n        'safari 15.6',\n        'ios_saf 15.6',\n      ]\n    }),\n  ],\n  ...\n});\n```\n\nAlternatively, you can easily generate the list of target browsers using the `browserslist` package:\n\n```js\nimport styleLoader from 'bun-style-loader';\nimport browserslist from 'browserslist';\n\nBun.build({\n  ...\n  plugins: [\n    styleLoader({\n      targets: browserslist('\u003e 0.25%'),\n    }),\n  ],\n  ...\n});\n```\n\nThis approach streamlines the configuration process, ensuring that your styles are appropriately transpiled for a broader range of browsers. To see how it works, refer to the `runtime-ts` example in [the repository](https://github.com/taggon/bun-style-loader).\n\n## Insert CSS to DOM\n\nThe plugin does NOT automatically insert the CSS into the DOM. Instead, it provides the CSS either as a string or as key-value pairs in the case of CSS modules. To incorporate the CSS into the DOM, you need to manually utilize the `insertStyleElement`` function from `bun-style-loader/utils`.\n\nExample for plain CSS:\n\n```js\nimport { insertStyleElement } from 'bun-style-loader/utils';\nimport styles from './styles.css';\n\ninsertStyleElement(styles);\n```\n\nExample for CSS modules:\n\n```css\n/* styles.module.css */\n.blue {\n  color: blue;\n}\n```\n\n```js\n// app.js\nimport { insertStyleElement } from 'bun-style-loader/utils';\nimport styles, { code } from './styles.module.css';\n\ninsertStyleElement(styles, code);\n\nexport default function render() {\n  return `\u003cdiv class=\"${styles.blue}\"\u003eHello World\u003c/div\u003e`;\n}\n```\n\nThese examples demonstrate how to use the `insertStyleElement` function to manually insert CSS into the DOM for both plain CSS files and CSS modules.\n\n## TypeScript\n\nYou may need to add a custom type declaration.\n\nFor CSS modules:\n\n```typescript\ndeclare module '*.module.css' {\n  const content: Record\u003cstring, string\u003e;\n  export default content;\n  export const code: string;\n}\n```\n\nFor plain CSS files:\n\n```typescript\ndeclare module '*.css' {\n  const content: string;\n  export default content;\n}\n```\n\nThese type declarations allow you to use CSS modules and plain CSS files in your TypeScript project with proper typings.\n\n## Support\n\nIf you encounter any issues, or have question regarding the `bun-style-loader`, please visit the [GitHub Issues](https://github.com/taggon/bun-style-loader) page to review existing topics or to file a new one.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaggon%2Fbun-style-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaggon%2Fbun-style-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaggon%2Fbun-style-loader/lists"}