[BPK-2653] Investigate shipping CSS (#1607)

* [BPK-2653] Investigate shipping CSS

* [BPK-2653] Add CSS files

* [BPK-2653] Support loading CSS in storybook

package.json

@@ -40,6 +40,7 @@
     "test": "npm run lint && npm run check-bpk-dependencies && npm run jest && npm run flow && npm run spellcheck",
     "check-owners": "npm whoami && ( node scripts/npm/get-owners.js | grep -E $(npm whoami) ) && node scripts/npm/check-owners.js",
     "check-pristine": "node scripts/check-pristine-state",
+    "publish:css": "node ./scripts/publish-process/transform-js-scss-css-imports.js && node ./scripts/publish-process/publish-css-tagged-packages.js && git reset --hard HEAD",
     "publish": "npm run check-pristine && npm run check-owners && npm run build && git pull --rebase && flow stop && npm run test && lerna publish",
     "publish:beta": "npm run check-pristine && npm run check-owners && npm run build && git pull --rebase && flow stop && npm run test && node scripts/publish-process/auto-publish.js",
     "release": "npm run publish",

scripts/publish-process/publish-css-tagged-packages.js

@@ -0,0 +1,54 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016-2019 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * How this works
+ *
+ * First of all, this scans all our packages and gets the current versions.
+ *
+ * Each package is then updated to have `-css.0` appended to the version,
+ * and then `npm publish` is used to publish each package with the `css` tag for easy installation,
+ */
+
+/* @flow */
+
+const {
+  getCurrentPackageMeta,
+  appendToPackageVersions,
+  publishPackagesToNPM,
+  verbose,
+  logVerbose,
+} = require('./util');
+
+const cli = async () => {
+  const currentPackageMeta = getCurrentPackageMeta();
+  if (verbose) {
+    logVerbose(`currentPackageMeta`);
+    logVerbose(currentPackageMeta);
+  }
+
+  // eslint-disable-next-line no-console
+  console.log('Updating package versions...');
+  await appendToPackageVersions(currentPackageMeta, 'css.0');
+  // eslint-disable-next-line no-console
+  console.log('All good. 👍');
+
+  await publishPackagesToNPM(currentPackageMeta, 'css');
+};
+
+cli().then(null);

scripts/publish-process/transform-js-scss-css-imports.js

@@ -0,0 +1,64 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016-2019 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+const fs = require('fs');
+const { execSync } = require('child_process');
+
+const updateImports = (file, findReplaces) =>
+  new Promise((resolve, reject) => {
+    fs.readFile(file, 'utf8', (err, data) => {
+      if (err) {
+        reject(err);
+      }
+      let result = data;
+      findReplaces.forEach(fr => {
+        const splitFile = result.split(fr.find);
+        if (splitFile.length === 1) {
+          return;
+        }
+        result = splitFile.join(fr.replace);
+      });
+
+      fs.writeFile(file, result, 'utf8', err2 => {
+        if (err2) return reject(err2);
+        return resolve();
+      });
+    });
+  });
+
+// eslint-disable-next-line no-console
+console.log('Crunching import paths...');
+
+const findReplaces = [{ find: '.scss', replace: '.css' }];
+
+const jsFiles = execSync(
+  'find packages -name "*.js" -o -name "*.jsx" | grep -v node_modules',
+)
+  .toString()
+  .split('\n')
+  .filter(s => s !== '');
+
+const updatePromises = jsFiles.map(jF => updateImports(jF, findReplaces));
+
+Promise.all(updatePromises).then(() => {
+  // eslint-disable-next-line no-console
+  console.log('All good.  👍');
+  process.exit(0);
+});

scripts/publish-process/util.js

@@ -18,6 +18,7 @@
 
 /* eslint-disable no-console */
 
+const path = require('path');
 const fs = require('fs');
 const { exec, execSync } = require('child_process');
 const readline = require('readline');
@@ -391,25 +392,51 @@ const updateChangelog = (changes, changeSummary) => {
   return publishTitle;
 };
 
-const publishPackageToNPM = packageName =>
+const publishPackageToNPM = (packageName, tag) =>
   new Promise(resolve => {
-    exec(`(cd packages/${packageName} && npm publish)`, null, () => {
+    const tagArg = tag ? ` --tag ${tag}` : '';
+    exec(`(cd packages/${packageName} && npm publish${tagArg})`, null, () => {
       publishDone();
       resolve();
     });
   });
 
-const publishPackagesToNPM = changes =>
+const publishPackagesToNPM = (changes, tag) =>
   new Promise(resolve => {
     bar.start(changes.length, 0);
-    const tasks = changes.map(c => publishPackageToNPM(c.name));
+    const tasks = changes.map(c => publishPackageToNPM(c.name, tag));
 
     Promise.all(tasks).then(result => {
       bar.stop();
       resolve(result);
     });
   });
 
+const appendToPackageVersion = (c, text) =>
+  new Promise(resolve => {
+    const packageJsonFilePath = path.join(c.path, 'package.json');
+    const appendedVersion = `${c.currentVersion}-${text}`;
+    const packageJsonData = JSON.parse(
+      fs.readFileSync(packageJsonFilePath).toString(),
+    );
+    packageJsonData.version = appendedVersion;
+    fs.writeFileSync(
+      packageJsonFilePath,
+      `${JSON.stringify(packageJsonData, null, '  ')}\n`,
+    );
+
+    resolve();
+  });
+
+const appendToPackageVersions = (changes, text) =>
+  new Promise(resolve => {
+    const tasks = changes.map(c => appendToPackageVersion(c, text));
+
+    Promise.all(tasks).then(result => {
+      resolve(result);
+    });
+  });
+
 const generateCommitMessage = changes => {
   let result = `Publish`;
   if (changes.length > 0) {
@@ -429,7 +456,7 @@ const performPublish = async (changes, changeSummary) => {
   if (!testing) {
     disableKrypton();
     execSync(`git add . && git commit -m "${commitMessage}" --no-verify`);
-    await publishPackagesToNPM(changes);
+    await publishPackagesToNPM(changes, null);
     execSync(`git add . && git commit --amend --no-edit --no-verify`);
     createGitTags(changes);
     execSync(`git push`);
@@ -515,4 +542,6 @@ module.exports = {
   generateCommitMessage,
   generateChangelogSection,
   cancelPublish,
+  appendToPackageVersions,
+  publishPackagesToNPM,
 };