JI-5452 remove compass and use webpack to build css (#228)

Co-authored-by: William Almnes <[email protected]>

Author: wwalmnes

.gitignore

@@ -2,4 +2,5 @@
 .sass-cache
 /styles/nbproject/private/
 vendor
-.idea
+.idea
+node_modules/

package-lock.json

@@ -0,0 +1,21 @@
+{
+    "name": "h5p-editor-php-library",
+    "version": "1.0.0",
+    "description": "A general library that is supposed to be used in most PHP implementations of H5P.",
+    "scripts": {
+      "build": "webpack && rm styles/css/index.js",
+      "watch": "webpack --watch"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "SEE LICENSE IN README.md",
+    "devDependencies": {
+      "css-loader": "^6.10.0",
+      "mini-css-extract-plugin": "^2.8.1",
+      "sass": "^1.72.0",
+      "sass-loader": "^14.1.1",
+      "style-loader": "^3.3.4",
+      "webpack": "^5.91.0",
+      "webpack-cli": "^5.1.4"
+    }
+  }

package.json

@@ -179,9 +179,9 @@
   }
 
   .order-up, .order-down {
-    width: $form-item-height-normal / 2;
-    height: $form-item-height-normal / 2;
-    line-height: $form-item-height-normal / 2;
+    width: calc($form-item-height-normal / 2);
+    height: calc($form-item-height-normal / 2);
+    line-height: calc($form-item-height-normal / 2);
 
     &:hover {
       background: $form-item-importance-medium-background-hover;
@@ -227,9 +227,9 @@
     }
 
     .order-up, .order-down {
-      width: $form-item-height-large / 2;
-      height: $form-item-height-large / 2;
-      line-height: $form-item-height-large / 2;
+      width: calc($form-item-height-large / 2);
+      height: calc($form-item-height-large / 2);
+      line-height: calc($form-item-height-large / 2);
 
       &:hover {
         background: $form-item-importance-high-background-hover;
@@ -271,11 +271,11 @@
     }
 
     .order-up, .order-down {
-      width: $form-item-height-normal / 2;
-      height: $form-item-height-normal / 2;
+      width: calc($form-item-height-normal / 2);
+      height: calc($form-item-height-normal / 2);
       background: $form-item-importance-low-border-color;
       font-size: $font-size-normal;
-      line-height: $form-item-height-normal / 2;
+      line-height: calc($form-item-height-normal / 2);
 
       &:hover {
         background: $form-item-importance-low-background-hover;
@@ -302,7 +302,7 @@
   &:before {
     content: "\e566";
     font-family: $icon-font-family;
-    margin-right: $min-padding/2;
+    margin-right: calc($min-padding / 2);
   }
 
   &:focus:before {

styles/config.rb

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'h5p-fullscreen-bar';
-  src:  url('fonts/h5p-fullscreen-bar.eot?p850ul');
-  src:  url('fonts/h5p-fullscreen-bar.eot?p850ul#iefix') format('embedded-opentype'),
-    url('fonts/h5p-fullscreen-bar.ttf?p850ul') format('truetype'),
-    url('fonts/h5p-fullscreen-bar.woff?p850ul') format('woff'),
-    url('fonts/h5p-fullscreen-bar.svg?p850ul#h5p') format('svg');
+  src:  url('../css/fonts/h5p-fullscreen-bar.eot?p850ul');
+  src:  url('../css/fonts/h5p-fullscreen-bar.eot?p850ul#iefix') format('embedded-opentype'),
+    url('../css/fonts/h5p-fullscreen-bar.ttf?p850ul') format('truetype'),
+    url('../css/fonts/h5p-fullscreen-bar.woff?p850ul') format('woff'),
+    url('../css/fonts/h5p-fullscreen-bar.svg?p850ul#h5p') format('svg');
   font-weight: normal;
   font-style: normal;
 }

styles/css/application.css

@@ -22,7 +22,7 @@ $h5p-tutorial-icon-diameter: 2rem;
   margin-bottom: 0.5em;
   margin-left: 0.25em;
   height: $h5p-tutorial-icon-diameter;
-  border-radius: $h5p-tutorial-icon-diameter / 2;
+  border-radius: calc($h5p-tutorial-icon-diameter / 2);
 
   &:focus {
     @include h5p-tutorial-focus-shadow;

styles/scss/_form-groups.scss

@@ -1,10 +1,3 @@
-@import "compass/css3/border-radius";
-@import "compass/css3/box-shadow";
-@import "compass/css3/opacity";
-@import "compass/css3/text-shadow";
-@import "compass/css3/transition";
-@import "compass/css3/transform";
-
 @import "variables";
 @import "mixins";
 @import "utils";
@@ -85,7 +78,7 @@ a {
   textarea,
   .h5peditor-text,
   .ckeditor {
-    @include box-shadow($form-input-box-shadow);
+    box-shadow: $form-input-box-shadow;
     box-sizing: border-box;
     margin: 0;
     padding: $min-padding;
@@ -156,7 +149,7 @@ a {
     border: 1px solid $form-border-color;
     background: $form-input-color inline-image('down.png') no-repeat;
     background-position: calc(100% - 10px);
-    @include box-shadow($form-input-box-shadow);
+    box-shadow: $form-input-box-shadow;
     -moz-appearance: none;
     -webkit-appearance: none;
 
@@ -266,13 +259,13 @@ a {
     border: 1px solid #cdcdcd;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    @include box-shadow(0 0 8px #666);
-    @include transition(visibility 0s 0.2s, opacity 0.2s);
+    box-shadow: 0 0 8px #666;
+    transition: visibility 0s 0.2s, opacity 0.2s;
 
     &.h5p-open {
       visibility: visible;
       opacity: 1;
-      @include transition(visibility 0s 0s, opacity 0.2s);
+      transition: visibility 0s 0s, opacity 0.2s;
     }
 
     .h5p-add-dialog-table {
@@ -505,7 +498,7 @@ a {
     display: block;
     float: left;
     position: relative;
-    @include box-shadow(0 0 10px 0 #666666);
+    box-shadow: 0 0 10px 0 #666666;
     border: 1px solid #fff;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -522,18 +515,18 @@ a {
       overflow: hidden;
       text-indent: -0.4em;
       padding: 0.065em;
-      @include opacity(0.6);
+      opacity: 0.6;
     }
     .h5p-remove:hover,
     .h5p-remove:focus {
-      @include opacity(1);
+      opacity: 1;
     }
     .h5p-remove:after {
       font-family: $icon-font-family;
       font-size: 2em;
       color: #fff;
       content: "\e890";
-      @include opacity(0.6);
+      opacity: 0.6;
     }
   }
   .h5p-type {
@@ -564,7 +557,7 @@ a {
     .thumbnail {
       display: inline-block;
       margin: 10px 10px 10px 0;
-      @include box-shadow(0 0 10px 0 #666666);
+      box-shadow: 0 0 10px 0 #666666;
       border: 1px solid #fff;
       cursor: pointer;
       max-width: 100%;
@@ -573,7 +566,7 @@ a {
       background: $form-input-color inline-image('transparent-background.png') repeat;
     }
     .thumbnail:focus {
-      @include box-shadow(0 0 10px 0 #222);
+      box-shadow: 0 0 10px 0 #222;
     }
     .add {
       display: inline-block;
@@ -613,23 +606,23 @@ a {
       cursor: pointer;
     }
     .remove:focus:before {
-      @include opacity(1);
+      opacity: 1;
     }
     .remove:before {
       font-family: $icon-font-family;
       font-size: 1.4em;
       color: #fff;
       content: "\e890";
-      @include opacity(0.6);
-      @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px);
+      opacity: 0.6;
+      text-shadow: rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px;
     }
     .remove:hover {
       text-decoration: none;
     }
     .remove:hover:before {
       color: #fff;
-      @include opacity(1);
-      @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px);
+      opacity: 1;
+      text-shadow: rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px;
     }
     img {
       max-width: 100%;
@@ -707,7 +700,7 @@ a {
   .moving {
     position: absolute;
     z-index: 1;
-    @include opacity(0.8);
+    opacity: 0.8;
     -webkit-transform: translateZ(0);
 
     .h5peditor-label {
@@ -728,7 +721,7 @@ a {
   }
 
   .h5p-copyright-button {
-    @include border-radius(0.25em);
+    border-radius: 0.25em;
     height: 30px;
     background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
     border: 1px solid $form-border-color;
@@ -777,15 +770,15 @@ a {
     height: 0;
     overflow: hidden;
     background: #fff;
-    @include box-shadow(0 0 8px #666);
-    @include transition(visibility 0s 0.2s, height 0s 0.2s, opacity 0.2s, margin-top 0.2s);
+    box-shadow: 0 0 8px #666;
+    transition: visibility 0s 0.2s, height 0s 0.2s, opacity 0.2s, margin-top 0.2s;
 
     &.h5p-open {
       margin-top: 3.5em;
       visibility: visible;
       opacity: 1;
       height: auto;
-      @include transition(visibility 0s 0s, height 0s 0s, opacity 0.2s, margin-top 0.2s);
+      transition: visibility 0s 0s, height 0s 0s, opacity 0.2s, margin-top 0.2s;
     }
 
     & > .field {
@@ -816,11 +809,11 @@ a {
         font-family: $icon-font-family;
         content: "\e894";
         line-height: 1em;
-        @include transition(scale 0.2s);
+        transition: scale 0.2s;
       }
 
       &:hover:before {
-        @include scale(1.1, 1.1);
+        scale: 1.1, 1.1;
       }
     }
   }
@@ -839,7 +832,7 @@ a {
 /* Placed this outside of .h5peditor context above. Don't want it to be more
    specific than neccessary (because of overriding) */
 .h5peditor-button-textual {
-  @include border-radius(0.25em);
+  border-radius: 0.25em;
   @include button-background(
     $form-item-importance-medium-background,
     $form-item-importance-medium-background-highlight);

styles/scss/_fullscreen-bar.scss

@@ -0,0 +1,31 @@
+const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+
+module.exports = {
+  output: {
+    path: path.resolve(__dirname, "styles/css"),
+  },
+  entry: {
+    index: [path.join(path.resolve(__dirname, 'styles'), "scss", "application.scss")]
+  } ,
+  mode: "production",
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)$/,
+        type: 'asset/resource',
+        generator: {
+            filename: './fonts/[name][ext]',
+        },
+      },
+    ]
+  },
+  plugins: [new MiniCssExtractPlugin({
+    filename: "application.css"
+  })]
+};