styled-system - npm Package Compare versions

Comparing version 1.0.0-1 to 1.0.0-2

dist/font-size.js

@@ -11,3 +11,4 @@ 'use strict';
     dec = _require.dec,
-    media = _require.media;
+    media = _require.media,
+    joinObj = _require.joinObj;
 
@@ -25,3 +26,3 @@ var _require2 = require('./constants'),
 
-  return val.map(fx(scale)).map(dec('font-size')).map(media(bp)).join('');
+  return val.map(fx(scale)).map(dec('font-size')).map(media(bp)).reduce(joinObj, {});
 };
@@ -28,0 +29,0 @@

dist/index.js

@@ -6,4 +6,2 @@ 'use strict';
 var fontSize = require('./font-size');
-var hoc = require('./hoc');
-var Box = require('./Box');
 var util = require('./util');
@@ -16,6 +14,4 @@ var constants = require('./constants');
   fontSize: fontSize,
-  hoc: hoc,
-  Box: Box,
   util: util,
   constants: constants
 };

dist/space.js

@@ -13,3 +13,4 @@ 'use strict';
     dec = _require.dec,
-    media = _require.media;
+    media = _require.media,
+    joinObj = _require.joinObj;
 
@@ -31,4 +32,4 @@ var _require2 = require('./constants'),
     var p = getProperties(key);
-    return val.map(mx(sc)).map(dec(p)).map(media(bp)).join('');
-  }).join('');
+    return val.map(mx(sc)).map(dec(p)).map(media(bp)).reduce(joinObj, {});
+  }).reduce(joinObj, {});
 };
@@ -35,0 +36,0 @@

dist/util.js

 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -38,5 +40,5 @@
   return function (val) {
-    return arr(props).map(function (prop) {
-      return prop + ': ' + val + ';';
-    }).join('');
+    return arr(props).reduce(function (acc, prop) {
+      return acc[prop] = val, acc;
+    }, {});
   };
@@ -46,5 +48,8 @@ };
   return function (d, i) {
-    return bp[i] ? bp[i] + '{' + d + '}' : d;
+    return bp[i] ? _defineProperty({}, bp[i], d) : d;
   };
 };
+var joinObj = function joinObj(acc, obj) {
+  return Object.assign(acc, obj);
+};
 
@@ -60,3 +65,4 @@ module.exports = {
   media: media,
-  dec: dec
+  dec: dec,
+  joinObj: joinObj
 };

dist/width.js

@@ -10,3 +10,4 @@ 'use strict';
     dec = _require.dec,
-    media = _require.media;
+    media = _require.media,
+    joinObj = _require.joinObj;
 
@@ -20,3 +21,3 @@ module.exports = function (props) {
 
-  return val.map(wx).map(dec('width')).map(media(bp)).join('');
+  return val.map(wx).map(dec('width')).map(media(bp)).reduce(joinObj, {});
 };
@@ -23,0 +24,0 @@

package.json

 {
   "name": "styled-system",
-  "version": "1.0.0-1",
-  "description": "Design system utilities for styled-components",
+  "version": "1.0.0-2",
+  "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
   "main": "dist/index.js",
@@ -13,3 +13,8 @@ "scripts": {
   },
-  "keywords": [],
+  "keywords": [
+    "react",
+    "css-in-js",
+    "styled-components",
+    "glamorous"
+  ],
   "author": "Brent Jackson",
@@ -31,6 +36,9 @@ "license": "MIT",
     "relab": "^1.0.0-12",
-    "styled-components": "^2.0.1",
     "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.5"
+  },
+  "dependencies": {
+    "glamorous": "^3.23.2",
+    "styled-components": "^2.1.0"
   }
 }

README.md

 # styled-system
 
-Design system utilities for styled-components
+Design system utilities for styled-components, glamorous, and other css-in-js libraries
 
