nv / cssom Goto Github PK
View Code? Open in Web Editor NEWUnmaintained! ⚠️ CSS Object Model implemented in pure JavaScript. Also, a CSS parser.
Home Page: https://nv.github.io/CSSOM/docs/parse.html
License: MIT License
Unmaintained! ⚠️ CSS Object Model implemented in pure JavaScript. Also, a CSS parser.
Home Page: https://nv.github.io/CSSOM/docs/parse.html
License: MIT License
hey NV,
unless I'm doing something stupid, it looks like the comma at line 29 is preventing installation:
https://gist.github.com/782028
When I take it out the JSON parses correctly.
Hi, wanted to try CSSOM but unfortunately i got:
TypeError: Object# has no method 'existsSync'
when I ran: ./node_modules/.bin/jake
What I am doing wrong?
System is: Ubuntu 12.04
npm -v: 1.1.4
node -v: v0.6.12
Thanks
require('cssom').parse("body{background-image: url(')');}")
Output:
Error: Unmatched ' (line 1, char 30)
at CSSOM.parse.parseError (/home/andreas/work/CSSOM/lib/parse.js:54:15)
at Object.parse (/home/andreas/work/CSSOM/lib/parse.js:101:6)
at repl:1:25
at REPLServer.self.eval (repl.js:109:21)
at Interface.<anonymous> (repl.js:248:12)
at Interface.EventEmitter.emit (events.js:96:17)
at Interface._onLine (readline.js:200:10)
at Interface._line (readline.js:518:8)
at Interface._ttyWrite (readline.js:736:14)
at ReadStream.onkeypress (readline.js:97:10)
It's caused by parse.js
handling (
in a CSS value in a rather naive way: index
is advanced to the first occurrence of )
regardless of whether that's inside a quoted string, eg. url('...)')
or url("...)")
.
The error occurs "in real life" with this file: https://github.com/ajaxorg/ace/blob/master/lib/ace/css/editor.css#L305
@media handheld, only screen and (max-device-width: 480px) {
body {overflow: auto}
}
Spec. WebKit implementation: CSSMediaRule.cpp.
@charset rule currently ends up being part of a selector:
@charset "UTF-8"; html,section { margin:0; padding:0; border:0 }
E.g. one of the GitHub CSS files:
https://a248.e.akamai.net/assets.github.com/assets/github-0c9d87dff5611078dcc29621367346a73a74b001.css
Loading CSSOM under PhantomJS 1.8.1 either via
$ phantomjs cssom.js
or
$ phantomjs
> phantom.injectJs("CSSOM.js");
returns a SyntaxError: Parse error
Removing the initial 'use strict';
solves that problem.
I tried going through jshint to find a possibly offending issue, but it shows me too many warnings and stops before completing.
jsdom could use d943119 in particular.
@page {
margin-left: 3cm;
}
@page :left {
margin-left: 4cm;
}
http://www.w3.org/TR/CSS2/page.html
http://dev.w3.org/csswg/cssom/#css-page-rule
WebKit implementation: CSSPageRule.cpp.
It's not uncommon for CSS authors to take advantage of the fact that a browser must ignore a CSS property in its entirety if a parse error or unsupported token is encountered in the value. For example:
body {
background-image: -moz-radial-gradient(center, #a8e936, #76a326);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#a8e936), to(#76a326));
background-image: -webkit-radial-gradient(center, #a8e936, #76a326);
}
If parsed and reserialized using CSSOM only the last of the three background-image properties will survive. In the project I'm working on it would be very desirable to be able to reconstruct the whole thing. I'm not sure if this falls within the scope of CSSOM -- but would it be possible to achieve that behavior somehow?
Best regards,
Papandreou
/* button.css */ .button { display: inline-block; text-align: right; /* fixes Opera */ /* background-image defined in button-theme.css */ background: no-repeat 100% -55px; }
var css = CSSOM.parse(buttonCSS, {preserveFormatting: true}) css.cssRules[0].style.setProperty('display', 'inline'); css.toString() -> ".button {display: inline; text-align: right; background: no-repeat 100% -55px}" css.serialize() -> "/* button.css */ .button { display: inline; text-align: right; /* fixes Opera */ /* background-image defined in button-theme.css */ background: no-repeat 100% -55px; }"
I'm working on it.
Travis CI: Node.js.
Testling for browsers.
var CSSOM = require("cssom")
var rule = "p { background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20fill%3D%22url(%23a)%22/%3E%3C/svg%3E'); }";
var ast = CSSOM.parse(rule);
throws error: Unmatched ' (line 1, char 141)
This is, arguably, OK to not parse; the data URL contains unescaped bracket characters. However, throwing a final error and terminating the parse is a bit unfriendly. This is likely caused by the parser jumping ahead from the (
to the next )
without checking for more opening brackets in the intervening space.
cross posted from jsdom issue: jsdom/jsdom#356
Using the following, I am receiving an error using jQuery 1.7:
test.html
<!doctype html>
<html>
<head>
<script src='http://code.jquery.com/jquery-1.7.js'></script>
</head>
<body>
</body>
</html>
test.js
#!/usr/bin/env node
var fs = require('fs');
var jsdom = require('jsdom').jsdom;
var window = jsdom(fs.readFileSync('test.html')).createWindow();
window.onload = function(){
console.log('loaded');
};
The error I receive is:
TypeError: Cannot set property cssText of [object Object] which has only a getter
at Object.<anonymous> (http://code.jquery.com/jquery-1.7.js:1621:27)
at Object.<anonymous> (http://code.jquery.com/jquery-1.7.js:1064:30)
at Object.fireWith (http://code.jquery.com/jquery-1.7.js:1182:7)
at Function.ready (http://code.jquery.com/jquery-1.7.js:437:14)
at Object.<anonymous> (http://code.jquery.com/jquery-1.7.js:927:10)
at Function.dispatch (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/events.js:195:42)
at Object.dispatchEvent (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/events.js:285:33)
at Object.<anonymous> (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/html.js:391:12)
at /Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/html.js:48:20
at Object.check (/Users/brad/dev/test/node_modules/jsdom/lib/jsdom/level2/html.js:277:11)
I think this is because CSSOM doesn't define a setter for cssText
.
something funky in your json
npm ERR! Error parsing json /usr/local/lib/node/.npm/cssom/0.2.0/package/package.json
npm ERR! parse error SyntaxError: Unexpected token }
npm ERR! parse error at Object.parse (native)
npm ERR! parse error at /usr/local/lib/node/.npm/npm/0.3.11/package/lib/utils/read-json.js:71:17
npm ERR! parse error at P (/usr/local/lib/node/.npm/npm/0.3.11/package/lib/utils/read-json.js:62:40)
npm ERR! parse error at cb (/usr/local/lib/node/.npm/npm/0.3.11/package/lib/utils/graceful-fs.js:31:9)
npm ERR! parse error at [object Object].<anonymous> (fs.js:86:5)
npm ERR! parse error at [object Object].emit (events.js:39:17)
npm ERR! parse error at afterRead (fs.js:843:12)
Is there a way to extend functionality for things like nested rules in Less etc?
Here’s an illustration of the problem (see it demonstrated in this Tonic notebook):
var cssRule = require('cssom').parse('body {opacity: 0}').cssRules[0];
console.log(cssRule.cssText); // "body {opacity: 0;}"
cssRule.style.setProperty('opacity', 0.1);
console.log(cssRule.cssText); // "body {opacity: 0.1;}"
cssRule.style.setProperty('opacity', 0);
console.log(cssRule.cssText); // "body {opacity: ;}"
cssRule.style.setProperty('opacity', '0');
console.log(cssRule.cssText); // "body {opacity: 0; opacity: 0;}"
When the cssText
getter calls this.getPropertyValue(name)
and the value is the Number 0, return this[name] || "";
returns the second part of the condition.
I quickly checked the spec and saw that setProperty
takes value
of type DOMString
, and that a DOMString, by MDN’s description, is effectively just a JS string. This is already how the CSSOM.parse
part of the API works, of course, so I propose having setProperty
coerce it’s value argument to a string, i.e. change CSSStyleDeclaration.js:54 to:
this[name] = value + "";
This used to work fine before b2507c6:
cssom.parse('body{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}');
cssom.parse('body{font-family: "times new roman";}');
@font-face {
font-family: Chunkfive;
src: url('Chunkfive.otf');
}
h1 {
font-family: Chunkfive, Georgia, serif;
}
Spec. WebKit implementation: CSSFontFaceRule.cpp.
It seems feasible to use some parser generator and reuse WebKit's stuff
http://svn.webkit.org/repository/webkit/trunk/WebCore/css/tokenizer.flex
http://svn.webkit.org/repository/webkit/trunk/WebCore/css/CSSGrammar.y
Never did it before. Any pointers?
$ npm update
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm ERR! cssom@latest Error: undefined log message
npm ERR! cssom@latest at log (/home/james/.node_libraries/.npm/npm/0.2.12-1/package/lib/utils/log.js:110:11)
npm ERR! cssom@latest at Function.verbose (/home/james/.node_libraries/.npm/npm/0.2.12-1/package/lib/utils/log.js:56:39)
npm ERR! cssom@latest at /home/james/.node_libraries/.npm/npm/0.2.12-1/package/lib/outdated.js:71:13
npm ERR! cssom@latest at /home/james/.node_libraries/.npm/npm/0.2.12-1/package/lib/utils/registry/get.js:55:5
npm ERR! cssom@latest at IncomingMessage.<anonymous> (/home/james/.node_libraries/.npm/npm/0.2.12-1/package/lib/utils/registry/request.js:144:14)
npm ERR! cssom@latest at IncomingMessage.emit (events.js:59:20)
npm ERR! cssom@latest at HTTPParser.onMessageComplete (http.js:111:23)
npm ERR! cssom@latest at Client.onData [as ondata] (http.js:1227:27)
npm ERR! cssom@latest at Client._onReadable (net.js:623:27)
npm ERR! cssom@latest at IOWatcher.onReadable [as callback] (net.js:156:10)
npm info outdated Everything up-to-date.
npm info update Nothing to update
npm ok
I'm looking to use cssom alongside jsdom to validate (and expunge unused) css rules.
Cssom has saved me quite a bit of time but It seems like selectors separated by commas aren't treated as individual rules by cssom.
In my app the logic looks like:
The following is a log excerpt showing selectors read from the css file:
- Setting UA: Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
- Window Dimensions: 1024x768
- Has document.getElementsByTagName: true
- Processing css/ui.css:
- Regsitry File Key: ui_css
- Number of rules: 3296
- Counting references to .ui-slider-vertical .ui-slider-range-max [cls_ui-slider-vertical_-_cls_ui-slider-range-max]
- Counting references to .ruler [cls_ruler]
- Counting references to .ruler_time [cls_ruler_time]
- Counting references to .ui-state-default1, .ui-widget-content .ui-state-default1 [cls_ui-state-default1,_-cls_ui-widget-content-_cls_ui-state-default1]
- Skipping pseudo selector ".ui-state-default1 a, .ui-state-default1 a:link, .ui-state-default1 a:visited"
The rules above (with the last two showing commas) are from the jQuery UI CSS Framework:
.ui-state-default1, .ui-widget-content .ui-state-default1 { background: url(/js/sliders/aerow_normal.gif) 50% 50% no-repeat; font-weight: normal; color: #555555; outline: none; }
.ui-state-default1 a, .ui-state-default1 a:link, .ui-state-default1 a:visited { color: #555555; text-decoration: none; outline: none; }
I couldn't see how to add multiple say "background" properties without clobbering previous ones, does the CSSOM even define that sort of API or am I screwed?
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
I am going to use your parser for CSS sprites generator.
It would be convenient to parse comments as properties annotations like in the following example:
.icon {
background-image: url(./arrow.png); /*sprite: spr1.png*/
width: 24px;
height: 24px;
}
{
parentStyleSheet: null,
cssRules: [
{
parentRule: null,
parentStyleSheet: "../..",
selectorText: ".icon",
style: {
0: "background-image",
1: "width",
2: "height",
length: 3,
parentRule: "..",
_importants: {
"background-image": "",
width: "",
height: ""
},
_comments: {
"background-image": "sprite: spr1.png",
},
__starts: 6,
"background-image": "url(./arraw.png)",
width: "24px",
height: "24px"
},
__starts: 0,
__ends: 93
}
]
}
Backslash escape sequences currently aren't handled.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library NV/CSSOM
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "NV/CSSOM",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
The css comments miss
img {
border: none
}
/* test */
div{
}
run tostring
---->
img {
border: none
}
div{}
@import url("partial.css");
@import url("http://usercss.ru/styles/night/night.css");
Spec. WebKit implementation: CSSImportRule.cpp.
Ability to serialize CSSStyleSheet object into CSS string.
CSSOM.parse("body {color: black}").toString()
-> "body {color: black}"
It might need a few options, such as indent
or propertiesSeparator
. Not sure about it yet.
@-moz-document url-prefix() {
/* Only Mozilla see it */
}
I know that font-face
rule declarations have calmed down a bit in the last year or two, but I just ran into an issue parsing some generated font-face
styles that I thought might crop up for other people as well:
@font-face {
font-family: 'MyFont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#MyFont') format('svg');
font-weight: normal;
font-style: normal;
}
Here are the results of using the online parser. You'll notice that the first src
gets overridden by the second. I recognize that this is logical and likely even desirable behavior, but it's giving me some trouble in IE when I use the rule.toString
and/or rule.cssText
without that first src
included.
It's simple enough for me to work around this by declaring my font-face rule differently, but when thrown into the wild, I'd like to be able to accomodate all kinds of wonky font-face declarations.
UPDATE: I apologize for not making the connection earlier, but this seems no different than #16. I'll check out #53
Browsers mostly store longhand properties rather than shortcuts. When you write background: rgb(40, 40, 40)
WebKit stores it as
style:
0: "background-image"
1: "background-repeat-x"
2: "background-repeat-y"
3: "background-attachment"
4: "background-position-x"
5: "background-position-y"
6: "background-origin"
7: "background-clip"
8: "background-color"
And that's how Firefox stores it:
style:
0: "background-color"
1: "background-image"
2: "background-repeat"
3: "background-attachment"
4: "background-position"
5: "background-clip"
6: "background-origin"
7: "background-size"
The differences are just about in every property. I'll probably stick to WebKit implementation.
Hi, just wondering if it would be possible to remove MIT-LICENSE.txt from .npmignore. As a Linux distribution packager, we encourage upstream vendors to always include a copy of the license with their software.
Thanks!
None of CSSValue interfaces are implemented yet. #8 depends on it.
This CSS:
.block-title .block-title-inner a:visited { color: #48484d; } // MAIN MENU - (used to keep mobile menu options hidden and keep weather/search and menu on one line) // #tncms-region-nav-main-nav-right-nav { float:left; } #tncms-region-main-nav-right-region { float:right; }
causes cssom to parse the selectorText
//MAIN MENU - (used to keep mobile menu options hidden and keep weather/search and menu on one line) // #tncms-region-nav-main-nav-right-nav
where it should probably just throw out that entire rule. That is what Chrome does, at least.
This is used in shadow dom: http://www.w3.org/TR/shadow-dom/#host-at-rule
everything im doing was going smooth until I tried to insert keyframes, now it's producing really weird output, can we just use ./parse.js?
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
http://www.w3.org/TR/css3-namespace/
http://dev.w3.org/csswg/cssom/#css-namespace-rule
To replicate, create an element and do the following with it:
const domElement = document.createElement('div');
domElement.style.transform = 'translate3d(0px, 0px, 0px)';
assert(domElement.style.transform === 'translate3d(0px, 0px, 0px)'); // undefined
I can only get it to work if I use this specific pattern:
const domElement = document.createElement('div');
domElement.style['webkit-transform'] = 'translate3d(0px, 0px, 0px)';
assert(domElement.style.WebkitTransform === 'translate3d(0px, 0px, 0px)');
X-issue from jsdom/jsdom#1321
i code just like below, it seems that after i use CSSOM.parse, there is only "background: -webkit-gradient(linear, left top, left bottom, from(#feffff), to(#f4f7f9));" left.
in fact, i want to get these styles all. :)
background: -webkit-linear-gradient(top, #feffff, #f4f7f9);
background: -moz-linear-gradient(top, #feffff, #f4f7f9);
background: -o-linear-gradient(top, #feffff, #f4f7f9);
background: -webkit-gradient(linear, left top, left bottom, from(#feffff), to(#f4f7f9));
node v0.11.2
pi@raspberrypi ~ $ npm -g install jquery
npm http GET https://registry.npmjs.org/jquery
npm http 304 https://registry.npmjs.org/jquery
npm http GET https://registry.npmjs.org/htmlparser/1.7.6
npm http GET https://registry.npmjs.org/xmlhttprequest
npm http GET https://registry.npmjs.org/location/0.0.1
npm http GET https://registry.npmjs.org/navigator
npm http GET https://registry.npmjs.org/contextify
npm http GET https://registry.npmjs.org/jsdom
npm http 304 https://registry.npmjs.org/location/0.0.1
npm http 304 https://registry.npmjs.org/htmlparser/1.7.6
npm http 304 https://registry.npmjs.org/xmlhttprequest
npm http 304 https://registry.npmjs.org/jsdom
npm http 304 https://registry.npmjs.org/navigator
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] 'repositories' (plural) Not supported.
npm WARN package.json Please pick one as the 'repository' field
npm http 304 https://registry.npmjs.org/contextify
npm http GET https://registry.npmjs.org/bindings
npm http 304 https://registry.npmjs.org/bindings
[email protected] install /opt/node/lib/node_modules/jquery/node_modules/contextify
node-gyp rebuild
npm http GET https://registry.npmjs.org/cssom
npm http GET https://registry.npmjs.org/cssstyle
npm http GET https://registry.npmjs.org/request
npm http 304 https://registry.npmjs.org/request
npm http 304 https://registry.npmjs.org/cssstyle
npm http 304 https://registry.npmjs.org/cssom
npm ERR! Failed to parse json
npm ERR! Unexpected end of input
npm ERR! File: /home/pi/.npm/cssstyle/0.2.3/package/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix their package.json file. JSON.parse
npm ERR! System Linux 3.6.11+
npm ERR! command "/opt/node/bin/node" "/opt/node/bin/npm" "-g" "install" "jquery"
npm ERR! cwd /home/pi
npm ERR! node -v v0.11.2
npm ERR! npm -v 1.2.21
npm ERR! file /home/pi/.npm/cssstyle/0.2.3/package/package.json
npm ERR! code EJSONPARSE
npm ERR! Error: ENOENT, lstat '/opt/node/lib/node_modules/jquery/node_modules/htmlparser/testdata/.tmp_trackerchecker.html.65425~'
npm ERR! If you need help, you may report this log at:
npm ERR! http://github.com/isaacs/npm/issues
npm ERR! or email it to:
npm ERR! [email protected]
npm ERR! System Linux 3.6.11+
npm ERR! command "/opt/node/bin/node" "/opt/node/bin/npm" "-g" "install" "jquery"
npm ERR! cwd /home/pi
npm ERR! node -v v0.11.2
npm ERR! npm -v 1.2.21
npm ERR! path /opt/node/lib/node_modules/jquery/node_modules/htmlparser/testdata/.tmp_trackerchecker.html.65425~
npm ERR! fstream_path /opt/node/lib/node_modules/jquery/node_modules/htmlparser/testdata/.tmp_trackerchecker.html.65425~
npm ERR! fstream_type File
npm ERR! fstream_class FileWriter
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! fstream_stack /opt/node/lib/node_modules/npm/node_modules/fstream/lib/writer.js:284:26
npm ERR! fstream_stack Object.oncomplete (fs.js:94:15)
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: ENOENT, no such file or directory
gyp ERR! stack at Object.exports.resolve (path.js:323:52)
gyp ERR! stack at findConfigs (/opt/node/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:324:25)
gyp ERR! stack at Object.oncomplete (fs.js:94:15)
gyp ERR! System Linux 3.6.11+
gyp ERR! command "node" "/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:119
log.error('cwd', process.cwd())
^
Error: ENOENT, no such file or directory
at errorMessage (/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:119:28)
at issueMessage (/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:125:3)
at process. (/opt/node/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js:109:3)
at process.EventEmitter.emit (events.js:97:17)
at process._fatalException (node.js:272:26)
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/pi/npm-debug.log
npm ERR! not ok code 0
Can somebody comment on this? Thanks!
When attempting to parse the jQuery Mobile css (http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css) a parse error is encountered at line 2457 char 77.
@-moz-document url-prefix() { .ui-select .ui-btn select { opacity: 0.0001; }}
I realize some of these rules are not standard yet (url-prefix()
) or engine specific (@-moz-document
). Is there a way to relax the parse? A project I'm utilizing depends upon CSSOM and consequently is not working for me due to my dependency on jQuery Mobile's CSS.
Any help or guidance would be appreciated.
Thanks!
I have a use case to serialize the "state" of the CSSOM.Stylesheet
, not sure if this would be something useful, but I have working a gist here that exports CSSOM2JSON
and JSON2CSSOM
:
https://gist.github.com/pyramation/3bafcff80a4fc41b04af8834a2a0d794
Is this something that I am unaware of that already exists? I wanted to be able to write out to a JSON, and then read it back in and have a legitimate CSSOM
object to work with
If someone needs a crossbrowser version of CSSOM.js please describe what are you intend to do with that. It is possible to remove all these __proto__
and Object.defineProperty
, but I don't feel the need right now.
This seems to be the canonical repo now
crash at parsing
var CSSOM = require('cssom');
var css;
try {
css = CSSOM.parse(`
@-moz-document url-prefix() {
@media only screen{
#main {
color:red;
}
}
}
`);
console.log(css);
}catch(e) {
/* Error
{ [Error: Unexpected } (line 8, char 3)]
line: 8,
char: 3,
styleSheet: CSSStyleSheet { parentStyleSheet: null, cssRules: [ [Object] ] } }
*/
console.log(e);
}
css = CSSOM.parse(`
@-moz-document url-prefix() {
#main {
color:red;
}
}
@media only screen{
#main {
color:red;
}
}
`);
console.log(css);// works
@-webkit-keyframes bounce {
from {left: 0}
to {left: 200px}
}
div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}
WebKit's implementation: WebKitCSSKeyframeRule.cpp, WebKitCSSKeyframesRule.idl.
I don't know if it's a valid syntax according to W3C specifications but I sometimes see assignments like visibility:
.
It seems these kind of assignments make the CSS elements disappear, so they are kind of shortcut for reassigning to default value.
This is not a big problem if you write the code yourself but this causes problems when you run javascript code in an arbitrary website. Current implementation gives a TypeError(you get undefined from array) in CSSStyleDeclaration.js
file in cssText
set method.
Is it possible to change the implementation for supporting assigments without a value in the way I described?
Thanks.
This is useful in sheets that use CSS3, say for example this:
div {
background: -moz-linear-gradient(x);
background: -webkit-linear-gradient(x);
background: linear-gradient(x);
}
Gets you this styles
structure:
{ '0': 'background',
length: 1,
parentRule:
{ parentRule: null,
parentStyleSheet: { parentStyleSheet: null, cssRules: [Object] },
selectorText: 'div',
style: [Circular],
__starts: 0,
__ends: 122 },
_importants: { background: '' },
__starts: 4,
background: 'linear-gradient(x)' }
...which is less than ideal. Notice that the length
is 1
and that the only background
it knows about is the last one.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.