{"id":26566219,"url":"https://github.com/danielamenou/rollup-plugin-lib-style","last_synced_at":"2025-03-22T18:19:28.426Z","repository":{"id":62123317,"uuid":"558031720","full_name":"DanielAmenou/rollup-plugin-lib-style","owner":"DanielAmenou","description":"A Rollup plugin that converts CSS and CSS extension languages into CSS modules and imports the generated CSS files","archived":false,"fork":false,"pushed_at":"2025-03-20T16:01:14.000Z","size":612,"stargazers_count":8,"open_issues_count":2,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T17:21:45.645Z","etag":null,"topics":["css","css-modules","less","postcss","rollup","stylus"],"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/DanielAmenou.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":"2022-10-26T19:10:59.000Z","updated_at":"2025-03-20T16:01:17.000Z","dependencies_parsed_at":"2025-02-07T16:28:18.530Z","dependency_job_id":"18df9f32-dced-4d18-9d27-dffff659e0ba","html_url":"https://github.com/DanielAmenou/rollup-plugin-lib-style","commit_stats":{"total_commits":45,"total_committers":2,"mean_commits":22.5,"dds":"0.022222222222222254","last_synced_commit":"463454c9fa1a7522dd4e5c43c17a6db4331f27e0"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAmenou%2Frollup-plugin-lib-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAmenou%2Frollup-plugin-lib-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAmenou%2Frollup-plugin-lib-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAmenou%2Frollup-plugin-lib-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanielAmenou","download_url":"https://codeload.github.com/DanielAmenou/rollup-plugin-lib-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244657508,"owners_count":20488804,"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":["css","css-modules","less","postcss","rollup","stylus"],"created_at":"2025-03-22T18:19:27.795Z","updated_at":"2025-03-22T18:19:28.413Z","avatar_url":"https://github.com/DanielAmenou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rollup-plugin-lib-style\n\nThis plugin allows you to import CSS or SASS/SCSS files in your Rollup library and include them in the generated output. The plugin will extract the CSS or SASS/SCSS from the imported files and import them as a CSS file\n\nWhen creating a library, you may want to use CSS modules to create scoped styles for your components. However, when publishing your library as a standalone package, you also need to include the CSS styles that are used by your components. Rollup Plugin Lib Style automates this process by generating a CSS file that includes all the imported CSS modules.\n\n## Why\n\nToday there are 2 main ways to bundle and import styles from a library\n\n- Having a single CSS file for all styles in the library\n- Using CSS-in-JS (styled-components, emotion, ...)\n\nThese two ways have some disadvantages when we are having a single CSS file, we are importing styles that probably will not be necessary, and when we are using CSS-in-JS we are increasing the HTML size\n\nThis plugin brings you the ability to consume only the used styles from the library\n\n## Install\n\n```bash\nyarn add rollup-plugin-lib-style --dev\nnpm i rollup-plugin-lib-style --save-dev\n```\n\n## Usage\n\n```js\n// rollup.config.js\nimport {libStylePlugin} from \"rollup-plugin-lib-style\"\n\nexport default {\n  plugins: [libStylePlugin()],\n}\n```\n\nAfter adding this plugin we will be able to use CSS, SCSS, and SASS files (and more languages by adding plugins)\nThe imported CSS file will be transformed into a CSS module and a new CSS file will be generated\n\nIn the js file that imports style file, the import will be changed in the following way:\n\n```js\nimport style from \"./style.css\"\n```\n\n```js\nimport style from \"./style.css.js\"\n```\n\nThe newly generated file will export the CSS module, but also will import the new CSS file.\n\n```js\n// style.css.js\"\nimport \"./myComponent/style.css\"\n\nvar style = {test: \"test_cPySKa\"}\n\nexport {style as default}\n```\n\nThis gives us the ability to consume only the used style\n\n## Options\n\n### importCSS\n\nType: `boolean`\u003cbr /\u003e\nDefault: true\u003cbr /\u003e\nDescription: auto import the generated CSS\n\n### classNamePrefix\n\nType: `string`\u003cbr /\u003e\nDefault: \"\"\u003cbr /\u003e\nDescription: prefix for the classnames\n\n### scopedName\n\nType: `string`\u003cbr /\u003e\nDefault: \"[local]\\_[hash:hex:6]\"\u003cbr /\u003e\nDescription: customize the scoped name of the classname.\nAvailable placeholders: [local], [hash], [hash:\\\u003cdigset\u003e], [hash:\\\u003cdigset\u003e:\\\u003clength\u003e] [hash:\\\u003clength\u003e]\nAvailable digset: \"latin1\", \"hex\", \"base64\"\n\n### postCssPlugins\n\nType: object[]\u003cbr /\u003e\nDefault: []\u003cbr /\u003e\nDescription: [PostCSS Plugins](https://postcss.org/docs/postcss-plugins)\n\n### sassOptions\n\nType: object\u003cbr /\u003e\nDefault: {}\u003cbr /\u003e\nDescription: Options passed to the sass compiler. Can be used to set `loadPaths` for global imports/mixins.\u003cbr /\u003e\nExample:\n\n```js\n// rollup.config.js\nexport default {\n  plugins: [\n    libStylePlugin({\n      sassOptions: {\n        loadPaths: [\"./src/styles\", \"./node_modules\"],\n      },\n    }),\n  ],\n}\n```\n\n### loaders\n\nType: Loader[]\u003cbr /\u003e\nDefault: []\u003cbr /\u003e\nDescription: loaders for CSS extension languages like Less, Stylus, ...\u003cbr /\u003e\nExample:\n\n```js\n// rollup.config.js\nconst lessLoader = {\n  name: \"lessLoader\"\n  regex: /\\.less$/\n  process: ({code, filePath}) =\u003e less(code)\n}\n\nexport default {\n  plugins: [libStylePlugin({loaders: [lessLoader]})],\n}\n```\n\nYou can also override the default SCSS loader to customize sass compilation:\n\n```js\n// rollup.config.js\nimport sass from \"sass\"\n\nconst customSassLoader = {\n  name: \"sass\",\n  regex: /\\.(sass|scss)$/,\n  process: ({filePath}) =\u003e ({\n    code: sass\n      .compile(filePath, {\n        loadPaths: [\"./src/styles\", \"./node_modules\"],\n      })\n      .css.toString(),\n  }),\n}\n\nexport default {\n  plugins: [libStylePlugin({loaders: [customSassLoader]})],\n}\n```\n\n### exclude\n\nType: Array\u003cstring | RegExp\u003e | string | RegExp\u003cbr /\u003e\nDefault: null\u003cbr /\u003e\nDescription: exclude files from load by the loader\n\n### customPath\n\nType: string\u003cbr /\u003e\nDefault: \".\"\u003cbr /\u003e\nDescription: Change custom path for starting of reference to CSS file, useful for nested component structure\n\n### customCSSPath\n\nType: (id: string) =\u003e string\u003cbr /\u003e\nDefault: undefined\u003cbr /\u003e\nDescription: A callback that allows you to transform where to store import the generated CSS file from. For example, `Header.module.scss` transformed to `Header.module.css`, but NextJS treat `.module.scss` as CSS module, so you cannot import it directly. Then you can use `return id.replace(process.cwd(), \"\").replace(/\\\\/g, \"/\").replace('.module', '')` to fix it. This will affect both CSS filename and the `import` statement.\n\n### customCSSInjectedPath\n\nType: (id: string) =\u003e string\u003cbr /\u003e\nDefault: undefined\u003cbr /\u003e\nDescription: A callback that allows you to transform the injected `import` statement path. For example, if you have deep nested css files like `./components/headers/Header.css` placed along with their corresponding js, this can be transformed to `./Header.css`. This will affect both CSS filename and the `import` statement.\n\n## Global Styles\n\nIn some cases, we will want to create global class names (without hash)\nwe can do so by adding \".global\" to the style file name.\nIn this case, the scopedName will be \"[local]\"\nExample: myStyle.global.css, mySecondStyle.global.scss\n\n```css\n// myStyle.global.css\n.myStyle {\n  background-color: red;\n}\n```\n\n```js\n// myStyle.global.css.js\nimport \"./myComponent/style.css\"\n\nvar style = {myStyle: \"myStyle\"}\n\nexport {style as default}\n```\n\n## Known Issues\n\n\"Unresolved dependencies\" warnings\n\n```\n(!) Unresolved dependencies\nhttps://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency\n@@_MAGIC_PATH_@@/src/components/Component/style.css (imported by \"src/components/Component/style.scss\")\n```\n\nThese warnings can be suppressed by using the \"onwarn\" function\n\n```js\n// rollup.config.js\nimport {libStylePlugin, onwarn} from \"rollup-plugin-lib-style\"\n\nexport default {\n  onwarn,\n  plugins: [libStylePlugin()],\n}\n```\n\n## License\n\nMIT \u0026copy; [Daniel Amenou](https://github.com/DanielAmenou)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielamenou%2Frollup-plugin-lib-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielamenou%2Frollup-plugin-lib-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielamenou%2Frollup-plugin-lib-style/lists"}