chore(build): replace node-sass with sass (#261)

carbon-design-system · Nov 23, 2022 · 4f78490 · 4f78490
1 parent 4355318
commit 4f78490
Show file tree

Hide file tree

Showing 44 changed files with 3,056 additions and 2,152 deletions.
diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml
@@ -2,27 +2,28 @@ name: PR Check
 
 on:
   pull_request:
-    branches: [ base ]
+    branches: [base]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [16.x]
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Install dependencies
-      run: yarn
-    - name: Test packages
-      run: yarn test
-    - name: Build packages
-      run: yarn build
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: yarn
+      - name: Test packages
+        run: yarn test
+      - name: Build packages
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'
+        run: yarn build
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 *.log
 dist
 .next
-out
+out
+.DS_Store
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+16.15.1
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/lerna.json b/lerna.json
@@ -1,4 +1,5 @@
 {
   "version": "2.3.3",
-  "npmClient": "yarn"
+  "npmClient": "yarn",
+  "useWorkspaces": true
 }
diff --git a/packages/component-list/index.js b/packages/component-list/index.js
@@ -10,12 +10,15 @@ const pathname = './dist';
 const filename = 'index.json';
 const content = JSON.stringify(_carbonLibraries);
 
-if (!fs.existsSync(pathname)) {
-  fs.mkdirSync(pathname, { recursive: true });
-}
-
-fs.writeFile(path.resolve(pathname, filename), content, function (err) {
-  if (err) {
-    throw err;
+(async () => {
+  if (!fs.existsSync(pathname)) {
+    console.log('Creating directory:', pathname);
+    fs.mkdirSync(pathname, { recursive: true });
   }
-});
+
+  const jsonFilePath = path.resolve(pathname, filename);
+  console.log('Writing library content to:', jsonFilePath);
+  fs.writeFileSync(jsonFilePath, content);
+
+  process.exit();
+})();
diff --git a/packages/component-list/package.json b/packages/component-list/package.json
@@ -32,16 +32,18 @@
     "@babel/preset-react": "^7.14.5",
     "@testing-library/react": "^12.1.0",
     "babel-loader": "^8.2.2",
-    "cheerio": "^1.0.0-rc.10",
+    "cheerio": "1.0.0-rc.10",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.12.0",
     "eslint-config-carbon": "^2.1.0",
     "global": "^4.4.0",
     "nodemon": "^2.0.13",
+    "prettier": "^2.7.1",
+    "postcss": "^8.4.18",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.3.0",
     "stylelint-config-carbon": "^1.2.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"

diff --git a/packages/demo-site/package.json b/packages/demo-site/package.json
@@ -33,11 +33,11 @@
     "test": "yarn format && yarn lint"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-react": "^1.27.0",
-    "@carbon/ibmdotcom-styles": "^1.27.0",
-    "@carbon/ibmdotcom-web-components": "^1.12.0",
+    "@carbon/ibmdotcom-react": "^1.40.0",
+    "@carbon/ibmdotcom-styles": "^1.40.0",
+    "@carbon/ibmdotcom-web-components": "^1.25.0",
     "@carbon/icons-react": "^10.37.0",
-    "@carbon/pictograms-react": "^11.17.0",
+    "@carbon/pictograms-react": "^11.34.0",
     "eslint-config-carbon": "^2.1.0",
     "stylelint-config-carbon": "^1.2.0"
   },
@@ -50,16 +50,16 @@
     "express": "^4.17.1",
     "fast-sass-loader": "1.5.0",
     "lit-element": "^2.5.1",
-    "lorem-ipsum": "^2.0.3",
+    "lorem-ipsum": "^2.0.8",
     "next": "10.2.0",
-    "next-compose-plugins": "^2.2.0",
-    "node-sass": "^6.0.1",
-    "prettier": "^2.1.2",
-    "prop-types": "^15.7.2",
+    "next-compose-plugins": "^2.2.1",
+    "prettier": "^2.7.1",
+    "prop-types": "^15.8.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rtlcss": "^2.6.0",
-    "stylelint": "^13.13.1",
+    "sass": "1.32.8",
+    "stylelint": "^14.15.0",
     "webpack": "^4.43.0"
   },
   "resolutions": {

diff --git a/packages/demo-site/pages/_app.js b/packages/demo-site/pages/_app.js
@@ -154,8 +154,7 @@ export default class CarbonForIBMDotcom extends App {
             },
             hasProfile: false,
             hasSearch: false,
-          }}
-        >
+          }}>
           <Component {...pageProps} />
         </DotcomShell>
       </>

diff --git a/packages/demo-site/pages/index.js b/packages/demo-site/pages/index.js
@@ -134,8 +134,7 @@ const Random = () => {
               searchParams.get('singleType')
                 ? searchParams.get('singleType')
                 : searchParams.get(selector + 'Type') || 'slide-up'
-            }
-          >
+            }>
             {content}
           </ScrollAnimations>
         );
