Move from css to scss with webpack for stylesheets

OPSnet · Oct 1, 2020 · c788769 · c788769
1 parent 07c95b7
commit c788769
Show file tree

Hide file tree

Showing 49 changed files with 9,288 additions and 11,149 deletions.
diff --git a/.docker/web/entrypoint.sh b/.docker/web/entrypoint.sh
@@ -7,9 +7,9 @@ run_service()
 
 # We'll need these anyway so why not kill some time while waiting on MySQL to be ready
 if [ -n "$ENV" ] && [ "$ENV" == "prod" ]; then
-    su -c 'composer --version && composer install --no-dev --optimize-autoloader --no-suggest; yarn --prod' gazelle
+    su -c 'composer --version && composer install --no-dev --optimize-autoloader --no-suggest; yarn --prod; yarn prod' gazelle
 else
-    su -c 'composer --version && composer install; yarn' gazelle
+    su -c 'composer --version && composer install; yarn; yarn dev; yarn build:previews' gazelle
 fi
 
 # Wait for MySQL...

diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,13 @@ logs/
 !logs/README.txt
 
 public/static/local/
+mix-manifest.json
+
+public/static/styles/**/*.css
+!public/static/styles/opendyslexic/style.css
+!public/static/styles/tooltipster/custom.css
+!public/static/styles/tooltipster/reset.css
+*.map
 
 public/static/similar/
 !public/static/similar/.gitkeep

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,25 @@
+{
+    "extends": "stylelint-config-standard",
+    "plugins": [
+        "stylelint-scss"
+    ],
+    "rules": {
+        "at-rule-no-unknown": null,
+        "color-hex-case": null,
+        "color-hex-length": null,
+        "comment-empty-line-before": null,
+        "declaration-block-no-duplicate-properties": [true, {
+            "ignore": ["consecutive-duplicates-with-different-values"]
+        }],
+        "function-parentheses-newline-inside": null,
+        "function-whitespace-after": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "no-unknown-animations": true,
+        "property-no-unknown": null,
+        "rule-empty-line-before": null,
+        "shorthand-property-no-redundant-values": null,
+        "unit-whitelist": ["deg", "em", "ex", "ms", "rem", "%", "s", "px", "vw", "vh", "rad", "dppx", "dpi", "dpcm", "in", "pt"],
+        "scss/at-rule-no-unknown": true
+    }
+}
diff --git a/Dockerfile b/Dockerfile
@@ -2,12 +2,13 @@ FROM debian:buster-slim
 
 WORKDIR /var/www
 
-# Misc software layer
-RUN useradd -ms /bin/bash gazelle \
-    && apt-get update \
+# Software package layer
+# Nodesource setup comes after yarnpkg because it runs `apt-get update`
+RUN apt-get update \
     && apt-get install -y --no-install-recommends \
         build-essential \
         ca-certificates \
+        composer \
         cron \
         curl \
         git \
@@ -22,22 +23,6 @@ RUN useradd -ms /bin/bash gazelle \
         mariadb-client \
         netcat-openbsd \
         nginx \
-        python3 \
-        python3-pip \
-        python3-setuptools \
-        python3-wheel \
-        software-properties-common \
-        unzip \
-        wget \
-        zlib1g-dev
-
-# Python tools layer
-RUN pip3 install chardet eac-logchecker xld-logchecker
-
-# PHP layer
-RUN apt-get install -y --no-install-recommends \
-        php \
-        php-bcmath \
         php7.3-cli \
         php7.3-curl \
         php7.3-fpm \
@@ -47,36 +32,67 @@ RUN apt-get install -y --no-install-recommends \
         php7.3-xml \
         php7.3-zip \
         php-apcu \
+        php-bcmath \
         php-memcached \
         php-xdebug \
-        composer
-
-# NodeJS layer
-# Nodesource setup comes after yarnpkg because it runs `apt-get update`
-RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
+        python3 \
+        python3-pip \
+        python3-setuptools \
+        python3-wheel \
+        software-properties-common \
+        unzip \
+        wget \
+        zlib1g-dev \
+    && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
     && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
     && curl -sL https://deb.nodesource.com/setup_12.x | bash - \
     && apt-get install -y --no-install-recommends \
         nodejs \
         yarn
 
+# Python tools layer
+RUN pip3 install chardet eac-logchecker xld-logchecker
+
 # Puppeteer layer
-# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
-# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
-# installs, work.
-RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
-    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
-    && apt-get update \
-    && apt-get install -y --no-install-recommends \
-        google-chrome-unstable \
-        fonts-ipafont-gothic \
-        fonts-wqy-zenhei \
-        fonts-thai-tlwg \
-        fonts-kacst \
-        fonts-freefont-ttf \
-    && rm -rf /var/lib/apt/lists/* \
-    && groupadd -r pptruser \
-    && usermod -aG pptruser,audio,video gazelle
+# This installs the necessary packages to run the bundled version of chromium for puppeteer
+RUN apt-get install -y --no-install-recommends \
+        gconf-service \
+        libasound2 \
+        libatk1.0-0 \
+        libc6 \
+        libcairo2 \
+        libcups2 \
+        libdbus-1-3 \
+        libexpat1 \
+        libfontconfig1 \
+        libgcc1 \
+        libgconf-2-4 \
+        libgdk-pixbuf2.0-0 \
+        libglib2.0-0 \
+        libgtk-3-0 \
+        libnspr4 \
+        libpango-1.0-0 \
+        libpangocairo-1.0-0 \
+        libstdc++6 \
+        libx11-6 \
+        libx11-xcb1 \
+        libxcb1 \
+        libxcomposite1 \
+        libxcursor1 \
+        libxdamage1 \
+        libxext6 \
+        libxfixes3 \
+        libxi6 \
+        libxrandr2 \
+        libxrender1 \
+        libxss1 \
+        libxtst6 \
+        fonts-liberation \
+        libappindicator1 \
+        libnss3 \
+        lsb-release \
+        xdg-utils \
+    && rm -rf /var/lib/apt/lists/*
 
 # If running Docker >= 1.13.0 use docker run's --init arg to reap zombie processes, otherwise
 # uncomment the following lines to have `dumb-init` as PID 1
@@ -92,7 +108,8 @@ RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key
 COPY . /var/www
 
 # Permissions and configuration layer
-RUN chown -R gazelle:gazelle /var/www \
+RUN useradd -ms /bin/bash gazelle \
+    && chown -R gazelle:gazelle /var/www \
     && cp /var/www/.docker/web/php.ini /etc/php/7.3/cli/php.ini \
     && cp /var/www/.docker/web/php.ini /etc/php/7.3/fpm/php.ini \
     && cp /var/www/.docker/web/xdebug.ini /etc/php/7.3/mods-available/xdebug.ini \

diff --git a/design/privateheader.php b/design/privateheader.php
@@ -62,18 +62,18 @@
 }
 ?>
     <link rel="stylesheet" type="text/css"
-            href="<?=STATIC_SERVER?>styles/global.css?v=<?=filemtime(SERVER_ROOT.'/public/static/styles/global.css')?>" />
+            href="<?=STATIC_SERVER?>styles/global.css?v=<?=filemtime(SERVER_ROOT.'/sass/global.scss')?>" />
 <?php
 if ($UseTooltipster) { ?>
-    <link rel="stylesheet" href="<?=STATIC_SERVER?>styles/tooltipster/style.css?v=<?=filemtime(SERVER_ROOT.'/public/static/styles/tooltipster/style.css')?>" type="text/css" media="screen" />
+    <link rel="stylesheet" href="<?=STATIC_SERVER?>styles/tooltipster/style.css?v=<?=filemtime(SERVER_ROOT.'/sass/tooltipster/style.scss')?>" type="text/css" media="screen" />
 <?php
 } ?>
     <meta name="viewport" content="width=device-width" />
 <?php
 if (empty(G::$LoggedUser['StyleURL'])) {
 ?>
     <link rel="stylesheet" type="text/css" title="<?=G::$LoggedUser['StyleName']?>" media="screen"
-            href="<?=STATIC_SERVER?>styles/<?=G::$LoggedUser['StyleName']?>/style.css?v=<?=filemtime(SERVER_ROOT.'/public/static/styles/'.G::$LoggedUser['StyleName'].'/style.css')?>" />
+            href="<?=STATIC_SERVER?>styles/<?=G::$LoggedUser['StyleName']?>/style.css?v=<?=filemtime(SERVER_ROOT.'/sass/'.G::$LoggedUser['StyleName'].'/style.scss')?>" />
 <?php
 } else {
         $StyleURLInfo = parse_url(G::$LoggedUser['StyleURL']);

diff --git a/package.json b/package.json
@@ -3,19 +3,40 @@
   "version": "0.0.0",
   "description": "",
   "scripts": {
+    "dev": "yarn build",
+    "prod": "cross-env NODE_ENV=production yarn build",
+    "build": "yarn build:scss && yarn build:previews",
+    "build:scss": "webpack --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "build:previews": "node scripts/render_styles_preview.js",
+    "start": "yarn build:scss -- --watch",
+    "lint:css": "stylelint \"sass/**/*.scss\" || exit 0",
+    "lint:css-checkstyle": "stylelint \"sass/**/*.scss\" --custom-formatter ./node_modules/stylelint-checkstyle-formatter/index.js || exit 0",
     "lint:php:internal": "find . -path './vendor' -prune -o -path ./node_modules -prune -o -type f -name '*.php' -print0 | xargs -0 -n1 -P4 php -l -n | (! grep -v \"No syntax errors detected\" )",
     "lint:php:phpcs": "vendor/bin/phpcs -p",
-    "lint:php": "npm run lint:php:internal && npm run lint:php:phpcs",
+    "lint:php": "yarn lint:php:internal && yarn lint:php:phpcs",
     "lint:php:fix": "./.bin/phpcbf",
-    "pre-commit": "npm run lint:php:fix"
+    "pre-commit": "yarn lint:php:fix"
   },
   "license": "Unlicense",
   "devDependencies": {
+    "browser-sync": "^2.26.10",
+    "browser-sync-webpack-plugin": "^2.2.2",
     "husky": "^4.2.5",
-    "lint-staged": "^9.5.0"
+    "lint-staged": "^9.5.0",
+    "stylelint": "^13.3.2",
+    "stylelint-checkstyle-formatter": "^0.1.2",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-scss": "^3.16.1"
   },
   "dependencies": {
-    "puppeteer": "^2.1.1"
+    "cross-env": "^7.0.2",
+    "laravel-mix": "^5.0.4",
+    "puppeteer": "^2.1.1",
+    "sass": "^1.26.10",
+    "sass-loader": "^9.0.2",
+    "sharp": "^0.25.4",
+    "webpack": "^4"
   },
   "husky": {
     "hooks": {
@@ -28,5 +49,13 @@
       "bash .bin/phpcbf",
       "vendor/bin/phpcs"
     ]
-  }
+  },
+  "browserslist": [
+    "ie 11",
+    "safari >= 10",
+    "ios >= 10",
+    "android >= 6",
+    "Firefox ESR",
+    "last 2 years and > 0.1%"
+  ]
 }
diff --git a/public/static/styles/apollostage_coffee/create_me.sed b/public/static/styles/apollostage_coffee/create_me.sed