Jsdom: CSSStyleSheet์—๋Š” ownerNode ๋˜๋Š” href ์†์„ฑ์ด ์—†์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2015๋…„ 01์›” 02์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jsdom/jsdom

์ด ํ”„๋กœ์ ํŠธ์—๋Š” CSSOM์„ ๋ชจ๋‘ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๋ฉด์ฑ… โ€‹โ€‹์กฐํ•ญ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ HTML Inspector ๊ฐ€ PhatomJS ๋Œ€์‹  jsdom๊ณผ ํ•จ๊ป˜ ์ž‘๋™ํ•˜๋„๋กํ•˜๋Š” ๋™์•ˆ ๋ช‡ ๊ฐ€์ง€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ CSSStyleSheet ์—์„œ์ด ๋‘ ์†์„ฑ์ด ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์ถ”์ ํ–ˆ์Šต๋‹ˆ๋‹ค

๋‚ด๊ฐ€ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด level2 / style.js ์˜ ์žˆ๊ฑฐ๋‚˜ ์ถ”๊ฐ€๋˜์–ด์•ผํ•˜๋Š” ๊ณณ์ด์ง€๋งŒ ํ™•์‹คํžˆ ์•Œ ์ˆ˜์žˆ๋Š” ์ฝ”๋“œ๋ฒ ์ด์Šค์— ์ต์ˆ™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

function evaluateStylesheet(data, sheet, baseUrl) {
  // this is the element
  var newStyleSheet = cssom.parse(data);
  var spliceArgs = newStyleSheet.cssRules;
  spliceArgs.unshift(0, sheet.cssRules.length);
  Array.prototype.splice.apply(sheet.cssRules, spliceArgs);
  scanForImportRules.call(this, sheet.cssRules, baseUrl);

  // Add references to `this` and `baseUrl`.
  sheet.href = baseUrl;
  sheet.ownerNode = this;

  this.ownerDocument.styleSheets.push(sheet);
}

์–ด์จŒ๋“ , ์ด๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ๋กœ์ปฌ์—์„œ ๋ณ€๊ฒฝ๋œ ์ž‘์—…์ด๋ฏ€๋กœ ๊ทธ๋ ‡๊ฒŒ ๊ฐ„๋‹จํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ณ ๋ คํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

bug css important or easy

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@lexoyo ๋‚˜๋Š” ๋˜ํ•œ ์ด๊ฒƒ์„ ํ•„์š”๋กœํ•˜๊ณ  ๊ทธ๊ฒƒ์„ ์กฐ์‚ฌํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•ด ์™”์ง€๋งŒ ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค ...

helpers> stylesheet.js์—์„œ createStylesheet ()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” HTMLStyleElement-impl.js๋ผ๋Š” ํŒŒ์ผ์ด ์žˆ์œผ๋ฉฐ ์—ฌ๊ธฐ์—๋Š” ๋งŽ์€ ์“ฐ๋ ˆ๊ธฐ์™€ TODO๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€์‹ ์— "cssom"์„ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ํ•„์š”๋กœํ•˜๋Š” ๊ฒƒ์„ ๊ฐ€์ง€๊ณ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ ์–ด๋–ป๊ฒŒํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์‹œ๊ฐ„์ด ์—†์–ด์„œ ์‹œ๊ฐ„์ด ์ข€ ๋” ์žˆ์œผ๋ฉด ๋” ์กฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์•Œ์•„ ๋‚ด์‹œ๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”!

๋ชจ๋“  4 ๋Œ“๊ธ€

์ž˜ ์žก์•˜์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์„ ๋ฒ„๊ทธ๋กœ ํƒœ๊ทธํ•˜๊ณ  ์กฐ๋งŒ๊ฐ„ ๋” ์›์น™์ ์ธ ์ˆ˜์ • ๋ฒ„์ „์„ ์–ป์„ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

FWIW, ๊ต์ฐจ ์ถœ์ฒ˜ ์ •์ฑ…์— ๋”ฐ๋ผ ๋™์ผ ์ถœ์ฒ˜๊ฐ€ ์•„๋‹Œ ์Šคํƒ€์ผ ์‹œํŠธ๋Š” document.styleSheets ํฌํ•จ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. jsdom์ด ์ฒ˜๋ฆฌ์ค‘์ธ ํŒŒ์ผ์˜ ์ถœ์ฒ˜๋ฅผ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์œผ๋ฏ€๋กœ ์ด๊ฒƒ์€ ๊นŒ๋‹ค๋กœ์šธ ์ˆ˜ ์žˆ์ง€๋งŒ ์–ด๋Š ์ชฝ์ด๋“  ๊ธฐ์–ตํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
์ด ๋ฌธ์ œ๋ฅผ ์ œ๊ธฐํ•˜๋ ค๊ณ ํ–ˆ๋Š”๋ฐ ownerNode๊ฐ€ ์—ฌ์ „ํžˆ ์ง€์›๋˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?
๊ทธ๋Ÿด ๊ฒฝ์šฐ ์ถ”๊ฐ€ํ•ด ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค
๊ณ ๋งˆ์›Œ !

@lexoyo ๋‚˜๋Š” ๋˜ํ•œ ์ด๊ฒƒ์„ ํ•„์š”๋กœํ•˜๊ณ  ๊ทธ๊ฒƒ์„ ์กฐ์‚ฌํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•ด ์™”์ง€๋งŒ ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค ...

helpers> stylesheet.js์—์„œ createStylesheet ()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” HTMLStyleElement-impl.js๋ผ๋Š” ํŒŒ์ผ์ด ์žˆ์œผ๋ฉฐ ์—ฌ๊ธฐ์—๋Š” ๋งŽ์€ ์“ฐ๋ ˆ๊ธฐ์™€ TODO๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€์‹ ์— "cssom"์„ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ํ•„์š”๋กœํ•˜๋Š” ๊ฒƒ์„ ๊ฐ€์ง€๊ณ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ ์–ด๋–ป๊ฒŒํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์‹œ๊ฐ„์ด ์—†์–ด์„œ ์‹œ๊ฐ„์ด ์ข€ ๋” ์žˆ์œผ๋ฉด ๋” ์กฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์•Œ์•„ ๋‚ด์‹œ๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