gcg

gulp-css-globbing

A Gulp plugin for globbing CSS import statements

Showing:

Popularity

Downloads/wk

841

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

4

Package

Dependencies

3

Size (min+gzip)

42.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

gulp-css-globbing Build Status Dependency Status

A Gulp plugin for globbing CSS @import statements

Expands CSS @import statements containing globs with the full paths. Useful with pre-processors like Sass.

Heavily inspired by sass-globbing

NEW MANTAINER NOTICE: This library proved useful for me and that's why I've started to actively mantain it.

Install

Install gulp-css-globbing as a development dependency using npm:

npm install --save-dev gulp-css-globbing

Usage

var cssGlobbing = require('gulp-css-globbing');

gulp.task('css', function(){
  gulp.src(['src/styles.css'])
    .pipe(cssGlobbing())
    .pipe(gulp.dest('build/styles.css'));
});

Given a CSS file that looks like this:

@import url('components/*.css');

body {
  background: white;
}

The plugin would produce the following:

@import url('components/flex-embed.css');
@import url('components/media.css');

body {
  background: white;
}

Globbing is relative to the source file's path.

Options

gulp-css-globbing can be called with an options object:

gulp.task('css', function(){
  gulp.src(['src/styles.css'])
    .pipe(cssGlobbing({
      extensions: ['.css', '.scss'],
      ignoreFolders: ['../styles'],
      autoReplaceBlock: {
        onOff: false,
        globBlockBegin: 'cssGlobbingBegin',
        globBlockEnd: 'cssGlobbingEnd',
        globBlockContents: '../**/*.scss'
      },
      scssImportPath: {
        leading_underscore: false,
        filename_extension: false
      }
    }))
    .pipe(gulp.dest('build/styles.css'));
});

extensions

Type: String or Array

The file extensions to treat as valid imported files. If files are found that match the glob, but its extensions don't match this option, they will not be added to the resulting file.

Default: ['.css']

ignoreFolders

Type: String or Array

Folders gulp-css-globbing should ignore. Each folder should be relative to the source file.

Default: ['']

autoReplaceBlock

Type: String or Object

Search for a block of text which is replaced with the path to the files we want to glob. Path can be re-replaced each time we call gulp-css-globbing.

Default:

{
  onOff: false,
  globBlockBegin: 'cssGlobbingBegin',
  globBlockEnd: 'cssGlobbingEnd',
  globBlockContents: '../**/*.scss'
}

With the above settings, inside of your main .scss file you would only need to have this:

// cssGlobbingBegin
// this line can be blank
// cssGlobbingEnd

scssImportPath

Type: Object

Allows for default scss rules for writing scss import paths.

Default:

{
  leading_underscore: true, // underscores will NOT be removed
  filename_extension: true // extensions will NOT be removed
}

Leading Underscore

If leading_underscore is set to false, then the first leading underscore of a file name will be removed. Example: .../main/_main.scss becomes @import '../main/main.scss';

Filename Extension

If filename_extension is set to false, then the the extension of a file name will be removed. Example: .../main/_main.scss becomes @import '../main/_main';

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial