스타일 9 : 빌드 타임 CSS-in-JS

Facebook은 지난 4 월 주요 개정을 발표했습니다. 이것은 야심 찬 프로젝트이며, 많은 사용자와 함께 거대한 웹 사이트의 재구성입니다. 이를 달성하기 위해 그들은 React, GraphQL, Relay 및 Stylex라는 새로운 CSS-in-JS 라이브러리와 같이 자체적으로 생성하고 오픈 소스를 만들었던 몇 가지 기술을 사용했습니다.

이 새로운 라이브러리는 Facebook에서 내부적으로 사용되지만 Style9 오픈 소스를 구현할 수 있도록 충분한 정보를 공유했습니다.

다른 CIJ 도서관이 필요한 이유는 무엇입니까?

CIJ (CSS-in-JS) 라이브러리가 이미 많으므로 다른 라이브러리가 필요한 이유는 확실하지 않을 수 있습니다. Christopher Chedeau가 설명했듯이 Style9는 SCOPE SELECTORS, DEAD CODE 제거, 결정 론적 구문 분석 및 CSS와 JavaScript 간의 가치를 공유하는 기능을 포함한 다른 모든 CIJ 솔루션과 동일한 이점을 가지고 있습니다.

그러나 스타일 9를 독특하게 만드는 몇 가지 측면이 있습니다.

최소 런타임

스타일은 JavaScript로 정의되지만 컴파일러에 의해 일반 CSS 파일로 추출됩니다. 이는 최종 JavaScript 파일에 스타일이 포함되어 있지 않음을 의미합니다. 남은 유일한 것은 최종 클래스 이름으로, 가장 작은 런타임은 일반적으로하는 것처럼 조건부로 적용됩니다. 이로 인해 코드 패키지가 작아지고 메모리 사용이 줄어들고 렌더링이 빠릅니다.

컴파일 시간에 값이 추출되므로 진정으로 동적 값을 사용할 수 없습니다. 다행히도 이러한 값은 일반적이지 않으며 독특하기 때문에 인라인 정의의 영향을받지 않습니다. 더 일반적으로 스타일의 적용이 조건부로 적용되는 것입니다. 물론 지원됩니다. Babel의 경로 덕분에 발생, 국소 상수 및 수학 표현도 지원됩니다.

원자 출력

Style9가 작동하는 방식으로 인해 각 속성 선언은 단일 속성을 가진 별도의 클래스가 될 수 있습니다. 예를 들어, 코드의 여러 장소에서 불투명도 : 0을 사용하는 경우 생성 된 CSS에는 한 번만 존재합니다. 이것의 이점은 CSS 파일의 크기가 총 선언 수가 아니라 고유 한 선언 수에 따라 증가한다는 것입니다. 대부분의 속성은 여러 번 사용되므로 CSS 파일을 크게 줄일 수 있습니다. 예를 들어, Facebook의 오래된 홈페이지는 413kb의 GZIP 압축 CSS를 사용했습니다. 개정 후 모든 페이지의 CSS 크기는 74KB입니다. 마찬가지로 파일 크기가 작을수록 성능이 향상됩니다.

어떤 사람들은 이에 대해 불평 할 수 있습니다. 생성 된 클래스 이름은 의미 론적이 아니며, 불투명하고 캐스케이드를 무시한다고 생각합니다. 이것은 사실입니다. 우리는 CSS를 컴파일 목표로 간주합니다. 그러나 좋은 이유가 있습니다. 이전에 가장 잘 고려 된 관행에 의문을 제기함으로써 사용자와 개발자 모두의 경험을 향상시킬 수 있습니다.

또한 Style9에는 다음과 같은 다른 강력한 기능이 있습니다. 타입 스타일이있는 타입 스타일, 사용하지 않은 스타일 제거, JavaScript 변수를 사용하는 기능, 미디어 쿼리, 의사 선택자 및 키 프레임 지원을 포함한 다른 많은 강력한 기능이 있습니다.

사용하는 방법

먼저 평소와 같이 설치하십시오.

 <code>npm install style9</code>

