Use webpack based string replacement

Doing the seddery in Makefile breaks `npm run build`, webpack watching,
and was generally brittle.

Revert the sed/make rules, and instead do the font replacement hacking
with `string-replace-loader`, which fits into webpack much more nicely.

There is still some potential simplification by not duplicating the
entire scss loader chain.

.travis.yml

@@ -4,4 +4,5 @@ language: node_js
 node_js:
   - "8"
 script:
-  - make
+  - npm install
+  - npm run build

Makefile

@@ -12,7 +12,6 @@ VM_IMAGE=$(CURDIR)/test/images/$(TEST_OS)
 NODE_MODULES_TEST=package-lock.json
 # one example file in dist/ from webpack to check if that already ran
 WEBPACK_TEST=dist/index.html
-SASS=$(CURDIR)/node_modules/.bin/sass
 
 all: $(WEBPACK_TEST)
 
@@ -66,7 +65,7 @@ dist/po.%.js: po/%.po $(NODE_MODULES_TEST)
 %.spec: %.spec.in
 	sed -e 's/%{VERSION}/$(VERSION)/g' $< > $@
 
-$(WEBPACK_TEST): $(NODE_MODULES_TEST) $(shell find src/ -type f) package.json webpack.config.js dist/patternfly-4-cockpit.css $(patsubst %,dist/po.%.js,$(LINGUAS))
+$(WEBPACK_TEST): $(NODE_MODULES_TEST) $(shell find src/ -type f) package.json webpack.config.js $(patsubst %,dist/po.%.js,$(LINGUAS))
 	NODE_ENV=$(NODE_ENV) npm run build
 
 watch:
@@ -76,11 +75,9 @@ clean:
 	rm -rf dist/
 	[ ! -e cockpit-$(PACKAGE_NAME).spec.in ] || rm -f cockpit-$(PACKAGE_NAME).spec
 
-# patternfly-4-cockpit.css needs to be shipped in the release tarball to avoid rebuilding the webpack, but we don't need to install it
 install: $(WEBPACK_TEST)
 	mkdir -p $(DESTDIR)/usr/share/cockpit/$(PACKAGE_NAME)
 	cp -r dist/* $(DESTDIR)/usr/share/cockpit/$(PACKAGE_NAME)
-	rm $(DESTDIR)/usr/share/cockpit/$(PACKAGE_NAME)/patternfly-4-cockpit.css
 	mkdir -p $(DESTDIR)/usr/share/metainfo/
 	cp org.cockpit-project.$(PACKAGE_NAME).metainfo.xml $(DESTDIR)/usr/share/metainfo/
 
@@ -159,10 +156,6 @@ test/common:
 	git checkout --force FETCH_HEAD -- test/common
 	git reset test/common
 
-dist/patternfly-4-cockpit.css: src/lib/patternfly-4-cockpit.scss $(NODE_MODULES_TEST)
-	$(SASS) $< $@ --source-map --source-map-urls absolute --style compressed --load-path node_modules && \
-	sed -i -f src/lib/patternfly.sed $@
-
 $(NODE_MODULES_TEST): package.json
 	# if it exists already, npm install won't update it; force that so that we always get up-to-date packages
 	rm -f package-lock.json

package.json

@@ -38,10 +38,10 @@
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "4.14.1",
     "po2json": "^1.0.0-alpha",
-    "sass": "^1.26.5",
     "sass-loader": "^7.0.3",
     "sizzle": "^2.3.3",
     "stdio": "^0.2.7",
+    "string-replace-loader": "^2.3.0",
     "webpack": "^4.17.1",
     "webpack-cli": "^3.1.0"
   },

src/index.js

@@ -17,7 +17,7 @@
  * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
  */
 
-import "../dist/patternfly-4-cockpit.css";
+import "./lib/patternfly-4-cockpit.scss";
 
 import "core-js/stable";
 

src/lib/patternfly-4-cockpit.scss

@@ -3,7 +3,7 @@
  */
 
 /* Set fake font and icon path variables - we are going to indentify these through
- * patternfly.sed and remove the relevant font-face declarations
+ * string replacement and remove the relevant font-face declarations
  */
 $pf-global--font-path: 'patternfly-fonts-fake-path';
 $pf-global--fonticon-path: 'patternfly-icons-fake-path';

src/lib/patternfly.sed

@@ -1,3 +0,0 @@
-# Keep the PF4 relevant rules in sync with https://github.com/cockpit-project/cockpit/blob/master/tools/patternfly.sed
-s/src:url[(]"patternfly-icons-fake-path\/pficon[^}]*/src:url('fonts\/patternfly.woff')format('woff');/
-s/@font-face[^}]*patternfly-fonts-fake-path[^}]*}//g

webpack.config.js

@@ -135,8 +135,45 @@ module.exports = {
                 use: babel_loader,
                 test: /\.(js|jsx)$/
             },
+            /* HACK: remove unwanted fonts from PatternFly's css */
+            {
+                test: /patternfly-4-cockpit.scss$/,
+                use: [
+                    extract.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            sourceMap: true,
+                            url: false
+                        }
+                    },
+                    {
+                        loader: 'string-replace-loader',
+                        options: {
+                            multiple: [
+                                {
+                                    search: /src:url\("patternfly-icons-fake-path\/pficon[^}]*/g,
+                                    replace: "src:url('fonts/patternfly.woff')format('woff');",
+                                },
+                                {
+                                    search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g,
+                                    replace: '',
+                                },
+                            ]
+                        },
+                    },
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sourceMap: true,
+                            outputStyle: 'compressed',
+                        },
+                    },
+                ]
+            },
             {
                 test: /\.s?css$/,
+                exclude: /patternfly-4-cockpit.scss/,
                 use: [
                     extract.loader,
                     {