diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 74b452e09d7..b500cda350f 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -60,6 +60,7 @@ "doctoc": "doctoc --title '## Table of contents' docs && doctoc --title '## Table of contents' README.md", "postinstall": "carbon-telemetry collect --install", "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn storybook", + "start-dev": "./update-scss-paths.sh & yarn start", "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9000", "storybook:react": "node --openssl-legacy-provider node_modules/@storybook/react/bin/index.js -p 9002 -c .storybook/react", "test": "yarn test:unit && yarn test:integration", diff --git a/packages/web-components/update-scss-paths.sh b/packages/web-components/update-scss-paths.sh new file mode 100755 index 00000000000..f579c995b22 --- /dev/null +++ b/packages/web-components/update-scss-paths.sh @@ -0,0 +1,42 @@ +#!/bin/bash + +declare -a component_names + +if ! command -v fswatch &>/dev/null; then + echo "fswatch required (https://github.com/emcrisostomo/fswatch)" + exit 1 +fi + +# Function to search and replace the string with proper escaping +search_and_replace_string() { + directory="$1" + search_string="$2" + replace_string="$3" + + # search for scss files under directory + find "$directory" -type f -name "*.scss" ! -path "*/__stories__/*" | while read -r scss_file; do + # search and replace the string in the file + sed -i "" "s#$search_string#$replace_string#g" "$scss_file" + echo "Replaced imports in $scss_file" + done +} + +# monitor for file changes under the `styles` directory +fswatch -0 ../styles/ | while read -d "" changed_file +do + component=$(basename "$(dirname "$changed_file")") + target_directory="src/components/$component" + + if [[ ! " ${component_names[@]} " =~ " ${component} " ]]; then + component_names+=("$component") + search_and_replace_string "$target_directory" "@carbon/ibmdotcom-styles/scss/components" "../../../../styles/scss/components" + fi + +done + +cleanup() { + echo "Reverting styles imports" + search_and_replace_string "src/components" "../../../../styles/scss/components" "@carbon/ibmdotcom-styles/scss/components" +} + +trap cleanup EXIT