test: add unit testing

oasis-cloud · oasis-cloud · commit 98ff20145246 · 2024-10-29T16:17:43.000+08:00
diff --git a/packages/nutui-optimize-css/package.json b/packages/nutui-optimize-css/package.json
@@ -5,7 +5,7 @@
   "main": "dist/index.cjs",
   "scripts": {
     "build": "unbuild",
-    "test": "pnpm build && node test/case.js"
+    "test": "pnpm build && vitest"
   },
   "keywords": [],
   "author": "",
@@ -15,7 +15,8 @@
     "@types/node": "^20.14.11",
     "@types/postcss-css-variables": "^0.18.3",
     "ts-node": "^10.9.2",
-    "unbuild": "^2.0.0"
+    "unbuild": "^2.0.0",
+    "vitest": "^1.5.0"
   },
   "dependencies": {
     "lodash": "^4.17.21",
diff --git a/packages/nutui-optimize-css/src/postcss-plugins/index.ts b/packages/nutui-optimize-css/src/postcss-plugins/index.ts
@@ -1,4 +1,4 @@
-import postcss from 'postcss'
+import postcss, { ProcessOptions, Root, Document } from 'postcss'
 import { merge } from 'lodash'
 import cssVariables from 'postcss-css-variables'
 import { parse } from 'postcss-scss'
@@ -39,15 +39,22 @@ async function replaceCssVariables(
   exclude: string[] = []
 ) {
   cssVariablesContent.push(root.toResult().css)
-  const replacedCss = await postcss([
+  const options: ProcessOptions<Document | Root> = {
+    parser: parse,
+    from: undefined,
+  } as ProcessOptions<Root>
+  const replacedCss = postcss([
     cssVariables({
       preserve: (declaration) => {
-        if (exclude.includes(declaration.prop)) return true
+        if (exclude.includes(declaration.prop)) {
+          return true
+        }
+        const cssvars = declaration.value.match(/var\((--nutui-[\w\d-]+)\)/)
+        if (cssvars && exclude.includes(cssvars[1])) return true
         return false
       },
     }),
-  ]).process(cssVariablesContent.join('\n'), { parser: parse, from: undefined })
-    .css
+  ]).process(cssVariablesContent.join('\n'), options).css
 
   const replacedRoot = postcss.parse(replacedCss)
   root.raws = replacedRoot.raws
diff --git a/packages/nutui-optimize-css/test/__snapshots__/remove-rtl.test.ts.snap b/packages/nutui-optimize-css/test/__snapshots__/remove-rtl.test.ts.snap
@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`@nutui/optimize-css > remove rtl 1`] = `
+"
+"
+`;
diff --git a/packages/nutui-optimize-css/test/__snapshots__/replace-css-var.test.ts.snap b/packages/nutui-optimize-css/test/__snapshots__/replace-css-var.test.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`@nutui/optimize-css > optimize css 1`] = `
+":root {
+  --nutui-color-primary-text: blue;
+}
+
+
+.nut-address-footer-btn {
+  background: linear-gradient(135deg, yellow 0%, #fa2c19 100%);
+  color: blue;
+  color: var(--nutui-color-primary-text)
+}
+"
+`;
diff --git a/packages/nutui-optimize-css/test/case.js b/packages/nutui-optimize-css/test/case.js
diff --git a/packages/nutui-optimize-css/test/remove-rtl.test.ts b/packages/nutui-optimize-css/test/remove-rtl.test.ts
@@ -0,0 +1,26 @@
+import postcss from 'postcss'
+import { describe, expect, it } from 'vitest'
+import optimizeCss from '../dist/index.cjs'
+
+const css = `
+[dir=rtl] .ca, .xcdd {
+  margin-left: 0;
+  margin-right: 9px
+}
+[dir=rtl] .nut-address-exist-item-info, .nut-rtl .nut-address-exist-item-info {
+  margin-left: 0;
+  margin-right: 9px
+}
+`
+describe('@nutui/optimize-css', () => {
+  it('remove rtl', async () => {
+    const a = await postcss([
+      optimizeCss({
+        removeRtl: true,
+      }),
+    ]).process(css, { from: undefined })
+    const optimizedCsss = a.css.toString()
+    // @ts-ignore
+    expect(optimizedCsss).toMatchSnapshot()
+  })
+})
diff --git a/packages/nutui-optimize-css/test/replace-css-var.test.ts b/packages/nutui-optimize-css/test/replace-css-var.test.ts
@@ -0,0 +1,28 @@
+import postcss from 'postcss'
+import path from 'path'
+import { describe, expect, it } from 'vitest'
+import optimizeCss from '../dist/index.cjs'
+
+const css = `
+.nut-address-footer-btn {
+  background: linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d6d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%);
+  color: var(--nutui-color-primary-text)
+}
+`
+describe('@nutui/optimize-css', () => {
+  it('optimize css', async () => {
+    const a = await postcss([
+      optimizeCss({
+        cssVariables: {
+          include: [path.join(__dirname, 'variables.scss')],
+          exclude: ['--nutui-color-primary-text'],
+          type: 'replace',
+        },
+      }),
+    ]).process(css, { from: undefined })
+    const optimizedCsss = a.css.toString()
+    console.log(optimizedCsss)
+    // @ts-ignore
+    expect(optimizedCsss).toMatchSnapshot()
+  })
+})
diff --git a/packages/nutui-optimize-css/tsconfig.json b/packages/nutui-optimize-css/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "target": "ES2015",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "ESNext",
+    "sourceMap": true,
+    "declaration": true,
+    "declarationDir": "types",
+    "isolatedModules": false,
+    "types": ["node"]
+  },
+  "include": [
+    "./src"
+  ]
+}
diff --git a/packages/nutui-optimize-css/vitest.config.ts b/packages/nutui-optimize-css/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    // ... Specify options here.
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
++
 +exports[`@nutui/optimize-css > remove rtl 1`] = `
 +"
 +"
 +`;