Merge pull request #87 from GetStream/polyfilling

feat: Add CSS polyfills #85

package.json

@@ -9,8 +9,12 @@
   "private": false,
   "style": "dist/css/index.css",
   "scripts": {
-    "build": "rm -rf dist && mkdir -p dist && rm -rf dist-v2 && mkdir -p dist-v2 && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
-    "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && sass src-v2/styles/index.scss dist-v2/css/index.css --style compressed && sass src-v2/styles/index.layout.scss dist-v2/css/index.layout.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
+    "build": "yarn build-v1 && yarn build-v2",
+    "build-v1": "rm -rf dist && mkdir -p dist && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
+    "build-v2": "rm -rf dist-v2 && mkdir -p dist-v2 && yarn transform && yarn compile-to-css",
+    "transform": "postcss --dir dist-v2/scss --base src-v2/styles src-v2/styles",
+    "compile-to-css": "sass dist-v2/scss/index.scss dist-v2/css/index.css --style compressed && sass dist-v2/scss/index.layout.scss dist-v2/css/index.layout.css --style compressed",
+    "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
     "copy-assets": "echo '\u001b[34mℹ\u001b[0m Copying assets to distributed directory' && cp -R src/assets dist/assets && echo '\u001b[32m✓\u001b[0m Finished copying assets'",
     "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && cp -R src-v2/styles dist-v2/scss  && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
     "lint": "stylelint '**/*.scss' --max-warnings 0",
@@ -47,6 +51,12 @@
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
+    "flex-gap-polyfill": "^4.1.0",
+    "postcss": "^8.4.13",
+    "postcss-cli": "^9.1.0",
+    "postcss-dir-pseudo-class": "^6.0.4",
+    "postcss-logical": "^5.0.4",
+    "postcss-scss": "^4.0.4",
     "sass": "^1.39.2",
     "semantic-release": "^18.0.1",
     "stylelint": "^13.13.1",

postcss.config.js

@@ -0,0 +1,8 @@
+const postcssLogical = require('postcss-logical');
+const postcssDirPseudoClass = require('postcss-dir-pseudo-class');
+const postcssFlexGapPolyfill = require('flex-gap-polyfill');
+
+module.exports = {
+  syntax: 'postcss-scss',
+  plugins: [postcssLogical({ preserve: true }), postcssDirPseudoClass(), postcssFlexGapPolyfill()],
+};

src-v2/styles/_utils.scss

@@ -5,13 +5,16 @@
 }
 
 @mixin component-layer-overrides($component-name) {
-  background-color: var(--str-chat__#{$component-name}-background-color);
-  color: var(--str-chat__#{$component-name}-color);
-  font-family: var(--str-chat__#{$component-name}-font-family);
-  box-shadow: var(--str-chat__#{$component-name}-box-shadow);
-  border-radius: var(--str-chat__#{$component-name}-border-radius);
-  border-block-start: var(--str-chat__#{$component-name}-border-block-start);
-  border-block-end: var(--str-chat__#{$component-name}-border-block-end);
-  border-inline-start: var(--str-chat__#{$component-name}-border-inline-start);
-  border-inline-end: var(--str-chat__#{$component-name}-border-inline-end);
+  // & selector is required for the postcss-logical plugin to properly transform the logical properties
+  & {
+    background-color: var(--str-chat__#{$component-name}-background-color);
+    color: var(--str-chat__#{$component-name}-color);
+    font-family: var(--str-chat__#{$component-name}-font-family);
+    box-shadow: var(--str-chat__#{$component-name}-box-shadow);
+    border-radius: var(--str-chat__#{$component-name}-border-radius);
+    border-block-start: var(--str-chat__#{$component-name}-border-block-start);
+    border-block-end: var(--str-chat__#{$component-name}-border-block-end);
+    border-inline-start: var(--str-chat__#{$component-name}-border-inline-start);
+    border-inline-end: var(--str-chat__#{$component-name}-border-inline-end);
+  }
 }