rgrove / crass

A Ruby CSS parser that's fully compliant with the CSS Syntax Level 3 specification.
MIT License
139 stars 14 forks source link

Why dont I cant a style_rule inside a media query #15

Closed stoivo closed 4 months ago

stoivo commented 4 months ago

Hi, thanks for the gem!

I have a question. I wonder why I don't get a :node=>:style_rule for rules inside a media query? I added a small script to demonstrate

require "crass"

ENV['COLUMNS']="70"

css = <<~CSS
body { line-height: 1.2 }
@media screen, print {
  body { line-height: 1.2 }
}
CSS

pp Crass.parse(css, :preserve_comments => false)
[{:node=>:style_rule,
  :selector=>
   {:node=>:selector,
    :value=>"body",
    :tokens=>
     [{:node=>:ident, :pos=>0, :raw=>"body", :value=>"body"},
      {:node=>:whitespace, :pos=>4, :raw=>" "}]},
  :children=>
   [{:node=>:whitespace, :pos=>6, :raw=>" "},
    {:node=>:property,
     :name=>"line-height",
     :value=>"1.2",
     :children=>
      [{:node=>:whitespace, :pos=>19, :raw=>" "},
       {:node=>:number,
        :pos=>20,
        :raw=>"1.2",
        :repr=>"1.2",
        :type=>:number,
        :value=>1.2},
       {:node=>:whitespace, :pos=>23, :raw=>" "}],
     :important=>false,
     :tokens=>
      [{:node=>:ident,
        :pos=>7,
        :raw=>"line-height",
        :value=>"line-height"},
       {:node=>:colon, :pos=>18, :raw=>":"},
       {:node=>:whitespace, :pos=>19, :raw=>" "},
       {:node=>:number,
        :pos=>20,
        :raw=>"1.2",
        :repr=>"1.2",
        :type=>:number,
        :value=>1.2},
       {:node=>:whitespace, :pos=>23, :raw=>" "}]}]},

 {:node=>:whitespace, :pos=>25, :raw=>"\n"},
 {:node=>:at_rule,
  :name=>"media",
  :prelude=>
   [{:node=>:whitespace, :pos=>32, :raw=>" "},
    {:node=>:ident, :pos=>33, :raw=>"screen", :value=>"screen"},
    {:node=>:comma, :pos=>39, :raw=>","},
    {:node=>:whitespace, :pos=>40, :raw=>" "},
    {:node=>:ident, :pos=>41, :raw=>"print", :value=>"print"},
    {:node=>:whitespace, :pos=>46, :raw=>" "}],
  :block=>

   [{:node=>:whitespace, :pos=>48, :raw=>"\n" + "  "},
    {:node=>:ident, :pos=>51, :raw=>"body", :value=>"body"},
    {:node=>:whitespace, :pos=>55, :raw=>" "},
    {:node=>:simple_block,
     :start=>"{",
     :end=>"}",
     :value=>
      [{:node=>:whitespace, :pos=>57, :raw=>" "},
       {:node=>:ident,
        :pos=>58,
        :raw=>"line-height",
        :value=>"line-height"},
       {:node=>:colon, :pos=>69, :raw=>":"},
       {:node=>:whitespace, :pos=>70, :raw=>" "},
       {:node=>:number,
        :pos=>71,
        :raw=>"1.2",
        :repr=>"1.2",
        :type=>:number,
        :value=>1.2},
       {:node=>:whitespace, :pos=>74, :raw=>" "}],
     :tokens=>
      [{:node=>:"{", :pos=>56, :raw=>"{"},
       {:node=>:whitespace, :pos=>57, :raw=>" "},
       {:node=>:ident,
        :pos=>58,
        :raw=>"line-height",
        :value=>"line-height"},
       {:node=>:colon, :pos=>69, :raw=>":"},
       {:node=>:whitespace, :pos=>70, :raw=>" "},
       {:node=>:number,
        :pos=>71,
        :raw=>"1.2",
        :repr=>"1.2",
        :type=>:number,
        :value=>1.2},
       {:node=>:whitespace, :pos=>74, :raw=>" "},
       {:node=>:"}", :pos=>75, :raw=>"}"}]},
    {:node=>:whitespace, :pos=>76, :raw=>"\n"}],
  :tokens=>
   [{:node=>:at_keyword, :pos=>26, :raw=>"@media", :value=>"media"},
    {:node=>:whitespace, :pos=>32, :raw=>" "},
    {:node=>:ident, :pos=>33, :raw=>"screen", :value=>"screen"},
    {:node=>:comma, :pos=>39, :raw=>","},
    {:node=>:whitespace, :pos=>40, :raw=>" "},
    {:node=>:ident, :pos=>41, :raw=>"print", :value=>"print"},
    {:node=>:whitespace, :pos=>46, :raw=>" "},
    {:node=>:"{", :pos=>47, :raw=>"{"},
    {:node=>:whitespace, :pos=>48, :raw=>"\n" + "  "},
    {:node=>:ident, :pos=>51, :raw=>"body", :value=>"body"},
    {:node=>:whitespace, :pos=>55, :raw=>" "},
    {:node=>:"{", :pos=>56, :raw=>"{"},
    {:node=>:whitespace, :pos=>57, :raw=>" "},
    {:node=>:ident,
     :pos=>58,
     :raw=>"line-height",
     :value=>"line-height"},
    {:node=>:colon, :pos=>69, :raw=>":"},
    {:node=>:whitespace, :pos=>70, :raw=>" "},
    {:node=>:number,
     :pos=>71,
     :raw=>"1.2",
     :repr=>"1.2",
     :type=>:number,
     :value=>1.2},
    {:node=>:whitespace, :pos=>74, :raw=>" "},
    {:node=>:"}", :pos=>75, :raw=>"}"},
    {:node=>:whitespace, :pos=>76, :raw=>"\n"},
    {:node=>:"}", :pos=>77, :raw=>"}"}]},
 {:node=>:whitespace, :pos=>78, :raw=>"\n"}]