nur

nur is a library that allows you to generate css from the html.

Built with

• Node.js
• Cheerio
• Commander

Installation

With npm

npm i -g nur

With curl

sudo curl https://raw.githubusercontent.com/BillalOI/nur/master/dist/nur -o /usr/local/bin/nur
sudo chmod +x /usr/local/bin/nur

With wget

sudo wget -O /usr/local/bin/nur https://raw.githubusercontent.com/BillalOI/nur/master/dist/nur
sudo chmod +x /usr/local/bin/nur

Usage

$ nur -e index.html -o build

index.html content :

<section>
    <div class="first-example=m:50px;p:20px; second-example=p:10px+0+0+20px;">text</div>
    <div class="third-example=c:red;bg:blue;">1 2 3 1 2</div> 
</section>

Generated CSS :

.first-example {
    margin: 50px;
    padding: 20px;
}

.second-example {
    padding: 10px 0 0 20px;
}

.third-example {
    color: red;
    background: blue;
}

After that, a new index.html is created with classes only.

Shortcut (not mandatory)

algc : "align-content",
algi : "align-items",
algs : "align-self",
animdel : "animation-delay",
animdir : "animation-direction",
animdur : "animation-duration",
animfillmode : "animation-fill-mode",
animitercount : "animation-iteration-count",
animname : "animation-name",
animplaystate : "animation-play-state",
animtimingfunc : "animation-timing-function",
backfacevisibility : "backface-visiblity",
bg : "background",
bgbm : "background-blend-mode",
bgclip : "background-clip",
bga : "background-attachment",
bgc : "background-color",
bgimg : "background-image",
bgorigin : "background-origin",
bgp : "background-position",
bgr : "background-repeat",
bd : "border",
bdt : "border-top",
bdr : "border-right",
bdb : "border-bottom",
bdl : "border-left",
bdbc : "border-bottom-color",
bdblr : "border-bottom-left-radius",
bdbrr : "border-bottom-right-radius",
bdbs : "border-bottom-style",
bdbw : "border-bottom-width",
bdcollapse : "border-collapse",
bdc : "border-color",
bdimg : "border-image",
bdimgoutset : "border-image-outset",
bdimgrepeat : "border-image-repeat",
bdimgslice : "border-image-slice",
bdimgsrc : "border-image-source",
bdimgwidth : "border-image-width",
bl : "border-left",
blc : "border-left-color",
bls : "border-left-style",
blw : "border-left-width",
br : "border-radius",
bdrc : "border-right-color",
bdrw : "border-right-width",
brw : "border-right-width",
bdsc : "border-spacing",
bds : "border-style",
bdtc : "border-top-color",
bdtlr : "border-top-left-radius",
bdts : "border-top-style",
bdtw : "border-top-width",
bdw : "border-width",
b : "bottom",
boxdcrtbrk : "box-decoration-break",
boxshad : "box-shadow",
boxszg : "box-sizing",
brkafter : "break-after",
brkbefore : "break-before",
brkinside : "break-inside",
captside : "caption-side",
caretc : "caret-color",
charset : "@charset",
clear : "clear",
clip : "clip",
c : "color",
colcnt : "column-count",
colfill : "column-fill",
colgap : "column-gap",
colrule : "column-rule",
colrulestyle : "column-rule-style",
colrulewidth : "column-rule-width",
colspan : "column-span",
colwidth : "column-width",
cols : "columns",
content : "content",
ctrincr : "counter-increment",
ctrres : "counter-reset",
csr : "cursor",
drct : "direction",
d : "display",
emptycells : "empty-cells",
filter : "filter",
flex : "flex",
flexb : "flex-basis",
flexdir : "flex-direction",
flexf : "flex-flow",
flexg : "flex-grow",
flexs : "flex-shrink",
flexw : "flex-wrap",
float : "float",
font : "font",
fontface : "@fontface",
fontfam : "font-family",
fontfeatsetting : "font-feature-settings",
fontfeatvalues : "@font-feature-values",
fontkern : "font-kerning",
fontlngoverride : "font-language-override",
fs : "font-size",
fsa : "font-size-adjust",
fstretch : "font-stretch",
fst : "font-style",
fsynt : "font-synthesis",
fvar : "font-variant",
fvatalt : "font-variant-alternates",
fvarcaps : "font-variant-caps",
fvareastasian : "font-variant-east-asian",
fvarlig : "font-variant-ligatures",
fvarnum : "font-variant-numeric",
fvarpos : "font-variant-position",
fw : "font-weight",
g : "grid",
garea : "grid-area",
gautocol : "grid-auto-columns",
gautoflow : "grid-auto-flow",
gautorows : "grid-auto-rows",
gcol : "grid-column",
gcolend : "grid-column-end",
gcolgap : "grid-column-gap",
gcolstart : "grid-column-start",
ggap : "grid-gap",
grow : "grid-row",
growend : "grid-row-end",
growgap : "grid-row-gap",
growstart : "grid-row-start",
gtemplate : "grid-template",
gtemplateareas : "grid-template-areas",
gtemplatecols : "grid-template-columns",
gtemplaterows : "grid-template-rows",
hangpunc : "hanging-punctuation",
h : "height",
hyph : "hyphens",
imgrendering : "image-rendering",
import : "@import",
isol : "isolation",
jc : "justify-content",
keyframes : "@keyframes",
left : "left",
letterspacing : "letter-spacing",
linebrk : "line-break",
lineh : "line-height",
liststyle : "list-style",
liststyleimg : "list-style-image",
liststylepos : "list-style-position",
liststyletype : "list-style-type",
m : "margin",
mbot : "margin-bottom",
mleft : "margin-left",
mright : "margin-right",
mtop : "margin-top",
maxh : "max-height",
maxw : "max-width",
media : "@media",
minh : "min-height",
minw : "min-width",
mixblendmode : "mix-blend-mode",
objfit : "object-fit",
objpos : "object-position",
opacity : "opacity",
order : "order",
orph : "orphans",
outline : "outline",
outlinec : "outline-color",
outlineoffset : "outline-offset",
outlinestyle : "outline-style",
outlinew : "outline-width",
overf : "overflow",
overfwrap : "overflow-wrap",
overfx : "overflow-x",
overfy : "overflow-y",
p : "padding",
pbot : "padding-bottom",
pleft : "padding-left",
pright : "padding-right",
ptop : "padding-top",
pagebrkafter : "page-break-after",
pagebrkbefore : "page-break-before",
pagebrkinside : "page-break-inside",
persp : "perspective",
persptorg : "perspective-origin",
pointerevents : "pointerevents",
pos : "position",
quotes : "quotes",
resize : "resize",
right : "right",
scrollb : "scroll-behavior",
tabsize : "tab-size",
tlay : "table-layout",
textalign : "text-align",
textalignlast : "text-align-last",
textcombineupright : "text-combine-upright",
textdec : "text-decoration",
textdecc : "text-decoration-color",
textdecline : "text-decoration-line",
textdecstyle : "text-decoration-style",
textind : "text-indent",
textjust : "text-justify",
textori : "text-orientation",
textoverf : "text-overflow",
textshad : "text-shadow",
texttrans : "text-transform",
textunderlinepos : "text-underline-position",
top : "top",
trans : "transform",
transori : "transform-origin",
transstyle : "transform-style",
transi : "transition",
transidel : "transition-delay",
transidur : "transition-duration",
transprop : "transition-property",
transtimfunc : "transition-timing-function",
unicodebidi : "unicode-bidi",
userselect : "user-select",
vertalign : "vertical-align",
vis : "visibility",
whitespace : "white-space",
widows : "widows",
w : "width",
wbreak : "word-break",
wspacing : "word-spacing",
wwrap : "word-wrap",
wmode : "writing-mode",
zindex : "z-index"

License

MIT