Skip to content

Commit

Permalink
[FE] fix : stylelint 적용 오류 수정 (#66)
Browse files Browse the repository at this point in the history 
* fix: stylelint를 통한 css 속성 정렬 기능 오류 수정

- stylelint 버전16과 충돌되는 플러그인 삭제 : stylelint-config-prettier, stylelint-prettier
- css 정렬에 필요하지 않은 플러그인 삭제 : stylelint-config-standard, stylelint-config-styled-componented, stylelint-webpack-plugin
- 추가로 설치한 플러그인: postcss-syntax, @stylelint/postcss-css-in-js
- stylelint 적용 script 추가
- .stylelintrc.json 수정 : css 관련 rule 설정

* refactor: stylelint 적용에 따른 css 속성 정렬
  • Loading branch information
@BadaHertz52
BadaHertz52 authored Jul 21, 2024
1 parent 982a296 commit a6f57ce
Show file tree
Hide file tree
Showing 18 changed files with 222 additions and 540 deletions.
304 changes: 10 additions & 294 deletions frontend/.stylelintrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,297 +1,13 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-styled-components",
"stylelint-prettier/recommended"
],
"plugins": [
"stylelint-order",
"stylelint-prettier"
],
"extends": ["stylelint-config-clean-order"],
"plugins": ["stylelint-order"],
"customSyntax": "@stylelint/postcss-css-in-js",
"rules": {
"prettier/prettier": true,
"order/properties-order": [
[
"all",
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"flex-direction",
"flex-wrap",
"justify-content",
"align-items",
"align-self",
"order",
"float",
"clear",
"box-sizing",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"border",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"background",
"background-color",
"background-image",
"background-repeat",
"background-position",
"background-size",
"background-clip",
"background-origin",
"background-attachment",
"color",
"font",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant",
"font-size-adjust",
"font-stretch",
"line-height",
"letter-spacing",
"text-align",
"text-decoration",
"text-transform",
"text-indent",
"text-shadow",
"vertical-align",
"white-space",
"word-spacing",
"list-style",
"list-style-type",
"list-style-position",
"list-style-image",
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"visibility",
"opacity",
"filter",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"appearance",
"user-select",
"pointer-events",
"direction",
"unicode-bidi",
"writing-mode",
"text-rendering",
"font-feature-settings",
"font-kerning",
"font-variant-ligatures",
"font-variant-caps",
"font-variant-east-asian",
"font-variant-alternates",
"font-variant-numeric",
"font-variant-position",
"font-variant-ligatures",
"break-after",
"break-before",
"break-inside",
"page-break-after",
"page-break-before",
"page-break-inside",
"orphans",
"widows",
"tab-size",
"hyphens",
"line-break",
"overflow-wrap",
"word-break",
"image-rendering",
"shape-rendering",
"text-overflow",
"will-change",
"scroll-behavior",
"scroll-snap-type",
"scroll-snap-align",
"scroll-snap-stop",
"isolation",
"mix-blend-mode",
"background-blend-mode",
"box-decoration-break",
"box-shadow",
"break-before",
"break-inside",
"break-after",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-color",
"column-rule-style",
"column-rule-width",
"column-span",
"column-width",
"columns",
"contain",
"content-visibility",
"counter-increment",
"counter-reset",
"cursor",
"filter",
"font-synthesis",
"hanging-punctuation",
"image-orientation",
"image-rendering",
"image-resolution",
"mask",
"mask-clip",
"mask-composite",
"mask-image",
"mask-mode",
"mask-origin",
"mask-position",
"mask-repeat",
"mask-size",
"mask-type",
"object-fit",
"object-position",
"offset",
"offset-anchor",
"offset-distance",
"offset-path",
"offset-rotate",
"outline",
"outline-color",
"outline-offset",
"outline-style",
"outline-width",
"perspective",
"perspective-origin",
"place-content",
"place-items",
"place-self",
"quotes",
"rotate",
"row-gap",
"scale",
"scroll-padding",
"scroll-padding-block",
"scroll-padding-block-end",
"scroll-padding-block-start",
"scroll-padding-bottom",
"scroll-padding-inline",
"scroll-padding-inline-end",
"scroll-padding-inline-start",
"scroll-padding-left",
"scroll-padding-right",
"scroll-padding-top",
"scroll-snap-coordinate",
"scroll-snap-destination",
"scroll-snap-points-x",
"scroll-snap-points-y",
"scroll-snap-type-x",
"scroll-snap-type-y",
"shape-image-threshold",
"shape-margin",
"shape-outside",
"stroke-dasharray",
"stroke-dashoffset",
"stroke-linecap",
"stroke-linejoin",
"stroke-miterlimit",
"stroke-opacity",
"stroke-width",
"tab-size",
"table-layout",
"text-align-last",
"text-combine-upright",
"text-decoration-color",
"text-decoration-line",
"text-decoration-style",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-position",
"text-emphasis-style",
"text-orientation",
"text-underline-position",
"touch-action",
"transform-box",
"transform-style",
"transition-delay",
"transition-duration",
"transition-property",
"transition-timing-function",
"unicode-bidi",
"user-select",
"writing-mode"
],
{
"unspecified": "bottom"
}
]
"declaration-empty-line-before": [
"never",
{
"ignore": ["after-declaration"]
}
]
}
}
}
11 changes: 5 additions & 6 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"scripts": {
"dev": "webpack-dev-server --mode=development --open --hot --progress",
"start": "webpack serve --open --config webpack.config.js",
"build": "webpack --config webpack.config.js"
"build": "webpack --config webpack.config.js",
"lint:styles": "stylelint \"src/**/styles.ts\" --fix"
},
"dependencies": {
"@emotion/react": "^11.11.4",
Expand All @@ -24,6 +25,7 @@
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@emotion/babel-plugin": "^11.11.0",
"@stylelint/postcss-css-in-js": "^0.38.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.16.0",
Expand All @@ -38,14 +40,11 @@
"eslint-plugin-react-refresh": "^0.4.8",
"html-webpack-plugin": "^5.6.0",
"msw": "^2.3.1",
"postcss-syntax": "^0.36.2",
"prettier": "^3.3.2",
"stylelint": "^16.7.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-config-clean-order": "^6.1.0",
"stylelint-order": "^6.0.4",
"stylelint-prettier": "^5.0.1",
"stylelint-webpack-plugin": "^5.0.1",
"typescript": "^5.5.3",
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/components/common/Button/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@ import { ButtonType } from '@/types/styles';

export const Button = styled.button<{ buttonType: ButtonType }>`
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
width: 10rem;
height: 4rem;
padding: 2rem;
background-color: ${({ theme, buttonType }) =>
buttonType === 'primary' ? theme.colors.primary : theme.colors.white};
color: ${({ theme, buttonType }) => (buttonType === 'primary' ? theme.colors.white : theme.colors.pri)};
background-color: ${({ theme, buttonType }) =>
buttonType === 'primary' ? theme.colors.primary : theme.colors.white};
border: 0.1rem solid ${({ theme }) => theme.colors.primary};
border-radius: 0.8rem;
padding: 2rem;
&:hover {
background-color: ${({ theme, buttonType }) => (buttonType ? theme.colors.primaryHover : theme.colors.lightGray)};\
color: ${({ theme }) => theme.colors.black}
color: ${({ theme }) => theme.colors.black};
background-color: ${({ theme, buttonType }) => (buttonType ? theme.colors.primaryHover : theme.colors.lightGray)};
}
`;
7 changes: 4 additions & 3 deletions frontend/src/components/common/SearchInput/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ interface InputProps {
$height: string;
}
export const Input = styled.input<InputProps>`
border: 1px solid ${({ theme }) => theme.colors.black};
border-radius: 1.5rem;
height: ${(props) => props.$height};
width: ${(props) => props.$width};
height: ${(props) => props.$height};
padding: 1.6rem;
border: 1px solid ${({ theme }) => theme.colors.black};
border-radius: 1.5rem;
`;
Loading

0 comments on commit a6f57ce

Please sign in to comment.