From b23c3573f58ebc838ba984a877e3a978d0bddfdc Mon Sep 17 00:00:00 2001 From: Arthur Green Date: Thu, 26 Oct 2023 23:16:32 +0400 Subject: [PATCH] build: use Lightning CSS (#271) --- package.json | 1 + pnpm-lock.yaml | 140 +++++++++++++++++++++++++++++++++++++++++++------ vite.config.ts | 3 ++ 3 files changed, 128 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index b6ca9cf5..8a269275 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-storybook": "^0.6.12", + "lightningcss": "^1.22.0", "msw": "^1.2.2", "postcss": "^8.4.18", "postcss-nesting": "12.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 818fc5a5..95e16cf3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -118,6 +118,9 @@ devDependencies: eslint-plugin-storybook: specifier: ^0.6.12 version: 0.6.12(eslint@8.47.0)(typescript@5.1.3) + lightningcss: + specifier: ^1.22.0 + version: 1.22.0 msw: specifier: ^1.2.2 version: 1.2.2(typescript@5.1.3) @@ -144,13 +147,13 @@ devDependencies: version: 5.1.3 vite: specifier: ^4.4.9 - version: 4.4.9(@types/node@18.11.9)(less@4.2.0) + version: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) vite-plugin-pwa: specifier: ^0.16.4 version: 0.16.4(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitest: specifier: ^0.34.2 - version: 0.34.2(less@4.2.0) + version: 0.34.2(less@4.2.0)(lightningcss@1.22.0) packages: @@ -2579,7 +2582,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.1.3) typescript: 5.1.3 - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) dev: true /@jridgewell/gen-mapping@0.1.1: @@ -3255,7 +3258,7 @@ packages: remark-slug: 6.1.0 rollup: 3.26.3 typescript: 5.1.3 - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) transitivePeerDependencies: - encoding - supports-color @@ -3668,7 +3671,7 @@ packages: react: 18.2.0 react-docgen: 6.0.0-alpha.3 react-dom: 18.2.0(react@18.2.0) - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -4419,7 +4422,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.5) magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) transitivePeerDependencies: - supports-color dev: true @@ -4435,7 +4438,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.0) '@types/babel__core': 7.20.2 react-refresh: 0.14.0 - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) transitivePeerDependencies: - supports-color dev: true @@ -6201,6 +6204,12 @@ packages: engines: {node: '>=8'} dev: true + /detect-libc@1.0.3: + resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} + engines: {node: '>=0.10'} + hasBin: true + dev: true + /detect-newline@3.1.0: resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==} engines: {node: '>=8'} @@ -8441,7 +8450,7 @@ packages: dependencies: universalify: 2.0.0 optionalDependencies: - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 dev: true /jsonparse@1.3.1: @@ -8543,6 +8552,104 @@ packages: type-check: 0.4.0 dev: true + /lightningcss-darwin-arm64@1.22.0: + resolution: {integrity: sha512-aH2be3nNny+It5YEVm8tBSSdRlBVWQV8m2oJ7dESiYRzyY/E/bQUe2xlw5caaMuhlM9aoTMtOH25yzMhir0qPg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /lightningcss-darwin-x64@1.22.0: + resolution: {integrity: sha512-9KHRFA0Y6mNxRHeoQMp0YaI0R0O2kOgUlYPRjuasU4d+pI8NRhVn9bt0yX9VPs5ibWX1RbDViSPtGJvYYrfVAQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /lightningcss-freebsd-x64@1.22.0: + resolution: {integrity: sha512-xaYL3xperGwD85rQioDb52ozF3NAJb+9wrge3jD9lxGffplu0Mn35rXMptB8Uc2N9Mw1i3Bvl7+z1evlqVl7ww==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm-gnueabihf@1.22.0: + resolution: {integrity: sha512-epQGvXIjOuxrZpMpMnRjK54ZqzhiHhCPLtHvw2fb6NeK2kK9YtF0wqmeTBiQ1AkbWfnnXGTstYaFNiadNK+StQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm64-gnu@1.22.0: + resolution: {integrity: sha512-AArGtKSY4DGTA8xP8SDyNyKtpsUl1Rzq6FW4JomeyUQ4nBrR71uPChksTpj3gmWuGhZeRKLeCUI1DBid/zhChg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm64-musl@1.22.0: + resolution: {integrity: sha512-RRraNgP8hnBPhInTTUdlFm+z16C/ghbxBG51Sw00hd7HUyKmEUKRozyc5od+/N6pOrX/bIh5vIbtMXIxsos0lg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-x64-gnu@1.22.0: + resolution: {integrity: sha512-grdrhYGRi2KrR+bsXJVI0myRADqyA7ekprGxiuK5QRNkv7kj3Yq1fERDNyzZvjisHwKUi29sYMClscbtl+/Zpw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-x64-musl@1.22.0: + resolution: {integrity: sha512-t5f90X+iQUtIyR56oXIHMBUyQFX/zwmPt72E6Dane3P8KNGlkijTg2I75XVQS860gNoEFzV7Mm5ArRRA7u5CAQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-win32-x64-msvc@1.22.0: + resolution: {integrity: sha512-64HTDtOOZE9PUCZJiZZQpyqXBbdby1lnztBccnqh+NtbKxjnGzP92R2ngcgeuqMPecMNqNWxgoWgTGpC+yN5Sw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /lightningcss@1.22.0: + resolution: {integrity: sha512-+z0qvwRVzs4XGRXelnWRNwqsXUx8k3bSkbP8vD42kYKSk3z9OM2P3e/gagT7ei/gwh8DTS80LZOFZV6lm8Z8Fg==} + engines: {node: '>= 12.0.0'} + dependencies: + detect-libc: 1.0.3 + optionalDependencies: + lightningcss-darwin-arm64: 1.22.0 + lightningcss-darwin-x64: 1.22.0 + lightningcss-freebsd-x64: 1.22.0 + lightningcss-linux-arm-gnueabihf: 1.22.0 + lightningcss-linux-arm64-gnu: 1.22.0 + lightningcss-linux-arm64-musl: 1.22.0 + lightningcss-linux-x64-gnu: 1.22.0 + lightningcss-linux-x64-musl: 1.22.0 + lightningcss-win32-x64-msvc: 1.22.0 + dev: true + /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} @@ -8554,7 +8661,7 @@ packages: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} dependencies: - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 parse-json: 4.0.0 pify: 3.0.0 strip-bom: 3.0.0 @@ -11836,7 +11943,7 @@ packages: engines: {node: '>= 0.8'} dev: true - /vite-node@0.34.2(@types/node@18.11.9)(less@4.2.0): + /vite-node@0.34.2(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0): resolution: {integrity: sha512-JtW249Zm3FB+F7pQfH56uWSdlltCo1IOkZW5oHBzeQo0iX4jtC7o1t9aILMGd9kVekXBP2lfJBEQt9rBh07ebA==} engines: {node: '>=v14.18.0'} hasBin: true @@ -11846,7 +11953,7 @@ packages: mlly: 1.4.0 pathe: 1.1.1 picocolors: 1.0.0 - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) transitivePeerDependencies: - '@types/node' - less @@ -11869,14 +11976,14 @@ packages: debug: 4.3.4 fast-glob: 3.2.12 pretty-bytes: 6.0.0 - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) workbox-build: 7.0.0 workbox-window: 7.0.0 transitivePeerDependencies: - supports-color dev: true - /vite@4.4.9(@types/node@18.11.9)(less@4.2.0): + /vite@4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0): resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -11907,13 +12014,14 @@ packages: '@types/node': 18.11.9 esbuild: 0.18.16 less: 4.2.0 + lightningcss: 1.22.0 postcss: 8.4.27 rollup: 3.29.3 optionalDependencies: fsevents: 2.3.3 dev: true - /vitest@0.34.2(less@4.2.0): + /vitest@0.34.2(less@4.2.0)(lightningcss@1.22.0): resolution: {integrity: sha512-WgaIvBbjsSYMq/oiMlXUI7KflELmzM43BEvkdC/8b5CAod4ryAiY2z8uR6Crbi5Pjnu5oOmhKa9sy7uk6paBxQ==} engines: {node: '>=v14.18.0'} hasBin: true @@ -11965,8 +12073,8 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.0 tinypool: 0.7.0 - vite: 4.4.9(@types/node@18.11.9)(less@4.2.0) - vite-node: 0.34.2(@types/node@18.11.9)(less@4.2.0) + vite: 4.4.9(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) + vite-node: 0.34.2(@types/node@18.11.9)(less@4.2.0)(lightningcss@1.22.0) why-is-node-running: 2.2.2 transitivePeerDependencies: - less diff --git a/vite.config.ts b/vite.config.ts index 7bac8924..427f28ef 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -26,6 +26,9 @@ export default defineConfig({ server: { open: true, }, + css: { + transformer: 'lightningcss', + }, resolve: { alias: [ {