Skip to content

Commit 118ec66

Browse files
nolimits4webnolimits4web
committed
feat: remove LESS and SCSS styles in favor of CSS
1 parent d472144 commit 118ec66

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1133
-1093
lines changed

‎package-lock.json‎

Lines changed: 994 additions & 116 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,13 @@
7474
"@rollup/plugin-replace": "^5.0.2",
7575
"@types/react": "^18.2.31",
7676
"@vitejs/plugin-vue": "^4.4.0",
77-
"autoprefixer": "^10.4.16",
77+
"autoprefixer": "^10.4.21",
7878
"chalk": "^5.3.0",
79-
"clean-css": "^5.3.2",
79+
"clean-css": "^5.3.3",
8080
"concurrently": "^8.2.2",
8181
"conventional-changelog-cli": "^2.2.2",
8282
"cross-env": "^7.0.3",
83+
"cssnano": "^7.1.1",
8384
"elapsed-time-logger": "^1.1.7",
8485
"eslint": "^8.52.0",
8586
"eslint-config-airbnb-base": "^15.0.0",
@@ -94,14 +95,15 @@
9495
"inquirer": "^9.2.11",
9596
"less": "^4.2.0",
9697
"npm-run-all": "^4.1.5",
97-
"postcss": "^8.4.31",
98+
"postcss": "^8.5.6",
99+
"postcss-nested": "^7.0.2",
98100
"prettier": "^3.0.3",
99101
"react": "^18.2.0",
100102
"react-dom": "^18.2.0",
101103
"rimraf": "^5.0.5",
102104
"rollup": "^4.1.4",
103105
"ssr-window": "^5.0.1",
104-
"terser": "^5.22.0",
106+
"terser": "^5.44.0",
105107
"vite": "^4.5.0",
106108
"vue": "^3.3.6"
107109
}

‎playground/element/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99

1010
<body>
11-
<swiper-container effect="fade" fade-effect-cross-fade="true">
11+
<swiper-container navigation>
1212
<swiper-slide>Slide 1</swiper-slide>
1313
<swiper-slide>Slide 2</swiper-slide>
1414
<swiper-slide>Slide 3</swiper-slide>

‎scripts/build-styles.js‎

Lines changed: 32 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,92 +4,64 @@ import { globby } from 'globby';
44
import * as url from 'url';
55
import chalk from 'chalk';
66
import elapsed from 'elapsed-time-logger';
7-
import less from './utils/less.js';
87
import autoprefixer from './utils/autoprefixer.js';
9-
import minifyCSS from './utils/clean-css.js';
8+
import minifyCSS from './utils/minify-css.js';
109
import { banner } from './utils/banner.js';
1110
import config from './build-config.js';
1211
import { outputDir } from './utils/output-dir.js';
1312
import isProd from './utils/isProd.js';
1413
import { getSplittedCSS, proceedReplacements } from './utils/get-element-styles.js';
14+
import unwrapCss from './utils/unwrap-css.js';
1515

1616
const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
1717

