From 887bdba91bc8abaffb0734e7a9857495f8b56229 Mon Sep 17 00:00:00 2001
From: Darren Belding <darren.belding@meanbee.com>
Date: Wed, 1 Feb 2017 13:20:13 +0000
Subject: [PATCH] Initial commit

---
 .env                                          |   1 +
 .gitignore                                    |   1 +
 LICENSE                                       |  20 +++
 README.md                                     |  41 +++++++
 composer.json                                 |  33 +++++
 docker-compose.yml                            | 115 ++++++++++++++++++
 magento.env                                   |   2 +
 setup.sh                                      |  22 ++++
 src/Block/Head/Preload.php                    |  35 ++++++
 src/etc/frontend/di.xml                       |   8 ++
 src/etc/module.xml                            |   4 +
 src/registration.php                          |   7 ++
 src/view/frontend/layout/default.xml          |   8 ++
 .../frontend/layout/default_head_blocks.xml   |   7 ++
 src/view/frontend/web/js/cssrelpreload.js     |  44 +++++++
 src/view/frontend/web/js/loadCSS.js           |  79 ++++++++++++
 16 files changed, 427 insertions(+)
 create mode 100644 .env
 create mode 100644 .gitignore
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 composer.json
 create mode 100644 docker-compose.yml
 create mode 100644 magento.env
 create mode 100644 setup.sh
 create mode 100644 src/Block/Head/Preload.php
 create mode 100644 src/etc/frontend/di.xml
 create mode 100644 src/etc/module.xml
 create mode 100644 src/registration.php
 create mode 100644 src/view/frontend/layout/default.xml
 create mode 100644 src/view/frontend/layout/default_head_blocks.xml
 create mode 100644 src/view/frontend/web/js/cssrelpreload.js
 create mode 100644 src/view/frontend/web/js/loadCSS.js

