{"id":13773964,"url":"https://github.com/katrotz/rollup-plugin-less-modules","last_synced_at":"2025-10-28T11:32:07.390Z","repository":{"id":65412134,"uuid":"86265865","full_name":"katrotz/rollup-plugin-less-modules","owner":"katrotz","description":"The rollup plugin that compiles LESS files into CSS","archived":false,"fork":false,"pushed_at":"2018-12-31T11:06:56.000Z","size":82,"stargazers_count":5,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-14T12:02:34.859Z","etag":null,"topics":["build","css","es-module","less","rollup-plugin"],"latest_commit_sha":null,"homepage":null,"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/katrotz.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}},"created_at":"2017-03-26T21:23:09.000Z","updated_at":"2023-03-08T15:53:33.000Z","dependencies_parsed_at":"2023-01-22T07:35:14.289Z","dependency_job_id":null,"html_url":"https://github.com/katrotz/rollup-plugin-less-modules","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katrotz%2Frollup-plugin-less-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katrotz%2Frollup-plugin-less-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katrotz%2Frollup-plugin-less-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katrotz%2Frollup-plugin-less-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/katrotz","download_url":"https://codeload.github.com/katrotz/rollup-plugin-less-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238604001,"owners_count":19499541,"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":["build","css","es-module","less","rollup-plugin"],"created_at":"2024-08-03T17:01:22.390Z","updated_at":"2025-10-28T11:32:07.056Z","avatar_url":"https://github.com/katrotz.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["CSS"],"readme":"# rollup-plugin-less-modules\n[![Build Status](https://travis-ci.org/katrotz/rollup-plugin-less-modules.svg)](https://travis-ci.org/katrotz/rollup-plugin-less-modules)\n\nThe [rollup](https://github.com/rollup/rollup) less modules plugin compiles the LESS files into CSS before importing them into ES modules.\nA use case would be an [Angular](https://github.com/angular/angular) application that defines the styles at the component level, or any other component based application that implements styles encapsulation.\n\nWhy is it awesome?\n+ It can collect and bundle all the imported less files and output the CSS content into a separate CSS bundle file\n+ It plays nicely with the source maps. Source maps can be imported into ES module, can be exported to a separate file and can be inlined into the CSS content (for both imported into ES module or exported to file). \n+ It automagically detects the changes in the dependent less files and recompiles the bundle when rollup is run in watch mode \n\n# Installation\n```\nnpm install --save-dev rollup-plugin-less-modules\n```\n\n# Usage\nAfter compilation the less styles are available along with the source:  \n\n###### rollup.config.js\n```\nimport { rollup } from 'rollup';\nimport lessModules from 'rollup-plugin-less-modules';\n\nrollup({\n    entry: 'index.js',\n    sourceMap: true,\n    plugins: [\n        lessModules()\n    ]\n})\n```\n\n###### index.less\n```\n@import \"typography\"\nbody {\n    margin: 0;\n}\n```\n\n###### typography.less\n```\nhtml {\n    font-size: 100%;\n}\n```\n\n###### index.js\n```\nimport style, { sourceMap } from './index.less';\n\n/* The application handles the styles based on the needs */\n```\n\n# Options\n\n### minify\n+ **Description** Minifies the compiled styles using [clean-css](https://github.com/jakubpawlowicz/clean-css)\n+ **Default** `false`\n\n### sourcemap\n+ **Description** Controls the generation of source maps for the compiled Less files. Follows the rollup pattern for ES modules (true|false|'inline') to output into a separate map file or inline the source maps into the generated CSS file.\n+ **Default** `true`\n\n### options\n+ **Description** Defines the options passed to [Less.js compiler](https://github.com/less/less.js). See below the *Source maps* section for more details of how to configure this option to get correct paths in the source maps.\n+ **Default** \n```\n{\n    // Contains the cwd and the imported less files directories \n    paths: Array,\n\n    // The relative path from the repository root to the file\n    filename: String,\n\n    // The source map configuration for [LESS](http://lesscss.org/usage/#programmatic-usage)\n    sourceMap: {}\n}\n```\n+ \n### processor\n+ **Description** An optional post processing callback. It receives an object with `{css: '', map: {mappings: ''}}` signature. The `css` contains the compiled css content and the `map` contains the source maps. An object with the same signature should be returned otherwise the post-processing result is ignored.\n+ **Default** `null`\n+ **Example**\n```\nimport { rollup } from 'rollup';\nimport lessModules from 'rollup-plugin-less-modules';\nimport postcss from 'postcss';\nimport autoprefixer from 'autoprefixer';\n\nconst options = {\n    sourceMap: {}\n};\n\nconst processor = (code, id) =\u003e {\n    const postCssOptions = {\n        from: id,\n        to: id,\n        map: {\n            prev: code.map\n        }\n    };\n    return postcss([autoprefixer])\n        .process(code.css, postCssOptions)\n        .then(result =\u003e ({\n            css: result.css,\n            map: result.map\n        }));\n};\n\nreturn rollup({\n    entry: 'index.js',\n    plugins: [\n        lessModules({options, processor})\n    ]\n})\n```\n\n### output\n+ **Description** Configures the plugin to write the styles to a separate bundle file. When a string is provided as value, it interprets it as the destination path for the CSS bundle file.\n+ **Default** `false`\n+ **Example**\n```\nreturn rollup({\n    input: 'index.js',\n    output: {\n        file: 'dist/app.js'\n    },\n    plugins: [\n        lessModules({\n            // Does not output the styles to an external file\n            // output: false,\n\n            // Outputs the styles to a separate bundle file with the same name as the input file name of the bundle.\n            // output: true,\n\n            // Outputs the bundled styles to a custom path\n            // output: 'dist/app.css'\n        })\n    ]\n})\n```\n\n# Source maps\nThe plugin provides means to configure and use the source maps. The source maps are provided only when the plugin is run with the `sourcemap` option enabled.\n\nThe source maps can be accessed in the ES module. Eg. \n`import { sourceMap } from 'path-to-styles.less'`\n\nWhen the source maps are configured to be inlined, the content is embedded into the CSS content as a base64 string\n\nBy default the source map paths to the original files are relative to the package root path (eg. `src/components/component/less/styles.less`)\nTo make the paths look like `/components/component/less/styles.less`, following less configuration required\n\n```\nreturn rollup({\n    entry: 'index.js',\n    dest: 'src/bundles/app.js'\n    plugins: [\n        lessModules({\n            // Defaults to src/bundles/app.css\n            output: true,\n            \n            // less options\n            options: {\n                sourceMap: {\n                    sourceMapRootpath: `/`,\n                    sourceMapBasepath: `src` \n                }\n            }\n        })\n    ]\n})\n```\n\n# License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatrotz%2Frollup-plugin-less-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatrotz%2Frollup-plugin-less-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatrotz%2Frollup-plugin-less-modules/lists"}