@@ -14,2 +14,3 @@ [![Build Status](https://travis-ci.org/jxnblk/styled-system.svg?branch=master)](https://travis-ci.org/jxnblk/styled-system)
 ```jsx
+// With styled-components
 import styled from 'styled-components'
@@ -26,2 +27,10 @@ import { space, width, fontSize } from 'styled-system'
 ```jsx
+// Or with glamorous
+import glamorous from 'glamorous'
+import { space, width, fontSize } from 'styled-system'
+
+const Box = glamorous.div(space, width, fontSize)
+```
+
+```jsx
 // width: 50%
@@ -128,16 +137,2 @@ <Box width={1/2} />
 
-
-## Higher Order Component
-
-styled-system includes a higher order component to add style props to any component.
-
-```jsx
-import { hoc } from 'styled-system'
-const Box = hoc('div')
-```
-
-```jsx
-<Box w={[ 1, 1/2 ]} p={2} />
-```
-
 ## Breakpoints
@@ -185,2 +180,3 @@
 import { ThemeProvider } from 'styled-components'
+// or import { ThemeProvider } from 'glamorous'
 import MyComponent from './MyComponent'
@@ -213,4 +209,5 @@
 - [styled-components](https://github.com/styled-components/styled-components)
+- [glamorous](https://github.com/paypal/glamorous)
 - [grid-styled](https://github.com/jxnblk/grid-styled)
 
 MIT License

src/font-size.js

@@ -1,2 +0,2 @@
-const { is, idx, arr, num, px, breaks, dec, media } = require('./util')
+const { is, idx, arr, num, px, breaks, dec, media, joinObj } = require('./util')
 const { fontSizes } = require('./constants')
@@ -16,5 +16,5 @@
     .map(media(bp))
-    .join('')
+    .reduce(joinObj, {})
 }
 
 const fx = scale => n => num(n) ? px(scale[n] || n) : n

src/index.js

 const space = require('./space')
 const width = require('./width')
 const fontSize = require('./font-size')
-const hoc = require('./hoc')
-const Box = require('./Box')
 const util = require('./util')
@@ -13,6 +11,4 @@ const constants = require('./constants')
   fontSize,
-  hoc,
-  Box,
   util,
   constants
 }

src/space.js

@@ -9,3 +9,4 @@ const {
   dec,
-  media
+  media,
+  joinObj
 } = require('./util')
@@ -28,4 +29,4 @@ const { scale } = require('./constants')
       .map(media(bp))
-      .join('')
-  }).join('')
+      .reduce(joinObj, {})
+  }).reduce(joinObj, {})
 }
@@ -32,0 +33,0 @@

src/util.js

@@ -14,5 +14,5 @@ const { breakpoints } = require('./constants')
 const dec = props => val => arr(props)
-  .map(prop => prop + ': ' + val + ';')
-  .join('')
-const media = bp => (d, i) => bp[i] ? `${bp[i]}{${d}}` : d
+  .reduce((acc, prop) => (acc[prop] = val, acc), {})
+const media = bp => (d, i) => bp[i] ? ({[bp[i]]: d}) : d
+const joinObj = (acc, obj) => Object.assign(acc, obj)
 
@@ -29,2 +29,3 @@ module.exports = {
   dec,
+  joinObj,
 }

src/width.js

@@ -1,2 +0,2 @@
-const { is, arr, num, px, breaks, dec, media } = require('./util')
+const { is, arr, num, px, breaks, dec, media, joinObj } = require('./util')
 
@@ -14,3 +14,3 @@ module.exports = props => {
     .map(media(bp))
-    .join('')
+    .reduce(joinObj, {})
 }
@@ -17,0 +17,0 @@

test.js

 import test from 'ava'
-import {
-  space,
-  width,
-  fontSize,
-  util
-} from './src'
+import {space, width, fontSize, util} from './src'
 
 const theme = {
-  breakpoints: [ 32, 48, 64 ],
-  space: [ 0, 6, 12, 18, 24 ],
-  fontSizes: [ 12, 16, 18, 24, 36, 72 ]
+  breakpoints: [32, 48, 64],
+  space: [0, 6, 12, 18, 24],
+  fontSizes: [12, 16, 18, 24, 36, 72],
 }
@@ -65,3 +60,3 @@
   const a = util.arr(1)
-  const b = util.arr([ 1 ])
+  const b = util.arr([1])
   t.true(Array.isArray(a))
@@ -75,10 +70,10 @@ t.true(Array.isArray(b))
       b: {
-        c: 'hello'
-      }
+        c: 'hello',
+      },
     },
-    x: 'x'
+    x: 'x',
   }
-  const a = util.idx([ 'a', 'b', 'c' ], props)
-  const b = util.idx([ 'x' ], props)
-  const c = util.idx([ 'x', 'y', 'z' ], props)
+  const a = util.idx(['a', 'b', 'c'], props)
+  const b = util.idx(['x'], props)
+  const c = util.idx(['x', 'y', 'z'], props)
   t.is(a, 'hello')
@@ -92,6 +87,6 @@ t.is(b, 'x')
     theme: {
-      breakpoints: [ 24 ]
-    }
+      breakpoints: [24],
+    },
   })
-  t.deepEqual(a, [ null, '@media screen and (min-width: 24em)' ])
+  t.deepEqual(a, [null, '@media screen and (min-width: 24em)'])
 })