diff --git a/.env b/.env
new file mode 100644
index 0000000..2ac3008
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+COMPOSE_PROJECT_NAME=m2_meanbee_csspreload
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b24cec4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/magento
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..e09ca15
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Meanbee
+
+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.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..be3d45e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,41 @@
+# Magento 2 CSS Preload
+
+Simple module that allows for asynchronous CSS loading in Magento 2
+
+## Installation
+
+1. Go to your Magento root directory
+2. Run ```composer config repositories.css-preload vcs git@github.com:meanbee/magento2-csspreload.git```
+3. Run ```composer require meanbee/magento2-csspreload @dev```
+
+## Development
+
+### Setting up a development environment
+
+A Docker development environment is included with the project:
+
+```
+mkdir magento
+docker-compose up -d db # Allow a few seconds for the db to initalise
+docker-compose run --rm cli bash /src/setup.sh
+docker-compose up -d
+```
+
+
+## Usage
+```
+<referenceBlock name="head.csspreload">
+    <arguments>
+        <argument name="assets" xsi:type="array">
+            <item name="unique_name" xsi:type="array">
+                <item name="path" xsi:type="string">css/filename.css</item>
+                    <item name="attributes" xsi:type="array">
+                        <item name="name" xsi:type="string">attribute</item>
+                        <item name="value" xsi:type="string">value</item>
+                    </item>
+                </item>
+            </item>
+        </argument>
+    </arguments>
+</referenceBlock>
+```
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..2993c64
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,33 @@
+{
+  "name": "meanbee/magento2-csspreload",
+  "description": "Magento 2 module that allows loading of stylesheets with the preload attribute",
+  "type": "magento2-module",
+  "version": "1.0.0",
+  "license": [
+    "Commercial"
+  ],
+  "repositories": {
+    "magento": {
+      "type": "composer",
+      "url": "https://repo.magento.com/"
+    }
+  },
+  "require": {
+    "magento/framework": "100.1.*",
+    "psr/log": "~1.0"
+  },
+  "authors": [
+    {
+      "name": "Darren Belding",
+      "email": "darren.belding@meanbee.com"
+    }
+  ],
+  "autoload": {
+    "files": [
+      "src/registration.php"
+    ],
+    "psr-4": {
+      "Meanbee\\CSSPreload\\": "/src"
+    }
+  }
+}
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..50a758a
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,115 @@
+version: "2"
+services:
+  varnish:
+    image: meanbee/magento2-varnish:latest
+    hostname: m2-meanbee-csspreload.docker
+    ports:
+      - 80
+    environment:
+      - VIRTUAL_HOST=m2-meanbee-csspreload.docker
+      - VIRTUAL_PORT=80
+      - HTTPS_METHOD=noredirect
+      - CERT_NAME=default
+    links:
+      - web
+
+  web:
+    image: meanbee/magento2-nginx:1.9
+    hostname: web.m2-meanbee-csspreload.docker
+    ports:
+      - 80
+    volumes_from:
+      - appdata
+    env_file:
+      - ./magento.env
+    links:
+      - fpm
+
+  fpm:
+    image: meanbee/magento2-php:7.0-fpm
+    hostname: fpm.m2-meanbee-csspreload.docker
+    ports:
+      - 9000
+    volumes_from:
+      - appdata
+    env_file:
+      - ./magento.env
+    environment:
+      - ENABLE_SENDMAIL=true
+      - PHP_ENABLE_XDEBUG
+    links:
+      - db
+
+  cron:
+    image: meanbee/magento2-php:7.0-cli
+    hostname: cron.m2-meanbee-csspreload.docker
+    command: run-cron
+    volumes_from:
+      - appdata
+    env_file:
+      - ./magento.env
+    environment:
+      - ENABLE_SENDMAIL=true
+    links:
+      - db
+
+  cli:
+    image: meanbee/magento2-php:7.0-cli
+    volumes_from:
+      - appdata
+    volumes:
+      - ~/.composer:/root/.composer
+    env_file:
+      - ./magento.env
+    environment:
+      - COMPOSER_HOME=/root/.composer
+      - COMPOSER_ALLOW_SUPERUSER=1
+      - M2SETUP_INSTALL_DB=true
+      - M2SETUP_VERSION=2.1.*
+      - M2SETUP_USE_SAMPLE_DATA=true
+      - M2SETUP_DB_HOST=db
+      - M2SETUP_DB_NAME=magento2
+      - M2SETUP_DB_USER=magento2
+      - M2SETUP_DB_PASSWORD=magento2
+      - M2SETUP_BASE_URL=https://m2-meanbee-csspreload.docker/
+      - M2SETUP_BACKEND_FRONTNAME=admin
+      - M2SETUP_ADMIN_FIRSTNAME=Admin
+      - M2SETUP_ADMIN_LASTNAME=User
+      - M2SETUP_ADMIN_EMAIL=admin@example.com
+      - M2SETUP_ADMIN_USER=admin
+      - M2SETUP_ADMIN_PASSWORD=password123
+    links:
+      - db
+
+  db:
+    image: mariadb:10
+    ports:
+      - 3306
+    volumes_from:
+      - dbdata
+    env_file:
+      - ./magento.env
+    environment:
+      - MYSQL_ROOT_PASSWORD=magento2
+      - MYSQL_USER=magento2
+      - MYSQL_PASSWORD=magento2
+      - MYSQL_DATABASE=magento2
+      - TERM=dumb
+
+  appdata:
+    image: cweagans/bg-sync
+    volumes:
+      - /var/www/magento
+      - .:/src
+    environment:
+      - SYNC_SOURCE=/var/www/magento
+      - SYNC_DESTINATION=/src/magento
+      - SYNC_VERBOSE=1
+      - SYNC_MAX_INOTIFY_WATCHES=64000
+    privileged: true
+    restart: always
+
+  dbdata:
+    image: tianon/true
+    volumes:
+      - /var/lib/mysql
\ No newline at end of file
diff --git a/magento.env b/magento.env
new file mode 100644
index 0000000..f6021d9
--- /dev/null
+++ b/magento.env
@@ -0,0 +1,2 @@
+MAGENTO_RUN_MODE=developer
+PHP_MEMORY_LIMIT=2G
\ No newline at end of file
diff --git a/setup.sh b/setup.sh
new file mode 100644
index 0000000..ad46367
--- /dev/null
+++ b/setup.sh
@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+
+set -e # Exit on error
+
+# Install Magento 2 if necessary
+magento-installer
+
+cd $MAGENTO_ROOT
+
+# Add the extension via Composer
+composer config repositories.meanbee_csspreload '{"type": "path", "url": "/src", "options": {"symlink": true}}'
+
+composer require "meanbee/magento2-csspreload" "@dev"
+
+# Workaround for Magento only allowing template paths within the install root
+ln -s /src $MAGENTO_ROOT/src
+
+# Enable the extension and run migrations
+magento-command module:enable Meanbee_CSSPreload
+magento-command setup:upgrade
+magento-command setup:static-content:deploy
+magento-command cache:flush
\ No newline at end of file
diff --git a/src/Block/Head/Preload.php b/src/Block/Head/Preload.php
new file mode 100644
index 0000000..2af07cc
--- /dev/null
+++ b/src/Block/Head/Preload.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Meanbee\CSSPreload\Block\Head;
+
+class Preload extends \Magento\Framework\View\Element\AbstractBlock
+{
+    protected $_template;
+
+    public function __construct(
+        \Magento\Framework\View\Element\Context $context,
+        string $template,
+        array $data = []
+    ) {
+        parent::__construct($context, $data);
+
+        $this->_template = $template;
+    }
+
+    /**
+     * Produce and return block's html output
+     *
+     * @return string
+     */
+    protected function _toHtml() {
+        $html = '';
+        foreach ($this->getAssets() as $asset) {
+            $attributesHtml = sprintf('%s="%s"', $asset['attributes']['name'], $asset['attributes']['value']);
+            $assetUrl = $this->_assetRepo->getUrl($asset['path']);
+            $html .= sprintf($this->_template, $assetUrl, $attributesHtml);
+        }
+
+        return $html;
+    }
+
+}
diff --git a/src/etc/frontend/di.xml b/src/etc/frontend/di.xml
new file mode 100644
index 0000000..7089404
--- /dev/null
+++ b/src/etc/frontend/di.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <type name="Meanbee\CSSPreload\Block\Head\Preload">
+        <arguments>
+            <argument name="template" xsi:type="string"><![CDATA[<link rel="preload" as="style" href="%s" onload="this.rel='stylesheet'" %s />]]></argument>
+        </arguments>
+    </type>
+</config>
diff --git a/src/etc/module.xml b/src/etc/module.xml
new file mode 100644
index 0000000..4715b06
--- /dev/null
+++ b/src/etc/module.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="Meanbee_CSSPreload" setup_version="1.0.0"/>
+</config>
diff --git a/src/registration.php b/src/registration.php
new file mode 100644
index 0000000..151ec76
--- /dev/null
+++ b/src/registration.php
@@ -0,0 +1,7 @@
+<?php
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Meanbee_CSSPreload',
+    __DIR__
+);
\ No newline at end of file
diff --git a/src/view/frontend/layout/default.xml b/src/view/frontend/layout/default.xml
new file mode 100644
index 0000000..240c551
--- /dev/null
+++ b/src/view/frontend/layout/default.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="head.additional">
+            <block class="Meanbee\CSSPreload\Block\Head\Preload" name="head.csspreload" />
+        </referenceBlock>
+    </body>
+</page>
diff --git a/src/view/frontend/layout/default_head_blocks.xml b/src/view/frontend/layout/default_head_blocks.xml
new file mode 100644
index 0000000..9fa42a3
--- /dev/null
+++ b/src/view/frontend/layout/default_head_blocks.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <script src="Meanbee_CSSPreload::js/cssrelpreload.js" async="true" />
+        <script src="Meanbee_CSSPreload::js/loadCSS.js" async="true" />
+    </head>
+</page>
\ No newline at end of file
diff --git a/src/view/frontend/web/js/cssrelpreload.js b/src/view/frontend/web/js/cssrelpreload.js
new file mode 100644
index 0000000..de9eb14
--- /dev/null
+++ b/src/view/frontend/web/js/cssrelpreload.js
@@ -0,0 +1,44 @@
+/*! CSS rel=preload polyfill. Depends on loadCSS function. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT  */
+(function( w ){
+    // rel=preload support test
+    if( !w.loadCSS ){
+        return;
+    }
+    var rp = loadCSS.relpreload = {};
+    rp.support = function(){
+        try {
+            return w.document.createElement( "link" ).relList.supports( "preload" );
+        } catch (e) {
+            return false;
+        }
+    };
+
+    // loop preload links and fetch using loadCSS
+    rp.poly = function(){
+        var links = w.document.getElementsByTagName( "link" );
+        for( var i = 0; i < links.length; i++ ){
+            var link = links[ i ];
+            if( link.rel === "preload" && link.getAttribute( "as" ) === "style" ){
+                w.loadCSS( link.href, link );
+                link.rel = null;
+            }
+        }
+    };
+
+    // if link[rel=preload] is not supported, we must fetch the CSS manually using loadCSS
+    if( !rp.support() ){
+        rp.poly();
+        var run = w.setInterval( rp.poly, 300 );
+        if( w.addEventListener ){
+            w.addEventListener( "load", function(){
+                rp.poly();
+                w.clearInterval( run );
+            } );
+        }
+        if( w.attachEvent ){
+            w.attachEvent( "onload", function(){
+                w.clearInterval( run );
+            } )
+        }
+    }
+}( this ));
diff --git a/src/view/frontend/web/js/loadCSS.js b/src/view/frontend/web/js/loadCSS.js
new file mode 100644
index 0000000..f4b152c
--- /dev/null
+++ b/src/view/frontend/web/js/loadCSS.js
@@ -0,0 +1,79 @@
+/*! loadCSS: load a CSS file asynchronously. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT */
+(function(w){
+    "use strict";
+    /* exported loadCSS */
+    var loadCSS = function( href, before, media ){
+        // Arguments explained:
+        // `href` [REQUIRED] is the URL for your CSS file.
+        // `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
+        // By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
+        // `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
+        var doc = w.document;
+        var ss = doc.createElement( "link" );
+        var ref;
+        if( before ){
+            ref = before;
+        }
+        else {
+            var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
+            ref = refs[ refs.length - 1];
+        }
+
+        var sheets = doc.styleSheets;
+        ss.rel = "stylesheet";
+        ss.href = href;
+        // temporarily set media to something inapplicable to ensure it'll fetch without blocking render
+        ss.media = "only x";
+
+        // wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
+        function ready( cb ){
+            if( doc.body ){
+                return cb();
+            }
+            setTimeout(function(){
+                ready( cb );
+            });
+        }
+        // Inject link
+        // Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
+        // Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
+        ready( function(){
+            ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
+        });
+        // A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
+        var onloadcssdefined = function( cb ){
+            var resolvedHref = ss.href;
+            var i = sheets.length;
+            while( i-- ){
+                if( sheets[ i ].href === resolvedHref ){
+                    return cb();
+                }
+            }
+            setTimeout(function() {
+                onloadcssdefined( cb );
+            });
+        };
+
+        function loadCB(){
+            if( ss.addEventListener ){
+                ss.removeEventListener( "load", loadCB );
+            }
+            ss.media = media || "all";
+        }
+
+        // once loaded, set link's media back to `all` so that the stylesheet applies once it loads
+        if( ss.addEventListener ){
+            ss.addEventListener( "load", loadCB);
+        }
+        ss.onloadcssdefined = onloadcssdefined;
+        onloadcssdefined( loadCB );
+        return ss;
+    };
+    // commonjs
+    if( typeof exports !== "undefined" ){
+        exports.loadCSS = loadCSS;
+    }
+    else {
+        w.loadCSS = loadCSS;
+    }
+}( typeof global !== "undefined" ? global : this ));