Module CssParser
In: lib/css_parser.rb
lib/css_parser/rule_set.rb
lib/css_parser/regexps.rb
lib/css_parser/version.rb
lib/css_parser/parser.rb

frozen_string_literal: true

Methods

Classes and Modules

Class CssParser::CircularReferenceError
Class CssParser::OffsetAwareRuleSet
Class CssParser::Parser
Class CssParser::RemoteFileError
Class CssParser::RuleSet

Constants

VERSION = "1.7.0".freeze

Public Class methods

Calculates the specificity of a CSS selector per www.w3.org/TR/CSS21/cascade.html#specificity

Returns an integer.

Example

 CssParser.calculate_specificity('#content div p:first-line a:link')
 => 114

Make url() links absolute.

Takes a block of CSS and returns it with all relative URIs converted to absolute URIs.

"For CSS style sheets, the base URI is that of the style sheet, not that of the source document." per www.w3.org/TR/CSS21/syndata.html#uri

Returns a string.

Example

 CssParser.convert_uris("body { background: url('../style/yellow.png?abc=123') };",
              "http://example.org/style/basic.css").inspect
 => "body { background: url('http://example.org/style/yellow.png?abc=123') };"

Merge multiple CSS RuleSets by cascading according to the CSS 2.1 cascading rules (www.w3.org/TR/REC-CSS2/cascade.html#cascading-order).

Takes one or more RuleSet objects.

Returns a RuleSet.

Cascading

If a RuleSet object has its specificity defined, that specificity is used in the cascade calculations.

If no specificity is explicitly set and the RuleSet has one selector, the specificity is calculated using that selector.

If no selectors the specificity is treated as 0.

If multiple selectors are present then the greatest specificity is used.

Example 1

  rs1 = RuleSet.new(nil, 'color: black;')
  rs2 = RuleSet.new(nil, 'margin: 0px;')

  merged = CssParser.merge(rs1, rs2)

  puts merged
  => "{ margin: 0px; color: black; }"

Example 2

  rs1 = RuleSet.new(nil, 'background-color: black;')
  rs2 = RuleSet.new(nil, 'background-image: none;')

  merged = CssParser.merge(rs1, rs2)

  puts merged
  => "{ background: none black; }"

[Validate]