@@ -101,5 +96,5 @@
   const a = util.media([])('hello')
-  const b = util.media([ 'hi' ])('hello', 0)
+  const b = util.media(['hi'])('hello', 0)
   t.is(a, 'hello')
-  t.is(b, 'hi{hello}')
+  t.deepEqual(b, {hi: 'hello'})
 })
@@ -109,173 +104,195 @@
   const a = util.dec('foo')('bar')
-  const b = util.dec([ 'foo', 'baz' ])('bar')
-  t.is(a, 'foo: bar;')
-  t.is(b, 'foo: bar;baz: bar;')
+  const b = util.dec(['foo', 'baz'])('bar')
+  t.deepEqual(a, {foo: 'bar'})
+  t.deepEqual(b, {foo: 'bar', baz: 'bar'})
 })
 
 test('space returns margin declarations', t => {
-  const dec = space({ m: 1 })
-  t.is(dec, 'margin: 8px;')
+  const dec = space({m: 1})
+  t.deepEqual(dec, {margin: '8px'})
 })
 
 test('space returns non-scalar margins', t => {
-  const a = space({ m: 24 })
-  const b = space({ m: 'auto' })
-  t.is(a, 'margin: 24px;')
-  t.is(b, 'margin: auto;')
+  const a = space({m: 24})
+  const b = space({m: 'auto'})
+  t.deepEqual(a, {margin: '24px'})
+  t.deepEqual(b, {margin: 'auto'})
 })
 
 test('space returns negative margins', t => {
-  const a = space({ m: -1 })
-  const b = space({ m: -24 })
-  t.is(a, 'margin: -8px;')
-  t.is(b, 'margin: -24px;')
+  const a = space({m: -1})
+  const b = space({m: -24})
+  t.deepEqual(a, {margin: '-8px'})
+  t.deepEqual(b, {margin: '-24px'})
 })
 
 test('space returns directional margins', t => {
-  const top = space({ mt: 1 })
-  const r = space({ mr: 2 })
-  const b = space({ mb: 3 })
-  const l = space({ ml: 4 })
-  const x = space({ mx: 1 })
-  const y = space({ my: 2 })
-  t.is(top, 'margin-top: 8px;')
-  t.is(r, 'margin-right: 16px;')
-  t.is(b, 'margin-bottom: 32px;')
-  t.is(l, 'margin-left: 64px;')
-  t.is(x, 'margin-left: 8px;margin-right: 8px;')
-  t.is(y, 'margin-top: 16px;margin-bottom: 16px;')
+  const top = space({mt: 1})
+  const r = space({mr: 2})
+  const b = space({mb: 3})
+  const l = space({ml: 4})
+  const x = space({mx: 1})
+  const y = space({my: 2})
+  t.deepEqual(top, {'margin-top': '8px'})
+  t.deepEqual(r, {'margin-right': '16px'})
+  t.deepEqual(b, {'margin-bottom': '32px'})
+  t.deepEqual(l, {'margin-left': '64px'})
+  t.deepEqual(x, {'margin-left': '8px', 'margin-right': '8px'})
+  t.deepEqual(y, {'margin-top': '16px', 'margin-bottom': '16px'})
 })
 
 test('space returns responsive margins', t => {
-  const a = space({ m: [ 0, 1 ] })
-  t.is(a, 'margin: 0px;@media screen and (min-width: 40em){margin: 8px;}')
+  const a = space({m: [0, 1]})
+  t.deepEqual(a, {
+    margin: '0px',
+    '@media screen and (min-width: 40em)': {
+      margin: '8px',
+    },
+  })
 })
 
 test('space returns padding declarations', t => {
-  const dec = space({ p: 1 })
-  t.is(dec, 'padding: 8px;')
+  const dec = space({p: 1})
+  t.deepEqual(dec, {padding: '8px'})
 })
 
 test('space returns non-scalar paddings', t => {
-  const a = space({ p: 24 })
-  const b = space({ p: 'auto' })
-  t.is(a, 'padding: 24px;')
-  t.is(b, 'padding: auto;')
+  const a = space({p: 24})
+  const b = space({p: 'auto'})
+  t.deepEqual(a, {padding: '24px'})
+  t.deepEqual(b, {padding: 'auto'})
 })
 
 test('space returns directional paddings', t => {
-  const top = space({ pt: 1 })
-  const r = space({ pr: 2 })
-  const b = space({ pb: 3 })
-  const l = space({ pl: 4 })
-  const x = space({ px: 1 })
-  const y = space({ py: 2 })
-  t.is(top, 'padding-top: 8px;')
-  t.is(r, 'padding-right: 16px;')
-  t.is(b, 'padding-bottom: 32px;')
-  t.is(l, 'padding-left: 64px;')
-  t.is(x, 'padding-left: 8px;padding-right: 8px;')
-  t.is(y, 'padding-top: 16px;padding-bottom: 16px;')
+  const top = space({pt: 1})
+  const r = space({pr: 2})
+  const b = space({pb: 3})
+  const l = space({pl: 4})
+  const x = space({px: 1})
+  const y = space({py: 2})
+  t.deepEqual(top, {'padding-top': '8px'})
+  t.deepEqual(r, {'padding-right': '16px'})
+  t.deepEqual(b, {'padding-bottom': '32px'})
+  t.deepEqual(l, {'padding-left': '64px'})
+  t.deepEqual(x, {'padding-left': '8px', 'padding-right': '8px'})
+  t.deepEqual(y, {'padding-top': '16px', 'padding-bottom': '16px'})
 })
 
 test('space returns responsive paddings', t => {
-  const a = space({ p: [ 0, 1 ] })
-  t.is(a, 'padding: 0px;@media screen and (min-width: 40em){padding: 8px;}')
+  const a = space({p: [0, 1]})
+  t.deepEqual(a, {
+    padding: '0px',
+    '@media screen and (min-width: 40em)': {
+      padding: '8px',
+    },
+  })
 })
 
 test('space can be configured with a theme', t => {
-  const a = space({ theme, m: 1 })
-  const b = space({ theme, m: 2 })
-  const c = space({ theme, m: 3 })
-  const d = space({ theme, m: 4 })
-  t.is(a, 'margin: 6px;')
-  t.is(b, 'margin: 12px;')
-  t.is(c, 'margin: 18px;')
-  t.is(d, 'margin: 24px;')
+  const a = space({theme, m: 1})
+  const b = space({theme, m: 2})
+  const c = space({theme, m: 3})
+  const d = space({theme, m: 4})
+  t.deepEqual(a, {margin: '6px'})
+  t.deepEqual(b, {margin: '12px'})
+  t.deepEqual(c, {margin: '18px'})
+  t.deepEqual(d, {margin: '24px'})
 })
 
 test('width returns percentage widths', t => {
-  const a = width({ width: 1/2 })
-  t.is(a, 'width: 50%;')
+  const a = width({width: 1 / 2})
+  t.deepEqual(a, {width: '50%'})
 })
 
 test('width returns pixel values', t => {
-  const a = width({ width: 256 })
-  t.is(a, 'width: 256px;')
+  const a = width({width: 256})
+  t.deepEqual(a, {width: '256px'})
 })
 
 test('width returns string values', t => {
-  const a = width({ width: 'auto' })
-  t.is(a, 'width: auto;')
+  const a = width({width: 'auto'})
+  t.deepEqual(a, {width: 'auto'})
 })
 
 test('width returns responsive values', t => {
-  const a = width({ width: [ 1, 1/2 ] })
-  t.is(a, 'width: 100%;@media screen and (min-width: 40em){width: 50%;}')
+  const a = width({width: [1, 1 / 2]})
+  t.deepEqual(a, {
+    width: '100%',
+    '@media screen and (min-width: 40em)': {width: '50%'},
+  })
 })
 
 test('width returns responsive pixel values', t => {
-  const a = width({ width: [ 128, 256 ] })
-  t.is(a, 'width: 128px;@media screen and (min-width: 40em){width: 256px;}')
+  const a = width({width: [128, 256]})
+  t.deepEqual(a, {
+    width: '128px',
+    '@media screen and (min-width: 40em)': {width: '256px'},
+  })
 })
 
 test('width returns 0 value', t => {
-  const a = width({ width: 0 })
-  t.is(a, 'width: 0%;')
+  const a = width({width: 0})
+  t.deepEqual(a, {width: '0%'})
 })
 
 test('width accepts shortcut prop', t => {
-  const a = width({ w: 1/2 })
-  t.is(a, 'width: 50%;')
+  const a = width({w: 1 / 2})
+  t.deepEqual(a, {width: '50%'})
 })
 
 test('fontSize returns scale values', t => {
-  const a = fontSize({ fontSize: 0 })
-  const b = fontSize({ fontSize: 1 })
-  const c = fontSize({ fontSize: 2 })
-  t.is(a, 'font-size: 12px;')
-  t.is(b, 'font-size: 14px;')
-  t.is(c, 'font-size: 16px;')
+  const a = fontSize({fontSize: 0})
+  const b = fontSize({fontSize: 1})
+  const c = fontSize({fontSize: 2})
+  t.deepEqual(a, {'font-size': '12px'})
+  t.deepEqual(b, {'font-size': '14px'})
+  t.deepEqual(c, {'font-size': '16px'})
 })
 
 test('fontSize returns pixel values', t => {
-  const a = fontSize({ fontSize: 24 })
-  t.is(a, 'font-size: 24px;')
+  const a = fontSize({fontSize: 24})
+  t.deepEqual(a, {'font-size': '24px'})
 })
 
