@kaliber/build 0.0.135 → 0.0.136

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.135",
+  "version": "0.0.136",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {

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

@@ -1,6 +1,7 @@
 const {
   findDecls,
   parseSelector,
+  withRootRules,
   withNestedRules,
   isRoot, declMatches,
   getRootRules,
@@ -32,6 +33,9 @@ const messages = {
     `\`${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\``,
+  'layoutClassname - must be nested in a parent selector':
+    `layoutClassNames (classes ending with the \`Layout\` suffix) can only be targetted by a parent selector, using the direct child selector. ` + 
+    `Consequentially, you can only use layout related properties in layoutClassNames.`,
   'invalid pointer events':
     `Incorrect pointer events combination\n` +
     `you can only set pointer events in a child if the parent disables pointer events - ` +
@@ -40,10 +44,6 @@ const messages = {
     'Missing `position: relative;` in parent\n' +
     '`position: static` is only allowed when the containing root rule is set to `position: relative` - ' +
     'add `position-relative` to the containing root rule',
-  'missing relativeToParent className':
-    'Missing `.relativeToParent` className\n' +
-    '`position: static` can only be used when selecting on `.relativeToParent` - ' +
-    'add the `.relativeToParent` className',
 }
 
 // TODO: move errors into the different relations (would allows us to simplify the actual checks)
@@ -123,6 +123,7 @@ module.exports = {
       requireDisplayFlexOrGridInParent({ root: modifiedRoot, report })
       validPointerEvents({ root: modifiedRoot, report })
       relativeToParent({ root: modifiedRoot, report })
+      requireLayoutClassNameToBeDirectChild({ root: modifiedRoot, report })
     }
   }
 }
@@ -192,14 +193,17 @@ function relativeToParent({ root, report }) {
     result.forEach(({ result, prop, triggerDecl, rootDecl, value, expectedValue }) => {
       report(triggerDecl, messages['missing position relative'])
     })
-    const triggerDecls = findDecls(rule, childParentRelations.relativeToParent.nestedHasOneOf)
-    triggerDecls.forEach(decl => {
-      const selectors = parseSelector(rule)
-      const hasValidSelectors = selectors.every(selector =>
-        selector.some(x => x.type === 'class' && x.value === 'relativeToParent')
-      )
-      if (hasValidSelectors) return
-      report(decl, messages['missing relativeToParent className'])
+  })
+}
+
+function requireLayoutClassNameToBeDirectChild({ root, report }) {
+  withRootRules(root, rule => {
+    if (!rule.selector.includes('Layout')) return
+    parseSelector(rule).nodes.forEach(node => {
+      const className = node.nodes.find(x => x.type === 'class')
+      if (className && className.toString().endsWith('Layout')) {
+        report(rule, messages['layoutClassname - must be nested in a parent selector'])
+      }
     })
   })
 }

package/stylelint-plugins/rules/parent-child-policy/readme.md

@@ -6,9 +6,9 @@ This rule helps you to correctly create these parent / child relationships.
 
 - [Stacking context](#stacking-context)
 - [Position absolute](#position-absolute)
+- [Escape stacking context with absolute children](#escape-stacking-context-with-absolute-children)
 - [Flex and Grid](#flex-and-grid)
 - [Pointer events](#pointer-events)
-- [Relative to parent](#relative-to-parent)
 
 ## Stacking context
 
@@ -68,9 +68,51 @@ When you given an element `position: absolute` the CSS engine will traverse its
 
 This rule forces you set `position: relative` on the parent element in order to prevent the element from escaping a known context. It ensures we stay true to the black-box principle.
 
-## Relative to parent
+### Examples
+
+Examples of *correct* code for this rule:
+
+```css
+.parent {
+  position: relative;
+
+  & > .child {
+    position: absolute;
+  }
+}
+```
+
+```css
+.parent {
+  position: relative;
+
+  &::after {
+    position: absolute;
+  }
+}
+```
+
+Examples of *incorrect* code for this rule:
+
+```css
+.parent {
+  & > .child {
+    position: absolute;
+  }
+}
+```
+
+```css
+.parent {
+  &::after {
+    position: absolute;
+  }
+}
+```
+
+## Escape stacking context with absolute children
 
-In some case you need to allow a child element to escape from it's parents context. An example:
+In some case you may need a child element to be relative to an element different from its parent: you want it to escape its parent's stacking context. An example:
 
 ```html
 <ul class='menu'>
@@ -108,15 +150,18 @@ In some case you need to allow a child element to escape from it's parents conte
 }
 ```
 
-The `position: absolute` property is marked as a problem because it escapes its parent. This means we need to add a `position: relative`.
+The `position: absolute` property is marked as a problem because it escapes its parent's stacking context. This means we need to add a `position: relative`.
 
 ```css
 .menu-item {
   position: relative;
+
   &.is-open {
     & > .menu-submenu {
       position: absolute;
-      ...
+      left: 0;
+    }
+  }
 ```
 
 While this solves the linting problem, we do not get the effect we wish to achieve: `submenu` rendered on the left of the `menu` while maintaining semantically correct html.
@@ -128,92 +173,49 @@ In order for this to work we need to transform the CSS:
   display: flex;
   position: relative;
 
-  & > .menu-item.relativeToParent {
+  & > .menu-item {
     position: static;
   }
 }
 
 .menu-item {
   position: relative;
-  ...
-}
-```
-
-Note that we set `position: static` from the parent. You can also see we included the marker class `.relativeToParent`. If you would not use this exact name you would get another linting error. The reason we require this class is to make sure that the receiver of `position: static` is aware of this breach of containment. We would not want to accidentally break any behavior. As a bonus, you could use it in `menu-item` to toggle (enable / disable) this behavior:
 
-```css
-.menu-item {
-  &:not(.is-open) {
+  &.is-open {
     & > .menu-submenu {
-      display: none;
-    }
-  }
-
-  &.relativeToParent {
-    position: relative;
-
-    &.is-open {
-      & > .menu-submenu {
-        position: absolute;
-        left: 0;
-      }
+      position: absolute;
+      left: 0;
     }
   }
 }
 ```
 
-Note that this also works for removing a stacking context:
+Note that we reset the relative element to `position: static` from its parent. This way we explicitly allow the absolute child to escape this context, one level up to this parent. In order to allow this, you need to add `position: relative` to the parent, creating a _new_ stacking context. If you need the absolute element to escape further, you have to repeat this process:
 
 ```css
-.menu {
+.a {
   position: relative;
-  z-index: 0;
 
-  & > .item.relativeToParent {
+  & > .b {
     position: static;
-    z-index: auto;
   }
 }
-```
-
-### Examples
-
-Examples of *correct* code for this rule:
 
-```css
-.parent {
+.b {
   position: relative;
 
-  & > .child {
-    position: absolute;
+  & > .c {
+    position: static;
   }
 }
-```
 
-```css
-.parent {
+.c {
   position: relative;
 
   &::after {
+    content: '';
     position: absolute;
-  }
-}
-```
-
-Examples of *incorrect* code for this rule:
-
-```css
-.parent {
-  & > .child {
-    position: absolute;
-  }
-}
-```
-
-```css
-.parent {
-  &::after {
-    position: absolute;
+    inset: 0;
   }
 }
 ```

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

@@ -61,24 +61,11 @@ test('parent-child-policy', {
         `
       },
       {
-        title: 'allow position: static 1',
-        code: `
-          .test {
-            position: relative;
-
-            & > .relativeToParent {
-              position: static;
-            }
-          }
-        `
-      },
-      {
-        title: 'allow position: static 2',
         code: `
           .parent {
             position: relative;
 
-            & > .child.relativeToParent {
+            & > .child {
               position: static;
             }
           }
@@ -122,6 +109,16 @@ test('parent-child-policy', {
           }
         `,
       },
+      {
+        title: 'allow layoutClassName when targetted with the direct child selector',
+        code: `
+          .parent {
+            & > .childLayout {
+              margin: 0;
+            }
+          }
+        `,
+      }
     ],
     invalid: [
       {
@@ -152,17 +149,8 @@ test('parent-child-policy', {
         code: '.bad { & > .test { position: static; } }',
         warnings: [
           messages['missing position relative'],
-          messages['missing relativeToParent className'],
         ]
       },
-      {
-        code: '.bad { & > .test.relativeToParent { position: static; } }',
-        warnings: [messages['missing position relative']]
-      },
-      {
-        code: '.bad { position: relative; & > .test { position: static; } }',
-        warnings: [messages['missing relativeToParent className']]
-      },
       {
         title: '└─ take @media into account',
         code: '.bad { & > .test { @media x { position: absolute; } } }',
@@ -314,6 +302,21 @@ test('parent-child-policy', {
           'order'
         ])
       },
+      {
+        title: 'layoutClassName - must be nested in a parent selector',
+        code: `.badLayout { padding: 0; }`,
+        warnings: [messages['layoutClassname - must be nested in a parent selector']]
+      },
+      {
+        title: 'layoutClassName - must be nested in a parent selector',
+        code: `.badLayout:not(:empty) { padding: 0; }`,
+        warnings: [messages['layoutClassname - must be nested in a parent selector']]
+      },
+      {
+        title: 'layoutClassName - must be nested in a parent selector',
+        code: `.badLayout > .test { margin: 0; }`,
+        warnings: [messages['layoutClassname - must be nested in a parent selector']]
+      },
     ]
   },
   'layout-related-properties': {
@@ -322,12 +325,11 @@ test('parent-child-policy', {
       { code: `.good { pointer-events: none; & > * { pointer-events: auto; } }` },
       { code: `.good { &::after { pointer-events: none; } }` },
       {
-        title: 'allow position: static',
         code: `
-          .test {
+          .parent {
             position: relative;
 
-            & > .relativeToParent {
+            & > .child {
               position: static;
             }
           }