Implement support for CSS at rules

spec/compilers/css_font_face

@@ -0,0 +1,41 @@
+component Main {
+  style test {
+    @font-face {
+      src: url(sansation_light.woff);
+      font-family: myFirstFont;
+    }
+
+    @font-face {
+      src: url(sansation_light2.woff);
+      font-family: myFirstFont;
+      font-weight: bold;
+    }
+  }
+
+  fun render : Html {
+    <div::test/>
+  }
+}
+--------------------------------------------------------------------------------
+class A extends _C {
+  render() {
+    return _h("div", {
+      className: `a`
+    });
+  }
+};
+
+A.displayName = "Main";
+
+_insertStyles(`
+@font-face {
+  src: url(sansation_light.woff);
+  font-family: myFirstFont;
+}
+
+@font-face {
+  src: url(sansation_light2.woff);
+  font-family: myFirstFont;
+  font-weight: bold;
+}
+`);

spec/compilers/css_keyframes

@@ -0,0 +1,81 @@
+component Main {
+  property opacity : Number = 1
+
+  style test {
+    @keyframes animation {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: #{opacity};
+      }
+    }
+
+    @keyframes animation {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+  }
+
+  fun render : Html {
+    <div::test/>
+  }
+}
+--------------------------------------------------------------------------------
+class A extends _C {
+  constructor(props) {
+    super(props);
+
+    this._d({
+      a: [
+        null,
+        1
+      ]
+    });
+  }
+
+  $a() {
+    const _ = {
+      [`--a-a`]: this.a
+    };
+
+    return _;
+  }
+
+  render() {
+    return _h("div", {
+      className: `a`,
+      style: _style([this.$a()])
+    });
+  }
+};
+
+A.displayName = "Main";
+
+_insertStyles(`
+@keyframes animation {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: var(--a-a);
+  }
+}
+
+@keyframes animation {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+`);

spec/compilers/css_supports

@@ -0,0 +1,51 @@
+component Main {
+  property color : String = "blue"
+
+  style test {
+    @supports (screen) {
+      color: #{color};
+    }
+  }
+
+  fun render : Html {
+    <div::test/>
+  }
+}
+--------------------------------------------------------------------------------
+class A extends _C {
+  constructor(props) {
+    super(props);
+
+    this._d({
+      a: [
+        null,
+        `blue`
+      ]
+    });
+  }
+
+  $a() {
+    const _ = {
+      [`--a-a`]: this.a
+    };
+
+    return _;
+  }
+
+  render() {
+    return _h("div", {
+      className: `a`,
+      style: _style([this.$a()])
+    });
+  }
+};
+
+A.displayName = "Main";
+
+_insertStyles(`
+@supports (screen) {
+  .a {
+    color: var(--a-a);
+  }
+}
+`);

spec/parsers/css_keyframes.cr

@@ -0,0 +1,12 @@
+require "../spec_helper"
+
+describe "Css Keyframes" do
+  subject css_keyframes
+
+  expect_error "@keyframes", Mint::Parser::CssKeyframesExpectedName
+  expect_error "@kayframes test ", Mint::Parser::CssKeyframesExpectedOpeningBracket
+  expect_error "@keyframes test {", Mint::Parser::CssKeyframesExpectedClosingBracket
+
+  expect_ok "@keyframes test { }"
+  expect_ok "@keyframes test { 0% { a: b; } }"
+end

spec/type_checking/css_font_face

@@ -0,0 +1,31 @@
+component Main {
+  style test {
+    @font-face {
+      src: url(sansation_light.woff);
+      font-family: myFirstFont;
+    }
+
+    @font-face {
+      src: url(sansation_light2.woff);
+      font-family: myFirstFont;
+      font-weight: bold;
+    }
+  }
+
+  fun render : Html {
+    <div::test/>
+  }
+}
+--------------------------------------------------------CssFontFaceInterpolation
+component Main {
+  style test {
+    @font-face {
+      src: url(sansation_light.woff);
+      font-family: #{"myFirstFont"};
+    }
+  }
+
+  fun render : Html {
+    <div::test/>
+  }
+}

