It is necessary to provide some default styles to Porsche Design System components until they are fully bootstrapped to
prevent FOUC. In addition, normalize and component related slotted styles are provided too.
Therefore, we provide a ready to use partial in all @porsche-design-system/components-{js|angular|react|vue} packages
which has to be injected into the <head> of your index.html.
OptionDescriptionTypeDefaultprefixPrefix will be added to the component names. It's also possible to pass multiple prefixes.string | string[]''formatDefines the output format of the partial. By default, it returns a html string. For jsx it return a jsx element. For sha256 it returns a SHA-256 hash of the innerHTML to use in a Content Security Policy (CSP).'html' | 'jsx' | 'sha256' | 'html'globalStylesOption to include/exclude global reset/normalize styles.booleantrue
When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project
included.
Project integration differs based on the project setup.
The following showcases the most common ways.
prev
next
<!-- index.html -->
<head><!--PLACEHOLDER_INITIAL_STYLES--></head>
<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
"prestart": "yarn replace",
"replace": "placeholder='<!--PLACEHOLDER_INITIAL_STYLES-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getInitialStyles())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html" <!-- Alternative: With custom prefix to match your prefixed components -->
"replace": "placeholder='<!--PLACEHOLDER_INITIAL_STYLES-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getInitialStyles({ prefix: \"custom-prefix\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html" <!-- Alternative: With multiple prefixes to match prefixed components coming from micro frontends -->
"replace": "placeholder='<!--PLACEHOLDER_INITIAL_STYLES-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getInitialStyles({ prefix: [\"\", \"custom-prefix\", \"another-prefix\"] }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"}
Output
The result of this partial looks like this:
<styledata-pds-initial-styles>html,body{margin:0;padding:0;font-family:'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;line-height:calc(6px + 2.125ex);letter-spacing:normal;text-size-adjust:none;-webkit-text-size-adjust:none}:is(p-accordion,p-banner,p-button,p-button-group,p-button-pure,p-button-tile,p-canvas,p-carousel,p-checkbox,p-checkbox-wrapper,p-content-wrapper,p-crest,p-display,p-divider,p-drilldown,p-drilldown-item,p-drilldown-link,p-fieldset,p-fieldset-wrapper,p-flag,p-flex,p-flex-item,p-flyout,p-grid,p-grid-item,p-heading,p-headline,p-icon,p-inline-notification,p-input-date,p-input-email,p-input-number,p-input-password,p-input-search,p-input-tel,p-input-text,p-input-time,p-input-url,p-link,p-link-pure,p-link-social,p-link-tile,p-link-tile-model-signature,p-link-tile-product,p-marque,p-modal,p-model-signature,p-multi-select,p-multi-select-option,p-optgroup,p-pagination,p-pin-code,p-popover,p-radio-button-wrapper,p-scroller,p-segmented-control,p-segmented-control-item,p-select,p-select-option,p-select-wrapper,p-sheet,p-spinner,p-stepper-horizontal,p-stepper-horizontal-item,p-switch,p-table,p-table-body,p-table-cell,p-table-head,p-table-head-cell,p-table-head-row,p-table-row,p-tabs,p-tabs-bar,p-tabs-item,p-tag,p-tag-dismissible,p-text,p-text-field-wrapper,p-text-list,p-text-list-item,p-textarea,p-textarea-wrapper,p-toast,p-wordmark):not(:defined,.ssr,[data-ssr]){visibility:hidden}
</style>
// Alternative: With custom prefix to match your prefixed components
<styledata-pds-initial-styles>html,body{margin:0;padding:0;font-family:'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;line-height:calc(6px + 2.125ex);letter-spacing:normal;text-size-adjust:none;-webkit-text-size-adjust:none}:is(custom-prefix-p-accordion,custom-prefix-p-banner,custom-prefix-p-button,custom-prefix-p-button-group,custom-prefix-p-button-pure,custom-prefix-p-button-tile,custom-prefix-p-canvas,custom-prefix-p-carousel,custom-prefix-p-checkbox,custom-prefix-p-checkbox-wrapper,custom-prefix-p-content-wrapper,custom-prefix-p-crest,custom-prefix-p-display,custom-prefix-p-divider,custom-prefix-p-drilldown,custom-prefix-p-drilldown-item,custom-prefix-p-drilldown-link,custom-prefix-p-fieldset,custom-prefix-p-fieldset-wrapper,custom-prefix-p-flag,custom-prefix-p-flex,custom-prefix-p-flex-item,custom-prefix-p-flyout,custom-prefix-p-grid,custom-prefix-p-grid-item,custom-prefix-p-heading,custom-prefix-p-headline,custom-prefix-p-icon,custom-prefix-p-inline-notification,custom-prefix-p-input-date,custom-prefix-p-input-email,custom-prefix-p-input-number,custom-prefix-p-input-password,custom-prefix-p-input-search,custom-prefix-p-input-tel,custom-prefix-p-input-text,custom-prefix-p-input-time,custom-prefix-p-input-url,custom-prefix-p-link,custom-prefix-p-link-pure,custom-prefix-p-link-social,custom-prefix-p-link-tile,custom-prefix-p-link-tile-model-signature,custom-prefix-p-link-tile-product,custom-prefix-p-marque,custom-prefix-p-modal,custom-prefix-p-model-signature,custom-prefix-p-multi-select,custom-prefix-p-multi-select-option,custom-prefix-p-optgroup,custom-prefix-p-pagination,custom-prefix-p-pin-code,custom-prefix-p-popover,custom-prefix-p-radio-button-wrapper,custom-prefix-p-scroller,custom-prefix-p-segmented-control,custom-prefix-p-segmented-control-item,custom-prefix-p-select,custom-prefix-p-select-option,custom-prefix-p-select-wrapper,custom-prefix-p-sheet,custom-prefix-p-spinner,custom-prefix-p-stepper-horizontal,custom-prefix-p-stepper-horizontal-item,custom-prefix-p-switch,custom-prefix-p-table,custom-prefix-p-table-body,custom-prefix-p-table-cell,custom-prefix-p-table-head,custom-prefix-p-table-head-cell,custom-prefix-p-table-head-row,custom-prefix-p-table-row,custom-prefix-p-tabs,custom-prefix-p-tabs-bar,custom-prefix-p-tabs-item,custom-prefix-p-tag,custom-prefix-p-tag-dismissible,custom-prefix-p-text,custom-prefix-p-text-field-wrapper,custom-prefix-p-text-list,custom-prefix-p-text-list-item,custom-prefix-p-textarea,custom-prefix-p-textarea-wrapper,custom-prefix-p-toast,custom-prefix-p-wordmark):not(:defined,.ssr,[data-ssr]){visibility:hidden}
</style>
// Alternative: With multiple prefixes to match prefixed components coming from micro frontends
<styledata-pds-initial-styles>html,body{margin:0;padding:0;font-family:'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;line-height:calc(6px + 2.125ex);letter-spacing:normal;text-size-adjust:none;-webkit-text-size-adjust:none}:is(p-accordion,p-banner,p-button,p-button-group,p-button-pure,p-button-tile,p-canvas,p-carousel,p-checkbox,p-checkbox-wrapper,p-content-wrapper,p-crest,p-display,p-divider,p-drilldown,p-drilldown-item,p-drilldown-link,p-fieldset,p-fieldset-wrapper,p-flag,p-flex,p-flex-item,p-flyout,p-grid,p-grid-item,p-heading,p-headline,p-icon,p-inline-notification,p-input-date,p-input-email,p-input-number,p-input-password,p-input-search,p-input-tel,p-input-text,p-input-time,p-input-url,p-link,p-link-pure,p-link-social,p-link-tile,p-link-tile-model-signature,p-link-tile-product,p-marque,p-modal,p-model-signature,p-multi-select,p-multi-select-option,p-optgroup,p-pagination,p-pin-code,p-popover,p-radio-button-wrapper,p-scroller,p-segmented-control,p-segmented-control-item,p-select,p-select-option,p-select-wrapper,p-sheet,p-spinner,p-stepper-horizontal,p-stepper-horizontal-item,p-switch,p-table,p-table-body,p-table-cell,p-table-head,p-table-head-cell,p-table-head-row,p-table-row,p-tabs,p-tabs-bar,p-tabs-item,p-tag,p-tag-dismissible,p-text,p-text-field-wrapper,p-text-list,p-text-list-item,p-textarea,p-textarea-wrapper,p-toast,p-wordmark,custom-prefix-p-accordion,custom-prefix-p-banner,custom-prefix-p-button,custom-prefix-p-button-group,custom-prefix-p-button-pure,custom-prefix-p-button-tile,custom-prefix-p-canvas,custom-prefix-p-carousel,custom-prefix-p-checkbox,custom-prefix-p-checkbox-wrapper,custom-prefix-p-content-wrapper,custom-prefix-p-crest,custom-prefix-p-display,custom-prefix-p-divider,custom-prefix-p-drilldown,custom-prefix-p-drilldown-item,custom-prefix-p-drilldown-link,custom-prefix-p-fieldset,custom-prefix-p-fieldset-wrapper,custom-prefix-p-flag,custom-prefix-p-flex,custom-prefix-p-flex-item,custom-prefix-p-flyout,custom-prefix-p-grid,custom-prefix-p-grid-item,custom-prefix-p-heading,custom-prefix-p-headline,custom-prefix-p-icon,custom-prefix-p-inline-notification,custom-prefix-p-input-date,custom-prefix-p-input-email,custom-prefix-p-input-number,custom-prefix-p-input-password,custom-prefix-p-input-search,custom-prefix-p-input-tel,custom-prefix-p-input-text,custom-prefix-p-input-time,custom-prefix-p-input-url,custom-prefix-p-link,custom-prefix-p-link-pure,custom-prefix-p-link-social,custom-prefix-p-link-tile,custom-prefix-p-link-tile-model-signature,custom-prefix-p-link-tile-product,custom-prefix-p-marque,custom-prefix-p-modal,custom-prefix-p-model-signature,custom-prefix-p-multi-select,custom-prefix-p-multi-select-option,custom-prefix-p-optgroup,custom-prefix-p-pagination,custom-prefix-p-pin-code,custom-prefix-p-popover,custom-prefix-p-radio-button-wrapper,custom-prefix-p-scroller,custom-prefix-p-segmented-control,custom-prefix-p-segmented-control-item,custom-prefix-p-select,custom-prefix-p-select-option,custom-prefix-p-select-wrapper,custom-prefix-p-sheet,custom-prefix-p-spinner,custom-prefix-p-stepper-horizontal,custom-prefix-p-stepper-horizontal-item,custom-prefix-p-switch,custom-prefix-p-table,custom-prefix-p-table-body,custom-prefix-p-table-cell,custom-prefix-p-table-head,custom-prefix-p-table-head-cell,custom-prefix-p-table-head-row,custom-prefix-p-table-row,custom-prefix-p-tabs,custom-prefix-p-tabs-bar,custom-prefix-p-tabs-item,custom-prefix-p-tag,custom-prefix-p-tag-dismissible,custom-prefix-p-text,custom-prefix-p-text-field-wrapper,custom-prefix-p-text-list,custom-prefix-p-text-list-item,custom-prefix-p-textarea,custom-prefix-p-textarea-wrapper,custom-prefix-p-toast,custom-prefix-p-wordmark,another-prefix-p-accordion,another-prefix-p-banner,another-prefix-p-button,another-prefix-p-button-group,another-prefix-p-button-pure,another-prefix-p-button-tile,another-prefix-p-canvas,another-prefix-p-carousel,another-prefix-p-checkbox,another-prefix-p-checkbox-wrapper,another-prefix-p-content-wrapper,another-prefix-p-crest,another-prefix-p-display,another-prefix-p-divider,another-prefix-p-drilldown,another-prefix-p-drilldown-item,another-prefix-p-drilldown-link,another-prefix-p-fieldset,another-prefix-p-fieldset-wrapper,another-prefix-p-flag,another-prefix-p-flex,another-prefix-p-flex-item,another-prefix-p-flyout,another-prefix-p-grid,another-prefix-p-grid-item,another-prefix-p-heading,another-prefix-p-headline,another-prefix-p-icon,another-prefix-p-inline-notification,another-prefix-p-input-date,another-prefix-p-input-email,another-prefix-p-input-number,another-prefix-p-input-password,another-prefix-p-input-search,another-prefix-p-input-tel,another-prefix-p-input-text,another-prefix-p-input-time,another-prefix-p-input-url,another-prefix-p-link,another-prefix-p-link-pure,another-prefix-p-link-social,another-prefix-p-link-tile,another-prefix-p-link-tile-model-signature,another-prefix-p-link-tile-product,another-prefix-p-marque,another-prefix-p-modal,another-prefix-p-model-signature,another-prefix-p-multi-select,another-prefix-p-multi-select-option,another-prefix-p-optgroup,another-prefix-p-pagination,another-prefix-p-pin-code,another-prefix-p-popover,another-prefix-p-radio-button-wrapper,another-prefix-p-scroller,another-prefix-p-segmented-control,another-prefix-p-segmented-control-item,another-prefix-p-select,another-prefix-p-select-option,another-prefix-p-select-wrapper,another-prefix-p-sheet,another-prefix-p-spinner,another-prefix-p-stepper-horizontal,another-prefix-p-stepper-horizontal-item,another-prefix-p-switch,another-prefix-p-table,another-prefix-p-table-body,another-prefix-p-table-cell,another-prefix-p-table-head,another-prefix-p-table-head-cell,another-prefix-p-table-head-row,another-prefix-p-table-row,another-prefix-p-tabs,another-prefix-p-tabs-bar,another-prefix-p-tabs-item,another-prefix-p-tag,another-prefix-p-tag-dismissible,another-prefix-p-text,another-prefix-p-text-field-wrapper,another-prefix-p-text-list,another-prefix-p-text-list-item,another-prefix-p-textarea,another-prefix-p-textarea-wrapper,another-prefix-p-toast,another-prefix-p-wordmark):not(:defined,.ssr,[data-ssr]){visibility:hidden}
</style>
Hint
In case, micro frontends with custom prefixed Porsche Design System components are used,
it's possible to provide proper initial styles to all of them by defining an array of custom prefixes (see example below).
By entering document.porscheDesignSystem in the browser console of your application, it's possible to find out which prefixes are used.
