feat: 移除 node-sass 使用

.eslintrc.js

@@ -47,6 +47,7 @@ module.exports = {
     'react/jsx-uses-vars': 1,
     'react/prop-types': 0,
     'react/no-find-dom-node': 0,
+    'react/no-unknown-property': 0,
     quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],
     semi: [2, 'never'],
     'simple-import-sort/imports': [2, {

package.json

@@ -99,7 +99,7 @@
     "@types/react-reconciler": "0.28.1",
     "@types/request": "^2.48.1",
     "@types/resolve": "1.19.0",
-    "@types/sass": "^1.16.1",
+    "@types/sass": "1.43.1",
     "@types/tapable": "^1",
     "@types/webpack": "^4.41.26",
     "@types/webpack-dev-server": "^3.11.3",
@@ -131,7 +131,6 @@
     "jest-environment-node": "^27.4.4",
     "lint-staged": "^13.0.2",
     "nervjs": "^1.4.6",
-    "node-sass": "6.0.1",
     "npm-run-all": "^4.1.2",
     "postcss": "^8.4.18",
     "postcss-scss": "^4.0.3",

packages/babel-plugin-transform-taroapi/__tests__/__snapshots__/index.spec.ts.snap

@@ -13,12 +13,10 @@ Taro.noop();"
 
 exports[`should not go wrong when using an api twice 1`] = `
 "import Taro, { createAnimation as _createAnimation } from '@tarojs/taro-h5';
-
 const animation = _createAnimation({
   duration: dura * 1000,
   timingFunction: 'linear'
 });
-
 const resetAnimation = _createAnimation({
   duration: 0,
   timingFunction: 'linear'
@@ -28,9 +26,7 @@ const resetAnimation = _createAnimation({
 exports[`should not import taro duplicatly 1`] = `
 "import Taro, { createAnimation as _createAnimation, initPxTransform as _initPxTransform } from "@tarojs/taro-h5";
 Taro.Component;
-
 _createAnimation();
-
 _initPxTransform();"
 `;
 
@@ -43,9 +39,7 @@ animation = _createAnimation({
   timingFunction: "ease",
   delay: 0
 });
-
 _request();
-
 Taro.request = '';
 Taro['request'] = '';"
 `;
@@ -63,16 +57,10 @@ export class Connected extends Taro.Component {}"
 
 exports[`should work! 1`] = `
 "import Taro, { setStorage as _setStorage, initPxTransform as _initPxTransform, getStorage as _getStorage } from '@tarojs/taro-h5';
-
 _initPxTransform(Taro.param);
-
 _initPxTransform();
-
 _initPxTransform();
-
 _getStorage();
-
 _setStorage();
-
 export { Taro };"
 `;

packages/taro-components-advanced/src/components/virtual-list/vue/index.ts

@@ -14,7 +14,7 @@ declare global {
   }
 }
 
-export const VirtualList = List as VueComponentType<VueVirtualListProps>
+export const VirtualList = List as unknown as VueComponentType<VueVirtualListProps>
 
 function install (Vue: App) {
   Vue.component('virtual-list', VirtualList)

packages/taro-components-library-react/src/react-component-lib/createOverlayComponent.tsx

@@ -142,6 +142,8 @@ export const createOverlayComponent = <OverlayComponent extends object, OverlayT
   }
 
   return React.forwardRef<OverlayType, Props>((props, ref) => {
+    // Note: 组件库错误引入 vue 的 ts 类型，导致 ts 报错，这里先忽略
+    // @ts-ignore
     return <Overlay {...props} forwardedRef={ref} />
   })
 }

packages/taro-components-rn/package.json

@@ -44,7 +44,7 @@
     "@react-native-camera-roll/camera-roll": "~5.0.4",
     "@react-native-community/segmented-control": "^2.2.2",
     "@testing-library/jest-native": "^4.0.4",
-    "@testing-library/react-native": "^11.0.0",
+    "@testing-library/react-native": "^11.5.0",
     "@types/react-native": "^0.69.8",
     "expo": "~47.0.3",
     "jest": "^26.4.2",

packages/taro-components-rn/src/__tests__/button.spec.tsx

