@wordpress/style-engine 0.2.0

package/src/styles/utils.ts

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { get, upperFirst } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import type { GeneratedCSSRule, Style, Box, StyleOptions } from '../types';
+
+export function generateBoxRules(
+	style: Style,
+	options: StyleOptions,
+	path: string[],
+	ruleKey: string
+): GeneratedCSSRule[] {
+	const boxStyle: Box | string | undefined = get( style, path );
+	if ( ! boxStyle ) {
+		return [];
+	}
+
+	const rules: GeneratedCSSRule[] = [];
+	if ( typeof boxStyle === 'string' ) {
+		rules.push( {
+			selector: options.selector,
+			key: ruleKey,
+			value: boxStyle,
+		} );
+	} else {
+		const sideRules = [ 'top', 'right', 'bottom', 'left' ].reduce(
+			( acc: GeneratedCSSRule[], side: string ) => {
+				const value: string | undefined = get( boxStyle, [ side ] );
+				if ( value ) {
+					acc.push( {
+						selector: options.selector,
+						key: `${ ruleKey }${ upperFirst( side ) }`,
+						value,
+					} );
+				}
+				return acc;
+			},
+			[]
+		);
+		rules.push( ...sideRules );
+	}
+
+	return rules;
+}

package/src/test/index.js

@@ -0,0 +1,83 @@
+/**
+ * Internal dependencies
+ */
+import { getCSSRules, generate } from '../index';
+
+describe( 'generate', () => {
+	it( 'should generate empty style', () => {
+		expect( generate( {}, '.some-selector' ) ).toEqual( '' );
+	} );
+
+	it( 'should generate padding styles', () => {
+		expect(
+			generate(
+				{
+					spacing: { padding: '10px' },
+				},
+				{
+					selector: '.some-selector',
+				}
+			)
+		).toEqual( '.some-selector { padding: 10px; }' );
+
+		expect(
+			generate(
+				{
+					spacing: { padding: { top: '10px', bottom: '5px' } },
+				},
+				{
+					selector: '.some-selector',
+				}
+			)
+		).toEqual(
+			'.some-selector { padding-top: 10px; padding-bottom: 5px; }'
+		);
+	} );
+} );
+
+describe( 'getCSSRules', () => {
+	it( 'should return an empty rules array', () => {
+		expect( getCSSRules( {}, '.some-selector' ) ).toEqual( [] );
+	} );
+
+	it( 'should return a rules array with CSS keys formatted in camelCase', () => {
+		expect(
+			getCSSRules(
+				{
+					spacing: { padding: '10px' },
+				},
+				{
+					selector: '.some-selector',
+				}
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'padding',
+				value: '10px',
+			},
+		] );
+
+		expect(
+			getCSSRules(
+				{
+					spacing: { padding: { top: '10px', bottom: '5px' } },
+				},
+				{
+					selector: '.some-selector',
+				}
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'paddingTop',
+				value: '10px',
+			},
+			{
+				selector: '.some-selector',
+				key: 'paddingBottom',
+				value: '5px',
+			},
+		] );
+	} );
+} );

