lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-03-20 09:38:37 +08:00
Code Issues Projects Releases Wiki Activity

Fix: Css custom properties #33

Browse Source
This commit is contained in:
surunzi
2017-09-20 13:17:18 +08:00
parent ea47897c13
commit 91375c6aab
4 changed files with 60 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
package.json
View File

@@ -14,13 +14,20 @@
"utilDoc": "eustia doc src/lib/util.js -f md -o doc/UTIL_API.md -t \"Eruda Util Documentation\""
},
"eustia": {
"files": "src/**/*.es6",
"ignore": "**/Info/defInfo.es6",
"output": "src/lib/util.js",
"exclude": [
"createCfg"
],
"format": "commonjs"
"eruda": {
"files": "src/**/*.es6",
"ignore": "**/Info/defInfo.es6",
"output": "src/lib/util.js",
"exclude": [
"createCfg"
],
"format": "commonjs"
},
"test": {
"files": ["test/**/*.js", "test/**/*.html"],
"output": "test/util.js",
"format": "global"
}
},
"repository": {
"type": "git",

3
src/Elements/Elements.es6
View File

@@ -355,6 +355,9 @@ let regColor = /rgba?\((.*?)\)/g,
function processStyleRule(val)
{
// For css custom properties, val is unable to retrieved.
val = util.toStr(val);
return val.replace(regColor, '<span class="eruda-style-color" style="background-color: $&"></span>$&')
.replace(regCssUrl, (match, url) => `url("${wrapLink(url)}")`);
}

8
test/manual.html
View File

@@ -7,6 +7,7 @@
<link rel="stylesheet" href="style.css">
<script src="assets/eruda.js"></script>
<script src="boot.js"></script>
<script src="util.js"></script>
</head>
<body>
<header>Manual Test</header>
@@ -24,6 +25,9 @@
<li>
<a href="#" id="issue31">#31</a>
</li>
<li>
<a href="#" id="issue33">#33</a>
</li>
</ul>
</nav>
<script>
@@ -76,6 +80,10 @@
{
addEventListener('resize', function () {});
});
addClickEvent('issue33', function ()
{
_.evalCss(':root {--test: 10px;}');
});
</script>
<script>boot();</script>
</body>

35
test/util.js Normal file
View File

@@ -0,0 +1,35 @@
// Built by eustia.
window._ = (function()
{
var _ = {};
if (typeof window === 'object' && window._) _ = window._;
/* ------------------------------ evalCss ------------------------------ */
_.evalCss = (function ()
{
var mark = [];
function exports(css)
{
for (var i = 0, len = mark.length; i < len; i++)
{
if (mark[i] === css) return;
}
mark.push(css);
var container = exports.container || document.head,
style = document.createElement('style');
style.type = 'text/css';
style.textContent = css;
container.appendChild(style);
}
return exports;
})();
return _;
})();