0

fix(storybook): less+sass updates for storybook7

This commit is contained in:
Gabe Kangas 2023-10-25 21:24:08 -07:00
parent 349a23c690
commit c22d5357ab
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
3 changed files with 102 additions and 108 deletions

View File

@ -14,12 +14,89 @@ module.exports = {
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-scss',
'@storybook/addon-postcss',
'@storybook/addon-a11y',
'storybook-addon-designs',
'storybook-addon-fetch-mock',
'@storybook/addon-mdx-gfm',
'@storybook/addon-styling-webpack'
'@storybook/addon-styling-webpack',
{
name: '@storybook/addon-styling-webpack',
options: {
rules: [
{
test: /\.css$/,
sideEffects: true,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
// Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
modules: {
auto: true,
},
},
},
],
},
{
test: /\.s[ac]ss$/,
sideEffects: true,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
// Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
modules: {
auto: true,
},
importLoaders: 2,
},
},
require.resolve('resolve-url-loader'),
{
loader: require.resolve('sass-loader'),
options: {
// Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
implementation: require.resolve('sass'),
sourceMap: true,
sassOptions: {},
},
},
],
},
{
test: /\.less$/,
sideEffects: true,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
// Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
modules: {
auto: true,
},
importLoaders: 1,
},
},
{
loader: require.resolve('less-loader'),
options: {
// Want to add more Less options? Read more here: https://webpack.js.org/loaders/less-loader/#options
implementation: require.resolve('less'),
sourceMap: true,
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
],
},
},
],
webpackFinal: async (config, { configType }) => {
@ -33,31 +110,31 @@ module.exports = {
use: ['@svgr/webpack'],
});
config.module.rules.push({
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('less-loader'),
options: {
lessOptions: { javascriptEnabled: true },
},
},
],
});
// config.module.rules.push({
// test: /\.less$/,
// use: [
// require.resolve('style-loader'),
// require.resolve('css-loader'),
// {
// loader: require.resolve('less-loader'),
// options: {
// lessOptions: { javascriptEnabled: true },
// },
// },
// ],
// });
return config;
},
framework: {
name: '@storybook/nextjs',
options: {}
options: {},
},
staticDirs: ['../public', '../../static', './story-assets'],
docs: {
autodocs: true
}
autodocs: true,
},
};

89
web/package-lock.json generated
View File

@ -68,7 +68,7 @@
"@storybook/cli": "7.5.1",
"@storybook/mdx2-csf": "1.1.0",
"@storybook/nextjs": "^7.5.1",
"@storybook/preset-scss": "1.0.3",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "7.5.1",
"@storybook/testing-library": "0.2.2",
"@svgr/webpack": "8.1.0",
@ -110,10 +110,10 @@
"npm": "^10.0.0",
"postcss": "^8.4.31",
"prettier": "3.0.3",
"resolve-url-loader": "^5.0.0",
"sass": "1.69.4",
"sass-loader": "13.3.2",
"sass-loader": "^13.3.2",
"storybook": "^7.5.1",
"storybook-addon-designs": "6.3.1",
"storybook-addon-fetch-mock": "1.0.1",
"storybook-preset-less": "1.1.3",
"style-dictionary": "3.8.0",
@ -3068,28 +3068,6 @@
"integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
"dev": true
},
"node_modules/@figspec/components": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.2.tgz",
"integrity": "sha512-rTjjH7wvM55ZuX+MRVPND1cs4Z4JspJvKc9lzGxm/8gD4dLfgeFztQuNy+daGglaxcGXLXTuJ2oJtZ0/lmRKmw==",
"dev": true,
"dependencies": {
"lit": "^2.1.3"
}
},
"node_modules/@figspec/react": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.3.tgz",
"integrity": "sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g==",
"dev": true,
"dependencies": {
"@figspec/components": "^1.0.1",
"@lit-labs/react": "^1.0.2"
},
"peerDependencies": {
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@floating-ui/core": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
@ -4284,27 +4262,6 @@
"@lezer/lr": "^1.0.0"
}
},
"node_modules/@lit-labs/react": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
"integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==",
"dev": true
},
"node_modules/@lit-labs/ssr-dom-shim": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
"integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==",
"dev": true
},
"node_modules/@lit/reactive-element": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
"integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
"dev": true,
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.0.0"
}
},
"node_modules/@mdx-js/react": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
@ -27403,37 +27360,6 @@
}
}
},
"node_modules/lit": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
"integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
"dev": true,
"dependencies": {
"@lit/reactive-element": "^1.6.0",
"lit-element": "^3.3.0",
"lit-html": "^2.8.0"
}
},
"node_modules/lit-element": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
"integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
"dev": true,
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
"lit-html": "^2.8.0"
}
},
"node_modules/lit-html": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
"integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
"dev": true,
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
},
"node_modules/load-json-file": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
@ -39045,15 +38971,6 @@
"url": "https://opencollective.com/storybook"
}
},
"node_modules/storybook-addon-designs": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz",
"integrity": "sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw==",
"dev": true,
"dependencies": {
"@figspec/react": "^1.0.0"
}
},
"node_modules/storybook-addon-fetch-mock": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/storybook-addon-fetch-mock/-/storybook-addon-fetch-mock-1.0.1.tgz",

View File

@ -74,7 +74,7 @@
"@storybook/cli": "7.5.1",
"@storybook/mdx2-csf": "1.1.0",
"@storybook/nextjs": "^7.5.1",
"@storybook/preset-scss": "1.0.3",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "7.5.1",
"@storybook/testing-library": "0.2.2",
"@svgr/webpack": "8.1.0",
@ -116,10 +116,10 @@
"npm": "^10.0.0",
"postcss": "^8.4.31",
"prettier": "3.0.3",
"resolve-url-loader": "^5.0.0",
"sass": "1.69.4",
"sass-loader": "13.3.2",
"sass-loader": "^13.3.2",
"storybook": "^7.5.1",
"storybook-addon-designs": "6.3.1",
"storybook-addon-fetch-mock": "1.0.1",
"storybook-preset-less": "1.1.3",
"style-dictionary": "3.8.0",