Permalink
Browse files

figure out how to insert styles into the document

  • Loading branch information...
1 parent e1387e2 commit 67b54b4c08b292963faafcab09522ed7ffe54d39 @ndp committed Sep 11, 2010
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.