feat(tools/css-dev-tools): remove postcss-base64 & base64 transformat…

…ion (#1258)
adeo · Jun 14, 2023 · d7aff62 · d7aff62
1 parent 4af744d
commit d7aff62
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 107 deletions.
diff --git a/packages/css-dev-tools/postcssPluginConfig.js b/packages/css-dev-tools/postcssPluginConfig.js
@@ -3,7 +3,6 @@ const scssSyntax = require('postcss-scss')
 const autoprefixer = require('autoprefixer')
 const postcssSass = require('@csstools/postcss-sass')
 const stylelint = require('stylelint')
-const base64 = require('postcss-base64')
 const reporter = require('postcss-reporter')
 const cssnano = require('cssnano')
 const purgecss = require('@fullhuman/postcss-purgecss')
@@ -35,10 +34,6 @@ const plugins = [
   reporter({ clearReportedMessages: true }),
   cssprepend(`$mozaic-env: ${mozaicEnvScssVar};`),
   postcssSass(sassConfig),
-  base64({
-    pattern: /<svg.*<\/svg>/i,
-    prepend: 'data:image/svg+xml;base64,',
-  }),
   mqpackerondemand({
     sort: true,
   }),
@@ -58,10 +53,6 @@ if (CM.getKey('autoprefixer.disabled')) {
 const productionPlugins = [
   cssprepend(`$mozaic-env: ${mozaicEnvScssVar};`),
   postcssSass(sassConfig),
-  base64({
-    pattern: /<svg.*<\/svg>/i,
-    prepend: 'data:image/svg+xml;base64,',
-  }),
   mqpackerondemand({
     sort: true,
   }),

diff --git a/packages/styles/components/_c.checkbox.scss b/packages/styles/components/_c.checkbox.scss
@@ -64,11 +64,7 @@
     }
 
     &:checked {
-      background-image: url(
-        inline-icons(
-          "checkmark-16",
-          $color-input-checked-icon
-        ));
+      background-image: url("#{inline-icons('checkmark-16', $color-input-checked-icon)}");
       background-position: center center;
 
       &::-ms-check {
@@ -86,11 +82,7 @@
     }
 
     &:indeterminate {
-      background-image: url(
-        inline-icons(
-          "control-less-16",
-          $color-input-checked-icon
-        ));
+      background-image: url("#{inline-icons('control-less-16', $color-input-checked-icon)}");
     }
 
     &:disabled {
@@ -104,19 +96,11 @@
       }
 
       &:checked {
-        background-image: url(
-          inline-icons(
-            "checkmark-16",
-            $color-input-disabled-icon
-          ));
+        background-image: url("#{inline-icons('checkmark-16', $color-input-disabled-icon)}");
       }
 
       &:indeterminate {
-        background-image: url(
-          inline-icons(
-            "control-less-16",
-            $color-input-disabled-icon
-          ));
+        background-image: url("#{inline-icons('control-less-16', $color-input-disabled-icon)}");
       }
 
       & + #{$parent}__label {
@@ -132,7 +116,7 @@
       }
 
       &:hover {
-        @include add-demo-state-class {
+        @include add-demo-state-class() {
           border-color: $color-input-invalid-hover-border;
 
           &::-ms-check {

diff --git a/packages/styles/components/_c.modal.scss b/packages/styles/components/_c.modal.scss
@@ -120,8 +120,9 @@
     @include set-focus-floating-base();
 
     align-self: flex-start;
-    background: transparent
-      url(inline-icons("control-cross-32", $color-dialog-close)) no-repeat;
+    background-color: transparent;
+    background-image: url("#{inline-icons('control-cross-32', $color-dialog-close)}");
+    background-repeat: no-repeat;
     background-size: contain;
     cursor: pointer;
     height: $mu200;

diff --git a/packages/styles/components/_c.radio.scss b/packages/styles/components/_c.radio.scss
@@ -122,7 +122,7 @@
       }
 
       &:hover {
-        @include add-demo-state-class {
+        @include add-demo-state-class() {
           border-color: $color-input-invalid-hover-border;
 
           &::-ms-check {

diff --git a/packages/styles/components/_c.stars-input.scss b/packages/styles/components/_c.stars-input.scss
@@ -107,36 +107,20 @@
             &:checked,
             &:focus {
               & ~ #{$parent}__label {
-                background-image: url(
-                  inline-icons(
-                    "#{$icon-empty}",
-                    $color-star-full
-                  ));
+                background-image: url("#{inline-icons($icon-empty, $color-star-full)}");
               }
               & + #{$parent}__label {
-                background-image: url(
-                  inline-icons(
-                    "#{$icon-full}",
-                    $color-star-full
-                  ));
+                background-image: url("#{inline-icons($icon-full, $color-star-full)}");
               }
             }
 
             &:hover {
               & ~ #{$parent}__label {
-                background-image: url(
-                  inline-icons(
-                    "#{$icon-empty}",
-                    $color-star-full
-                  ));
+                background-image: url("#{inline-icons($icon-empty, $color-star-full)}");
               }
 
               & + #{$parent}__label {
-                background-image: url(
-                  inline-icons(
-                    "#{$icon-full}",
-                    $color-star-full
-                  ));
+                background-image: url("#{inline-icons($icon-full, $color-star-full)}");
               }
             }
           }

diff --git a/packages/styles/settings-tools/_s.inline-icons.scss b/packages/styles/settings-tools/_s.inline-icons.scss
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
@@ -19,6 +19,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Bug Fixes
 
+
 * **pattern/colors:** update the color of the notification icons ([#1104](https://github.com/adeo/mozaic-design-system/issues/1104)) ([4bfba3f](https://github.com/adeo/mozaic-design-system/commit/4bfba3fce58f84ea8179d4223252662b28e3812d))
 
 

diff --git a/src/docs/Components/Flags/previews/default.preview.scss b/src/docs/Components/Flags/previews/default.preview.scss
@@ -1,13 +1,12 @@
 @import "tokens";
 @import "settings-tools/all-settings";
 @include import-font-families();
+@import "components/c.flag";
 
 html {
   @include set-font-face();
 }
 
-@import "components/c.flag";
-
 .example {
   margin: $mu100 auto;
   padding: 0 $mu150;

diff --git a/src/docs/Components/OptionGroup/OptionCard/previews/withButton.preview.scss b/src/docs/Components/OptionGroup/OptionCard/previews/withButton.preview.scss
@@ -1,16 +1,15 @@
 @import "tokens";
 @import "settings-tools/all-settings";
 @include import-font-families();
-
-html {
-  @include set-font-face();
-}
-
 @import "components/c.checkbox";
 @import "components/c.button";
 @import "typography/t.bodys";
 @import "components/c.option-card";
 
+html {
+  @include set-font-face();
+}
+
 .example {
   @include set-font-family();
 

diff --git a/src/docs/Components/Tabs/previews/tabs-dropdown.preview.scss b/src/docs/Components/Tabs/previews/tabs-dropdown.preview.scss
@@ -1,11 +1,12 @@
 @import "tokens";
 @import "settings-tools/all-settings";
 @include import-font-families();
+@import "components/c.tabs";
+@import "components/c.select";
+
 html {
   @include set-font-face();
 }
-@import "components/c.tabs";
-@import "components/c.select";
 
 body {
   background-color: #e5e5e5;

diff --git a/src/docs/Components/Tabs/previews/tabs-with-icons.preview.scss b/src/docs/Components/Tabs/previews/tabs-with-icons.preview.scss
@@ -1,5 +1,9 @@
+@import "tokens";
 @import "settings-tools/all-settings";
 @include import-font-families();
+html {
+  @include set-font-face();
+}
 @import "components/c.tabs";
 
 body {

diff --git a/src/docs/GetStarted/Developers/Installation/postcss.mdx b/src/docs/GetStarted/Developers/Installation/postcss.mdx
@@ -23,7 +23,6 @@ The Mozaic postCSS plugin list contains:
 - **nodeSass:** compile SCSS into css
 - **autoprefixer:** automatically add browser prefixes
 - **mqpacker on demand:** a custom built media queries regrouper based on comments
-- **postcss-base64:** url encode svg in css
 - **cssnano:** optimize and minify the CSS code
 
 ### A) Using a configuration file: