Merge pull request #84 from posthtml/feat/esm

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2023
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "quotes": [2, "single"],
+    "linebreak-style": [2, "unix"],
+    "camelcase": [2, {"properties": "always"}],
+    "brace-style": [2, "1tbs", {"allowSingleLine": true}]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": false
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
+}

.github/workflows/nodejs.yml

@@ -7,23 +7,22 @@ on:
   push:
     branches: [master]
   pull_request:
-    branches: [master]
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14, 16, 18]
+        node-version: [18, 20]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm install
+      - run: npm ci
       - run: npm test
         env:
           CI: true

readme.md → README.md

@@ -29,15 +29,15 @@ It gets even worse when you need to target _specific versions_:
 
 This PostHTML plugin simplifies the way you write Outlook conditional comments:
 
-```html
+```xml
 <outlook>
   <div>Show this in all Outlook versions</div>
 </outlook>
 ```
 
 Like, really simple:
 
-```html
+```xml
 <outlook gt="2003" lte="2013">
   <div>Show in 2007, 2010, 2013</div>
 </outlook>
@@ -52,8 +52,9 @@ $ npm i posthtml-mso
 ## Usage
 
 ```js
-const posthtml = require('posthtml')
-const mso = require('posthtml-mso')
+import posthtml from 'posthtml'
+import mso from 'posthtml-mso'
+
 const options = { /* see options below */ }
 
 posthtml([mso(options)])
@@ -78,7 +79,7 @@ The conditional is created based on the Outlook version(s) you need to target, w
 
 Using the tag with no attributes will target all Outlook versions:
 
-```html
+```xml
 <outlook>
   <div>Show this in all Outlook versions</div>
 </outlook>
@@ -96,7 +97,7 @@ Result:
 
 This tag will basically hide content from all Outlook versions:
 
-```html
+```xml
 <not-outlook>
   <div>All Outlooks will ignore this</div>
 </not-outlook>
@@ -125,7 +126,7 @@ To define which Outlook versions you are targeting, you can use one of the follo
 
 Show the content only in this Outlook version:
 
-```html
+```xml
 <outlook only="2013">
   <div>Show only in Outlook 2013</div>
 </outlook>
@@ -141,7 +142,7 @@ Result:
 
 It also supports multiple, comma-separated versions:
 
-```html
+```xml
 <outlook only="2013,2016">
   <div>Show only in Outlook 2013 and 2016</div>
 </outlook>
@@ -161,7 +162,7 @@ Note: targeting Outlook 2016 will also target Outlook 2019 (see [gotchas](#gotch
 
 Show content in all Outlook versions except the ones specified.
 
-```html
+```xml
 <outlook not="2013">
   <div>Don't show in Outlook 2013</div>
 </outlook>
@@ -177,7 +178,7 @@ Result:
 
 You can also specify a comma-separated list of versions:
 
-```html
+```xml
 <outlook not="2013,2016">
   <div>Don't show in Outlook 2013 and 2016</div>
 </outlook>
@@ -195,7 +196,7 @@ Result:
 
 Show in all versions before this one, excluding it:
 
-```html
+```xml
 <outlook lt="2007">
   <div>Show in all Outlooks before 2007, excluding it</div>
 </outlook>
@@ -213,7 +214,7 @@ Result:
 
 Show in all versions before this one, including it:
 
-```html
+```xml
 <outlook lte="2007">
   <div>Show in all Outlooks before 2007, including it</div>
 </outlook>
@@ -231,7 +232,7 @@ Result:
 
 Show in all Outlook versions after this one, excluding it:
 
-```html
+```xml
 <outlook gt="2007">
   <div>Show in Outlook 2010, 2013, 2016, 2019</div>
 </outlook>
@@ -249,7 +250,7 @@ Result:
 
 Show in all Outlook versions after this one, excluding it:
 
-```html
+```xml
 <outlook gte="2007">
   <div>Show in Outlook 2007, 2010, 2013, 2016, 2019</div>
 </outlook>
@@ -267,7 +268,7 @@ Result:
 
 You can combine the `lt`, `gt`, `lte`, and `gte` attributes if you need to target multiple versions with higher accuracy.
 
-```html
+```xml
 <outlook gt="2003" lte="2013">
   <div>Show in 2007, 2010, 2013</div>
 </outlook>
@@ -295,7 +296,7 @@ Because of this, if you target either of them you will be targeting them both. C
 
 Consider this example:
 
-```html
+```xml
 <outlook gt="2003" lte="2013" gt="2007">
   <div>Show in 2007, 2010, 2013</div>
 </outlook>
@@ -315,7 +316,7 @@ The result will be:
 
 Made a typo like this?
 
-```html
+```xml
 <outlook lt="20007">
   <div>Target Outlooks before 2007</div>
 </outlook>
@@ -341,8 +342,9 @@ The name of the tag you want the plugin to use. Will be used for both available
 For example:
 
 ```js
-const posthtml = require('posthtml')
-const mso = require('posthtml-mso')
+import posthtml from 'posthtml'
+import mso from 'posthtml-mso'
+
 const html = `
   <mso only="2013">Show in Outlook 2013</mso>
   <not-mso>Hide from Outlook</not-mso>

lib/index.d.ts

@@ -0,0 +1,29 @@
+export type PluginOptions = {
+  /**
+  The name of the tag for the plugin to use.
+
+  @default 'outlook'
+
+  @example
+  ```js
+  import posthtml from 'posthtml'
+  import posthtmlMso from 'posthtml-mso'
+
+  const html = `
+    <mso only="2013">Show in Outlook 2013</mso>
+    <not-mso>Hide from Outlook</not-mso>
+  `
+
+  posthtml([
+    posthtmlMso({tag: 'mso'})
+  ])
+    .process(html)
+    .then(result => console.log(result.html))
+
+  // Result:
+  // <!--[if mso 15]>Show in Outlook 2013<![endif]-->
+  // <!--[if !mso]><!-->Hide from Outlook<!--<![endif]-->
+  ```
+  */
+  tag?: string;
+};

lib/index.js

@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = (options = {}) => tree => {
+const plugin = (options = {}) => tree => {
   options.tag = options.tag || 'outlook'
 
   const attributes = ['only', 'not', 'lt', 'lte', 'gt', 'gte']
@@ -24,7 +22,7 @@ module.exports = (options = {}) => tree => {
       return node
     }
 
-    // Uknown tag, skip and return content
+    // Unknown tag, skip and return content
     if (node.tag !== options.tag) {
       return node
     }
@@ -149,3 +147,5 @@ const arraysMatch = (first, second) => {
 
   return true
 }
+
+export default plugin