Add stylesheet action to provide current version stylesheet

assets/sass/_keylighter.scss

@@ -1,6 +1,5 @@
 $kl-prefix: "kl-";
-
-@import "../../vendor/kadet/keylighter/Styles/Html/keylighter";
+@import "keylighter/fallback";
 
 pre.keylighter {
   background-color: #181818;
@@ -55,5 +54,5 @@ code {
 }
 
 $kl-prefix: "";
-@import "../../vendor/kadet/keylighter/Styles/Html/keylighter";
+@import "keylighter/fallback";
 

assets/sass/keylighter/_utils.scss

@@ -0,0 +1,18 @@
+$kl-prefix: "kl-" !default;
+$kl-tag:    "span" !default;
+$kl-class:  "keylighter" !default;
+
+@function token($selectors...) {
+  $result: "";
+
+  @each $selector in $selectors {
+    $selector: ".#{$selector}";
+    $result: "#{$result}, #{$kl-tag}";
+
+    @each $token in simple_selectors($selector) {
+      $result: "#{$result}.#{$kl-prefix}#{str_slice($token, 2)}";
+    }
+  }
+
+  @return str_slice($result, 3);
+}

assets/sass/keylighter/fallback.scss

@@ -0,0 +1,71 @@
+@import "utils";
+
+// colors:
+$background: #181818;
+$foreground: white;
+
+$red:     #E26F90;
+$magenta: #D17BCA;
+$green:   #89B366;
+$brown:   #99764b;
+$violet:  #BD9CE0;
+$blue:    #336CAD;
+$orange:  #FF9700;
+$yellow:  #F4BD8C;
+
+$alt-red:     #F5A2B7;
+$alt-magenta: #E0A7DC;
+$alt-green:   #b7e388;
+$alt-brown:   #ad916f;
+$alt-violet:  #AD83E2;
+$alt-blue:    #6691C2;
+$alt-orange:  #c17200;
+$alt-yellow:  #ffdebb;
+
+.#{$kl-class} {
+  background: $background;
+  padding:    15px;
+
+  #{token('language', 'expression')} { color: $foreground; }
+
+  #{token('keyword')}    { color: $orange; }
+  #{token('operator')}   { color: $alt-orange; }
+  #{token('delimiter')}  { color: $alt-orange; }
+  #{token('string')}     { color: $alt-green; }
+  #{token('comment')}    { color: #555 }
+  #{token('number')}     { color: $red }
+  #{token('constant')}   { color: $alt-red }
+  #{token('call')}       { color: $yellow }
+
+  #{token('call.preprocessor')} { color: $brown }
+  #{token('preprocessor')}      { color: $alt-brown }
+
+  #{token('symbol')}     { color: $alt-yellow; }
+  #{token('variable')}   { color: $alt-violet;  }
+  #{token('annotation')} { color: $orange; }
+  #{token('parameter')}  { color: $alt-blue; }
+
+  #{token('annotation.arguments')} { color: $foreground; }
+  #{token('variable.splat')}       { color: $violet;  }
+  #{token('variable.property')}    { color: $violet; }
+  #{token('symbol.dotnet')}        { color: $alt-yellow; }
+
+  #{token('comment.docblock')} { color: #666 }
+
+  #{token('tag')} { color: $alt-orange; }
+  #{token('symbol.tag')} { font-weight: bold }
+  #{token('attribute')}  { color: $yellow; }
+
+  #{token('format.bold')}      { font-weight: bold }
+  #{token('format.italics')}   { font-style: italic }
+  #{token('format.strike')}    { text-decoration: line-through }
+  #{token('format.underline')} { text-decoration: underline }
+
+  #{token('format.monospace', 'format.block.code')} { color: #666 }
+
+  #{token('format.header')} { color: $alt-blue }
+  #{token('symbol.type')}   { color: $alt-red }
+
+  #{token('tag.namespace')} { color: $orange; font-weight: normal }
+  #{token('attribute.namespace')} { color: $alt-yellow; }
+}

docker/nginx/keylighter.localhost

@@ -6,23 +6,23 @@ server {
 
 	location / {
 		try_files $uri $uri/ /index.php?$args;
-
-		location ~ \.(js|css)$ {
-			expires 1y;
-		}
-
-		location ~ ^/index\.php(/|$) {
-            fastcgi_pass php:9000;
-            fastcgi_split_path_info ^(.+\.php)(/.*)$;
-
-            include fastcgi_params;
-            fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
-            fastcgi_param DOCUMENT_ROOT $realpath_root;
-
-			fastcgi_param APP_ENV "dev";
-			fastcgi_param DATABASE_URL "sqlite:///%kernel.project_dir%/var/app.db";
-
-            internal;
-		}
 	}
+
+	location /keylighter.css {
+		try_files $uri $uri/ /index.php?$args;
+	}
+
+    location ~ ^/index\.php(/|$) {
+        fastcgi_pass php:9000;
+        fastcgi_split_path_info ^(.+\.php)(/.*)$;
+
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
+        fastcgi_param DOCUMENT_ROOT $realpath_root;
+
+        fastcgi_param APP_ENV "dev";
+        fastcgi_param DATABASE_URL "sqlite:///%kernel.project_dir%/var/app.db";
+
+        internal;
+    }
 }

src/Controller/StylesAction.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Controller;
+
+use App\Service\KeyLighterVersioner;
+use Kadet\Highlighter\KeyLighter;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class StylesAction
+{
+    private $versioner;
+
+    public function __construct(KeyLighterVersioner $versioner)
+    {
+        $this->versioner = $versioner;
+    }
+
+    /**
+     * @Route("/keylighter.css", name="keylighter_stylesheet")
+     */
+    public function __invoke()
+    {
+        $path = $this->getCssFilePath();
+
+        return new Response(file_get_contents($path), Response::HTTP_OK, [
+            'Content-Type' => 'text/css',
+        ]);
+    }
+
+    private function getCssFilePath()
+    {
+        switch (true) {
+            case version_compare(KeyLighter::VERSION, '0.9.0', '>='):
+                $base = $this->versioner->getCurrentDir();
+                return sprintf("%s/%s", $base, 'Styles/Html/dist/keylighter.css');
+
+            default:
+                $base = $this->versioner->getDirectory('dev-master');
+                return sprintf("%s/%s", $base, 'Styles/Html/dist/keylighter.css');
+        }
+    }
+}

templates/keylighter.html.twig

@@ -9,6 +9,7 @@
         <title>KeyLighter</title>
 
         {{ encore_entry_link_tags('app') }}
+        <llink rel="stylesheet" href="{{ url('keylighter_stylesheet') }}" />
         <link rel="icon" href="{{ asset('img/favicon.png') }}"/>
     </head>
     <body>