Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-inject-inline with all npm packages installed. Try it out:

var gulpInjectInline = require("gulp-inject-inline")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-inject-inline v0.5.4

Use in your Gulp workflow to inject a file inside another file at a specified control sequence.

Gulp Inject Inline

This plugin searches the files it is given for a control sequence in the format: [ inject-inline file.css ]

It will remove and replace the control sequence with the contents of file.css.

Example

gulpfile.js

const inject_inline = require('gulp-inject-inline');

gulp.task('inject:css', () => {
    gulp.src("src/components/**/*.js")
        .pipe(inject_inline())
        .pipe(gulp.dest("dist/components"));
});

src/components/myComponent.js

export class MyComponent extends HTMLElement {
    private shadow: DocumentFragment;

    /* CSS */
    private static styles: string = `
        [ inject-inline myComponent.css ]
    `;

    constructor() {
        super();
        /* Attach shadow root */
        this.shadow = this.attachShadow({mode: 'open'});

        /* Add the styling to the page */
        const style = document.createElement('style');
        style.innerHTML = MyComponent.styles;
        this.shadow.appendChild(style);
    }
}

window.customElements.define("my-component", MyComponent);

src/components/myComponent.css

:host {
    width: 150px;
    height: 200px;
    display: block;
}

h1 {
    color: #FFF;
}

Would become: dist/components/myComponent.js

export class MyComponent extends HTMLElement {
    private shadow: DocumentFragment;

    /* CSS */
    private static styles: string = `
        :host {
    width: 150px;
    height: 200px;
    display: block;
}

h1 {
    color: #FFF;
}
    `;

    constructor() {
        super();
        /* Attach shadow root */
        this.shadow = this.attachShadow({mode: 'open'});

        /* Add the styling to the page */
        const style = document.createElement('style');
        style.innerHTML = MyComponent.styles;
        this.shadow.appendChild(style);
    }
}

window.customElements.define("my-component", MyComponent);

GitLab

Submit issues, request features, check out the repo here: https://git.xvrqt.com/amy/inject-inline-npm-module

White Space

It will not preserve existing whitespace.

index.html

<html>
    <head>
        <style>
            [ inject-inline mystyles.css ]
        </style>
    </head>
    <body>
        <h1>Hello girls!</h1>
    </body>
</html>

mystyles.css

body {
    background-color: #333;
}

h1 {
    color: #EEE;
}

Will produce:

output.html

<html>
    <head>
        <style>
            body {
    background-color: #333;
}

h1 {
    color: #EEE;
}
        </style>
    </head>
    <body>
        <h1>Hello girls!</h1>
    </body>
</html>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free