Permalink
Browse files

figure out how to insert styles into the document

  • Loading branch information...
ndp committed Sep 11, 2010
1 parent e1387e2 commit 67b54b4c08b292963faafcab09522ed7ffe54d39
Showing with 120 additions and 65 deletions.
  1. +2 −7 README.markdown
  2. +98 −54 spec/csster_spec.js
  3. +1 −1 spec_runner.html
  4. +19 −3 src/csster.js
View
@@ -7,7 +7,7 @@ Small libary to generate CSS style rules within Javascript.
<pre>
require('csster.js'); // however you manage dependencies
Csster({
Csster.style({
h1: {
fontSize: 18,
color: 'red'
@@ -17,13 +17,9 @@ Csster({
...
</pre>
### Creating CSS Rules
(to be written)
### Format of CSS Rules
CSS rules are passed either as arrays or hashes, arrays just being
The *style* method accepts CSS rules passed either as arrays or hashes, arrays just being
a way to order the hashes. For example:
<pre>
@@ -89,7 +85,6 @@ To "mix these in", use the "macro" key:
## Todo
* Figure out output/page integration strategy
* Support more than one Macro
* Some color math
* Better name
View
@@ -15,7 +15,7 @@ describe('Array#flatten', function() {
describe("Csster", function() {
describe('property name', function() {
describe('#propertyNameOf', function() {
it('should convert fontFamily to font-family', function() {
expect(Csster.propertyNameOf('fontFamily')).toEqual("font-family");
});
@@ -38,72 +38,116 @@ describe("Csster", function() {
});
});
describe('property', function() {
describe('#formatProperty', function() {
it('should render font family', function() {
expect(Csster.formatProperty('fontFamily', 'serif')).toEqual("font-family: serif;\r");
});
it('should render raw number as "px" value', function() {
expect(Csster.formatProperty('height', 12)).toEqual("height: 12px;\r");
});
});
it("should output style rule from element name", function() {
expect(rules({
p:{
fontFamily: 'serif'
}
})).toEqual("p {\rfont-family: serif;\r}\r");
});
it("should output style rule from element.class name", function() {
expect(rules({
'div.cls':{
height: '235px'
}
})).toEqual("div.cls {\rheight: 235px;\r}\r");
});
it("should output multiple properties", function() {
expect(rules({
'div.cls':{
height: '235px',
width: '300px'
}
})).toEqual("div.cls {\rheight: 235px;\rwidth: 300px;\r}\r");
});
it("should output properties and sub-selectors", function() {
expect(rules({
ul:{
width: '300px',
li: {
padding: '20px',
marginLeft: '-20px'
describe('#formatRules', function() {
it("should output style rule from element name", function() {
expect(Csster.formatRules({
p:{
fontFamily: 'serif'
}
}
})
).
toEqual("ul {\rwidth: 300px;\r}\rul li {\rpadding: 20px;\rmargin-left: -20px;\r}\r");
});
})).toEqual("p {\rfont-family: serif;\r}\r");
});
it("should output style rule from element.class name", function() {
expect(Csster.formatRules({
'div.cls':{
height: '235px'
}
})).toEqual("div.cls {\rheight: 235px;\r}\r");
});
it("should output multiple properties", function() {
expect(Csster.formatRules({
'div.cls':{
height: '235px',
width: '300px'
}
})).toEqual("div.cls {\rheight: 235px;\rwidth: 300px;\r}\r");
});
it("should output properties and sub-selectors", function() {
expect(Csster.formatRules({
ul:{
width: '300px',
li: {
padding: '20px',
marginLeft: '-20px'
}
}
})
).
toEqual("ul {\rwidth: 300px;\r}\rul li {\rpadding: 20px;\rmargin-left: -20px;\r}\r");
});
it("should output px when passed an integer", function() {
expect(Csster.formatRules({
'div.cls':{
height: 235
}
})).toEqual("div.cls {\rheight: 235px;\r}\r");
});
it("should output px when passed an integer", function() {
expect(rules({
'div.cls':{
height: 235
it("should expand a macro property", function() {
function roundedCorners(radius) {
return {
'-webkit-border-radius': radius,
'-moz-border-radius': radius
}
}
})).toEqual("div.cls {\rheight: 235px;\r}\r");
expect(Csster.formatRules({
'div.cls':{
macro: roundedCorners(5),
height: '235px'
}
})).toEqual("div.cls {\rheight: 235px;\r-webkit-border-radius: 5px;\r-moz-border-radius: 5px;\r}\r");
});
});
function roundedCorners(radius) {
return {
'-webkit-border-radius': radius,
'-moz-border-radius': radius
}
}
describe('#insertStyleElement', function() {
var originalWidth;
beforeEach(function() {
originalWidth = document.getElementsByClassName('logo')[0].clientWidth;
});
it('should have no element style overrides for width', function() {
expect(document.getElementsByClassName('logo')[0].style.width).toEqual('');
});
describe('inserting the stylesheet', function() {
beforeEach(function() {
Csster.insertStylesheet('.logo { font-size: 150%;}');
});
it('should now be wider', function() {
expect(document.getElementsByClassName('logo')[0].clientWidth).toBeGreaterThan(originalWidth);
});
});
});
it("should expand a macro property", function() {
expect(rules({
'div.cls':{
macro: roundedCorners(5),
height: '235px'
}
})).toEqual("div.cls {\rheight: 235px;\r-webkit-border-radius: 5px;\r-moz-border-radius: 5px;\r}\r");
describe('#style', function() {
var originalWidth;
beforeEach(function() {
originalWidth = document.getElementsByClassName('logo')[0].clientWidth;
});
it('should have no element style overrides for width', function() {
expect(document.getElementsByClassName('logo')[0].style.width).toEqual('');
});
describe('inserting the stylesheet', function() {
beforeEach(function() {
Csster.style({'.logo': { fontSize: '75%'}});
});
it('should now be wider', function() {
expect(document.getElementsByClassName('logo')[0].clientWidth).toBeLessThan(originalWidth);
});
});
});
View
@@ -6,7 +6,7 @@
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.0.0.rc1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine-html.js"></script>
<style type="text/css"></style>
<!-- include source files here... -->
<script type="text/javascript" src="src/csster.js"></script>
View
@@ -367,25 +367,41 @@ Csster.formatSelectorAndProperties = function(selector, properties) {
return result;
}
Csster.insertStylesheet = function (s) {
var e = document.createElement('STYLE');
var a = document.createAttribute('type');
a.nodeValue = 'text/css';
e.setAttributeNode(a);
e.appendChild(document.createTextNode(s));
var head = document.getElementsByTagName('HEAD')[0];
head.appendChild(e);
};
/**
*
* @param cssRule { selector: { prop1: value, prop2: value, subselector: { prop3: value}}
* @param parentSelector
*/
function resolveRuleHash(cssRule, parentSelector) {
var result = '';
for (key in cssRule) {
for (var key in cssRule) {
var selector = parentSelector + key;
result += Csster.formatSelectorAndProperties(selector, cssRule[key]);
}
return result;
}
function rules(rs) {
Csster.formatRules = function(rs) {
var result = '';
rs = [rs].flatten();
rs.each(function(r) {
result += resolveRuleHash(r, '');
});
return result;
}
} ;
Csster.style = function(cssRules) {
var s = Csster.formatRules(cssRules);
Csster.insertStylesheet(s);
};

0 comments on commit 67b54b4

Please sign in to comment.