unlight / gulp-cssimport Goto Github PK

View Code? Open in Web Editor NEW

35.0 5.0 9.0 103 KB

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

License: MIT License

JavaScript 87.38% CSS 12.62%

gulp-plugin

gulp-cssimport's Introduction

gulp-cssimport

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

INSTALL

npm install gulp-cssimport

USAGE

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:

var options = {
	filter: /^http:\/\//gi // process only http urls
};

matchPattern

String, glob pattern string. See minimatch for more details.

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 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:

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:

// 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 which do same job or even better:

postcss-import inlines the stylesheets referred to by @import rules
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

Support

gulp-cssimport's People

Contributors

Stargazers

Watchers

Forkers

psdcoder pangor bioball jiawang1 ln-e andy-williams dwiash wangcpsnow csuzipple

gulp-cssimport's Issues

useful-functions missing from NPM registry

I get this error when I try to install this plugin:

npm ERR! 404 'useful-functions' is not in the npm registry.

Plugin remove sourcemaps from end file.

gulpfile.babel.js

import cssimport from 'gulp-cssimport';

gulp.task('sass', function(){
  return gulp
    .src(PATH.SASS.MAIN)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(cssimport())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(PATH.BUILD.CSS))
    .pipe(connect.reload());
});

No sourcemaps inside file, but if i remove cssimport(), sourcemaps work fine.

Gulp-util as a devDependancy?

Should it not be a normal dependancy?

Error follows if cssimport is called without gulp-util explicitly installed. As it is not installed in the initial install of gulp-cssimport.

module.js:340
throw err;
      ^
Error: Cannot find module 'gulp-util'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/www/southern-eastercamp/node_modules/gulp-cssimport/gulp-cssimport.js:1:77)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

outdated minimatch dep

Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

Commented @import statements are not ignored

Commented @import statement do not get skipped. It does not matter whether @import is located inside a block comment /* */ or in an inline comment //. The corresponding regular expression in https://github.com/unlight/gulp-cssimport/blob/master/gulp-cssimport.js#L50 does not check for comments.

For example:

// foo.scss:
// @import "bar.scss";
/*
@import "bar.scss";
*/

// bar.scss:
$x: 5px;

The issue can be solved by stripping comments before executing the parsing regular expression.

when i use cssimport throw UnhandledPromiseRejectionWarning and DeprecationWarning

node:953) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: write callback called multiple times
(node:953) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

some css file success but some not

When files are included from sub-directory the destination file winds up in the wrong place

Here is my directory structure:

drive/company/project/home/
drive/company/project/home/src/
drive/company/project/home/src/patterns/
drive/company/project/home/src/patterns/patterns.less

drive/company/project/home/src/patterns/directives/
drive/company/project/home/src/patterns/directives/containers/
drive/company/project/home/src/patterns/directives/containers/groupBox/
drive/company/project/home/src/patterns/directives/containers/groupBox/group-box.less
drive/company/project/home/src/patterns/directives/elements/
drive/company/project/home/src/patterns/directives/elements/footer/
drive/company/project/home/src/patterns/directives/elements/footer/footer.less
drive/company/project/home/src/patterns/directives/feedback/
drive/company/project/home/src/patterns/directives/feedback/alertBox/
drive/company/project/home/src/patterns/directives/elements/footer/alertBox.less

The file that drives this is the 'patterns.less' file which contains imports:

// injector
@import 'directives/containers/groupBox/group-box.less';
@import 'directives/elements/footer/footer.less';
@import 'directives/feedback/alertBox/alert-box.less';
// endinjector

/** Global UX Patterns **/

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Montserrat';

}

Now my drive/company/project/gulpfile.js has a task to create a SINGLE less file by including the imports:

gulp.task('styles:less', function() {
gulp.src('src/uxpatterns/patterns.less')
.pipe(cssimport())
.pipe(gulp.dest('dist/'));

});

I expect a file containing all the imported files to be at drive/company/project/home/dist/patterns.less.

HOWEVER, the file appears in the drive/ directory.

The content is correct, it's just that the DESTINATION IS WRONG.

As a workaround I have to code my gulpfile to declare a phoney destination:

gulp.task('styles:less', function() {
gulp.src('src/patterns/patterns.less')
.pipe(cssimport())
// this is a hack due to a defect in cssimport
// - we shouldn't have to add a/b/c/
// - the directory is updated in the 'contents' object and shouldn't be
.pipe(gulp.dest('dist/a/b/c/'));

});

not parsing files with ../

hey,

The new version 2 isn't working with files starting with ../
Like @import '../../node_modules/c3/c3.css'; with or without url()
I've tried to load ../minified/d.css into complete/styles.css in the tests directory but no luck.

File masks like **/* cause wrong path resolving

When i define glob something like gulp.src("../src/**/style.css") plugin try to find imported urls in src directory, not in sub directory, where file really is.

node v5.0.0
css-import 2.1.2

recursive inclusion?

It would be great if this would descend into each file it imports and perform imports included in those files.

is it rebase images url ?

@import url(widgets/a.css);

in the a.css i have :

.a {
     background: url(../../images/a.png);
}

how can i get correct url when combine all @imports ?

No ability to includePaths

I may be doing this wrong, but why does gulp-cssimport not have an option for includePaths which gulp-sass has?

I am trying to do something like this:

var gulp = require("gulp"),
    cssimport = require("gulp-cssimport"),
    bourbonPaths = require("node-bourbon").includePaths,
    sourceFilename = "scss/source.scss.liquid",
    destinationFolder = "assets/";

gulp.task("styles", function(){
  return gulp.src([sourceFilename])
    .pipe(cssimport(includePaths: bourbonPaths))
    .pipe(gulp.dest(destinationFolder));
})

I'm trying to use node-bourbon.

Edit: Add more to the source example.

Support for @import "filename"; syntax?

Is it possible to add support for import statements, like them used in scss?

Corrupted Package in 2.1.0 on npm?

I could not install the latest version through npm

Installing 2.0.0 worked fine

Here's the error I get when installing the latest:

$ npm install gulp-cssimport
npm ERR! Darwin 14.5.0
npm ERR! argv "~/.nvm/versions/node/v5.1.0/bin/node" "~/.nvm/versions/node/v5.1.0/bin/npm" "install" "gulp-cssimport"
npm ERR! node v5.1.0
npm ERR! npm  v3.3.12
npm ERR! code EREADFILE

npm ERR! Error extracting ~/.npm/gulp-cssimport/2.1.0/package.tgz archive: ENOENT: no such file or directory, open '~/.npm/gulp-cssimport/2.1.0/package.tgz'
npm ERR!

gulp-cssimport improvements

from email

I just wondering Is it possible to add proxy support to your cssimport package? I have noticed that the http-https package, which you use, should supports proxy settings.

gulp-util removal request

gutil.File => https://www.npmjs.com/package/vinyl
gutil.replaceExtension => The .extname property on Vinyl objects or https://www.npmjs.com/package/replace-ext
gutil.colors => https://www.npmjs.com/package/ansi-colors
gutil.date => https://www.npmjs.com/package/date-format
gutil.log => https://www.npmjs.com/package/fancy-log
gutil.template => https://www.npmjs.com/package/lodash.template
gutil.env => https://www.npmjs.com/package/minimist
gutil.beep => https://www.npmjs.com/package/beeper
gutil.noop => https://www.npmjs.com/package/through2
gutil.isStream => Use the .isStream() method on Vinyl objects
gutil.isBuffer => Use the .isBuffer() method on Vinyl objects
gutil.isNull => Use the .isNull() method on Vinyl objects
gutil.linefeed => Use the string '\n' in your code
gutil.combine => https://www.npmjs.com/package/multipipe
gutil.buffer => https://www.npmjs.com/package/list-stream
gutil.PluginError => https://www.npmjs.com/package/plugin-error

Process minified files

Imported CSS files contain byte order mark

While investigating why some elements in my markup where not styled as intended I found out that the merged CSS files still contain the UTF-8 byte order mark (BOM).

The original separate files are saved as UTF-8 with BOM and these BOMs end up in the merged CSS file. Other (gulp) plugins such as strip-bom are of no help, as these operate only on the first byte in a file.

Open for discussion is wether handling the case within gulp-cssimport or changing the input file encoding is more appropriate.

Replace deprecated gulp-util

Replace deprecated dependency gulp-util

gulp-util has been deprecated recently. Continuing to use this dependency may prevent the use of your library with the recently released version 4 of Gulp, it is important to replace gulp-util.

The README.md lists alternatives for all the components so a simple replacement should be enough.

Your package is popular but still relying on gulp-util, it would be good to publish a fixed version to npm as soon as possible.

See:

Source-map is broken

#16 (comment)

Ignore SASS import

Add flag/parameter to ignore @import instructions whether there is .css. This will be helpful to use together with gulp-sass as workaround for importing clean css files

Add 'root' option and 'urlTransform' option

CSS imports can be absolute paths on a web server where '/styles/...' could be a valid server path, but relate to a different path on the file systme (i.e. '/public/styles/...'). Would you be open to adding the following options to solve this use case:

root: A path that is pre-pended to absolute paths used
urlTransform: a function that is called with each discovered importPath and can return an alternative import path (allows developers to use a development version of a file while working on the source but switch to an optimsed version later on).

css @import inside imported file

Hello. Thank you for the great plugin, but I have some troubles. I saw this error after I had finished my project:
(node:3312) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error in plugin 'gulp-cssimport' Message: socket hang up Details: code: ECONNRESET (node:3312) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Everything had compiled well before I interrupted gulp. Sometimes, maybe, in one case of ten there are no errors and gulp runs properly. I had this import:
@import '../../node_modules/admin-lte/dist/css/AdminLTE.css';

I found that this line in imported css causes the problem:
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
If I delete this, the problem disappears.

gulp-cssimport and gulp-sass how to?

Hello!

I've tried to use this nice plugin with my gulp-sass task like this:

var gulp = require('gulp');
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    cssImport = require("gulp-cssimport");

gulp.task('scss', function () {
  return gulp.src('./src/scss/**/[^_]*.?(s)css')
    .pipe(scss({
        includePaths: [
            'node_modules/slick-carousel/slick'
        ]
    }).on('error', scss.logError))
    .pipe(autoprefixer({
    	flexbox: true,
    	grid: true,
    	browsers: ['> 1%', 'last 5 years', 'Firefox > 20']
    }))
    .pipe(gulp.dest('./src/styles'));
});

var options = {
    includePaths: [
        'node_modules/jquery-colorbox/example1/'
    ]
};

gulp.task("import", ['scss'], function() {
    gulp.src("./src/styles/styles.css")
        .pipe(cssimport(options))
        .pipe(gulp.dest("./src/styles/styles2"));
});

And in the styles2 folder appears a new styles.css file but it's the same as it was after scss task, I mean no extra css was included with import task. What am I doing wrong?

Can it work with absolute path ?

for example:
@import url("/_test/css/c.css");