@less/test-data 4.2.0 → 4.3.0

package/css/_main/container.css

@@ -23,7 +23,7 @@
     border: 1px solid grey;
   }
 }
-@container size (min-width: 60ch) {
+@container size(min-width: 60ch) {
   .article--post header {
     grid-template-areas: "avatar name" "avatar headline";
     align-items: start;
@@ -118,7 +118,7 @@
     margin: 0.5em 0 0 0;
   }
 }
-@container card (inline-size > 30em) and style (--responsive: true) {
+@container card (inline-size > 30em) and style(--responsive: true) {
   .card-content {
     grid-template-columns: 1fr 2fr;
     grid-template-rows: auto 1fr;
@@ -146,3 +146,98 @@
     margin: 0.5em 0 0 0;
   }
 }
+.wrapper {
+  container-name: wrapper;
+  container-type: size;
+}
+@container wrapper (height < 100) {
+  a {
+    max-height: 100;
+  }
+}
+@container wrapper (height < 200) {
+  a {
+    max-height: 200;
+  }
+}
+@container wrapper (height < 300) {
+  a {
+    max-height: 300;
+  }
+}
+@media only screen and (min-width: 768px) {
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+    @media (hover: hover) {
+      font-size: 1.75rem;
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .media-1 {
+    font-size: 1.5rem;
+  }
+  @container (min-width: 500px) {
+    .primary-content {
+      font-size: 1rem;
+    }
+    @media (hover: hover) {
+      font-size: 1.75rem;
+      @media not all and (hover: hover) {
+        color: limegreen;
+      }
+      .media-3 {
+        padding: 0.5rem;
+      }
+    }
+  }
+  .media-2 {
+    font-size: 2rem;
+  }
+}
+@container (min-width: 768px) {
+  @media only screen and (min-width: 768px) {
+    color: aliceblue;
+  }
+  .container-1 {
+    color: purple;
+  }
+}

package/css/_main/functions.css

@@ -110,9 +110,13 @@
   min: 1pt;
   min: 3mm;
   min: min(1, 4ex, 2pt);
+  min: min(calc(1 + 1), 1);
+  min: min(var(--width), 802px);
   max: 3;
   max: 5em;
   max: max(5m, 3em);
+  max: min(var(--body-max-width), calc(100vw - 20px));
+  max: max(1, calc(1 + 1));
   max-native: max(10vw, 100px);
   percentage: 20%;
   color-quoted-digit: #dda0dd;

package/css/_main/permissive-parse.css

@@ -31,6 +31,11 @@ foo[attr="blah"] {
     this: works;
   }
 }
+@media (min-width: 640px) {
+  .with-curly {
+    this: works;
+  }
+}
 .test-rule-comment {
   --value: a /* { ; } */;
   --comment-within: ( /* okay?; comment; */ );

package/css/_main/selectors.css

@@ -183,3 +183,9 @@ blank blank blank blank blank blank blank blank blank blank blank blank blank bl
 .first-level .second-level.active2 {
   content: '\2661';
 }
+a:is(.b, :is(.c)) {
+  color: blue;
+}
+a:is(.b, :is(.c), :has(div)) {
+  color: red;
+}

package/css/_main/starting-style.css

@@ -0,0 +1,55 @@
+#nav {
+  transition: background-color 3.5s;
+  background-color: gray;
+}
+[popover]:popover-open {
+  opacity: 1;
+  transform: scaleX(1);
+  @starting-style {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+}
+#target {
+  transition: background-color 1.5s;
+  background-color: green;
+}
+@starting-style {
+  #target {
+    background-color: transparent;
+  }
+}
+#source {
+  transition: background-color 2.5s;
+  background-color: red;
+}
+source:first {
+  opacity: 1;
+  transform: scaleX(1);
+  @starting-style {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+}
+#footer {
+  color: yellow;
+}
+@starting-style {
+  #footer {
+    background-color: transparent;
+  }
+}
+nav > [popover]:popover-open {
+  opacity: 1;
+  transform: scaleX(1);
+  @starting-style {
+    padding: 10px 8px 6px 4px;
+  }
+}
+aside > [popover]:popover-open {
+  opacity: 1;
+  transform: scaleX(1);
+  @starting-style {
+    padding: 10px 20px 30px 40px;
+  }
+}

