postcss-substitute-optional-required

    1.0.1 • Public • Published

    PostCSS Substitute Optional Required Build Status dependencies devDependencies

    PostCSS plugin to shim the pseudo-selectors :required and :optional by using negation (:not) and therefore slightly increase their browser support.

    /* input */
    input:required::after {
        content: '*'
    }
    textarea:optional::after {
        content: '(optional)';
    }
     
    /* output */
    input:not(:optional),
    input:required::after {
        content: '*'
    }
     
    textarea:not(:required)::after,
    textarea:optional::after {
        content: '(optional)';
    }
    /* input, option { method: 'shim-required' } */
    :required {
        color: hotpink;
    }
    :optional {
        color: indianred;
    }
    /* output, option { method: 'shim-required' } */
    :not(:optional),
    :required {
        color: hotpink;
    }
    :optional {
        color: indianred;
    }
    /* input, option { method: 'shim-optional' } */
    :required {
        color: hotpink;
    }
    :optional {
        color: indianred;
    }
    /* output, option { method: 'shim-optional' } */
    :required {
        color: hotpink;
    }
    :not(:required),
    :optional {
        color: indianred;
    }

    Options

    The only available option is method, with the possible values shim-all (default), shim-optional and shim-required:

    Usage

    postcss([ require('postcss-substitute-optional-required') ])
    postcss([ require('postcss-substitute-optional-required') ])({ method: 'shim-required' }) //shim only the :required selector

    See PostCSS docs for examples for your environment.

    Install

    npm i postcss-substitute-optional-required

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • mattdimu