18-
const readSwiperFile = async (filePath) => {
19-
const fileContent = await fs.readFile(filePath, 'utf-8');
20-
if (filePath.includes('swiper.less')) {
21-
const coreContent = fs.readFileSync(path.resolve(__dirname, '../src/core/core.less'), 'utf-8');
22-
return fileContent
23-
.replace('//IMPORT_MODULES', '')
24-
.replace(`@import url('./less/mixins.less');`, '')
25-
.replace(`@import url('./core/core.less');`, coreContent);
26-
}
27-
if (filePath.includes('swiper-vars.less')) {
28-
return fileContent;
29-
}
30-
if (filePath.includes('navigation.less') || filePath.includes('pagination.less')) {
31-
return ["@import url('../../swiper-vars.less');", fileContent].join('\n\n');
32-
}
33-
if (filePath.includes('swiper.scss')) {
34-
const coreContent = await fs.readFile(
35-
path.resolve(__dirname, '../src/core/core.scss'),
36-
'utf-8',
18+
const buildCSS = async ({ isBundle, modules, minified }) => {
19+
const coreContent = await fs.readFile(path.resolve(__dirname, '../src/swiper.css'), 'utf8');
20+
const modulesContent = [];
21+
for (const mod of modules) {
22+
modulesContent.push(
23+
// eslint-disable-next-line no-await-in-loop
24+
await fs.readFile(path.resolve(__dirname, `../src/modules/${mod}/${mod}.css`), 'utf8'),
3725
);
38-
return fileContent
39-
.replace(`@import './core/core';`, coreContent)
40-
.replace('//IMPORT_MODULES', '');
4126
}
42-
return fileContent;
43-
};
44-
const buildCSS = async ({ isBundle, modules, minified }) => {
45-
let lessContent = await fs.readFile(path.resolve(__dirname, '../src/swiper.less'), 'utf8');
46-
lessContent = lessContent.replace(
47-
'//IMPORT_MODULES',
48-
!isBundle
49-
? ''
50-
: modules.map((mod) => `@import url('./modules/${mod}/${mod}.less');`).join('\n'),
51-
);
5227

53-
const cssContent = await autoprefixer(
54-
await less(lessContent, path.resolve(__dirname, '../src')),
55-
).catch((err) => {
56-
throw err;
57-
});
28+
const swiperCSS = await autoprefixer(coreContent);
29+
const swiperBundleCSS = await autoprefixer([coreContent, ...modulesContent].join('\n'));
30+
5831
const fileName = isBundle ? 'swiper-bundle' : 'swiper';
5932
// Write file
6033
await fs.ensureDir(`./${outputDir}`);
6134

62-
await fs.writeFile(`./${outputDir}/${fileName}.css`, `${banner()}\n${cssContent}`);
35+
await fs.writeFile(
36+
`./${outputDir}/${fileName}.css`,
37+
`${banner()}\n${isBundle ? swiperBundleCSS : swiperCSS}`,
38+
);
6339

6440
if (minified) {
65-
const minifiedContent = await minifyCSS(cssContent);
41+
const minifiedContent = await minifyCSS(isBundle ? swiperBundleCSS : swiperCSS);
6642
await fs.writeFile(`./${outputDir}/${fileName}.min.css`, `${banner()}\n${minifiedContent}`);
6743
}
6844
};
6945
export default async function buildStyles() {
7046
elapsed.start('styles');
7147
// eslint-disable-next-line import/no-named-as-default-member
7248
const modules = config.modules.filter((name) => {
73-
const lessFilePath = `./src/modules/${name}/${name}.less`;
74-
return fs.existsSync(lessFilePath);
49+
const cssFilePath = `./src/modules/${name}/${name}.css`;
50+
return fs.existsSync(cssFilePath);
7551
});
7652
buildCSS({ isBundle: true, modules, minified: isProd });
7753
buildCSS({ isBundle: false, modules, minified: isProd });
7854
if (isProd) {
79-
// Copy less & scss
80-
const files = await globby(
81-
['**/**.scss', '**/**.less', '!**/mixins.less', '!**/icons/**', '!**/core/**'],
82-
{
83-
cwd: path.resolve(__dirname, '../src'),
84-
},
85-
);
55+
// Copy css
56+
const files = await globby(['**/**.css'], {
57+
cwd: path.resolve(__dirname, '../src'),
58+
});
8659
await Promise.all(
8760
files.map(async (file) => {
8861
let distFilePath = path.resolve(__dirname, `../${outputDir}`, file);
8962
const srcFilePath = path.resolve(__dirname, '../src', file);
90-
let distFileContent = await readSwiperFile(srcFilePath);
91-
distFileContent = distFileContent.replace('../../swiper-vars', '../swiper-vars');
92-
if (file === 'swiper.scss' || file === 'swiper.less') {
63+
let distFileContent = fs.readFileSync(srcFilePath, 'utf-8');
64+
if (file === 'swiper.css') {
9365
distFileContent = `${banner()}\n${distFileContent}`;
9466
}
9567
if (distFilePath.includes('/modules/') || distFilePath.includes('\\modules\\')) {
@@ -101,20 +73,17 @@ export default async function buildStyles() {
10173
await fs.writeFile(distFilePath, distFileContent);
10274
}),
10375
);
104-
const modulesLessFiles = await globby(['**/**.less'], {
76+
const modulesCSSFiles = await globby(['**/**.css'], {
10577
cwd: path.resolve(__dirname, '../dist/modules'),
10678
absolute: true,
10779
});
10880
await Promise.all(
109-
modulesLessFiles.map(async (filePath) => {
110-
const fileContent = await fs.readFile(filePath, 'utf-8');
111-
const content = fileContent.replace('@themeColor', config.themeColor);
112-
const lessContent = await less(content, path.dirname(filePath)).catch((err) => {
113-
throw new Error(`${filePath}: ${err}`);
114-
});
115-
const resultCSS = await autoprefixer(lessContent);
116-
const resultCSSElement = proceedReplacements(getSplittedCSS(resultCSS).container);
117-
const resultFilePath = filePath.replace(/\.less$/, '');
81+
modulesCSSFiles.map(async (filePath) => {
82+
const cssContent = await fs.readFile(filePath, 'utf-8');
83+
const resultCSS = await autoprefixer(cssContent);
84+
const unwrappedCSS = await unwrapCss(resultCSS);
85+
const resultCSSElement = proceedReplacements(getSplittedCSS(unwrappedCSS).container);
86+
const resultFilePath = filePath.replace(/\.css$/, '');
11887
const minifiedCSS = await minifyCSS(resultCSS);
11988
const minifiedCSSElement = await minifyCSS(resultCSSElement);
12089
await fs.writeFile(`${resultFilePath}.css`, resultCSS);

‎scripts/utils/clean-css.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎scripts/utils/get-element-styles.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import fs from 'fs';
22
import path from 'path';
33
import * as url from 'url';
44
import autoprefixer from './autoprefixer.js';
5-
import less from './less.js';
6-
import cleanCss from './clean-css.js';
5+
import minifyCss from './minify-css.js';
76
import config from '../build-config.js';
7+
import unwrapCss from './unwrap-css.js';
88

99
const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
1010

@@ -118,31 +118,31 @@ const proceedSlideReplacements = (content) => {
118118
export default async function getElementStyles() {
119119
// eslint-disable-next-line
120120
const modules = config.modules.filter((name) => {
121-
const lessFilePath = `./src/modules/${name}/${name}.less`;
122-
return fs.existsSync(lessFilePath);
121+
const cssFilePath = `./src/modules/${name}/${name}.css`;
122+
return fs.existsSync(cssFilePath);
123123
});
124124

125-
let lessContentBundle = await fs.readFileSync(
126-
path.resolve(__dirname, '../../src/swiper.less'),
125+
const cssContentBundle = await fs.readFileSync(
126+
path.resolve(__dirname, '../../src/swiper.css'),
127127
'utf8',
128128
);
129-
lessContentBundle = lessContentBundle.replace(
130-
'//IMPORT_MODULES',
131-
modules.map((mod) => `@import url('./modules/${mod}/${mod}.less');`).join('\n'),
132-
);
129+
const modulesCSSContent = [];
130+
for (const mod of modules) {
131+
modulesCSSContent.push(
132+
// eslint-disable-next-line no-await-in-loop
133+
await fs.readFileSync(path.resolve(__dirname, `../../src/modules/${mod}/${mod}.css`), 'utf8'),
134+
);
135+
}
133136

134-
let lessContentCore = await fs.readFileSync(
135-
path.resolve(__dirname, '../../src/swiper.less'),
137+
const cssContentCore = await fs.readFileSync(
138+
path.resolve(__dirname, '../../src/swiper.css'),
136139
'utf8',
137140
);
138-
lessContentCore = lessContentCore.replace('//IMPORT_MODULES', '');
139141

140-
let cssStylesBundle = await autoprefixer(
141-
await less(lessContentBundle, path.resolve(__dirname, '../../src')),
142-
);
143-
let cssStylesCore = await autoprefixer(
144-
await less(lessContentCore, path.resolve(__dirname, '../../src')),
142+
let cssStylesBundle = await unwrapCss(
143+
await autoprefixer([cssContentBundle, ...modulesCSSContent].join('\n')),
145144
);
145+
let cssStylesCore = await unwrapCss(await autoprefixer(cssContentCore));
146146
// eslint-disable-next-line
147147
let cssStylesSlide = getSplittedCSS(cssStylesBundle).slides;
148148
cssStylesBundle = getSplittedCSS(cssStylesBundle).container;
@@ -152,9 +152,9 @@ export default async function getElementStyles() {
152152
cssStylesCore = proceedReplacements(cssStylesCore);
153153
cssStylesSlide = proceedSlideReplacements(cssStylesSlide);
154154

155-
cssStylesBundle = await cleanCss(cssStylesBundle);
156-
cssStylesCore = await cleanCss(cssStylesCore);
157-
cssStylesSlide = await cleanCss(cssStylesSlide);
155+
cssStylesBundle = await minifyCss(cssStylesBundle);
156+
cssStylesCore = await minifyCss(cssStylesCore);
157+
cssStylesSlide = await minifyCss(cssStylesSlide);
158158
return {
159159
core: cssStylesCore,
160160
bundle: cssStylesBundle,

‎scripts/utils/minify-css.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import postcss from 'postcss';
2+
import cssnano from 'cssnano';
3+
4+
export default (content) => {
5+
return new Promise((resolve, reject) => {
6+
if (content instanceof Promise) {
7+
content
8+
.then((c) => {
9+
postcss([cssnano()])
10+
.process(c, { from: undefined, to: undefined })
11+
.then((result) => resolve(result.css));
12+
})
13+
.catch((err) => {
14+
reject(err);
15+
throw err;
16+
});
17+
return;
18+
}
19+
postcss([cssnano()])
20+
.process(content, { from: undefined, to: undefined })
21+
.then((res) => {
22+
resolve(res.css);
23+
});
24+
});
25+
};

‎scripts/utils/unwrap-css.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import postcss from 'postcss';
2+
import nested from 'postcss-nested';
3+
4+
export default (content) => {
5+
return new Promise((resolve, reject) => {
6+
if (content instanceof Promise) {
7+
content
8+
.then((c) => {
9+
postcss([nested()])
10+
.process(c, { from: undefined, to: undefined })
11+
.then((result) => resolve(result.css));
12+
})
13+
.catch((err) => {
14+
reject(err);
15+
throw err;
16+
});
17+
return;
18+
}
19+
postcss([nested()])
20+
.process(content, { from: undefined, to: undefined })
21+
.then((res) => {
22+
resolve(res.css);
23+
});
24+
});
25+
};

‎scripts/watch.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
1010
console.log(chalk.cyan('Watching file changes ...'));
1111
const watchFunction = async (fileName) => {
1212
if (fileName.includes('swiper-element-bundle.mjs')) return;
13-
if (fileName.includes('.less') || fileName.includes('.css') || fileName.includes('.scss')) {
13+
if (fileName.includes('.css')) {
1414
console.log('Building styles');
1515
await buildStyles();
1616
console.log('Building styles DONE');

0 commit comments

Comments
 (0)