Skip to content

Commit

Permalink
simplified the CSS reset and shaved down the file size
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniellmb
daniellmb committed Apr 30, 2015
1 parent 6c14475 commit 1236c4b
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 32 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Expand Up @@ -38,7 +38,7 @@ As you can see it quickly gets out of hand. You must explicitly reset each style

## There is a better way!

With `console.style` each individual CSS rule is first applied, then automatically reset for you.
With `console.style` first the CSS rules are applied, then all are automatically reset for you.

###[Check out some live examples](http://daniellmb.github.io/console.style/demo/index.html)

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
@@ -1,6 +1,6 @@
{
"name": "console.style",
"version": "0.2.0",
"version": "0.2.1",
"main": "console.style.js",
"ignore": [
".editorconfig",
Expand Down
8 changes: 1 addition & 7 deletions console.style.js
View file
Expand Up @@ -64,8 +64,6 @@
return wrap('', styles.join(';'));
});
args[0] = text.replace(rxTags, function(matchT, $1T, $2T, $3T) {
var styles = [];
var resets = [];
$2T = $2T || '';
$3T = $3T.replace(rxTokens, '');
switch ($1T) {
Expand All @@ -76,11 +74,7 @@
$2T += ';font-style:italic';
break;
}
$2T.replace(rxRules, function(matchR, $1R, $2R) {
styles.push($1R + ':' + $2R);
resets.push($1R + ':inherit');
});
args.push(styles.join(';'), resets.join(';'));
args.push($2T, '');
return '%c' + $3T + '%c';
});
}
Expand Down
2 changes: 1 addition & 1 deletion console.style.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion demo/index.html
View file
Expand Up @@ -7,7 +7,7 @@
</head>
<body>
<p>Open the browser console to see what console.style can do for you!</p>
<script src="../console.style.min.js"></script>
<script src="../console.style.js"></script>
<script>
console.style('<css="font-size:70px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">console.style</css>');
console.style('I <i>really</i> <b="color:red;">♥</b> console.style!');
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "console.style",
"version": "0.2.0",
"version": "0.2.1",
"description": "console.style is a standalone micro-library that facilitates intuitive styling of the browser console with CSS.",
"author": {
"name": "Daniel Lamb",
Expand Down
40 changes: 20 additions & 20 deletions test/spec/console.style.spec.js
View file
Expand Up @@ -136,16 +136,16 @@ describe('console.style.js', function () {
// act
console.style(text);
// assert
expect(console.log).toHaveBeenCalledWith('this %cis a%c test', 'color:red', 'color:inherit');
expect(console.log).toHaveBeenCalledWith('this %cis a%c test', 'color:red;', '');
});

it('should replace the css tags with single quote rules', function () {
// arrange
var text = 'this <css=\'color:blue;\'>is a</css> test';
var text = 'this <css=\'color:blue\'>is a</css> test';
// act
console.style(text);
// assert
expect(console.log).toHaveBeenCalledWith('this %cis a%c test', 'color:blue', 'color:inherit');
expect(console.log).toHaveBeenCalledWith('this %cis a%c test', 'color:blue', '');
});

it('should replace multiple css tags', function () {
Expand All @@ -156,33 +156,33 @@ describe('console.style.js', function () {
// assert
expect(console.log).toHaveBeenCalledWith(
'%cred%c %cgreen%c refactor',
'color:red', 'color:inherit',
'color:green', 'color:inherit'
'color:red;', '',
'color:green;', ''
);
});

it('should replace multiple rules in a single tag', function () {
// arrange
var text = '<css="color:red;font-weight:bold;">bold red text</css>';
var text = '<css="color:red;font-weight:bold">bold red text</css>';
// act
console.style(text);
// assert
expect(console.log).toHaveBeenCalledWith(
'%cbold red text%c',
'color:red;font-weight:bold', 'color:inherit;font-weight:inherit'
'color:red;font-weight:bold', ''
);
});

it('should handle inconsistent css tag format', function () {
// arrange
var data = 'Testing <css="color: green;font-weight:bold">bold green text!</css> 1 2 3 <css="color:red;">now red text!</css> The end!';
var data = 'Testing <css="color: green;font-weight:bold ">bold green text!</css> 1 2 3 <css="color:red;">now red text!</css> The end!';
// act
console.style(data);
// assert
expect(console.log).toHaveBeenCalledWith(
'Testing %cbold green text!%c 1 2 3 %cnow red text!%c The end!',
'color:green;font-weight:bold', 'color:inherit;font-weight:inherit',
'color:red', 'color:inherit');
'color: green;font-weight:bold ', '',
'color:red;', '');
});

it('should ignore all format specifiers except %c', function () {
Expand All @@ -193,7 +193,7 @@ describe('console.style.js', function () {
// assert
expect(console.log).toHaveBeenCalledWith(
'%cgreen text%c',
'color:green', 'color:inherit'
'color:green', ''
);
});

Expand All @@ -206,7 +206,7 @@ describe('console.style.js', function () {
expect(console.log).toHaveBeenCalledWith(
'test %cbold%c tag',
'color:green;font-weight:bold',
'color:inherit;font-weight:inherit');
'');
});

it('should support the <b> tag without styles', function () {
Expand All @@ -217,8 +217,8 @@ describe('console.style.js', function () {
// assert
expect(console.log).toHaveBeenCalledWith(
'test %cbold%c tag',
'font-weight:bold',
'font-weight:inherit');
';font-weight:bold',
'');
});

it('should support the <i> tag with styles', function () {
Expand All @@ -230,7 +230,7 @@ describe('console.style.js', function () {
expect(console.log).toHaveBeenCalledWith(
'test %citalic%c tag',
'color:pink;font-style:italic',
'color:inherit;font-style:inherit');
'');
});

it('should support the <i> tag without styles', function () {
Expand All @@ -241,8 +241,8 @@ describe('console.style.js', function () {
// assert
expect(console.log).toHaveBeenCalledWith(
'test %citalic%c tag',
'font-style:italic',
'font-style:inherit');
';font-style:italic',
'');
});

it('should support the <img> tag', function () {
Expand All @@ -254,7 +254,7 @@ describe('console.style.js', function () {
expect(console.log).toHaveBeenCalledWith(
'test %c%c tag',
'font-size:1px;background:url(http:/example.com/img.gif);background-repeat:no-repeat;line-height:50px;background-size:175px 50px;padding:25px 88px',
'font-size:inherit;background:inherit;background-repeat:inherit;line-height:inherit;background-size:inherit;padding:inherit'
''
);
});

Expand All @@ -267,7 +267,7 @@ describe('console.style.js', function () {
// assert
expect(console.log).toHaveBeenCalledWith(
'%cbold text%c',
'font-weight:bold', 'font-weight:inherit',
';font-weight:bold', '',
text2
);
});
Expand All @@ -282,7 +282,7 @@ describe('console.style.js', function () {
expect(console.log).toHaveBeenCalledWith(
'level0 %clevel1 %clevel2%c%c level0',
'color:green', 'font-weight:bold',
'font-weight:inherit', 'color:inherit');
'', '');
});

});
Expand Down

0 comments on commit 1236c4b

Please sign in to comment.