Style9에는 Babel 플러그인을 기반으로 롤업, 웹 팩, Gatsby 및 Next.js 용 플러그인이 있습니다. 사용 방법에 대한 지침은 저장소에 있습니다. 여기서는 Webpack 플러그인을 사용합니다.

 <code>const Style9Plugin = require('style9/webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ // 这将转换style9调用{ test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }, // 这是正常的Webpack CSS提取的一部分{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ // 这将对最终的CSS文件中的声明进行排序并删除重复的声明new Style9Plugin(), // 这是正常的Webpack CSS提取的一部分new MiniCssExtractPlugin() ] };</code>

스타일을 정의하십시오

스타일 생성을위한 구문은 다른 라이브러리와 매우 유사합니다. 우리는 먼저 Style9를 호출합니다. 스타일 객체를 사용하여 만들기 :

 <code>import style9 from 'style9'; const styles = style9.create({ button: { padding: 0, color: 'rebeccapurple' }, padding: { padding: 12 }, icon: { width: 24, height: 24 } });</code>

모든 선언은 원자 클래스를 생성하기 때문에 Flex : 1 및 Background : Blue와 같은 약어는 여러 속성을 설정하기 때문에 작동하지 않습니다. 패딩, 마진, 오버플로 등과 같이 확장 할 수있는 속성은 자동으로 전체 형태로 변환됩니다. TypeScript를 사용하는 경우 지원되지 않는 속성을 사용할 때 오류가 발생합니다.

분석 스타일

클래스 이름을 생성하려면 이제 Style9.Create가 반환 한 함수를 호출 할 수 있습니다. 매개 변수로 사용하려는 스타일 키를 수용합니다.

 <code>const className = styles('button');</code>

기능은 다음과 같이 작동합니다. 오른쪽의 스타일은 우선 순위를 차지하고 Object.Assign과 마찬가지로 왼쪽의 스타일과 합쳐집니다. 다음은 12px로 채워진 요소를 생성하고 텍스트는 Rebeccapurple입니다.

 <code>const className = styles('button', 'padding');</code>

다음 형식 중 하나를 사용하여 조건부 스타일을 적용 할 수 있습니다.

 <code>// 逻辑与styles('button', hasPadding && 'padding'); // 三元运算符styles('button', isGreen ? 'green' : 'red'); // 布尔对象styles({ button: true, green: isGreen, padding: hasPadding });</code>

이러한 기능 호출은 컴파일 중에 제거되고 직접 문자열 연결로 대체됩니다. 위 코드의 첫 번째 줄은 'C1R9F2E5'Haspadding과 같은 것으로 대체됩니다. 'cu2kwdz': ''. 런타임 코드가 남지 않습니다.

조합 스타일

속성 이름으로 스타일 객체에 액세스하여 Style9로 전달하여 스타일 객체를 확장 할 수 있습니다.

 <code>const styles = style9.create({ blue: { color: 'blue; } }); const otherStyles = style9.create({ red: { color: 'red; } }); // 将为红色const className = style9(styles.blue, otherStyles.red);</code>

함수 호출과 마찬가지로 오른쪽 스타일이 우선합니다. 그러나이 경우 클래스 이름을 정적으로 구문 분석 할 수 없습니다. 대신, 속성 값은 클래스로 대체되고 런타임에 연결됩니다. 속성은 이전과 같이 CSS 파일에 추가됩니다.

요약

CSS-in-JS의 이점은 실제입니다. 즉, 코드에 스타일을 포함시킬 때 성능 비용이 있습니다. 빌드 타임에 값을 추출함으로써 우리는 두 세계의 최고를 동시에 달성 할 수 있습니다. 우리는 태그가있는 스타일을 정리하고 기존 JavaScript 인프라를 사용하는 동시에 최고의 스타일 시트를 생성함으로써 이익을 얻을 수 있습니다.

Style9가 재미있게 들리면 저장소를 확인하고 시도해보십시오. 질문이 있으시면 언제든지 질문하거나 저희에게 연락하십시오.

감사의 말

스타일 시트와 DSS 작업에 대한 Giuseppe Gurgone 덕분에 Nicolas Gallagher는 Linaria, Christopher Chedeau, Sebastian McKenzie, Frank Yan, Ashley Watkins, Naman Goel 및 기꺼이 모든 사람들을 공유하는 Linaria, Christopher Chedeau, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie, Sebastian McKenzie에 대한 작업을 위해 Callstack의 모든 멤버에 대한 그의 작업에 대한 그의 작업에 감사드립니다. 그리고 내가 놓친 다른 사람들.

링크

• Johanholmerin/Style9
• React, GraphQL 및 Relay로 새로운 Facebook.com을 구축하십시오 - 2019 년 4 월 30 일
• React and Relay |로 새로운 Facebook을 구축하십시오 프랭크 얀 - 2019 년 10 월 30 일
• New Facebook.com의 기술 스택 재건 - 2020 년 5 월 8 일
• johanholmerin/style9-components.macro : 스타일 9 용 스타일 구성 요소 API-실험

위 내용은 스타일 9 : 빌드 타임 CSS-in-JS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!