Update Themekit version and themekit-node API

.yarnrc

@@ -0,0 +1,6 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lastUpdateCheck 1628649851717
+yarn-path ".yarn\\releases\\yarn-1.22.11.js"

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: ".yarn/releases/yarn-berry.cjs"
+nodeLinker: node-modules

package.json

@@ -1,6 +1,7 @@
 {
   "name": "slate",
   "private": true,
+  "version": "1.0.0",
   "author": "Shopify Inc.",
   "description": "A theme scaffold and command line tool for developing Shopify themes.",
   "keywords": [

packages/create-slate-theme/package.json

@@ -11,9 +11,7 @@
   "bugs": {
     "url": "https://github.com/shopify/slate/issues"
   },
-  "bin": {
-    "create-slate-theme": "./index.js"
-  },
+  "bin": "./index.js",
   "dependencies": {
     "@shopify/slate-analytics": "1.0.0-beta.16",
     "@shopify/slate-env": "1.0.0-beta.16",

packages/slate-sync/index.js

@@ -1,7 +1,7 @@
 const chalk = require('chalk');
 const figures = require('figures');
 const https = require('https');
-const themekit = require('@shopify/themekit').command;
+const themekit = require('@shopify/themekit');
 const slateEnv = require('@shopify/slate-env');
 const SlateConfig = require('@shopify/slate-config');
 
@@ -18,7 +18,7 @@ function maybeDeploy() {
   if (filesToDeploy.length) {
     const files = [...filesToDeploy];
     filesToDeploy = [];
-    return deploy('upload', files);
+    return deploy('deploy', files);
   }
 
   return Promise.resolve();
@@ -45,28 +45,19 @@ function _generateConfigFlags() {
   _validateEnvValues();
 
   const flags = {
-    '--password': slateEnv.getPasswordValue(),
-    '--themeid': slateEnv.getThemeIdValue(),
-    '--store': slateEnv.getStoreValue(),
-    '--env': slateEnv.getEnvNameValue(),
+    password: slateEnv.getPasswordValue(),
+    themeid: slateEnv.getThemeIdValue(),
+    store: slateEnv.getStoreValue(),
+    env: slateEnv.getEnvNameValue(),
   };
   if (slateEnv.getTimeoutValue()) {
-    flags['--timeout'] = slateEnv.getTimeoutValue();
+    flags.timeout = slateEnv.getTimeoutValue();
+  }
+  if (slateEnv.getIgnoreFilesValue()) {
+    flags.ignoredFiles = slateEnv.getIgnoreFilesValue().split(':');
   }
 
   // Convert object to key value pairs and flatten the array
-  return Array.prototype.concat(...Object.entries(flags));
-}
-
-function _generateIgnoreFlags() {
-  const ignoreFiles = slateEnv.getIgnoreFilesValue().split(':');
-  const flags = [];
-
-  ignoreFiles.forEach((pattern) => {
-    flags.push('--ignored-file');
-    flags.push(pattern);
-  });
-
   return flags;
 }
 
@@ -78,9 +69,9 @@ function _generateIgnoreFlags() {
  * @return          Promise
  */
 async function deploy(cmd = '', files = []) {
-  if (!['upload', 'replace'].includes(cmd)) {
+  if (!['deploy', 'replace'].includes(cmd)) {
     throw new Error(
-      'shopify-deploy.deploy() first argument must be either "upload", "replace"',
+      'shopify-deploy.deploy() first argument must be either "deploy", "replace"',
     );
   }
 
@@ -89,8 +80,19 @@ async function deploy(cmd = '', files = []) {
   console.log(chalk.magenta(`\n${figures.arrowUp}  Uploading to Shopify...\n`));
 
   try {
-    await promiseThemekitConfig();
-    await promiseThemekitDeploy(cmd, files);
+    await themekit.command('configure', _generateConfigFlags(), {
+      cwd: config.get('paths.theme.dist'),
+    });
+    await themekit.command(
+      cmd,
+      {
+        ..._generateConfigFlags(),
+        files,
+      },
+      {
+        cwd: config.get('paths.theme.dist'),
+      },
+    );
   } catch (error) {
     console.error('My Error', error);
   }
@@ -100,51 +102,6 @@ async function deploy(cmd = '', files = []) {
   return maybeDeploy;
 }
 
-function promiseThemekitConfig() {
-  return new Promise((resolve, reject) => {
-    themekit(
-      {
-        args: [
-          'configure',
-          ..._generateConfigFlags(),
-          ..._generateIgnoreFlags(),
-        ],
-        cwd: config.get('paths.theme.dist'),
-      },
-      (err) => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve();
-        }
-      },
-    );
-  });
-}
-
-function promiseThemekitDeploy(cmd, files) {
-  return new Promise((resolve, reject) => {
-    themekit(
-      {
-        args: [
-          cmd,
-          '--no-update-notifier',
-          ..._generateConfigFlags(),
-          ...files,
-        ],
-        cwd: config.get('paths.theme.dist'),
-      },
-      (err) => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve();
-        }
-      },
-    );
-  });
-}
-
 /**
  * Fetch the main theme ID from Shopify
  *
@@ -237,7 +194,7 @@ module.exports = {
   },
 
   upload() {
-    return deploy('upload');
+    return deploy('deploy');
   },
 
   fetchMainThemeId,

packages/slate-sync/package.json

@@ -14,7 +14,7 @@
     "@shopify/slate-analytics": "1.0.0-beta.16",
     "@shopify/slate-config": "1.0.0-beta.14",
     "@shopify/slate-env": "1.0.0-beta.16",
-    "@shopify/themekit": "0.6.12",
+    "@shopify/themekit": "^1.0.1",
     "array-flatten": "^2.1.1",
     "chalk": "2.3.2",
     "figures": "^2.0.0",

packages/slate-tools/package.json

@@ -8,9 +8,7 @@
   "bugs": {
     "url": "https://github.com/Shopify/slate/issues"
   },
-  "bin": {
-    "slate-tools": "./cli/index.js"
-  },
+  "bin": "./cli/index.js",
   "engine": ">=8.9.4",
   "dependencies": {
     "@shopify/html-webpack-liquid-asset-tags-plugin": "1.0.0-beta.11",
@@ -24,13 +22,13 @@
     "@shopify/slate-tag-webpack-plugin": "1.0.0-beta.14",
     "@shopify/slate-translations": "1.0.0-beta.19",
     "@shopify/theme-lint": "^2.0.0",
-    "@shopify/themekit": "0.6.12",
+    "@shopify/themekit": "^1.0.1",
     "archiver": "^2.1.0",
     "array-flatten": "^2.1.1",
     "autoprefixer": "6.7.7",
     "babel-cli": "6.26.0",
     "babel-jest": "20.0.3",
-    "babel-loader": "7.1.4",
+    "babel-loader": "^7.1.5",
     "browser-sync": "^2.24.6",
     "chalk": "2.3.2",
     "clean-webpack-plugin": "0.1.19",
@@ -61,22 +59,22 @@
     "mini-css-extract-plugin": "^0.4.3",
     "minimatch": "^3.0.4",
     "minimist": "1.2.0",
-    "node-sass": "^4.11.0",
     "ora": "^2.0.0",
     "portscanner": "^2.2.0",
     "postcss-loader": "2.1.1",
     "postcss-reporter": "^5.0.0",
     "prettier": "^1.10.2",
     "raw-loader": "^0.5.1",
     "react-dev-utils": "0.5.2",
-    "sass-loader": "6.0.7",
+    "sass": "^1.37.5",
+    "sass-loader": "10.1.1",
     "style-loader": "0.20.3",
     "stylelint": "^9.1.2",
     "stylelint-webpack-plugin": "^0.10.1",
     "tapable": "^1.0.0",
     "uglifyjs-webpack-plugin": "^1.0.1",
     "uuid": "^3.2.1",
-    "webpack": "^4.1.1",
+    "webpack": "^4.36.0",
     "webpack-dev-middleware": "3.4.0",
     "webpack-hot-middleware": "2.21.2",
     "webpack-merge": "4.1.2",

packages/slate-tools/tools/webpack/config/parts/sass.js

@@ -43,7 +43,10 @@ const cssVarLoader = {loader: '@shopify/slate-cssvar-loader'};
 
 const sassLoader = {
   loader: 'sass-loader',
-  options: {sourceMap: config.get('webpack.sourceMap.styles')},
+  options: {
+    sourceMap: config.get('webpack.sourceMap.styles'),
+    implementation: require("sass"),
+  },
 };
 
 sassRule.use = [

packages/slate-tools/tools/webpack/config/prod.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const crypto = require('crypto');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -20,6 +21,41 @@ const getTemplateEntrypoints = require('./utilities/get-template-entrypoints');
 const HtmlWebpackIncludeLiquidStylesPlugin = require('../html-webpack-include-chunks');
 const config = new SlateConfig(require('../../../slate-tools.schema'));
 
+const chunkNameHashes = {};
+const getChunkNameNew = (module, chunks, cacheGroup) => {
+  let containsLayout = false;
+  const names = chunks
+    .map((chunk) => {
+      if (chunk.name.includes('layout.')) {
+        containsLayout = true;
+      }
+      return chunk.name;
+    })
+    .filter(
+      (name) => !containsLayout || (containsLayout && name.includes('layout.')),
+    );
+
+  if (!names.every(Boolean)) return;
+
+  names.sort();
+  let name =
+    (cacheGroup && cacheGroup !== 'default' ? `${cacheGroup}@` : '') +
+    names.join('@');
+
+  const hashName = `${hashFilename(name)}`;
+  chunkNameHashes[hashName] = name;
+
+  /* eslint-disable-next-line consistent-return */
+  return hashName;
+};
+function hashFilename(name) {
+  return crypto
+    .createHash('md4')
+    .update(name)
+    .digest('hex')
+    .slice(0, 8);
+}
+
 module.exports = merge([
   core,
   entry,
@@ -28,7 +64,7 @@ module.exports = merge([
   css,
   {
     mode: 'production',
-    devtool: 'hidden-source-map',
+    devtool: 'source-map',
 
     plugins: [
       new MiniCssExtractPlugin({
@@ -62,6 +98,7 @@ module.exports = merge([
         chunksSortMode: 'dependency',
         liquidTemplates: getTemplateEntrypoints(),
         liquidLayouts: getLayoutEntrypoints(),
+        chunkNameHashes,
       }),
 
       new HtmlWebpackPlugin({
@@ -80,6 +117,7 @@ module.exports = merge([
         chunksSortMode: 'dependency',
         liquidTemplates: getTemplateEntrypoints(),
         liquidLayouts: getLayoutEntrypoints(),
+        chunkNameHashes,
       }),
 
       new HtmlWebpackIncludeLiquidStylesPlugin(),
@@ -90,7 +128,7 @@ module.exports = merge([
     optimization: {
       splitChunks: {
         chunks: 'initial',
-        name: getChunkName,
+        name: getChunkNameNew,
       },
     },
   },

packages/slate-tools/tools/webpack/get-chunk-name.js

@@ -26,7 +26,7 @@ module.exports = function(module, chunks, cacheGroup) {
   // been set to 100 to prevent `[name].[chunkhash].[ext]` from
   // generating a 256+ character string.
   if (name.length > 256) {
-    name = `${name.slice(0, 240)}~${hashFilename(name)}`;
+    name = `${name.slice(0, 220)}~${hashFilename(name)}`;
   }
 
   /* eslint-disable-next-line consistent-return */

packages/slate-tools/tools/webpack/script-tags.html

@@ -1,4 +1,13 @@
 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+  <% if (htmlWebpackPlugin.options.chunkNameHashes && htmlWebpackPlugin.options.chunkNameHashes.hasOwnProperty(chunk)) { %>
+    <% var chunkName = htmlWebpackPlugin.options.chunkNameHashes[chunk] %>
+  <% } else { %>
+    <% var chunkName = chunk %>
+  <% } %>
+  {% comment %}
+  <%= chunk %>
+  <%= chunkName %>
+  {% endcomment %}
   <% if (htmlWebpackPlugin.options.isDevServer === true) { %>
     <% var src = htmlWebpackPlugin.files.chunks[chunk].entry %>
   <% } else { %>
@@ -7,14 +16,14 @@
   <% } %>
 
   <% if (typeof htmlWebpackPlugin.options.liquidLayouts[chunk] !== 'undefined') { %>
-    {%- if layout == '<%= chunk.split('.')[1] %>' -%}
+    {%- if layout == '<%= chunkName.split('.')[1] %>' -%}
       <script type="text/javascript" src="<%= src %>" defer></script>
     {%- else -%}
       <link rel="prefetch" href="<%= src %>" as="script">
     {%- endif -%}
 
-  <% } else if (chunk.split('@').length > 1) { %>
-    <% var pages = chunk.split('@') %>
+  <% } else if (chunkName.split('@').length > 1) { %>
+    <% var pages = chunkName.split('@') %>
     <% var conditions = [] %>
 
     <% pages.forEach(function(page){ %>