package/src/types.ts

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+type BoxVariants = 'margin' | 'padding' | undefined;
+export type Box< T extends BoxVariants = undefined > = {
+	top?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];
+	right?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];
+	bottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];
+	left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
+};
+
+export interface Style {
+	spacing?: {
+		margin?: CSSProperties[ 'margin' ] | Box< 'margin' >;
+		padding?: CSSProperties[ 'padding' ] | Box< 'padding' >;
+	};
+	typography?: {
+		fontSize?: CSSProperties[ 'fontSize' ];
+		fontFamily?: CSSProperties[ 'fontFamily' ];
+		fontWeight?: CSSProperties[ 'fontWeight' ];
+		fontStyle?: CSSProperties[ 'fontStyle' ];
+		letterSpacing?: CSSProperties[ 'letterSpacing' ];
+		lineHeight?: CSSProperties[ 'lineHeight' ];
+		textDecoration?: CSSProperties[ 'textDecoration' ];
+		textTransform?: CSSProperties[ 'textTransform' ];
+	};
+}
+
+export type StyleOptions = {
+	/**
+	 * CSS selector for the generated style.
+	 */
+	selector: string;
+};
+
+export type GeneratedCSSRule = {
+	selector: string;
+	value: string;
+	/**
+	 * The CSS key in JS style attribute format, compatible with React.
+	 * E.g. `paddingTop` instead of `padding-top`.
+	 */
+	key: string;
+};
+
+export interface StyleDefinition {
+	name: string;
+	generate: ( style: Style, options: StyleOptions ) => GeneratedCSSRule[];
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types"
+	},
+	"include": [ "src/**/*" ]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/@types/lodash/common/common.d.ts","../../node_modules/@types/lodash/common/array.d.ts","../../node_modules/@types/lodash/common/collection.d.ts","../../node_modules/@types/lodash/common/date.d.ts","../../node_modules/@types/lodash/common/function.d.ts","../../node_modules/@types/lodash/common/lang.d.ts","../../node_modules/@types/lodash/common/math.d.ts","../../node_modules/@types/lodash/common/number.d.ts","../../node_modules/@types/lodash/common/object.d.ts","../../node_modules/@types/lodash/common/seq.d.ts","../../node_modules/@types/lodash/common/string.d.ts","../../node_modules/@types/lodash/common/util.d.ts","../../node_modules/@types/lodash/index.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/@types/react/node_modules/csstype/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","./src/types.ts","./src/styles/utils.ts","./src/styles/padding.ts","./src/styles/index.ts","./src/index.ts"],"fileInfos":[{"version":"aa9fb4c70f369237c2f45f9d969c9a59e0eae9a192962eb48581fe864aa609db","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","eb75e89d63b3b72dd9ca8b0cac801cecae5be352307c004adeaa60bc9d6df51f","2cc028cd0bdb35b1b5eb723d84666a255933fffbea607f72cbd0c7c7b4bee144",{"version":"e54c8715a4954cfdc66cd69489f2b725c09ebf37492dbd91cff0a1688b1159e8","affectsGlobalScope":true},{"version":"51b8b27c21c066bf877646e320bf6a722b80d1ade65e686923cd9d4494aef1ca","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"2c8c5ee58f30e7c944e04ab1fb5506fdbb4dd507c9efa6972cf4b91cec90c503","affectsGlobalScope":true},{"version":"2bb4b3927299434052b37851a47bf5c39764f2ba88a888a107b32262e9292b7c","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"93544ca2f26a48716c1b6c5091842cad63129daac422dfa4bc52460465f22bb1","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"7435b75fdf3509622e79622dbe5091cf4b09688410ee2034e4fc17d0c99d0862","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"9f1817f7c3f02f6d56e0f403b927e90bb133f371dcebc36fa7d6d208ef6899da","affectsGlobalScope":true},{"version":"cd6efb9467a8b6338ece2e2855e37765700f2cd061ca54b01b33878cf5c7677e","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"4632665b87204bb1caa8b44d165bce0c50dfab177df5b561b345a567cabacf9a","affectsGlobalScope":true},"675e702f2032766a91eeadee64f51014c64688525da99dccd8178f0c599f13a8","438284c7c455a29b9c0e2d1e72abc62ee93d9a163029ffe918a34c5db3b92da2","0c75b204aed9cf6ff1c7b4bed87a3ece0d9d6fc857a6350c0c95ed0c38c814e8","187119ff4f9553676a884e296089e131e8cc01691c546273b1d0089c3533ce42","c24ad9be9adf28f0927e3d9d9e9cec1c677022356f241ccbbfb97bfe8fb3d1a1","0ec0998e2d085e8ea54266f547976ae152c9dd6cdb9ac4d8a520a230f5ebae84","9364c7566b0be2f7b70ff5285eb34686f83ccb01bda529b82d23b2a844653bfb","00baffbe8a2f2e4875367479489b5d43b5fc1429ecb4a4cc98cfc3009095f52a","82251920b05f30981c9a4109cb5f3169dce4b477effc845c6d781044a30e7672","3c92b6dfd43cc1c2485d9eba5ff0b74a19bb8725b692773ef1d66dac48cda4bd","3e59f00ab03c33717b3130066d4debb272da90eeded4935ff0604c2bc25a5cae","9fa6b83a35e897f340858995ca5d77e901d89fd18644cd4c9e8a4afe0b2e6363",{"version":"0714e2046df66c0e93c3330d30dbc0565b3e8cd3ee302cf99e4ede6220e5fec8","affectsGlobalScope":true},{"version":"ecf78e637f710f340ec08d5d92b3f31b134a46a4fcf2e758690d8c46ce62cba6","affectsGlobalScope":true},"381899b8d1d4c1be716f18cb5242ba39f66f4b1e31d45af62a32a99f8edcb39d","f7b46d22a307739c145e5fddf537818038fdfffd580d79ed717f4d4d37249380","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"1bc82f5b3bb93df76d19730c84467b0b346187198537135d63a672956f323720","affectsGlobalScope":true},"7ce243bcd20de992c3a726853892d2580c4ac0fde907920f93326ef51caac0ad","9e25da9dafdb1e51f83d551cdaf14b9f0b30bad86770ac23a25f413113010ac6","06323fb2db304c937fdcb3d840a4b14da96b4d26751fd277c0485f979311e507","75b8d3bc938a56af7454fa9ad2f29549e5f1260bfe8091a7d666fcd95c500a2e","9f5e49c49eadf457b182011135305f7290bd41fcba43cfda9c8934c9b6052a7f"],"options":{"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"declarationDir":"./build-types","declarationMap":true,"emitDeclarationOnly":true,"esModuleInterop":false,"importsNotUsedAsValues":2,"jsx":1,"module":99,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noUnusedLocals":true,"noUnusedParameters":true,"rootDir":"./src","strict":true,"target":99},"fileIdsList":[[45,47,48,49,50,51,52,53,54,55,56,57],[45,46,48,49,50,51,52,53,54,55,56,57],[46,47,48,49,50,51,52,53,54,55,56,57],[45,46,47,49,50,51,52,53,54,55,56,57],[45,46,47,48,50,51,52,53,54,55,56,57],[45,46,47,48,49,51,52,53,54,55,56,57],[45,46,47,48,49,50,52,53,54,55,56,57],[45,46,47,48,49,50,51,53,54,55,56,57],[45,46,47,48,49,50,51,52,54,55,56,57],[45,46,47,48,49,50,51,52,53,55,56,57],[45,46,47,48,49,50,51,52,53,54,56,57],[45,46,47,48,49,50,51,52,53,54,55,57],[45,46,47,48,49,50,51,52,53,54,55,56],[58,59,60,61],[57,63,66],[65],[63,64],[57,63],[62]],"referencedMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[67,15],[66,16],[65,17],[64,18],[63,19]],"exportedModulesMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[67,15],[66,16],[65,17],[64,18],[63,19]],"semanticDiagnosticsPerFile":[46,47,45,48,49,50,51,52,53,54,55,56,57,60,58,62,59,61,10,12,11,2,13,14,15,16,17,18,19,20,3,4,24,21,22,23,25,26,27,5,28,29,30,31,6,32,33,34,35,7,40,36,37,38,39,8,41,42,43,1,9,44,67,66,65,64,63]},"version":"4.4.2"}