feat(core): remove Less and SCSS variables in favor of CSS variables

nolimits4web · Aug 3, 2021 · 91e8ea1 · 91e8ea1
1 parent 7969c69
commit 91e8ea1
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 116 deletions.
diff --git a/scripts/build-config.js b/scripts/build-config.js
@@ -22,9 +22,4 @@ module.exports = {
     'free-mode',
     'slides-per-column',
   ],
-  themeColor: '#007aff',
-  colors: {
-    white: '#ffffff',
-    black: '#000000',
-  },
 };
diff --git a/scripts/build-styles.js b/scripts/build-styles.js
@@ -11,32 +11,20 @@ const minifyCSS = require('./utils/clean-css');
 const banner = require('./banner')();
 const config = require('./build-config');
 
-const base64Encode = async (file) => {
-  // read binary data
-  const bitmap = await fs.readFile(file);
-  // convert binary data to base64 encoded string
-  return Buffer.from(bitmap).toString('base64');
-};
-
-const readSwiperFile = async (filePath, iconsFontBase64, colors) => {
+const readSwiperFile = async (filePath) => {
   const fileContent = await fs.readFile(filePath, 'utf-8');
   if (filePath.includes('swiper.less')) {
     const coreContent = fs.readFileSync(
       path.resolve(__dirname, '../src/components/core/core.less'),
       'utf-8',
     );
     return fileContent
-      .replace('swiperIconsFont()', `'${iconsFontBase64}'`)
-      .replace('$themeColor', config.themeColor)
-      .replace('$colors', colors.join(', '))
       .replace('//IMPORT_COMPONENTS', '')
       .replace(`@import url('./less/mixins.less');`, '')
       .replace(`@import url('./components/core/core.less');`, coreContent);
   }
   if (filePath.includes('swiper-vars.less')) {
-    return fileContent
-      .replace('$themeColor', config.themeColor)
-      .replace('$colors', colors.join(', '));
+    return fileContent;
   }
   if (filePath.includes('navigation.less') || filePath.includes('pagination.less')) {
     return ["@import url('../../swiper-vars.less');", fileContent].join('\n\n');
@@ -53,19 +41,16 @@ const readSwiperFile = async (filePath, iconsFontBase64, colors) => {
   return fileContent;
 };
 
-const buildCSS = async ({ isBundle, colors, components, minified, outputDir }) => {
+const buildCSS = async ({ isBundle, components, minified, outputDir }) => {
   let lessContent = await fs.readFile(path.resolve(__dirname, '../src/swiper.less'), 'utf8');
-  lessContent = lessContent
-    .replace(
-      '//IMPORT_COMPONENTS',
-      !isBundle
-        ? ''
-        : components
-            .map((component) => `@import url('./components/${component}/${component}.less');`)
-            .join('\n'),
-    )
-    .replace('$themeColor', config.themeColor)
-    .replace('$colors', colors.join(', '));
+  lessContent = lessContent.replace(
+    '//IMPORT_COMPONENTS',
+    !isBundle
+      ? ''
+      : components
+          .map((component) => `@import url('./components/${component}/${component}.less');`)
+          .join('\n'),
+  );
 
   const cssContent = await autoprefixer(
     await less(lessContent, path.resolve(__dirname, '../src')),
@@ -94,18 +79,15 @@ module.exports = async (outputDir) => {
     const lessFilePath = `./src/components/${name}/${name}.less`;
     return fs.existsSync(lessFilePath);
   });
-  const colors = Object.keys(config.colors).map((key) => `${key} ${config.colors[key]}`);
 
-  buildCSS({ isBundle: true, colors, components, minified: env !== 'development', outputDir });
-  buildCSS({ isBundle: false, colors, components, minified: env !== 'development', outputDir });
+  buildCSS({ isBundle: true, components, minified: env !== 'development', outputDir });
+  buildCSS({ isBundle: false, components, minified: env !== 'development', outputDir });
 
   if (env === 'development') {
     return;
   }
 
   // Copy less & scss
-  const iconsFontBase64 = await base64Encode('./src/icons/font/swiper-icons.woff');
-
   const files = await globby(
     [
       '**/**.scss',
@@ -123,7 +105,7 @@ module.exports = async (outputDir) => {
     files.map(async (file) => {
       const distFilePath = path.resolve(__dirname, `../${outputDir}`, file);
       const srcFilePath = path.resolve(__dirname, '../src', file);
-      const distFileContent = await readSwiperFile(srcFilePath, iconsFontBase64, colors);
+      const distFileContent = await readSwiperFile(srcFilePath);
       await fs.ensureDir(path.dirname(distFilePath));
       await fs.writeFile(distFilePath, distFileContent);
     }),

diff --git a/src/components/navigation/navigation.less b/src/components/navigation/navigation.less
@@ -1,15 +1,3 @@
-.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) {
-  @length: length(@colors);
-  .looper( 1 );
-  .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
-    @navPair: extract(@colors, @index);
-    @navColorName: extract(@navPair, 1);
-    @navColorValue: extract(@navPair, 2);
-    @ruleset();
-    .looper( @index + 1 );
-  }
-}
-
 :root {
   --swiper-navigation-size: 44px;
   /*
@@ -60,14 +48,6 @@
   right: 10px;
   left: auto;
 }
-.navigation-color-loop({
-  .swiper-button-prev,
-  .swiper-button-next {
-    &.swiper-button-@{navColorName} {
-      --swiper-navigation-color: @navColorValue;
-    }
-  }
-});
 .swiper-button-lock {
   display: none;
 }
diff --git a/src/components/navigation/navigation.scss b/src/components/navigation/navigation.scss
@@ -51,14 +51,6 @@
   left: auto;
 }
 
-@each $navColorName, $navColorValue in $colors {
-  .swiper-button-prev,
-  .swiper-button-next {
-    &.swiper-button-#{'' + $navColorName} {
-      --swiper-navigation-color: #{'' + $navColorValue};
-    }
-  }
-}
 .swiper-button-lock {
   display: none;
 }
diff --git a/src/components/pagination/pagination.less b/src/components/pagination/pagination.less
@@ -1,15 +1,3 @@
-.pagination-color-loop(@ruleset) when (length( @colors ) >= 1) {
-  @length: length(@colors);
-  .looper( 1 );
-  .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
-    @paginationPair: extract(@colors, @index);
-    @paginationColorName: extract(@paginationPair, 1);
-    @paginationColorValue: extract(@paginationPair, 2);
-    @ruleset();
-    .looper( @index + 1 );
-  }
-}
-
 :root {
   /*
   --swiper-pagination-color: var(--swiper-theme-color);
@@ -157,11 +145,6 @@
     top: 0;
   }
 }
-.pagination-color-loop({
-  .swiper-pagination-@{paginationColorName} {
-    --swiper-pagination-color: @paginationColorValue;
-  }
-});
 .swiper-pagination-lock {
   display: none;
 }
diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
@@ -147,11 +147,6 @@
     top: 0;
   }
 }
-@each $paginationColorName, $paginationColorValue in $colors {
-  .swiper-pagination-#{'' + $paginationColorName} {
-    --swiper-pagination-color: #{'' + $paginationColorValue};
-  }
-}
 .swiper-pagination-lock {
   display: none;
 }
diff --git a/src/less/mixins.less b/src/less/mixins.less
diff --git a/src/less/plugin.js b/src/less/plugin.js
diff --git a/src/swiper-vars.less b/src/swiper-vars.less
@@ -1,2 +1 @@
-@themeColor: $themeColor;
-@colors: $colors;
+@themeColor: #007aff;
diff --git a/src/swiper-vars.scss b/src/swiper-vars.scss
@@ -1,5 +1 @@
 $themeColor: #007aff !default;
-$colors: (
-  'white': #ffffff,
-  'black': #000000,
-) !default;
diff --git a/src/swiper.less b/src/swiper.less
@@ -1,12 +1,9 @@
-@import url('./less/mixins.less');
-
-@themeColor: $themeColor;
-@colors: $colors;
+@themeColor: #007aff;
 
 @font-face {
   @fontBase64: swiperIconsFont();
   font-family: 'swiper-icons';
-  src: url('data:application/font-woff;charset=utf-8;base64, @{fontBase64}') format('woff');
+  src: url('data:application/font-woff;charset=utf-8;base64, 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');
   font-weight: 400;
   font-style: normal;
 }