mirror of
https://github.com/Microsoft/vscode
synced 2024-08-24 19:46:05 +00:00
eng: allow css nesting via postcss plugin (#203726)
* eng: allow css nesting via postcss plugin CSS nesting has landed in most browsers at this point, but we don't want to break users who are still stuck on old browser (mainly older iOS devices.) This PR adds a postcss plugin to the build process that de-nests nested CSS. The plugin required a newer version of postcss as well, so I have updated that and a couple other modules to their latest versions. * update build's package.json versions too
This commit is contained in:
Connor Peet
GitHub
parent
c9555f641b
commit
0f323440e5
|
|
@ -55,11 +55,15 @@ function createCompile(src, build, emitError, transpileOnly) {
|
|||
const tsFilter = util.filter(data => /\.ts$/.test(data.path));
|
||||
const isUtf8Test = (f) => /(\/|\\)test(\/|\\).*utf8/.test(f.path);
|
||||
const isRuntimeJs = (f) => f.path.endsWith('.js') && !f.path.includes('fixtures');
|
||||
const isCSS = (f) => f.path.endsWith('.css') && !f.path.includes('fixtures');
|
||||
const noDeclarationsFilter = util.filter(data => !(/\.d\.ts$/.test(data.path)));
|
||||
const postcss = require('gulp-postcss');
|
||||
const postcssNesting = require('postcss-nesting');
|
||||
const input = es.through();
|
||||
const output = input
|
||||
.pipe(util.$if(isUtf8Test, bom())) // this is required to preserve BOM in test files that loose it otherwise
|
||||
.pipe(util.$if(!build && isRuntimeJs, util.appendOwnPathSourceURL()))
|
||||
.pipe(util.$if(isCSS, postcss([postcssNesting()])))
|
||||
.pipe(tsFilter)
|
||||
.pipe(util.loadSourcemaps())
|
||||
.pipe(compilation(token))
|
||||
|
|
|
|||
|
|
@ -64,12 +64,17 @@ function createCompile(src: string, build: boolean, emitError: boolean, transpil
|
|||
const tsFilter = util.filter(data => /\.ts$/.test(data.path));
|
||||
const isUtf8Test = (f: File) => /(\/|\\)test(\/|\\).*utf8/.test(f.path);
|
||||
const isRuntimeJs = (f: File) => f.path.endsWith('.js') && !f.path.includes('fixtures');
|
||||
const isCSS = (f: File) => f.path.endsWith('.css') && !f.path.includes('fixtures');
|
||||
const noDeclarationsFilter = util.filter(data => !(/\.d\.ts$/.test(data.path)));
|
||||
|
||||
const postcss = require('gulp-postcss') as typeof import('gulp-postcss');
|
||||
const postcssNesting = require('postcss-nesting');
|
||||
|
||||
const input = es.through();
|
||||
const output = input
|
||||
.pipe(util.$if(isUtf8Test, bom())) // this is required to preserve BOM in test files that loose it otherwise
|
||||
.pipe(util.$if(!build && isRuntimeJs, util.appendOwnPathSourceURL()))
|
||||
.pipe(util.$if(isCSS, postcss([postcssNesting()])))
|
||||
.pipe(tsFilter)
|
||||
.pipe(util.loadSourcemaps())
|
||||
.pipe(compilation(token))
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
"@electron/get": "^2.0.0",
|
||||
"@types/ansi-colors": "^3.2.0",
|
||||
"@types/byline": "^4.2.32",
|
||||
"@types/cssnano": "^4.0.0",
|
||||
"@types/debounce": "^1.0.0",
|
||||
"@types/debug": "^4.1.5",
|
||||
"@types/fancy-log": "^1.3.0",
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
"@types/gulp-filter": "^3.0.32",
|
||||
"@types/gulp-gzip": "^0.0.31",
|
||||
"@types/gulp-json-editor": "^2.2.31",
|
||||
"@types/gulp-postcss": "^8.0.0",
|
||||
"@types/gulp-postcss": "^8.0.6",
|
||||
"@types/gulp-rename": "^0.0.33",
|
||||
"@types/gulp-sourcemaps": "^0.0.32",
|
||||
"@types/mime": "0.0.29",
|
||||
|
|
|
|||
|
|
@ -407,13 +407,6 @@
|
|||
"@types/events" "*"
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/cssnano@^4.0.0":
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/cssnano/-/cssnano-4.0.1.tgz#67fa912753d80973a016e7684a47fedf338aacff"
|
||||
integrity sha512-hGOroxRTBkYl5gSBRJOffhV4+io+Y2bFX1VP7LgKEVHJt/LPPJaWUIuDAz74Vlp7l7hCDZfaDi7iPxwNwuVA4Q==
|
||||
dependencies:
|
||||
postcss "5 - 7"
|
||||
|
||||
"@types/debounce@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.0.0.tgz#417560200331e1bb84d72da85391102c2fcd61b7"
|
||||
|
|
@ -491,10 +484,10 @@
|
|||
"@types/js-beautify" "*"
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/gulp-postcss@^8.0.0":
|
||||
version "8.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/gulp-postcss/-/gulp-postcss-8.0.0.tgz#f7e86d45e4999fd43e6d8c55b00504c88a67ad61"
|
||||
integrity sha512-AVgjA03bpkYONKZpzuJviB9PzaNbDzrovYPbenj8/XxivUc35C/dIzJanyaQv7CFqfLLPLsqSalmtP3GLq6iag==
|
||||
"@types/gulp-postcss@^8.0.6":
|
||||
version "8.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/gulp-postcss/-/gulp-postcss-8.0.6.tgz#d314c785876c8a1779154ba1d152125082ecde0f"
|
||||
integrity sha512-mjGEmTvurqRHFeJQnrgtMC9GtKNkI2+56n92zIzff5UFr2jUfilw1elKRxS7bK0FYRvuEcnMX9JH0AUpCxBrpg==
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
"@types/vinyl" "*"
|
||||
|
|
@ -2201,15 +2194,6 @@ plugin-error@1.0.1, plugin-error@^1.0.1:
|
|||
arr-union "^3.1.0"
|
||||
extend-shallow "^3.0.2"
|
||||
|
||||
"postcss@5 - 7":
|
||||
version "7.0.36"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
|
||||
integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
|
||||
dependencies:
|
||||
chalk "^2.4.2"
|
||||
source-map "^0.6.1"
|
||||
supports-color "^6.1.0"
|
||||
|
||||
prebuild-install@^7.0.1, prebuild-install@^7.1.1:
|
||||
version "7.1.1"
|
||||
resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
|
||||
|
|
@ -2439,7 +2423,7 @@ simple-get@^4.0.0:
|
|||
once "^1.3.1"
|
||||
simple-concat "^1.0.0"
|
||||
|
||||
source-map@0.6.1, source-map@^0.6.1:
|
||||
source-map@0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||
|
|
@ -2514,13 +2498,6 @@ supports-color@^5.3.0:
|
|||
dependencies:
|
||||
has-flag "^3.0.0"
|
||||
|
||||
supports-color@^6.1.0:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
|
||||
integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
|
||||
dependencies:
|
||||
has-flag "^3.0.0"
|
||||
|
||||
supports-color@^7.1.0:
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
|
||||
|
|
|
|||
11
package.json
11
package.json
|
|
@ -110,10 +110,9 @@
|
|||
"@playwright/test": "^1.40.1",
|
||||
"@swc/core": "1.3.62",
|
||||
"@types/cookie": "^0.3.3",
|
||||
"@types/cssnano": "^4.0.0",
|
||||
"@types/debug": "^4.1.5",
|
||||
"@types/graceful-fs": "4.1.2",
|
||||
"@types/gulp-postcss": "^8.0.0",
|
||||
"@types/gulp-postcss": "^8.0.6",
|
||||
"@types/gulp-svgmin": "^1.2.1",
|
||||
"@types/http-proxy-agent": "^2.0.1",
|
||||
"@types/kerberos": "^1.1.2",
|
||||
|
|
@ -146,8 +145,8 @@
|
|||
"chromium-pickle-js": "^0.2.0",
|
||||
"cookie": "^0.4.0",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"cssnano": "^4.1.11",
|
||||
"css-loader": "^6.9.1",
|
||||
"cssnano": "^6.0.3",
|
||||
"debounce": "^1.0.0",
|
||||
"deemon": "^1.8.0",
|
||||
"electron": "27.2.3",
|
||||
|
|
@ -171,7 +170,7 @@
|
|||
"gulp-gzip": "^1.4.2",
|
||||
"gulp-json-editor": "^2.5.0",
|
||||
"gulp-plumber": "^1.2.0",
|
||||
"gulp-postcss": "^9.0.0",
|
||||
"gulp-postcss": "^9.1.0",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.5.4",
|
||||
"gulp-sourcemaps": "^3.0.0",
|
||||
|
|
@ -197,6 +196,8 @@
|
|||
"opn": "^6.0.0",
|
||||
"p-all": "^1.0.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss-nesting": "^12.0.2",
|
||||
"pump": "^1.0.1",
|
||||
"rcedit": "^1.1.0",
|
||||
"rimraf": "^2.2.8",
|
||||
|
|
|
|||
|
|
@ -5,28 +5,30 @@
|
|||
|
||||
/** -- icons */
|
||||
|
||||
.monaco-workbench .codicon-testing-error-icon {
|
||||
color: var(--vscode-testing-iconErrored);
|
||||
}
|
||||
.monaco-workbench {
|
||||
.codicon-testing-error-icon {
|
||||
color: var(--vscode-testing-iconErrored);
|
||||
}
|
||||
|
||||
.monaco-workbench .codicon-testing-failed-icon {
|
||||
color: var(--vscode-testing-iconFailed);
|
||||
}
|
||||
.codicon-testing-failed-icon {
|
||||
color: var(--vscode-testing-iconFailed);
|
||||
}
|
||||
|
||||
.monaco-workbench .codicon-testing-passed-icon {
|
||||
color: var(--vscode-testing-iconPassed);
|
||||
}
|
||||
.codicon-testing-passed-icon {
|
||||
color: var(--vscode-testing-iconPassed);
|
||||
}
|
||||
|
||||
.monaco-workbench .codicon-testing-queued-icon {
|
||||
color: var(--vscode-testing-iconQueued);
|
||||
}
|
||||
.codicon-testing-queued-icon {
|
||||
color: var(--vscode-testing-iconQueued);
|
||||
}
|
||||
|
||||
.monaco-workbench .codicon-testing-skipped-icon {
|
||||
color: var(--vscode-testing-iconSkipped);
|
||||
}
|
||||
.codicon-testing-skipped-icon {
|
||||
color: var(--vscode-testing-iconSkipped);
|
||||
}
|
||||
|
||||
.monaco-workbench .codicon-testing-unset-icon {
|
||||
color: var(--vscode-testing-iconUnset);
|
||||
.codicon-testing-unset-icon {
|
||||
color: var(--vscode-testing-iconUnset);
|
||||
}
|
||||
}
|
||||
|
||||
/** -- explorer */
|
||||
|
|
|
|||
Loading…
Reference in a new issue