Add ability to import css files

closes TryGhost/Team#2256
- Now we can write css in separate files and then import them as string.

ghost/portal/package.json

@@ -55,7 +55,10 @@
     ],
     "plugins": [
       "ghost"
-    ]
+    ],
+    "rules": {
+      "import/no-webpack-loader-syntax": "off"
+    }
   },
   "browserslist": {
     "production": [
@@ -74,14 +77,19 @@
       "cobertura",
       "text-summary",
       "html"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^!!raw-loader!.*": "jest-raw-loader"
+    }
   },
   "devDependencies": {
     "chalk": "4.1.2",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
+    "jest-raw-loader": "1.0.1",
     "minimist": "1.2.7",
     "ora": "5.4.1",
+    "raw-loader": "4.0.2",
     "rewire": "6.0.0",
     "serve-handler": "6.1.5",
     "source-map-explorer": "2.5.3",

ghost/portal/src/components/Frame.styles.js

@@ -7,7 +7,7 @@ import {GlobalStyles} from './Global.styles';
 import {ActionButtonStyles} from './common/ActionButton';
 import {BackButtonStyles} from './common/BackButton';
 import {SwitchStyles} from './common/Switch';
-import {AccountHomePageStyles} from './pages/AccountHomePage';
+import AccountHomePageStyles from '!!raw-loader!./pages/AccountHomePage/AccountHomePage.css';
 import {AccountPlanPageStyles} from './pages/AccountPlanPage';
 import {InputFieldStyles} from './common/InputField';
 import {SignupPageStyles} from './pages/SignupPage';
@@ -860,14 +860,14 @@ const MobileStyles = `
         background: var(--grey13);
     }
 
-    .gh-portal-popup-wrapper.full-size .gh-portal-closeicon, 
+    .gh-portal-popup-wrapper.full-size .gh-portal-closeicon,
     .gh-portal-popup-container.full-size .gh-portal-closeicon {
         width: 16px;
         height: 16px;
     }
 
     /* Small width preview in Admin */
-    .gh-portal-popup-wrapper.preview:not(.full-size) footer.gh-portal-signup-footer, 
+    .gh-portal-popup-wrapper.preview:not(.full-size) footer.gh-portal-signup-footer,
     .gh-portal-popup-wrapper.preview:not(.full-size) footer.gh-portal-signin-footer {
         padding-bottom: 32px;
     }
@@ -891,7 +891,7 @@ const MobileStyles = `
         max-height: 660px;
         margin-bottom: 0;
     }
-    
+
     .preview .gh-portal-invite-only-notification + .gh-portal-signup-message {
         margin-bottom: 16px;
     }

ghost/portal/src/components/pages/AccountHomePage/AccountHomePage.css

@@ -0,0 +1,116 @@
+.gh-portal-account-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 0 32px;
+}
+
+.gh-portal-account-header .gh-portal-avatar {
+    margin: 6px 0 8px !important;
+}
+
+.gh-portal-account-data {
+    margin-bottom: 40px;
+}
+
+footer.gh-portal-account-footer {
+    display: flex;
+}
+
+.gh-portal-account-footer.paid {
+    margin-top: 12px;
+}
+
+.gh-portal-account-footermenu {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.gh-portal-account-footerright {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.gh-portal-account-footermenu li {
+    margin-right: 16px;
+}
+
+.gh-portal-account-footermenu li:last-of-type {
+    margin-right: 0;
+}
+
+.gh-portal-freeaccount-newsletter {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 24px;
+}
+
+.gh-portal-freeaccount-newsletter .label {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.gh-portal-free-ctatext {
+    margin-top: -12px;
+}
+
+.gh-portal-cancelcontinue-container {
+    margin: 24px 0 32px;
+}
+
+.gh-portal-billing-button-loader {
+    width: 32px;
+    height: 32px;
+    margin-right: -3px;
+    opacity: 0.6;
+}
+
+.gh-portal-product-icon {
+    width: 52px;
+    margin-right: 12px;
+    border-radius: 2px;
+}
+
+.gh-portal-account-discountcontainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.gh-portal-account-old-price {
+    text-decoration: line-through;
+    color: var(--grey9) !important;
+}
+
+.gh-portal-account-tagicon {
+    width: 16px;
+    height: 16px;
+    color: var(--brandcolor);
+    margin-right: 5px;
+    z-index: 999;
+}
+
+@media (max-width: 390px) {
+    .gh-portal-account-footer {
+        padding: 0 !important;
+    }
+}
+
+@media (max-width: 340px) {
+    .gh-portal-account-footer {
+        padding: 0 !important;
+        flex-wrap: wrap;
+        gap: 12px;
+    }
+
+    .gh-portal-account-footer .gh-portal-account-footerright {
+        justify-content: flex-start;
+    }
+}

yarn.lock

@@ -16765,6 +16765,11 @@ jest-pnp-resolver@^1.2.2:
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
   integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
 
+jest-raw-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz#ce9f56d54650f157c4a7d16d224ba5d613bcd626"
+  integrity sha512-g9oaAjeC4/rIJk1Wd3RxVbOfMizowM7LSjEJqa4R9qDX0OjQNABXOhH+GaznUp+DjTGVPi2vPPbQXyX87DOnYg==
+
 jest-regex-util@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
@@ -22201,6 +22206,14 @@ raw-body@~1.1.0:
     bytes "1"
     string_decoder "0.10"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"