diff --git a/packages/fela-enforce-longhands/README.md b/packages/fela-enforce-longhands/README.md
index 8fc1e05f..0b257fce 100644
--- 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.
`none` will treat both second level properties (e.g. `border-width` or `border-top`) the same.
`directional` will prioritize e.g. `border-top` over `border-width`
`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).
diff --git a/packages/fela-enforce-longhands/package.json b/packages/fela-enforce-longhands/package.json
index deed4054..39b2bb5c 100644
--- 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
new file mode 100644
index 00000000..c9f42ea1
--- /dev/null
+++ 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
new file mode 100644
index 00000000..0139b679
--- /dev/null
+++ 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()
+ })
+})
diff --git a/packages/fela-enforce-longhands/src/index.js b/packages/fela-enforce-longhands/src/index.js
index 972d2a12..cb8c248a 100644
--- a/packages/fela-enforce-longhands/src/index.js
+++ b/packages/fela-enforce-longhands/src/index.js
@@ -1,81 +1,96 @@
-const propertyPriority = {
- marginLeft: 2,
- marginRight: 2,
- marginTop: 2,
- marginBottom: 2,
- paddingLeft: 2,
- paddingRight: 2,
- paddingBottom: 2,
- paddingTop: 2,
- flexWrap: 2,
- flexShrink: 2,
- flexBasis: 2,
- backgroundColor: 2,
- backgroundRepeat: 2,
- backgroundPosition: 2,
- backgroundImage: 2,
- backgroundOrigin: 2,
- backgroundClip: 2,
- backgroundSize: 2,
- transitionProperty: 2,
- transitionTimingFunction: 2,
- transitionDuration: 2,
- transitionDelay: 2,
- animationDelay: 2,
- animationDirection: 2,
- animationDuration: 2,
- animationFillMode: 2,
- animationIterationCount: 2,
- animationName: 2,
- animationPlayState: 2,
- animationTimingFunction: 2,
- borderWidth: 2,
- borderStyle: 2,
- borderColor: 2,
- // these conflict with the longhands above
- borderTop: 2,
- borderRight: 2,
- borderBottom: 2,
- borderLeft: 2,
- borderTopWidth: 3,
- borderTopStyle: 3,
- borderTopColor: 3,
- borderRightWidth: 3,
- borderRightStyle: 3,
- borderRightColor: 3,
- borderBottomWidth: 3,
- borderBottomStyle: 3,
- borderBottomColor: 3,
- borderLeftWidth: 3,
- borderLeftStyle: 3,
- borderLeftColor: 3,
- borderBottomLeftRadius: 2,
- borderBottomRightRadius: 2,
- borderTopLeftRadius: 2,
- borderTopRightRadius: 2,
- borderImageOutset: 2,
- borderImageRepeat: 2,
- borderImageSlice: 2,
- borderImageSource: 2,
- borderImageWidth: 2,
- columnWidth: 2,
- columnCount: 2,
- listStyleImage: 2,
- listStylePosition: 2,
- listStyleType: 2,
- outlineWidth: 2,
- outlineStyle: 2,
- outlineColor: 2,
- overflowX: 2,
- overflowY: 2,
- textDecorationLine: 2,
- textDecorationStyle: 2,
- textDecorationColor: 2,
+function getPropertyPriority({
+ borderLonghand,
+ borderDirectional,
+ borderDirectionalLonghand,
+}) {
+ return {
+ marginLeft: 2,
+ marginRight: 2,
+ marginTop: 2,
+ marginBottom: 2,
+ paddingLeft: 2,
+ paddingRight: 2,
+ paddingBottom: 2,
+ paddingTop: 2,
+ flexWrap: 2,
+ flexShrink: 2,
+ flexBasis: 2,
+ backgroundColor: 2,
+ backgroundRepeat: 2,
+ backgroundPosition: 2,
+ backgroundImage: 2,
+ backgroundOrigin: 2,
+ backgroundClip: 2,
+ backgroundSize: 2,
+ transitionProperty: 2,
+ transitionTimingFunction: 2,
+ transitionDuration: 2,
+ transitionDelay: 2,
+ animationDelay: 2,
+ animationDirection: 2,
+ animationDuration: 2,
+ animationFillMode: 2,
+ animationIterationCount: 2,
+ animationName: 2,
+ animationPlayState: 2,
+ animationTimingFunction: 2,
+ borderWidth: borderLonghand,
+ borderStyle: borderLonghand,
+ borderColor: borderLonghand,
+ // these conflict with the longhands above
+ borderTop: borderDirectional,
+ borderRight: borderDirectional,
+ borderBottom: borderDirectional,
+ borderLeft: borderDirectional,
+ borderTopWidth: borderDirectionalLonghand,
+ borderTopStyle: borderDirectionalLonghand,
+ borderTopColor: borderDirectionalLonghand,
+ borderRightWidth: borderDirectionalLonghand,
+ borderRightStyle: borderDirectionalLonghand,
+ borderRightColor: borderDirectionalLonghand,
+ borderBottomWidth: borderDirectionalLonghand,
+ borderBottomStyle: borderDirectionalLonghand,
+ borderBottomColor: borderDirectionalLonghand,
+ borderLeftWidth: borderDirectionalLonghand,
+ borderLeftStyle: borderDirectionalLonghand,
+ borderLeftColor: borderDirectionalLonghand,
+ borderBottomLeftRadius: 2,
+ borderBottomRightRadius: 2,
+ borderTopLeftRadius: 2,
+ borderTopRightRadius: 2,
+ borderImageOutset: 2,
+ borderImageRepeat: 2,
+ borderImageSlice: 2,
+ borderImageSource: 2,
+ borderImageWidth: 2,
+ columnWidth: 2,
+ columnCount: 2,
+ listStyleImage: 2,
+ listStylePosition: 2,
+ listStyleType: 2,
+ outlineWidth: 2,
+ outlineStyle: 2,
+ outlineColor: 2,
+ overflowX: 2,
+ overflowY: 2,
+ textDecorationLine: 2,
+ textDecorationStyle: 2,
+ textDecorationColor: 2,
+ }
}
-function enforceLonghands(renderer) {
- renderer.propertyPriority = propertyPriority
+function addPropertyPriority(renderer, borderMode) {
+ renderer.propertyPriority = getPropertyPriority({
+ borderDirectional: borderMode === 'directional' ? 3 : 2,
+ borderLonghand: borderMode === 'longhand' ? 3 : 2,
+ borderDirectionalLonghand: borderMode === 'none' ? 3 : 4,
+ })
+
return renderer
}
-export default () => enforceLonghands
+export default function enforceLonghandsEnhancer({ borderMode = 'none' } = {}) {
+ return function enforceLonghands(renderer) {
+ return addPropertyPriority(renderer, borderMode)
+ }
+}
diff --git a/packages/fela-layout-debugger/README.md b/packages/fela-layout-debugger/README.md
index 58452c24..5edd9f44 100644
--- a/packages/fela-layout-debugger/README.md
+++ b/packages/fela-layout-debugger/README.md
@@ -7,43 +7,50 @@ This helps to debug the application layout.
Same rules will always have the same color.
## Installation
+
```sh
yarn add fela-layout-debugger
```
+
You may alternatively use `npm i --save fela-layout-debugger`.
## Usage
+
```javascript
import { createRenderer } from 'fela'
import layoutDebugger from 'fela-layout-debugger'
const renderer = createRenderer({
- enhancers: [ layoutDebugger() ]
+ enhancers: [layoutDebugger()],
})
```
-
### Configuration
+
##### Options
+
It takes an options object with the shape of the official [styles-debugger configuration options](https://github.com/kitze/styles-debugger#configuration-options).
+
##### Example
+
```javascript
import { createRenderer } from 'fela'
import layoutDebugger from 'fela-layout-debugger'
const layoutDebuggerEnhancer = layoutDebugger({
- pseudoElement: 'before',
- color: 'red',
- borderSize: 3,
- position: 3
+ pseudoElement: 'before',
+ color: 'red',
+ borderSize: 3,
+ position: 3,
})
const renderer = createRenderer({
- enhancers: [ layoutDebuggerEnhancer ]
+ enhancers: [layoutDebuggerEnhancer],
})
```
## License
+
Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).
Documentation is licensed under [Creative Commons License](http://creativecommons.org/licenses/by/4.0/).
Created with ♥ by [@robinweser](http://weser.io) and all the great contributors.