Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gregives/eleventy-load-css
Find dependencies in and minify CSS using eleventy-load
https://github.com/gregives/eleventy-load-css
css eleventy eleventy-load
Last synced: about 2 months ago
JSON representation
Find dependencies in and minify CSS using eleventy-load
- Host: GitHub
- URL: https://github.com/gregives/eleventy-load-css
- Owner: gregives
- License: mit
- Created: 2020-11-06T22:53:31.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-26T09:44:30.000Z (over 3 years ago)
- Last Synced: 2024-12-17T01:25:22.345Z (about 2 months ago)
- Topics: css, eleventy, eleventy-load
- Language: JavaScript
- Homepage:
- Size: 198 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# eleventy-load-css
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Prettier][prettier-src]][prettier-href]
Find dependencies in and minify CSS using [eleventy-load](https://github.com/gregives/eleventy-load).
## Getting Started
Firstly, you'll need to install [eleventy-load](https://github.com/gregives/eleventy-load) (if you haven't already) and eleventy-load-css. You'll probably want to use eleventy-load-css in combination with [eleventy-load-html](https://github.com/gregives/eleventy-load-html) and [eleventy-load-file](https://github.com/gregives/eleventy-load-file), so we'll install those as well.
```sh
npm install --save-dev eleventy-load eleventy-load-css eleventy-load-html eleventy-load-file
```
Then you can set up eleventy-load-css using a rule in your eleventy-load options.
```js
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(require("eleventy-load"), {
rules: [
{
test: /\.html$/,
loaders: [
{
loader: require("eleventy-load-html"),
},
],
},
{
test: /\.css$/,
loaders: [
{
loader: require("eleventy-load-css"),
options: {
minimize: true,
},
},
{
loader: require("eleventy-load-file"),
options: {
name: "[hash].css",
},
},
],
},
],
});
};
```
Now that you've set up eleventy-load-css, you can reference a CSS file from an HTML template and eleventy-load-css will process it for you.
```html
```
## Options
| Name | Type | Default | Description |
| --------------------------- | ------------------- | ------- | ---------------------------------------------------------------------- |
| [**`url`**](#url) | `Boolean\|Function` | `true` | Processes `url` dependencies |
| [**`import`**](#import) | `Boolean` | `true` | Processes `@import` dependencies |
| [**`minimize`**](#minimize) | `Boolean\|Object` | `false` | Minimize using [CleanCSS](https://github.com/jakubpawlowicz/clean-css) |
### `url`
Type: `Boolean|Function` Default: `true`
If `true`, processes `url` functions as eleventy-load dependencies.
If `Function`, calls the provided function to resolve the path of the dependency first, with an object containing the following:
- `resourcePath`: the path of the resource currently being processed
- `source`: the path of the resource in the `url`
```scss
// eleventy-load will process cat.jpg if `url` is true
background-image: url("cat.jpg");
```
### `import`
Type: `Boolean` Default: `true`
If `true`, processes `@import` rules as eleventy-load dependencies.
```scss
// eleventy-load will process styles.css if `import` is true
@import "styles.css";
```
### `minimize`
Type: `Boolean|Object` Default: `false`
If `true` or an `Object`, eleventy-load-css will minimize CSS using [CleanCSS](https://github.com/jakubpawlowicz/clean-css). If an `Object`, these will be provided to CleanCSS as options.
```js
{
loader: require("eleventy-load-css"),
options: {
minimize: {
level: 2 // Use CleanCSS level 2 optimisations
}
},
},
```
[npm-version-src]: https://img.shields.io/npm/v/eleventy-load-css/latest.svg
[npm-version-href]: https://npmjs.com/package/eleventy-load-css
[npm-downloads-src]: https://img.shields.io/npm/dt/eleventy-load-css.svg
[npm-downloads-href]: https://npmjs.com/package/eleventy-load-css
[license-src]: https://img.shields.io/npm/l/eleventy-load-css.svg
[license-href]: https://npmjs.com/package/eleventy-load-css
[prettier-src]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
[prettier-href]: https://github.com/prettier/prettier