Compress atomic class names

.changeset/grumpy-cows-look.md

@@ -0,0 +1,10 @@
+---
+'@compiled/parcel-transformer': minor
+'@compiled/webpack-loader': minor
+'@compiled/babel-plugin': minor
+'@compiled/react': minor
+'@compiled/css': minor
+---
+
+Add an option to compress class names based on "classNameCompressionMap", which is provided by library consumers.
+Add a script to generate compressed class names.

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   root: true,
   ignorePatterns: [
     'dist',
+    'build',
     'flow-typed',
     '*.d.ts',
     'babel-cjs.js',

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

@@ -0,0 +1,18 @@
+{
+  "1wyb12am": "a",
+  "syaz5scu": "b",
+  "syazruxl": "c",
+  "k48pbfng": "d",
+  "30l35scu": "e",
+  "f8pj13q2": "f",
+  "1e0c1o8l": "g",
+  "ca0qftgi": "h",
+  "u5f3ftgi": "i",
+  "n3tdftgi": "j",
+  "19bvftgi": "k",
+  "19itak0l": "l",
+  "2rko1l7b": "m",
+  "syaz1aj3": "n",
+  "1p1dangw": "o",
+  "bfhkbf54": "p"
+}

examples/parcel/compiledcss.js

@@ -0,0 +1,18 @@
+const classNameCompressionMap = require('./class-name-compression-map.json');
+
+module.exports = {
+  importReact: false,
+  extensions: ['.js', '.jsx', '.ts', '.tsx', '.customjsx'],
+  parserBabelPlugins: ['typescript', 'jsx'],
+  transformerBabelPlugins: [
+    [
+      '@babel/plugin-proposal-decorators',
+      {
+        legacy: true,
+      },
+    ],
+  ],
+  extract: true,
+  optimizeCss: false,
+  classNameCompressionMap: classNameCompressionMap,
+};

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

@@ -0,0 +1,27 @@
+{
+  "1wyb12am": "a",
+  "syaz32ev": "b",
+  "k48pbfng": "c",
+  "30l35scu": "d",
+  "f8pj13q2": "e",
+  "19itptrx": "f",
+  "1kt92a4o": "g",
+  "171dak0l": "h",
+  "1swkri7e": "i",
+  "1tjq14ap": "j",
+  "yzbc5scu": "k",
+  "19pk1ul9": "l",
+  "syaz13q2": "m",
+  "1wyb1ul9": "n",
+  "19itlf8h": "o",
+  "ca0q1vi7": "p",
+  "u5f31vi7": "q",
+  "n3td1vi7": "r",
+  "19bv1vi7": "s",
+  "k48p1fw0": "t",
+  "syaz1cnh": "u",
+  "19it1srw": "v",
+  "bfhk1j28": "w",
+  "syazruxl": "x",
+  "bfhkbf54": "y"
+}

examples/webpack/webpack.config.js

@@ -7,6 +7,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
 
+const classNameCompressionMap = require('./class-name-compression-map.json');
+
 const extractCSS = process.env.EXTRACT_TO_CSS === 'true';
 
 module.exports = {
@@ -40,6 +42,7 @@ module.exports = {
               parserBabelPlugins: ['typescript', 'jsx'],
               transformerBabelPlugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
               optimizeCss: false,
+              classNameCompressionMap,
             },
           },
         ],

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

@@ -201,4 +201,160 @@ describe('babel plugin', () => {
 
     expect(actual).toInclude('c_MyDiv');
   });
+
+  it('should compress class name for styled component', () => {
+    const actual = transform(
+      `
+      import { styled } from '@compiled/react';
+
+      const MyDiv = styled.div\`
+        font-size: 12px;
+      \`;
+    `,
+      {
+        classNameCompressionMap: {
+          '1wyb1fwx': 'a',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple(['.a{font-size:12px}', 'ax(["_1wyb_a", __cmplp.className])']);
+  });
+
+  it('should compress class name for css props', () => {
+    const actual = transform(
+      `
+      import '@compiled/react';
+
+      <div css={{ fontSize: 12 }} />
+    `,
+      {
+        classNameCompressionMap: {
+          '1wyb1fwx': 'a',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple(['.a{font-size:12px}', 'ax(["_1wyb_a"])']);
+  });
+
+  it('should compress class name for ClassNames', () => {
+    const actual = transform(
+      `
+      import { ClassNames } from '@compiled/react';
+
+      <ClassNames>
+        {({ css }) => (
+          <div className={css({ fontSize: 12 })} />
+        )}
+      </ClassNames>
+    `,
+      {
+        classNameCompressionMap: {
+          '1wyb1fwx': 'a',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple(['.a{font-size:12px}', 'className={ax(["_1wyb_a"])']);
+  });
+
+  it('should compress class names with atrules', () => {
+    const actual = transform(
+      `
+      import '@compiled/react';
+      <div css={{ "@media (max-width: 1250px) ": { fontSize: 12 } }} />
+    `,
+      {
+        classNameCompressionMap: {
+          pz521fwx: 'a',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple([
+      '@media (max-width:1250px){.a{font-size:12px}}',
+      'ax(["_pz52_a"])',
+    ]);
+  });
+
+  it('should compress pseudo classes', () => {
+    const actual = transform(
+      `
+      import '@compiled/react';
+      <div css={{ "&:hover": { fontSize: 12 }, "&:active": { color: 'red' } }} />
+    `,
+      {
+        classNameCompressionMap: {
+          '9h8h5scu': 'a',
+          e9151fwx: 'b',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple([
+      '.a:active{color:red}',
+      '.b:hover{font-size:12px}',
+      'ax(["_e915_b _9h8h_a"])',
+    ]);
+  });
+
+  it('should compress nested selector', () => {
+    const actual = transform(
+      `
+      import '@compiled/react';
+      <div css={{ '>div': { 'div div:hover': { fontSize: 12 } } }} />
+    `,
+      {
+        classNameCompressionMap: {
+          '1jkf1fwx': 'a',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple(['.a >div div div:hover{font-size:12px}', 'ax(["_1jkf_a"]']);
+  });
+
+  it('should compress conditional class names', () => {
+    const actual = transform(
+      `
+      import '@compiled/react';
+      <div css={[{ fontSize: ({ bar }) => bar ? 14 : 16 }, () => foo ? { fontSize: 12 } : {}, baz && { fontSize: 20 }]} />
+    `,
+      {
+        classNameCompressionMap: {
+          '1wyb19ub': 'a',
+          '1wyb1fwx': 'b',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple([
+      '.a{font-size:16}',
+      '.b{font-size:12px}',
+      'bar ? "_1wyb1o8a" : "_1wyb_a"',
+      'foo && "_1wyb_b"',
+    ]);
+  });
+
+  it('should compress class names according to the map', () => {
+    const actual = transform(
+      `
+      import '@compiled/react';
+      <div css={{ fontSize: 12, color: 'red', marginTop: 10 }} />
+    `,
+      {
+        classNameCompressionMap: {
+          syaz5scu: 'a',
+        },
+      }
+    );
+
+    expect(actual).toIncludeMultiple([
+      '._19pk19bv{margin-top:10px}',
+      '.a{color:red}',
+      '._1wyb1fwx{font-size:12px}',
+      'ax(["_1wyb1fwx _syaz_a _19pk19bv"]',
+    ]);
+  });
 });

packages/babel-plugin/src/__tests__/jsx-automatic.test.ts

@@ -49,7 +49,7 @@ describe('jsx automatic', () => {
             children: [_],
           }),
           _jsx("div", {
-            className: "_syaz13q2",
+            className: ax(["_syaz13q2"]),
           }),
         ],
       });