feat: typescript 확장프로그램 충돌 styled-components/vscode-styled-components…

…#426 이슈 미해결

.npmrc

@@ -1 +1,2 @@
-@yourscope:registry=https://registry.npmjs.org/
+registry=https://registry.npmjs.org/
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

.prettierignore

@@ -0,0 +1 @@
+**.yml

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
+    "dbaeumer.vscode-eslint",
   ]
 }

.vscode/settings.json

@@ -3,7 +3,7 @@
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-  "eslint.nodePath": ".yarn/sdks",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "eslint.nodePath": ".yarn/sdks"
 }

.yarn/sdks/eslint/lib/unsupported-api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);

.yarn/sdks/eslint/package.json

@@ -1,6 +1,14 @@
 {
   "name": "eslint",
-  "version": "8.47.0-sdk",
+  "version": "8.54.0-sdk",
   "main": "./lib/api.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/api.js",
+    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+  }
 }

.yarn/sdks/typescript/lib/typescript.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);

.yarn/sdks/typescript/package.json

@@ -1,6 +1,10 @@
 {
   "name": "typescript",
-  "version": "5.1.6-sdk",
+  "version": "5.2.2-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }

.yarnrc.yml

@@ -1,3 +1 @@
 enableGlobalCache: false
-
-yarnPath: .yarn/releases/yarn-4.0.2.cjs

babel.config.js

@@ -1,10 +1,7 @@
 module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      { useBuiltIns: "usage", corejs: 3, targets: { node: "current" } },
-    ],
-    "@babel/preset-typescript",
-    ["@babel/preset-react", { runtime: "automatic" }],
-  ],
+	presets: [
+		['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, targets: { node: 'current' } }],
+		'@babel/preset-typescript',
+		['@babel/preset-react', { runtime: 'automatic' }],
+	],
 };

package.json

@@ -2,7 +2,7 @@
   "name": "salin",
   "private": true,
   "version": "0.0.1",
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.0.2+sha256.825003a0f561ad09a3b1ac4a3b3ea6207af2796d54f62a9420520915721f5186",
   "workspaces": [
     "packages/*"
   ],
@@ -29,7 +29,7 @@
     "react-dom": "^18.2.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.1.6"
+    "typescript": "5.2.2"
   },
   "license": "MIT"
 }

packages/cms-ui/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  extends: "../../babel.config.js",
+	extends: '../../babel.config.js',
+	presets: ['@emotion/babel-preset-css-prop'],
 };

packages/cms-ui/package.json

@@ -25,6 +25,9 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.23.3",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -37,7 +40,7 @@
     "react-dom": "^18.2.0",
     "rollup": "^4.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^5.1.6"
+    "typescript": "5.2.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

packages/cms-ui/rollup.config.mjs

@@ -1,43 +1,42 @@
-import nodeResolve from "@rollup/plugin-node-resolve";
-import babel from "@rollup/plugin-babel";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-import commonjs from "@rollup/plugin-commonjs";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import pkg from "./package.json" assert { type: "json" };
+import nodeResolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import pkg from './package.json' assert { type: 'json' };
 
-const extensions = [".js", ".jsx", ".ts", ".tsx"];
+const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
 export default {
-  input: "./src/index.ts", // 진입 경로
-  output: [
-    {
-      file: pkg.main,
-      sourcemap: true,
-      format: "cjs",
-    },
-    {
-      file: pkg.module,
-      sourcemap: true,
-      format: "esm",
-    },
-  ],
-  external: ["react", "react-dom"],
-  plugins: [
-    peerDepsExternal(),
-    nodeResolve({
-      extensions,
-    }),
-    commonjs(),
-    babel({
-      babelHelpers: "bundled",
-      exclude: "node_modules/**/*.(ts|tsx|js|jsx)",
-      include: "src/**/*.(ts|tsx|js|jsx)",
-      extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs"],
-    }),
-    typescript({
-      tsconfig: "./tsconfig.json",
-    }),
-    terser(),
-  ],
+	input: './src/index.ts', // 진입 경로
+	output: [
+		{
+			file: pkg.main,
+			sourcemap: true,
+			format: 'cjs',
+		},
+		{
+			file: pkg.module,
+			sourcemap: true,
+			format: 'esm',
+		},
+	],
+	external: ['react', 'react-dom'],
+	plugins: [
+		peerDepsExternal(),
+		nodeResolve({
+			extensions,
+		}),
+		commonjs(),
+		babel({
+			exclude: /node_modules/,
+			extensions,
+			include: ['src/**/*'],
+		}),
+		typescript({
+			tsconfig: './tsconfig.json',
+		}),
+		terser(),
+	],
 };

packages/cms-ui/src/components/Button/index.tsx

@@ -1,3 +1,11 @@
+import styled from '@emotion/styled';
+
 export const Button = () => {
-	return <div>Button</div>;
+	return <StyledButton>zzz</StyledButton>;
 };
+
+const StyledButton = styled.div`
+	display: flex;
+	width: 100%;
+	height: auto;
+`;

packages/cms-ui/src/components/Button/styled.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+
+const Test = styled.div`
+  width
+`

packages/cms-ui/src/components/index.ts

@@ -1 +1 @@
-export * from "./Button";
+export * from './Button';

packages/cms-ui/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["./src"],
+  "include": ["./src"],  
   "compilerOptions": {
     "baseUrl": "./src",
-    "outDir": "./dist"
+    "outDir": "./dist",
   }
 }