aretecode/planck-id

Minifies (almost) all HTML ids + classes, & CSS + JS selectors

dev-master / 0.11.2.x-dev 2016-05-06 03:17 UTC

Requires

• php: >=5.6.0
• illuminate/support: dev-master
• league/event: 2.1.*
• league/flysystem: 1.0.*
• league/flysystem-memory: 1.0.*
• phpflo/phpflo: dev-master
• symfony/console: ~2.0
• symfony/var-dumper: 3.0.*

Requires (Dev)

• behat/behat: ~3.0
• phpunit/phpunit: 5.1.*

MIT

• AreteCode

• css
• JS
• html
• minify
• id
• selector
• optimize
• shrink
• planck
• planckid
• planck-id

README

#PlanckId (planck-id)

What is it?

Minifies (almost) all HTML ids + classes, & CSS + JS selectors.

Example

Turns this:

<a href="https://packagist.org/login/github" class="pull-right btn btn-primary btn-github">
    <span class="icon-github" id="special_github"></span>Use Github
</a>
<style>.pull-right, .btn, .btn-primary, .btn-github, .icon-github {} #special_github{}</style>
<style>.btn{}</style>
<script>var githubButtons = document.getElementsByClassName('btn-github'); var specialGithub = document.getElementById('special_github');</script>
<script>githubIconButtons = $('.icon-github');</script>

Into this:

<a href="https://packagist.org/login/github" class="c e a d">
    <span class="b" id="f"></span>Use Github
</a>
<style>.c, .e, .a, .d, .b {} #f{}</style>
<style>.e{}</style>
<script>var githubButtons = document.getElementsByClassName('d'); var specialGithub = document.getElementById('f');</script>
<script>githubIconButtons = $('.b');</script>

Graphs

Put the .json files from planck-id/graphs into NoFlo

Installation

It can be installed from Packagist using Composer. Make sure your composer.json contains:

{
    "require": {
        "aretecode/planck-id"
    }
}

then, run:

$ wget http://getcomposer.org/composer.phar
$ php composer.phar install

Use

Basic Usage

See examples

Command Line

Converting a file named markup.html:

planck markup.html

Converting a file named markup.html:

planck markup.html --debug

Converting a file and saving its output:

planck markup.html > output.html

Converting a file using an existing map replacing a style file:

planck style.css map.json style Replace

Converting a file using an existing map, extracting more to add to the map, then replacing a style file:

planck style.css map.json style ExtractAndReplace

Extracting the the contents of a file and adding it to a map:

planck markup.html map.json markup Extract

Converting from STDIN

echo -e '<section class="post-simple media-adjacent"></section><style>.post-simple{}</style>' | planck

Converting from STDIN and saving the output:

echo -e '<section class="post-simple media-adjacent"></section><style>.post-simple{}</style>' | planck > output.html

Terminology

• Planck: (Planck length, in principle, the shortest measurable length.) an instance of the shortest available valid class/id/selector.
• Original: the class/id/selector before it was turned into a Planck. (I'm open to changing this, feel free to suggest a new term.)

How does it do this?

Using Flow Based Progamming it creates a map<original, planck> according to the requirements, then passes the content into the series of components to achieve the desired outcome.

Running tests

1. Run in the browser by navigating to planck-id/tests/Run.php
2. Run via the command line by changing your directory to planck-id/bin and then running behat
3. Run via the command line by going to planck-id and running phpunit

(these tests use a snippet from thegrids website)

Todos