@filbert-js/css-parser
Advanced tools
Comparing version
@@ -1,1 +0,1 @@ | ||
import{CLOSE_BRACKET as e,OPEN_BRACKET as r,RULE_END as t,RULE_SEPARATOR as n,toAST as o}from"@filbert-js/css-ast";var c=/@media/,s=/&:/;function a(a,u){var i="."+u;return function o(a){var u=a.node,i=a.selector,l=a.scope;return(function(o,c){var s=u.rules.reduce(function(e,r){return""+e+r.name+n+r.value+t},"");return""+c+r+s+e}(0,i)+" "+u.children.map(function(t){if(c.test(t.raw_selector)){var n=o({node:t,selector:i,scope:l});return""+t.raw_selector+r+n+e}var a=t.raw_selector.split(",").map(function(e){return s.test(e)?e.replace(/&/g,l):e.includes("&")?e.replace(/&/g,l):i+" "+e}).join(",");return o({node:t,selector:a,scope:l})}).join(" ")).trim()}({node:o(a),selector:i,scope:i})}export{a as cssParser}; | ||
import{CLOSE_BRACKET as e,OPEN_BRACKET as r,RULE_END as n,RULE_SEPARATOR as t,toAST as c}from"@filbert-js/css-ast";var o=/@media/,i=/&:/,s={prefix:function(e,r){return""+e+t+r+n}},u=function(n){return function(t){var u=t.namespace,a=c(t.css),l=Object.assign({},s,n).prefix;return function n(t){var c=t.node,s=t.selector;return(function(n,t){var o=c.rules.reduce(function(e,r){return""+e+l(r.name,r.value)},"");return""+t+r+o+e}(0,s)+" "+c.children.map(function(t){if(o.test(t.raw_selector)){var c=n({node:t,selector:s});return""+t.raw_selector+r+c+e}var a=t.raw_selector.split(",");return n({node:t,selector:a.map(function(e){return i.test(e)?e.replace(/&/g,u):e.includes("&")?e.replace(/&/g,u):s+" "+e}).join(",")})}).join(" ")).trim()}({node:a,selector:u})}};export{u as createParser}; |
@@ -1,1 +0,1 @@ | ||
var e=require("@filbert-js/css-ast"),r=/@media/,t=/&:/;exports.cssParser=function(n,o){var c="."+o;return function n(o){var c=o.node,s=o.selector,a=o.scope;return(function(r,t){var n=c.rules.reduce(function(r,t){return""+r+t.name+e.RULE_SEPARATOR+t.value+e.RULE_END},"");return""+t+e.OPEN_BRACKET+n+e.CLOSE_BRACKET}(0,s)+" "+c.children.map(function(o){if(r.test(o.raw_selector)){var c=n({node:o,selector:s,scope:a});return""+o.raw_selector+e.OPEN_BRACKET+c+e.CLOSE_BRACKET}var u=o.raw_selector.split(",").map(function(e){return t.test(e)?e.replace(/&/g,a):e.includes("&")?e.replace(/&/g,a):s+" "+e}).join(",");return n({node:o,selector:u,scope:a})}).join(" ")).trim()}({node:e.toAST(n),selector:c,scope:c})}; | ||
var e=require("@filbert-js/css-ast"),r=/@media/,n=/&:/,t={prefix:function(r,n){return""+r+e.RULE_SEPARATOR+n+e.RULE_END}};exports.createParser=function(c){return function(o){var s=o.namespace,a=e.toAST(o.css),u=Object.assign({},t,c).prefix;return function t(c){var o=c.node,a=c.selector;return(function(r,n){var t=o.rules.reduce(function(e,r){return""+e+u(r.name,r.value)},"");return""+n+e.OPEN_BRACKET+t+e.CLOSE_BRACKET}(0,a)+" "+o.children.map(function(c){if(r.test(c.raw_selector)){var o=t({node:c,selector:a});return""+c.raw_selector+e.OPEN_BRACKET+o+e.CLOSE_BRACKET}var u=c.raw_selector.split(",");return t({node:c,selector:u.map(function(e){return n.test(e)?e.replace(/&/g,s):e.includes("&")?e.replace(/&/g,s):a+" "+e}).join(",")})}).join(" ")).trim()}({node:a,selector:s})}}; |
@@ -1,1 +0,1 @@ | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@filbert-js/css-ast")):"function"==typeof define&&define.amd?define(["exports","@filbert-js/css-ast"],r):r(e.cssParser={},e.cssAst)}(this,function(e,r){var t=/@media/,n=/&:/;e.cssParser=function(e,s){var o="."+s;return function e(s){var o=s.node,c=s.selector,i=s.scope;return(function(e,t){var n=o.rules.reduce(function(e,t){return""+e+t.name+r.RULE_SEPARATOR+t.value+r.RULE_END},"");return""+t+r.OPEN_BRACKET+n+r.CLOSE_BRACKET}(0,c)+" "+o.children.map(function(s){if(t.test(s.raw_selector)){var o=e({node:s,selector:c,scope:i});return""+s.raw_selector+r.OPEN_BRACKET+o+r.CLOSE_BRACKET}var u=s.raw_selector.split(",").map(function(e){return n.test(e)?e.replace(/&/g,i):e.includes("&")?e.replace(/&/g,i):c+" "+e}).join(",");return e({node:s,selector:u,scope:i})}).join(" ")).trim()}({node:r.toAST(e),selector:o,scope:o})}}); | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@filbert-js/css-ast")):"function"==typeof define&&define.amd?define(["exports","@filbert-js/css-ast"],r):r(e.cssParser={},e.cssAst)}(this,function(e,r){var t=/@media/,n=/&:/,s={prefix:function(e,t){return""+e+r.RULE_SEPARATOR+t+r.RULE_END}};e.createParser=function(e){return function(o){var c=o.namespace,i=r.toAST(o.css),u=Object.assign({},s,e).prefix;return function e(s){var o=s.node,i=s.selector;return(function(e,t){var n=o.rules.reduce(function(e,r){return""+e+u(r.name,r.value)},"");return""+t+r.OPEN_BRACKET+n+r.CLOSE_BRACKET}(0,i)+" "+o.children.map(function(s){if(t.test(s.raw_selector)){var o=e({node:s,selector:i});return""+s.raw_selector+r.OPEN_BRACKET+o+r.CLOSE_BRACKET}var u=s.raw_selector.split(",");return e({node:s,selector:u.map(function(e){return n.test(e)?e.replace(/&/g,c):e.includes("&")?e.replace(/&/g,c):i+" "+e}).join(",")})}).join(" ")).trim()}({node:i,selector:c})}}}); |
94
index.js
@@ -11,50 +11,52 @@ import { | ||
const isPseudoSelector = /&:/; | ||
export function cssParser(raw, hash) { | ||
const root = toAST(raw); | ||
const scope = `.${hash}`; | ||
function prefix(name, value) { | ||
return `${name}${RULE_SEPARATOR}${value}${RULE_END}`; | ||
} | ||
const _opt = { prefix }; | ||
export const createParser = (options) => ({ css, namespace }) => { | ||
const root = toAST(css); | ||
const { prefix } = Object.assign({}, _opt, options); | ||
function nodeToStyleBlock({ node, selector }) { | ||
// build style string for rules | ||
const ruleBlock = rulesToStyleBlock(node.rules, selector); | ||
// process children | ||
const childrenBlock = node.children | ||
.map((child) => { | ||
// TODO: add support for @import,@font-face | ||
if (isMediaQuery.test(child.raw_selector)) { | ||
// handle media query | ||
const block = nodeToStyleBlock({ node: child, selector }); | ||
return `${child.raw_selector}${OPEN_BRACKET}${block}${CLOSE_BRACKET}`; | ||
} | ||
const selectors = child.raw_selector.split(','); | ||
const _selectors = selectors | ||
.map((s) => { | ||
if (isPseudoSelector.test(s)) { | ||
// handle pseudo selectors | ||
return s.replace(/&/g, namespace); | ||
} else if (s.includes('&')) { | ||
// a case of nested selector(self ref) e.g header & {...} -> header <class-name> {...} | ||
return s.replace(/&/g, namespace); | ||
} else { | ||
// namespace the child selector with self e.g p {...} -> <class-name> p {...} | ||
return `${selector} ${s}`; | ||
} | ||
}) | ||
.join(','); | ||
return nodeToStyleBlock({ node: child, selector: _selectors }); | ||
}) | ||
.join(' '); | ||
return `${ruleBlock} ${childrenBlock}`.trim(); | ||
} | ||
function rulesToStyleBlock(rules, selector) { | ||
const rulesSTR = rules.reduce((agg, rule) => { | ||
return `${agg}${prefix(rule.name, rule.value)}`; | ||
}, ''); | ||
const selectorBlock = `${selector}${OPEN_BRACKET}${rulesSTR}${CLOSE_BRACKET}`; | ||
return selectorBlock; | ||
} | ||
return nodeToStyleBlock({ | ||
node: root, | ||
selector: scope, | ||
scope, | ||
selector: namespace, | ||
}); | ||
} | ||
function nodeToStyleBlock({ node, selector, scope }) { | ||
// build style string for rules | ||
const ruleBlock = rulesToStyleBlock(node.rules, selector); | ||
// process children | ||
const childrenBlock = node.children | ||
.map((child) => { | ||
// TODO: add support for @import,@font-face | ||
if (isMediaQuery.test(child.raw_selector)) { | ||
// handle media query | ||
const block = nodeToStyleBlock({ node: child, selector, scope }); | ||
return `${child.raw_selector}${OPEN_BRACKET}${block}${CLOSE_BRACKET}`; | ||
} | ||
const selectors = child.raw_selector.split(','); | ||
const _selectors = selectors | ||
.map((s) => { | ||
if (isPseudoSelector.test(s)) { | ||
// handle pseudo selectors | ||
return s.replace(/&/g, scope); | ||
} else if (s.includes('&')) { | ||
// a case of nested selector(self ref) e.g header & {...} -> header <class-name> {...} | ||
return s.replace(/&/g, scope); | ||
} else { | ||
// scope the child selector with self e.g p {...} -> <class-name> p {...} | ||
return `${selector} ${s}`; | ||
} | ||
}) | ||
.join(','); | ||
return nodeToStyleBlock({ node: child, selector: _selectors, scope }); | ||
}) | ||
.join(' '); | ||
return `${ruleBlock} ${childrenBlock}`.trim(); | ||
} | ||
function rulesToStyleBlock(rules, selector) { | ||
const rulesSTR = rules.reduce((agg, rule) => { | ||
return `${agg}${rule.name}${RULE_SEPARATOR}${rule.value}${RULE_END}`; | ||
}, ''); | ||
const selectorBlock = `${selector}${OPEN_BRACKET}${rulesSTR}${CLOSE_BRACKET}`; | ||
return selectorBlock; | ||
} | ||
}; |
{ | ||
"name": "@filbert-js/css-parser", | ||
"version": "0.0.3", | ||
"version": "0.0.4", | ||
"repository": "https://github.com/kuldeepkeshwar/filbert-js", | ||
@@ -19,3 +19,3 @@ "description": "", | ||
"dependencies": { | ||
"@filbert-js/css-ast": "^0.0.3" | ||
"@filbert-js/css-ast": "^0.0.4" | ||
}, | ||
@@ -47,3 +47,3 @@ "peerDependencies": { | ||
"license": "MIT", | ||
"gitHead": "76110724bdd2fa81e43913b5666987ad126d9c23" | ||
"gitHead": "0475074a4c4d6348c5126940e345fdc0c29728de" | ||
} |
16052
191.06%9
50%70
4.48%+ Added
- Removed
Updated