Added workaround for possible Stylus bug with repeated variables (you must...

Added workaround for possible Stylus bug with repeated variables (you must specify the unit explicitly. Added test to make this visible.

Added workaround for possible Stylus bug with repeated variables (you must...
Added workaround for possible Stylus bug with repeated variables (you must specify the unit explicitly. Added test to make this visible.
09685f7f · Aral Balkan · 2024f650 · 09685f7f · 09685f7f · 09685f7f
Commit 09685f7f authored Oct 16, 2015 by Aral Balkan
Hide whitespace changes
Inline Side-by-side

Showing with 28 additions and 3 deletions

css/tests.css css/tests.css +9 -2

index.styl index.styl +6 -1

tests.html tests.html +5 -0

tests.styl tests.styl +8 -0

No files found.
--- a/css/tests.css
+++ b/css/tests.css

-/* line 150 : stdin */
+/* line 157 : stdin */

 /* line 1 : /Users/aral/Ind.ie/products/site/source/assets/stylus/indie-style-core/responsive-pixels/node_modules/stylus/lib/functions/index.styl */

@@ -241,7 +241,7 @@ h2 {
  background-size: 100%;
 }

-/* line 148 : stdin */
+/* line 147 : stdin */
 #test-bang-important {
  width: 100px !important;
  width: 6.25rem !important;
@@ -249,3 +249,10 @@ h2 {
  width: 31.25rem;
 }

+/* line 156 : stdin */
+#test-padding-at-half-line-height {
+  padding: 12px 0 12px 12px;
+/* Make sure that the rule is written out only once in case there is no rem substitution */
+  padding: 0.75rem 0 0.75rem 0.75rem;
+}
+
--- a/index.styl
+++ b/index.styl
@@ -22,6 +22,7 @@
 /* Convert unit to REMs if unit is in pixels. */

 remify(value)
+
 	if value == 'inherit' || value == 'auto' || value == 'none' || value == 'cover' || value == 'contain' || value == 'smaller' || value == '!important' || value == 0 || value == null
 		value
 	else if value == 'hairline'
@@ -243,11 +244,15 @@ hyphens(value)
 // Helpers (using line height as your unit of scale for vertical/horizontal rhythm.)
 //

+dividePixels(a,b)
+	r = (a / b)
+	return unit(r, 'px')
+
 // This is the default root line height
 baseLineHeight = 24

 QuarterLineHeight = baseLineHeight/4 px
-HalfLineHeight = baseLineHeight/2 px
+HalfLineHeight = dividePixels(baseLineHeight, 2)
 ThreeQuartersLineHeight = baseLineHeight*3/4 px
 OneLineHeight = baseLineHeight px
 OneAndAHalfLineHeights = baseLineHeight*1.5 px

--- a/tests.html
+++ b/tests.html
 <!doctype html>
 <html lang='en'>
 <head>
+	<meta charset='utf-8'>
 	<title>Responsive Pixels Test Suite</title>
 	<link rel='stylesheet' href='css/reset.css'>
 	<link rel='stylesheet' href='css/tests.css'>
@@ -98,6 +99,10 @@
 		<h2>!imporant</h2>
 		<div id='test-bang-important' data-assert='width:100px'>width 100px !important</div>
 	</section>
+	<section>
+		<h2>Vertical rhythm helpers</h2>
+		<div id='test-padding-at-half-line-height' data-assert='padding: 12px 0px 12px 12px'>padding unit(HalfLineHeight, 'px') 0 …</div>
+	</section>
 	<script src='dom-style-test-runner.js'></script>



--- a/tests.styl
+++ b/tests.styl
@@ -147,3 +147,11 @@ h2
 #test-bang-important
 	width 100px !important
 	width 500px
+
+// Note: This might be a bug in Stylus — if a variable is repeated, as it is here,
+// ===== It works only for x x x 0. Any other orientations only result in the last
+//       variable being used *unless* you explicitly wrap the variable in a unit()
+//       call as shown here.
+// TODO: File this as a bug with the Stylus folks.
+#test-padding-at-half-line-height
+	padding unit(HalfLineHeight, 'px') 0 unit(HalfLineHeight, 'px') unit(HalfLineHeight, 'px')