added a twig extension class for assets + reorganized assets structure + added command line for stylus in README

README.md

@@ -53,3 +53,6 @@ Acceptance and spec tests.
 
 - /mailpoet.php
 Kickstart file.
+
+# Stylus command
+stylus -w assets/css/src/*.styl -o assets/css/

assets/css/common.css

@@ -0,0 +1,27 @@
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+  overflow: hidden;
+}
+.clearfix {
+  display: inline-table;
+}
+* html .clearfix {
+  height: 1%;
+}
+.clearfix {
+  display: block;
+}
+.mailpoet_notice {
+  position: relative;
+}
+.mailpoet_notice_close {
+  position: absolute;
+  right: 0.5em;
+  top: 0.5em;
+  color: #999;
+  text-decoration: none;
+}

assets/css/mailpoet_notice.css

@@ -1,10 +0,0 @@
-.mailpoet_notice {
-    position: relative;
-}
-.mailpoet_notice_close {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-    color: #999;
-    text-decoration: none;
-}

assets/css/src/common.styl

@@ -17,3 +17,14 @@
   display: block
 
 // colors
+
+// notices
+.mailpoet_notice
+    position: relative
+
+.mailpoet_notice_close
+    position: absolute
+    right: 0.5em
+    top: 0.5em
+    color: #999
+    text-decoration: none

assets/css/src/settings.styl

@@ -1,6 +0,0 @@
-body-color = invert(#333)
-body-background = invert(#ccc)
-
-body
-  color body-color
-  background-color: body-background

lib/config/initializer.php

@@ -1,6 +1,7 @@
 <?php
 namespace MailPoet\Config;
 use MailPoet\Models;
+use MailPoet\Renderer;
 
 if (!defined('ABSPATH')) exit;
 
@@ -42,7 +43,8 @@ class Initializer {
     );
 
     // renderer: global variables
-    $this->renderer->addGlobal('assets_url', $this->assets_url);
+    // $this->renderer->addGlobal('assets_url', $this->assets_url);
+    $this->renderer->addExtension(new Renderer\Assets($this->assets_url));
 
     register_activation_hook(
       $this->file,
@@ -50,30 +52,30 @@ class Initializer {
     );
 
     // public assets
-    add_action(
-      'wp_enqueue_scripts',
-      array($this, 'public_css'),
-      10
-    );
-    add_action(
-      'wp_enqueue_scripts',
-      array($this, 'public_js'),
-      10
-    );
+    // add_action(
+    //   'wp_enqueue_scripts',
+    //   array($this, 'public_css'),
+    //   10
+    // );
+    // add_action(
+    //   'wp_enqueue_scripts',
+    //   array($this, 'public_js'),
+    //   10
+    // );
 
     // admin assets
-    add_action(
-      'admin_enqueue_scripts',
-      array($this, 'admin_css'),
-      10,
-      1
-    );
-    add_action(
-      'admin_enqueue_scripts',
-      array($this, 'admin_js'),
-      10,
-      1
-    );
+    // add_action(
+    //   'admin_enqueue_scripts',
+    //   array($this, 'admin_css'),
+    //   10,
+    //   1
+    // );
+    // add_action(
+    //   'admin_enqueue_scripts',
+    //   array($this, 'admin_js'),
+    //   10,
+    //   1
+    // );
 
     // localization
     $this->setup_textdomain();

lib/renderer/assets.php

@@ -0,0 +1,65 @@
+<?php
+namespace MailPoet\Renderer;
+
+class Assets extends \Twig_Extension {
+
+  public $assets_url;
+
+  public function __construct($assets_url) {
+    $this->assets_url = $assets_url;
+  }
+
+  public function getName() {
+    return 'assets';
+  }
+
+  public function getGlobals() {
+    return array(
+      'assets_url' => $this->assets_url
+    );
+  }
+
+  public function getFunctions() {
+    return array(
+      new \Twig_SimpleFunction(
+        'stylesheet',
+        array($this, 'generate_stylesheet'),
+        array('is_safe' => array('all'))
+      ),
+      new \Twig_SimpleFunction(
+        'javascript',
+        array($this, 'generate_javascript'),
+        array('is_safe' => array('all'))
+      )
+    );
+  }
+
+  public function generate_stylesheet() {
+    $stylesheets = func_get_args();
+    $output = array();
+
+    foreach($stylesheets as $stylesheet) {
+      $output[] = '<link
+        rel="stylesheet"
+        type="text/css"
+        href="'.$this->assets_url.'/css/'.$stylesheet.'"
+      >';
+    }
+
+    return join("\n", $output);
+  }
+
+  public function generate_javascript() {
+    $scripts = func_get_args();
+    $output = array();
+
+    foreach($scripts as $script) {
+      $output[] = '<script
+        type="text/javascript"
+        src="'.$this->assets_url.'/js/'.$script.'"
+      ></script>';
+    }
+
+    return join("\n", $output);
+  }
+}

views/layout.html

@@ -8,10 +8,15 @@
 
   {% block content %}{% endblock %}
 </div>
-<!-- notices -->
-<script type="text/javascript" src="{{ assets_url }}/js/mailpoet_notice.js"></script>
-<link rel="stylesheet" type="text/css" href="{{ assets_url }}/css/mailpoet_notice.css">
 
-<!-- modals -->
-<script type="text/javascript" src="{{ assets_url }}/js/mailpoet_modal.js"></script>
-<link rel="stylesheet" type="text/css" href="{{ assets_url }}/css/mailpoet_modal.css">
+<!-- stylesheets -->
+{{ stylesheet(
+  'common.css',
+  'mailpoet_modal.css'
+)}}
+
+<!-- javascripts -->
+{{ javascript(
+  'mailpoet_notice.js',
+  'mailpoet_modal.js'
+)}}