{"_id":"@arve.knudsen/esbuild-plugin-lightningcss-modules","name":"@arve.knudsen/esbuild-plugin-lightningcss-modules","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@arve.knudsen/esbuild-plugin-lightningcss-modules","version":"0.1.0","license":"MIT","publishConfig":{"access":"public"},"author":{"name":"Marc Henry Schultz, Arve Knudsen"},"type":"module","main":"index.js","dependencies":{"camelcase":"^8.0.0","lightningcss":"^1.22.1"},"devDependencies":{"esbuild":"^0.19.11"},"peerDependencies":{"esbuild":"^0.19.0"},"volta":{"node":"20.10.0"},"scripts":{"preinstall":"npx only-allow pnpm"},"description":"Yet another (minimal) css modules plugin using parcels rust based lightningcss implementation. (Full support for `composes: mixin from \"./mixin.module.css\"`)","_id":"@arve.knudsen/esbuild-plugin-lightningcss-modules@0.1.0","_integrity":"sha512-tSUXz2ua59CDxI7gD+BFzf8PQgE73pWQgGpmK3GhPuESYMmD83O/gN5wWCvwjN+/bke0SUSPnhevksVK3nXvvg==","_resolved":"/tmp/e252854f47fce02fcb98ee1a341d0534/arve.knudsen-esbuild-plugin-lightningcss-modules-0.1.0.tgz","_from":"file:arve.knudsen-esbuild-plugin-lightningcss-modules-0.1.0.tgz","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-tSUXz2ua59CDxI7gD+BFzf8PQgE73pWQgGpmK3GhPuESYMmD83O/gN5wWCvwjN+/bke0SUSPnhevksVK3nXvvg==","shasum":"ba6bb36ebfc052df100a5351c1004667a135baf4","tarball":"https://registry.npmjs.org/@arve.knudsen/esbuild-plugin-lightningcss-modules/-/esbuild-plugin-lightningcss-modules-0.1.0.tgz","fileCount":4,"unpackedSize":10395,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEy+Fac2So9QwaxfnFAULe9eStgUODmc9r8DLAIxGzXmAiEAuuaq+Uag1waohQyegRD6/T6dh5DOgr4V/czo2Uxq+5Q="}]},"_npmUser":{"name":"arve.knudsen","email":"arve.knudsen@gmail.com"},"directories":{},"maintainers":[{"name":"arve.knudsen","email":"arve.knudsen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/esbuild-plugin-lightningcss-modules_0.1.0_1704025855441_0.6256481743122426"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-31T12:30:55.334Z","0.1.0":"2023-12-31T12:30:55.613Z","modified":"2023-12-31T12:30:55.924Z"},"maintainers":[{"name":"arve.knudsen","email":"arve.knudsen@gmail.com"}],"description":"Yet another (minimal) css modules plugin using parcels rust based lightningcss implementation. (Full support for `composes: mixin from \"./mixin.module.css\"`)","author":{"name":"Marc Henry Schultz, Arve Knudsen"},"license":"MIT","readme":"# esbuild-plugin-lightningcss-modules\n\nYet another (minimal) css modules plugin using parcels rust based lightningcss implementation. (Full support for `composes: mixin from \"./mixin.module.css\"`)\n\nThe plugin is already tested (on linux and mac) and used to build the following bigger project https://github.com/neos/neos-ui with around 100 css modules - it is inlined in the project though to reduce dependencies and maintaining burdens for now.\n\n<details>\n<summary>Another css modules plugin for esbuild? Pleaso no? Read more about the \"why\"...</summary>\n\nYes sorry, i know there are a few implementions already out there:\n\n- @asn.aeb/esbuild-css-modules-plugin\n- esbuild-css-modules-plugin\n- esbuild-plugin-css-modules\n- esbuild-style-plugin\n- esbuild-plugin-simple-css-modules\n\nThe problem is, they dindt suit my usecase as i needed support for css modules composes feature https://github.com/css-modules/css-modules#dependencies\n`composes: mixin from './mixin.module.css';` \n\nThe above implementations mostly rely on `post-cssmodules` and thus dont sucessfully support composition from dependencies as they suffer from this problem: https://github.com/g45t345rt/esbuild-style-plugin/issues/16 (The webpack css modules plugin goes to great lenghts to archieve it successfully)\n\nWith one exception: `esbuild-css-modules-plugin`, this plugin uses also lightningcss as its core, but doesnt support composes yet and due to a more complex inject feature it is a bit more complex. I discussed with the maintainer if we would want to merge our two packages but due to limited time and different usecases (https://github.com/indooorsman/esbuild-css-modules-plugin/issues/53) im here to present my super simple implemented css module plugin for esbuild.\n\n</details>\n\n## Installation\n\nAvailable on npm: https://www.npmjs.com/package/esbuild-plugin-lightningcss-modules\n\n```\nyarn add esbuild-plugin-lightningcss-modules\n```\n\n## Usage\n\n```js\nconst {cssModules} = require('esbuild-plugin-lightningcss-modules');\nconst {build} = require('esbuild');\n\nbuild({\n    ...,\n    plugins: [\n        cssModules(\n            {\n                // Add your own or other plugins in the \"visitor\" section see\n                // https://lightningcss.dev/transforms.html\n                // visitor: myLightningcssPlugin(),\n                // customAtRules: { myLigningCssRule1: {...} }\n                targets: {\n                    chrome: 80 // aligns somewhat to es2020\n                },\n                drafts: {\n                    nesting: true\n                },\n                // You can set here your own settings for cssModules\n                // https://lightningcss.dev/css-modules.html#local-css-variables\n                // https://lightningcss.dev/css-modules.html#custom-naming-patterns\n                // cssModules: {\n                //    dashedIdents: true,\n                //    pattern: 'my-company-[name]-[hash]-[local]'\n                // },\n            }\n        )\n    ]\n})\n```\n\nfor further details look into: https://lightningcss.dev/css-modules.html\n\n## Advanced options\n### `includeFilter` and `excludeFilter`\nThese options only exist for odd / legacy codebases.\nNormally it is asummed that your css module files end with `.module.css`.\nIf this is not the case, and they end with `.css` while you still want to exclude certain normal css from beeing treated as css module you can leverage the two filters like this:\n\n```js\nincludeFilter: /\\.css$/,\nexcludeFilter: /@fortawesome\\/fontawesome-svg-core\\/|my-normal-css-file\\.css|normalize\\.css/,\n```\n\n### ``","readmeFilename":"Readme.md"}