package/css/_main/variables.css

@@ -69,3 +69,29 @@
   mul-px-2: 140px;
   mul-px-3: 140px;
 }
+*,
+::before,
+::after {
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+}
+.radio_checked {
+  border-color: #fff;
+}
+div#apple {
+  color: blue;
+}
+div#banana {
+  color: blue;
+}
+div#cherry {
+  color: blue;
+}
+div#carrot {
+  color: blue;
+}
+div#potato {
+  color: blue;
+}

package/errors/parse/parse-error-media-no-block-1.txt

@@ -1,3 +1,3 @@
-SyntaxError: media definitions require block statements after any features in {path}parse-error-media-no-block-1.less on line 1, column 24:
-1 @media (extra: bracket)) {
-2   body {
+SyntaxError: media definitions require block statements after any features in {path}parse-error-media-no-block-1.less on line 1, column 24:
+1 @media (extra: bracket)) {
+2   body {

package/errors/parse/parse-error-media-no-block-2.txt

@@ -1,2 +1,2 @@
-SyntaxError: media definitions require block statements after any features in {path}parse-error-media-no-block-2.less on line 1, column 7:
-1 @media
+SyntaxError: media definitions require block statements after any features in {path}parse-error-media-no-block-2.less on line 1, column 7:
+1 @media

package/errors/parse/parse-error-media-no-block-3.txt

@@ -1,3 +1,3 @@
-SyntaxError: media definitions require block statements after any features in {path}parse-error-media-no-block-3.less on line 4, column 4:
-3     font-size: 5000px;
-4   }
+SyntaxError: media definitions require block statements after any features in {path}parse-error-media-no-block-3.less on line 4, column 4:
+3     font-size: 5000px;
+4   }

package/less/_main/container.less

@@ -178,3 +178,114 @@
         }
     } 
 }
+
+.wrapper {
+    container-name: wrapper;
+    container-type: size;
+}
+  
+.my_mixin(@height) {
+    @container wrapper (height < @height) {
+        a {
+            max-height: @height;
+        }
+    }
+}
+  
+.my_mixin(100);
+.my_mixin(200);
+.my_mixin(300);
+
+@media only screen and (min-width: 768px) {
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+    
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+    }
+
+    .media-2 {
+        font-size: 2rem;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+    
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+
+        @media (hover: hover) {
+            font-size: 1.75rem;
+        }
+    }
+
+    .media-2 {
+        font-size: 2rem;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .media-1 {
+        font-size: 1.5rem;
+    }
+    
+    @container (min-width: 500px) {
+        .primary-content {
+            font-size: 1rem;
+        }
+
+        @media (hover: hover) {
+            font-size: 1.75rem;
+
+            @media not all and (hover: hover) {
+                color: limegreen;
+            }
+
+            .media-3 {
+                padding: 0.5rem;
+            }
+        }
+    }
+
+    .media-2 {
+        font-size: 2rem;
+    }
+}
+
+@container (min-width: 768px) {
+    @media only screen and (min-width: 768px) {
+        color: aliceblue;
+    }
+
+    .container-1 {
+        color: purple;
+    }
+}

package/less/_main/extend.less

@@ -59,7 +59,7 @@ div.ext5,
   }
 }
 
-.fuu:extend(.ext8.ext9 all) {}
+.fuu:extend( .ext8.ext9 all) {}
 .buu:extend(.ext8 .ext9 all) {}
 .zap:extend(.ext8 + .ext9 all) {}
 .zoo:extend(.ext8 > .ext9 all) {}

package/less/_main/functions.less

@@ -117,9 +117,13 @@
   min: min(1pt, 3pt);
   min: min(1cm, 3mm);
   min: min(6em, 5, 4ex, 3, 2pt, 1);
