From 393abd0e07c106847e4c603f89f5aec86c1a0c98 Mon Sep 17 00:00:00 2001 From: serifcolakel Date: Fri, 29 Mar 2024 23:53:48 +0300 Subject: [PATCH] Add Tailwind CSS configuration to info and container apps --- apps/container/postcss.config.js | 16 +++ apps/container/project.json | 3 +- .../src/components/social-links/index.tsx | 8 +- apps/container/src/pages/home/index.tsx | 24 ++-- apps/container/src/styles.css | 3 + apps/container/tailwind.config.js | 20 ++++ apps/info/postcss.config.js | 16 +++ apps/info/project.json | 3 +- apps/info/src/app/app.tsx | 12 +- apps/info/src/styles.css | 3 + apps/info/tailwind.config.js | 18 +++ package.json | 3 + pnpm-lock.yaml | 105 +++++++++++++----- tailwind.base.config.js | 37 ++++++ 14 files changed, 225 insertions(+), 46 deletions(-) create mode 100644 apps/container/postcss.config.js create mode 100644 apps/container/tailwind.config.js create mode 100644 apps/info/postcss.config.js create mode 100644 apps/info/tailwind.config.js create mode 100644 tailwind.base.config.js diff --git a/apps/container/postcss.config.js b/apps/container/postcss.config.js new file mode 100644 index 0000000..afa4de7 --- /dev/null +++ b/apps/container/postcss.config.js @@ -0,0 +1,16 @@ +/* eslint-disable @typescript-eslint/unbound-method */ +const { join } = require('path'); + +// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build +// option from your application's configuration (i.e. project.json). +// +// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries + +module.exports = { + plugins: { + tailwindcss: { + config: join(__dirname, 'tailwind.config.js'), + }, + autoprefixer: {}, + }, +}; diff --git a/apps/container/project.json b/apps/container/project.json index d045e54..8e4c082 100644 --- a/apps/container/project.json +++ b/apps/container/project.json @@ -22,7 +22,8 @@ "styles": ["apps/container/src/styles.css"], "scripts": [], "isolatedConfig": true, - "webpackConfig": "apps/container/webpack.config.ts" + "webpackConfig": "apps/container/webpack.config.ts", + "postcssConfig": "apps/container/postcss.config.js" }, "configurations": { "development": { diff --git a/apps/container/src/components/social-links/index.tsx b/apps/container/src/components/social-links/index.tsx index 6e4b01f..9c206c0 100644 --- a/apps/container/src/components/social-links/index.tsx +++ b/apps/container/src/components/social-links/index.tsx @@ -1,23 +1,23 @@ const socialLinks = [ { - name: 'LinkedIn', + name: '🔗 LinkedIn', url: 'https://www.linkedin.com/in/serifcolakel/', }, { - name: 'Twitter', + name: '🔗 Twitter', url: 'https://twitter.com/ColakelSerif', }, ]; export default function SocialLinks() { return ( -
+
{socialLinks.map(({ name, url }) => ( {name} diff --git a/apps/container/src/pages/home/index.tsx b/apps/container/src/pages/home/index.tsx index f59c0a4..6fcae61 100644 --- a/apps/container/src/pages/home/index.tsx +++ b/apps/container/src/pages/home/index.tsx @@ -2,19 +2,17 @@ import SocialLinks from '../../components/social-links'; export default function HomePage() { return ( -
-

Welcome to the Container!

-

This is the container app that consumes the remote app info.

-

It was created with the Nx plugin for Webpack 5.

+
+

🌍

+

+ Welcome to the Container! +

+

+ This is the container app that consumes the remote app info. +

+

+ It was created with the Nx plugin for Webpack 5. +

); diff --git a/apps/container/src/styles.css b/apps/container/src/styles.css index 90d4ee0..844323d 100644 --- a/apps/container/src/styles.css +++ b/apps/container/src/styles.css @@ -1 +1,4 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; /* You can add global styles to this file, and also import other style files */ diff --git a/apps/container/tailwind.config.js b/apps/container/tailwind.config.js new file mode 100644 index 0000000..9e8e01f --- /dev/null +++ b/apps/container/tailwind.config.js @@ -0,0 +1,20 @@ +/* eslint-disable @typescript-eslint/unbound-method */ +/* eslint-disable @typescript-eslint/no-var-requires */ +const { createGlobPatternsForDependencies } = require('@nx/react/tailwind'); +const { join } = require('path'); +const baseConfig = require('../../tailwind.base.config'); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + ...(baseConfig?.content || []), + join( + __dirname, + '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}' + ), + ...createGlobPatternsForDependencies(__dirname), + // INFO : Add the following line to include the tailwind styles from the info + ...createGlobPatternsForDependencies(join(__dirname, 'apps/info')), + ], + ...baseConfig, +}; diff --git a/apps/info/postcss.config.js b/apps/info/postcss.config.js new file mode 100644 index 0000000..afa4de7 --- /dev/null +++ b/apps/info/postcss.config.js @@ -0,0 +1,16 @@ +/* eslint-disable @typescript-eslint/unbound-method */ +const { join } = require('path'); + +// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build +// option from your application's configuration (i.e. project.json). +// +// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries + +module.exports = { + plugins: { + tailwindcss: { + config: join(__dirname, 'tailwind.config.js'), + }, + autoprefixer: {}, + }, +}; diff --git a/apps/info/project.json b/apps/info/project.json index 78d4437..a48a235 100644 --- a/apps/info/project.json +++ b/apps/info/project.json @@ -19,7 +19,8 @@ "styles": ["apps/info/src/styles.css"], "scripts": [], "isolatedConfig": true, - "webpackConfig": "apps/info/webpack.config.ts" + "webpackConfig": "apps/info/webpack.config.ts", + "postcssConfig": "apps/info/postcss.config.js" }, "configurations": { "development": { diff --git a/apps/info/src/app/app.tsx b/apps/info/src/app/app.tsx index 731d04b..11512d4 100644 --- a/apps/info/src/app/app.tsx +++ b/apps/info/src/app/app.tsx @@ -1,9 +1,17 @@ export function App() { return ( -
+

Welcome to info!

This is a remote app that is part of the Nx plugin for Webpack 5.

-
+
+

+

Info

+

+

+ This app is a remote app that is part of the Nx plugin for Webpack 5. +

+
+ ); } diff --git a/apps/info/src/styles.css b/apps/info/src/styles.css index 90d4ee0..844323d 100644 --- a/apps/info/src/styles.css +++ b/apps/info/src/styles.css @@ -1 +1,4 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; /* You can add global styles to this file, and also import other style files */ diff --git a/apps/info/tailwind.config.js b/apps/info/tailwind.config.js new file mode 100644 index 0000000..4305e6e --- /dev/null +++ b/apps/info/tailwind.config.js @@ -0,0 +1,18 @@ +/* eslint-disable @typescript-eslint/unbound-method */ +/* eslint-disable @typescript-eslint/no-var-requires */ +const { createGlobPatternsForDependencies } = require('@nx/react/tailwind'); +const { join } = require('path'); +const baseConfig = require('../../tailwind.base.config'); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + ...(baseConfig?.content || []), + join( + __dirname, + '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}' + ), + ...createGlobPatternsForDependencies(__dirname), + ], + ...baseConfig, +}; diff --git a/package.json b/package.json index 31854ef..652ef32 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@swc/cli": "~0.1.62", "@swc/core": "~1.3.85", "@swc/helpers": "~0.5.2", + "@tailwindcss/forms": "^0.5.7", "@testing-library/react": "14.0.0", "@types/jest": "^29.4.0", "@types/node": "18.14.2", @@ -49,6 +50,7 @@ "@vitejs/plugin-react": "~4.0.0", "@vitest/coverage-c8": "~0.32.0", "@vitest/ui": "~0.32.0", + "autoprefixer": "10.4.13", "babel-jest": "^29.4.1", "cypress": "^13.0.0", "eslint": "~8.46.0", @@ -69,6 +71,7 @@ "jsdom": "~22.1.0", "netlify-cli": "^16.6.1", "nx": "17.0.1", + "postcss": "8.4.21", "prettier": "^2.6.2", "react-refresh": "^0.10.0", "tailwindcss": "3.2.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 37635cd..8c82540 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: react: specifier: 18.2.0 @@ -78,6 +82,9 @@ devDependencies: '@swc/helpers': specifier: ~0.5.2 version: 0.5.2 + '@tailwindcss/forms': + specifier: ^0.5.7 + version: 0.5.7(tailwindcss@3.2.7) '@testing-library/react': specifier: 14.0.0 version: 14.0.0(react-dom@18.2.0)(react@18.2.0) @@ -108,6 +115,9 @@ devDependencies: '@vitest/ui': specifier: ~0.32.0 version: 0.32.0(vitest@0.32.0) + autoprefixer: + specifier: 10.4.13 + version: 10.4.13(postcss@8.4.21) babel-jest: specifier: ^29.4.1 version: 29.4.1(@babel/core@7.14.5) @@ -168,6 +178,9 @@ devDependencies: nx: specifier: 17.0.1 version: 17.0.1(@swc-node/register@1.6.7)(@swc/core@1.3.85) + postcss: + specifier: 8.4.21 + version: 8.4.21 prettier: specifier: ^2.6.2 version: 2.6.2 @@ -176,7 +189,7 @@ devDependencies: version: 0.10.0 tailwindcss: specifier: 3.2.7 - version: 3.2.7(postcss@8.4.38)(ts-node@10.9.1) + version: 3.2.7(postcss@8.4.21)(ts-node@10.9.1) ts-jest: specifier: ^29.1.0 version: 29.1.0(@babel/core@7.14.5)(babel-jest@29.4.1)(jest@29.4.1)(typescript@5.1.3) @@ -4332,7 +4345,7 @@ packages: '@nrwl/webpack': 17.0.1(@swc-node/register@1.6.7)(@swc/core@1.3.85)(@types/node@18.14.2)(nx@17.0.1)(typescript@5.1.3) '@nx/devkit': 17.0.1(nx@17.0.1) '@nx/js': 17.0.1(@swc-node/register@1.6.7)(@swc/core@1.3.85)(@types/node@18.14.2)(nx@17.0.1)(typescript@5.1.3) - autoprefixer: 10.4.19(postcss@8.4.38) + autoprefixer: 10.4.13(postcss@8.4.21) babel-loader: 9.1.3(@babel/core@7.24.3)(webpack@5.91.0) browserslist: 4.23.0 chalk: 4.1.2 @@ -4346,9 +4359,9 @@ packages: loader-utils: 2.0.4 mini-css-extract-plugin: 2.4.7(webpack@5.91.0) parse5: 4.0.0 - postcss: 8.4.38 - postcss-import: 14.1.0(postcss@8.4.38) - postcss-loader: 6.2.1(postcss@8.4.38)(webpack@5.91.0) + postcss: 8.4.21 + postcss-import: 14.1.0(postcss@8.4.21) + postcss-loader: 6.2.1(postcss@8.4.21)(webpack@5.91.0) rxjs: 7.8.1 sass: 1.72.0 sass-loader: 12.6.0(sass@1.72.0)(webpack@5.91.0) @@ -5719,6 +5732,15 @@ packages: defer-to-connect: 2.0.1 dev: true + /@tailwindcss/forms@0.5.7(tailwindcss@3.2.7): + resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==} + peerDependencies: + tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1' + dependencies: + mini-svg-data-uri: 1.4.4 + tailwindcss: 3.2.7(postcss@8.4.21)(ts-node@10.9.1) + dev: true + /@testing-library/dom@9.3.4: resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==} engines: {node: '>=14'} @@ -7216,8 +7238,8 @@ packages: engines: {node: '>=8.0.0'} dev: true - /autoprefixer@10.4.19(postcss@8.4.38): - resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} + /autoprefixer@10.4.13(postcss@8.4.21): + resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==} engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: @@ -7228,7 +7250,7 @@ packages: fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 - postcss: 8.4.38 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true @@ -10495,6 +10517,20 @@ packages: - supports-color dev: true + /extract-zip@2.0.1: + resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==} + engines: {node: '>= 10.17.0'} + hasBin: true + dependencies: + debug: 4.3.4(supports-color@9.4.0) + get-stream: 5.2.0 + yauzl: 2.10.0 + optionalDependencies: + '@types/yauzl': 2.10.3 + transitivePeerDependencies: + - supports-color + dev: true + /extract-zip@2.0.1(supports-color@8.1.1): resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==} engines: {node: '>= 10.17.0'} @@ -13966,6 +14002,11 @@ packages: webpack: 5.91.0(@swc/core@1.3.85) dev: true + /mini-svg-data-uri@1.4.4: + resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==} + hasBin: true + dev: true + /minimalistic-assert@1.0.1: resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==} dev: true @@ -14136,6 +14177,7 @@ packages: /nan@2.19.0: resolution: {integrity: sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==} + requiresBuild: true dev: true optional: true @@ -14241,7 +14283,7 @@ packages: execa: 5.1.1 express: 4.18.2 express-logging: 1.1.1 - extract-zip: 2.0.1(supports-color@8.1.1) + extract-zip: 2.0.1 fastest-levenshtein: 1.0.16 fastify: 4.17.0 find-up: 6.3.0 @@ -15193,6 +15235,7 @@ packages: /pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} engines: {node: '>=6'} + requiresBuild: true dev: true optional: true @@ -15349,29 +15392,29 @@ packages: postcss: 8.4.38 dev: true - /postcss-import@14.1.0(postcss@8.4.38): + /postcss-import@14.1.0(postcss@8.4.21): resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} engines: {node: '>=10.0.0'} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.38 + postcss: 8.4.21 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 dev: true - /postcss-js@4.0.1(postcss@8.4.38): + /postcss-js@4.0.1(postcss@8.4.21): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.38 + postcss: 8.4.21 dev: true - /postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.1): + /postcss-load-config@3.1.4(postcss@8.4.21)(ts-node@10.9.1): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: @@ -15384,12 +15427,12 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.38 + postcss: 8.4.21 ts-node: 10.9.1(@swc/core@1.3.85)(@types/node@18.14.2)(typescript@5.1.3) yaml: 1.10.2 dev: true - /postcss-loader@6.2.1(postcss@8.4.38)(webpack@5.91.0): + /postcss-loader@6.2.1(postcss@8.4.21)(webpack@5.91.0): resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -15398,7 +15441,7 @@ packages: dependencies: cosmiconfig: 7.1.0 klona: 2.0.6 - postcss: 8.4.38 + postcss: 8.4.21 semver: 7.6.0 webpack: 5.91.0(@swc/core@1.3.85) dev: true @@ -15512,13 +15555,13 @@ packages: postcss: 8.4.38 dev: true - /postcss-nested@6.0.0(postcss@8.4.38): + /postcss-nested@6.0.0(postcss@8.4.21): resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.38 + postcss: 8.4.21 postcss-selector-parser: 6.0.16 dev: true @@ -15689,6 +15732,15 @@ packages: quote-unquote: 1.0.0 dev: true + /postcss@8.4.21: + resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.7 + picocolors: 1.0.0 + source-map-js: 1.2.0 + dev: true + /postcss@8.4.38: resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} @@ -15864,6 +15916,7 @@ packages: /prr@1.0.1: resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} + requiresBuild: true dev: true optional: true @@ -16535,6 +16588,7 @@ packages: /sax@1.3.0: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} + requiresBuild: true dev: true optional: true @@ -16618,6 +16672,7 @@ packages: /semver@5.7.2: resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==} hasBin: true + requiresBuild: true dev: true optional: true @@ -17490,7 +17545,7 @@ packages: - supports-color dev: true - /tailwindcss@3.2.7(postcss@8.4.38)(ts-node@10.9.1): + /tailwindcss@3.2.7(postcss@8.4.21)(ts-node@10.9.1): resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==} engines: {node: '>=12.13.0'} hasBin: true @@ -17511,11 +17566,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.38 - postcss-import: 14.1.0(postcss@8.4.38) - postcss-js: 4.0.1(postcss@8.4.38) - postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.1) - postcss-nested: 6.0.0(postcss@8.4.38) + postcss: 8.4.21 + postcss-import: 14.1.0(postcss@8.4.21) + postcss-js: 4.0.1(postcss@8.4.21) + postcss-load-config: 3.1.4(postcss@8.4.21)(ts-node@10.9.1) + postcss-nested: 6.0.0(postcss@8.4.21) postcss-selector-parser: 6.0.16 postcss-value-parser: 4.2.0 quick-lru: 5.1.1 diff --git a/tailwind.base.config.js b/tailwind.base.config.js new file mode 100644 index 0000000..190f15d --- /dev/null +++ b/tailwind.base.config.js @@ -0,0 +1,37 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + './apps/**/*.{js,ts,jsx,tsx}', + './packages/**/*.{js,ts,jsx,tsx}', + './{src,pages,components,app}/**/*.{ts,tsx,html}', + ], + theme: { + extend: { + colors: { + primary: { + DEFAULT: '#3366ff', + 50: '#f0f4ff', + 100: '#f0f4ff', + 200: '#d9e2ff', + 300: '#a6c1ff', + 400: '#598bff', + 500: '#3366ff', + 600: '#274bdb', + 700: '#1a34b8', + 800: '#102694', + 900: '#091c7a', + }, + }, + animation: { + wiggle: 'wiggle 1s ease-in-out infinite', + }, + keyframes: { + wiggle: { + '0%, 100%': { transform: 'rotate(-3deg)' }, + '50%': { transform: 'rotate(3deg)' }, + }, + }, + }, + }, + plugins: [require('@tailwindcss/forms')], +};