postcss-preset-env

  • Version 9.5.2
  • Published
  • 93.3 kB
  • 60 dependencies
  • MIT-0 license

Install

npm i postcss-preset-env
yarn add postcss-preset-env
pnpm add postcss-preset-env

Overview

Convert modern CSS into something browsers understand

Index

Variables

variable creator

const creator: PluginCreator<pluginOptions>;

    Enums

    enum DirectionFlow

    enum DirectionFlow {
    TopToBottom = 'top-to-bottom',
    BottomToTop = 'bottom-to-top',
    RightToLeft = 'right-to-left',
    LeftToRight = 'left-to-right',
    }

      member BottomToTop

      BottomToTop = 'bottom-to-top'

        member LeftToRight

        LeftToRight = 'left-to-right'

          member RightToLeft

          RightToLeft = 'right-to-left'

            member TopToBottom

            TopToBottom = 'top-to-bottom'

              Type Aliases

              type pluginOptions

              type pluginOptions = {
              /**
              * Determine which CSS features to polyfill,
              * based upon their process in becoming web standards.
              * default: 2
              */
              stage?: number | false;
              /**
              * Determine which CSS features to polyfill,
              * based their implementation status.
              * default: 0
              */
              minimumVendorImplementations?: number;
              /**
              * Enable any feature that would need an extra browser library to be loaded into the page for it to work.
              * default: false
              */
              enableClientSidePolyfills?: boolean;
              /**
              * PostCSS Preset Env supports any standard browserslist configuration,
              * which can be a `.browserslistrc` file,
              * a `browserslist` key in `package.json`,
              * or `browserslist` environment variables.
              *
              * The `env` option is used to select a specific browserslist environment in the event that you have more than one.
              */
              env?: string;
              /**
              * PostCSS Preset Env supports any standard browserslist configuration,
              * which can be a `.browserslistrc` file,
              * a `browserslist` key in `package.json`,
              * or `browserslist` environment variables.
              *
              * The `browsers` option should only be used when a standard browserslist configuration is not available.
              * When the `browsers` option is used the `env` option is ignored.
              */
              browsers?: string | Array<string> | null;
              /**
              * Determine whether all plugins should receive a `preserve` option,
              * which may preserve or remove the original and now polyfilled CSS.
              * Each plugin has it's own default, some true, others false.
              * default: _not set_
              */
              preserve?: boolean;
              /**
              * [Configure autoprefixer](https://github.com/postcss/autoprefixer#options)
              */
              autoprefixer?: autoprefixer.Options;
              /**
              * Enable or disable specific polyfills by ID.
              * Passing `true` to a specific [feature ID](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md) will enable its polyfill,
              * while passing `false` will disable it.
              *
              * Passing an object to a specific feature ID will both enable and configure it.
              */
              features?: pluginsOptions;
              /**
              * The `insertBefore` key allows you to insert other PostCSS plugins into the chain.
              * This is only useful if you are also using sugary PostCSS plugins that must execute before certain polyfills.
              * `insertBefore` supports chaining one or multiple plugins.
              */
              insertBefore?: Record<string, unknown>;
              /**
              * The `insertAfter` key allows you to insert other PostCSS plugins into the chain.
              * This is only useful if you are also using sugary PostCSS plugins that must execute after certain polyfills.
              * `insertAfter` supports chaining one or multiple plugins.
              */
              insertAfter?: Record<string, unknown>;
              /**
              * Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why.
              * default: false
              */
              debug?: boolean;
              /**
              * The `logical` object allows to configure all plugins related to logical document flow at once.
              * It accepts the same options as each plugin: `inlineDirection` and `blockDirection`.
              */
              logical?: {
              /** Set the inline flow direction. default: left-to-right */
              inlineDirection?: DirectionFlow;
              /** Set the block flow direction. default: top-to-bottom */
              blockDirection?: DirectionFlow;
              };
              };

                type pluginsOptions

                type pluginsOptions = {
                /** plugin options for "@csstools/postcss-initial" */
                'all-property'?: subPluginOptions<pluginOptions_2>;
                /** plugin options for "postcss-pseudo-class-any-link" */
                'any-link-pseudo-class'?: subPluginOptions<pluginOptions_3>;
                /** plugin options for "css-blank-pseudo" */
                'blank-pseudo-class'?: subPluginOptions<pluginOptions_4>;
                /** plugin options for "postcss-page-break" */
                'break-properties'?: subPluginOptions<postcssPageBreakOptions>;
                /** plugin options for "@csstools/postcss-cascade-layers" */
                'cascade-layers'?: subPluginOptions<pluginOptions_5>;
                /** plugin options for "postcss-attribute-case-insensitive" */
                'case-insensitive-attributes'?: subPluginOptions<pluginOptions_6>;
                /** plugin options for "postcss-clamp" */
                clamp?: subPluginOptions<postcssClampOptions>;
                /** plugin options for "@csstools/postcss-color-function" */
                'color-function'?: subPluginOptions<pluginOptions_7>;
                /** plugin options for "postcss-color-functional-notation" */
                'color-functional-notation'?: subPluginOptions<pluginOptions_8>;
                /** plugin options for "@csstools/postcss-color-mix-function" */
                'color-mix'?: subPluginOptions<pluginOptions_9>;
                /** plugin options for "postcss-custom-media" */
                'custom-media-queries'?: subPluginOptions<pluginOptions_10>;
                /** plugin options for "postcss-custom-properties" */
                'custom-properties'?: subPluginOptions<pluginOptions_11>;
                /** plugin options for "postcss-custom-selectors" */
                'custom-selectors'?: subPluginOptions<pluginOptions_12>;
                /** plugin options for "postcss-dir-pseudo-class" */
                'dir-pseudo-class'?: subPluginOptions<pluginOptions_13>;
                /** plugin options for "@csstools/postcss-normalize-display-values" */
                'display-two-values'?: subPluginOptions<pluginOptions_14>;
                /** plugin options for "postcss-double-position-gradients" */
                'double-position-gradients'?: subPluginOptions<pluginOptions_15>;
                /** plugin options for "@csstools/postcss-exponential-functions" */
                'exponential-functions'?: subPluginOptions<pluginOptions_16>;
                /** plugin options for "@csstools/postcss-logical-float-and-clear" */
                'float-clear-logical-values'?: subPluginOptions<pluginOptions_17>;
                /** plugin options for "postcss-focus-visible" */
                'focus-visible-pseudo-class'?: subPluginOptions<pluginOptions_18>;
                /** plugin options for "postcss-focus-within" */
                'focus-within-pseudo-class'?: subPluginOptions<pluginOptions_19>;
                /** plugin options for "@csstools/postcss-font-format-keywords" */
                'font-format-keywords'?: subPluginOptions<pluginOptions_20>;
                /** plugin options for "postcss-font-variant" */
                'font-variant-property'?: subPluginOptions<postcssFontVariantOptions>;
                /** plugin options for "@csstools/postcss-gamut-mapping" */
                'gamut-mapping'?: subPluginOptions<pluginOptions_21>;
                /** plugin options for "postcss-gap-properties" */
                'gap-properties'?: subPluginOptions<pluginOptions_22>;
                /** plugin options for "@csstools/postcss-gradients-interpolation-method" */
                'gradients-interpolation-method'?: subPluginOptions<pluginOptions_23>;
                /** plugin options for "css-has-pseudo" */
                'has-pseudo-class'?: subPluginOptions<pluginOptions_24>;
                /** plugin options for "postcss-color-hex-alpha" */
                'hexadecimal-alpha-notation'?: subPluginOptions<pluginOptions_25>;
                /** plugin options for "@csstools/postcss-hwb-function" */
                'hwb-function'?: subPluginOptions<pluginOptions_26>;
                /** plugin options for "@csstools/postcss-ic-unit" */
                'ic-unit'?: subPluginOptions<pluginOptions_27>;
                /** plugin options for "postcss-image-set-function" */
                'image-set-function'?: subPluginOptions<pluginOptions_28>;
                /** plugin options for "@csstools/postcss-is-pseudo-class" */
                'is-pseudo-class'?: subPluginOptions<pluginOptions_29>;
                /** plugin options for "postcss-lab-function" */
                'lab-function'?: subPluginOptions<pluginOptions_30>;
                /** plugin options for "@csstools/postcss-light-dark-function" */
                'light-dark-function'?: subPluginOptions<pluginOptions_31>;
                /** plugin options for "@csstools/postcss-logical-overflow" */
                'logical-overflow'?: subPluginOptions<pluginOptions_32>;
                /** plugin options for "@csstools/postcss-logical-overscroll-behavior" */
                'logical-overscroll-behavior'?: subPluginOptions<pluginOptions_33>;
                /** plugin options for "postcss-logical" */
                'logical-properties-and-values'?: subPluginOptions<pluginOptions_34>;
                /** plugin options for "@csstools/postcss-logical-resize" */
                'logical-resize'?: subPluginOptions<pluginOptions_35>;
                /** plugin options for "@csstools/postcss-logical-viewport-units" */
                'logical-viewport-units'?: subPluginOptions<pluginOptions_36>;
                /** plugin options for "@csstools/postcss-media-queries-aspect-ratio-number-values" */
                'media-queries-aspect-ratio-number-values'?: subPluginOptions<pluginOptions_37>;
                /** plugin options for "@csstools/postcss-media-minmax" */
                'media-query-ranges'?: subPluginOptions<pluginOptions_38>;
                /** plugin options for "@csstools/postcss-nested-calc" */
                'nested-calc'?: subPluginOptions<pluginOptions_39>;
                /** plugin options for "postcss-nesting" */
                'nesting-rules'?: subPluginOptions<pluginOptions_40>;
                /** plugin options for "postcss-selector-not" */
                'not-pseudo-class'?: subPluginOptions<pluginOptions_41>;
                /** plugin options for "@csstools/postcss-oklab-function" */
                'oklab-function'?: subPluginOptions<pluginOptions_42>;
                /** plugin options for "postcss-opacity-percentage" */
                'opacity-percentage'?: subPluginOptions<postcssOpacityPercentageOptions>;
                /** plugin options for "postcss-overflow-shorthand" */
                'overflow-property'?: subPluginOptions<pluginOptions_43>;
                /** plugin options for "postcss-replace-overflow-wrap" */
                'overflow-wrap-property'?: subPluginOptions<postcssReplaceOverflowWrapOptions>;
                /** plugin options for "postcss-place" */
                'place-properties'?: subPluginOptions<pluginOptions_44>;
                /** plugin options for "css-prefers-color-scheme" */
                'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_45>;
                /** plugin options for "postcss-color-rebeccapurple" */
                'rebeccapurple-color'?: subPluginOptions<pluginOptions_46>;
                /** plugin options for "@csstools/postcss-relative-color-syntax" */
                'relative-color-syntax'?: subPluginOptions<pluginOptions_47>;
                /** plugin options for "@csstools/postcss-scope-pseudo-class" */
                'scope-pseudo-class'?: subPluginOptions<pluginOptions_48>;
                /** plugin options for "@csstools/postcss-stepped-value-functions" */
                'stepped-value-functions'?: subPluginOptions<pluginOptions_49>;
                /** plugin options for "postcss-system-ui-font-family" */
                'system-ui-font-family'?: subPluginOptions<postcssFontFamilySystemUIOptions>;
                /** plugin options for "@csstools/postcss-text-decoration-shorthand" */
                'text-decoration-shorthand'?: subPluginOptions<pluginOptions_50>;
                /** plugin options for "@csstools/postcss-trigonometric-functions" */
                'trigonometric-functions'?: subPluginOptions<pluginOptions_51>;
                /** plugin options for "@csstools/postcss-unset-value" */
                'unset-value'?: subPluginOptions<pluginOptions_52>;
                };

                  type postcssClampOptions

                  type postcssClampOptions = {
                  /** Preserve the original notation. default: false */
                  preserve?: boolean;
                  /**
                  * The precalculate option determines whether values with the same unit should be precalculated.
                  * default: false
                  */
                  precalculate?: boolean;
                  };
                  • postcss-clamp plugin options

                  type postcssFontFamilySystemUIOptions

                  type postcssFontFamilySystemUIOptions = Record<string, never>;
                  • postcss-system-ui-font-family plugin options

                  type postcssFontVariantOptions

                  type postcssFontVariantOptions = Record<string, never>;
                  • postcss-font-variant plugin options

                  type postcssOpacityPercentageOptions

                  type postcssOpacityPercentageOptions = {
                  /** Preserve the original notation. default: false */
                  preserve?: boolean;
                  };
                  • postcss-opacity-percentage plugin options

                  type postcssPageBreakOptions

                  type postcssPageBreakOptions = Record<string, never>;
                  • postcss-page-break plugin options

                  type postcssReplaceOverflowWrapOptions

                  type postcssReplaceOverflowWrapOptions = {
                  /** Preserve the original notation. default: false */
                  preserve?: boolean;
                  };
                  • postcss-replace-overflow-wrap plugin options

                  type subPluginOptions

                  type subPluginOptions<T> = ['auto' | boolean, T] | T | boolean;

                    Package Files (1)

                    Dependencies (60)

                    Dev Dependencies (0)

                    No dev dependencies.

                    Peer Dependencies (1)

                    Badge

                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/postcss-preset-env.

                    • Markdown
                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/postcss-preset-env)
                    • HTML
                      <a href="https://www.jsdocs.io/package/postcss-preset-env"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>