Initial commit

.env

@@ -0,0 +1 @@
+COMPOSE_PROJECT_NAME=m2_meanbee_csspreload

.gitignore

@@ -0,0 +1 @@
+/magento

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.

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 [email protected]: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>
+```

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": "[email protected]"
+    }
+  ],
+  "autoload": {
+    "files": [
+      "src/registration.php"
+    ],
+    "psr-4": {
+      "Meanbee\\CSSPreload\\": "/src"
+    }
+  }
+}

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
+      - [email protected]
+      - 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

magento.env

@@ -0,0 +1,2 @@
+MAGENTO_RUN_MODE=developer
+PHP_MEMORY_LIMIT=2G

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

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;
+    }
+
+}

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>

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>

src/registration.php

@@ -0,0 +1,7 @@
+<?php
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Meanbee_CSSPreload',
+    __DIR__
+);

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>

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>

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 ));