From b2b9abd3bc5269e1ec42de3db99c926ceecd3f39 Mon Sep 17 00:00:00 2001 From: Alex Dixon Date: Tue, 26 Nov 2019 15:42:16 -0600 Subject: [PATCH 1/3] fix: font.css not auto-generated from spectrum-css Added the @spectrum-css/commons package since we need to source our fonts.css from 2 file to get what we need. Also updated the generation script to allow building from multiple source files. Fixes #308 --- package.json | 1 + packages/styles/fonts.css | 124 +++++++++++++++++++++++++++++--------- scripts/spectrum-vars.js | 123 +++++++++++++++++++++++++++---------- yarn.lock | 5 ++ 4 files changed, 192 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index d7f1135a8b..1ef864a526 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "@open-wc/polyfills-loader": "^0.3.2", "@open-wc/testing": "^2.3.3", "@open-wc/testing-karma": "^3.1.24", + "@spectrum-css/commons": "^2.0.0", "@spectrum-css/link": "^2.0.2", "@spectrum-css/rule": "^2.0.2", "@spectrum-css/table": "^2.0.2", diff --git a/packages/styles/fonts.css b/packages/styles/fonts.css index 1914df1708..8f6d50d719 100755 --- a/packages/styles/fonts.css +++ b/packages/styles/fonts.css @@ -10,46 +10,110 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +/* stylelint-disable */ + +/* +Copyright 2019 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + :root, :host { - font-family: var(--spectrum-global-font-family-base); - font-size: var(--spectrum-alias-font-size-default); + font-family: var(--spectrum-font-family-base); + font-size: var(--spectrum-text-size); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } + + &:lang(zh-Hans) { + font-family: var(--spectrum-font-family-zhhans); + } + + &:lang(zh-Hant) { + font-family: var(--spectrum-font-family-zhhant); + } + + &:lang(zh) { + font-family: var(--spectrum-font-family-zh); + } + + &:lang(ko) { + font-family: var(--spectrum-font-family-ko); + } + &:lang(ja) { + font-family: var(--spectrum-font-family-ja); + } +} + +/* +Copyright 2019 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +:root { --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - --spectrum-font-fallbacks-serif: serif; - --spectrum-font-fallbacks-mono: monospace; - --spectrum-font-family-ar: myriad-arabic, + + /* Not used + --spectrum-font-fallbacks-serif: serif; + --spectrum-font-fallbacks-mono: monospace; + --spectrum-font-family-article: adobe-clean-serif, 'Source Serif', var(--spectrum-font-fallbacks-serif); + --spectrum-font-family-article-ar: adobe-arabic, var(--spectrum-font-fallbacks-serif); + --spectrum-font-family-article-he: adobe-hebrew, var(--spectrum-font-fallbacks-serif); + --spectrum-font-family-article-ja: source-han-serif-japanese, var(--spectrum-font-fallbacks-serif); + --spectrum-font-family-article-ko: source-han-serif-korean, var(--spectrum-font-fallbacks-serif); + --spectrum-font-family-article-zh-hans: source-han-serif-sc, var(--spectrum-font-fallbacks-serif); + --spectrum-font-family-article-zh-hant: source-han-serif-tc, 'MingLiu', var(--spectrum-font-fallbacks-serif); + --spectrum-font-family-code: source-code-pro, 'Source Code Pro', var(--spectrum-font-fallbacks-mono); + --spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base); + */ + + --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', + 'Source Sans Pro', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-han: 'adobe-clean-han-japanese', + var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-article: adobe-clean-serif, 'Source Serif', - var(--spectrum-font-fallbacks-serif); - --spectrum-font-family-article-ar: adobe-arabic, - var(--spectrum-font-fallbacks-serif); - --spectrum-font-family-article-he: adobe-hebrew, - var(--spectrum-font-fallbacks-serif); - --spectrum-font-family-article-ja: source-han-serif-japanese, - var(--spectrum-font-fallbacks-serif); - --spectrum-font-family-article-ko: source-han-serif-korean, - var(--spectrum-font-fallbacks-serif); - --spectrum-font-family-article-zh-hans: source-han-serif-sc, - var(--spectrum-font-fallbacks-serif); - --spectrum-font-family-article-zh-hant: source-han-serif-tc, - var(--spectrum-font-fallbacks-serif); - --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', + --spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-code: source-code-pro, 'Source Code Pro', - var(--spectrum-font-fallbacks-mono); - --spectrum-font-family-han: adobe-clean-han-japanese, + --spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', + 'Heiti SC Light', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-zh: var(--spectrum-font-family-zhhans); + --spectrum-font-family-zhhant: 'adobe-clean-han-traditional', + 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', + var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', + 'Apple Gothic', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic', + '\\30E1 \\30A4 \\30EA \\30AA', + '\\30D2 \\30E9 \\30AE \\30CE \\89D2 \\30B4 Pro W3', + 'Hiragino Kaku Gothic Pro W3', 'Osaka', + '\\FF2D \\FF33 \\FF30 \\30B4 \\30B7 \\30C3 \\30AF', 'MS PGothic', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-he: var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-zh: var(--spectrum-font-family-han); - --spectrum-font-family-zhhans: var(--spectrum-font-family-han); - --spectrum-font-family-ko: var(--spectrum-font-family-han); - --spectrum-font-family-ja: var(--spectrum-font-family-han); - --spectrum-font-family-condensed: adobe-clean-condensed, - var(--spectrum-font-family-base); --spectrum-text-size: var(--spectrum-alias-font-size-default); --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium); --spectrum-text-size-text-label: var(--spectrum-label-text-size); --spectrum-line-height-text-label: var(--spectrum-label-text-line-height); } + +/* stylelint-enable */ diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js index 0be66a625b..285f21a73c 100755 --- a/scripts/spectrum-vars.js +++ b/scripts/spectrum-vars.js @@ -20,49 +20,67 @@ const license = fs.readFileSync( path.join(__dirname, '..', 'config', 'license.js') ); -const processCSS = (srcPath, dstPath, identifier) => { - fs.readFile(srcPath, 'utf8', function(error, data) { - if (error) { - return console.log(error); - } - - /* lit-html is a JS litteral, so `\` escapes by default. - * for there to be unicode characters, the escape must - * escape itself... - */ - let result = data.replace(/\\/g, '\\\\'); - - // possible selectors to replace - const selector1 = `.spectrum--${identifier}`; - const selector2 = '.spectrum'; - - // new selector values - const shadowSelector = ':root,\n:host'; - - if (data.indexOf(selector1) >= 0) { - result = result.replace(selector1, shadowSelector); - } else if (data.indexOf(selector2) >= 0) { - result = result.replace(selector2, shadowSelector); - result = result.replace( - `.spectrum--medium, +const processCSSData = (data, identifier) => { + /* lit-html is a JS litteral, so `\` escapes by default. + * for there to be unicode characters, the escape must + * escape itself... + */ + let result = data.replace(/\\/g, '\\\\'); + + // possible selectors to replace + const selector1 = `.spectrum--${identifier}`; + const selector2 = '.spectrum'; + + // new selector values + const shadowSelector = ':root,\n:host'; + + if (data.indexOf(selector1) >= 0) { + result = result.replace(selector1, shadowSelector); + } else if (data.indexOf(selector2) >= 0) { + result = result.replace(selector2, shadowSelector); + result = result.replace( + `.spectrum--medium, .spectrum--large`, - shadowSelector - ); - result = result.replace( - `.spectrum--darkest, + shadowSelector + ); + result = result.replace( + `.spectrum--darkest, .spectrum--dark, .spectrum--light, .spectrum--lightest`, - shadowSelector - ); + shadowSelector + ); + } + + return result; +}; + +const processCSS = (srcPath, dstPath, identifier) => { + fs.readFile(srcPath, 'utf8', function(error, data) { + if (error) { + return console.log(error); } + let result = processCSSData(data, identifier); result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`; fs.writeFile(dstPath, result, 'utf8'); }); }; +// For fonts.css we need to combine 2 source files into 1 +const processMultiSourceCSS = (srcPaths, dstPath, identifier) => { + let result = ''; + + for (const srcPath of srcPaths) { + let data = fs.readFileSync(srcPath, 'utf8'); + result = `${result}\n${processCSSData(data, identifier)}`; + } + + result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`; + fs.writeFile(dstPath, result, 'utf8'); +}; + // where is spectrum-css? // TODO: use resolve package to find node_modules const spectrumPath = path.resolve( @@ -126,6 +144,49 @@ cores.forEach(async (core) => { processes.push(processCSS(srcPath, dstPath, 'typography')); } +{ + // Typography + const typographyPath = path.join( + __dirname, + '..', + 'node_modules', + '@spectrum-css', + 'typography' + ); + + // Commons + const commonsPath = path.join( + __dirname, + '..', + 'node_modules', + '@spectrum-css', + 'commons' + ); + + // typography.css + { + const srcPath = path.join(typographyPath, 'dist', 'index-vars.css'); + const dstPath = path.resolve( + path.join(__dirname, '..', 'packages', 'styles', 'typography.css') + ); + console.log(`processing typography`); + processes.push(processCSS(srcPath, dstPath, 'typography')); + } + + // fonts.css (2 sources so a little tricky) + { + const srcPath1 = path.join(typographyPath, 'font.css'); + const srcPath2 = path.join(commonsPath, 'fonts.css'); + const dstPath = path.resolve( + path.join(__dirname, '..', 'packages', 'styles', 'fonts.css') + ); + console.log(`processing fonts from commons & typography`); + processes.push( + processMultiSourceCSS([srcPath1, srcPath2], dstPath, 'typography') + ); + } +} + Promise.all(processes).then(() => { console.log('complete.'); }); diff --git a/yarn.lock b/yarn.lock index daa0021604..93c1e8b1c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2763,6 +2763,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/circleloader/-/circleloader-2.0.2.tgz#03dac5ae543f6ec302ca86d6a2149a4afd03b94e" integrity sha512-pIaPHo165hlAVItJOeSqI0C99i3kqMjJ0M7hvVG4IWf97VB2qurzEbqdxsGg/JFmUx/Pv2K0IzuUG7cw/SeINQ== +"@spectrum-css/commons@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-2.0.0.tgz#556fc2b2904e624657245eae97dce85a13c9059a" + integrity sha512-GGbhwFwK7Bi2vHXWPM4hRcKpbFq/V9tVcyucjU3+Tws6UHArienkXuWSh1PrLZWUDCGCICCXU83S2aUZ6558Aw== + "@spectrum-css/dropdown@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@spectrum-css/dropdown/-/dropdown-2.1.1.tgz#2db88de635c5e24841b0db85674744856867577a" From a503913f2495c50aecbb26a61dbfe004be46bd40 Mon Sep 17 00:00:00 2001 From: Alex Dixon Date: Tue, 26 Nov 2019 16:15:26 -0600 Subject: [PATCH 2/3] fix: swap the order here so the variables are defined first --- packages/styles/fonts.css | 92 +++++++++++++++++++-------------------- scripts/spectrum-vars.js | 4 +- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/styles/fonts.css b/packages/styles/fonts.css index 8f6d50d719..1572d2fee2 100755 --- a/packages/styles/fonts.css +++ b/packages/styles/fonts.css @@ -24,52 +24,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -:root, -:host { - font-family: var(--spectrum-font-family-base); - font-size: var(--spectrum-text-size); - - &:lang(ar) { - font-family: var(--spectrum-font-family-ar); - } - - &:lang(he) { - font-family: var(--spectrum-font-family-he); - } - - &:lang(zh-Hans) { - font-family: var(--spectrum-font-family-zhhans); - } - - &:lang(zh-Hant) { - font-family: var(--spectrum-font-family-zhhant); - } - - &:lang(zh) { - font-family: var(--spectrum-font-family-zh); - } - - &:lang(ko) { - font-family: var(--spectrum-font-family-ko); - } - - &:lang(ja) { - font-family: var(--spectrum-font-family-ja); - } -} - -/* -Copyright 2019 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - :root { --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; @@ -116,4 +70,50 @@ governing permissions and limitations under the License. --spectrum-line-height-text-label: var(--spectrum-label-text-line-height); } +/* +Copyright 2019 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +:root, +:host { + font-family: var(--spectrum-font-family-base); + font-size: var(--spectrum-text-size); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } + + &:lang(zh-Hans) { + font-family: var(--spectrum-font-family-zhhans); + } + + &:lang(zh-Hant) { + font-family: var(--spectrum-font-family-zhhant); + } + + &:lang(zh) { + font-family: var(--spectrum-font-family-zh); + } + + &:lang(ko) { + font-family: var(--spectrum-font-family-ko); + } + + &:lang(ja) { + font-family: var(--spectrum-font-family-ja); + } +} + /* stylelint-enable */ diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js index 285f21a73c..2bc7229ba7 100755 --- a/scripts/spectrum-vars.js +++ b/scripts/spectrum-vars.js @@ -175,8 +175,8 @@ cores.forEach(async (core) => { // fonts.css (2 sources so a little tricky) { - const srcPath1 = path.join(typographyPath, 'font.css'); - const srcPath2 = path.join(commonsPath, 'fonts.css'); + const srcPath1 = path.join(commonsPath, 'fonts.css'); + const srcPath2 = path.join(typographyPath, 'font.css'); const dstPath = path.resolve( path.join(__dirname, '..', 'packages', 'styles', 'fonts.css') ); From 547f00d67d44cfdf6479e527ccf841beb2e67dc3 Mon Sep 17 00:00:00 2001 From: Alex Dixon Date: Mon, 2 Dec 2019 11:10:07 -0600 Subject: [PATCH 3/3] fix: code review feedback Fix :root selector, move @spectrum-css/commons dependency to styles, and DRY file writing logic --- package.json | 1 - packages/styles/fonts.css | 3 ++- packages/styles/package.json | 1 + scripts/spectrum-vars.js | 17 ++++++++++------- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 1ef864a526..d7f1135a8b 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,6 @@ "@open-wc/polyfills-loader": "^0.3.2", "@open-wc/testing": "^2.3.3", "@open-wc/testing-karma": "^3.1.24", - "@spectrum-css/commons": "^2.0.0", "@spectrum-css/link": "^2.0.2", "@spectrum-css/rule": "^2.0.2", "@spectrum-css/table": "^2.0.2", diff --git a/packages/styles/fonts.css b/packages/styles/fonts.css index 1572d2fee2..20e03fab8f 100755 --- a/packages/styles/fonts.css +++ b/packages/styles/fonts.css @@ -24,7 +24,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -:root { +:root, +:host { --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; diff --git a/packages/styles/package.json b/packages/styles/package.json index fb89c459f7..31428cea36 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -35,6 +35,7 @@ "lit-html": "^1.0.0" }, "devDependencies": { + "@spectrum-css/commons": "^2.0.0", "@spectrum-css/typography": "^2.0.2", "@spectrum-css/vars": "^2.0.2" } diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js index 2bc7229ba7..64bfc8fc4a 100755 --- a/scripts/spectrum-vars.js +++ b/scripts/spectrum-vars.js @@ -28,7 +28,8 @@ const processCSSData = (data, identifier) => { let result = data.replace(/\\/g, '\\\\'); // possible selectors to replace - const selector1 = `.spectrum--${identifier}`; + const selector1 = + identifier == ':root ' ? identifier : `.spectrum--${identifier}`; const selector2 = '.spectrum'; // new selector values @@ -55,6 +56,11 @@ const processCSSData = (data, identifier) => { return result; }; +const writeProcessedCSSToFile = (dstPath, contents) => { + result = `${license}\n/* stylelint-disable */\n${contents}\n/* stylelint-enable */`; + fs.writeFile(dstPath, result, 'utf8'); +}; + const processCSS = (srcPath, dstPath, identifier) => { fs.readFile(srcPath, 'utf8', function(error, data) { if (error) { @@ -62,9 +68,7 @@ const processCSS = (srcPath, dstPath, identifier) => { } let result = processCSSData(data, identifier); - result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`; - - fs.writeFile(dstPath, result, 'utf8'); + writeProcessedCSSToFile(dstPath, result); }); }; @@ -77,8 +81,7 @@ const processMultiSourceCSS = (srcPaths, dstPath, identifier) => { result = `${result}\n${processCSSData(data, identifier)}`; } - result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`; - fs.writeFile(dstPath, result, 'utf8'); + writeProcessedCSSToFile(dstPath, result); }; // where is spectrum-css? @@ -182,7 +185,7 @@ cores.forEach(async (core) => { ); console.log(`processing fonts from commons & typography`); processes.push( - processMultiSourceCSS([srcPath1, srcPath2], dstPath, 'typography') + processMultiSourceCSS([srcPath1, srcPath2], dstPath, ':root ') ); } }