Skip to content

Commit

Permalink
Updated Less and Sass loaders. Ready to use the latest less-loader 11…
Browse files Browse the repository at this point in the history
….x and sass-loader 13.x versions.

Webpack v5 ready.
Upgrade to Babel 7
Update dependency libs
  • Loading branch information
igor-lemon committed May 28, 2022
1 parent 47eb05b commit 3e6013c
Show file tree
Hide file tree
Showing 10 changed files with 11,209 additions and 104 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
__tests__/output
build
node_modules
.idea
10 changes: 3 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,7 @@ The [official documentation](https://ant.design/docs/react/customize-theme) expl
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production',
},
},
'style-loader',
{
loader: 'css-loader',
options: {
Expand Down Expand Up @@ -131,11 +126,12 @@ First, initialize the plugin by passing your theme file's path to the plugin's c

```javascript
import AntdScssThemePlugin from 'antd-scss-theme-plugin';
import path from 'path';

const webpackConfig = {
// ...
plugins: [
new AntdScssThemePlugin('./theme.scss'),
new AntdScssThemePlugin(path.resolve('./theme.scss')),
],
};
```
Expand Down
13 changes: 8 additions & 5 deletions __tests__/antdLessLoader.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ describe('overloadLessLoaderOptions', () => {
const overloadedOptions = overloadLessLoaderOptions({
scssThemePath: path.resolve(__dirname, 'data/theme.scss'),
});
expect(overloadedOptions.modifyVars).toEqual({
expect(overloadedOptions.lessOptions.modifyVars).toEqual({
'@primary-color': '#f00',
'@info-color': '#200',
});
Expand All @@ -17,11 +17,14 @@ describe('overloadLessLoaderOptions', () => {
it('retains explicity passed in modifyVars', () => {
const overloadedOptions = overloadLessLoaderOptions({
scssThemePath: path.resolve(__dirname, 'data/theme.scss'),
modifyVars: {
'@primary-color': '#fff',
},
lessOptions: {
modifyVars: {
'@primary-color': '#fff',
},
}
});
expect(overloadedOptions.modifyVars).toEqual({

expect(overloadedOptions.lessOptions.modifyVars).toEqual({
'@primary-color': '#fff',
'@info-color': '#200',
});
Expand Down
32 changes: 17 additions & 15 deletions __tests__/antdSassLoader.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,17 @@ import { compileThemeVariables } from '../src/utils';


describe('themeImporter', () => {
it('produces an importer that allows importing compiled antd variables', async (done) => {
it('produces an importer that allows importing compiled antd variables', (done) => {
const themePath = path.resolve(__dirname, 'data/theme.scss');
const contents = await compileThemeVariables(themePath);
sass.render({
file: path.resolve(__dirname, 'data/test.scss'),
importer: themeImporter(themePath, contents),
}, (error, result) => {
const compiledColor = result.css.toString().match(/background: (.*);/)[1];
expect(compiledColor).toBe('#faad14');
done();
compileThemeVariables(themePath).then((contents) => {
sass.render({
file: path.resolve(__dirname, 'data/test.scss'),
importer: themeImporter(themePath, contents),
}, (error, result) => {
const compiledColor = result.css.toString().match(/background: (.*);/)[1];
expect(compiledColor).toBe('#faad14');
done();
});
});
});
});
Expand All @@ -36,7 +37,7 @@ describe('overloadSassLoaderOptions', () => {
const overloadedOptions = await overloadSassLoaderOptions({
scssThemePath,
});
expect(typeof overloadedOptions.importer).toBe('function');
expect(typeof overloadedOptions.sassOptions.importer).toBe('function');
});

[
Expand All @@ -45,20 +46,21 @@ describe('overloadSassLoaderOptions', () => {
].forEach(([description, importer]) => {
it(`adds an importer when given an ${description}`, async () => {
const overloadedOptions = await overloadSassLoaderOptions({
importer,
sassOptions: {
importer
},
scssThemePath,
});

expect(overloadedOptions.importer.length).toBe(2);
overloadedOptions.importer.forEach(imp => expect(typeof imp).toBe('function'));
expect(overloadedOptions.sassOptions.importer.length).toBe(2);
overloadedOptions.sassOptions.importer.forEach(imp => expect(typeof imp).toBe('function'));
});
});

it('uses scss theme path from plugin when not given one through options', async () => {
// eslint-disable-next-line no-unused-vars
const plugin = new AntdScssThemePlugin(scssThemePath);
const overloadedOptions = await overloadSassLoaderOptions({});
expect(typeof overloadedOptions.importer).toBe('function');
expect(typeof overloadedOptions.sassOptions.importer).toBe('function');
});

it('throws error when no scss theme path is supplied', (done) => {
Expand Down
10 changes: 4 additions & 6 deletions .babelrc → babel.config.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
{
module.exports = {
"plugins": [
"add-module-exports"
],
"presets": [
[
"env",
"@babel/preset-env",
{
"useBuiltIns": true,
"targets": {
"node": "6.9.0"
"node": "10.13.0"
}
}
],
"stage-2"
]
]
}
4 changes: 3 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
module.exports = {
modulePathIgnorePatterns: ['output'],
testURL: 'http://localhost/',
testEnvironmentOptions:{
url: 'http://localhost/',
}
};
Loading

0 comments on commit 3e6013c

Please sign in to comment.