feat(atomizer): add calculatePercentage rule param (#485)

acss-io · Aug 23, 2022 · a6fdfc9 · a6fdfc9
1 parent b132457
commit a6fdfc9
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 1 deletion.
diff --git a/.changeset/twelve-walls-act.md b/.changeset/twelve-walls-act.md
@@ -0,0 +1,5 @@
+---
+'atomizer': minor
+---
+
+feat(atomizer): add calculatePercentage rule param
diff --git a/docs/guides/custom-classes.md b/docs/guides/custom-classes.md
@@ -176,6 +176,28 @@ Will translate to `transform-origin: left bottom`.
 <h1 class="H(20px)">Hello world!</h1>
 ```
 
+### calculatePercentage
+
+-   **Type**: `boolean`
+-   **Default**: `true`
+-   **Required**: `false`
+
+Allows Atomizer to calculate the quotient of a given fraction into a percentage (e.g. `W(1/2`) -> `W(50%)`). Some CSS properties like `aspect-ratio` will want to maintain the fraction and can disable the calculation by changing `calculatePercentage` to `false`.
+
+```json
+{
+    calculatePercentage: false,
+    matcher: 'Ar',
+    styles: {
+        'aspect-ratio': '$0',
+    },
+}
+```
+
+```html
+<div class="Ar(16/9)"></div>
+```
+
 ### description
 
 -   **Type**: `string`

diff --git a/packages/atomizer/src/atomizer.js b/packages/atomizer/src/atomizer.js
@@ -276,7 +276,7 @@ Atomizer.prototype.parseConfig = function (config /*:AtomizerConfig*/, options /
                         matchVal.groups.named = [matchVal.groups.number, matchVal.groups.unit].join('');
                     }
                 }
-                if (matchVal.groups.fraction) {
+                if (matchVal.groups.fraction && rule.calculatePercentage !== false) {
                     // multiplying by 100 then by 10000 on purpose (instead of just multiplying by 1M),
                     // making clear the steps involved:
                     // percentage: (numerator / denominator * 100)

diff --git a/packages/atomizer/src/rules.js b/packages/atomizer/src/rules.js
@@ -216,6 +216,7 @@ module.exports = [
         type: 'pattern',
         name: 'Aspect ratio',
         matcher: 'Ar',
+        calculatePercentage: false,
         allowParamToValue: false,
         styles: {
             'aspect-ratio': '$0',

diff --git a/packages/atomizer/tests/atomizer.test.js b/packages/atomizer/tests/atomizer.test.js
@@ -583,9 +583,13 @@ describe('Atomizer()', () => {
                     'W(1/3)',
                     'Bgz(45px)',
                     'C(#FFF)',
+                    'Ar(16/9)',
                 ],
             };
             const expected = [
+                '.Ar\\(16\\/9\\) {',
+                '  aspect-ratio: 16/9;',
+                '}',
                 '.Bd\\(0\\) {',
                 '  border: 0;',
                 '}',