+  min: min(calc(1 + 1), 1);
+  min: min(~'var(--width), 802px');
   max: max(1, 3);
   max: max(3em, 1em, 2em, 5em);
   max: max(1px, 2, 3em, 4, 5m, 6);
+  max: min(var(--body-max-width), calc(100vw - 20px));
+  max: max(1, calc(1 + 1));
   max-native: max(10vw, 100px);
   percentage: percentage((10px / 50));
   color-quoted-digit: color("#dda0dd");

package/less/_main/mixins.less

@@ -22,7 +22,7 @@
 #container {
   color: black;
   .mixin();
-  .mixout();
+  .mixout ();
   #theme > .mixin();
 }
 

package/less/_main/permissive-parse.less

@@ -43,6 +43,12 @@
     this: works;
   }
 }
+@tablet: (min-width: @{size});
+@media @tablet {
+  .with-curly {
+    this: works;
+  }
+}
 // @todo - fix comment absorption after property
 .test-rule-comment {
   --value: a/* { ; } */;

package/less/_main/selectors.less

@@ -200,3 +200,11 @@ blank blank blank blank blank blank blank blank blank blank blank blank blank bl
     &.active2:extend(.extend-this) { }
   }
 }
+
+a:is(.b, :is(.c)) {
+  color: blue;
+}
+
+a:is(.b, :is(.c), :has(div)) {
+  color: red;
+}

package/less/_main/starting-style.less

@@ -0,0 +1,74 @@
+#nav {
+    transition: background-color 3.5s;
+    background-color: gray;
+}
+
+[popover]:popover-open {
+    opacity: 1;
+    transform: scaleX(1);
+
+    @starting-style {
+        opacity: 0;
+        transform: scaleX(0);
+    }
+}
+
+#target {
+    transition: background-color 1.5s;
+    background-color: green;
+}
+
+@starting-style {
+    #target {
+        background-color: transparent;
+    }
+}
+
+#source {
+    transition: background-color 2.5s;
+    background-color: red;
+}
+
+source:first {
+    opacity: 1;
+    transform: scaleX(1);
+
+    @starting-style {
+        opacity: 0;
+        transform: scaleX(0);
+    }
+}
+
+#footer {
+    color: yellow;
+}
+
+@starting-style {
+    #footer {
+        background-color: transparent;
+    }
+}
+
+nav > [popover]:popover-open {
+  opacity: 1;
+  transform: scaleX(1);
+
+  @starting-style {
+    padding+_: 10px;
+    padding+_: 8px;
+    padding+_: 6px;
+    padding+_: 4px;
+  }
+}
+
+aside > [popover]:popover-open {
+  opacity: 1;
+  transform: scaleX(1);
+
+  @starting-style {
+    // vector math
+    each(1 2 3 4, {
+        padding+_: (@value * 10px);
+    });
+  }
+}

package/less/_main/variables.less

@@ -125,3 +125,37 @@
     mul-px-3: ((@px * 1) * @cm);
   }
 }
+
+*, ::before, ::after {
+	--tw-pan-x:  ;
+	--tw-pan-y:  ;
+	--tw-pinch-zoom:  ;
+	--tw-scroll-snap-strictness: proximity;
+}
+
+@a1: 1px;
+@b2: 2px;
+@c3: @a1 + @b2;
+
+@radio-cls: radio;
+@radio-cls-checked: @{radio-cls}_checked;
+
+.@{radio-cls-checked} {
+  border-color: #fff;
+}
+
+@items:
+// Fruit
+    apple,
+    banana,
+    cherry,
+// Vegetables
+    carrot,
+    potato,
+;
+
+each(@items, {
+  div#@{value} {
+    color: blue;
+  }
+})

package/package.json

@@ -3,15 +3,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Less files and CSS results",
-  "author": {
-    "name": "Alexis Sellier",
-    "email": "self@cloudhead.net"
-  },
+  "author": "Alexis Sellier <self@cloudhead.net>",
   "contributors": [
     "The Core Less Team"
   ],
   "license": "Apache-2.0",
   "gitHead": "1df9072ee9ebdadc791bf35dfb1dbc3ef9f1948f"
-}
+}