Comments (8)
Ah, interesting! Precisely yesterday I was looking for a CSS grammar/tokenizer... but also haven't done this before.
Definitely check this out: http://zaach.github.com/jison/
from cssom.
isnt css lovely :) giant clusterfuck of inconsistencies. does cssom work with node? you should publish to npm
from cssom.
CSS has a lot of crap that nobody uses anyway (@page, @top-left-corner, ...).
Yes, it does work with node. Although, I haven't bothered yet to run tests on Node (I run them in the browser).
I'll publish it to npm today.
from cssom.
Published. npm install cssom.
from cssom.
Was exploring this same possibility with. I want to be able to parse css files and mutate them. I.E:
style = parse("background:url('test.jpg') red no-repeat; background-color:blue");
style.bgColor;
"blue" # correctly overrides the initial red shorthand
style.bgImage;
"test.jpg" # gives me the image url rather than url('sdfas.jpg')
style.bgImage = 'awesome.jpg';
style.cssText
"background:url('awesome.jpg') red no-repeat; background-color:blue" # Serialize new css. Maintaining a similar structure isn't necessary. I.E. Expanding all shorthand properties would be okay too.
Your project looks promising for this purpose. I'm reluctant to dive in because I've seen some massive implementations (jscssp) that would need to be tweaked to create a nice object model. Then potentially you have to keep up with the spec.
They state this might not be the best idea since (antlr at least) "does not express parsing conventions, only syntax."
from cssom.
It's not here yet, but I'll do it some day (#8).
What task are you trying to accomplish? I might want to use a headless browser like phantomjs.
from cssom.
Basically a live CSS editor. You have various page elements (defined by selectors) and you can edit the CSS of each one. The interface needs to be able to read the CSS and load the values into a user interface (i.e. modify border thickness with a jQuery ui slider). The UI manipulates the values, then exports a new stylesheet. The styles you're manipulating don't necessarily appear on the page where the css editor is present.
One of the possibilities I've explored is simply using the DOM and jQuery's css function. The problem here is that if you don't have a document that matches your css selectors, the values will be undefined. This hack might work if you generate temporary doms for each CSS rule you encounter - which should be less tricky than parsing css.
I.E.
css: h1 span.awesome:last-child { border: 1px solid purple }
generated markup: <div id="unique"><h1><span class="awesome"></span></h1></div>
jQuery('<div ...>...markup above...</div>').css('border-color');
There's certain caveats. You'd have to isolate this DOM somehow so that other styles in your website don't interact, but that's what the unique id could be used for. You prefix the selectors accordingly and inject them into your document.
from cssom.
One of the possibilities I've explored is simply using the DOM and jQuery's css function. The problem here is that if you don't have a document that matches your css selectors, the values will be undefined
You can access a stylesheet via document.styleSheets
. Take a look at CSSOM spec (don't be confused with CSSOM.js library).
My old take on CSS editor.
from cssom.
Related Issues (20)
- Why @charset rules doesn't appear HOT 1
- Why it can not parse (div span a{color: #789}) into tree nodes? HOT 1
- Can't parse @font-face nested in @media. HOT 3
- Nested media queries HOT 3
- CSSMediaRule should derive from CSSConditionRule HOT 1
- material-ui - JSS issues
- Error: Could not parse CSS stylesheet HOT 4
- parseError on @media print {
- "font-size" not accessible
- Security Policy
- ")" not found when trying to import font with multiple weights HOT 3
- should not remove spaces in calc() function HOT 4
- restore master branch HOT 1
- missing CSS.escape HOT 1
- CSSTransformValue HOT 1
- parse: Unexpected } (line 1, char 43385) HOT 2
- @supports bug HOT 2
- Wrong type for CSSKeyframesRule and CSSKeyframeRule HOT 1
- CSSFontFaceRule is missing from npm package exports HOT 4
- npm package is missing several exports HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cssom.