🏥 Fix Unstable Selectors, Background Images, and More (#8)

* Copy timeline into a separate window

* Shorten document title below max filename length

* Fix background images not showing up on print

* Build Process FTW

* Fix timestamp element not matching in other languages

* 🔥 Fix unstable timeline selector

* Make timestamp regex even more robust (works in Japanese now too)

* Improve media sizing to fit within the page

* Add 50ms delay to help reduce risk of rate limits

* Add zip to default gulp command (easier 1-step builds)

* Add v2.1.0 notes

* Fix v2.1.0 package.json version and changelog date

* Update package-lock.json

* Changelog footnotes

.gitignore

@@ -1,3 +1,3 @@
-*.psd
+*.zip
+build/
 dist/
-

changelog.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 2.1.0 - 2020-09-03
+
+### Added
+
+- 👷‍♂️ Build Process FTW.
+
+### Changed
+
+- ✂️ Shorten document title below max filename length.
+- 🖼 Open timeline in a separate window.
+- 📷 Adjust media sizing to better fit within the page.
+- 🏎 Add 50ms delay to help reduce risk of [rate limits](https://developer.twitter.com/en/docs/twitter-api/rate-limits).
+
+### Fixed
+
+- 🔥 Fix unstable timeline selector.
+- 🙈 Fix background images not showing up on print.
+- ⏰ Fix timestamp element not matching in other languages.
+
 ## 2.0.0 - 2020-08-31
 
 ### Changed
@@ -27,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Automatically print when replies have finished loading.
 - Hide promoted tweets.
 
-[Unreleased]: https://github.com/tannerhodges/snap-slider/compare/v2.0.0...HEAD
+[Unreleased]: https://github.com/tannerhodges/snap-slider/compare/v2.1.0...HEAD
+[2.1.0]: https://github.com/tannerhodges/snap-slider/compare/v2.0.0...v2.1.0
 [2.0.0]: https://github.com/tannerhodges/snap-slider/compare/v1.0.0...v2.0.0
 [1.0.0]: https://github.com/tannerhodges/snap-slider/releases/tag/v1.0.0

gulpfile.js

@@ -1,8 +1,69 @@
-const gulp = require('gulp');
+const { dest, parallel, series, src, watch } = require('gulp');
+const clean = require('postcss-clean');
+const fs = require('fs');
+const postcss = require('gulp-postcss');
+const prefixer = require('postcss-prefix-selector');
+const replace = require('gulp-replace');
 const zip = require('gulp-zip');
 
-exports.default = () => (
-  gulp.src('src/*')
-    .pipe(zip('chrome-twitter-print-styles.zip'))
-    .pipe(gulp.dest('dist'))
+/**
+ * Process CSS to work with both default Twitter print styles,
+ * and the custom print screen that we open in a new window.
+ */
+function copy() {
+  return src('src/*')
+    .pipe(dest('dist/'));
+}
+exports.copy = copy;
+
+/**
+ * Process CSS to work with both default Twitter print styles,
+ * and the custom print screen that we open in a new window.
+ */
+const css = parallel(
+  // Wrap everything in a print media query so we can apply
+  // it to Twitter's default print styles.
+  function defaultPrintCSS() {
+    return src('src/index.css')
+      .pipe(replace('/* BEGIN */', '@media print {'))
+      .pipe(replace('/* END */', '}'))
+      .pipe(dest('dist/'));
+  },
+  // Prefix everything with a custom ID, then compress it to
+  // fit in a <style> tag for the custom print window.
+  function customPrintCSS() {
+    return src('src/index.css')
+      .pipe(postcss([
+        prefixer({ prefix: '#twitter-print-styles' }),
+        clean()
+      ]))
+      .pipe(dest('build/'));
+  }
 );
+exports.css = css;
+
+/**
+ * Process JS to include our CSS in the custom print window.
+ */
+function js() {
+  return src('src/content.js')
+    .pipe(replace('/* STYLES */', fs.readFileSync('build/index.css', 'utf8')))
+    .pipe(dest('dist/'));
+}
+exports.js = js;
+
+/**
+ * ZIP final build for publishing on the Chrome Web Store.
+ */
+function zipTask() {
+  return src('dist/*')
+    .pipe(zip('chrome-twitter-print-styles.zip'))
+    .pipe(dest('./'));
+}
+exports.zip = zipTask;
+
+// Tasks
+exports.default = series(copy, css, js, zipTask);
+
+// Watch
+exports.watch = () => watch('src/*', series(copy, css, js));