gsi

gulp-style-inject

Gulp plugin to inject CSS into style tags.

Showing:

Popularity

Downloads/wk

627

GitHub Stars

12

Maintenance

Last Commit

1yr ago

Contributors

5

Package

Dependencies

3

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

gulp-style-inject

NPM version Build Status Coverage Status Dependency Status

style-inject plugin for gulp

Usage

First, install gulp-style-inject as a development dependency:

npm install --save-dev gulp-style-inject

Then, add it to your gulpfile.js:

var styleInject = require("gulp-style-inject");

gulp.src("./src/*.html")
    .pipe(styleInject())
    .pipe(gulp.dest("./dist"));

All your html files should include the following tag:

    <!-- inject-style src="./path/file.css" -->

Example:

<div>
<!-- inject-style src="./test/p.css" -->
<!-- inject-style src="./test/span.css" -->
    <p>Some text</p>
    <span>Some other text</span>
</div>

Output

<div>
<style>
p {
    background-color: red;
}
</style>
<style>
span {
    background-color: green;
}
</style>
    <p>Some text</p>
    <span>Some other text</span>
</div>

Options

The plugin can be used with an options object

var styleInject = require("gulp-style-inject");

gulp.src("./src/*.html")
    .pipe(styleInject({
        encapsulated: false,
        path: './test/styles'
    }))
    .pipe(gulp.dest("./dist"));

Available options:

  • encapsulated: Type boolean, (default: true) - Specifies if the style code should be injected using a style tag
  • path: Type string, (default: '') - Specifies the base path of all style files
  • match_pattern: Type regular expression, (default: <\!--\sinject-style\s(.?)\s-->) - Specifies the pattern to look for when replacing

License

MIT License

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