New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
postcss-class-apply
Advanced tools
postcss-class-apply - npm Package Compare versions
Comparing version 3.5.0 to 4.0.0
| # postcss-class-apply change Log | ||
| ## [4.0.0] - 2021-11-27 | ||
| ### Changed | ||
| * remove bug for nested selector | ||
| ## [1.0.0] - 2021-11-26 | ||
@@ -4,0 +10,0 @@ |
| const { name } = require("../package.json"); | ||
| function getDeclarationsForSelector(selector, css) { | ||
| const decls = [] | ||
| css.walkRules(rule => { | ||
| let ruleHasSelector = rule.selectors.some(ruleSelector => { | ||
| return ruleSelector === selector | ||
| }) | ||
| if (ruleHasSelector) { | ||
| rule.walkDecls(decl => { | ||
| decls.push(decl) | ||
| }) | ||
| } | ||
| }) | ||
| return decls | ||
| } | ||
| module.exports = (opts = {}) => { | ||
| function plugin(opts = {}) { | ||
| return { | ||
| postcssPlugin: name, | ||
| Once(root) { | ||
| let appliedClasses = new Set(); | ||
| let applies = new Set(); | ||
| root.walkRules(function(rule) { | ||
| for (let node of rule.nodes) { | ||
| if (node.type === "atrule") { | ||
| appliedClasses.add(node.parent.selector); | ||
| let g = node.params.split(" "); | ||
| g.forEach(cls => { | ||
| applies.add(cls); | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| // find class css that using @apply | ||
| let applyClassesCss = new Map; | ||
| root.walkDecls(function(decls) { | ||
| let selector = decls.parent.selector; | ||
| if (applies.has(selector.slice(1))) { | ||
| applyClassesCss.set(decls.prop, decls.value); | ||
| } | ||
| }); | ||
| // remove @apply custom attribute add class css that applied. | ||
| root.walkRules(function(rule) { | ||
| let e = appliedClasses.has(rule.selector); | ||
| if (e) { | ||
| for (const applyCss of applyClassesCss) { | ||
| rule.append({ prop: applyCss[0], value: applyCss[1] }); | ||
| } | ||
| root.walkAtRules("apply", (rule)=>{ | ||
| // find all @applies classes... | ||
| let classes = rule.params.toString().replace(/\s/g, ' ').split(' ') | ||
| classes.forEach(selector=>{ | ||
| for (let n of rule.nodes) { | ||
| if (n.name === "apply") { | ||
| n.remove(); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| // get all array of Declarations for @apply selector | ||
| const decls = getDeclarationsForSelector(`.${selector}`, rule.root()) | ||
| decls.forEach(decl => { | ||
| rule.parent.append({ | ||
| prop: decl.prop, | ||
| value: decl.value | ||
| }) | ||
| }) | ||
| }) | ||
| // remove all @apply rule | ||
| rule.remove() | ||
| }) | ||
| } | ||
| }; | ||
| }; | ||
| } | ||
| } | ||
| module.exports = plugin | ||
| module.exports.postcss = true; |
| { | ||
| "name": "postcss-class-apply", | ||
| "version": "3.5.0", | ||
| "description": "PostCSS plugin enabling custom class sets references", | ||
| "version": "4.0.0", | ||
| "description": "PostCSS plugin enabling custom class sets like tailwind css", | ||
| "keywords": [ | ||
@@ -6,0 +6,0 @@ "css", |
@@ -65,2 +65,18 @@ # postcss-class-apply | ||
| } | ||
| .btn-reset { | ||
| outline: none; | ||
| border: 1px solid; | ||
| } | ||
| .btn-primary { | ||
| border-color: #204486; | ||
| background: #3d82ff; | ||
| } | ||
| .button { | ||
| margin: 3px 8px; | ||
| @apply btn-primary; | ||
| } | ||
| ``` | ||
@@ -70,2 +86,7 @@ | ||
| /* output */ | ||
| .reset { | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style: none; | ||
| } | ||
@@ -77,2 +98,21 @@ .list_item { | ||
| } | ||
| .btn-reset { | ||
| outline: none; | ||
| border: 1px solid; | ||
| } | ||
| .btn-primary { | ||
| border-color: #204486; | ||
| background: #3d82ff; | ||
| } | ||
| .button { | ||
| margin: 3px 8px; | ||
| border-color: #204486; | ||
| background: #3d82ff; | ||
| outline: none; | ||
| border: 1px solid; | ||
| } | ||
| ``` | ||
@@ -79,0 +119,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by4.76%
6904
- Number of lines in readme file
- increased by35.4%
153
Worsened metrics
- Lines of code
- decreased by-9.3%
39
No dependency changes