init

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+	'extends': 'trigen/base'
+};

.gitignore

@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,60 @@
+[![NPM](https://nodei.co/npm/gulp-progressive-css.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/gulp-progressive-css/)
+
+# gulp-progressive-css
+
+Transfrom `<link>` in HTML to progressive CSS loading.
+
+# Getting Started
+
+Install with npm
+```bash
+npm i -D gulp-progressive-css
+```
+or
+```bash
+yarn add -D gulp-progressive-css
+```
+
+# About
+
+By using this plugin you can easily transform your simple HTML page to super fast HTML page with progressive CSS loading. You can do it by using custom `priority` attribute with `<link>` tag.
+
+```html
+<link rel="stylesheet" priority="critical" href="critical.css">
+<link rel="stylesheet" priority="queued" href="loader.php?file=content.css&sleep=2">
+<link rel="stylesheet" priority="queued" href="loader.php?file=footer.css&sleep=4">
+```
+
+`critical` - means what this styles will be embedded into HTML file.
+`queued` - means what this styles will be loaded asynchronously in specified order and without render blocking.
+
+# API
+
+### `gulpProgressiveCSSPlugin([options])`
+
+#### `String options.base`
+
+Base directory to find CSS files.
+Default: `./`
+
+#### `String options.useXHR`
+
+Load styles with `<link>` or using XMLHttpRequest. [You can get more info here.](https://github.com/TrigenSoftware/import-css#about)
+Default: `false`
+
+Example of `gulpfile.js`:
+```js
+const gulp = require('gulp'),
+	procss = require('gulp-progressive-css');
+
+gulp.task('css', () =>
+	gulp.src('src/*.css')
+		.pipe(gulp.dest('dist'))
+);
+
+gulp.task('html', gulp.series('css', () =>
+	gulp.src('src/*.html')
+		.pipe(procss({ base: 'dist' }))
+		.pipe(gulp.dest('dist'))
+));
+```

example/dist/content.css

@@ -0,0 +1,13 @@
+
+section {
+	display: block;
+}
+
+section > main {
+	font-size: 2em;
+	color: green;
+	height: 80vh;
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}

example/dist/critical.css

@@ -0,0 +1,31 @@
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	margin: 0;
+}
+
+header > main,
+section > main,
+footer > main {
+	max-width: 900px;
+	margin: 0 auto;
+	overflow: hidden;
+}
+
+header {
+	position: fixed;
+	left: 0;
+	right: 0;
+}
+
+header > main {
+	height: 20vh;
+}
+
+section, footer {
+	display: none;
+}

example/dist/footer.css

@@ -0,0 +1,7 @@
+
+footer {
+	display: block;
+	background: silver;
+	color: white;
+	height: 20vh;
+}

example/dist/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Progressive CSS Playground</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
+		<meta name="format-detection" content="telephone=no"/>
+		<style>* {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	margin: 0;
+}
+
+header > main,
+section > main,
+footer > main {
+	max-width: 900px;
+	margin: 0 auto;
+	overflow: hidden;
+}
+
+header {
+	position: fixed;
+	left: 0;
+	right: 0;
+}
+
+header > main {
+	height: 20vh;
+}
+
+section, footer {
+	display: none;
+}</style>
+	</head>
+	<body>
+		<header>
+			<main>
+				<h1>Header</h1>
+			</main>
+		</header>
+		<section>
+			<main>
+				<h1>Section</h1>
+			</main>
+		</section>
+		<footer>
+			<main>
+				<h1>Footer</h1>
+			</main>
+		</footer>
+		<script>!(function(w){'use strict';w.importCSS=importCSS;var $=document,root=$.body||$.getElementsByTagName('head')[0],sheets=$.styleSheets,queue=[];function onLoadLinkDefined(a,b){for(var c=sheets.length;c--;)if(sheets[c].href===a)return void b();setTimeout(function(){return onLoadLinkDefined(a,b)})}function importCSS(a,b){function c(){d.addEventListener&&d.removeEventListener('load',c),e=!0;var f=!0;queue=queue.filter(function(g){return!(f=f&&g())})}var d=$.createElement('link'),e=!1;d.rel='stylesheet',d.href=a,d.media='only x',queue.push(function(){return e&&(d.media=b||'all'),e}),root.insertBefore(d,null),d.addEventListener&&d.addEventListener('load',c),onLoadLinkDefined(d.href,c)}})(window)</script>
+		<script>importCSS('loader.php?file=content.css&sleep=2')</script>
+		<script>importCSS('loader.php?file=footer.css&sleep=4')</script>
+	</body>
+</html>

example/dist/loader.php

@@ -0,0 +1,13 @@
+<?php
+
+if (!isset($_GET['file'])) {
+	exit();
+}
+
+if (isset($_GET['sleep'])) {
+	sleep($_GET['sleep']);
+}
+
+header("Content-type: text/css");
+
+echo file_get_contents($_GET['file']);

example/gulpfile.js

@@ -0,0 +1,13 @@
+const gulp = require('gulp'),
+	procss = require('../lib/index');
+
+gulp.task('css', () =>
+	gulp.src('src/*.css')
+		.pipe(gulp.dest('dist'))
+);
+
+gulp.task('html', gulp.series('css', () =>
+	gulp.src('src/*.html')
+		.pipe(procss({ base: 'dist' }))
+		.pipe(gulp.dest('dist'))
+));

example/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "test",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": {},
+  "author": "dangreen",
+  "license": "MIT",
+  "dependencies": {
+    "gulp": "github:gulpjs/gulp#4.0",
+    "gulp-progressive-css": "file:../"
+  }
+}

example/src/content.css

@@ -0,0 +1,13 @@
+
+section {
+	display: block;
+}
+
+section > main {
+	font-size: 2em;
+	color: green;
+	height: 80vh;
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}

example/src/critical.css

@@ -0,0 +1,31 @@
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	margin: 0;
+}
+
+header > main,
+section > main,
+footer > main {
+	max-width: 900px;
+	margin: 0 auto;
+	overflow: hidden;
+}
+
+header {
+	position: fixed;
+	left: 0;
+	right: 0;
+}
+
+header > main {
+	height: 20vh;
+}
+
+section, footer {
+	display: none;
+}

example/src/footer.css

@@ -0,0 +1,7 @@
+
+footer {
+	display: block;
+	background: silver;
+	color: white;
+	height: 20vh;
+}

example/src/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Progressive CSS Playground</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
+		<meta name="format-detection" content="telephone=no"/>
+		<link rel="stylesheet" priority="critical" href="critical.css">
+		<link rel="stylesheet" priority="queued" href="loader.php?file=content.css&sleep=2">
+		<link rel="stylesheet" priority="queued" href="loader.php?file=footer.css&sleep=4">
+	</head>
+	<body>
+		<header>
+			<main>
+				<h1>Header</h1>
+			</main>
+		</header>
+		<section>
+			<main>
+				<h1>Section</h1>
+			</main>
+		</section>
+		<footer>
+			<main>
+				<h1>Footer</h1>
+			</main>
+		</footer>
+	</body>
+</html>