rehype-class-names
Advanced tools
rehype-class-names - npm Package Compare versions
Comparing version 1.0.12 to 1.0.13
@@ -1,3 +0,6 @@ | ||
| import { Node, Properties } from "hast-util-select/lib/types.js"; | ||
| declare const _default: (additions: Properties) => (node: Node) => void; | ||
| import { Nodes } from 'hast'; | ||
| interface IncomingProperties { | ||
| [ElementName: string]: string; | ||
| } | ||
| declare const _default: (additions: IncomingProperties) => (node: Nodes) => void; | ||
| export default _default; |
| import { selectAll } from "hast-util-select"; | ||
| import { classnames } from 'hast-util-classnames'; | ||
| export default (additions) => { | ||
@@ -7,8 +8,5 @@ const adders = Object.entries(additions).map((property) => adder(property)); | ||
| const adder = ([selector, cName]) => { | ||
| return (node) => selectAll(selector, node).forEach((elem) => { | ||
| if (!elem?.properties?.className) | ||
| elem.properties = { ...elem.properties, className: cName }; | ||
| else | ||
| elem.properties.className += ` ${cName}`; | ||
| return (nodes) => selectAll(selector, nodes).forEach((elem) => { | ||
| classnames(elem, cName); | ||
| }); | ||
| }; |
| { | ||
| "name": "rehype-class-names", | ||
| "version": "1.0.12", | ||
| "version": "1.0.13", | ||
| "description": "A utility plugin to use with rehype that adds class names to HAST (html tree)", | ||
@@ -33,3 +33,5 @@ "main": "index.js", | ||
| "dependencies": { | ||
| "hast-util-select": "^5.0.5" | ||
| "@types/hast": "^3.0.0", | ||
| "hast-util-classnames": "^3.0.0", | ||
| "hast-util-select": "^6.0.0" | ||
| }, | ||
@@ -36,0 +38,0 @@ "devDependencies": { |
| # Rehype Class Names | ||
| Adding classes to elements with rehype. All credit goes to [rehype-add-classes](https://github.com/martypdx/rehype-add-classes) but with fixed dependencies, added typescript support, plus I wanted to make an npm package :shrug:. | ||
| Adding classes to elements with rehype. Includes typescript support | ||
@@ -11,46 +11,2 @@ ## Installation | ||
| ## Usage | ||
| Example of changing markdown to html with classes | ||
| ``` | ||
| import { unified } from "unified"; | ||
| import remarkParse from "remark-parse"; | ||
| import remarkRehype from "remark-rehype"; | ||
| import rehypeDocument from "rehype-document"; | ||
| import rehypeFormat from "rehype-format"; | ||
| import rehypeStringify from "rehype-stringify"; | ||
| const markDown = ` | ||
| # header | ||
| ## sub 1 | ||
| ### sub 2 | ||
| Profile pictures are important. | ||
| ` | ||
| const processedContent = await unified() | ||
| .use(remarkParse) | ||
| .use(remarkRehype) | ||
| .use(rehypeDocument) | ||
| .use(rehypeFormat) | ||
| .use(rehypeStringify) | ||
| .use(addClasses, { | ||
| 'h1,h2,h3': 'title', | ||
| h1: 'is-1', | ||
| h2: 'is-2', | ||
| p: 'one two' | ||
| }) | ||
| .process(matterResult.content); | ||
| ``` | ||
| This will output | ||
| ``` | ||
| <h1 class="title is-1">header</h1> | ||
| <h2 class="title is-2">sub 1</h2> | ||
| <h3 class="title">sub 2</h3> | ||
| <p class="one two"></p> | ||
| ``` | ||
| ## API | ||
@@ -61,21 +17,41 @@ | ||
| Add to `rehype` or `unified` pipeline with `.use`, where `additions` is an object | ||
| with keys that are the css selectors and the values are a string to add to | ||
| the `class` of each found node. | ||
| with keys that are the css selectors and the values are the classes you want to add. | ||
| For more information on what keys you can pass, see the [`hast-util-select`](https://github.com/syntax-tree/hast-util-select#support) documentation. | ||
| For more information on what values you can pass, see the [`hast-util-classnames`](https://github.com/syntax-tree/hast-util-classnames#use) documentation. | ||
| Example: | ||
| ```js | ||
| { | ||
| pre: 'hljs', | ||
| .use(addClasses, { | ||
| 'h1,h2,h3': 'title', | ||
| h1: 'is-1', | ||
| h2: 'is-2', | ||
| p: 'one two' | ||
| } | ||
| h3: { 'hello': false, 32: true }, | ||
| h4: 10, | ||
| h5: [], | ||
| p: 'one two', | ||
| a: "test", | ||
| ol: "list-decimal", | ||
| li: ['test', 'mega'], | ||
| }) | ||
| ``` | ||
| - Results are cumulative: `<h1 class="title is-1">` | ||
| - `value` is added to existing classes: `<h2 class="existing title is-2">sub 2</h2>` | ||
| - Whole of string indicated by `value` is added: `<p class="one two">` | ||
| This will output | ||
| This library uses `hast-util-select` under the hood. See [supported selectors](https://github.com/syntax-tree/hast-util-select#support). | ||
| ```html | ||
| <h1 class="title is-1">header</h1> | ||
| <h2 class="title is-2">sub 2</h2> | ||
| <h3 class="title 32">sub 3</h3> | ||
| <h4 class="10">sub 4</h4> | ||
| <h5 class="">Sub 5</h5> | ||
| <p class="one two"> | ||
| Profile pictures are important. | ||
| <a href="riderjensen.com" class="test">Rider Jensen</a> | ||
| </p> | ||
| <ol class="list-decimal"> | ||
| <li class="test mega">Create a Github repository</li> | ||
| <li class="test mega">Pushed up code</li> | ||
| <li class="test mega">Connect account to Github</li> | ||
| </ol> | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by6.25%
17
Worsened metrics
- Total package byte prevSize
- decreased by-11.62%
3316
- Dependency count
- increased by200%
3
- Number of lines in readme file
- decreased by-31.25%
55
Dependency changes
+ Added@types/hast@^3.0.0
+ Addedhast-util-classnames@^3.0.0
+ Added@types/hast@3.0.4(transitive)
+ Added@types/unist@3.0.3(transitive)
+ Addedcss-selector-parser@3.0.5(transitive)
+ Addeddequal@2.0.3(transitive)
+ Addeddevlop@1.1.0(transitive)
+ Addedhast-util-classnames@3.0.0(transitive)
+ Addedhast-util-has-property@3.0.0(transitive)
+ Addedhast-util-select@6.0.3(transitive)
+ Addedhast-util-to-string@3.0.1(transitive)
+ Addedhast-util-whitespace@3.0.0(transitive)
+ Addedunist-util-is@6.0.0(transitive)
+ Addedunist-util-visit@5.0.0(transitive)
+ Addedunist-util-visit-parents@6.0.1(transitive)
- Removed@types/hast@2.3.10(transitive)
- Removed@types/unist@2.0.11(transitive)
- Removedcss-selector-parser@1.4.1(transitive)
- Removedhast-util-has-property@2.0.1(transitive)
- Removedhast-util-select@5.0.5(transitive)
- Removedhast-util-to-string@2.0.0(transitive)
- Removedhast-util-whitespace@2.0.1(transitive)
- Removednot@0.1.0(transitive)
- Removedunist-util-is@5.2.1(transitive)
- Removedunist-util-visit@4.1.2(transitive)
- Removedunist-util-visit-parents@5.1.3(transitive)
Updatedhast-util-select@^6.0.0