CSS를 선택기 인식 기능이있는 JavaScript로 파싱

.css 파일을 사용할 수있는 무언가를 만들고 싶습니다. 클래스 이름 배열을 사용하고 해당 클래스 이름을 가진 요소에 적용 할 스타일을 JavaScript로 반환하는 함수를 반환하고 싶습니다. 목적. (이러한 도구는 글래머, 펠라, 또는 다른 CSS -에서 - JS 기술을 사용하기에 적합하다.)CSS를 선택기 인식 기능이있는 JavaScript로 파싱

예, 당신은이 CSS 파일이있는 경우 :

.btn { 
    border: 1px solid gray; 
} 

.btn.primary { 
    background: blue; 
    border-color: blue; 
} 

.btn-group { 
    display: inline-block; 
}

는 다음과 같은 일을 할 수있는을 이 : 우리는 단지 .btn.primary에 적용됩니다 어떤 스타일 물었다 때문에이 예에서

import css from "./btn.css"; 
import applicableStyles from "applicable-styles"; // what I want to build 

const btnStyles = applicableStyles(css, ['btn', 'primary']); 

// Expected value: 
{ 
    border: "1px solid gray" 
    background: "blue"; 
    border-color: "blue"; 
}

는 .btn-group는 무시됩니다.

이것은 나를위한 새로운 영역이지만 CSS를 파싱하기위한 도구가 있다는 것을 알고 있습니다. 어떤 도서관에서 가장 유망한 도서관을 찾을 수 있습니까? (또는 이와 비슷한 것이 이미 존재합니까?)

출처

2017-09-22 Alan H.

https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle을 찾으십니까? CSS 파일을 iframe에 연결하고 요소를 만들고 스타일을 가져옵니다. – smnbbrv

아마도 https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet가 도움이 될 수 있습니다. . . –

나는 getComputedStyle을 원하지 않는다. 그것은 계산 된 프로퍼티의 거대한 목록을 반환한다. –

다양한 npm 패키지 중 일부를 사용하여 가능해야합니다.

예를 들어, css-object-loader 패키지는 require.css 파일을 허용하며 선택기에 해당하는 키가있는 개체로 변환되어 액세스 할 수 있습니다.

p { 
    font-size: 14px; 
} 

h1 { 
    text-indent: 20px; 
} 

.centered { 
    width: 100%; 
    margin: 0 auto; 
} 

var selectors = require('./rules.css'); 

// Get the 
selectors['.centered']

나는 또한 본 적이 SCSS처럼, import에서 탈구 :

import {btn, primary} from './btn.scss';

하지만 불행히도 나는 로더가이 작업을 수행하는 데 사용했는지 기억이 안나요.

출처

2017-09-28 09:37:11

CSS를 선택기 인식 기능이있는 JavaScript로 파싱

답변

관련 문제