Compress atomic class names #1408

liamqma · 2023-02-06T03:32:41Z

This PR does

updates ax function to accept short class name
updates babel-plugin to compress class names based on pre-bundling hash map
generates compression map

changeset-bot · 2023-02-06T03:32:44Z

🦋 Changeset detected

Latest commit: 62aab19

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@compiled/parcel-transformer	Minor
@compiled/webpack-loader	Minor
@compiled/babel-plugin	Minor
@compiled/react	Minor
@compiled/css	Minor
@compiled/parcel-config	Patch
@compiled/parcel-optimizer-test-app	Patch
@compiled/parcel-transformer-test-app	Patch
@compiled/parcel-transformer-test-custom-resolver-app	Patch
@compiled/parcel-transformer-test-extract-app	Patch
@compiled/parcel-optimizer	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

liamqma · 2023-02-06T03:36:05Z

TODO

Look into the possibility of class name clash with other CS libraries (styled-components and emotion)
Changeset
Parcel integration
Turn off the feature if stylesheet extraction is off

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

packages/react/src/runtime/__tests__/ax.test.ts

pancaspe87 · 2023-02-08T05:45:24Z

packages/react/src/runtime/__tests__/ax.test.ts

+      '_aaaacccc',
+    ],
+    [
+      'should ensure the last atomic declaration of a single group with short class name wins',


I haven't followed up the previous PRs and I am still wrapping my head around these changes. Hence, apologies if this was mentioned somewhere else

I am assuming that:

_aaaabbbb is the CSS class with no manipulation

a is the optimised class, which is stored in the map

_aaaa_a is made of atomic group + optimised class -> in this way we are able to handle overrides

Yes, spot on!

pancaspe87 · 2023-02-08T05:47:47Z

examples/webpack/class-name-compression-map.json

@@ -0,0 +1,27 @@
+{
+  "1wyb12am": "a",


Where/how does this map get generated?

Good question! For now it's assumed that library consumers manually curate the map and pass it to the babel-plugin. We will later create an automatic method to generate the map by statically analysing the codebase, and the map should be periodically updated by a build.

pancaspe87 · 2023-02-08T05:50:36Z

packages/babel-plugin/src/__tests__/index.test.ts

@@ -201,4 +201,166 @@ describe('babel plugin', () => {

    expect(actual).toInclude('c_MyDiv');
  });
+


Do we still have cases where compression is not safe, hence we should bail out?

Compression should be safe everywhere now.

…s to support conditional CSS

liamqma · 2023-02-09T05:03:05Z

packages/babel-plugin/src/class-names/index.ts

-        builtCss.css.map((x) => getItemCss(x)).join(''),
-        meta.state.opts
-      );
+      const { sheets, classNames } = transformCssItems(builtCss.css, meta);


The change in this file is to ensure <ClassNames> handles conditional CSS rules.
i.e.

<ClassNames> {({ css }) => (<div className={css({ ...props.isPrimary && { color: 'blue' }})}>hello, world!</div>)} </ClassNames>

liamqma · 2023-02-09T05:13:02Z

packages/css/src/plugins/atomicify-rules.ts

+    const compressedClassName =
+      classNameCompressionMap && classNameCompressionMap[fullClassName.slice(1)];
+
+    if (compressedClassName) {


If compressed class name is available, we are replacing full class name with the compressed in the sheet.
So

.aaaabbbb { font-size: 10px }

becomes

.a { font-size: 10px }

It will reduce the size of stylesheet but will break if we don't replace every occurrence of _aaaabbbb, which I should have done in this PR. 🤞

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Bump node version to v18 * Bump import jsx * Bump nvmrc node version from 18.12 to 18.14 * Add changeset for PR #1392 --------- Co-authored-by: Grant Wong <gwong2@atlassian.com>

* chore(deps): update parcel packages * Add dummy generic type so optimizer works with parcel v2.8.0+ Parcel v2.8.0 adds a BundleConfigType generic type to Optimizer (parcel-bundler/parcel#8370) as part of their `loadBundleConfig` method. We use a dummy type because we don't need this functionality currently. * Update snapshot tests for Parcel 2.8.3 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Grant Wong <gwong2@atlassian.com>

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency jest to v29 * Update snapshots and node env for some tests --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jake Lane <jlane2@atlassian.com>

Co-authored-by: Grant Wong <2908767+dddlr@users.noreply.github.com>

…s to support conditional CSS

dddlr · 2023-02-16T23:46:46Z

Thank you Liam for updating the PR :) This looks good to me, but I'll wait for an approval from @JakeLane or @pancaspe87 too since I don't have a good understanding of the whole codebase

AtlassianRubberDuck added 6 commits January 25, 2023 09:47

Update 'ax' to accept short class name

e2abdb1

Update 'ax' flow type and up the size limit

ccbef95

Add benchmark test to test ax(compressed class names)

b7b8602

Change the format of compress class names

1e2b969

Restore Flow type

f9c1e77

Compress class names

46fbdee

liamqma requested review from MonicaOlejniczak, JakeLane, at-nathan and pancaspe87 as code owners February 6, 2023 03:32

liamqma mentioned this pull request Feb 6, 2023

Update 'ax' to accept short class name #1396

Closed

AtlassianRubberDuck and others added 3 commits February 6, 2023 14:58

Update snapshot

a0760fb

Merge branch 'master' into compress-atomic-class-names

709f42e

chore(deps): update dependency @types/node to ^18.11.19 (#1407)

9e367ec

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

liamqma requested a review from dddlr February 6, 2023 22:58

AtlassianRubberDuck added 4 commits February 8, 2023 13:28

Turn off compressing class names if stylesheet extraction is off

fa61820

parcel integration

52b4398

Merge branch 'master' into compress-atomic-class-names

f8201eb

Add changeset

4322536

This comment was marked as duplicate.

Sign in to view

pancaspe87 reviewed Feb 8, 2023

View reviewed changes

packages/react/src/runtime/__tests__/ax.test.ts Show resolved Hide resolved

pancaspe87 reviewed Feb 8, 2023

View reviewed changes

liamqma marked this pull request as draft February 9, 2023 00:07

Replace rather than insert class name in the sheet and make ClassName…

c629e8e

…s to support conditional CSS

liamqma commented Feb 9, 2023

View reviewed changes

renovate bot and others added 21 commits February 16, 2023 10:05

chore(deps): update dependency css-what to >=5.1.0 (#1409)

c3a4ac2

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update webpack packages (#1411)

d405481

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Fix transparent and currentcolor not being treated as a color (#1412)

9b94342

chore(deps): update dependency css-what to >=6.1.0 (#1414)

bf5bed3

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Version Packages (#1413)

76e74f2

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

chore(deps): update dependency nth-check to >=2.1.1 (#1415)

703ea6c

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency prettier to ^2.8.4 (#1416)

259be2d

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @types/node to ^18.13.0 (#1417)

5c2bf12

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Bump node version to v18 (#1392)

097cff1

* Bump node version to v18 * Bump import jsx * Bump nvmrc node version from 18.12 to 18.14 * Add changeset for PR #1392 --------- Co-authored-by: Grant Wong <gwong2@atlassian.com>

chore(deps): update eslint packages (#1420)

bf5b751

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency jest to v29 (#1384)

fd93618

* chore(deps): update dependency jest to v29 * Update snapshots and node env for some tests --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jake Lane <jlane2@atlassian.com>

Add Grant Wong as codeowner (#1421)

aad8d3a

Co-authored-by: Grant Wong <2908767+dddlr@users.noreply.github.com>

Replace rather than insert class name in the sheet and make ClassName…

5a26e15

…s to support conditional CSS

Merge branch 'master' into compress-atomic-class-names

956e2fc

Add prefix option and avoid 'ad'

9ef388d

Add comment to ax benchmark

476102c

Make classNameCompressionMap a separate file in parcel example app

f1a69e0

Remove default reservedClassNames

c18666f

Export generateCompressionMap

f4b5e88

Update comment

62aab19

liamqma requested review from dddlr, JakeLane and pancaspe87 February 16, 2023 04:10

JakeLane approved these changes Feb 20, 2023

View reviewed changes

dddlr approved these changes Feb 20, 2023

View reviewed changes

liamqma merged commit f9c957e into master Feb 20, 2023

liamqma deleted the compress-atomic-class-names branch February 20, 2023 03:01

liamqma mentioned this pull request Apr 13, 2023

Introduce ac #1437

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compress atomic class names #1408

Compress atomic class names #1408

liamqma commented Feb 6, 2023 •

edited

changeset-bot bot commented Feb 6, 2023 •

edited

liamqma commented Feb 6, 2023 •

edited

This comment was marked as duplicate.

pancaspe87 Feb 8, 2023

liamqma Feb 8, 2023

pancaspe87 Feb 8, 2023

liamqma Feb 8, 2023 •

edited

pancaspe87 Feb 8, 2023

liamqma Feb 9, 2023

liamqma Feb 9, 2023 •

edited

liamqma Feb 9, 2023

dddlr commented Feb 16, 2023

		@@ -201,4 +201,166 @@ describe('babel plugin', () => {

		expect(actual).toInclude('c_MyDiv');
		});

Compress atomic class names #1408

Compress atomic class names #1408

Conversation

liamqma commented Feb 6, 2023 • edited

changeset-bot bot commented Feb 6, 2023 • edited

🦋 Changeset detected

liamqma commented Feb 6, 2023 • edited

This comment was marked as duplicate.

pancaspe87 Feb 8, 2023

Choose a reason for hiding this comment

liamqma Feb 8, 2023

Choose a reason for hiding this comment

pancaspe87 Feb 8, 2023

Choose a reason for hiding this comment

liamqma Feb 8, 2023 • edited

Choose a reason for hiding this comment

pancaspe87 Feb 8, 2023

Choose a reason for hiding this comment

liamqma Feb 9, 2023

Choose a reason for hiding this comment

liamqma Feb 9, 2023 • edited

Choose a reason for hiding this comment

liamqma Feb 9, 2023

Choose a reason for hiding this comment

dddlr commented Feb 16, 2023

liamqma commented Feb 6, 2023 •

edited

changeset-bot bot commented Feb 6, 2023 •

edited

liamqma commented Feb 6, 2023 •

edited

liamqma Feb 8, 2023 •

edited

liamqma Feb 9, 2023 •

edited