# gulp-cssimport

> Parses a CSS file, finds imports, grabs the content of the linked file and replaces the import statement with it.

Latest version **7.0.0** (published 2018-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-cssimport
pnpm add gulp-cssimport
yarn add gulp-cssimport
bun add gulp-cssimport
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.0.0 |
| Published | 2018-10-13 |
| First published | 2014-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 35 |
| Maintainers | iamthes |
| Keywords | css, gulpplugin, import |

## Links

- npm: https://www.npmjs.com/package/gulp-cssimport
- Repository: https://github.com/unlight/gulp-cssimport
- Homepage: https://github.com/unlight/gulp-cssimport#readme
- Issues: https://github.com/unlight/gulp-cssimport/issues
- npm.io page: https://npm.io/package/gulp-cssimport

## Dependencies (13)

- [pify](https://npm.io/package/pify.md) ^3.0.0
- [vinyl](https://npm.io/package/vinyl.md) ^2.2.0
- [through2](https://npm.io/package/through2.md) ^2.0.3
- [minimatch](https://npm.io/package/minimatch.md) ^3.0.4
- [strip-bom](https://npm.io/package/strip-bom.md) ^3.0.0
- [http-https](https://npm.io/package/http-https.md) ^1.0.0
- [deep-extend](https://npm.io/package/deep-extend.md) ^0.6.0
- [lodash.trim](https://npm.io/package/lodash.trim.md) ^4.5.1
- [lookup-path](https://npm.io/package/lookup-path.md) ^0.3.1
- [magic-string](https://npm.io/package/magic-string.md) ^0.25.1
- [plugin-error](https://npm.io/package/plugin-error.md) ^0.1.2
- [collect-stream](https://npm.io/package/collect-stream.md) ^1.2.1
- [vinyl-sourcemaps-apply](https://npm.io/package/vinyl-sourcemaps-apply.md) ^0.2.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 7.0.0 (latest) — 2018-10-13
- 6.0.1 — 2018-02-23
- 6.0.0 — 2017-09-02
- 5.1.1 — 2017-08-12
- 5.1.0 — 2017-08-12
- 5.0.0 — 2016-11-19
- 4.0.1 — 2016-10-07
- 4.0.0 — 2016-10-06
- 3.1.0 — 2016-07-14
- 3.0.2 — 2016-03-11
- 3.0.1 — 2016-02-29
- 2.1.2 — 2015-12-24
- 2.1.1-b — 2015-11-01
- 2.1.1-a — 2015-11-01
- 2.1.1 — 2015-08-07
- … 9 more at https://npm.io/package/gulp-cssimport/versions

## README

# gulp-cssimport
Parses a CSS file, finds imports, grabs the content of the linked file and replaces the import statement with it.

## INSTALL
```sh
npm install gulp-cssimport
```

## USAGE
```js
var gulp = require("gulp");
var cssimport = require("gulp-cssimport");
var options = {};
gulp.task("import", function() {
	gulp.src("src/style.css")
		.pipe(cssimport(options))
		.pipe(gulp.dest("dist/"));
}); 
```

## OPTIONS
#### includePaths
Array, default: `[]`  
Additional paths to resolve imports.

#### skipComments
Boolean, default: `true`  
gulp-cssimport plugin uses regular expressions which is fast but not solid as AST.
If you have any unexpected result, missing imported content, etc. Try to disable this option.

#### filter
RegExp, default: `null` (no filter).  
Process only files which match to regexp.
Any other non-matched lines will be leaved as is.  
Example:
```js
var options = {
	filter: /^http:\/\//gi // process only http urls
};
```

#### matchPattern  
String, glob pattern string. See [minimatch](https://www.npmjs.com/package/minimatch) for more details.
```js
var options = {
	matchPattern: "*.css" // process only css
};
var options2 = {
	matchPattern: "!*.{less,sass}" // all except less and sass
};
```
**Note:**
`matchPattern` will not be applied to urls (remote files, e.g. `http://fonts.googleapis.com/css?family=Tangerine`), only files.  
Urls are matched by default. If you do not want include them, use `filter` option (it is applicable to all).

#### matchOptions
Object, [minimatch](https://www.npmjs.com/package/minimatch) options for `matchPattern`.

#### limit
Number, default `5000`.  
Defence from infinite recursive import.

#### transform
Function, default `null`  
Transform function applied for each import path.  
Signature:
```
(path: string, data: {match: string}) => string
```
Arguments:
* `path` - string, path in import statement
* object with data:
  - `match` - string, matched import expression

#### extensions  
Deprecated, use `matchPattern` instead.  
String or Array, default: `null` (process all).
Case insensitive list of extension allowed to process.
Any other non-matched lines will be leaved as is.  
Examples:
```js
var options = {
	extensions: ["css"] // process only css
};
var options = {
	extensions: ["!less", "!sass"] // all except less and sass
};
```

## TIPS AND TRICKS
**Be more precise and do not add to src importing file without necessary:**  
```css
// main.css
@import "a.css";
@import "b.css";
```
If you will do `gulp.src("*.css")` gulp will read `a.css` and `b.css`,
and plugin also will try to read these files. It is extra job.  
Do instead: `gulp.src("main.css")`

**Use filter option:**  
If you need exclude files from import, try use `filter` only option (it is faster) and avoid others.


## POSTCSS
There are plugins for [PostCSS](https://github.com/postcss/postcss) which do same job or even better:
* [postcss-import](https://github.com/postcss/postcss-import) inlines the stylesheets referred to by `@import` rules
* [postcss-import-url](https://github.com/unlight/postcss-import-url) inlines remote files.


## SIMILAR PROJECTS
https://npmjs.org/package/gulp-coimport/  
https://npmjs.org/package/gulp-concat-css/  
https://github.com/yuguo/gulp-import-css/  
https://github.com/postcss/postcss-import  
https://www.npmjs.com/package/combine-css/  
https://github.com/suisho/gulp-cssjoin  
https://github.com/jfromaniello/css-import  
https://github.com/mariocasciaro/gulp-concat-css  


## KNOWN ISSUES
- Cannot resolve `@import 'foo.css' (min-width: 25em);`

## TODO
- Cache

## CHANGELOG
See [CHANGELOG](CHANGELOG.md)

---
_Source: https://npm.io/package/gulp-cssimport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._