Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: comp.lang.javascript Subject: Re: Parse CSS styles and swap background position value Date: Mon, 02 Feb 2015 14:01:41 +0100 Organization: PointedEars Software (PES) Lines: 101 Message-ID: <1609092.d9bYY2oEu8@PointedEars.de> References: <8be9bcae-a221-46e1-8e0f-ec41632517a4@googlegroups.com> <54cf68f5$0$2870$e4fe514c@news2.news.xs4all.nl> Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit X-Trace: solani.org 1422882140 24493 eJwNwYEBwCAIA7CXKkLZztEi/5+gSUwOKp1Bj36PcWZsDLQ3LD9htfRL9mzaKTbptQqCXRQuERg= (2 Feb 2015 13:02:20 GMT) X-Complaints-To: abuse@news.solani.org NNTP-Posting-Date: Mon, 2 Feb 2015 13:02:20 +0000 (UTC) User-Agent: KNode/4.14.2 X-User-ID: eJwNyMEBwCAIA8CVBEmAcRBl/xHaex42he1G0DAY5XGJIvrVpKZJ4l/zidSKkr4v57KuE+sQ6ts7z8yKvUI+SmYVIQ== Cancel-Lock: sha1:xhoCtOGyzhfgIty9zm0GsfPKYy8= X-NNTP-Posting-Host: eJwFwYEBgDAIA7CXBGmBc7YK/59ggpdGZRAMLJZdFZ5dMj2SywDYzfBAT9pnd6c4vZU95/wCuRDA Xref: csiph.com comp.lang.javascript:26776 Erwin Moller wrote: > On 1/31/2015 7:39 PM, Cezary Tomczyk wrote: >> Here is a sample of CSS (the properties are repeated, but this is just >> for example to test regular expression): >> […] >> My goal is to find all "background" properties and then swap horizontal >> position value from left to right or right to left or value% to (100% - >> value%). >> […] >> Here is the site where I play with regular expressions: >> https://www.regex101.com/r/sJ2uL5/1 > > Sounds pretty difficult with regex only. It is provably *impossible* to parse (a) CSS(-like language) with only one application of one *regular* expression. As most languages to be parsed, this one, too, is _not_ regular. (See: Chomsky hierarchy, pumping lemma for regular languages.) It is provably possible with several regular expressions as part of an implementation of a push-down automaton. In the simplest case: var match, rx = /…|…/g; while ((match = rx.exec(code)) { /* … */ } (This does not suffice here because the first, *longest* match must win, and with alternation the first matching alternative always wins. I have been working on a general parser implementation that is capable, but it is not production-ready yet.) > I would load the file into a programming language of your choice (eg > PHP, Phyton, etc) and fix the CSS from there. It’s _Python_. But I do not see what difference that would make, unless there is a CSS library in either language that I am not aware of. Recursive regular expressions which are supported by Python and PCRE as supported by PHP can only get you that far. This appears to me to be a use-case for LESS or another CSS generator. Use them to have variables and more functions in your stylesheet, then use client-side script only to switch the class of a context element. Or do not parse the stylesheet at all, but find the selectors that apply in the document.styleSheets NodeList and modify the property values there. > For example: > - Make a single item of each separate declaration. (they end with ";") > Maybe use split on ";" but also make sure you take the opening "{" > into account. @media only screen and (max-width: 474px) { .foo:after { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: "BTDT; and you?"; } } > - trim any spaces/tabs on the left side. > - Check if that item starts with "background" or "background-*:" where > "*" can be anything up to the next ":". (You can use a regex for this > part of course) > - if so: do something with the rest (eg replacing "left" with "right"). > - reassemble all the parts into your new css. You can do that, but again it will not work with a single expression, because parantheses can be nested in the property value, namely background-image: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)); background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); (a linear gradient with either top black to bottom white or top opaque black to bottom transparent black, depending on which is supported last) is Valid CSS3 (and think about prefixes). > I think that covers all appearances. It does not, of course. See the CSS 2.1 grammar to begin with. The used parser would have to recognize, in top-down order: media queries, rulesets, declarations, property names, and property values, in order to do something useful with property values. (And probably I have forgotten something else.) It is not logical to rebuild a CSS parser when simpler measures would suffice. -- PointedEars FAQ: | SVN: Twitter: @PointedEars2 | ES Matrix: Please do not cc me. / Bitte keine Kopien per E-Mail.