[enforce-longhand] borderMode config option (#895)

* #830 add borderMode config option to enforce-longhands closes #830 * fix deps * fix action * revert to old action
robinweser · Apr 6, 2022 · 9aeea63 · 9aeea63 · vercel · Apr 6, 2022
1 parent f9468b6
commit 9aeea63
Show file tree

Hide file tree

Showing 6 changed files with 396 additions and 84 deletions.
diff --git a/packages/fela-enforce-longhands/README.md b/packages/fela-enforce-longhands/README.md
@@ -52,6 +52,29 @@ const renderer = createRenderer({
 })
 ```
 
+### Configuration
+
+#### Options
+
+| Property   | Type                                  | Default | Description                                                                                                                                                                                                                                                                                       |
+| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderMode | `none` \| `directional` \| `longhand` | `none`  | Defines which border properties take priority.<br />`none` will treat both second level properties (e.g. `border-width` or `border-top`) the same.<br />`directional` will prioritize e.g. `border-top` over `border-width`<br />`longhand` will prioritize e.g. `border-width` over `border-top` |
+
+#### Example
+
+```javascript
+import { createRenderer } from 'fela'
+import enforceLonghands from 'fela-enforce-longhands'
+
+const renderer = createRenderer({
+  enhancers: [
+    enforceLonghands({
+      borderMode: 'directional',
+    }),
+  ],
+})
+```
+
 ## License
 
 Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>

diff --git a/packages/fela-enforce-longhands/package.json b/packages/fela-enforce-longhands/package.json
@@ -23,7 +23,7 @@
     "watch": "npm run watch:lib & npm run watch:es",
     "watch:lib": "BABEL_ENV=commonjs babel src -d lib -w",
     "watch:es": "babel src -d es -w",
-    "test": "echo 1",
+    "test": "jest --config=jest.config.js",
     "coverage": "pnpm test --coverage"
   },
   "repository": "https://github.com/robinweser/fela/",
@@ -49,6 +49,7 @@
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^6.0.3",
+    "fela": "^12.0.2",
     "jest": "^26.6.0",
     "rimraf": "^3.0.0",
     "webpack": "^4.41.6",

diff --git a/packages/fela-enforce-longhands/src/__tests__/__snapshots__/index-test.js.snap b/packages/fela-enforce-longhands/src/__tests__/__snapshots__/index-test.js.snap
@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`enforceLonghands enhancer should accept a borderMode=directional configuration 1`] = `
+Object {
+  "animationDelay": 2,
+  "animationDirection": 2,
+  "animationDuration": 2,
+  "animationFillMode": 2,
+  "animationIterationCount": 2,
+  "animationName": 2,
+  "animationPlayState": 2,
+  "animationTimingFunction": 2,
+  "backgroundClip": 2,
+  "backgroundColor": 2,
+  "backgroundImage": 2,
+  "backgroundOrigin": 2,
+  "backgroundPosition": 2,
+  "backgroundRepeat": 2,
+  "backgroundSize": 2,
+  "borderBottom": 3,
+  "borderBottomColor": 4,
+  "borderBottomLeftRadius": 2,
+  "borderBottomRightRadius": 2,
+  "borderBottomStyle": 4,
+  "borderBottomWidth": 4,
+  "borderColor": 2,
+  "borderImageOutset": 2,
+  "borderImageRepeat": 2,
+  "borderImageSlice": 2,
+  "borderImageSource": 2,
+  "borderImageWidth": 2,
+  "borderLeft": 3,
+  "borderLeftColor": 4,
+  "borderLeftStyle": 4,
+  "borderLeftWidth": 4,
+  "borderRight": 3,
+  "borderRightColor": 4,
+  "borderRightStyle": 4,
+  "borderRightWidth": 4,
+  "borderStyle": 2,
+  "borderTop": 3,
+  "borderTopColor": 4,
+  "borderTopLeftRadius": 2,
+  "borderTopRightRadius": 2,
+  "borderTopStyle": 4,
+  "borderTopWidth": 4,
+  "borderWidth": 2,
+  "columnCount": 2,
+  "columnWidth": 2,
+  "flexBasis": 2,
+  "flexShrink": 2,
+  "flexWrap": 2,
+  "listStyleImage": 2,
+  "listStylePosition": 2,
+  "listStyleType": 2,
+  "marginBottom": 2,
+  "marginLeft": 2,
+  "marginRight": 2,
+  "marginTop": 2,
+  "outlineColor": 2,
+  "outlineStyle": 2,
+  "outlineWidth": 2,
+  "overflowX": 2,
+  "overflowY": 2,
+  "paddingBottom": 2,
+  "paddingLeft": 2,
+  "paddingRight": 2,
+  "paddingTop": 2,
+  "textDecorationColor": 2,
+  "textDecorationLine": 2,
+  "textDecorationStyle": 2,
+  "transitionDelay": 2,
+  "transitionDuration": 2,
+  "transitionProperty": 2,
+  "transitionTimingFunction": 2,
+}
+`;
+
+exports[`enforceLonghands enhancer should accept a borderMode=longhand configuration 1`] = `
+Object {
+  "animationDelay": 2,
+  "animationDirection": 2,
+  "animationDuration": 2,
+  "animationFillMode": 2,
+  "animationIterationCount": 2,
+  "animationName": 2,
+  "animationPlayState": 2,
+  "animationTimingFunction": 2,
+  "backgroundClip": 2,
+  "backgroundColor": 2,
+  "backgroundImage": 2,
+  "backgroundOrigin": 2,
+  "backgroundPosition": 2,
+  "backgroundRepeat": 2,
+  "backgroundSize": 2,
+  "borderBottom": 2,
+  "borderBottomColor": 4,
+  "borderBottomLeftRadius": 2,
+  "borderBottomRightRadius": 2,
+  "borderBottomStyle": 4,
+  "borderBottomWidth": 4,
+  "borderColor": 3,
+  "borderImageOutset": 2,
+  "borderImageRepeat": 2,
+  "borderImageSlice": 2,
+  "borderImageSource": 2,
+  "borderImageWidth": 2,
+  "borderLeft": 2,
+  "borderLeftColor": 4,
+  "borderLeftStyle": 4,
+  "borderLeftWidth": 4,
+  "borderRight": 2,
+  "borderRightColor": 4,
+  "borderRightStyle": 4,
+  "borderRightWidth": 4,
+  "borderStyle": 3,
+  "borderTop": 2,
+  "borderTopColor": 4,
+  "borderTopLeftRadius": 2,
+  "borderTopRightRadius": 2,
+  "borderTopStyle": 4,
+  "borderTopWidth": 4,
+  "borderWidth": 3,
+  "columnCount": 2,
+  "columnWidth": 2,
+  "flexBasis": 2,
+  "flexShrink": 2,
+  "flexWrap": 2,
+  "listStyleImage": 2,
+  "listStylePosition": 2,
+  "listStyleType": 2,
+  "marginBottom": 2,
+  "marginLeft": 2,
+  "marginRight": 2,
+  "marginTop": 2,
+  "outlineColor": 2,
+  "outlineStyle": 2,
+  "outlineWidth": 2,
+  "overflowX": 2,
+  "overflowY": 2,
+  "paddingBottom": 2,
+  "paddingLeft": 2,
+  "paddingRight": 2,
+  "paddingTop": 2,
+  "textDecorationColor": 2,
+  "textDecorationLine": 2,
+  "textDecorationStyle": 2,
+  "transitionDelay": 2,
+  "transitionDuration": 2,
+  "transitionProperty": 2,
+  "transitionTimingFunction": 2,
+}
+`;
+
+exports[`enforceLonghands enhancer should correctly apply property priority 1`] = `
+Object {
+  "animationDelay": 2,
+  "animationDirection": 2,
+  "animationDuration": 2,
+  "animationFillMode": 2,
+  "animationIterationCount": 2,
+  "animationName": 2,
+  "animationPlayState": 2,
+  "animationTimingFunction": 2,
+  "backgroundClip": 2,
+  "backgroundColor": 2,
+  "backgroundImage": 2,
+  "backgroundOrigin": 2,
+  "backgroundPosition": 2,
+  "backgroundRepeat": 2,
+  "backgroundSize": 2,
+  "borderBottom": 2,
+  "borderBottomColor": 3,
+  "borderBottomLeftRadius": 2,
+  "borderBottomRightRadius": 2,
+  "borderBottomStyle": 3,
+  "borderBottomWidth": 3,
+  "borderColor": 2,
+  "borderImageOutset": 2,
+  "borderImageRepeat": 2,
+  "borderImageSlice": 2,
+  "borderImageSource": 2,
+  "borderImageWidth": 2,
+  "borderLeft": 2,
+  "borderLeftColor": 3,
+  "borderLeftStyle": 3,
+  "borderLeftWidth": 3,
+  "borderRight": 2,
+  "borderRightColor": 3,
+  "borderRightStyle": 3,
+  "borderRightWidth": 3,
+  "borderStyle": 2,
+  "borderTop": 2,
+  "borderTopColor": 3,
+  "borderTopLeftRadius": 2,
+  "borderTopRightRadius": 2,
+  "borderTopStyle": 3,
+  "borderTopWidth": 3,
+  "borderWidth": 2,
+  "columnCount": 2,
+  "columnWidth": 2,
+  "flexBasis": 2,
+  "flexShrink": 2,
+  "flexWrap": 2,
+  "listStyleImage": 2,
+  "listStylePosition": 2,
+  "listStyleType": 2,
+  "marginBottom": 2,
+  "marginLeft": 2,
+  "marginRight": 2,
+  "marginTop": 2,
+  "outlineColor": 2,
+  "outlineStyle": 2,
+  "outlineWidth": 2,
+  "overflowX": 2,
+  "overflowY": 2,
+  "paddingBottom": 2,
+  "paddingLeft": 2,
+  "paddingRight": 2,
+  "paddingTop": 2,
+  "textDecorationColor": 2,
+  "textDecorationLine": 2,
+  "textDecorationStyle": 2,
+  "transitionDelay": 2,
+  "transitionDuration": 2,
+  "transitionProperty": 2,
+  "transitionTimingFunction": 2,
+}
+`;
diff --git a/packages/fela-enforce-longhands/src/__tests__/index-test.js b/packages/fela-enforce-longhands/src/__tests__/index-test.js
@@ -0,0 +1,37 @@
+import { createRenderer } from 'fela'
+
+import enforceLonghands from '../index'
+
+describe('enforceLonghands enhancer', () => {
+  it('should correctly apply property priority', () => {
+    const renderer = createRenderer({
+      enhancers: [enforceLonghands()],
+    })
+
+    expect(renderer.propertyPriority).toMatchSnapshot()
+  })
+
+  it('should accept a borderMode=longhand configuration', () => {
+    const renderer = createRenderer({
+      enhancers: [
+        enforceLonghands({
+          borderMode: 'longhand',
+        }),
+      ],
+    })
+
+    expect(renderer.propertyPriority).toMatchSnapshot()
+  })
+
+  it('should accept a borderMode=directional configuration', () => {
+    const renderer = createRenderer({
+      enhancers: [
+        enforceLonghands({
+          borderMode: 'directional',
+        }),
+      ],
+    })
+
+    expect(renderer.propertyPriority).toMatchSnapshot()
+  })
+})