Support plist themes

Author: andrewbranch

scripts/scrapeBuiltinExtensions.js

@@ -4,7 +4,7 @@ const util = require('util');
 const glob = require('glob');
 const path = require('path');
 const processExtension = require('../src/processExtension');
-const { requireGrammar } = require('../src/utils');
+const { requirePlistOrJson } = require('../src/utils');
 
 const copyFile = util.promisify(fs.copyFile);
 const writeFile = util.promisify(fs.writeFile);
@@ -30,13 +30,13 @@ glob(path.resolve(__dirname, '../vscode/extensions/*/package.json'), async (err,
         ...await newManifestPromise,
         ...await Object.keys(extension.grammars).reduce(async (newManifestPromise, scopeName) => {
           const grammar = extension.grammars[scopeName];
-          const content = await requireGrammar(grammar.path);
+          const content = await requirePlistOrJson(grammar.path);
           let destPath = grammarPath(path.basename(grammar.path));
           const newContent = processTmJson(content);
           // Different languages are sometimes named the same thing
           languageId++;
           if (await exists(destPath)) {
-            const existingGrammar = await requireGrammar(destPath);
+            const existingGrammar = await requirePlistOrJson(destPath);
             if (existingGrammar.scopeName !== scopeName) {
               const [baseName, ...ext] = path.basename(grammar.path).split('.');
               const renamed = [baseName, languageId, ...ext].join('.');

src/processExtension.js

@@ -1,6 +1,6 @@
 // @ts-check
 const path = require('path');
-const { getLanguageNames, requireJson, requireGrammar } = require('./utils');
+const { getLanguageNames, requireJson, requirePlistOrJson } = require('./utils');
 
 async function processExtension(packageJsonPath) {
   const packageJson = requireJson(packageJsonPath);
@@ -10,7 +10,7 @@ async function processExtension(packageJsonPath) {
     const manifest = await Promise.all(
       packageJson.contributes.grammars.map(async grammar => {
         const sourcePath = path.resolve(path.dirname(packageJsonPath), grammar.path);
-        const content = await requireGrammar(sourcePath);
+        const content = await requirePlistOrJson(sourcePath);
         const { scopeName } = content;
         const languageRegistration = packageJson.contributes.languages.find(l => l.id === grammar.language);
 
@@ -44,7 +44,7 @@ async function processExtension(packageJsonPath) {
     const manifest = await Promise.all(
       packageJson.contributes.themes.map(async theme => {
         const sourcePath = path.resolve(path.dirname(packageJsonPath), theme.path);
-        const themeContents = requireJson(sourcePath);
+        const themeContents = await requirePlistOrJson(sourcePath);
         return {
           id: theme.id || path.basename(theme.path).split('.')[0],
           path: sourcePath,

src/utils.js

@@ -72,7 +72,7 @@ function sanitizeForClassName(str) {
 
 const readFile = util.promisify(fs.readFile);
 const requireJson = /** @param {string} pathName */ pathName => JSON5.parse(fs.readFileSync(pathName, 'utf8'));
-const requireGrammar = /** @param {string} pathName */ async pathName =>
+const requirePlistOrJson = /** @param {string} pathName */ async pathName =>
   path.extname(pathName) === '.json' ? requireJson(pathName) : plist.parse(await readFile(pathName, 'utf8'));
 
 module.exports = {
@@ -83,5 +83,5 @@ module.exports = {
   getLanguageNames,
   sanitizeForClassName,
   requireJson,
-  requireGrammar
+  requirePlistOrJson
 };

test/integration/cases/xml-theme.expected.html

@@ -0,0 +1,69 @@
+<pre class="oceanic-next vscode-highlight" data-language="js"><code class="vscode-highlight-code"><span class="vscode-highlight-line"><span class="mtk7">console</span><span class="mtk5">.</span><span class="mtk8">log</span><span class="mtk1">(</span><span class="mtk5">"</span><span class="mtk6">Hello, world!</span><span class="mtk5">"</span><span class="mtk1">)</span><span class="mtk5">;</span></span></code></pre>
+<style class="vscode-highlight-styles">:root {
+  --vscode-highlight-padding-v: 1rem;
+  --vscode-highlight-padding-h: 1.5rem;
+  --vscode-highlight-padding-top: var(--vscode-highlight-padding-v);
+  --vscode-highlight-padding-right: var(--vscode-highlight-padding-h);
+  --vscode-highlight-padding-bottom: var(--vscode-highlight-padding-v);
+  --vscode-highlight-padding-left: var(--vscode-highlight-padding-h);
+  --vscode-highlight-border-radius: 8px;
+
+  --vscode-highlight-line-highlighted-background-color: transparent;
+  --vscode-highlight-line-highlighted-border-width: 4px;
+  --vscode-highlight-line-highlighted-border-color: transparent;
+}
+
+.vscode-highlight {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-top: 1rem;
+  padding-top: var(--vscode-highlight-padding-top);
+  padding-bottom: 1rem;
+  padding-bottom: var(--vscode-highlight-padding-bottom);
+  border-radius: 8px;
+  border-radius: var(--vscode-highlight-border-radius);
+  font-feature-settings: normal;
+}
+
+.vscode-highlight-code {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.vscode-highlight-line {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 1.5rem;
+  padding-left: var(--vscode-highlight-padding-left);
+  padding-right: 1.5rem;
+  padding-right: var(--vscode-highlight-padding-right);
+}
+
+.vscode-highlight-line-highlighted {
+  background-color: var(--vscode-highlight-line-highlighted-background-color);
+  box-shadow: inset var(--vscode-highlight-line-highlighted-border-width) 0 0 0 var(--vscode-highlight-line-highlighted-border-color);
+}
+.oceanic-next {
+background-color: #1B2B34;
+color: #CDD3DE;
+}
+
+.oceanic-next .mtk1 { color: #CDD3DE; }
+.oceanic-next .mtk2 { color: #1B2B34; }
+.oceanic-next .mtk3 { color: #65737E; }
+.oceanic-next .mtk4 { color: #F99157; }
+.oceanic-next .mtk5 { color: #5FB3B3; }
+.oceanic-next .mtk6 { color: #99C794; }
+.oceanic-next .mtk7 { color: #FAC863; }
+.oceanic-next .mtk8 { color: #6699CC; }
+.oceanic-next .mtk9 { color: #D8DEE9; }
+.oceanic-next .mtk10 { color: #EC5F67; }
+.oceanic-next .mtk11 { color: #EB606B; }
+.oceanic-next .mtk12 { color: #BB80B3; }
+.oceanic-next .mtk13 { color: #C594C5; }
+.oceanic-next .mtk14 { color: #AB7967; }
+.oceanic-next .mtk15 { color: #F2777A; }
+.oceanic-next .mtki { font-style: italic; }
+.oceanic-next .mtkb { font-weight: bold; }
+.oceanic-next .mtku { text-decoration: underline; text-underline-position: under; }</style>