@@ -291,8 +290,7 @@ function randomLeadspaceBlock() {
       type="2-1"
       nested={true}
       border={Boolean(randomNum(0, 1))}
-      key={Math.random()}
-    >
+      key={Math.random()}>
       <div>
         <a name={data.title.replace(/ /g, '-')} data-title={data.title} />
         <LeadSpaceBlock {...data} key={Math.random()} />
@@ -322,8 +320,7 @@ function randomSection() {
             ? ` random--${themes[randomNum(0, themes.length - 1)]}`
             : '',
           'random--themed-section',
-        ].join(' ')}
-      >
+        ].join(' ')}>
         {item}
       </div>
     );
@@ -417,8 +414,7 @@ function randomContentBlock() {
       type="2-1"
       nested={true}
       border={data.layoutBorder}
-      key={Math.random()}
-    >
+      key={Math.random()}>
       <div>
         <a name={data.heading.replace(/ /g, '-')} data-title={data.heading} />
         <ContentBlock {...data} />

diff --git a/packages/demo-site/styles/random.scss b/packages/demo-site/styles/random.scss
@@ -6,7 +6,7 @@ $feature-flags: (
 );
 
 // @import "~@carbon/type/scss/font-face/sans";
-@import '~@carbon/layout/scss/_breakpoint.scss';
+@import '~@carbon/layout/scss/breakpoint';
 @import '~@carbon/type/scss/styles';
 @import '~@carbon/grid/scss/mixins';
 @import '~@carbon/themes/scss/themes';
@@ -44,10 +44,9 @@ $feature-flags: (
 @import '~@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block';
 
 /* animations */
-@import '~@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
+@import '~@carbon/ibmdotcom-styles/scss/components/scroll-into-view/scroll-into-view';
 
 /* overrides */
-
 .random [data-autoid='dds--card-group'] {
   .bx--card {
     margin: 0;
@@ -330,7 +329,6 @@ $feature-flags: (
   // &__gradient {
   //   z-index: 1;
   // }
-
   &--content__container.bx--leadspace--content__container {
     @include carbon--make-col-ready();
   }

diff --git a/packages/utilities/package.json b/packages/utilities/package.json
@@ -37,8 +37,8 @@
   "devDependencies": {
     "eslint": "^7.12.0",
     "eslint-config-carbon": "^2.1.0",
-    "prettier": "^2.1.2",
-    "prettier-config-carbon": "^0.4.0"
+    "prettier": "^2.7.1",
+    "prettier-config-carbon": "^0.8.0"
   },
   "eslintConfig": {
     "extends": [

diff --git a/packages/utilities/src/ga.js b/packages/utilities/src/ga.js
@@ -171,18 +171,18 @@ function sendGa4Response(data) {
               ga4Data.events[0].params.outbound = data.outbound;
 
               break;
-            default:
+            default: // toggle, panel
               // set custom event name to event action
-              ga4Data.events[0].name = data.ea; // toggle, panel
+              ga4Data.events[0].name = data.ea;
               ga4Data.events[0].params.event_type = data.ec;
               ga4Data.events[0].params.event_label = data.el;
               ga4Data.events[0].params.event_value = data.ev;
           }
 
           break;
-        default:
+        default: // configuration // dom
           // set custom event name to event category
-          ga4Data.events[0].name = data.ec; // configuration // dom
+          ga4Data.events[0].name = data.ec;
           ga4Data.events[0].params.event_action = data.ea;
           ga4Data.events[0].params.event_label = data.el;
           ga4Data.events[0].params.event_value = data.ev;

diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json
@@ -50,23 +50,24 @@
     "html-loader": "^1.3.0",
     "html-webpack-plugin": "^4.4.1",
     "mini-css-extract-plugin": "^0.11.0",
-    "node-sass": "^6.0.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss": "^8.4.18",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-rem-to-pixel": "^4.1.2",
     "preact": "^10.4.8",
-    "prettier": "^2.1.2",
-    "prettier-config-carbon": "^0.4.0",
+    "prettier": "^2.7.1",
+    "prettier-config-carbon": "^0.8.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-svg-loader": "^3.0.3",
     "rimraf": "^3.0.2",
+    "sass": "1.32.8",
     "sass-loader": "^10.0.2",
     "style-loader": "^1.2.1",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.3.0",
     "stylelint-config-carbon": "^1.2.0",
     "terser-webpack-plugin": "^4.1.0",
     "webpack": "^4.43.0",

diff --git a/packages/web-extension/src/inject/components/BreakpointLabel/index.scss b/packages/web-extension/src/inject/components/BreakpointLabel/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 @mixin label-maker($breakpoints) {
   &::after {
     @each $breakpoint in map-keys($breakpoints) {

diff --git a/packages/web-extension/src/inject/components/Grid/2x/index.scss b/packages/web-extension/src/inject/components/Grid/2x/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 $grid-inner-color: $grid-color;
 $grid-inner-opacity: $grid-opacity;
 $grid-inner-border-size: $grid-border-size;

diff --git a/packages/web-extension/src/inject/components/Grid/mini-unit/index.scss b/packages/web-extension/src/inject/components/Grid/mini-unit/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 $grid-mini-unit-color: $grid-color;
 $grid-mini-unit-opacity: $grid-opacity;
 $grid-mini-unit-border-size: $grid-border-size;

diff --git a/packages/web-extension/src/inject/components/Highlight/index.scss b/packages/web-extension/src/inject/components/Highlight/index.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $highlight-opacity: 0.5;
 
 .#{$prefix}--highlight {
@@ -21,7 +23,7 @@ $highlight-opacity: 0.5;
 
       display: inline-block;
       margin: auto;
-      color: map-get(map-get($carbon--colors, 'magenta'), 10);
+      color: map.get(map.get($carbon--colors, 'magenta'), 10);
     }
   }
 

diff --git a/packages/web-extension/src/inject/components/Specs/Outline/index.scss b/packages/web-extension/src/inject/components/Specs/Outline/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 .#{$specs-prefix} {
   &.#{$specs-prefix}--outline body > *:not([class*='#{$prefix}--']) {
     &,

diff --git a/packages/web-extension/src/inject/components/Specs/Spacing/index.js b/packages/web-extension/src/inject/components/Specs/Spacing/index.js
@@ -227,18 +227,19 @@ function positionSpacer(
       spacer.style.maxHeight = setPx(maxHeight);
       spacer.style.width = setPx(value);
       break;
-    default:
+    default: //  top - offset container + top border
+      // left + left padding + left border
       // top
       spacer.style.top = setPx(
         boundingBox.top -
           offset +
           (ignoreBorders ? 0 : spacingStyles.top.border)
-      ); //  top - offset container + top border
+      );
       spacer.style.left = setPx(
         boundingBox.left +
           spacingStyles.left.padding +
           (ignoreBorders ? 0 : spacingStyles.left.border)
-      ); // left + left padding + left border
+      );
       spacer.style.height = setPx(value);
       spacer.style.width = setPx(value);
       spacer.style.minWidth = setPx(16);

diff --git a/packages/web-extension/src/inject/components/Specs/Spacing/index.scss b/packages/web-extension/src/inject/components/Specs/Spacing/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable a11y/media-prefers-reduced-motion */
 .#{$prefix}--spacers {
   pointer-events: all;
 

diff --git a/packages/web-extension/src/inject/components/Tooltip/index.scss b/packages/web-extension/src/inject/components/Tooltip/index.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @import 'carbon-components/scss/components/tooltip/tooltip';
 
 .#{$prefix}--tooltip {
@@ -108,7 +110,7 @@
 
     li#{&}__warning {
       @include carbon--type-style('helper-text-01');
-      $yellow: map-get(map-get($carbon--colors, 'yellow'), 30);
+      $yellow: map.get(map.get($carbon--colors, 'yellow'), 30);
 
       padding-left: carbon--mini-units(1);
       border-left: 3px solid $yellow;

diff --git a/packages/web-extension/src/inject/index.scss b/packages/web-extension/src/inject/index.scss
@@ -1,4 +1,5 @@
 /* stylelint-disable no-invalid-position-at-import-rule */
+@use 'sass:map';
 
 $prefix: 'bx-dev';
 $carbonPrefix: 'bx';
@@ -27,9 +28,9 @@ $feature-flags: (
 
 $transition-in: $duration--moderate-02 carbon--motion(standard, productive);
 $transition-fade: $duration--fast-02 carbon--motion(standard, productive);
-$grid-color: map-get(map-get($carbon--colors, 'blue'), 60);
-$inventory-color: map-get(map-get($carbon--colors, 'purple'), 50);
-$specs-color: map-get(map-get($carbon--colors, 'magenta'), 50);
+$grid-color: map.get(map.get($carbon--colors, 'blue'), 60);
+$inventory-color: map.get(map.get($carbon--colors, 'purple'), 50);
+$specs-color: map.get(map.get($carbon--colors, 'magenta'), 50);
 
 $themes: (
   'white': $carbon--theme--white,
@@ -63,7 +64,7 @@ $themes: (
   @each $theme in map-keys($themes) {
     .#{$prefix}--#{$theme} & {
       @include carbon--theme(
-        map-get($themes, $theme),
+        map.get($themes, $theme),
         $emit-custom-properties: true
       );
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ node_modules @@
     *.log
     dist
     .next
-    out
+    out
+    .DS_Store