@kaliber/build 0.0.146 → 0.0.147

package/.stylelintrc

@@ -195,7 +195,7 @@
     ],
     "string-no-newline": true,
     "unit-case": "lower",
-    "unit-no-unknown": true,
+    "unit-no-unknown": null,
     "unit-whitelist": [
       "em",
       "rem",
@@ -210,7 +210,13 @@
       "vmax",
       "deg",
       "turn",
-      "fr"
+      "fr",
+      "dvh",
+      "dvw",
+      "svh",
+      "svw",
+      "lvh",
+      "lvw"
     ],
     "value-list-comma-newline-after": "always-multi-line",
     "value-list-comma-space-after": "always-single-line",

package/lib/build.js

@@ -22,7 +22,6 @@ const walkSync = require('walk-sync')
 const webpack = require('webpack')
 
 const chunkManifestPlugin = require('../webpack-plugins/chunk-manifest-plugin')
-const configLoaderPlugin = require('../webpack-plugins/config-loader-plugin')
 const copyUnusedFilesPlugin = require('../webpack-plugins/copy-unused-files-plugin')
 const hotCssReplacementPlugin = require('../webpack-plugins/hot-css-replacement-plugin')
 const hotModuleReplacementPlugin = require('../webpack-plugins/hot-module-replacement-plugin')
