Financial-Times/dotcom-page-kit

Shared CSS design proposal

Opened this issue · 0 comments

(this document subject to bikeshedding)

goals

  • apps shouldn't need to know about the implementation details of components to load their styles
  • any top-level component can declare CSS that can be shared between apps
  • apps must be explicit about what shared CSS they require

in components

we add an extra field to package.json, shared-styles, with the following structure:

{
	"shared-styles": {
		"blocking": "./blocking.scss",
		"non-blocking": "./non-blocking.scss"
	}
}

in Page Kit

we add a new page-kit-cli plugin, dotcom-build-shared-styles, which takes an array of components to load shared styles from, and modifies the config to add every discovered shared style as an entry point, using a common naming convention of __shared-${component}-${blocking}.

we reintroduce glob discovery of entry points to dotcom-server-asset-loader to allow it to output an array of all __shared entry points, blocking and non-blocking, to Shell.