@@ -4,12 +4,12 @@ import Button from '../components/Button'
 
 describe('<Button />', () => {
   it('render default', () => {
-    const { getByTestId, getAllByText, getAllByA11yState } = render(<Button>BUTTON</Button>)
+    const { getByTestId, getAllByText, getByRole } = render(<Button>BUTTON</Button>)
     expect(getAllByText('BUTTON')).toHaveLength(1)
     expect(() => getByTestId('loading')).toThrow(
       'Unable to find an element with testID: loading'
     )
-    expect(getAllByA11yState({ disabled: false })).toHaveLength(1)
+    expect(getByRole('button', { disabled: false })).toBeTruthy()
   })
 
   it('render loading button', () => {
@@ -34,9 +34,9 @@ describe('<Button />', () => {
   })
 
   it('mini size', () => {
-    const { getByText, getByA11yState } = render(<Button size="mini">BUTTON</Button>)
+    const { getByText, getByRole } = render(<Button size="mini">BUTTON</Button>)
     const text = getByText('BUTTON')
-    const view = getByA11yState({ disabled: false })
+    const view = getByRole('button', { disabled: false })
     expect(view).toContainElement(text)
     expect(view).toHaveStyle({
       height: 30

packages/taro-components-rn/src/components/Button/index.tsx

@@ -203,6 +203,7 @@ class _Button extends React.Component<ButtonProps, ButtonState> {
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}
         ref={this.$touchable}
+        accessibilityRole="button"
         disabled={disabled}
       >
         <View

packages/taro-h5/jest.config.js

@@ -20,7 +20,9 @@ module.exports = {
     '@tarojs/plugin-framework-react/dist/runtime': '<rootDir>/__mocks__/taro-framework',
     '@tarojs/plugin-framework-vue2/dist/runtime': '<rootDir>/__mocks__/taro-framework',
     '@tarojs/plugin-framework-vue3/dist/runtime': '<rootDir>/__mocks__/taro-framework',
-    '(\\.(css|less|sass|scss))|weui': '<rootDir>/__mocks__/styleMock.js',
+    '(^.+\\.(css|sass|scss|less|styl|stylus|pcss|postcss)$)|weui': ['jest-transform-css', {
+      module: true
+    }],
     '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js'
   },
   preset: 'ts-jest',

packages/taro-h5/package.json

@@ -57,9 +57,11 @@
     "jest-environment-jsdom": "^29.5.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-mock-console": "^1.0.0",
+    "jest-transform-css": "^6.0.1",
     "jsdom": "^21.1.0",
     "lodash": "^4.17.21",
     "mock-socket": "^7.1.0",
+    "postcss": "^8.4.18",
     "react": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "rollup": "^2.79.0",

packages/taro-h5/src/api/framework/index.ts

@@ -1,7 +1,7 @@
 import Taro from '@tarojs/api'
 
-export const getApp: typeof Taro.getApp = function <T = TaroGeneral.IAnyObject> () {
-  return Taro.getCurrentInstance().app as unknown as Taro.getApp.Instance<T>
+export const getApp: typeof Taro.getApp = function <T extends Taro.App = TaroGeneral.IAnyObject> () {
+  return Taro.getCurrentInstance().app as unknown as T
 }
 
 export { getCurrentPages } from '@tarojs/router'

packages/taro-h5/src/api/wxml/MediaQueryObserver.ts

@@ -41,6 +41,7 @@ export class MediaQueryObserver implements Taro.MediaQueryObserver {
       if ('addEventListener' in this._mediaQueryObserver) {
         this._mediaQueryObserver.addEventListener('change', this._listener)
       } else {
+        // @ts-ignore
         this._mediaQueryObserver.addListener(this._listener)
       }
     }
@@ -53,6 +54,7 @@ export class MediaQueryObserver implements Taro.MediaQueryObserver {
       if ('removeEventListener' in this._mediaQueryObserver) {
         this._mediaQueryObserver.removeEventListener('change', this._listener)
       } else {
+        // @ts-ignore
         this._mediaQueryObserver.removeListener(this._listener)
       }
     }

packages/taro-mini-runner/jest.config.js

@@ -7,6 +7,9 @@ module.exports = {
   testMatch: ['**/__tests__/?(*.)+(spec|test).[jt]s?(x)'],
   testTimeout: 60000,
   transform: {
+    '^.+\\.(css|sass|scss|less|styl|stylus|pcss|postcss)$': ['jest-transform-css', {
+      module: true
+    }],
     '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.tsx?$': ['ts-jest', {
       diagnostics: false,

packages/taro-mini-runner/package.json

@@ -96,6 +96,7 @@
     "babel-jest": "^29.5.0",
     "jest": "^29.3.1",
     "jest-cli": "^29.3.1",
+    "jest-transform-css": "^6.0.1",
     "jest-environment-node": "^29.5.0",
     "memfs": "^3.1.2",
     "memory-fs": "^0.5.0",