{"id":26351628,"url":"https://github.com/inqnuam/esbuild-plugin-class-modules","last_synced_at":"2025-03-16T10:33:34.712Z","repository":{"id":60591673,"uuid":"544160456","full_name":"Inqnuam/esbuild-plugin-class-modules","owner":"Inqnuam","description":null,"archived":false,"fork":false,"pushed_at":"2023-06-03T11:24:30.000Z","size":62,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-10T20:47:17.131Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Inqnuam.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":"2022-10-01T20:01:38.000Z","updated_at":"2024-11-01T04:41:16.000Z","dependencies_parsed_at":"2022-10-01T20:40:27.593Z","dependency_job_id":null,"html_url":"https://github.com/Inqnuam/esbuild-plugin-class-modules","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/Inqnuam%2Fesbuild-plugin-class-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inqnuam%2Fesbuild-plugin-class-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inqnuam%2Fesbuild-plugin-class-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inqnuam%2Fesbuild-plugin-class-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Inqnuam","download_url":"https://codeload.github.com/Inqnuam/esbuild-plugin-class-modules/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858894,"owners_count":20359258,"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":"2025-03-16T10:33:34.624Z","updated_at":"2025-03-16T10:33:34.698Z","avatar_url":"https://github.com/Inqnuam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Description\n\n\u003e An esbuild plugin to compile your css stylesheets using [Sass-lang](https://sass-lang.com/documentation/js-api/modules#compile), [PostCSS](https://postcss.org) and [CSS Modules.](https://github.com/css-modules/css-modules)  \n\u003e Supports global and local scoped outputs.\n\n# Installation\n\n```bash\nyarn add -D esbuild-plugin-class-modules\n# or\nnpm install -D esbuild-plugin-class-modules\n```\n\n## Usage\n\n```js\nconst esbuild = require(\"esbuild\");\nconst { classModules } = require(\"esbuild-plugin-class-modules\");\n\nesbuild\n  .build({\n    entryPoints: [\"input.js\"],\n    outdir: \"public\",\n    bundle: true,\n    plugins: [classModules()],\n  })\n  .then((result) =\u003e console.log(result))\n  .catch(() =\u003e process.exit(1));\n```\n\nYou can also customize Sass compiler, PostCSS and CssModules options.\n\n```js\nconst cssCompilerOptions = {\n  options: {\n    sass: {},\n    postcss: [],\n    cssModules: {\n\n    }\n  },\n}\n\n// usual esbuild config\n{\n ...\n plugins: [classModules(cssCompilerOptions)],\n ...\n}\n\n```\n\nBy default following file extensions will be considered by the compiler:\n\n    - .css\n    - .module.css\n    - .modules.css\n    - .scss\n    - .module.scss\n    - .modules.scss\n    - .sass\n\nusing the regex `/(\\.modules?)?\\.((s)?css|sass)$/i` .  \nTo customize this filter passe `filter` regex into plugin options.  \nExample to handle only `.scss` files:\n\n```javascript\nconst cssCompilerOptions = {\n  filter: /\\.scss$/i,\n  options: {\n    sass: {},\n    postcss: [],\n    cssModules: {},\n  },\n};\n```\n\n### Local and Global scops\n\nBy default any file ending with `.global.css scss etc.` is considered as global.\nTo customize this behavior set `globalModulePaths` into plugins `cssModules`.  \nDefault is `[/\\.global\\.(s?css|sass)$/]`.  \nSee [CSS Modules](https://github.com/css-modules/css-modules) for more info.\n\nAnother way to declare class names as global scoped is to use nameless import/require.  \nEx:\n\n```javascript\nimport \"./myAwsomeStyles.scss\";\n```\n\nor as local scoped with named import/require:\n\n```javascript\nimport style from \"./myAwsomeStyles.scss\";\n```\n\n### Usage with multiple css processor plugins\n\nFor better compatibility with other css processors it's prefered to put `esbuild-plugin-class-modules` at after all other css plugins in your esbuild config.\n\n```js\nconst esbuild = require(\"esbuild\");\nconst lessCssPlugin = require(\"some-less-processor-plugin\");\nconst { classModules } = require(\"esbuild-plugin-class-modules\");\n\nesbuild\n  .build({\n    entryPoints: [\"input.js\"],\n    outdir: \"public\",\n    bundle: true,\n    plugins: [lessCssPlugin, classModules()],\n  })\n  .then((result) =\u003e console.log(result))\n  .catch(() =\u003e process.exit(1));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finqnuam%2Fesbuild-plugin-class-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finqnuam%2Fesbuild-plugin-class-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finqnuam%2Fesbuild-plugin-class-modules/lists"}