Declare font-size mixin for less and add tests (#129)

tsilvap · MartijnCuppens · commit 62fef1741002 · 2019-04-02T21:17:29.000+02:00
diff --git a/less.less b/less.less
@@ -230,7 +230,11 @@
   }
 }
 
-// The responsive-font-size mixin uses RFS to rescale font sizes
+// The font-size & responsive-font-size mixins use RFS to rescale font sizes
+.font-size(@fs, @important: false) {
+  .rfs(@fs, @important);
+}
+
 .responsive-font-size(@fs, @important: false) {
   .rfs(@fs, @important);
 }
diff --git a/test/expected/test-1.css b/test/expected/test-1.css
@@ -42,3 +42,9 @@
   @media (max-width: 1200px) {
     .selector-8 {
       font-size: calc(1.325rem + 0.9vw) ; } }
+
+.selector-9 {
+  font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-9 {
+      font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/test/expected/test-10.css b/test/expected/test-10.css
@@ -48,3 +48,10 @@
     .selector-8 {
       font-size: calc(16px + 2vmin) ;
       min-width: 0vw; } }
+
+.selector-9 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-9 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
diff --git a/test/expected/test-2.css b/test/expected/test-2.css
@@ -24,3 +24,6 @@
 
 .selector-8 {
   font-size: 2rem; }
+
+.selector-9 {
+  font-size: 2rem; }
diff --git a/test/expected/test-3.css b/test/expected/test-3.css
@@ -53,3 +53,11 @@
 @media (max-width: 1200px) {
   .selector-8 {
     font-size: calc(1.325rem + 0.9vw) ; } }
+
+.selector-9,
+.disable-responsive-font-size .selector-9, .selector-9.disable-responsive-font-size {
+  font-size: 2rem; }
+
+@media (max-width: 1200px) {
+  .selector-9 {
+    font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/test/expected/test-4.css b/test/expected/test-4.css
@@ -42,3 +42,9 @@
   @media (max-width: 1200px) {
     .enable-responsive-font-size .selector-8, .selector-8.enable-responsive-font-size {
       font-size: calc(1.325rem + 0.9vw) ; } }
+
+.selector-9 {
+  font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .enable-responsive-font-size .selector-9, .selector-9.enable-responsive-font-size {
+      font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/test/expected/test-5.css b/test/expected/test-5.css
@@ -42,3 +42,9 @@
   @media (max-width: 75em) {
     .selector-8 {
       font-size: calc(1.325rem + 0.9vw) ; } }
+
+.selector-9 {
+  font-size: 2rem; }
+  @media (max-width: 75em) {
+    .selector-9 {
+      font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/test/expected/test-6.css b/test/expected/test-6.css
@@ -42,3 +42,9 @@
   @media (max-width: 1200px) {
     .selector-8 {
       font-size: calc(1.15625rem + 1.125vw) ; } }
+
+.selector-9 {
+  font-size: 2rem; }
+  @media (max-width: 1200px) {
+    .selector-9 {
+      font-size: calc(1.15625rem + 1.125vw) ; } }
diff --git a/test/expected/test-7.css b/test/expected/test-7.css
@@ -42,3 +42,9 @@
   @media (max-width: 1200px) {
     .selector-8 {
       font-size: calc(21.2px + 0.9vw) ; } }
+
+.selector-9 {
+  font-size: 32px; }
+  @media (max-width: 1200px) {
+    .selector-9 {
+      font-size: calc(21.2px + 0.9vw) ; } }
diff --git a/test/expected/test-8.css b/test/expected/test-8.css
@@ -42,3 +42,9 @@
   @media (max-width: 1200px), (max-height: 1200px) {
     .selector-8 {
       font-size: calc(1.325rem + 0.9vmin) ; } }
+
+.selector-9 {
+  font-size: 2rem; }
+  @media (max-width: 1200px), (max-height: 1200px) {
+    .selector-9 {
+      font-size: calc(1.325rem + 0.9vmin) ; } }
diff --git a/test/expected/test-9.css b/test/expected/test-9.css
@@ -48,3 +48,10 @@
     .selector-8 {
       font-size: calc(16px + 2vmin) ;
       min-width: 0vw; } }
+
+.selector-9 {
+  font-size: 32px; }
+  @media (max-width: 50rem), (max-height: 50rem) {
+    .selector-9 {
+      font-size: calc(16px + 2vmin) ;
+      min-width: 0vw; } }
diff --git a/test/less/main.less b/test/less/main.less
@@ -43,3 +43,8 @@
 .selector-8 {
   .responsive-font-size(32);
 }
+
+// font-size shorthand
+.selector-9 {
+  .font-size(2rem);
+}
diff --git a/test/postcss/main.css b/test/postcss/main.css
@@ -33,3 +33,7 @@
 .selector-8 {
   responsive-font-size: 32;
 }
+
+.selector-9 {
+  responsive-font-size: 2rem;
+}
diff --git a/test/sass/main.scss b/test/sass/main.scss
@@ -43,3 +43,8 @@
 .selector-8 {
   @include responsive-font-size(32);
 }
+
+// font-size shorthand
+.selector-9 {
+  @include font-size(2rem);
+}
diff --git a/test/stylus/main.styl b/test/stylus/main.styl
@@ -26,3 +26,6 @@
 
 .selector-8
   responsive-font-size(32)
+
+.selector-9
+  responsive-font-size(2rem)

Original file line number	Diff line number	Diff line change
`@@ -230,7 +230,11 @@`
`230`	`230`	`}`
`231`	`231`	`}`
`232`	`232`
`233`		`-// The responsive-font-size mixin uses RFS to rescale font sizes`
	`233`	`+// The font-size & responsive-font-size mixins use RFS to rescale font sizes`
	`234`	`+.font-size(@fs, @important: false) {`
	`235`	`+ .rfs(@fs, @important);`
	`236`	`+}`
	`237`	`+`
`234`	`238`	`.responsive-font-size(@fs, @important: false) {`
`235`	`239`	`.rfs(@fs, @important);`
`236`	`240`	`}`