Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/katrotz/rollup-plugin-less-modules
The rollup plugin that compiles LESS files into CSS
https://github.com/katrotz/rollup-plugin-less-modules
build css es-module less rollup-plugin
Last synced: 2 months ago
JSON representation
The rollup plugin that compiles LESS files into CSS
- Host: GitHub
- URL: https://github.com/katrotz/rollup-plugin-less-modules
- Owner: katrotz
- License: mit
- Created: 2017-03-26T21:23:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-31T11:06:56.000Z (almost 6 years ago)
- Last Synced: 2024-05-14T12:02:34.859Z (7 months ago)
- Topics: build, css, es-module, less, rollup-plugin
- Language: JavaScript
- Size: 80.1 KB
- Stars: 5
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - less-modules - Import or Bundle LESS files. (Plugins / CSS)
README
# rollup-plugin-less-modules
[](https://travis-ci.org/katrotz/rollup-plugin-less-modules)
The [rollup](https://github.com/rollup/rollup) less modules plugin compiles the LESS files into CSS before importing them into ES modules.
A 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.
Why is it awesome?
+ It can collect and bundle all the imported less files and output the CSS content into a separate CSS bundle file
+ 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).
+ It automagically detects the changes in the dependent less files and recompiles the bundle when rollup is run in watch mode
# Installation
```
npm install --save-dev rollup-plugin-less-modules
```
# Usage
After compilation the less styles are available along with the source:
###### rollup.config.js
```
import { rollup } from 'rollup';
import lessModules from 'rollup-plugin-less-modules';
rollup({
entry: 'index.js',
sourceMap: true,
plugins: [
lessModules()
]
})
```
###### index.less
```
@import "typography"
body {
margin: 0;
}
```
###### typography.less
```
html {
font-size: 100%;
}
```
###### index.js
```
import style, { sourceMap } from './index.less';
/* The application handles the styles based on the needs */
```
# Options
### minify
+ **Description** Minifies the compiled styles using [clean-css](https://github.com/jakubpawlowicz/clean-css)
+ **Default** `false`
### sourcemap
+ **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.
+ **Default** `true`
### options
+ **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.
+ **Default**
```
{
// Contains the cwd and the imported less files directories
paths: Array,
// The relative path from the repository root to the file
filename: String,
// The source map configuration for [LESS](http://lesscss.org/usage/#programmatic-usage)
sourceMap: {}
}
```
+
### processor
+ **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.
+ **Default** `null`
+ **Example**
```
import { rollup } from 'rollup';
import lessModules from 'rollup-plugin-less-modules';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
const options = {
sourceMap: {}
};
const processor = (code, id) => {
const postCssOptions = {
from: id,
to: id,
map: {
prev: code.map
}
};
return postcss([autoprefixer])
.process(code.css, postCssOptions)
.then(result => ({
css: result.css,
map: result.map
}));
};
return rollup({
entry: 'index.js',
plugins: [
lessModules({options, processor})
]
})
```
### output
+ **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.
+ **Default** `false`
+ **Example**
```
return rollup({
input: 'index.js',
output: {
file: 'dist/app.js'
},
plugins: [
lessModules({
// Does not output the styles to an external file
// output: false,
// Outputs the styles to a separate bundle file with the same name as the input file name of the bundle.
// output: true,
// Outputs the bundled styles to a custom path
// output: 'dist/app.css'
})
]
})
```
# Source maps
The 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.
The source maps can be accessed in the ES module. Eg.
`import { sourceMap } from 'path-to-styles.less'`
When the source maps are configured to be inlined, the content is embedded into the CSS content as a base64 string
By default the source map paths to the original files are relative to the package root path (eg. `src/components/component/less/styles.less`)
To make the paths look like `/components/component/less/styles.less`, following less configuration required
```
return rollup({
entry: 'index.js',
dest: 'src/bundles/app.js'
plugins: [
lessModules({
// Defaults to src/bundles/app.css
output: true,
// less options
options: {
sourceMap: {
sourceMapRootpath: `/`,
sourceMapBasepath: `src`
}
}
})
]
})
```
# License
MIT