From 832f391ddcdf3bbe388fe206850a3ef5032ea81c Mon Sep 17 00:00:00 2001 From: ymrl Date: Fri, 19 Jan 2024 19:21:20 +0900 Subject: [PATCH] =?UTF-8?q?:+1:=20Storybook=E3=81=ABSass=E3=82=92=E5=8F=82?= =?UTF-8?q?=E7=85=A7=E3=81=95=E3=81=9B=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.ts | 46 +++---- .storybook/preview.tsx | 2 +- package-lock.json | 301 ++++++++--------------------------------- package.json | 5 +- 4 files changed, 78 insertions(+), 276 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index b9273f6e6..5408440eb 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -10,6 +10,26 @@ const config: StorybookConfig = { '@storybook/addon-storysource', 'storybook-addon-pseudo-states', '@kemuridama/storybook-addon-github', + '@storybook/addon-styling-webpack', + { + name: '@storybook/addon-styling-webpack', + options: { + rules: [ + // Replaces any existing Sass rules with given rules + { + test: /\.s[ac]ss$/i, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'sass-loader', + options: { implementation: require.resolve('sass') }, + }, + ], + }, + ], + }, + }, ], stories: [ '../docs/**/*.stories.mdx', @@ -30,32 +50,6 @@ const config: StorybookConfig = { use: [require.resolve('@storybook/source-loader')], enforce: 'pre', }, - { - test: /\.scss$/, - use: [ - { - loader: 'style-loader', - }, - { - loader: 'css-loader', - }, - { - loader: 'sass-loader', - options: { - implementation: require('sass'), - }, - }, - ], - }, - { - test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, - use: { - loader: 'file-loader', - options: { - name: './fonts/[name].[ext]', - }, - }, - }, ], }, }), diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 24b1d3f26..7e60f5ed3 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import { DocsContainer } from '@storybook/addon-docs'; import { Decorator, Parameters } from '@storybook/react'; import { VibesProvider, useLang } from '../src/utilities/VibesProvider'; -import '../vibes_2021.min.css'; +import '../stylesheets/vibes_2021.scss'; const LanguagePortal = React.forwardRef( ({ lang }, ref) => diff --git a/package-lock.json b/package-lock.json index 062252801..713e7f0d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "@storybook/addon-knobs": "7.0.2", "@storybook/addon-links": "7.6.1", "@storybook/addon-storysource": "7.6.1", + "@storybook/addon-styling-webpack": "0.0.6", "@storybook/manager-api": "7.6.1", "@storybook/react": "7.6.1", "@storybook/react-webpack5": "7.6.1", @@ -86,10 +87,10 @@ "replace-in-file": "6.2.0", "resolve.exports": "2.0.2", "sass": "1.51.0", - "sass-loader": "10.2.0", + "sass-loader": "14.0.0", "storybook": "7.6.1", "storybook-addon-pseudo-states": "2.1.2", - "style-loader": "0.23.1", + "style-loader": "3.3.4", "stylelint": "16.0.2", "stylelint-config-prettier": "9.0.3", "stylelint-config-standard": "19.0.0", @@ -5765,6 +5766,18 @@ "node": ">=4.0" } }, + "node_modules/@storybook/addon-styling-webpack": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@storybook/addon-styling-webpack/-/addon-styling-webpack-0.0.6.tgz", + "integrity": "sha512-JjM2FXFiHpjbJsp7nRUEMhYBRpK6ukBKsbtWzCrAGOfUgoElcGwPY8KhSKSnRknIhebonGK1bxalh3u8bGZ/dw==", + "dev": true, + "dependencies": { + "@storybook/node-logger": "^7.0.12" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/@storybook/addon-toolbars": { "version": "7.6.1", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.1.tgz", @@ -6398,22 +6411,6 @@ "node": ">=10" } }, - "node_modules/@storybook/builder-webpack5/node_modules/style-loader": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz", - "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==", - "dev": true, - "engines": { - "node": ">= 12.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "webpack": "^5.0.0" - } - }, "node_modules/@storybook/channel-postmessage": { "version": "7.0.26", "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.26.tgz", @@ -10986,15 +10983,6 @@ "url": "https://github.com/sponsors/epoberezkin" } }, - "node_modules/ajv-errors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true, - "peerDependencies": { - "ajv": ">=5.0.0" - } - }, "node_modules/ajv-formats": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", @@ -20607,15 +20595,6 @@ "node": ">=6" } }, - "node_modules/klona": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz", - "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", - "dev": true, - "engines": { - "node": ">= 8" - } - }, "node_modules/known-css-properties": { "version": "0.29.0", "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", @@ -20853,32 +20832,6 @@ "node": ">=6.11.5" } }, - "node_modules/loader-utils": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", - "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", - "dev": true, - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/loader-utils/node_modules/json5": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", - "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", - "dev": true, - "dependencies": { - "minimist": "^1.2.0" - }, - "bin": { - "json5": "lib/cli.js" - } - }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -24369,89 +24322,38 @@ } }, "node_modules/sass-loader": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz", - "integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.0.0.tgz", + "integrity": "sha512-oceP9wWbep/yRJ2+sMbCzk0UsXsDzdNis+N8nu9i5GwPXjy6v3DNB6TqfJLSpPO9k4+B8x8p/CEgjA9ZLkoLug==", "dev": true, "dependencies": { - "klona": "^2.0.4", - "loader-utils": "^2.0.0", - "neo-async": "^2.6.2", - "schema-utils": "^3.0.0", - "semver": "^7.3.2" + "neo-async": "^2.6.2" }, "engines": { - "node": ">= 10.13.0" + "node": ">= 18.12.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "fibers": ">= 3.1.0", - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "sass": "^1.3.0", - "webpack": "^4.36.0 || ^5.0.0" + "sass-embedded": "*", + "webpack": "^5.0.0" }, "peerDependenciesMeta": { - "fibers": { - "optional": true - }, "node-sass": { "optional": true }, "sass": { "optional": true + }, + "sass-embedded": { + "optional": true } } }, - "node_modules/sass-loader/node_modules/loader-utils": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", - "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", - "dev": true, - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - }, - "engines": { - "node": ">=8.9.0" - } - }, - "node_modules/sass-loader/node_modules/schema-utils": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", - "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", - "dev": true, - "dependencies": { - "@types/json-schema": "^7.0.8", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, - "node_modules/sass-loader/node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", @@ -24473,20 +24375,6 @@ "object-assign": "^4.1.1" } }, - "node_modules/schema-utils": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", - "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", - "dev": true, - "dependencies": { - "ajv": "^6.1.0", - "ajv-errors": "^1.0.0", - "ajv-keywords": "^3.1.0" - }, - "engines": { - "node": ">= 4" - } - }, "node_modules/semver": { "version": "5.7.2", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", @@ -25273,16 +25161,19 @@ } }, "node_modules/style-loader": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", - "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==", + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", + "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==", "dev": true, - "dependencies": { - "loader-utils": "^1.1.0", - "schema-utils": "^1.0.0" - }, "engines": { - "node": ">= 0.12.0" + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" } }, "node_modules/styled-components": { @@ -31161,6 +31052,15 @@ } } }, + "@storybook/addon-styling-webpack": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@storybook/addon-styling-webpack/-/addon-styling-webpack-0.0.6.tgz", + "integrity": "sha512-JjM2FXFiHpjbJsp7nRUEMhYBRpK6ukBKsbtWzCrAGOfUgoElcGwPY8KhSKSnRknIhebonGK1bxalh3u8bGZ/dw==", + "dev": true, + "requires": { + "@storybook/node-logger": "^7.0.12" + } + }, "@storybook/addon-toolbars": { "version": "7.6.1", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.1.tgz", @@ -31625,13 +31525,6 @@ "requires": { "lru-cache": "^6.0.0" } - }, - "style-loader": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz", - "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==", - "dev": true, - "requires": {} } } }, @@ -35147,13 +35040,6 @@ "uri-js": "^4.2.2" } }, - "ajv-errors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true, - "requires": {} - }, "ajv-formats": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", @@ -42249,12 +42135,6 @@ "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==", "dev": true }, - "klona": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz", - "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", - "dev": true - }, "known-css-properties": { "version": "0.29.0", "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", @@ -42430,28 +42310,6 @@ "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==", "dev": true }, - "loader-utils": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", - "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", - "dev": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - }, - "dependencies": { - "json5": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", - "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", - "dev": true, - "requires": { - "minimist": "^1.2.0" - } - } - } - }, "locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -45064,49 +44922,12 @@ } }, "sass-loader": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz", - "integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.0.0.tgz", + "integrity": "sha512-oceP9wWbep/yRJ2+sMbCzk0UsXsDzdNis+N8nu9i5GwPXjy6v3DNB6TqfJLSpPO9k4+B8x8p/CEgjA9ZLkoLug==", "dev": true, "requires": { - "klona": "^2.0.4", - "loader-utils": "^2.0.0", - "neo-async": "^2.6.2", - "schema-utils": "^3.0.0", - "semver": "^7.3.2" - }, - "dependencies": { - "loader-utils": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", - "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", - "dev": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "schema-utils": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", - "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.8", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - } - }, - "semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "dev": true, - "requires": { - "lru-cache": "^6.0.0" - } - } + "neo-async": "^2.6.2" } }, "saxes": { @@ -45127,17 +44948,6 @@ "object-assign": "^4.1.1" } }, - "schema-utils": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", - "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", - "dev": true, - "requires": { - "ajv": "^6.1.0", - "ajv-errors": "^1.0.0", - "ajv-keywords": "^3.1.0" - } - }, "semver": { "version": "5.7.2", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", @@ -45759,14 +45569,11 @@ "dev": true }, "style-loader": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", - "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==", + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", + "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==", "dev": true, - "requires": { - "loader-utils": "^1.1.0", - "schema-utils": "^1.0.0" - } + "requires": {} }, "styled-components": { "version": "5.3.6", diff --git a/package.json b/package.json index 01c60a490..73abc3275 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@storybook/addon-knobs": "7.0.2", "@storybook/addon-links": "7.6.1", "@storybook/addon-storysource": "7.6.1", + "@storybook/addon-styling-webpack": "0.0.6", "@storybook/manager-api": "7.6.1", "@storybook/react": "7.6.1", "@storybook/react-webpack5": "7.6.1", @@ -103,10 +104,10 @@ "replace-in-file": "6.2.0", "resolve.exports": "2.0.2", "sass": "1.51.0", - "sass-loader": "10.2.0", + "sass-loader": "14.0.0", "storybook": "7.6.1", "storybook-addon-pseudo-states": "2.1.2", - "style-loader": "0.23.1", + "style-loader": "3.3.4", "stylelint": "16.0.2", "stylelint-config-prettier": "9.0.3", "stylelint-config-standard": "19.0.0",