-test('fontSize returns string values', t => {
-  const a = fontSize({ fontSize: '2em' })
-  t.is(a, 'font-size: 2em;')
+test('fontSize returns object values', t => {
+  const a = fontSize({fontSize: '2em'})
+  t.deepEqual(a, {'font-size': '2em'})
 })
 
 test('fontSize returns responsive values', t => {
-  const a = fontSize({ fontSize: [ 1, 2 ] })
-  t.is(a, 'font-size: 14px;@media screen and (min-width: 40em){font-size: 16px;}')
+  const a = fontSize({fontSize: [1, 2]})
+  t.deepEqual(a, {
+    'font-size': '14px',
+    '@media screen and (min-width: 40em)': {
+      'font-size': '16px',
+    },
+  })
 })
 
 test('fontSize accepts shortcut prop', t => {
-  const a = fontSize({ f: 2 })
-  t.is(a, 'font-size: 16px;')
+  const a = fontSize({f: 2})
+  t.deepEqual(a, {'font-size': '16px'})
 })
 
 test('fontSize can be configured with a theme', t => {
-  const a = fontSize({ theme, f: 0 })
-  const b = fontSize({ theme, f: 1 })
-  const c = fontSize({ theme, f: 2 })
-  const d = fontSize({ theme, f: 3 })
-  const e = fontSize({ theme, f: 4 })
-  const f = fontSize({ theme, f: 5 })
-  t.is(a, 'font-size: 12px;')
-  t.is(b, 'font-size: 16px;')
-  t.is(c, 'font-size: 18px;')
-  t.is(d, 'font-size: 24px;')
-  t.is(e, 'font-size: 36px;')
-  t.is(f, 'font-size: 72px;')
+  const a = fontSize({theme, f: 0})
+  const b = fontSize({theme, f: 1})
+  const c = fontSize({theme, f: 2})
+  const d = fontSize({theme, f: 3})
+  const e = fontSize({theme, f: 4})
+  const f = fontSize({theme, f: 5})
+  t.deepEqual(a, {'font-size': '12px'})
+  t.deepEqual(b, {'font-size': '16px'})
+  t.deepEqual(c, {'font-size': '18px'})
+  t.deepEqual(d, {'font-size': '24px'})
+  t.deepEqual(e, {'font-size': '36px'})
+  t.deepEqual(f, {'font-size': '72px'})
 })
 
 test('breakpoints can be configured with a theme', t => {
-  const a = space({ theme, m: [ 1, 2, 3, 4 ] })
-  t.regex(a, /min\-width:\s32em/)
-  t.regex(a, /min\-width:\s48em/)
-  t.regex(a, /min\-width:\s64em/)
+  const a = space({theme, m: [1, 2, 3, 4]})
+  const [, b, c, d] = Object.keys(a)
+  t.is(b, '@media screen and (min-width: 32em)')
+  t.is(c, '@media screen and (min-width: 48em)')
+  t.is(d, '@media screen and (min-width: 64em)')
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25998

increased by14.2%

Dev dependency count

15

decreased by-6.25%

Number of package files

35

increased by52.17%

Lines of code

686

increased by13.2%

Worsened metrics

Dependency count

2

increased byInfinity%

Number of lines in readme file

209

decreased by-1.42%

Dependency changes

• + Addedglamorous@^3.23.2

• + Addedstyled-components@^2.1.0

• + Addedasap@2.0.6(transitive)

• + Addedbase64-js@1.5.1(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedbrcast@2.0.2(transitive)

• + Addedbuffer@5.7.1(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-in-js-utils@2.0.1(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfast-memoize@2.5.2(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedglamor@2.20.40(transitive)

• + Addedglamorous@3.25.0(transitive)

• + Addedhas-flag@1.0.0(transitive)

• + Addedhoist-non-react-statics@1.2.0(transitive)

• + Addedhtml-element-attributes@1.3.1(transitive)

• + Addedhtml-tag-names@1.1.5(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedinline-style-prefixer@3.0.8(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.018.3.1(transitive)

• + Addedreact-html-attributes@1.4.6(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedstyled-components@2.4.1(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedsupports-color@3.2.3(transitive)

• + Addedsvg-tag-names@1.1.2(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)