feat(injection): hierarchic specificity emulation

kripod · Apr 19, 2020 · 2e2e0fd · 2e2e0fd
1 parent 99ad114
commit 2e2e0fd
Showing 1 changed file with 49 additions and 47 deletions.
diff --git a/packages/glaze/src/useStyling.ts b/packages/glaze/src/useStyling.ts
@@ -13,52 +13,54 @@ import { StyleInjectorContext } from './StyleInjectorContext';
 import { useTheme } from './ThemeContext';
 import styleRefs from './useStyling.treat';
 
-const shorthandProperties = new Set([
-  'all',
-  'animation',
-  'background',
-  'border',
-  'borderBlock',
-  'borderBlockEnd',
-  'borderBlockStart',
-  'borderBottom',
-  'borderColor',
-  'borderImage',
-  'borderInline',
-  'borderInlineEnd',
-  'borderInlineStart',
-  'borderLeft',
-  'borderRadius',
-  'borderRight',
-  'borderStyle',
-  'borderTop',
-  'borderWidth',
-  'columnRule',
-  'columns',
-  'flex',
-  'flexFlow',
-  'font',
-  'gap',
-  'grid',
-  'gridArea',
-  'gridColumn',
-  'gridRow',
-  'gridTemplate',
-  'lineClamp',
-  'listStyle',
-  'margin',
-  'mask',
-  'maskBorder',
-  'motion',
-  'offset',
-  'outline',
-  'overflow',
-  'padding',
-  'placeItems',
-  'placeSelf',
-  'textDecoration',
-  'textEmphasis',
-  'transition',
+const shorthandProperties = new Map([
+  ['all', 1],
+  ['animation', 1],
+  ['background', 1],
+  ['border', 1],
+  // TODO:
+  // ['borderBlock', 2],
+  // ['borderBlockEnd', 3],
+  // ['borderBlockStart', 3],
+  ['borderBottom', 2],
+  ['borderColor', 2],
+  ['borderImage', 2],
+  // TODO:
+  // ['borderInline', 2],
+  // ['borderInlineEnd', 3],
+  // ['borderInlineStart', 3],
+  ['borderLeft', 2],
+  ['borderRadius', 2],
+  ['borderRight', 2],
+  ['borderStyle', 2],
+  ['borderTop', 2],
+  ['borderWidth', 2],
+  ['columnRule', 1],
+  ['columns', 1],
+  ['flex', 1],
+  ['flexFlow', 1],
+  ['font', 1],
+  ['gap', 1],
+  ['grid', 1],
+  ['gridArea', 1],
+  ['gridColumn', 2],
+  ['gridRow', 2],
+  ['gridTemplate', 1],
+  ['lineClamp', 1],
+  ['listStyle', 1],
+  ['margin', 1],
+  ['mask', 1],
+  ['maskBorder', 2],
+  ['offset', 1],
+  ['outline', 1],
+  ['overflow', 1],
+  ['padding', 1],
+  ['placeContent', 1],
+  ['placeItems', 1],
+  ['placeSelf', 1],
+  ['textDecoration', 1],
+  ['textEmphasis', 1],
+  ['transition', 1],
 ]);
 
 function kebabCaseReplacer(match: string): string {
@@ -137,7 +139,7 @@ export function useStyling(): (themedStyle: ThemedStyle) => string {
               // Increase specificity of rules for non-shorthand CSS properties
               const selector = `.${
                 isDev ? escape(appendedClassName) : appendedClassName
-              }`.repeat(shorthandProperties.has(key) ? 1 : 2);
+              }`.repeat(shorthandProperties.get(key) || 3);
               return `${selector}{${
                 // TODO: Abstract this logic away to a utility function
                 // Convert CSS property to kebab-case and normalize numeric value