@platformos/prettier-plugin-liquid 0.0.2

package/README.md

@@ -0,0 +1,158 @@
+<h1 align="center" style="position: relative;" >
+  <br>
+    <img src="https://github.com/Platform-OS/platformos-tools/blob/main/packages/vscode-extension/images/platformos_logo.png?raw=true" alt="platformOS logo" width="200">
+  <br>
+  platformOS Liquid Prettier Plugin
+</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@platformos/prettier-plugin-liquid"><img src="https://img.shields.io/npm/v/@platformos/prettier-plugin-liquid.svg?sanitize=true" alt="Version"></a>
+  <a href="https://github.com/Platform-OS/platformos-tools/blob/main/LICENSE.md"><img src="https://img.shields.io/npm/l/@platformos/prettier-plugin-liquid.svg?sanitize=true" alt="License"></a>
+  <a href="https://github.com/Platform-OS/platformos-tools/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/Platform-OS/platformos-tools/actions/workflows/ci.yml/badge.svg"></a>
+  <!--
+    <a href="https://npmcharts.com/compare/@platformos/prettier-plugin-liquid?minimal=true"><img src="https://img.shields.io/npm/dm/@platformos/prettier-plugin-liquid.svg?sanitize=true" alt="Downloads"></a>
+  -->
+</p>
+
+<div align="center">
+
+💬 [Discussions](https://github.com/Platform-OS/platformos-tools/discussions) | 📝 [Changelog](./CHANGELOG.md)
+
+</div>
+
+[Prettier](https://prettier.io) is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
+
+![demo](https://github.com/Platform-OS/platformos-tools/blob/main/docs/demo.gif?raw=true)
+
+## Can this be used in production?
+
+Yes!
+
+## Installation
+
+```bash
+# with npm
+npm install --save-dev prettier @platformos/prettier-plugin-liquid
+
+# with yarn
+yarn add --dev prettier @platformos/prettier-plugin-liquid
+```
+
+For Prettier version 3 and above, the plugin must also be declared in the [configuration](https://prettier.io/docs/en/configuration.html).
+
+```
+{
+  "plugins": ["@platformos/prettier-plugin-liquid"]
+}
+```
+
+## Usage
+
+See our [Wiki](https://github.com/Platform-OS/platformos-tools/wiki) pages on the subject:
+
+- [In the terminal](https://github.com/Platform-OS/platformos-tools/wiki/Use-it-in-your-terminal) (with Node.js)
+- [In the browser](https://github.com/Platform-OS/platformos-tools/wiki/Use-it-in-the-browser)
+- [In your editor](https://github.com/Platform-OS/platformos-tools/wiki/Use-it-in-your-editor)
+- [In a CI workflow](https://github.com/Platform-OS/platformos-tools/wiki/Use-it-in-CI)
+- [As a pre-commit hook](https://github.com/Platform-OS/platformos-tools/wiki/Use-it-as-a-pre-commit-hook)
+- [With a bundler](https://github.com/Platform-OS/platformos-tools/wiki/Use-it-with-a-bundler)
+
+## Playground
+
+You can try it out in your browser in the [playground](https://shopify.github.io/prettier-plugin-liquid/).
+
+## Configuration
+
+Prettier for Liquid supports the following options.
+
+| Name                           | Default  | Description                                                                                                                                                      |
+| ------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `printWidth`                   | `120`    | Changed from Prettier's default (`80`) ([see prettier docs](https://prettier.io/docs/en/options.html#print-width))                                               |
+| `tabWidth`                     | `2`      | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tab-width))                                                                    |
+| `useTabs`                      | `false`  | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tabs))                                                                         |
+| `singleQuote`                  | `false`  | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#quotes))                                                                       |
+| `bracketSameLine`              | `false`  | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#bracket-line))                                                                 |
+| `liquidSingleQuote`            | `true`   | Use single quotes instead of double quotes in Liquid tag and objects (since v0.2.0).                                                                             |
+| `embeddedSingleQuote`          | `true`   | Use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside `<script>`, `<style>` or Liquid equivalent) (since v0.4.0). |
+| `htmlWhitespaceSensitivity`    | `css`    | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity))                                                  |
+| `captureWhitespaceSensitivity` | `strict` | Specify the default whitespace sensitivity of the `capture` Liquid tag. Valid options: `"strict"` \| `"ignore"`.                                                 |
+| `singleLineLinkTags`           | `false`  | If set to `true`, will print `<link>` tags on a single line to remove clutter                                                                                    |
+| `indentSchema`                 | `false`  | If set to `true`, will indent the contents of the `{% schema %}` tag                                                                                             |
+
+## Ignoring code
+
+We support the following comments (either via HTML or Liquid comments):
+
+- `prettier-ignore`
+- `prettier-ignore-attribute`
+- `prettier-ignore-attributes` (alias)
+
+They target the next node in the tree. Unparseable code can't be ignored and will throw an error.
+
+```liquid
+{% # prettier-ignore %}
+<div         class="x"       >hello world</div            >
+
+{% # prettier-ignore-attributes %}
+<div
+  [[#if Condition]]
+    class="a b c"
+  [[/if ]]
+></div>
+```
+
+## Whitespace handling
+
+You'll quickly notice that the default value for `--htmlWhitespaceSensitivity` is set to `css` (like [Prettier's](https://prettier.io/blog/2018/11/07/1.15.0#whitespace-sensitive-formatting)).
+
+If you want to change this behaviour for a specific tag that has a different default, you can use either the `display` or `white-space` comment to alter the behaviour.
+
+Examples:
+
+```liquid
+{% # this tag is whitespace sensitive by default, since the value of the string shouldn't change by formatting. %}
+{% capture value %}
+  Hello {% name %}
+{% endcapture %}
+
+{% # here we alter its white-space property so that we allow pretty printing of its body %}
+{% # white-space: normal %}
+{% capture _ %}
+  <div>
+    {% render 'snip' %}
+  </div>
+{% endcapture %}
+
+{% # this will prevent prettier from formatting it %}
+{% # white-space: pre %}
+{% capture _ %}
+  <div>
+    {% render 'snip' %}
+  </div>
+{% endcapture %}
+
+{% # a span is normally sensitive to whitespace on both ends %}
+<span
+  ><b
+    >hi</b
+  ></span
+>
+
+{% # with display: block, it isn't %}
+{% # display: block %}
+<span>
+  <b>hi</b>
+</span>
+```
+
+## Known issues
+
+Take a look at our [known issues](./KNOWN_ISSUES.md) and [open issues](https://github.com/Platform-OS/platformos-tools/issues).
+
+## Contributing
+
+[Read our contributing guide](CONTRIBUTING.md)
+
+## License
+
+MIT.

package/ThirdPartyNotices.txt

@@ -0,0 +1,17 @@
+THIRD-PARTY SOFTWARE NOTICES AND INFORMATION
+
+The latest prettier plugin for Liquid incorporates third party material from the projects listed below. The original copyright notice and the license under which Shopify received such third party material are set forth below. Shopify reserves all other rights not expressly granted, whether by implication, estoppel or otherwise.
+
+1.	prettier (https://github.com/prettier/prettier)
+
+%% prettier NOTICES, INFORMATION, AND LICENSE BEGIN HERE
+=========================================
+Copyright © James Long and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+=========================================
+END OF prettier NOTICES, INFORMATION, AND LICENSE

package/dist/constants.evaluate.d.ts

@@ -0,0 +1,7 @@
+export declare const CSS_DISPLAY_TAGS: Record<string, string>;
+export declare const CSS_DISPLAY_LIQUID_TAGS: Record<string, string>;
+export declare const CSS_DISPLAY_LIQUID_DEFAULT = "inline";
+export declare const CSS_DISPLAY_DEFAULT = "inline";
+export declare const CSS_WHITE_SPACE_TAGS: Record<string, string>;
+export declare const CSS_WHITE_SPACE_DEFAULT = "normal";
+export declare const CSS_WHITE_SPACE_LIQUID_TAGS: Record<string, string>;

package/dist/constants.evaluate.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSS_WHITE_SPACE_LIQUID_TAGS = exports.CSS_WHITE_SPACE_DEFAULT = exports.CSS_WHITE_SPACE_TAGS = exports.CSS_DISPLAY_DEFAULT = exports.CSS_DISPLAY_LIQUID_DEFAULT = exports.CSS_DISPLAY_LIQUID_TAGS = exports.CSS_DISPLAY_TAGS = void 0;
+// This code is adapted from prettier/src/language-html/constants.evaluate.js
+const htmlStyles = require('html-styles');
+const getCssStyleTags = (property) => Object.fromEntries(htmlStyles
+    .filter((htmlStyle) => htmlStyle.style[property])
+    .flatMap((htmlStyle) => htmlStyle.selectorText
+    .split(',')
+    .map((selector) => selector.trim())
+    .filter((selector) => /^[\dA-Za-z]+$/.test(selector))
+    .map((tagName) => [tagName, htmlStyle.style[property]])));
+exports.CSS_DISPLAY_TAGS = {
+    ...getCssStyleTags('display'),
+    // TODO: send PR to upstream
+    button: 'inline-block',
+    // special cases for some css display=none elements
+    template: 'inline',
+    source: 'block',
+    track: 'block',
+    script: 'block',
+    param: 'block',
+    // `noscript` is inline
+    // noscript: "inline",
+    // there's no css display for these elements but they behave these ways
+    details: 'block',
+    summary: 'block',
+    dialog: 'block',
+    meter: 'inline-block',
+    progress: 'inline-block',
+    object: 'inline-block',
+    video: 'inline-block',
+    audio: 'inline-block',
+    select: 'inline-block',
+    option: 'block',
+    optgroup: 'block',
+};
+exports.CSS_DISPLAY_LIQUID_TAGS = {
+    // control flow tags
+    if: 'inline',
+    unless: 'inline',
+    else: 'inline',
+    elsif: 'inline',
+    case: 'inline',
+    when: 'inline',
+    // iteration tags,
+    for: 'inline',
+    cycle: 'inline',
+    tablerow: 'block',
+    break: 'none',
+    continue: 'none',
+    // theme tags
+    comment: 'none',
+    echo: 'inline',
+    form: 'block',
+    layout: 'none',
+    liquid: 'inline',
+    paginate: 'inline',
+    raw: 'inline',
+    render: 'inline',
+    include: 'inline',
+    section: 'block',
+    style: 'none',
+    // variable tags
+    assign: 'none',
+    capture: 'inline',
+    increment: 'inline',
+    decrement: 'inline',
+};
+exports.CSS_DISPLAY_LIQUID_DEFAULT = 'inline';
+exports.CSS_DISPLAY_DEFAULT = 'inline';
+exports.CSS_WHITE_SPACE_TAGS = getCssStyleTags('white-space');
+exports.CSS_WHITE_SPACE_DEFAULT = 'normal';
+exports.CSS_WHITE_SPACE_LIQUID_TAGS = {
+    capture: 'pre',
+    raw: 'pre',
+};
+//# sourceMappingURL=constants.evaluate.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import plugin from './plugin';
+export = plugin;

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+const plugin_1 = __importDefault(require("./plugin"));
+module.exports = plugin_1.default;
+//# sourceMappingURL=index.js.map

package/dist/parser.d.ts

@@ -0,0 +1,19 @@
+import { LiquidHtmlNode } from '@platformos/liquid-html-parser';
+import { locEnd, locStart } from './utils';
+export declare function parse(text: string): LiquidHtmlNode;
+export declare const liquidHtmlAstFormat = "liquid-html-ast";
+export declare const liquidHtmlLanguageName = "liquid-html";
+export declare const liquidHtmlParser: {
+    parse: typeof parse;
+    astFormat: string;
+    locStart: typeof locStart;
+    locEnd: typeof locEnd;
+};
+export declare const parsers: {
+    "liquid-html": {
+        parse: typeof parse;
+        astFormat: string;
+        locStart: typeof locStart;
+        locEnd: typeof locEnd;
+    };
+};

package/dist/parser.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parsers = exports.liquidHtmlParser = exports.liquidHtmlLanguageName = exports.liquidHtmlAstFormat = void 0;
+exports.parse = parse;
+const liquid_html_parser_1 = require("@platformos/liquid-html-parser");
+const utils_1 = require("./utils");
+function parse(text) {
+    return (0, liquid_html_parser_1.toLiquidHtmlAST)(text);
+}
+exports.liquidHtmlAstFormat = 'liquid-html-ast';
+exports.liquidHtmlLanguageName = 'liquid-html';
+exports.liquidHtmlParser = {
+    parse,
+    astFormat: exports.liquidHtmlAstFormat,
+    locStart: utils_1.locStart,
+    locEnd: utils_1.locEnd,
+};
+exports.parsers = {
+    [exports.liquidHtmlLanguageName]: exports.liquidHtmlParser,
+};
+//# sourceMappingURL=parser.js.map

package/dist/plugin.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin as Plugin2 } from 'prettier';
+import type { Plugin as Plugin3 } from 'prettier3';
+import { LiquidHtmlNode } from './types';
+export declare const plugin2: Plugin2<LiquidHtmlNode>;
+export declare const plugin3: Plugin3<LiquidHtmlNode>;
+declare const _default: Plugin2<LiquidHtmlNode> | Plugin3<LiquidHtmlNode>;
+export default _default;

package/dist/plugin.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.plugin3 = exports.plugin2 = void 0;
+const prettier_1 = require("prettier");
+const parser_1 = require("./parser");
+const printer_1 = require("./printer");
+const languages = [
+    {
+        name: 'LiquidHTML',
+        parsers: [parser_1.liquidHtmlLanguageName],
+        extensions: ['.liquid'],
+        vscodeLanguageIds: ['liquid', 'Liquid'],
+    },
+];
+const options = {
+    captureWhitespaceSensitivity: {
+        type: 'choice',
+        description: 'Specify the global whitespace sensitivity for the capture Liquid tag.',
+        choices: [
+            {
+                value: 'strict',
+                description: 'Whitespace inside {% capture var %} tags is considered significant.',
+            },
+            {
+                value: 'ignore',
+                description: 'Whitespace inside {% capture var %} tags is considered insignificant.',
+            },
+        ],
+        category: 'LIQUID',
+        default: 'strict',
+        since: '1.5.0',
+    },
+    liquidSingleQuote: {
+        type: 'boolean',
+        category: 'LIQUID',
+        default: true,
+        description: 'Use single quotes instead of double quotes in Liquid tags and objects.',
+        since: '0.2.0',
+    },
+    embeddedSingleQuote: {
+        type: 'boolean',
+        category: 'LIQUID',
+        default: true,
+        description: 'Use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside <script>, <style> or Liquid equivalent).',
+        since: '0.4.0',
+    },
+    singleLineLinkTags: {
+        type: 'boolean',
+        category: 'HTML',
+        default: false,
+        description: 'Always print link tags on a single line to remove clutter',
+        since: '0.1.0',
+    },
+    indentSchema: {
+        type: 'boolean',
+        category: 'LIQUID',
+        default: false,
+        description: 'Indent the contents of the {% schema %} tag',
+        since: '0.1.0',
+    },
+    liquidDocParamDash: {
+        type: 'boolean',
+        category: 'LIQUID',
+        default: true,
+        description: 'Append a dash (-) to separate descriptions in {% doc %} @param annotations',
+        since: '1.6.4',
+    },
+};
+const defaultOptions = {
+    printWidth: 120,
+};
+exports.plugin2 = {
+    languages,
+    parsers: parser_1.parsers,
+    printers: printer_1.printers2,
+    options,
+    defaultOptions,
+};
+exports.plugin3 = {
+    languages,
+    parsers: parser_1.parsers,
+    printers: printer_1.printers3,
+    options,
+    defaultOptions,
+};
+const prettierMajor = prettier_1.version.split('.')[0];
+exports.default = prettierMajor === '2' ? exports.plugin2 : exports.plugin3;
+//# sourceMappingURL=plugin.js.map

package/dist/printer/embed.d.ts

@@ -0,0 +1,9 @@
+import type { Printer as Printer2 } from 'prettier';
+import type { Printer as Printer3 } from 'prettier3';
+import { RawMarkupKinds } from '@platformos/liquid-html-parser';
+import { LiquidHtmlNode } from '../types';
+export declare const ParserMap: {
+    [key in RawMarkupKinds]: string | null;
+};
+export declare const embed2: Printer2<LiquidHtmlNode>['embed'];
+export declare const embed3: Printer3<LiquidHtmlNode>['embed'];

package/dist/printer/embed.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.embed3 = exports.embed2 = exports.ParserMap = void 0;
+const prettier_1 = require("prettier");
+const liquid_html_parser_1 = require("@platformos/liquid-html-parser");
+const { builders: { dedentToRoot, indent, hardline }, } = prettier_1.doc;
+// null will pass through
+exports.ParserMap = {
+    [liquid_html_parser_1.RawMarkupKinds.css]: 'css',
+    [liquid_html_parser_1.RawMarkupKinds.html]: null,
+    [liquid_html_parser_1.RawMarkupKinds.javascript]: 'babel',
+    [liquid_html_parser_1.RawMarkupKinds.json]: 'json',
+    [liquid_html_parser_1.RawMarkupKinds.markdown]: 'markdown',
+    [liquid_html_parser_1.RawMarkupKinds.typescript]: 'typescript',
+    [liquid_html_parser_1.RawMarkupKinds.text]: null,
+};
+// Prettier 2 and 3 have a slightly different API for embed.
+//
+// https://github.com/prettier/prettier/wiki/How-to-migrate-my-plugin-to-support-Prettier-v3%3F
+const embed2 = (path, _print, textToDoc, options) => {
+    const node = path.getValue();
+    switch (node.type) {
+        case liquid_html_parser_1.NodeTypes.RawMarkup: {
+            const parser = exports.ParserMap[node.kind];
+            if (parser && node.value.trim() !== '') {
+                const body = prettier_1.doc.utils.stripTrailingHardline(textToDoc(node.value, {
+                    ...options,
+                    singleQuote: options.embeddedSingleQuote,
+                    parser,
+                    __embeddedInHtml: true,
+                }));
+                if (shouldIndentBody(node, options)) {
+                    return [indent([hardline, body]), hardline];
+                }
+                else {
+                    return [dedentToRoot([hardline, body]), hardline];
+                }
+            }
+        }
+        default:
+            return null;
+    }
+};
+exports.embed2 = embed2;
+const embed3 = (path, options) => {
+    return (textToDoc) => {
+        const node = path.node;
+        switch (node.type) {
+            case liquid_html_parser_1.NodeTypes.RawMarkup: {
+                const parser = exports.ParserMap[node.kind];
+                if (parser && node.value.trim() !== '') {
+                    return textToDoc(node.value, {
+                        ...options,
+                        singleQuote: options.embeddedSingleQuote,
+                        parser,
+                        __embeddedInHtml: true,
+                    }).then((document) => {
+                        const body = prettier_1.doc.utils.stripTrailingHardline(document);
+                        if (shouldIndentBody(node, options)) {
+                            return [indent([hardline, body]), hardline];
+                        }
+                        else {
+                            return [dedentToRoot([hardline, body]), hardline];
+                        }
+                    });
+                }
+            }
+            default:
+                return undefined;
+        }
+    };
+};
+exports.embed3 = embed3;
+function shouldIndentBody(node, options) {
+    const parentNode = node.parentNode;
+    const shouldNotIndentBody = parentNode &&
+        parentNode.type === liquid_html_parser_1.NodeTypes.LiquidRawTag &&
+        parentNode.name === 'schema' &&
+        !options.indentSchema;
+    return node.kind !== liquid_html_parser_1.RawMarkupKinds.markdown && !shouldNotIndentBody;
+}
+//# sourceMappingURL=embed.js.map

package/dist/printer/index.d.ts

@@ -0,0 +1,14 @@
+export declare const printers2: {
+    "liquid-html-ast": import("prettier").Printer<import("../types").LiquidHtmlNode> & {
+        preprocess: any;
+    } & {
+        getVisitorKeys: any;
+    };
+};
+export declare const printers3: {
+    "liquid-html-ast": import("prettier3").Printer<import("../types").LiquidHtmlNode> & {
+        preprocess: any;
+    } & {
+        getVisitorKeys: any;
+    };
+};

package/dist/printer/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.printers3 = exports.printers2 = void 0;
+const printer_liquid_html_1 = require("./printer-liquid-html");
+const parser_1 = require("../parser");
+exports.printers2 = {
+    [parser_1.liquidHtmlAstFormat]: printer_liquid_html_1.printerLiquidHtml2,
+};
+exports.printers3 = {
+    [parser_1.liquidHtmlAstFormat]: printer_liquid_html_1.printerLiquidHtml3,
+};
+//# sourceMappingURL=index.js.map

package/dist/printer/preprocess/augment-with-css-properties.d.ts

@@ -0,0 +1,2 @@
+import { Augment, WithSiblings } from '../../types';
+export declare const augmentWithCSSProperties: Augment<WithSiblings>;