CSS Duplication reduction - Optimize styles on post build

[softmarshmallow]

May have major impacts on d2c sdk users - Assistant, ..

CSS Optimization - Duplication reduction

Supports styled components duplication on copied element (rather it is component/instance or not - simply copied)

Reduces the output code size dramatically on screens containing list-like repetitive patterns by 50%

Before (Without duplication reduction)

import React from "react";
import styled from "styled-components";

export function List () {
	return (	
		<RootWrapperList>
	    <Rectangle01/>
		  <Rectangle02/>
		  <Rectangle03/>
		  <Rectangle04/>
		  <Rectangle05/>
		  <Rectangle06/>
		  <Rectangle07/>
	  </RootWrapperList>	
	)
}

const RootWrapperList = styled.div`
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	box-shadow: 0px 4px 32px  rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	min-height: 100vh;
	background-color: white;
	box-sizing: border-box;
	padding: 8px;
`;

const Rectangle01 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

const Rectangle02 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

const Rectangle03 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

const Rectangle04 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

const Rectangle05 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

const Rectangle06 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

const Rectangle07 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

After (With duplication reduction)

import React from "react";
import styled from "styled-components";

export function List () {
	return (	
		<RootWrapperList>
	    <Rectangle01/>
		  <Rectangle01/>
		  <Rectangle01/>
		  <Rectangle01/>
		  <Rectangle01/>
		  <Rectangle01/>
		  <Rectangle01/>
	  </RootWrapperList>	
	)
}

const RootWrapperList = styled.div`
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	box-shadow: 0px 4px 32px  rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	min-height: 100vh;
	background-color: white;
	box-sizing: border-box;
	padding: 8px;
`;

const Rectangle01 = styled.div`
	height: 100px;
	background-color: rgb(196, 196, 196);
	align-self: stretch;
	flex-shrink: 0;
`;

How to use?

No extra steps required. we will automatically reduce the output size with matching name & style. If you want to reuse the style across the layers, simply give it a same name.

Same name + Same style ⇒ Reduction

Different name + Same style ⇒ No

Same name + Different style ⇒ No

Where same name can have suffix patterns like Rect 1 ~ Rect 99 or List ~ List_2

Limitations

This only works with below configurations

• React + styled-components
• React + @emotion/styled
• React native + styled-components/native
• React native + Stylesheet (default)
• React + css modules
• Vanilla Html/Css

Other configuration / frameworks requires extra variable declaration to do this, we will support this in the near feature with components support.

TODO

• for shared Text styles (extended logics) (next time)
• for shared layouts (extended logics) (next time)
• for inline css (react, react-native) (next time)

Note

While reducing the duplication, from the second duplicated element will fallback to the first element’s name. To make the output more semantic, you can give the duplicated layers a organized, repeating name like - container1, container2 rather than rectangle 192, rectangle 991 - which it will also work for this (if two has the same style)

Look

70 to 37 Lines ~= 52%

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/grida/designto-codes/Cgp9DJ5KPk5iAug5jTjNHPFUnFKY
✅ Preview: https://designto-codes-git-optimize-style-on-post-build-grida.vercel.app