Merge pull request #771 from SimonBiggs/swap-to-webpack

Swap to using webpack

docs/changelog.rst

@@ -19,6 +19,7 @@ Other Changes
 * Add the ``navigation`` template block around the navigation area.
 * Added Spanish translation
 * Added i18n support using Babel
+* Moved build system from Grunt and friends to Webpack
 
 0.4.3
 ======

docs/contributing.rst

@@ -10,13 +10,12 @@ Modifying the theme
 ===================
 
 The styles for this theme use SASS_ and a custom CSS framework called Wyrm_. We
-use Bower_ to manage these dependencies and SASS_ to build the CSS. Grunt_ is
-used to watch for changes, rebuild the static assets, and rebuild the Sphinx
-demo documentation.
+use Webpack_ and node-sass_ to build the CSS. Webpack_ is used to watch for
+changes, rebuild the static assets, and rebuild the Sphinx demo documentation.
 
 .. note::
-    The installation of Ruby and Node is outside the scope of this
-    documentation. You will need both in order to make changes to this theme.
+    The installation of Node is outside the scope of this documentation. You
+    will need Node version 10+ in order to make changes to this theme.
 
 Set up your environment
 -----------------------
@@ -27,13 +26,7 @@ Set up your environment
 
        pip install -e '.[dev]'
 
-#. Install SASS.
-
-   .. code:: console
-
-       gem install sass
-
-#. Install Bower, Grunt, and theme dependencies locally.
+#. Install Webpack_, node-sass_, and theme dependencies locally.
 
    .. code:: console
 
@@ -42,31 +35,31 @@ Set up your environment
 Making changes
 --------------
 
-Changes to the theme can be compiled and tested with the default Grunt task:
+Changes to the theme can be compiled and tested with Webpack_:
 
 .. code:: console
 
-    grunt
+    npm run dev
 
-This default task will do the following:
+This script will do the following:
 
-#. Install and update any Bower dependencies.
+#. Install and update any dependencies.
 #. Build the static CSS from SASS source files.
 #. Build the demo documentation.
 #. Watch for changes to the SASS files and documentation and rebuild everything
    on any detected changes.
 
-Alternatively, if you don't need to watch the files, Grunt can be called with
-the same task used for releases:
+Alternatively, if you don't need to watch the files, the release build script
+can be used to test built assets:
 
 .. code:: console
 
-    grunt build
+    npm run build
 
-.. _Bower: http://www.bower.io
+.. _Webpack: https://webpack.js.org/
+.. _node-sass: https://github.com/sass/node-sass
 .. _SASS: http://www.sass-lang.com
 .. _Wyrm: http://www.github.com/snide/wyrm/
-.. _Grunt: http://www.gruntjs.com
 .. _Sphinx: http://www.sphinx-doc.org/en/stable/
 
 Translations
@@ -96,10 +89,12 @@ Releasing the theme
 
 To release a new version of the theme, core team will take the following steps:
 
-#. Bump the version in ``sphinx_rtd_theme/__init__.py``, ``bower.json`` and ``package.json`` --
-   we try to follow `semver <http://semver.org/>`_, so be careful with breaking changes.
+#. Bump the version in ``sphinx_rtd_theme/__init__.py``, ``setup.py`` and
+   ``package.json``.  We follow `semver <http://semver.org/>`_ and `PEP440`_
+   (with regards to alpha release and development versions). The version
+   increment should reflect these releases and any potentially breaking changes.
 #. Update the changelog (``docs/changelog.rst``) with the version information.
-#. Run ``grunt build`` to rebuild all the theme assets.
+#. Run ``npm run build`` to rebuild all the theme assets.
 #. Run ``python setup.py update_translations`` to compile new translation files and update Transifex
 #. Commit that change.
 #. Tag the release in git: ``git tag $NEW_VERSION``.
@@ -111,3 +106,5 @@ To release a new version of the theme, core team will take the following steps:
         rm -rf dist/
         python setup.py sdist bdist_wheel
         twine upload --sign --identity security@readthedocs.org dist/*
+
+.. _PEP440: https://www.python.org/dev/peps/pep-0440/

package.json

@@ -3,21 +3,33 @@
   "main": "js/theme.js",
   "version": "0.4.3",
   "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --open --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "dependencies": {},
   "devDependencies": {
-    "bower": "^1.8.4",
-    "browserify": "^13.0.0",
-    "connect-livereload": "~0.6.0",
-    "grunt": "~1.0.1",
-    "grunt-banner": "^0.6.0",
-    "grunt-browserify": "^5.0.0",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-connect": "^1.0.2",
-    "grunt-contrib-copy": "~1.0.0",
-    "grunt-contrib-sass": "~1.0.0",
-    "grunt-contrib-uglify": "~3.3.0",
-    "grunt-contrib-watch": "~1.0.0",
-    "grunt-exec": "~1.0.1",
-    "grunt-open": "0.2.3",
-    "matchdep": "~1.0.1"
+    "bourbon": "~4.3",
+    "bourbon-neat": "~1.9",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "font-awesome": "^4.7.0",
+    "imports-loader": "^0.8.0",
+    "jquery": "^3.4.1",
+    "lato-font": "^3.0.0",
+    "matchdep": "~1.0.1",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "roboto-fontface": "^0.10.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1",
+    "webpack-merge": "^4.2.1",
+    "webpack-shell-plugin": "^0.5.0",
+    "webpack-watch-files-plugin": "^1.0.3",
+    "wyrm": "^1.0.9"
   }
 }