@@ -61,7 +60,23 @@ const {
 const recognizedTemplates = Object.keys(templateRenderers)
 
 const kaliberBuildClientModules = [/(@kaliber\/build\/lib\/(stylesheet|javascript|polyfill|withPolyfill|hot-module-replacement-client|rollbar|universalComponents)|ansi-regex)/]
-const compileWithBabel = kaliberBuildClientModules.concat(userDefinedcompileWithBabel)
+const compileWithBabel = kaliberBuildClientModules.concat(
+  userDefinedcompileWithBabel.map(x => {
+    if (x.source !== '@kaliber\\/') return x
+
+    console.log(
+      '================================================================================\n' +
+      'WARNING, you specified /@kaliber\\// to be compiled with babel, not all @kaliber\n' +
+      'libraries need to be compiled. An example of this is the @kaliber/config. To get\n' +
+      'rid of this warning, exclude them from the regular expression like this:\n' +
+      '  /@kaliber\\/(?|config)\n' +
+      'We replaced /@kaliber\\// with /@kaliber\\/(?|config)/ but this might also cause\n' +
+      'problems with other libraries that dynamically perform requires.\n' +
+      '================================================================================'
+    )
+    return /@kaliber\/(?!config)/
+  })
+)
 
 const babelLoader = {
   loader: 'babel-loader',
@@ -378,7 +393,6 @@ module.exports = function build({ watch }) {
         watch && websocketCommunicationPlugin(),
         new TimeFixPlugin(),
         new ExtendedAPIPlugin(),
-        configLoaderPlugin(),
         watchContextPlugin(),
         reactUniversalPlugin(webOptions()),  // claims .entry.js
         templatePlugin(templateRenderers), // does work on .*.js
@@ -404,7 +418,7 @@ module.exports = function build({ watch }) {
   function externalConfForModulesDir(modulesDir) {
     return {
       modulesDir,
-      allowlist: ['@kaliber/config', ...compileWithBabel, /\.css$/]
+      allowlist: [...compileWithBabel, /\.css$/]
     }
   }
 

package/lib/serve.js

@@ -1,6 +1,6 @@
 const compression = require('compression')
 const express = require('express')
-const helmet = require('helmet')
+const helmet = require('helmet').default
 const { access } = require('fs')
 const { parsePath } = require('history')
 const { resolve } = require('path')

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.146",
+  "version": "0.0.147",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {
@@ -54,7 +54,7 @@
     "fs-extra": "^10.0.0",
     "generic-names": "^3.0.0",
     "gm": "^1.23.1",
-    "helmet": "^4.1.1",
+    "helmet": "^7.1.0",
     "history": "^5.0.0",
     "hoist-non-react-statics": "^3.3.2",
     "icss-utils": "^4.1.1",

package/stylelint-plugins/rules/layout-related-properties/index.js

@@ -6,7 +6,7 @@ const {
 } = require('../../machinery/ast')
 const { flexChildProps, gridChildProps, flexOrGridChildProps } = require('../../machinery/css')
 
-const intrinsicUnits = ['px', 'em', 'rem', 'vw', 'vh']
+const intrinsicUnits = ['px', 'em', 'rem', 'vw', 'vh', 'dvw', 'dvh', 'svh', 'svw', 'lvh', 'lvw']
 const intrinsicProps = ['width', 'height', 'max-width', 'min-width', 'max-height', 'min-height']
 
 const allowedInRootAndChild = [
@@ -22,7 +22,7 @@ const layoutRelatedProps = [ // only allowed in child
   'top', 'right', 'bottom', 'left', 'inset',
   'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
   'max-width', 'min-width', 'max-height', 'min-height',
-  'justify-self', 'align-self',
+  'justify-self', 'align-self', 'place-self',
   ...flexChildProps,
   ...gridChildProps,
   ...flexOrGridChildProps,
@@ -41,7 +41,7 @@ const messages = {
         `one of \`${intrinsicUnits.join('`, `')}\` and add \`!important\``
         : ''
     ),
-  'nested - only layout related props in nested':  prop =>
+  'nested - only layout related props in nested': prop =>
     `illegal non-layout related prop\n` +
     `\`${prop}\` can only be used by root rules - ` +
     `move to another root rule`,

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

@@ -34,7 +34,7 @@ const messages = {
     `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. ` + 
+    `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` +
@@ -72,13 +72,13 @@ const childParentRelations = {
   rootHasDisplayGrid: {
     nestedHasOneOf: gridChildProps,
     requireInRoot: [
-      ['display', 'grid']
+      ['display', ['grid', 'inline-grid']]
     ]
   },
   rootHasDisplayFlexOrGrid: {
     nestedHasOneOf: flexOrGridChildProps,
     requireInRoot: [
-      ['display', ['flex', 'grid']]
+      ['display', ['flex', 'grid', 'inline-grid']]
     ]
   },
   validPointerEvents: {

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

@@ -35,6 +35,19 @@ test('parent-child-policy', {
           }
         `,
       },
+      {
+        title: `don't report when display inline-grid is present`,
+        code: `
+          .good {
+            display: inline-grid;
+
+            & > .test {
+              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;
+            }
+          }
+        `,
+      },
       {
         code: '.good { pointer-events: auto; }',
       },

package/webpack-plugins/copy-unused-files-plugin.js

@@ -20,31 +20,29 @@ module.exports = function copyUnusedFilesPlugin() {
         const chunk = {
           name: 'unused file',
           ids: ['_'],
-          files: []
+          files: /** @type {Array<string>} */([])
         }
         compilation.chunks.push(chunk)
 
         const filesCopied = Promise.all(
-          walkSync(context).map(filePath => {
-            const source = path.resolve(context, filePath)
+          walkSync.entries(context).map(entry => {
+            const source = entry.fullPath
 
             if (compilation.fileDependencies.has(source)) return null
 
+            const filePath = entry.relativePath
             const target = path.resolve(compiler.options.output.path, filePath)
-            return stat(source)
-              .then(stats => {
-                if (stats.isDirectory()) return
-                if (compilation.assets[filePath]) throw new Error(`Unexpected problem: ${filePath} is marked as unused but it is in the compilation assets - create an issue with an example to reproduce and we will figure out a solution`)
+            if (entry.isDirectory()) return null
+            if (compilation.assets[filePath]) throw new Error(`Unexpected problem: ${filePath} is marked as unused but it is in the compilation assets - create an issue with an example to reproduce and we will figure out a solution`)
 
-                const asset = compilation.assets[filePath] = {
-                  size: () => stats.size,
-                  emitted: false
-                }
-                chunk.files.push(filePath)
+            const asset = compilation.assets[filePath] = {
+              size: () => entry.size,
+              emitted: false
+            }
+            chunk.files.push(filePath)
 
-                return copy(source, target)
-                  .then(_ => { asset.emitted = true })
-              })
+            return copy(source, target)
+              .then(_ => { asset.emitted = true })
           })
         )
 
@@ -54,14 +52,10 @@ module.exports = function copyUnusedFilesPlugin() {
   }
 }
 
+/** @returns {Promise<void>} */
 function copy(source, target) {
   return new Promise((resolve, reject) => {
-    fs.copy(source, target, err => { err ? reject(err) : resolve() })
+    fs.copy(source, target, { preserveTimestamps: true }, err => { err ? reject(err) : resolve() })
   })
-}
 
-function stat(filePath) {
-  return new Promise((resolve, reject) => {
-    fs.stat(filePath, (err, stats) => { err ? reject(err) : resolve(stats) })
-  })
 }

package/webpack-plugins/config-loader-plugin.js

@@ -1,22 +0,0 @@
-/*
-  This plugin determines when @kaliber/config is imported and pushes the custom config-loader
-*/
-const p = 'config-loader-plugin'
-
-module.exports = function configLoaderPlugin() {
-  return {
-    apply: compiler => {
-      compiler.hooks.normalModuleFactory.tap(p, normalModuleFactory => {
-
-        normalModuleFactory.hooks.afterResolve.tap(p, data => {
-          const { loaders, rawRequest } = data
-
-          if (rawRequest === '@kaliber/config')
-            loaders.push({ loader: require.resolve('../webpack-loaders/config-loader') })
-
-          return data
-        })
-      })
-    }
-  }
-}