{"id":481671,"date":"2026-05-30T09:23:18","date_gmt":"2026-05-30T09:23:18","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=481671"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=481671","title":{"rendered":"\u042f \u0441\u0434\u0435\u043b\u0430\u043b Vite-\u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f CSS \u043f\u0440\u044f\u043c\u043e \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438"},"content":{"rendered":"
\n
\n

\u042d\u0442\u043e \u043c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0440\u0438\u0442\u0438\u043a\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<\/blockquote>\n\n

\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u0438\u043b\u0438 \u0446\u0432\u0435\u0442 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u044f \u0434\u0435\u043b\u0430\u043b \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435:<\/p>\n

\u043e\u0442\u043a\u0440\u044b\u043b DevTools \u2192 \u043d\u0430\u0448\u0451\u043b \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2192 \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2192 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u2192 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043b \u2192 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043b\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u2192 \u043d\u0430\u0448\u0451\u043b \u0444\u0430\u0439\u043b \u2192 \u0432\u0441\u0442\u0430\u0432\u0438\u043b.<\/p>\n

\u042d\u0442\u043e \u0441\u0435\u043c\u044c \u0448\u0430\u0433\u043e\u0432 \u0440\u0430\u0434\u0438 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u042f \u0441\u0434\u0435\u043b\u0430\u043b LiveStyleSync<\/a>, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0431\u044b\u043b \u043e\u0434\u0438\u043d \u0448\u0430\u0433.<\/p>\n

\u0427\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435<\/h3>\n

LiveStyleSync \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u0432\u0430\u0448\u0435\u0433\u043e Vite-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u044b \u043a\u043b\u0438\u043a\u0430\u0435\u0442\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 \u043f\u0430\u043d\u0435\u043b\u0438, \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0444\u0430\u0439\u043b. Vite HMR \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u2014 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n

\u041a\u043b\u0438\u043a \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2192 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2192 Vite HMR \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u2192 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d<\/code>
<\/a><\/div><\/pre>\n
\u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043f\u0438-\u043f\u0430\u0441\u0442\u0430. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a.<\/p>\n
\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442<\/h3>\n
npm install livestylesync-overlay livestylesync-vite-plugin<\/code>
<\/a><\/div><\/pre>\n
\/\/ vite.config.tsimport { liveStyleSync } from \"livestylesync-vite-plugin\";\u200bexport default defineConfig({ \u00a0plugins: [liveStyleSync()],});<\/code>
<\/a><\/div><\/pre>\n
\/\/ main.tsimport { mount } from \"livestylesync-overlay\";\u200bif (import.meta.env.DEV) { \u00a0mount();}<\/code>
<\/a><\/div><\/pre>\n
\u0412\u0441\u0451. \u041f\u0430\u043d\u0435\u043b\u044c \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0432 \u0443\u0433\u043b\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437\u043d\u0443\u0442\u0440\u0438<\/h3>\n
\u041c\u043e\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 CSSOM \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c<\/h4>\n
\u042d\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u043d\u0430\u0435\u0442 CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043d\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0432 \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043a\u0430\u043a\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043e\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043e. \u041d\u0443\u0436\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c document.styleSheets<\/code> \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c .css<\/code> \u0438\u043b\u0438 .scss<\/code> \u0444\u0430\u0439\u043b\u043e\u043c \u043d\u0430 \u0434\u0438\u0441\u043a\u0435.<\/p>\n
\u0423 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 CSSStyleSheet<\/code> \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0443\u0442\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/p>\n
\u0421\u043b\u0443\u0447\u0430\u0439 1 \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0444\u0430\u0439\u043b.<\/strong> \u0415\u0441\u043b\u0438 CSS \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d \u0447\u0435\u0440\u0435\u0437 <link><\/code>, \u0443 \u043b\u0438\u0441\u0442\u0430 \u0435\u0441\u0442\u044c sheet.href<\/code> \u0432\u0438\u0434\u0430 http:\/\/localhost:5173\/src\/styles.css<\/code><\/a>. \u0418\u0437 \u044d\u0442\u043e\u0433\u043e URL \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u043f\u0443\u0442\u044c.<\/p>\n
\u0421\u043b\u0443\u0447\u0430\u0439 2 \u2014 <\/strong><style><\/strong><\/code> \u0442\u0435\u0433.<\/strong> SCSS, CSS Modules, Vue scoped \u2014 Vite \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u043a <style><\/code> \u0442\u0435\u0433\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 <head><\/code>. \u0423 \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0433\u043e\u0432 href<\/code> \u0440\u0430\u0432\u0435\u043d null. \u041d\u043e Vite \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 data-vite-dev-id<\/code> \u0441 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0443:<\/p>\n
<style type=\"text\/css\" data-vite-dev-id=\"\/home\/user\/project\/src\/styles.scss\"> \u00a0.card { background: #1a1a2e; }<\/style><\/code>
<\/a><\/div><\/pre>\n
\u041a\u043e\u0434 \u0432 \u043e\u0432\u0435\u0440\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442:<\/p>\n
for (const sheet of Array.from(document.styleSheets)) { \u00a0let fileUrl = sheet.href; \/\/ \u0434\u043b\u044f <link> \u0442\u0435\u0433\u043e\u0432\u200b \u00a0if (!fileUrl && sheet.ownerNode instanceof HTMLElement) { \u00a0 \u00a0fileUrl = sheet.ownerNode.getAttribute(\"data-vite-dev-id\"); \/\/ \u0434\u043b\u044f <style> \u0442\u0435\u0433\u043e\u0432  }\u200b \u00a0if (!fileUrl) continue; \/\/ cross-origin \u0438\u043b\u0438 \u0431\u0435\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u2014 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c}<\/code>
<\/a><\/div><\/pre>\n
\u041f\u043e\u043b\u0443\u0447\u0438\u0432 fileUrl<\/code>, \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0434\u0432\u0430 \u0438\u0437 \u0442\u0440\u0451\u0445 \u043d\u0443\u0436\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442: \u0444\u0430\u0439\u043b \u0438 CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u043e (\u0438\u0437 CSSOM). \u0422\u0440\u0435\u0442\u044c\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 \u2014 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 \u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 PostCSS \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n
\u041f\u043e\u0447\u0435\u043c\u0443 PostCSS, \u0430 \u043d\u0435 regex<\/h4>\n
\u041f\u0435\u0440\u0432\u043e\u0435, \u043e \u0447\u0451\u043c \u0434\u0443\u043c\u0430\u0435\u0448\u044c \u2014 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u0443 \u0438\u043b\u0438 string.replace<\/code>. \u042d\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c.<\/p>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 1: \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0435 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430\u0445.<\/strong><\/p>\n
CSS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 :<\/code> \u0432 \u0442\u0440\u0451\u0445 \u043d\u0435\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445: \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u0445 (.foo:hover<\/code>), \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 (content: \"a: b\"<\/code>), \u0441\u0430\u043c\u0438\u0445 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f\u0445 (color: red<\/code>). Regex \u043f\u043e color:<\/code> \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u043d\u0435 \u0442\u0443\u0434\u0430.<\/p>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 2: \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/strong><\/p>\n
\u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0439 CSS \u0431\u044b\u0432\u0430\u0435\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445:<\/p>\n
\/* \u0432\u0430\u0440\u0438\u0430\u043d\u0442 1 *\/.card { background: #fff; }\u200b\/* \u0432\u0430\u0440\u0438\u0430\u043d\u0442 2 *\/.card { \u00a0background: #fff;}\u200b\/* \u0432\u0430\u0440\u0438\u0430\u043d\u0442 3 \u2014 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u043c *\/.card { \u00a0background: #fff; \/* default *\/}<\/code>
<\/a><\/div><\/pre>\n
Regex \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u043b\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u2014 \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 3: SCSS-\u043d\u0435\u0441\u0442\u0438\u043d\u0433 \u0438 @media \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430.<\/strong><\/p>\n
.card { \u00a0background: #fff;\u200b \u00a0@media (max-width: 768px) { \u00a0 \u00a0background: #000;  }\u200b  &:hover { \u00a0 \u00a0background: #eee;  }}<\/code>
<\/a><\/div><\/pre>\n
\u041d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u043e\u0439 \u2014 \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e. \u041d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f.<\/p>\n
PostCSS \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0432 AST. \u041a\u0430\u0436\u0434\u044b\u0439 \u0443\u0437\u0435\u043b \u0438\u043c\u0435\u0435\u0442 \u0442\u0438\u043f: Rule<\/code> (\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440), Declaration<\/code> (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435), AtRule<\/code> (@media, @container). \u041d\u0443\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 Rule<\/code> \u0441 \u043d\u0443\u0436\u043d\u044b\u043c selector<\/code>, \u0432 \u043d\u0451\u043c \u043d\u0430\u0439\u0442\u0438 Declaration<\/code> \u0441 \u043d\u0443\u0436\u043d\u044b\u043c prop<\/code> \u2014 \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c value<\/code>. \u0412\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 (\u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044b \u0441\u0442\u0440\u043e\u043a) PostCSS \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 raws<\/code> \u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 toString()<\/code>.<\/p>\n
root.walkRules((rule) => { \u00a0if (rule.selector !== targetSelector) return; \u00a0rule.walkDecls(prop, (decl) => { \u00a0 \u00a0decl.value = newValue; \/\/ \u043c\u0435\u043d\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u043c  });});writeFileSync(filePath, root.toString()); \/\/ \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043e<\/code>
<\/a><\/div><\/pre>\n
\u0414\u043b\u044f SCSS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f postcss-scss<\/code> \u2014 \u043e\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 SCSS \u0432\u043a\u043b\u044e\u0447\u0430\u044f $variables<\/code>, \u043d\u0435\u0441\u0442\u0438\u043d\u0433 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 PostCSS \u043d\u0435 \u043f\u0430\u0440\u0441\u0438\u0442.<\/p>\n
HMR: \u043e\u0442 setTimeout \u043a \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044e<\/h4>\n
\u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0442\u0430\u043a: \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043f\u0430\u0442\u0447\u0430 \u043f\u043e WebSocket \u0436\u0434\u0430\u0442\u044c 400 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u0442\u044c CSSOM.<\/p>\n
send({ fileUrl, selector, prop, value });setTimeout(() => editor.refresh(), 400); \/\/ \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435<\/code>
<\/a><\/div><\/pre>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0444\u0430\u0439\u043b\u0430 Vite \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432 \u2014 \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0439 watcher \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, Vite \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 HMR-\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439 WebSocket, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 CSS. \u042d\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041d\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u0448\u0438\u043d\u0430\u0445 400 \u043c\u0441 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0438 \u043e\u0432\u0435\u0440\u043b\u0435\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 CSSOM. \u041d\u0430 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u2014 \u0437\u0440\u044f \u0436\u0434\u0430\u043b.<\/p>\n
\u0420\u0435\u0448\u0435\u043d\u0438\u0435: \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0444\u0430\u0439\u043b\u0430. \u041a\u043b\u0438\u0435\u043d\u0442 \u0436\u0434\u0451\u0442 \u044d\u0442\u043e\u0442 \u0441\u0438\u0433\u043d\u0430\u043b, \u0430 \u043d\u0435 \u0442\u0430\u0439\u043c\u0435\u0440.<\/p>\n
\/\/ \u0441\u0435\u0440\u0432\u0435\u0440 \u2014 \u043f\u043e\u0441\u043b\u0435 writeFileSync:socket.send(JSON.stringify({ type: \"patched\" }));\u200b\/\/ \u043a\u043b\u0438\u0435\u043d\u0442:if (msg.type === \"patched\") { \u00a0setTimeout(() => editor.refresh(), 300); \/\/ \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0443\u0444\u0435\u0440 \u0434\u043b\u044f HMR}<\/code>
<\/a><\/div><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c 300 \u043c\u0441 \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u0444\u0430\u0439\u043b \u0443\u0436\u0435 \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u2014 \u0430 \u043d\u0435 \u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u043f\u0440\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0434\u0438\u0441\u043a\u0435 \u0438\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u043c SCSS-\u0444\u0430\u0439\u043b\u0435 \u044d\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n
\u041f\u0441\u0435\u0432\u0434\u043e-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u043a\u0430\u043a \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c :hover \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0430\u043a\u0442\u0438\u0432\u0435\u043d<\/h4>\n
\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u043e .button:hover { color: red }<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u044b\u0448\u044c \u043d\u0430\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, el.matches(\".button:hover\")<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 false<\/code> \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438.<\/p>\n
\u0415\u0441\u043b\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 matches<\/code>, \u0432\u0441\u0435 \u043f\u0441\u0435\u0432\u0434\u043e-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u044b\u043f\u0430\u0434\u0443\u0442 \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e hover\/focus\/active \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u043f\u0430\u043d\u0435\u043b\u0438.<\/p>\n
\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0434\u0432\u0443\u0445\u0448\u0430\u0433\u043e\u0432\u044b\u0439 \u043c\u0430\u0442\u0447\u0438\u043d\u0433. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043c\u0430\u0442\u0447 \u043a\u0430\u043a \u0435\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u0440\u043e\u0448\u0451\u043b \u0438 \u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441 \u2014 strip \u0435\u0433\u043e \u0438 \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043d\u043e\u0432\u0430:<\/p>\n
const INTERACTIVE_PSEUDOS = [\":hover\", \":focus\", \":active\", \":checked\", \/* ... *\/];\u200bfunction stripInteractivePseudos(selector: string): string { \u00a0let s = selector; \u00a0for (const p of INTERACTIVE_PSEUDOS) { \u00a0 \u00a0s = s.split(p).join(\"\"); \/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c \":hover\" \u0438\u0437 \".button:hover\"  } \u00a0return s.trim(); \/\/ \".button\"}\u200b\/\/ \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u0435 \u043f\u0440\u0430\u0432\u0438\u043b:let matches = el.matches(effectiveSelector);if (!matches && isPseudoRule) { \u00a0matches = el.matches(stripInteractivePseudos(effectiveSelector));}<\/code>
<\/a><\/div><\/pre>\n
.button:hover<\/code> \u2192 strip \u2192 .button<\/code> \u2192 \u043c\u0430\u0442\u0447 \u043f\u0440\u043e\u0448\u0451\u043b. \u041f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u043f\u0430\u043d\u0435\u043b\u044c \u0441 \u043f\u043e\u043c\u0435\u0442\u043a\u043e\u0439, \u0447\u0442\u043e \u044d\u0442\u043e :hover<\/code>-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n
\u0414\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0432\u044c\u044e \u043f\u043e\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 element.style<\/code><\/a>.setProperty()<\/code> \u2014 inline-\u0441\u0442\u0438\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0434\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430, \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0445\u043e\u0432\u0435\u0440\u0435. \u042d\u0442\u043e \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441 \u0434\u043b\u044f dev-\u0440\u0435\u0436\u0438\u043c\u0430: \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0445\u043e\u0442\u044f \u0438 \u0431\u0435\u0437 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n
Vue scoped: \u0445\u044d\u0448\u0438 \u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u0445<\/h4>\n
Vue <style scoped><\/code> \u2014 \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u0430 \u043d\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e. Vue \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (data-v-3f7bd2<\/code>) \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043a \u043d\u0438\u043c \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442:<\/p>\n
\/* \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u0432 .vue \u0444\u0430\u0439\u043b\u0435 *\/.card { background: #fff; }\u200b\/* \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 *\/.card[data-v-3f7bd2] { background: #fff; }<\/code>
<\/a><\/div><\/pre>\n
\u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0434\u0432\u0430 \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0442\u0435\u043c, \u0447\u0442\u043e \u0432\u0438\u0434\u0438\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0438 \u0442\u0435\u043c, \u0447\u0442\u043e \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0435:<\/p>\n
1. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440.<\/strong> CSSOM \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 .card[data-v-3f7bd2]<\/code>, \u043d\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e .card<\/code>. \u0415\u0441\u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 .card[data-v-3f7bd2]<\/code> \u2014 PostCSS \u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0439\u0434\u0451\u0442.<\/p>\n
2. URL \u0444\u0430\u0439\u043b\u0430.<\/strong> Vite \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 Vue-\u0441\u0442\u0438\u043b\u0438 \u043f\u043e\u0434 URL \u0432\u0438\u0434\u0430 main.vue?vue&type=style&index=0&scoped=7bd2<\/code>. \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f main.vue<\/code>.<\/p>\n
\u041e\u0431\u0430 \u0441\u043b\u0443\u0447\u0430\u044f \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439:<\/p>\n
\/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0445\u044d\u0448 \u0438\u0437 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430const selector = effectiveSelector  .replace(\/\\[data-v-[a-f0-9]+\\]\/g, \"\")  .trim(); \/\/ \".card[data-v-3f7bd2]\" \u2192 \".card\"\u200b\/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c query-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438\u0437 URLconst isVue = fileUrl.includes(\"?vue&type=style\");const cleanUrl = isVue ? fileUrl.split(\"?\")[0] : fileUrl; \/\/ \u2192 \"main.vue\"<\/code>
<\/a><\/div><\/pre>\n
\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 patchVue<\/code> \u043f\u0430\u0440\u0441\u0438\u0442 .vue<\/code> \u0444\u0430\u0439\u043b \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442, \u0432\u044b\u0447\u043b\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 <style><\/code> \u0431\u043b\u043e\u043a\u0430, \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 PostCSS, \u043d\u0430\u0445\u043e\u0434\u0438\u0442 .card<\/code> \u2014 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e <style><\/code> \u0431\u043b\u043e\u043a, \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f <template><\/code> \u0438 <script><\/code>.<\/p>\n
\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0433\u0440\u0430\u0431\u043b\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b<\/h3>\n
\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 *<\/h4>\n
\u0412 document.styleSheets<\/code> \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432\u0440\u043e\u0434\u0435 , <\/em>::before, ::after { box-sizing: border-box }<\/em><\/code>. \u0411\u0435\u0437 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u044d\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0424\u0438\u043a\u0441 \u2014 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0433\u0434\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0430 \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e \u0440\u0430\u0432\u043d\u0430 <\/em> \u0438\u043b\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 *:<\/code>:<\/p>\n
const selParts = selector.split(\",\").map((s) => s.trim());if (selParts.some((p) => p === \"*\" || p.startsWith(\"*:\"))) continue;<\/code>
<\/a><\/div><\/pre>\n
CSSContainerRule \u043d\u0435\u0442 \u0432 TypeScript lib<\/h4>\n
@container<\/code> \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 TypeScript \u043d\u0435 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. instanceof CSSContainerRule<\/code> \u2014 \u043d\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0447\u0435\u0440\u0435\u0437 duck-typing: \u0443 @container<\/code> \u0435\u0441\u0442\u044c conditionText<\/code>, \u043d\u043e \u043d\u0435\u0442 instanceof CSSMediaRule<\/code>:<\/p>\n
if ( \u00a0!(rule instanceof CSSMediaRule) && \u00a0!(rule instanceof CSSSupportsRule) &&  (rule as any).conditionText !== undefined) { \u00a0\/\/ \u044d\u0442\u043e @container}<\/code>
<\/a><\/div><\/pre>\n
Inline-\u0441\u0442\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u043e\u0442\u043a\u0430\u0442<\/h4>\n
\u041f\u0440\u0438 \u043e\u0442\u043a\u0430\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u0442\u0438\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0438\u0441\u044c \u0432 \u0444\u0430\u0439\u043b, \u043d\u043e (element as HTMLElement).style<\/code> \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0441\u044f \u0441 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c\u0438 inline-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u043b\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430. CSS-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c: inline-\u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0431\u0435\u0436\u0434\u0430\u044e\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n
\u0424\u0438\u043a\u0441 \u2014 \u044f\u0432\u043d\u043e \u043e\u0447\u0438\u0449\u0430\u0442\u044c inline-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438 \u043e\u0442\u043a\u0430\u0442\u0435:<\/p>\n
(selected as HTMLElement).style.setProperty(prop, oldValue);\/\/ \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 oldValue \u043f\u0443\u0441\u0442\u043e\u0439:(selected as HTMLElement).style.removeProperty(prop);<\/code>
<\/a><\/div><\/pre>\n
\u0414\u0432\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 undo \u0440\u0430\u0437\u044a\u0435\u0445\u0430\u043b\u0438\u0441\u044c<\/h4>\n
\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u0443 \u043c\u0435\u043d\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u0432\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u0442\u0435\u043a\u0430 \u043e\u0442\u043c\u0435\u043d\u044b: \u043e\u0434\u0438\u043d \u0432\u043d\u0443\u0442\u0440\u0438 useStyleEditor<\/code> (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f CSS), \u0432\u0442\u043e\u0440\u043e\u0439 \u0432 \u043e\u0431\u0449\u0435\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441\u0435\u0441\u0441\u0438\u0438 (CSS + SCSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 + CSS custom properties). \u041f\u0440\u0438 \u0441\u043c\u0435\u0448\u0430\u043d\u043d\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 \u043e\u043d\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u042d\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0431\u0430\u0433, \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u044e \u043f\u043e\u0434 \u0435\u0434\u0438\u043d\u044b\u0439 \u0441\u0442\u0435\u043a.<\/p>\n
\u0427\u0442\u043e \u0443\u043c\u0435\u0435\u0442<\/h3>\n
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n
\u0424\u0438\u0447\u0430<\/p>\n<\/th>\n
\n
\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/p>\n<\/th>\n<\/tr>\n
\n
Element picker<\/strong><\/p>\n<\/td>\n
\n
\u041a\u043b\u0438\u043a \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/td>\n<\/tr>\n
\n
\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<\/td>\n
\n
\u041f\u043e\u0438\u0441\u043a \u043f\u043e .class<\/code>, #id<\/code>, CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u0441 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u043e\u0439<\/p>\n<\/td>\n<\/tr>\n
\n
DOM breadcrumbs<\/strong><\/p>\n<\/td>\n
\n
\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0435\u0434\u043a\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/td>\n<\/tr>\n
\n
@media \u0438 @container<\/strong><\/p>\n<\/td>\n
\n
\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430\/\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/p>\n<\/td>\n<\/tr>\n
\n
\u041f\u0441\u0435\u0432\u0434\u043e-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/strong><\/p>\n<\/td>\n
\n
\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 :hover<\/code>, :focus<\/code>, :active<\/code><\/p>\n<\/td>\n<\/tr>\n
\n
CSS custom properties<\/strong><\/p>\n<\/td>\n
\n
\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 :root<\/code> \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/p>\n<\/td>\n<\/tr>\n
\n
SCSS $\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/strong><\/p>\n<\/td>\n
\n
\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0441\u043a\u0430\u043d \u0432\u0441\u0435\u0445 .scss<\/code> \u0444\u0430\u0439\u043b\u043e\u0432, \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 $var<\/code><\/p>\n<\/td>\n<\/tr>\n
\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b<\/strong><\/p>\n<\/td>\n
\n
\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c CSS \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430<\/p>\n<\/td>\n<\/tr>\n
\n
\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u0441\u0435\u0441\u0441\u0438\u0438<\/strong><\/p>\n<\/td>\n
\n
Git-style \u0434\u0438\u0444\u0444\u044b \u0432\u0441\u0435\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u043e\u0442\u043a\u0430\u0442 \u0431\u0430\u0442\u0447\u0430\u043c\u0438<\/p>\n<\/td>\n<\/tr>\n
\n
Tailwind detection<\/strong><\/p>\n<\/td>\n
\n
\u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u043f\u0430\u0442\u0447\u0438\u0442\u044c \u0443\u0442\u0438\u043b\u0438\u0442\u044b<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 CSS<\/h3>\n
\n
\n\n\n\n\n\n\n\n\n\n
\n
\u0424\u043e\u0440\u043c\u0430\u0442<\/p>\n<\/th>\n
\n
\u0427\u0442\u0435\u043d\u0438\u0435<\/p>\n<\/th>\n
\n
\u041f\u0430\u0442\u0447<\/p>\n<\/th>\n<\/tr>\n
\n
\u041e\u0431\u044b\u0447\u043d\u044b\u0439 .css<\/code><\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n<\/tr>\n
\n
.scss<\/code><\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n<\/tr>\n
\n
CSS Modules .module.css<\/code><\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n<\/tr>\n
\n
Vue <style scoped><\/code><\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n
\n
\u2705<\/p>\n<\/td>\n<\/tr>\n
\n
Tailwind-\u0443\u0442\u0438\u043b\u0438\u0442\u044b<\/p>\n<\/td>\n
\n
\u26a0\ufe0f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442<\/p>\n<\/td>\n
\n
\u2014<\/p>\n<\/td>\n<\/tr>\n
\n
Inline styles<\/p>\n<\/td>\n
\n
\u274c<\/p>\n<\/td>\n
\n
\u2014<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043b\u044e\u0431\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u043d\u0430 Vite<\/h3>\n
React, Vue, Nuxt, SvelteKit, Astro, Solid \u2014 \u0432\u0441\u0451, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Vite \u043a\u0430\u043a dev-\u0441\u0435\u0440\u0432\u0435\u0440. \u041e\u0432\u0435\u0440\u043b\u0435\u0439 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 peer-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 React: Preact \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u044c \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u043e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
\u0421\u0442\u0435\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n