-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow to display warnings in the browser
Inspired by postcss-messages. Then why not use that plugin? Well, look at the diff of index.js: - console.log(warningLog); + if (!('console' in options && !options.console)) { + console.log(warningLog); + } + + if (options.browser) { + result.root.append(formatBrowser(warningLog)); + } The only difference is how to display the warnings! There's no need to duplicate the rest of features between the two plugins. This fixes postcss/postcss-browser-reporter#8, postcss/postcss-browser-reporter#9 and postcss/postcss-browser-reporter#10. As opposed to postcss-messages, this implementation: - Inserts the messages at `head::before` instead of `html::before`. While `html::before` is unlikely to conflict with other styles, `head::before` is even less so! In fact, it should be _extremely_ unlikely to conflict. - Does not allow to change the selector. Because of the above point there's no need to. - Does not use `::after` if `::before` was already used in the CSS. Again, because of the first point there is no need to. - Does not allow to change the styling. There's no way to change the styling when logging to the console either. Also, @ai said: > BTW, options is a lack in UX. You should better think more about default > options and styles, rather than add options for every case. postcss/postcss-browser-reporter#3 (comment) - Uses simpler styling. KISS. It is still similar to postcss-messages. - Properly escapes the CSS content string.
- Loading branch information
Showing
14 changed files
with
135 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
node_modules | ||
*.log | ||
tmp | ||
/test/compiled.css |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
'use strict'; | ||
|
||
var fs = require('fs'); | ||
var chalk = require('chalk'); | ||
|
||
var style = fs.readFileSync(require.resolve('./style.css')).toString(); | ||
|
||
module.exports = function(warningLog) { | ||
var output = escapeCssStringContents(chalk.stripColor(warningLog.trim())); | ||
return style.replace('$OUTPUT', output); | ||
}; | ||
|
||
function escapeCssStringContents(stringContents) { | ||
return stringContents.split('').map(function(ch) { | ||
switch (ch) { | ||
case '\n': | ||
case '\r': | ||
return '\\A '; | ||
case '\\': | ||
case '\'': | ||
case '"': | ||
return '\\' + ch; | ||
default: | ||
return ch; | ||
} | ||
}).join(''); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
head { | ||
display: block; | ||
} | ||
|
||
head::before, head::after { | ||
position: fixed; | ||
top: 0; | ||
z-index: 2147483647; /* Maximum value browsers accept. */ | ||
min-height: 3em; | ||
font: 14px/1.2 monospace; | ||
color: white; | ||
} | ||
|
||
head::before { | ||
content: '$OUTPUT'; | ||
left: 0; | ||
right: 0; | ||
padding: 1em; | ||
padding-left: 5em; /* Add room for the warning sign. */ | ||
background: #DF4F5E; | ||
white-space: pre; | ||
} | ||
|
||
head::after { | ||
content: '\26A0'; /* Warning sign. */ | ||
left: 0.25em; | ||
font-size: 5em; | ||
line-height: 1; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,8 @@ | ||
body { | ||
/** @define HamSandwich */ | ||
.Ham.Sandwich { | ||
color: pink; | ||
} | ||
|
||
div { | ||
color: orange; | ||
background: blue; | ||
} | ||
|
||
p { | ||
color: yellow; | ||
:root a { | ||
font-weight: bold; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
'use strict'; | ||
|
||
var test = require('tape'); | ||
var formatBrowser = require('../lib/formatBrowser'); | ||
var chalk = require('chalk'); | ||
|
||
var input = [ | ||
'', | ||
'|', | ||
'||', | ||
'" |"', | ||
'\' |\'', | ||
'\r', | ||
chalk.red('foo'), | ||
'' | ||
].join('\n').replace(/\|/g, '\\'); | ||
|
||
var escaped = '|||A |||||A |" |||"|A |\' |||\'|A |A |A foo'.replace(/\|/g, '\\'); | ||
|
||
test('formatBrowser with really tricky input', function(t) { | ||
t.ok( | ||
formatBrowser(input).indexOf('content: \'' + escaped + '\'') !== -1, | ||
'includes escaped content' | ||
); | ||
|
||
t.end(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
'use strict'; | ||
|
||
require('./processResult'); | ||
require('./formatBrowser'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<!doctype html> | ||
<meta charset=utf-8> | ||
<title>visual warnings test</title> | ||
<link rel=stylesheet href=compiled.css> | ||
<p style="margin-top:300px">There's your visual confirmation that it works.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,37 +1,30 @@ | ||
'use strict'; | ||
|
||
var postcss = require('postcss'); | ||
var bemLinter = require('postcss-bem-linter'); | ||
var logWarnings = require('..'); | ||
var fs = require('fs'); | ||
|
||
var rejectColors = postcss.plugin('reject-colors', function() { | ||
return function(css, result) { | ||
css.eachDecl(function(decl) { | ||
if (decl.prop === 'color') { | ||
result.warn('no colors allowed', { node: decl }); | ||
} | ||
}); | ||
}; | ||
}); | ||
|
||
var rejectBackgrounds = postcss.plugin('reject-backgrounds', function() { | ||
return function(css, result) { | ||
css.eachDecl(function(decl) { | ||
if (decl.prop === 'background') { | ||
result.warn('no backgrounds allowed', { node: decl }); | ||
} | ||
}); | ||
}; | ||
}); | ||
var display = process.argv[2] || 'console'; | ||
|
||
fs.readFile('test/forVisual.css', { encoding: 'utf8' }, function(err, data) { | ||
if (err) throw err; | ||
fs.readFile('test/forVisual.css', { encoding: 'utf8' }, function(readErr, data) { | ||
if (readErr) throw readErr; | ||
postcss() | ||
.use(rejectColors()) | ||
.use(rejectBackgrounds()) | ||
.use(logWarnings({ throwError: true })) | ||
.use(bemLinter()) | ||
.use(logWarnings({ | ||
console: display === 'console', | ||
browser: display === 'browser', | ||
throwError: display === 'console' | ||
})) | ||
.process(data, { from: 'test/forVisual.css' }) | ||
.then(function() { | ||
.then(function(result) { | ||
fs.writeFile('test/compiled.css', result.css, function(writeErr) { | ||
if (writeErr) throw writeErr; | ||
console.log('Now open test/visual.html in a browser!'); | ||
}); | ||
}) | ||
.catch(function(ourErr) { | ||
console.log(ourErr); | ||
console.log('There\'s your visual confirmation that it works.'); | ||
}); | ||
}); |