src/all.cr

@@ -6,6 +6,7 @@ require "file_utils"
 require "colorize"
 require "markd"
 require "kemal"
+require "uuid"
 require "html"
 require "json"
 

src/ast/css_font_face.cr

@@ -0,0 +1,13 @@
+module Mint
+  class Ast
+    class CssFontFace < Node
+      getter definitions
+
+      def initialize(@definitions : Array(Node),
+                     @input : Data,
+                     @from : Int32,
+                     @to : Int32)
+      end
+    end
+  end
+end

src/ast/css_keyframes.cr

@@ -0,0 +1,14 @@
+module Mint
+  class Ast
+    class CssKeyframes < Node
+      getter selectors, name
+
+      def initialize(@selectors : Array(Node),
+                     @name : String,
+                     @input : Data,
+                     @from : Int32,
+                     @to : Int32)
+      end
+    end
+  end
+end

src/ast/css_media.cr → src/ast/css_nested_at.cr

@@ -1,10 +1,11 @@
 module Mint
   class Ast
-    class CssMedia < Node
-      getter content, body
+    class CssNestedAt < Node
+      getter content, body, name
 
       def initialize(@body : Array(Node),
                      @content : String,
+                     @name : String,
                      @input : Data,
                      @from : Int32,
                      @to : Int32)

src/formatters/css_nested_at.cr

@@ -0,0 +1,10 @@
+module Mint
+  class Formatter
+    def format(node : Ast::CssNestedAt) : String
+      body =
+        list node.body
+
+      "@#{node.name} #{node.content.strip} {\n#{indent(body)}\n}"
+    end
+  end
+end

src/messages/css_font_face_expected_closing_bracket.cr

@@ -0,0 +1,7 @@
+message CssFontFaceExpectedClosingBracket do
+  title "Syntax Error"
+
+  closing_bracket "font-face", got
+
+  snippet node
+end

src/messages/css_font_face_expected_opening_bracket.cr

@@ -0,0 +1,7 @@
+message CssFontFaceExpectedOpeningBracket do
+  title "Syntax Error"
+
+  opening_bracket "font-face", got
+
+  snippet node
+end

src/messages/css_font_face_interpolation.cr

@@ -0,0 +1,9 @@
+message CssFontFaceInterpolation do
+  title "Type Error"
+
+  block do
+    text "Interpolations are not allowed inside a font-face rule."
+  end
+
+  snippet node
+end

src/messages/css_keyframes_expected_closing_bracket.cr

@@ -0,0 +1,7 @@
+message CssKeyframesExpectedClosingBracket do
+  title "Syntax Error"
+
+  closing_bracket "keyframes", got
+
+  snippet node
+end

src/messages/css_keyframes_expected_name.cr

@@ -0,0 +1,11 @@
+message CssKeyframesExpectedName do
+  title "Syntax Error"
+
+  block do
+    text "An name of a keyframes must be defined."
+  end
+
+  was_looking_for "name", got
+
+  snippet node
+end

src/messages/css_keyframes_expected_opening_bracket.cr

@@ -0,0 +1,7 @@
+message CssKeyframesExpectedOpeningBracket do
+  title "Syntax Error"
+
+  opening_bracket "keyframes", got
+
+  snippet node
+end

src/messages/css_nested_at_expected_closing_bracket.cr

@@ -0,0 +1,7 @@
+message CssNestedAtExpectedClosingBracket do
+  title "Syntax Error"
+
+  closing_bracket "at rule", got
+
+  snippet node
+end

src/messages/css_nested_at_expected_condition.cr

@@ -0,0 +1,11 @@
+message CssNestedAtExpectedCondition do
+  title "Syntax Error"
+
+  block do
+    text "An at rule must define at least one condition."
+  end
+
+  was_looking_for "condition", got
+
+  snippet node
+end