智慧物流>> kss>> 返回
项目作者： protocol55

项目描述 ：
A KSS documentation parser (https://warpspire.com/kss/syntax/) written in Clojure.
高级语言： Clojure
项目地址: git://github.com/protocol55/kss.git
创建时间： 2018-08-21T17:00:18Z
项目社区：https://github.com/protocol55/kss
开源协议：MIT License
下载


KSS documentation parser

A KSS documentation parser (https://warpspire.com/kss/syntax/) written in
Clojure.

Installation:

deps.edn

org.clojars.protocol55/kss {:mvn/version "0.1.0"}

Leiningen

[org.clojars.protocol55/kss "0.1.0"]

Features

Supports the following KSS syntax:

  • Header
  • Description
  • Deprecated/Experimental description prefix
  • Modifiers
  • Parameters
  • Compatibility
  • Markup
  • Styleguide reference

Additionally supports the following:

  • Weight
  • Colors

Usage

Parsing

protocol55.kss.core/parse-lines

Returns a lazy collection of KSS documentation maps from lines of css.

protocol55.kss.core/parse-string

Returns a lazy collection of KSS documentation maps from a css string.

protocol55.kss.core/parse-stream

Returns a lazy collection of KSS documentation maps from a java.io.BufferedReader.

protocol55.kss.core/parse-file

Returns a collection of KSS documentation maps from java.io.File. Not lazy.

Examples

Basic

styles/buttons.css

  1. /*
  2. A button suitable for giving stars to someone.
  5. :hover             - Subtle hover highlight.
  6. .stars-given       - A highlight indicating you’ve already given a star.
  7. .stars-given:hover - Subtle hover highlight on top of stars-given styling.
  8. .disabled          - Dims the button to indicate it cannot be used.
  12. Styleguide 2.1.3.
  13. */
  14. a.button.star{
  15.   …
  16. }
  17. a.button.star.stars-given{
  18.   …
  19. }
  20. a.button.star.disabled{
  21.   …
  22. }
  1. (require '[protocol55.kss.core :as kss])
  2. (kss/parse-file (clojure.java.io/file "styles/buttons.css"))
  1. ({:header "A button suitable for giving stars to someone.",
  2.   :modifiers [{:name ":hover", :description "Subtle hover highlight."}
  3.               {:name ".stars-given", :description "A highlight indicating you’ve already given a star."}
  4.               {:name ".stars-given:hover", :description "Subtle hover highlight on top of stars-given styling."}
  5.               {:name ".disabled", :description "Dims the button to indicate it cannot be used."}],
  6.   :reference "2.1.3",
  7.   :source {:base "fixtures", :name "basic.css", :path "fixtures/basic.css"}})

Parameters

styles/gradient.scss

  1. // Creates a linear gradient background, from top to bottom.
  2. //
  3. // $start - The color hex at the top.
  4. // $end   - The color hex at the bottom.
  5. //
  6. // Compatible in IE6+, Firefox 2+, Safari 4+.
  7. @mixin gradient($start, $end){
  8.   …
  9. }
  1. (require '[protocol55.kss.core :as kss])
  2. (kss/parse-file (clojure.java.io/file "styles/gradient.scss"))
  1. ({:header "Creates a linear gradient background, from top to bottom.",
  2.   :parameters [{:name "$start", :default-value nil, :description "The color hex at the top."}
  3.                {:name "$end", :default-value nil, :description "The color hex at the bottom."}],
  4.   :compatibility "Compatible in IE6+, Firefox 2+, Safari 4+.",
  5.   :source {:base "fixtures", :name "function.scss", :path "fixtures/function.scss"}})

Colors

Example from https://github.com/kss-node/kss-node/blob/master/test/fixtures/property-colors.less

styles/colors.scss

  1. // Complete Colors block
  2. //
  3. // Colors:
  4. // @shortHexColor:      #f00            - short hexa color
  5. // hex6:                #e7e7e7           - six digit hexa color
  6. // --hex8:              #ff00FF00         - 8 digit hexa color with alpha and css custom property
  7. // $rgbColor:           rgb(255,0,0)      - simple rgb
  8. // percentRgb:          rgb(100%, 0%, 0%) - rgb with percent
  9. // $color-links:        #0091aa           - links color
  10. // rgbCliped:           rgb(300,0,0)      - simple rgb with red overflow
  11. // negativeRGB:         rgb(255,-10,0)    - simple rgb with negative blue
  12. // clipedPercentRGB:    rgb(110%, 0%, 0%) - simple rgb with percent with red overflow
  13. // rgba:                rgba(255,0,0,1)
  14. // rgbaPercent:         rgba(100%,0%,0%,1)
  15. // rgbaFloat:           rgba(0,0,255,0.5)
  16. // rgbaFloatZeroLess:   rgba(0,0,255,.5)
  17. // rgbaPercentFloat:    rgba(100%, 50%, 0%, 0.1)
  18. // hsl:                 hsl(0, 100%, 50%)
  19. // hsl2:                hsl(120, 100%, 50%)
  20. // hsl3:                hsl(120, 75%, 75%)
  21. // hsl4:                hsl(120, 100%, 50%)
  22. // hsla:                hsla(120, 100%, 50%, 1)
  23. // hsla2:               hsla(240, 100%, 50%, 0.5)
  24. // hsla3:               hsla(30, 100%, 50%, 0.1)
  25. // hsla4:               hsla(30, 100%, 50%, .1)
  26. // namedGrey:           grey              - color name
  27. // #facdea - missing name
  28. // ghostwhite
  29. //
  30. // Style guide: Colors.complete
  1. (require '[protocol55.kss.core :as kss])
  2. (kss/parse-file (clojure.java.io/file "styles/colors.scss"))
  1. ({:header "Complete Colors block",
  2.   :colors [{:name "@shortHexColor", :css/color "#f00", :description "short hexa color"}
  3.            {:name "hex6", :css/color "#e7e7e7", :description "six digit hexa color"}
  4.            {:name "--hex8", :css/color "#ff00FF00", :description "8 digit hexa color with alpha and css custom property"}
  5.            {:name "$rgbColor", :css/color "rgb(255,0,0)", :description "simple rgb"}
  6.            {:name "percentRgb", :css/color "rgb(100%, 0%, 0%)", :description "rgb with percent"}
  7.            {:name "$color-links", :css/color "#0091aa", :description "links color"}
  8.            {:name "rgbCliped", :css/color "rgb(300,0,0)", :description "simple rgb with red overflow"}
  9.            {:name "negativeRGB", :css/color "rgb(255,-10,0)", :description "simple rgb with negative blue"}
  10.            {:name "clipedPercentRGB", :css/color "rgb(110%, 0%, 0%)", :description "simple rgb with percent with red overflow"}
  11.            {:name "rgba", :css/color "rgba(255,0,0,1)", :description nil}
  12.            {:name "rgbaPercent", :css/color "rgba(100%,0%,0%,1)", :description nil}
  13.            {:name "rgbaFloat", :css/color "rgba(0,0,255,0.5)", :description nil}
  14.            {:name "rgbaFloatZeroLess", :css/color "rgba(0,0,255,.5)", :description nil}
  15.            {:name "rgbaPercentFloat", :css/color "rgba(100%, 50%, 0%, 0.1)", :description nil}
  16.            {:name "hsl", :css/color "hsl(0, 100%, 50%)", :description nil}
  17.            {:name "hsl2", :css/color "hsl(120, 100%, 50%)", :description nil}
  18.            {:name "hsl3", :css/color "hsl(120, 75%, 75%)", :description nil}
  19.            {:name "hsl4", :css/color "hsl(120, 100%, 50%)", :description nil}
  20.            {:name "hsla", :css/color "hsla(120, 100%, 50%, 1)", :description nil}
  21.            {:name "hsla2", :css/color "hsla(240, 100%, 50%, 0.5)", :description nil}
  22.            {:name "hsla3", :css/color "hsla(30, 100%, 50%, 0.1)", :description nil}
  23.            {:name "hsla4", :css/color "hsla(30, 100%, 50%, .1)", :description nil}
  24.            {:name "namedGrey", :css/color "grey", :description "color name"}
  25.            {:name nil, :css/color "#facdea", :description "missing name"}
  26.            {:name nil, :css/color "ghostwhite", :description nil}],
  27.   :reference "Colors.complete",
  28.   :source {:base "test/fixtures", :name "property-colors.scss", :path "test/fixtures/property-colors.scss"}})

Tests

Run clj -Atest.