How to use posthtml - 10 common examples

To help you get started, we’ve selected a few posthtml examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github parcel-bundler / parcel / packages / transformers / html / src / inline.js View on Github external
export default function extractInlineAssets(
  asset: MutableAsset,
): Array {
  let ast = nullthrows(asset.ast);
  let program: PostHTMLNode = ast.program;
  let key = 0;

  // Extract inline 
github parcel-bundler / parcel / packages / packagers / html / src / HTMLPackager.js View on Github external
// may import CSS files. This will result in a sibling bundle in the same bundle group as the
    // JS. This will be inserted as a  element into the HTML here.
    let bundleGroups = bundleGraph.getBundleGroupsReferencedByBundle(bundle);
    let bundles = bundleGroups.reduce((p, {bundleGroup}) => {
      let bundles = bundleGraph
        .getBundlesInBundleGroup(bundleGroup)
        .filter(
          bundle =>
            !bundle
              .getEntryAssets()
              .some(asset => asset.id === bundleGroup.entryAssetId),
        );
      return p.concat(bundles);
    }, []);

    let {html} = await posthtml([
      insertBundleReferences.bind(this, bundles),
      replaceInlineAssetContent.bind(
        this,
        bundleGraph,
        getInlineBundleContents,
      ),
    ]).process(code);

    return replaceURLReferences({
      bundle,
      bundleGraph,
      contents: html,
    });
  },
});
github JetBrains / svg-mixer / packages / posthtml-transform / lib / plugin.js View on Github external
normalizedRules.forEach(rule => {
      // posthtml matcher, see https://github.com/posthtml/posthtml/blob/master/docs/api.md#treematchexpression-cb--function
      const matcher = !rule.selector ? { tag: /.*/ } : matchHelper(rule.selector);
      const nodesToProcess = [];

      match.call(nodes, matcher, node => {
        nodesToProcess.push(node);
        return node;
      });

      nodesToProcess.forEach(node => {
        const { attr, value, tag } = rule;

        if (tag) {
          node.tag = tag;
        }

        if (attr && value) {
          node.attrs = node.attrs || {};
          node.attrs[rule.attr] = rule.value;
        }
      });
github fkling / astexplorer / website / src / parsers / html / transformers / posthtml / index.js View on Github external
import compileModule from '../../../utils/compileModule';
import pkg from 'posthtml/package.json';

const ID = 'posthtml';

export default {
  id: ID,
  displayName: ID,
  version: pkg.version,
  homepage: pkg.homepage || 'https://github.com/posthtml/posthtml',

  defaultParserID: 'posthtml-parser',

  loadTransformer(callback) {
    require(['../../../transpilers/babel', 'posthtml'], (transpile, posthtml) =>
      callback({ transpile: transpile.default, posthtml }));
  },

  transform({ transpile, posthtml }, transformCode, code) {
    // transpile with babel for es6+ support
    transformCode = transpile(transformCode);
    // compile to turn from string into a module
    let transform = compileModule(
      // eslint-disable-line no-shadow
      transformCode,
    );
github fkling / astexplorer / website / src / parsers / html / transformers / posthtml / index.js View on Github external
import compileModule from '../../../utils/compileModule';
import pkg from 'posthtml/package.json';

const ID = 'posthtml';

export default {
  id: ID,
  displayName: ID,
  version: pkg.version,
  homepage: pkg.homepage || 'https://github.com/posthtml/posthtml',

  defaultParserID: 'posthtml-parser',

  loadTransformer(callback) {
    require(['../../../transpilers/babel', 'posthtml'], (transpile, posthtml) =>
      callback({ transpile: transpile.default, posthtml }));
  },

  transform({ transpile, posthtml }, transformCode, code) {
    // transpile with babel for es6+ support
    transformCode = transpile(transformCode);
    // compile to turn from string into a module
    let transform = compileModule(
      // eslint-disable-line no-shadow
      transformCode,
github posthtml / htmlnano / test / htmlnano.js View on Github external
export function init(html, minifiedHtml, options) {
    return posthtml([htmlnano(options, {})]).process(html).then((result) => {
        expect(result.html).toBe(minifiedHtml);
    });
}
github posthtml / htmlnano / test / usage.js View on Github external
it('PostHTML plugin', () => {
        return posthtml([htmlnano()]).process(html).then((result) => {
            expect(result.html).toBe(minifiedHtml);
        });
    });
});
github posthtml / posthtml-cache / test / test-plugin.js View on Github external
function processing(html, options) {
  return posthtml()
    .use(plugin(options))
    .process(html);
}
github codesandbox / codesandbox-client / packages / app / src / sandbox / eval / presets / parcel / transpilers / html-worker.js View on Github external
}

    function addSrcSetDependencies(srcset: string) {
      const newSources = [];

      srcset.split(',').forEach(source => {
        const pair = source.trim().split(' ');
        if (pair.length === 0) return;
        pair[0] = addDependency(pair[0]);
        newSources.push(pair.join(' '));
      });
      return newSources.join(',');
    }

    const res = parse(code, { lowerCaseAttributeNames: true });
    res.walk = api.walk;
    res.match = api.match;

    res.walk(node => {
      if (node == null) {
        return node;
      }

      if (node.attrs) {
        if (node.tag === 'meta') {
          if (
            !Object.keys(node.attrs).some(attr => {
              const values = META[attr];
              return values && values.includes(node.attrs[attr]);
            })
          ) {
            return node;
github codesandbox / codesandbox-client / packages / app / src / sandbox / eval / presets / parcel / transpilers / html-worker.js View on Github external
function addSrcSetDependencies(srcset: string) {
      const newSources = [];

      srcset.split(',').forEach(source => {
        const pair = source.trim().split(' ');
        if (pair.length === 0) return;
        pair[0] = addDependency(pair[0]);
        newSources.push(pair.join(' '));
      });
      return newSources.join(',');
    }

    const res = parse(code, { lowerCaseAttributeNames: true });
    res.walk = api.walk;
    res.match = api.match;

    res.walk(node => {
      if (node == null) {
        return node;
      }

      if (node.attrs) {
        if (node.tag === 'meta') {
          if (
            !Object.keys(node.attrs).some(attr => {
              const values = META[attr];
              return values && values.includes(node.attrs[attr]);
            })
          ) {
            return node;
          }