Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26776

Re: Parse CSS styles and swap background position value

Show key headers only | View raw

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: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Parse CSS styles and swap background position value Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2015-01-31 10:39 -0800
  Re: Parse CSS styles and swap background position value Erwin Moller <erwinmollerusenet@xs4all.nl> - 2015-02-02 13:09 +0100
    Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-02 14:01 +0100
      Re: Parse CSS styles and swap background position value Erwin Moller <erwinmollerusenet@xs4all.nl> - 2015-02-02 14:39 +0100
        Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-02 18:17 +0100
          Re: Parse CSS styles and swap background position value Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2015-02-03 01:59 -0800
            Re: Parse CSS styles and swap background position value "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-02-03 11:39 +0100
            Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-03 15:37 +0100
              Re: Parse CSS styles and swap background position value Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2015-02-04 08:55 +0100
              Re: Parse CSS styles and swap background position value John Harris <niam@jghnorth.org.uk.invalid> - 2015-02-04 15:09 +0000
                Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-04 16:19 +0100
          Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-03 12:44 +0100

csiph-web