@kaliber/build 0.0.138 → 0.0.139

package/lib/build.js

@@ -54,6 +54,7 @@ const {
     publicPath = '/',
     symlinks = true,
     webpackLoaders: userDefinedWebpackLoaders = [],
+    cssNativeCustomProperties = false,
   } = {}
 } = require('@kaliber/config')
 
@@ -85,11 +86,12 @@ const babelLoader = {
 
 const cssLoaderGlobalScope = {
   loader: 'css-loader',
-  options: { globalScopeBehaviour: true }
+  options: { globalScopeBehaviour: true, nativeCustomProperties: cssNativeCustomProperties }
 }
 
 const cssLoader = {
-  loader: 'css-loader'
+  loader: 'css-loader',
+  options: { nativeCustomProperties: cssNativeCustomProperties }
 }
 
 const cssLoaderMinifyOnly = {

package/package.json

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

package/stylelint-plugins/rules/color-schemes/readme.md

@@ -8,15 +8,15 @@ Color schemes are defined by creating files in a `colorScheme` directory or `col
   color: var(--color-white);
 
   & .color-scheme-icon {
-    color: color-mod(var(--color-red-dark) alpha(0.4));
+    color: var(--color-red-700);
   }
 
   & .color-scheme-exclusion {
-    color: var(--color-red-light);
+    color: var(--color-red-300);
   }
 
   & ::selection {
-    background-color: var(--color-red-light);
+    background-color: var(--color-red-300);
   }
 }
 ```
@@ -68,7 +68,7 @@ Examples of *incorrect* code for this rule:
 Before:
 ```css
 .abc {
-  color: #AABBCC;
+  color: #aabbcc;
   opacity: 0.5;
 }
 ```
@@ -76,8 +76,8 @@ Before:
 After:
 ```css
 .abc {
-  color: #AABBCC80;
+  color: #aabbcc80;
   /* or */
-  color: color-mod(#AABBCC alpha(50%));
+  color: rgba(170, 187, 204, 0.5);
 }
 ```

package/stylelint-plugins/rules/index/readme.md

@@ -51,7 +51,7 @@ html {
 }
 
 body {
-  color: var(--color-gray-90);
+  color: var(--color-gray-900);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-base-400);

package/template/config/default.js

@@ -3,6 +3,9 @@ module.exports = {
     Warning: do not use this to set values that differ in each environment,
     only use this for configuration that is the same across all config environments
   */
+  kaliber: {
+    cssNativeCustomProperties: true
+  },
   rollbar: {
     post_client_item: 'get an access token at rollbar.com',
   }

package/template/src/components/home/Intro.css

@@ -1,8 +1,8 @@
 .component {
   padding: 20px;
   border-radius: 4px;
-  border: 1px solid var(--color-gray-80);
-  background-color: var(--color-gray-10);
+  border: 1px solid var(--color-gray-800);
+  background-color: var(--color-gray-100);
   @media (--viewport-lg) { padding: 40px; }
 
   & > *:not(:last-child) { margin-bottom: 40px; }

package/template/src/components/home/pageOnly/Section.css

@@ -1,4 +1,4 @@
 .component {
-  background-color: var(--color-gray-70);
+  background-color: var(--color-gray-700);
   padding: 40px 0;
 }

package/template/src/cssGlobal/colors.css

@@ -0,0 +1,6 @@
+:root {
+  --color-gray-100: #f8f8f8;
+  --color-gray-700: #4d4d4d;
+  --color-gray-800: #1e1e1e;
+  --color-gray-900: #1c1c1c;
+}

package/template/src/cssGlobal/media.css

@@ -1,9 +1,3 @@
-:export {
-  breakpointSm: 480px;
-  breakpointMd: 768px;
-  breakpointLg: 1024px;
-}
-
 @custom-media --viewport-sm screen and (min-width: 480px);
 @custom-media --viewport-md screen and (min-width: 768px);
 @custom-media --viewport-lg screen and (min-width: 1024px);

package/template/src/cssGlobal/selectors.css

@@ -0,0 +1 @@
+@custom-selector :--enter :hover, :focus;

package/template/src/cssGlobal/type.css

@@ -2,5 +2,5 @@
   --font-family-base: 'Barlow', sans-serif;
   --font-weight-base-400: 400;
 
-  --font-size-md: 18px;
+  --font-size-18: 18px;
 }

package/template/src/index.css

@@ -7,7 +7,7 @@ html {
 }
 
 body {
-  color: var(--color-gray-90);
+  color: var(--color-gray-900);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-base-400);

package/template/src/index.html.js

@@ -1,5 +1,9 @@
 import '/reset.css'
 import '/index.css'
+import '/cssGlobal/colors.css'
+import '/cssGlobal/sizes.css'
+import '/cssGlobal/type.css'
+
 import stylesheet from '@kaliber/build/lib/stylesheet'
 import javascript from '@kaliber/build/lib/javascript'
 import polyfill from '@kaliber/build/lib/polyfill'

package/template/src/reset.css

@@ -12,7 +12,6 @@ h4,
 h5,
 h6 {
   margin: 0;
-  &:not(:last-child) { padding-bottom: 0.8333em; }
 }
 
 address { font-style: normal; }

package/webpack-loaders/css-loader.js

@@ -8,7 +8,7 @@ const vm = require('vm')
 const isProduction = process.env.NODE_ENV === 'production'
 
 function createPlugins(
-  { minifyOnly, globalScopeBehaviour, cssGlobalFiles },
+  { minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles },
   { resolveForImport, resolveForUrlReplace, resolveForImportExportParser }
 ) {
 
@@ -22,14 +22,13 @@ function createPlugins(
         require('postcss-modules-values'),
         require('postcss-preset-env')({
           features: {
-            'custom-properties': { preserve: false, importFrom: cssGlobalFiles },
+            'custom-properties': !nativeCustomProperties && { preserve: false, importFrom: cssGlobalFiles },
             'custom-media-queries': { preserve: false, importFrom: cssGlobalFiles },
             'custom-selectors': { preserve: false, importFrom: cssGlobalFiles },
             'media-query-ranges': true,
             'nesting-rules': true,
             'hexadecimal-alpha-notation': true,
             'color-functional-notation': true,
-            'color-mod-function': true,
             'font-variant-property': true,
             'all-property': true,
             'any-link-pseudo-class': true,
@@ -60,12 +59,12 @@ module.exports = function CssLoader(source, map) {
   const callback = this.async()
 
   const loaderOptions = loaderUtils.getOptions(this) || {}
-  const { minifyOnly = false, globalScopeBehaviour = false } = loaderOptions
+  const { minifyOnly = false, globalScopeBehaviour = false, nativeCustomProperties = false } = loaderOptions
 
   const cssGlobalFiles = cachedFindCssGlobalFiles(this)
   cssGlobalFiles.forEach(x => this.addDependency(x))
 
-  const plugins = getPlugins(this, { minifyOnly, globalScopeBehaviour, cssGlobalFiles })
+  const plugins = getPlugins(this, { minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles })
   const filename = relative(this.rootContext, this.resourcePath)
   const options = {
     from: this.resourcePath,
@@ -109,12 +108,12 @@ module.exports = function CssLoader(source, map) {
   }
 }
 
-function getPlugins(loaderContext, { minifyOnly, globalScopeBehaviour, cssGlobalFiles }) {
+function getPlugins(loaderContext, { minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles }) {
   const key = `plugins${minifyOnly ? '-minifyOnly' : ''}${globalScopeBehaviour ? '-globalScope' : ''}`
 
-  return cachedInConmpilation(loaderContext, key, () => {
+  return cachedInCompilation(loaderContext, key, () => {
     const handlers = createHandlers(loaderContext)
-    const plugins = createPlugins({ minifyOnly, globalScopeBehaviour, cssGlobalFiles }, handlers)
+    const plugins = createPlugins({ minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles }, handlers)
     return plugins
   })
 }
@@ -149,7 +148,7 @@ function createHandlers(loaderContext) {
 
   function executeModuleAt(url, source) {
     const key = `module-${url}`
-    return cachedInConmpilation(loaderContext, key, () => {
+    return cachedInCompilation(loaderContext, key, () => {
 
       const sandbox = {
         module: {},
@@ -162,12 +161,12 @@ function createHandlers(loaderContext) {
 }
 
 function cachedFindCssGlobalFiles(loaderContext) {
-  return cachedInConmpilation(loaderContext, 'global-css-files', () =>
+  return cachedInCompilation(loaderContext, 'global-css-files', () =>
     findCssGlobalFiles(loaderContext.rootContext)
   )
 }
 
-function cachedInConmpilation(loaderContext, key, f) {
+function cachedInCompilation(loaderContext, key, f) {
   const c = loaderContext._compilation
   const cache = c.kaliberCache || (c.kaliberCache = {})
   if (cache[key]) return cache[key]

package/template/src/cssGlobal/color.css

@@ -1,6 +0,0 @@
-:root {
-  --color-gray-10: #f8f8f8;
-  --color-gray-70: #4d4d4d;
-  --color-gray-80: #1e1e1e;
-  --color-gray-90: #1c1c1c;
-}