@kaliber/build 0.0.118 → 0.0.119

package/.eslintrc

@@ -1,7 +1,7 @@
 // Based on eslint-config-react-app; https://github.com/facebookincubator/create-react-app/blob/cd3d04b71e91f533bdbdc3856775e1da81d445cf/packages/eslint-config-react-app/index.js
 
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": ["import", "jsx-a11y", "react", "react-hooks", "@kaliber/eslint-plugin"],
   "root": true,
   "env": {
@@ -30,6 +30,10 @@
       "jsx": true,
       "generators": true,
       "experimentalObjectRestSpread": true
+    },
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
     }
   },
 

package/lib/universalComponents.js

@@ -22,7 +22,6 @@ export function findComponents({ componentName }) {
 
   const findComponentCache = getFindComponentCache()
   const components = findComponentCache[componentName] || []
-  if (!components.length) console.warn(`Could not find any component with name '${componentName}', dit you render it to the page?`)
   return components
 
   function getFindComponentCache() {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.118",
+  "version": "0.0.119",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
@@ -24,12 +25,11 @@
     "@babel/plugin-transform-async-to-generator": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.11.2",
     "@kaliber/config": "^0.0.8",
     "@kaliber/eslint-plugin": "*",
     "ansi-regex": "^5.0.0",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "cache-loader": "^4.1.0",
     "classnames": "^2.2.6",

package/stylelint-plugins/machinery/css.js

@@ -1,9 +1,12 @@
 module.exports = {
   flexChildProps: [
-    'flex', 'flex-grow', 'flex-shrink', 'flex-basis', 'order',
+    'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
   ],
   gridChildProps: [
     'grid', 'grid-area', 'grid-column', 'grid-row',
     'grid-column-start', 'grid-column-end', 'grid-row-start', 'grid-row-end',
   ],
+  flexOrGridChildProps: [
+    'order'
+  ],
 }

package/stylelint-plugins/machinery/relations.js

@@ -31,6 +31,7 @@ function checkRuleRelation({ rule, triggerProperties, rulesToCheck, requiredProp
         if (!invalidDecl) return { result: 'missing', prop }
         if (!expectedValue) return
         const { value } = invalidDecl
+        if (Array.isArray(expectedValue) && expectedValue.includes(value)) return
         if (value === expectedValue) return
         return { result: 'invalid', prop, invalidDecl, value, expectedValue }
       }

package/stylelint-plugins/rules/css-global/index.js

@@ -23,7 +23,11 @@ const messages = {
 
 module.exports = {
   ruleName: 'css-global',
-  ruleInteraction: null,
+  ruleInteraction: {
+    'layout-related-properties': {
+      childAllowDecl: decl => isCustomProperty(decl)
+    },
+  },
   cssRequirements: null,
   messages,
   create(config) {
@@ -35,6 +39,7 @@ module.exports = {
 }
 
 function isInCssGlobal(root) { return matchesFile(root, filename => filename.includes('/cssGlobal/')) }
+function isCustomProperty({ prop }) { return prop.startsWith('--') }
 
 function checkAtRules({ originalRoot, report }) {
   const inCssGlobal = isInCssGlobal(originalRoot)

package/stylelint-plugins/rules/css-global/test.js

@@ -85,4 +85,19 @@ test('css-global', {
       },
     ],
   },
+  'layout-related-properties': {
+    valid: [
+      {
+        title: 'valid - allow custom properties in child selectors',
+        code: `
+          .parent {
+            & > .child{
+              --x: 0;
+            }
+          }
+        `,
+      },
+    ],
+    invalid: [],
+  }
 })

package/stylelint-plugins/rules/parent-child-policy/index.js

@@ -6,7 +6,7 @@ const {
   getRootRules,
 } = require('../../machinery/ast')
 const { checkRuleRelation } = require('../../machinery/relations')
-const { flexChildProps, gridChildProps } = require('../../machinery/css')
+const { flexChildProps, gridChildProps, flexOrGridChildProps } = require('../../machinery/css')
 
 const messages = {
   'nested - missing stacking context in parent':
@@ -21,12 +21,17 @@ const messages = {
     `missing \`display: flex;\`\n` +
     `\`${prop}\` can only be used when the containing root rule has \`display: flex;\` - ` +
     `add \`display: flex;\` to the containing root rule or, if this is caused by a media query ` +
-    `that overrides \`display: flex;\`, use \`flex: unset\``,
+    `that overrides \`display: flex;\`, use \`${prop}: unset\``,
   'nested - require display grid in parent': prop =>
     `missing \`display: grid;\`\n` +
     `\`${prop}\` can only be used when the containing root rule has \`display: grid;\` - ` +
     `add \`display: grid;\` to the containing root rule or, if this is caused by a media query ` +
-    `that overrides \`display: grid;\`, use \`grid: unset\``,
+    `that overrides \`display: grid;\`, use \`${prop}: unset\``,
+  'nested - require display flex or grid in parent': prop =>
+    `missing \`display: flex;\` or \`display: grid;\`\n` +
+    `\`${prop}\` can only be used when the containing root rule has \`display: flex;\` or \`display: grid;\` - ` +
+    `add \`display: flex;\` or \`display: grid;\` to the containing root rule or, if this is caused by a media query ` +
+    `that overrides \`display: flex;\` or \`display: grid;\`, use \`${prop}: unset\``,
   'invalid pointer events':
     `Incorrect pointer events combination\n` +
     `you can only set pointer events in a child if the parent disables pointer events - ` +
@@ -58,18 +63,24 @@ const childParentRelations = {
       ['position', 'relative']
     ]
   },
-  rootHasPositionFlex: {
+  rootHasDisplayFlex: {
     nestedHasOneOf: flexChildProps,
     requireInRoot: [
       ['display', 'flex']
     ]
   },
-  rootHasPositionGrid: {
+  rootHasDisplayGrid: {
     nestedHasOneOf: gridChildProps,
     requireInRoot: [
       ['display', 'grid']
     ]
   },
+  rootHasDisplayFlexOrGrid: {
+    nestedHasOneOf: flexOrGridChildProps,
+    requireInRoot: [
+      ['display', ['flex', 'grid']]
+    ]
+  },
   validPointerEvents: {
     nestedHasOneOf: [
       ['pointer-events', 'auto']
@@ -109,6 +120,7 @@ module.exports = {
       absoluteHasRelativeParent({ root: modifiedRoot, report })
       requireDisplayFlexInParent({ root: modifiedRoot, report })
       requireDisplayGridInParent({ root: modifiedRoot, report })
+      requireDisplayFlexOrGridInParent({ root: modifiedRoot, report })
       validPointerEvents({ root: modifiedRoot, report })
       relativeToParent({ root: modifiedRoot, report })
     }
@@ -137,7 +149,7 @@ function absoluteHasRelativeParent({ root, report }) {
 
 function requireDisplayFlexInParent({ root, report }) {
   withNestedRules(root, (rule, parent) => {
-    const result = checkChildParentRelation(rule, childParentRelations.rootHasPositionFlex)
+    const result = checkChildParentRelation(rule, childParentRelations.rootHasDisplayFlex)
 
     result.forEach(({ result, prop, triggerDecl, rootDecl, value, expectedValue }) => {
       report(triggerDecl, messages['nested - require display flex in parent'](triggerDecl.prop))
@@ -147,7 +159,7 @@ function requireDisplayFlexInParent({ root, report }) {
 
 function requireDisplayGridInParent({ root, report }) {
   withNestedRules(root, (rule, parent) => {
-    const result = checkChildParentRelation(rule, childParentRelations.rootHasPositionGrid)
+    const result = checkChildParentRelation(rule, childParentRelations.rootHasDisplayGrid)
 
     result.forEach(({ result, prop, triggerDecl, rootDecl, value, expectedValue }) => {
       report(triggerDecl, messages['nested - require display grid in parent'](triggerDecl.prop))
@@ -155,6 +167,16 @@ function requireDisplayGridInParent({ root, report }) {
   })
 }
 
+function requireDisplayFlexOrGridInParent({ root, report }) {
+  withNestedRules(root, (rule, parent) => {
+    const result = checkChildParentRelation(rule, childParentRelations.rootHasDisplayFlexOrGrid)
+
+    result.forEach(({ result, prop, triggerDecl, rootDecl, value, expectedValue }) => {
+      report(triggerDecl, messages['nested - require display flex or grid in parent'](triggerDecl.prop))
+    })
+  })
+}
+
 function validPointerEvents({ root, report }) {
   withNestedRules(root, (rule, parent) => {
     const result = checkChildParentRelation(rule, childParentRelations.validPointerEvents)

package/stylelint-plugins/rules/parent-child-policy/test.js

@@ -29,7 +29,7 @@ test('parent-child-policy', {
             display: grid;
 
             & > .test {
-              grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
+              grid: 0; grid-area: 0; grid-column: 0; grid-row: 0; order: 0;
               grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
             }
           }
@@ -207,12 +207,12 @@ test('parent-child-policy', {
         code: `
           .bad {
             & > .test {
-              flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0; order: 0;
+              flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0;
             }
           }
         `,
         warnings: createMessages('nested - require display flex in parent', [
-          'flex', 'flex-grow', 'flex-shrink', 'flex-basis', 'order'
+          'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
         ])
       },
       {
@@ -221,13 +221,13 @@ test('parent-child-policy', {
           .bad {
             & > .test {
               @media x {
-                flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0; order: 0;
+                flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0;
               }
             }
           }
         `,
         warnings: createMessages('nested - require display flex in parent', [
-          'flex', 'flex-grow', 'flex-shrink', 'flex-basis', 'order'
+          'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
         ])
       },
       {
@@ -300,6 +300,20 @@ test('parent-child-policy', {
         `,
         warnings: [messages['nested - require display flex in parent']('flex')]
       },
+      {
+        title: 'report missing flex or grid',
+        code: `.bad { & > .test { order: 0; } }`,
+        warnings: createMessages('nested - require display flex or grid in parent', [
+          'order'
+        ])
+      },
+      {
+        title: '└─ take @media into account',
+        code: `.bad { & > .test { @media x { order: 0; } } }`,
+        warnings: createMessages('nested - require display flex or grid in parent', [
+          'order'
+        ])
+      },
     ]
   },
   'layout-related-properties': {