gulp-inject-inline

0.5.4 • Public • Published

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>

Package Sidebar

Install

npm i gulp-inject-inline

Weekly Downloads

1

Version

0.5.4

License

BSD-3-Clause

Unpacked Size

10.4 kB

Total Files

10

Last publish

Collaborators

  • xvrqt