Skip to content

Commit

Permalink
fix: font.css not auto-generated from spectrum-css
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@adixon-adobe @Westbrook
adixon-adobe authored and Westbrook committed Dec 2, 2019
1 parent 87b0590 commit 2621a8a
Show file tree
Hide file tree
Showing 4 changed files with 192 additions and 61 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
124 changes: 94 additions & 30 deletions packages/styles/fonts.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
123 changes: 92 additions & 31 deletions scripts/spectrum-vars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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.');
});
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 2621a8a

Please # to comment.