phtml-utility-class

3.0.3 • Public • Published

pHTML Utility Class pHTML

NPM Version Build Status Support Chat

pHTML Utility Class gives your markup super powers.

Example

Use to write inteligent functional classes based on their arguments.

<div class="p-4,1,*"></div>

Transforms into styles based on your configuration.

<style>
.80YQhjgv {
  --pt: 4;
  --pr: 1;
  --pl: 1;
}
</style> 
<div class="p 80YQhjgv"></div>

You can configure class functions to output whatever you like.

When used with a stylesheet it becomes very powerful, requiring minimal pre configuration to work with your design system.

.p {
  padding-top: calc(var(--pt, initial) * 1rem);
  padding-right: calc(var(--pr, initial) * 1rem);
  padding-bottom: calc(var(--pb, initial) * 1rem);
  padding-left: calc(var(--pl, initial) * 1rem);
}

Features

  • ### Functional Class Names

    Use inteligent functional class names. Seperate arguments with commas. Use a wildcard to skip arguments. See below for configuring your own class names.

    <div class="p-4 m-*,auto fl-wrap"></div>

  • ### Inline Styles

    Make use of all CSS features inline including hover states and media queries.

    <div style="&:hover { color: red; }"></div>

  • ### Supports PostCSS

    Add support for PostCSS by including a postcss.config.js file in your project.


  • ### Custom Syntax

    Customise the syntax used for functional classes by by overiding the default regex pattern. phtml-utility-class.process(html, null, options);

    // Options
    let options = {
      regex: {
        property: /[^-\s]+/,
        number: /[0-9]*\.?[0-9]+|\*/,
        unit: /px|cm|mm|in|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax/,
        seperator: /,/,
        arg: /0*({{number}})({{unit}})?|(\w+)/,
        args: /(?:({{arg}}){{seperator}}?)+/,
        decl: /({{property}})(?:-({{args}}))?/
       };
    }

Configure

By default phtml-utility-class will look for a file called phtml-utility-class.config.js at the root of your project.

// phtml-utility-class.config.js
module.exports = {
  classes: [
    {
      class: 'p',
      children: [
        't',
        'r',
        'b',
        'l'
      ],
      style: ({ property, children, args, str }) => {
 
        if (args.length < 3) args.push(args[0])
        else args.push(args[1])
 
        for (let [i, side] of children.entries()) {
          str`--${property}${side}${args[i]};`
        }
 
        return str()
      }
    }
    // ...
  ]
}

Usage

Add [phtml-utility-class] to your project:

npm install phtml-utility-class --save-dev

Use [phtml-utility-class] to process your HTML:

const phtmlUtilityClass = require('phtml-utility-class');
 
phtmlUtilityClass.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlUtilityClass = require('phtml-utility-class');
 
phtml([
  phtmlUtilityClass(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

Package Sidebar

Install

npm i phtml-utility-class

Weekly Downloads

2

Version

3.0.3

License

CC0-1.0

Unpacked Size

64.4 kB

Total Files

8

Last publish

Collaborators

  • limitlessloop