CSS Parser
Note:
This CSS parser is not suited for production yet and the API will change in the future!
The aim of this module is to serve as an intermediate stage in graphics rendering by supporting CSS as styling language.
It parses a CSS file and returns a list of rules. These rules are sorted by their specificity, so the programmer only needs to implement a way to render the rules.
Acknowledgement:
Features
- 100% Written in V
- Parser can parse
bootstrap.min.css
without errors - Parser and checker produce errors and warnings
- Rules are sorted by CSS Specificity
- Property validator (checker stage) can be embedded to handle custom properties
TODO
- Implement more properties, functions and CSS datatypes.
-
CSS Animations,
@keyframe
rules - CSS Variables, probably will have to rely on a combination using the DOM
- Optimizations: store rules in a B+ tree by specificity, merge styles etc.
- Minifier
Project structure
The
css
The compiler stage is as follows:
lexer
parser
checker
Usage Example
Run the example:
v run examples/simple.v
If you are confused why the resulting color is
red
The
properties
Tests
Run all tests with
v test .
css/gen
Runnining individual checks
v run css/parser/tests/test_program.v css/parser/tests/file.css
You can swap out 'parser' for 'checker'
API
Properties
A list of properties and their types. Some property names start with
-
See
types.v
Type | Properties | Remarks |
---|---|---|
AlphaValue |
'opacity' | |
Background |
'background' | struct containing all
background-
|
Border |
'border' | struct containing all
border-
|
BorderColors |
'border-color' | struct containing all 4 colors for each border side, will be merged into
Border |
BorderRadius |
'border-radius' | struct containing the radius for each corner, will be merged into
Border |
BorderStyles |
'border-style' | struct containing all styles for each border, will be merged into
Border |
ColorValue |
'accent-color', 'background-color', 'caret-color', 'color', 'column-rule-color', 'outline-color' | A sumtype representing a color value, each property ending with
-color
|
DimensionValue |
'block-size', 'bottom', 'column-gap', 'flex-basis', 'height', 'inline-size', 'left','letter-spacing' 'line-height', 'max-height', 'max-width', 'min-height', 'min-width', 'order', 'orphans', 'perspective', 'right', 'row-gap', 'tab-size', 'text-indent', 'top', 'vertical-align', 'widows', 'width', 'word-spacing', 'z-index' | A sumtype representing properties/values that represent a dimension/length, e.g.
10px
50%
|
Font |
'font', 'font-family', 'font-size', 'font-stretch', 'font-weight' | struct containing all
font-
|
FontFamily |
'font-family' | will be merged into 'font' |
FontStretch |
'font-stretch' | a sumtype containing the possible font-stretch properties, will be merged into 'font' |
FontWeight |
'font-weight' | will be merged into 'font' |
FlexBox |
'flex' | struct containg all
flex-
|
FlexDirection |
'flex-direction' | will be merged into 'flex' |
FlexSize |
'flex-grow', 'flex-shrink' | will be merged into 'flex' |
FlexWrap |
'flex-wrap' | A sumtype containg the possible flex-wrap types, will be merged into 'flex' |
FourDimensions |
'padding', 'margin', 'border-width' | A struct containing 4
DimensionValue
|
Gap |
'gap' | A struct containing 'row-gap' and 'column-gap' |
Image |
'background-image' | A sumtype holding the different values for the
image
|
Keyword |
'align-content', 'align-items', 'align-self', 'all', 'appearance', 'backface-visibility', 'border-collapse', 'box-sizing', 'caption-side', 'clear', 'cursor', 'direction', 'display', 'empty-cells', 'float', 'forced-color-adjust', 'isolation', 'justify-content', 'justify-items', 'justify-self', 'mix-blend-mode', 'object-fit', 'overflow-x', 'overflow-y', 'pointer-events', 'position', 'print-color-adjust', 'resize', 'scroll-behavior', 'table-layout', 'text-align', 'text-align-last', 'text-justify', 'text-rendering', 'text-transform', 'text-wrap', 'touch-action', 'unicode-bidi', 'user-select', 'visibility', 'white-space', 'word-break', 'word-wrap', 'writing-mode' | A type alias for string representing a CSS keyword like
inherit |
Overflow |
'overflow' | A struct containing the properties 'overflow-x' and 'overflow-y' |
ShadowValue |
'box-shadow', 'text-shadow' | A struct containing all properties for a CSS shadow |
Text |
'text' | A struct containing all text CSS properties, starting with
text- |
TextCombineUpright |
'text-combine-upright' | See MDN reference
here
digits
Text |
TextOverflow |
'text-overflow' | Sumtype of
Keyword
string
Text |
Functions
See
functions.v
Type | Function | Remarks |
---|---|---|
Gradient |
'linear-gradient', 'radial-gradient', 'repeating-linear-gradient', 'repeating-radial-gradient' | Used as datatype for each property that can have a gradient like 'background-image' |
Url |
'url', 'src' | The type of url is defined in the
UrlKind
|
Datatypes
See
datatypes.v