Merge pull request #287 from jaredh159/issue-285

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
     name: test
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: bahmutov/npm-install@v1
         with:
           install-command: npm i --legacy-peer-deps

.npmignore

@@ -7,3 +7,5 @@ src/
 tsconfig.json
 tsconfig.cjs.json
 babel.config.js
+.prettierignore
+.prettierrc.json

.prettierignore

@@ -0,0 +1 @@
+dist/*

src/ClassParser.ts

@@ -146,8 +146,8 @@ export default class ClassParser {
           const style = spacing(
             prop,
             spacingDirection,
-            this.isNegative,
             this.rest,
+            this.context,
             this.config.theme?.[prop],
           );
           if (style) return style;

src/__tests__/flex.spec.ts

@@ -15,6 +15,7 @@ describe(`flex grow/shrink`, () => {
     [`grow`, { flexGrow: 1 }],
     [`grow-0`, { flexGrow: 0 }],
     [`grow-33`, { flexGrow: 33 }],
+    [`grow-[33]`, { flexGrow: 33 }],
     [`shrink`, { flexShrink: 1 }],
     [`shrink-0`, { flexShrink: 0 }],
     [`shrink-77`, { flexShrink: 77 }],

src/__tests__/margin.spec.ts

@@ -3,7 +3,10 @@ import { create } from '../';
 
 describe(`margin`, () => {
   let tw = create();
-  beforeEach(() => (tw = create()));
+  beforeEach(() => {
+    tw = create();
+    tw.setWindowDimensions({ width: 800, height: 600 });
+  });
 
   const cases: Array<[string, Record<string, string | number>]> = [
     [
@@ -31,6 +34,9 @@ describe(`margin`, () => {
     [`mt-px`, { marginTop: 1 }],
     [`ml-[333px]`, { marginLeft: 333 }],
     [`-ml-1`, { marginLeft: -4 }],
+    [`mb-[100vh]`, { marginBottom: 600 }],
+    [`ml-[100vw]`, { marginLeft: 800 }],
+    [`mr-[1vw]`, { marginRight: 8 }],
   ];
 
   test.each(cases)(`tw\`%s\` -> %s`, (utility, expected) => {

src/resolve/flex.ts

@@ -8,6 +8,9 @@ export function flexGrowShrink(
   config?: TwTheme['flexGrow'] | TwTheme['flexShrink'],
 ): StyleIR | null {
   value = value.replace(/^-/, ``);
+  if (value[0] === `[` && value.endsWith(`]`)) {
+    value = value.slice(1, -1);
+  }
   const configKey = value === `` ? `DEFAULT` : value;
   const numericValue = Number(config?.[configKey] ?? value);
   if (!Number.isNaN(numericValue)) {

src/resolve/spacing.ts

@@ -1,13 +1,13 @@
 import type { TwTheme } from '../tw-config';
-import type { Direction, StyleIR } from '../types';
+import type { Direction, ParseContext, StyleIR } from '../types';
 import { Unit } from '../types';
 import { parseNumericValue, parseUnconfigged, toStyleVal } from '../helpers';
 
 export default function spacing(
   type: 'margin' | 'padding',
   direction: Direction,
-  isNegative: boolean,
   value: string,
+  context: ParseContext,
   config?: TwTheme['margin'] | TwTheme['padding'],
 ): StyleIR | null {
   let numericValue = ``;
@@ -19,7 +19,7 @@ export default function spacing(
     if (!configValue) {
       const unconfigged = parseUnconfigged(value);
       if (unconfigged && typeof unconfigged === `number`) {
-        return spacingStyle(unconfigged, Unit.px, direction, type);
+        return spacingStyle(unconfigged, Unit.px, direction, type, context);
       }
       return null;
     } else {
@@ -36,21 +36,19 @@ export default function spacing(
     return null;
   }
 
-  let [number, unit] = parsed;
-  if (isNegative) {
-    number = -number;
-  }
+  const [number, unit] = parsed;
 
-  return spacingStyle(number, unit, direction, type);
+  return spacingStyle(number, unit, direction, type, context);
 }
 
 function spacingStyle(
   number: number,
   unit: Unit,
   direction: Direction,
   type: 'margin' | 'padding',
+  context: ParseContext,
 ): StyleIR | null {
-  const pixels = toStyleVal(number, unit);
+  const pixels = toStyleVal(number, unit, context);
   if (pixels === null) {
     return null;
   }