Commit 428489f0 authored by Aral Balkan's avatar Aral Balkan

Fixes #3. (and any other additional arguments) are now correctly reflected in...

Fixes #3. (and any other additional arguments) are now correctly reflected in the CSS. This should also handle #1 (test this).
parent ff569abb
.DS_Store
screenflow/
\ No newline at end of file
screenflow/
node_modules
sandbox.css
sandbox.styl
npm-debug.log
\ No newline at end of file
/* line 373 : stdin */
/* line 1 : /Users/aral/Ind.ie/products/site/source/assets/stylus/indie-style-core/responsive-pixels/node_modules/stylus/lib/functions/index.styl */
/* line 16 : stdin */
/************************************************************
* *
* Mixins: Helpers *
* *
************************************************************/
/* line 22 : stdin */
/* Convert unit to REMs if unit is in pixels. */
/* line 34 : stdin */
/* Abstract shorthand for attributes that can have 1-4 arguments
(top, right, left, bottom) */
/* line 87 : stdin */
/* Abstract longhand for attributes that take a single value */
/* line 102 : stdin */
/************************************************************
* *
* Mixins: CSS overrides *
* *
************************************************************/
/* line 109 : stdin */
/* Line height */
/* line 114 : stdin */
/* Margin */
/* line 131 : stdin */
/* Padding */
/* line 148 : stdin */
/* Font size */
/* line 153 : stdin */
/* Background size */
/* line 157 : stdin */
/* Max width */
/* line 165 : stdin */
/* Border */
/* line 203 : stdin */
/* Width */
/* line 211 : stdin */
/* Relative and absolute positioning */
/* line 226 : stdin */
/************************************************************
* *
* Typography *
* *
************************************************************/
/* line 144 : stdin */
/* line 1 : /Users/aral/Ind.ie/products/site/source/assets/stylus/indie-style-core/responsive-pixels/node_modules/stylus/lib/functions/index.styl */
/* line 286 : /Users/aral/Ind.ie/products/site/source/assets/stylus/indie-style-core/responsive-pixels/node_modules/stylus/lib/functions/index.styl */
/* line 16 : /Users/aral/Ind.ie/products/site/source/assets/stylus/indie-style-core/responsive-pixels/index.styl */
/* line 5 : stdin */
body {
border: 1px solid #000;
border: 0.0625rem solid #000;
width: 1000px;
width: 62.5rem;
margin: 24px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 1.5rem;
padding: 48px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 3rem;
margin: 24px;
padding: 48px;
line-height: 24px;
line-height: 1.5rem;
font-size: 18px;
font-size: 1.125rem;
}
/* line 13 : stdin */
div {
width: 500px;
width: 31.25rem;
margin: 24px 0 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 24px 0;
margin: 1.5rem 0;
background-color: #eee;
}
/* line 18 : stdin */
h1 {
font-size: 48px;
font-size: 3rem;
line-height: 72px;
line-height: 4.5rem;
}
/* line 22 : stdin */
h2 {
font-size: 24px;
font-size: 1.5rem;
......@@ -40,146 +51,195 @@ h2 {
border-bottom: 1px solid #000;
border-bottom: 0.0625rem solid #000;
}
/* line 33 : stdin */
#test-margin-inherit-parent-element {
margin: 42px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 2.625rem;
margin: 42px;
border: 1px dashed;
border: 0.0625rem dashed;
}
/* line 37 : stdin */
#test-margin-inherit {
margin: inherit 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: inherit;
}
/* line 40 : stdin */
#test-margin-horizontal-centering {
margin: 0 auto 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0 auto;
}
/* line 43 : stdin */
#test-margin-one-argument {
margin: 10px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0.625rem;
margin: 10px;
}
/* line 46 : stdin */
#test-margin-two-arguments {
margin: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 10px 20px;
margin: 0.625rem 1.25rem;
}
/* line 49 : stdin */
#test-margin-two-arguments-with-zero {
margin: 10px 0 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 10px 0;
margin: 0.625rem 0;
}
/* line 52 : stdin */
#test-margin-three-arguments {
margin: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 10px 20px 30px;
margin: 0.625rem 1.25rem 1.875rem;
}
/* line 55 : stdin */
#test-margin-four-arguments {
margin: 10px 20px 1px 1px;
margin: 10px 20px 30px 40px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0.625rem 1.25rem 1.875rem 2.5rem;
}
/* line 58 : stdin */
#test-margin-four-hairlines {
margin: 1px 1px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
}
/* line 61 : stdin */
#test-margin-top {
margin-top: 10px;
margin-top: 0.625rem;
}
/* line 64 : stdin */
#test-margin-right {
margin-right: 20px;
margin-right: 1.25rem;
}
/* line 67 : stdin */
#test-margin-bottom {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
/* line 70 : stdin */
#test-margin-left {
margin-left: 40px;
margin-left: 2.5rem;
}
/* line 73 : stdin */
#test-margin-hairline {
margin-left: 1px;
margin-left: '1px';
}
/* line 78 : stdin */
#test-padding-one-argument {
padding: 10px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.625rem;
padding: 10px;
}
/* line 81 : stdin */
#test-padding-two-arguments {
padding: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 10px 20px;
padding: 0.625rem 1.25rem;
}
/* line 84 : stdin */
#test-padding-three-arguments {
padding: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 10px 20px 30px;
padding: 0.625rem 1.25rem 1.875rem;
}
/* line 87 : stdin */
#test-padding-four-arguments {
padding: 10px 20px 1px 1px;
padding: 10px 20px 30px 40px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.625rem 1.25rem 1.875rem 2.5rem;
}
/* line 90 : stdin */
#test-padding-top {
padding-top: 10px;
padding-top: 0.625rem;
}
/* line 93 : stdin */
#test-padding-right {
padding-right: 20px;
padding-right: 1.25rem;
}
/* line 96 : stdin */
#test-padding-bottom {
padding-bottom: 30px;
padding-bottom: 1.875rem;
}
/* line 99 : stdin */
#test-padding-left {
padding-left: 40px;
padding-left: 2.5rem;
}
/* line 105 : stdin */
#test-font-size-inherit {
font-size: inherit;
}
/* line 108 : stdin */
#test-font-size {
font-size: 42px;
font-size: 2.625rem;
line-height: 63px;
line-height: 3.9375rem;
}
/* line 114 : stdin */
#test-width-hundred-percent {
width: 50px;
width: 3.125rem;
width: 100%;
}
/* line 119 : stdin */
#test-height {
height: 50px;
height: 3.125rem;
}
/* line 123 : stdin */
#test-max-width {
max-width: 50px;
max-width: 3.125rem;
max-width: none;
}
/* line 128 : stdin */
#test-background-size {
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.5) 50%);
background-size: 500px 500px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
background-size: 500px 500px;
background-size: 31.25rem 31.25rem;
}
/* line 133 : stdin */
#test-background-size-cover {
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.5) 50%);
background-size: cover 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
background-size: cover;
}
/* line 137 : stdin */
#test-background-size-contain {
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.5) 50%);
background-size: contain 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
background-size: contain;
}
/* line 142 : stdin */
#test-bang-important {
width: 100px !important;
width: 6.25rem !important;
width: 500px;
width: 31.25rem;
}
......@@ -4,7 +4,7 @@
//
// ‘Because web design should not require a calculator.’
//
// Copyright © 2012-2014 Aral Balkan.
// Copyright © 2012-2015 Aral Balkan.
//
// Released with ♥ by Ind.ie under the MIT License.
//
......@@ -22,7 +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 == 0 || value == null
if value == 'inherit' || value == 'auto' || value == 'none' || value == 'cover' || value == 'contain' || value == 'smaller' || value == '!important' || value == 0 || value == null
value
else if value == 'hairline'
'1px'
......@@ -32,14 +32,25 @@ remify(value)
unit(value, unit(value))
/* Abstract shorthand for attributes that can have 1-4 arguments
(top, right, left, bottom) */
(top, right, left, bottom) */
abstract-shorthand(attr, originalArguments)
t = originalArguments[0]
r = originalArguments[1]
b = originalArguments[2]
l = originalArguments[3]
t = null
r = null
b = null
l = null
numOriginalArguments = length(originalArguments)
if length(originalArguments) >= 1
t = shift(originalArguments)
if length(originalArguments) >= 1
r = shift(originalArguments)
if length(originalArguments) >= 1
b = shift(originalArguments)
if length(originalArguments) >= 1
l = shift(originalArguments)
rT = remify(t)
rR = remify(r)
......@@ -50,46 +61,46 @@ abstract-shorthand(attr, originalArguments)
t = 1px
if r == 'hairline'
r = 1px
if b = 'hairline'
if b == 'hairline'
b = 1px
if l = 'hairline'
if l == 'hairline'
l = 1px
if l || l == 0
if numOriginalArguments == 4
{attr} t r b l
/* Make sure that the rule is written out only once in case there is no rem substitution */
if !(t == rT && r == rR && b == rB && l == rL)
{attr} rT rR rB rL
else if b || b == 0
else if numOriginalArguments == 3
{attr} t r b
if !(t == rT && r == rR && b == rB)
{attr} rT rR rB
else if r || r == 0
else if numOriginalArguments == 2
{attr} t r
if !(t == rT && r == rR)
{attr} rT rR
else if t || t == 0
else if numOriginalArguments == 1
{attr} t
if !(t = rT)
{attr} rT
/* Abstract longhand for attributes that take a single value */
abstract-longhand(attr, originalArguments)
value = originalArguments[0]
abstract-longhand(attr, args)
value = shift(args)
remifiedValue = remify(value)
if value == 'hairline'
{attr} 1px
{attr} 1px args
else
{attr} value
{attr} value args
if value != remifiedValue
{attr} remify(value)
{attr} remify(value) args
/************************************************************
* *
* *
* Mixins: CSS overrides *
* *
************************************************************/
......@@ -97,58 +108,58 @@ abstract-longhand(attr, originalArguments)
/* Line height */
line-height()
line-height(args...)
abstract-longhand('line-height', arguments)
/* Margin */
margin()
margin(args...)
abstract-shorthand('margin', arguments)
margin-top()
margin-top(args...)
abstract-longhand('margin-top', arguments)
margin-right()
margin-right(args...)
abstract-longhand('margin-right', arguments)
margin-bottom()
margin-bottom(args...)
abstract-longhand('margin-bottom', arguments)
margin-left()
margin-left(args...)
abstract-longhand('margin-left', arguments)
/* Padding */
padding()
padding(args...)
abstract-shorthand('padding', arguments)
padding-top()
padding-top(args...)
abstract-longhand('padding-top', arguments)
padding-right()
padding-right(args...)
abstract-longhand('padding-right', arguments)
padding-bottom()
padding-bottom(args...)
abstract-longhand('padding-bottom', arguments)
padding-left()
padding-left(args...)
abstract-longhand('padding-left', arguments)
/* Font size */
font-size()
font-size(args...)
abstract-longhand('font-size', arguments)
/* Background size */
background-size()
background-size(args...)
abstract-shorthand('background-size', arguments)
/* Max width */
max-width()
max-width(args...)
abstract-longhand('max-width', arguments)
max-height()
max-height(args...)
abstract-longhand('max-height', arguments)
/* Border */
......@@ -158,7 +169,7 @@ abstract-border(borderType, borderArgs, originalArguments)
style = borderArgs[1];
color = borderArgs[2];
// Only 'none'
// Only 'none'
if typeof(value) is 'unit'
if unit(value) == 'px'
{borderType} unit(value, 'px') style color
......@@ -191,31 +202,29 @@ border-radius()
/* Width */
width()
width(args...)
abstract-longhand('width', arguments)
height()
height(args...)
abstract-longhand('height', arguments)
/* Relative and absolute positioning */
top()
top(args...)
abstract-longhand('top', arguments)
bottom()
bottom(args...)
abstract-longhand('bottom', arguments)
left()
left(args...)
abstract-longhand('left', arguments)
right()
right(args...)
abstract-longhand('right', arguments)
/************************************************************
* *
* *
* Typography *
* *
************************************************************/
......
{
"name": "responsive-pixels",
"version": "1.0.0",
"description": "Responsive Pixels Stylus library.",
"main": "",
"scripts": {
},
"repository": {
"type": "git",
"url": "git@source.ind.ie:project/responsive-pixels.git"
},
"keywords": [
"stylus",
"responsive",
"pixels"
],
"author": "Aral Balkan",
"license": "MIT",
"dependencies": {
"stylus": "^0.52.4"
}
}
echo "Compiling Responsive Pixels and tests stylus."
./node_modules/stylus/bin/stylus -l < index.styl > css/index.css
./node_modules/stylus/bin/stylus -l < tests.styl > css/tests.css
echo "Launching in-browser rendering tests."
open tests.html
\ No newline at end of file
......@@ -93,6 +93,10 @@
<div id='test-background-size-cover' data-assert='background-size: cover'>background-size cover</div>
<div id='test-background-size-contain' data-assert='background-size: contain'>background-size contain</div>
</section>
<section>
<h2>!imporant</h2>
<div id='test-bang-important' data-assert='width:100px'>width 100px !important</div>
</section>
<script src='dom-style-test-runner.js'></script>
......
......@@ -136,4 +136,10 @@ h2
#test-background-size-contain
background-image linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%)
background-size contain
\ No newline at end of file
background-size contain
// !important
#test-bang-important
width 100px !important
width 500px
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment